/* =====================================================================
   REFINE LAYER (refine.css) - app-wide finishing pass, 2026-09-10
   Loaded LAST (theme -> app -> learn -> refine). Owner directive: the whole
   application must feel like the six new dashboards - premium, finished,
   nothing rough, with attractive but purposeful motion.

   STRATEGY: 34 of the 47 pages are built from six shared primitives
   (page-head, card, table, form-control, btn, pill). This file re-skins THOSE
   primitives once, so every page lifts together and stays consistent. It is
   ADDITIVE and token-driven (dark mode follows automatically) and it changes
   NO layout rule that other code depends on:
     - .content padding is NOT touched (Chat.aspx derives its height from it)
     - .fld-float / .ff-up (app.js floating labels) keep their contract
     - table.resp-cards (app.js stamps it on every table) keeps its contract
     - .page-head stays hidden (the sticky topbar carries the title)
   Pure ASCII. Every animation rides theme.css's prefers-reduced-motion guard.
   ===================================================================== */

/* ------------------------------------------------------------ tokens */
:root {
    --r-2xl: 16px;
    --r-3xl: 20px;
    --ease-out: cubic-bezier(.16, 1, .3, 1);      /* springy settle for entrances */
    --dur-fast: .15s;
    --dur-slow: .45s;
    --sh-card: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -14px rgba(15,23,42,.14);
    --sh-card-hover: 0 2px 4px rgba(15,23,42,.05), 0 18px 40px -18px rgba(15,23,42,.22);
    --sh-pop: 0 24px 60px -20px rgba(15,23,42,.30);
}
[data-theme="dark"] {
    --sh-card: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.6);
    --sh-card-hover: 0 2px 4px rgba(0,0,0,.4), 0 20px 44px -18px rgba(0,0,0,.7);
    --sh-pop: 0 24px 60px -20px rgba(0,0,0,.75);
}

/* ------------------------------------------------------------ base type */
html { scroll-behavior: smooth; }
body { font-size: 13.5px; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.015em; }
a { text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
::selection { background: var(--brand-100); }

/* ------------------------------------------------------------ shell */
.topbar {
    box-shadow: 0 1px 0 var(--border), 0 6px 20px -16px rgba(15,23,42,.25);
}
.tb-title { font-size: 15px; font-weight: 750; }
.topbar .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
.tb-avatar { width: 32px; height: 32px; border-radius: 10px;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-100); }
.tb-chip { border-radius: 999px; padding: 5px 11px; }

.side-link { border-radius: 10px; padding: 8px 11px; font-size: 13px;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.side-link:hover { transform: translateX(2px); }
.side-link.active { box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); }
.side-section { border-radius: 10px; }
.side-search input { border-radius: 10px; padding: 8px 10px 8px 30px; font-size: 12.5px; }
.brand-badge-lg { border-radius: 11px; }

/* ------------------------------------------------------------ cards */
.card {
    border-radius: 14px;
    box-shadow: var(--sh-card);
    transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.card-body { padding: 16px; }
.card.hover-lift:hover { box-shadow: var(--sh-card-hover); transform: translateY(-4px); }

/* card toolbar = a real panel header: bigger title, accent-tinted leading icon */
.table-toolbar {
    padding: 14px 16px; gap: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 60%, transparent), transparent);
}
.table-toolbar > span:first-child { font-size: 14px; letter-spacing: -.01em; color: var(--text); }
.table-toolbar > span:first-child > i { color: var(--accent); margin-right: 8px; }
.table-toolbar .form-label.mb-0 { font-size: 12px; color: var(--muted); font-weight: 600; }

/* inline edit / filter panel that sits between a toolbar and its table */
.card > .card-body[style*="surface-2"] { padding: 16px 16px 14px; }

