/* ============================================================
   NexSlot app-wide reskin (loaded from pwa_head.php on every page)
   Conservative by design: retypes and reskins existing components
   (fonts, buttons, badges, inputs, cards) without changing layout.
   Accent stays dynamic: --ac follows the page's theme variables.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap');

:root{
  --ac: var(--pink, var(--ns-primary, var(--primary-pink, #5B5BD6)));
}

/* Type: Onest everywhere (falls back to each page's stack) */
body{ font-family:'Onest','Inter',system-ui,-apple-system,sans-serif !important;
      -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ letter-spacing:-.02em; }

/* Buttons — pill silhouette, springy hover (keeps each page's colors) */
.modern-btn, .ig-btn, .auth-btn, .btn-primary, .btn-secondary{
  border-radius:9999px !important;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, filter .2s,
             background .2s, color .2s, border-color .2s !important;
}
@media (hover:hover){
  .modern-btn:hover, .ig-btn:hover, .auth-btn:hover, .btn-primary:hover, .btn-secondary:hover{
    transform:translateY(-1px) scale(1.02);
  }
  .modern-btn:active, .auth-btn:active{ transform:scale(.98); }
}

/* Status + tag pills */
.status-badge, .apt-tag, .pill, .chip, .fchip, .ig-chip{ border-radius:9999px !important; }

/* Cards & modals — softer, larger radius */
.stat-card, .cl-card, .ig-card, .modal, .mb-modal, .as-sheet, .cd-fact,
.dashboard-card, .card{ border-radius:1.25rem; }

/* Inputs — accent focus ring */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], select, textarea{
  font-family:inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid color-mix(in srgb, var(--ac) 55%, transparent);
  outline-offset:1px;
}

/* Scrollbars (WebKit) — quiet, rounded */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--ac) 18%, #c9c9ce);
  border-radius:9999px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-track{ background:transparent; }

/* Selection in brand accent */
::selection{ background:color-mix(in srgb, var(--ac) 25%, transparent); }

/* ── Grid blowout guard: children of layout grids may always shrink ──
   (a non-wrapping scroller inside a grid column otherwise widens the page) */
.mk-grid > *, .cl-list > *, .stat-grid > *, .dsh-kpis > *, .cd-facts > *,
.finance-grid > *, .adm-health-grid > *{ min-width:0; }

/* ── Tables: never break the viewport — scroll inside their container ── */
.table-container, .table-responsive, .inv-desktop-table, .up-table-wrap,
.iv-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table, .inv-table, .up-table, .iv-table, .inv-detail-table{ min-width:100%; }
.data-table th, .inv-table th, .up-table th, .iv-table th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
@media (max-width:820px){
  .up-table, .iv-table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ── Page headers: consistent editorial scale ── */
.pg-title, .ig-h1, .page-title{ letter-spacing:-.02em; font-weight:700; }
.pg-sub, .ig-sub, .page-subtitle{ color:var(--text-tertiary,#9CA3AF); }

/* ── Touch targets & focus (mobile friendliness) ── */
@media (max-width:640px){
  .modern-btn, .cl-btn, .as-btn, .fchip{ min-height:2.5rem; }
}

/* ── Empty states ── */
.cl-empty, .mk-empty, .empty-state{ border-radius:1.25rem; }

/* Motion discipline */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}