/* 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; }
}

/* top bar: the app / site name sits in the middle — [ empty | name | actions ]. kite-polish.js adds
   .kp-center only while the actions fit beside the name in at most two rows; otherwise the header
   keeps its normal row, so nothing piles up or overlaps. */
header.kp-center { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; }
header.kp-center > .brand { grid-column: 2; grid-row: 1; justify-self: center; }
header.kp-center > .header-actions { grid-column: 3; grid-row: 1; justify-self: end; justify-content: flex-end; flex-wrap: wrap; row-gap: .4rem; min-width: 0; }
@media (max-width: 640px) {
  header:has(> .brand):has(> .header-actions) { justify-content: center; }
  header:has(> .brand):has(> .header-actions) > .header-actions { justify-content: center; }
}

/* ==========================================================================
   Human-Crafted Organic UI/UX Polish (Non-AI Feel, High Usability)
   ========================================================================== */
:root {
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle, authentic card depths & borders */
.pillar-card, .faq-card, .inv-card, .kbg-card, .prod-card, .pos-item-card, .kite-auth-modal {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring), border-color 0.2s ease !important;
}
.pillar-card:hover, .pos-item-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.3) !important;
}

/* Clean, modern, trustworthy form inputs */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea {
  font-family: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(15, 23, 42, 0.75) !important;
  color: #f8fafc !important;
  border-radius: 9px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
  outline: none !important;
}

/* Authentic, tactile button feedback */
.btn-hero-primary, .btn-auth-submit, .btn-cart, .btn-header-cta {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  transition: transform 0.15s var(--ease-spring), box-shadow 0.15s ease !important;
  cursor: pointer !important;
}
.btn-hero-primary:active, .btn-auth-submit:active, .btn-cart:active, .btn-header-cta:active {
  transform: scale(0.97) !important;
}

/* Clean, responsive touch controls for mobile screens */
@media (max-width: 768px) {
  .hero-headline { font-size: 2.15rem !important; line-height: 1.2 !important; }
  .hero-description { font-size: 0.95rem !important; }
  .trust-ribbon { border-radius: 16px !important; gap: 0.85rem !important; padding: 0.85rem 1rem !important; }
  .trust-chip { font-size: 0.75rem !important; }
  .btn-hero-primary, .btn-hero-secondary { width: 100% !important; justify-content: center !important; }
  .pos-sim-layout { grid-template-columns: 1fr !important; }
  .studio-tabs-bar { justify-content: flex-start !important; }
}