/* ------------------------------------------------------------ tables */
.table-wrap { border-radius: 14px; }
.table-scroll { max-height: 64vh; }
table.table thead th {
    background: var(--surface-2);
    color: var(--text-soft);
    border-bottom: 1px solid var(--border-strong);
    font-size: 10.5px; letter-spacing: .07em; font-weight: 750;
    padding: 11px 13px;
}
table.table thead th .sort-ind { opacity: .35; }
table.table.sortable thead th[data-sort]:hover { color: var(--text); background: color-mix(in srgb, var(--surface-2) 70%, var(--border)); }
table.table tbody td { padding: 11px 13px; font-size: 13px; line-height: 1.45; }
table.table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 40%, transparent); }
table.table tbody tr { transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
table.table tbody tr:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
td.mono, .mono { font-variant-numeric: tabular-nums; }
/* opt-out for genuinely dense reports: add class="table table-dense".
   DESKTOP ONLY: under 761px app.js turns every table into stacked cards (table.resp-cards),
   and this selector (0,2,3) would outrank those card rules (0,1,2) and squeeze the phone
   cards down to 6px cells - found by the Reports pass. */
@media (min-width: 761px) {
    table.table.table-dense thead th { padding: 7px 10px; }
    table.table.table-dense tbody td { padding: 6px 10px; font-size: 12px; }
}
/* action buttons inside tables: comfortable, never skinny */
table.table .btn-sm { min-width: 36px; min-height: 34px; border-radius: 9px; }

/* ------------------------------------------------------------ buttons */
.btn {
    min-height: 40px; padding: .5rem 1rem; border-radius: 10px; font-size: 13.5px; font-weight: 650;
    transition: transform .14s var(--ease), box-shadow var(--dur) var(--ease),
                background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-sm { min-height: 34px; padding: .38rem .78rem; border-radius: 9px; font-size: 12.5px; }
.btn-lg { min-height: 48px; padding: .7rem 1.3rem; border-radius: 12px; font-size: 15px; }
.btn-primary { box-shadow: 0 8px 18px -8px rgba(244,0,9,.55), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-primary:hover { box-shadow: 0 14px 28px -10px rgba(244,0,9,.62), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-secondary { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--sh-xs); }
.btn-secondary:hover { background: var(--surface-2); box-shadow: var(--sh-sm); }
.btn-outline-secondary { border-color: var(--border-strong); background: var(--surface); }
.btn-outline-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.btn-excel { border-radius: 9px; min-height: 34px; }
.btn.is-loading::after { width: 14px; height: 14px; }

/* ------------------------------------------------------------ forms */
.fld-float > .form-control, .fld-float > .form-select {
    min-height: 46px; border-radius: 11px; border-color: var(--border);
    background: var(--surface); font-size: 13.5px;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.fld-float > .form-control:hover, .fld-float > .form-select:hover { border-color: var(--border-strong); }
.fld-float > .form-control:focus, .fld-float > .form-select:focus { border-color: var(--accent); box-shadow: var(--ring); }
.fld-float.ff-up > label.form-label { font-size: 11px; font-weight: 650; border-radius: 6px; }
.fld-float.ff-up.ff-focus > label.form-label { color: var(--accent-700); }
.form-control, .form-select { border-radius: 10px; }
.form-control.form-control-sm, .form-select.form-select-sm { border-radius: 9px; min-height: 36px; }
.table-search input.form-control { min-height: 36px; border-radius: 999px; padding-left: 32px; }
.table-search i { left: 12px; }
.fld-err { font-size: 11.5px; margin-top: 5px; }
.form-control.inv, .form-select.inv { border-color: var(--danger); box-shadow: 0 0 0 .18rem var(--danger-soft); }

/* ------------------------------------------------------------ messages (asp:Label alerts) */
.alert {
    display: flex; align-items: flex-start; gap: 10px;
    border-radius: 12px; padding: 12px 14px; font-size: 13px; font-weight: 600; line-height: 1.45;
    border: 1px solid transparent; animation: pop .22s var(--ease-out) both;
}
.alert::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 14px; line-height: 1.4; flex: 0 0 auto; }
.alert-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 18%, transparent); }
.alert-success::before { content: "\f058"; }
.alert-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 18%, transparent); }
.alert-danger::before { content: "\f06a"; }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
.alert-warning::before { content: "\f071"; }
.alert-info { background: var(--accent-tint); color: var(--accent-700); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.alert-info::before { content: "\f05a"; }

/* ------------------------------------------------------------ pills / status / badges */
.pill { padding: .2rem .62rem; font-size: 11px; line-height: 1.5; }
.badge-soft { padding: 4px 10px; font-size: 11px; }
.status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; margin-right: 6px; vertical-align: 1px; }
.chip { border-radius: 999px; padding: 6px 11px; }
.tint-indigo, .tint-green, .tint-amber, .tint-sky, .tint-purple, .tint-red { border-radius: 10px; }

/* ------------------------------------------------------------ KPI / stat / module cards */
.kpi, .stat-card, .mod-card { border-radius: 14px; }
.kpi .kpi-icon, .mod-ico, .stat-card .sc-ico { border-radius: 11px; }
.kpi .kpi-value, .sc-num, .mod-num { letter-spacing: -.025em; }
.stat-card:hover, .kpi:hover, .mod-card:hover { box-shadow: var(--sh-card-hover); }
.section-label { font-size: 11px; margin: 16px 2px 8px; }
.welcome { border-radius: 14px; box-shadow: var(--sh-card); }

