/* Kite Suite — shared polish layer for websites and admin panels that carry their own styles.
   Safe, additive rules only: readable type, tidy headers, tables that scroll instead of spilling,
   badges that never break, visible keyboard focus, calmer scrollbars. Loaded after each page's own CSS. */

html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01"; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* numbers line up everywhere */
table, .kpi-val, .kpi-card, [class*="kpi"] [class*="val"], [class*="amount"], [class*="total"] { font-variant-numeric: tabular-nums; }
code, kbd, samp, pre, .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* keyboard focus you can see (mouse clicks stay clean) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(99, 102, 241, .35); }

/* calmer, thinner scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .35) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .32); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .55); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* headers: brand never wraps; action buttons stay on one line and the row scrolls sideways when full */
header h1, header .brand-text h1, header [class*="brand"] h1, header [class*="title"] h1 { white-space: nowrap; }
header button, header .btn, header a[class*="btn"], header [class*="pill"], header [class*="badge"] { white-space: nowrap; }
.kp-hscroll { overflow-x: auto !important; overflow-y: hidden; flex-wrap: nowrap !important; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.kp-hscroll::-webkit-scrollbar { display: none; }
.kp-hscroll.kp-end { -webkit-mask-image: none; mask-image: none; }
.kp-hscroll > * { flex-shrink: 0; }

/* badges, counters and chips never break into two lines */
[class*="badge"], [class*="count"], [class*="chip"], .v-count, .nav-count { white-space: nowrap; }
[class*="nav-item"] > span:last-child:not(:first-child), [class*="nav-link"] [class*="badge"] { flex-shrink: 0; }

/* tables: wide tables scroll inside their card instead of cutting off the last columns */
.kp-tscroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.kp-tscroll > table { min-width: 100%; }
/* existing scroll containers around tables show a visible scrollbar so cut-off columns are discoverable */
[class*="table-scroll"], [class*="table-wrap"], [class*="tbl-wrap"] { scrollbar-width: thin; }
table th { white-space: nowrap; }

/* images and media never overflow */
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }

/* comfortable tap targets on touch screens */
@media (pointer: coarse) { button, .btn, [role="button"], select, input[type="checkbox"], input[type="radio"] { min-height: 40px; } input[type="checkbox"], input[type="radio"] { min-width: 20px; } }

/* print: no chrome, just content */
@media print { header, nav, aside, .sidebar, [class*="sidebar"], .toast-container, [class*="toast"] { display: none !important; } body { background: #fff !important; color: #111 !important; } }

/* phone widths: headers, badges and grids wrap instead of pushing the page sideways */
@media (max-width: 640px) {
  header, .master-header, .app-header, .site-header, .header, .top-header, .topbar, .mbb-header { flex-wrap: wrap; row-gap: .5rem; max-width: 100%; }
  .master-header, .top-header { height: auto; min-height: 56px; padding-top: .6rem; padding-bottom: .6rem; position: static; }
  .header-actions, .mbb-header-right, .brand-group, .brand-section, .nav-actions, .header-right, .card-header-flex, .card-header-flex > div { flex-wrap: wrap; min-width: 0; max-width: 100%; row-gap: .5rem; }
  .brand-group > *, .header-actions > * { min-width: 0; }
  .brand-group h1, .brand-group h2, .brand-section h1 { white-space: normal; font-size: 1.05rem; line-height: 1.25; }
  .brand-group p, .brand-group small, .brand-section p { white-space: normal; }
  .super-badge { display: none; }
  .header-status-pill { white-space: normal; max-width: 100%; }
  .hero-badge, .badge-pill { white-space: normal; max-width: 100%; text-align: center; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  main, section, .container, .content-card { min-width: 0; max-width: 100%; }
  img, video, canvas, svg, iframe { max-width: 100%; }
  .footer-top-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
  .footer-top-grid > :first-child { grid-column: 1 / -1; }
  body > [class*="glow"], body > [class*="blob"], [class*="glow-sphere"] { max-width: 100vw; overflow: hidden; }
  body > section, body > header, body > footer, body > main { width: 100%; }
  .admin-container { flex-direction: column; padding: 1rem; gap: 1rem; }
  .admin-sidebar { width: 100%; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: .4rem; }
  .admin-sidebar .nav-section-title { display: none; }
  .admin-sidebar .nav-item { flex: 0 0 auto; white-space: nowrap; }
  table { display: block; max-width: 100%; overflow-x: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}