/* ------------------------------------------------------------ overlays */
.cmp-modal { border-radius: 18px; box-shadow: var(--sh-pop); padding: 24px 24px 20px; animation: modal-in .28s var(--ease-out) both; }
.cmp-modal-ov { animation: fadeIn .18s var(--ease) both; }
.cmp-modal-ico { width: 46px; height: 46px; border-radius: 14px; }
.dropdown-menu { border-radius: 12px; box-shadow: var(--sh-pop); padding: 6px; }
.dropdown-item { border-radius: 8px; }
.toast-item { border-radius: 12px; border-left-width: 4px; box-shadow: var(--sh-pop); animation: toast-in .32s var(--ease-out) both; }
.toast-item.hide { animation: toast-out .22s var(--ease) forwards; }
.tooltip-inner { border-radius: 10px; }
.empty-state { padding: 52px 20px; }
.empty-state .ico { border-radius: 20px; }

/* ------------------------------------------------------------ motion language */
/* entrances settle with a spring instead of a flat ease */
.content > * { animation: rise-settle var(--dur-slow) var(--ease-out) both; }
.sc-num, .mod-num, .kpi-value, .hero-num, .score-pct { animation: pop .5s var(--ease-out) both; animation-delay: .2s; }
.sc-ico, .mod-ico, .kpi-icon, .empty-state .ico { animation: pop .45s var(--ease-out) both; animation-delay: .12s; }
/* a leading icon in a toolbar nods once when its card enters */
.table-toolbar > span:first-child > i { display: inline-block; animation: nod .6s var(--ease-out) both; animation-delay: .25s; }
/* focus rings breathe in rather than snap */
:focus-visible { transition: box-shadow var(--dur-fast) var(--ease); }

@keyframes rise-settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateX(28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(28px); } }
@keyframes nod { 0% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 60% { transform: rotate(7deg); } 100% { transform: rotate(0); } }

/* count-up numbers (app.js sets data-countup and drives the text) */
[data-countup] { font-variant-numeric: tabular-nums; }

/* page-leave: app.js adds body.is-leaving on internal navigation / postback. Done as a
   fixed overlay (not by fading .content) because .content and its children carry
   fill-mode:both entrance animations that would hold opacity:1 and defeat a plain fade.
   Sits above the topbar (1020) and below the mobile sidebar (1040) and the load bar (2000). */
body.is-leaving::after {
    content: ""; position: fixed; inset: 0; z-index: 1035; pointer-events: none;
    background: var(--bg); opacity: 0; animation: leave-dim .22s var(--ease) forwards;
}
@keyframes leave-dim { to { opacity: .5; } }

/* ------------------------------------------------------------ mobile finishing */
@media (max-width: 991.98px) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; }
    .card { border-radius: 14px; }
    .table-toolbar { padding: 13px 14px; }
    .fld-float > .form-control, .fld-float > .form-select { min-height: 48px; font-size: 14px; }
}
@media (max-width: 760px) {
    table.resp-cards tr { border-radius: 14px; box-shadow: var(--sh-card); }
    table.resp-cards td:first-child { font-size: 15px; }
    table.resp-cards td { padding: 12px 16px; }
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .content > *, .alert, .cmp-modal, .toast-item, .table-toolbar > span:first-child > i,
    .sc-num, .mod-num, .kpi-value, .hero-num, .score-pct, .sc-ico, .mod-ico, .kpi-icon, .empty-state .ico { animation: none; }
    .btn:hover, .btn:active, .side-link:hover, .card.hover-lift:hover { transform: none; }
}

/* ------------------------------------------------------------ DESKTOP compact grids
   Owner 2026-09-16: every data grid should fit within the page - smaller type, tighter
   spacing, shorter rows. DESKTOP ONLY (>= 992px); the mobile/tablet view below is untouched. */
@media (min-width: 992px) {
    /* force the grid to the container width and wrap long cells (incl. .nowrap ones), so wide grids
       fit the page instead of scrolling sideways */
    table.table { table-layout: fixed; width: 100%; }
    table.table td, table.table th { white-space: normal; overflow-wrap: break-word; }
    table.table tbody td { padding: 4px 7px; font-size: 11.5px; line-height: 1.3; }
    table.table thead th { padding: 4px 7px; font-size: 9.5px; letter-spacing: .04em; }
    table.table .btn-sm { min-width: 28px; min-height: 26px; padding: .15rem .4rem; border-radius: 7px; font-size: 11.5px; }
    /* small pills stay on one line even though their cell may wrap */
    table.table .status, table.table .pill, table.table .badge-soft { white-space: nowrap; font-size: 9.5px; }
    table.table .status::before { width: 5px; height: 5px; }
    /* trim the surrounding chrome so more rows show without scrolling */
    .table-toolbar { padding: 8px 12px; }
    .table-scroll { max-height: 72vh; }
    .card > .table-scroll, .card .table-scroll { margin: 0; }
}