/*
 * GNC Enterprise Operations Platform — design system
 * ==================================================
 *
 * ONE stylesheet holds the tokens, the application chrome (sidebar + topbar)
 * and the shared component classes. Blade views reference the tokens through
 * inline styles (style="color: var(--muted)") and the component classes below,
 * so a palette change is a single edit here.
 *
 *   1. Tokens          — palette, spacing, radii, elevation (light + dark)
 *   2. Base            — reset, typography
 *   3. App shell       — sidebar, topbar, content
 *   4. Components      — cards, buttons, tables, forms, badges, pagination
 *   5. Utilities       — the u-* helpers
 *   6. Responsive      — tablet, mobile drawer
 *   7. Accessibility   — focus rings, skip link, reduced motion
 *
 * Token names are unchanged from the previous stylesheet so the ~100 existing
 * views keep rendering; only their VALUES move to the GNC palette. Tokens that
 * used to be declared a second time in layouts/app.blade.php now live here
 * only — the layout no longer redeclares :root, which removes a conflict where
 * the layout's --border (#e5e7eb) silently overrode this file's (#d1d5db).
 *
 * See docs/ui-styleguide.md.
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* -- GNC navy: the primary brand colour ------------------------------ */
    --navy-900:     #0b1c2d;
    --navy-800:     #102438;
    --navy-700:     #16324f;   /* primary */
    --navy-600:     #1e4468;
    --navy-500:     #2b5a84;
    --navy-100:     #e7edf4;

    /* -- Accent: interactive blue ---------------------------------------- */
    --brand:        #2563eb;
    --brand-dark:   #1d4ed8;
    --brand-light:  #60a5fa;
    --brand-tint:   #eff6ff;

    /* -- Primary alias so views can say var(--primary) ------------------- */
    --primary:      var(--navy-700);

    /* -- Text ------------------------------------------------------------ */
    --ink:          #0f172a;
    --heading:      #16324f;
    --body:         #334155;
    --muted:        #64748b;
    --muted-soft:   #94a3b8;

    /* -- Surfaces & lines ------------------------------------------------ */
    --white:        #ffffff;
    --surface:      #f8fafc;
    --border:       #e2e8f0;
    --line:         #e2e8f0;

    /* -- Status ---------------------------------------------------------- */
    --danger:       #dc2626;
    --danger-strong:#991b1b;
    --danger-soft:  #ef4444;
    --danger-bg:    #fef2f2;
    --success:      #16a34a;
    --success-text: #166534;
    --success-bg:   #f0fdf4;
    --warning:      #d97706;
    --warning-text: #92400e;
    --warning-bg:   #fef3c7;
    --info:         var(--brand);
    --neutral:      #64748b;

    /* -- Application chrome ---------------------------------------------- */
    --bg-page:         #f1f5f9;
    --bg-card:         #ffffff;
    --bg-sidebar:      var(--navy-700);
    --bg-sidebar-deep: var(--navy-800);
    --bg-nav-hover:    rgba(255, 255, 255, .08);
    --bg-nav-active:   rgba(96, 165, 250, .18);
    --text-primary:    var(--ink);
    --text-nav:        #cbd8e6;
    --text-nav-strong: #ffffff;
    --topbar-bg:       rgba(255, 255, 255, .88);
    --bg-table-head:   #f8fafc;
    --bg-input:        #ffffff;
    --border-input:    #cbd5e1;
    --bg-notif:        #ffffff;
    --bg-notif-hover:  #f1f5f9;

    /* -- Elevation ------------------------------------------------------- */
    --shadow-xs:    0 1px 2px rgba(15, 23, 42, .05);
    --shadow-sm:    0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-card:  0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md:    0 4px 12px rgba(15, 23, 42, .08);
    --shadow-lg:    0 12px 32px rgba(15, 23, 42, .12);

    /* -- Spacing scale --------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* -- Radii ----------------------------------------------------------- */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    /* -- Layout metrics -------------------------------------------------- */
    --sidebar-w:           264px;
    --sidebar-w-collapsed: 76px;
    --topbar-h:            64px;

    /* -- Typography ------------------------------------------------------ */
    --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* -- Dark mode ------------------------------------------------------------
 * Only the tokens change; no component rule is duplicated for dark mode.
 * --white is deliberately NOT flipped: it doubles as the text colour on
 * coloured buttons (color: var(--white)), which must stay white in both themes.
 */
html.dark {
    --ink:          #f1f5f9;
    --heading:      #e2e8f0;
    --body:         #cbd5e1;
    --muted:        #94a3b8;
    --muted-soft:   #64748b;

    --surface:      #1e293b;
    --border:       #334155;
    --line:         #334155;

    --bg-page:         #0b1220;
    --bg-card:         #172033;
    --bg-sidebar:      var(--navy-900);
    --bg-sidebar-deep: #081524;
    --bg-nav-hover:    rgba(255, 255, 255, .06);
    --bg-nav-active:   rgba(96, 165, 250, .20);
    --topbar-bg:       rgba(23, 32, 51, .88);
    --bg-table-head:   #1e293b;
    --bg-input:        #0f172a;
    --border-input:    #334155;
    --bg-notif:        #172033;
    --bg-notif-hover:  #1e293b;

    --brand-tint:   #172554;
    --navy-100:     #1e293b;

    --danger-bg:    #450a0a;
    --danger-strong:#fecaca;
    --success-bg:   #052e21;
    --success-text: #6ee7b7;
    --warning-bg:   #3b2506;
    --warning-text: #fcd34d;

    --shadow-xs:    0 1px 2px rgba(0, 0, 0, .35);
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, .40);
    --shadow-card:  0 1px 3px rgba(0, 0, 0, .40);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg:    0 12px 32px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: clamp(14px, 0.65vw + 12px, 16px);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background-color .2s ease, color .2s ease;
}

h1, h2, h3, h4 { color: var(--heading); letter-spacing: -.012em; }
h1 { font-size: 1.55rem; font-weight: 700; line-height: 1.25; }
h2 { font-size: 1.2rem;  font-weight: 700; }
h3 { font-size: 1.02rem; font-weight: 650; }

a { color: var(--brand); }

.gnc-icon { flex-shrink: 0; display: block; }

/* ==========================================================================
   3. APP SHELL
   ========================================================================== */

.gnc-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns .22s cubic-bezier(.4, 0, .2, 1);
}
.gnc-shell.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }

/* -- Sidebar --------------------------------------------------------------- */

.gnc-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-sidebar);
    color: var(--text-nav);
    border-right: 1px solid rgba(255, 255, 255, .06);
    overflow: hidden;
    transition: background-color .2s ease;
}

.gnc-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 16px;
    min-height: var(--topbar-h);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.gnc-brand-mark {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: linear-gradient(145deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .04em;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .35);
}
.gnc-brand-text { min-width: 0; }
.gnc-brand-name {
    font-size: 1.05rem; font-weight: 750; color: #fff;
    line-height: 1.1; letter-spacing: -.01em;
}
.gnc-brand-sub {
    font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: rgba(203, 216, 230, .75);
    margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.gnc-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 10px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.gnc-nav::-webkit-scrollbar { width: 6px; }
.gnc-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }

/* Group header — a real <button> so keyboard and screen readers work. */
.gnc-nav-group {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 2px 0;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text-nav);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.gnc-nav-group:hover { background: var(--bg-nav-hover); color: var(--text-nav-strong); }
.gnc-nav-group.has-active { color: var(--text-nav-strong); }
.gnc-nav-group-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gnc-nav-caret { transition: transform .2s ease; opacity: .65; }
.gnc-nav-group[aria-expanded="false"] .gnc-nav-caret { transform: rotate(-90deg); }

/* A dot marking a collapsed group that holds the current page. */
.gnc-nav-group-dot {
    display: none;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand-light);
    flex-shrink: 0;
}
.gnc-nav-group[aria-expanded="false"].has-active .gnc-nav-group-dot { display: block; }

/* How many things are waiting behind a nav entry.
   Same figures as the "Needs you" strip — one service answers both, so a badge
   and the strip cannot disagree. margin-left:auto pushes it to the right edge,
   ahead of the caret on a group. */
.gnc-nav-badge {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--danger, #dc2626);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.gnc-nav-group .gnc-nav-badge { margin-right: 6px; }
/* Collapsed rail: the number would not fit, so it degrades to the dot the
   sidebar already uses to mean "something in here". */
.is-collapsed .gnc-nav-badge {
    min-width: 8px; width: 8px; height: 8px; padding: 0;
    color: transparent; overflow: hidden; line-height: 8px;
    margin-right: 0;
}

.gnc-nav-submenu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .22s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}
.gnc-nav-submenu.is-open { opacity: 1; }
.gnc-nav-submenu.no-transition { transition: none; }
.gnc-nav-submenu-inner { padding: 2px 0 6px; }

.gnc-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    margin: 1px 0;
    border-radius: var(--radius);
    color: var(--text-nav);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: background .14s ease, color .14s ease;
}
.gnc-nav-link:hover { background: var(--bg-nav-hover); color: var(--text-nav-strong); }
.gnc-nav-link.is-active {
    background: var(--bg-nav-active);
    color: var(--text-nav-strong);
    font-weight: 600;
}
.gnc-nav-link.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 18px;
    margin-top: -9px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-light);
}
.gnc-nav-link-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Child links sit slightly inset so the hierarchy reads at a glance. */
.gnc-nav-submenu .gnc-nav-link { padding-left: 44px; font-size: .84rem; }
.gnc-nav-submenu .gnc-nav-link .gnc-icon { display: none; }

.gnc-sidebar-footer {
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.gnc-logout {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0; border-radius: var(--radius);
    background: none; color: var(--text-nav);
    font-family: inherit; font-size: .875rem; font-weight: 500;
    text-align: left; cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.gnc-logout:hover { background: rgba(239, 68, 68, .16); color: #fecaca; }

/* -- Collapsed sidebar (desktop, icons only) ------------------------------- */

.is-collapsed .gnc-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.is-collapsed .gnc-brand-text,
.is-collapsed .gnc-nav-group-label,
.is-collapsed .gnc-nav-caret,
.is-collapsed .gnc-nav-link-label,
.is-collapsed .gnc-logout span { display: none; }
.is-collapsed .gnc-nav-group,
.is-collapsed .gnc-nav-link,
.is-collapsed .gnc-logout { justify-content: center; padding-left: 10px; padding-right: 10px; }
/* Children collapse away entirely; the group icon keeps the active marker. */
.is-collapsed .gnc-nav-submenu { display: none; }
.is-collapsed .gnc-nav-group.has-active {
    background: var(--bg-nav-active);
    color: var(--text-nav-strong);
}
.is-collapsed .gnc-nav-group-dot { display: none !important; }

/* Tooltip for collapsed items. */
.is-collapsed [data-tip] { position: relative; }
.is-collapsed [data-tip]:hover::after,
.is-collapsed [data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--navy-900);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    pointer-events: none;
}

/* -- Main column ----------------------------------------------------------- */

.gnc-main { display: flex; flex-direction: column; min-width: 0; }

.gnc-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--topbar-h);
    padding: 10px clamp(16px, 2vw, 28px);
    background: var(--topbar-bg);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--border);
}

.gnc-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--body);
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.gnc-icon-btn:hover { background: var(--surface); border-color: var(--border); color: var(--heading); }

.gnc-topbar-heading { flex: 1; min-width: 0; }
.gnc-topbar-title {
    margin: 0;
    font-size: 1rem; font-weight: 650; color: var(--heading);
    line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gnc-topbar-sub {
    font-size: .78rem; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gnc-topbar-actions { display: flex; align-items: center; gap: 6px; }

/* Notification bell */
.gnc-bell { position: relative; text-decoration: none; }
.gnc-bell.has-unread { color: var(--warning); }
.notification-count-badge {
    position: absolute; top: 4px; right: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px;
    background: var(--danger); color: #fff;
    font-size: .66rem; font-weight: 700; line-height: 1;
    border: 2px solid var(--bg-card);
}

/* Profile menu */
.gnc-profile { position: relative; }
.gnc-profile-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 10px 5px 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--body);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.gnc-profile-btn:hover { border-color: var(--muted-soft); box-shadow: var(--shadow-xs); }
.gnc-avatar {
    display: grid; place-items: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--navy-700); color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.gnc-profile-meta { text-align: left; line-height: 1.15; max-width: 150px; }
.gnc-profile-name { font-size: .82rem; font-weight: 650; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gnc-profile-role { font-size: .7rem; color: var(--muted); }

.gnc-menu {
    position: absolute;
    top: calc(100% + 8px); right: 0;
    z-index: 60;
    min-width: 232px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}
.gnc-menu[hidden] { display: none; }
.gnc-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.gnc-menu-name { font-size: .88rem; font-weight: 650; color: var(--heading); }
.gnc-menu-mail { font-size: .76rem; color: var(--muted); word-break: break-all; }
.gnc-menu-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0; border-radius: var(--radius);
    background: none; color: var(--body);
    font-family: inherit; font-size: .85rem; font-weight: 500;
    text-align: left; text-decoration: none; cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.gnc-menu-item:hover { background: var(--surface); color: var(--heading); }
.gnc-menu-item.is-danger { color: var(--danger); }
.gnc-menu-item.is-danger:hover { background: var(--danger-bg); }

.gnc-content,
.content {
    flex: 1;
    padding: clamp(18px, 2vw, 28px);
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.gnc-overlay {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(11, 28, 45, .55);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}
.gnc-overlay.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* -- Page header ----------------------------------------------------------- */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
    margin-bottom: var(--space-5);
}
.page-header h1 { margin: 0; font-size: clamp(1.35rem, 1.6vw, 1.6rem); }
.page-header p  { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }

/* -- Cards ----------------------------------------------------------------- */
.card,
.page-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: clamp(16px, 1.8vw, 22px);
    min-width: 0;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card > *, .page-section > *, .grid > * { min-width: 0; }
.grid { display: grid; gap: var(--space-4); }

/* Statistic tile — the dashboard KPI card. */
.stat-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.stat-card:hover { border-color: var(--muted-soft); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card__icon {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: var(--radius);
    background: var(--brand-tint); color: var(--brand);
}
.stat-card__icon.is-success { background: var(--success-bg); color: var(--success); }
.stat-card__icon.is-warning { background: var(--warning-bg); color: var(--warning); }
.stat-card__icon.is-danger  { background: var(--danger-bg);  color: var(--danger); }
.stat-card__icon.is-navy    { background: var(--navy-100);   color: var(--navy-700); }
.stat-card__label {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
}
.stat-card__value { font-size: 1.9rem; font-weight: 750; line-height: 1; color: var(--heading); }
.stat-card__unit  { font-size: .78rem; color: var(--muted-soft); }

/* Dashboard KPI card — the <h4> / .mini-number / <p> trio used by the HR,
 * Director and Admin dashboards. .mini-number was referenced 38 times across
 * those views but had no rule anywhere, so the figures rendered at body size.
 * :has() scopes the label treatment to cards that actually hold a figure;
 * where it is unsupported the heading simply keeps its default styling. */
.mini-number {
    font-size: 1.9rem; font-weight: 750; line-height: 1.05;
    color: var(--heading); font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}
.card:has(> .mini-number) > h4 {
    margin: 0 0 6px;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
}
.card > .mini-number + p { margin: 0; font-size: .78rem; color: var(--muted-soft); }

/* -- Buttons ---------------------------------------------------------------
 * .button and .button-primary are both the solid brand button: 346 views use
 * the bare class expecting a filled control, and .button-primary was never
 * actually defined before (it fell back to .button). They stay identical so
 * nothing shifts; the new modifiers below are opt-in.
 */
.button,
.button-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
    font-family: inherit; font-size: .875rem; font-weight: 600;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.button:hover,
.button-primary:hover { background: var(--brand-dark); box-shadow: var(--shadow-sm); }
.button:active, .button-primary:active { transform: translateY(1px); }
.button[disabled], .button.is-disabled { opacity: .55; cursor: not-allowed; }

.button-secondary {
    background: var(--bg-card); color: var(--body); border-color: var(--border);
}
.button-secondary:hover { background: var(--surface); border-color: var(--muted-soft); }
.button-navy   { background: var(--navy-700); }
.button-navy:hover { background: var(--navy-600); }
.button-danger { background: var(--danger); }
.button-danger:hover { background: var(--danger-strong); }
.button-ghost  { background: none; color: var(--brand); }
.button-ghost:hover { background: var(--brand-tint); }
.button-sm     { padding: 6px 12px; font-size: .8rem; }

/* Section label above a quick-action grid or card row. */
.section-label {
    margin: 0 0 12px;
    font-size: .74rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted);
}
.quick-actions {
    display: grid; gap: 12px; margin-bottom: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* Quick action tile */
.quick-action {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--heading);
    text-decoration: none;
    font-size: .88rem; font-weight: 600;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.quick-action:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.quick-action__icon {
    display: grid; place-items: center;
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: var(--radius);
    background: var(--brand-tint); color: var(--brand);
}
.quick-action__icon.is-danger { background: var(--danger-bg); color: var(--danger); }

/* -- Data tables ------------------------------------------------------------ */
.data-table          { width: 100%; border-collapse: collapse; min-width: 720px; }
.data-table thead    { background: var(--bg-table-head); }
.data-table th       {
    padding: 12px 14px; text-align: left;
    font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--line);
}
.data-table td       { padding: 13px 14px; color: var(--body); font-size: .88rem; }
.data-table tbody tr { border-bottom: 1px solid var(--line); }
.data-table tbody tr:last-child { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface); }
.data-table td.num,
.data-table th.num   { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll        { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.empty-state         { padding: var(--space-6) var(--space-5); text-align: center; color: var(--muted); }

/* -- Forms ------------------------------------------------------------------ */
.form-group    { margin-bottom: 18px; }
.form-label    { display: block; margin-bottom: var(--space-2); font-weight: 600; font-size: .85rem; color: var(--body); }
.form-control  {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit; font-size: .9rem;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.form-control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.form-control:disabled { background: var(--surface); color: var(--muted); cursor: not-allowed; }
.form-control.is-invalid,
.is-invalid    { border-color: var(--danger); }
.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .16); }
.form-hint     { font-size: .78rem; color: var(--muted); margin-top: var(--space-1); }
.form-error    { color: var(--danger); font-size: .82rem; margin-top: var(--space-1); }

/* -- Badges ----------------------------------------------------------------- */
.badge,
.status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .76rem; font-weight: 650; line-height: 1.4;
    white-space: nowrap;
}
.badge--pending  { background: var(--warning-bg); color: var(--warning-text); }
.badge--approved { background: var(--success-bg); color: var(--success-text); }
.badge--rejected { background: var(--danger-bg);  color: var(--danger-strong); }
.badge--neutral  { background: var(--surface);    color: var(--body); }
.badge--info     { background: var(--brand-tint); color: var(--brand-dark); }

/* -- Flash messages --------------------------------------------------------- */
.flash-success,
.flash-error,
.flash-info {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 16px;
    border: 1px solid;
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
    font-size: .89rem;
}
.flash-success { background: var(--success-bg); border-color: var(--success); color: var(--success-text); }
.flash-error   { background: var(--danger-bg);  border-color: var(--danger-soft); color: var(--danger-strong); }
/* Neutral on purpose. An empty export is the system explaining itself, not a
   failure, and a red banner over a non-event teaches people to ignore red. */
.flash-info    { background: var(--bg-subtle, #f1f5f9); border-color: var(--line, #cbd5e1); color: var(--text-primary, #0f172a); }

/* -- Pagination ------------------------------------------------------------- */
.pagination            { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.pagination__summary   { color: var(--muted); font-size: .82rem; }
.pagination__pages     { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.pagination__link      {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-card); color: var(--body);
    font-size: .85rem; font-weight: 600; text-decoration: none;
    transition: background .12s, border-color .12s;
}
.pagination__link:hover      { background: var(--surface); border-color: var(--muted-soft); }
.pagination__link.is-active  { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination__link.is-disabled{ color: var(--muted-soft); background: var(--surface); cursor: default; pointer-events: none; }
.pagination__ellipsis  { padding: 0 4px; color: var(--muted-soft); }

/* ==========================================================================
   5. UTILITIES
   ========================================================================== */

.u-flex          { display: flex; }
.u-flex-between  { display: flex; align-items: center; justify-content: space-between; }
.u-flex-center   { display: flex; align-items: center; }
.u-flex-wrap     { flex-wrap: wrap; }
.u-gap-2         { gap: var(--space-2); }
.u-gap-3         { gap: var(--space-3); }
.u-mt-3          { margin-top: var(--space-3); }
.u-mt-4          { margin-top: var(--space-4); }
.u-mt-5          { margin-top: var(--space-5); }
.u-mb-2          { margin-bottom: var(--space-2); }
.u-muted         { color: var(--muted); }
.u-right         { text-align: right; }
.u-bold          { font-weight: 600; }
.u-block         { display: block; }

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

/* Tablet — narrower rail, same layout. */
@media (min-width: 769px) and (max-width: 1100px) {
    :root { --sidebar-w: 232px; }
}

/* Mobile — the sidebar becomes an off-canvas drawer. */
@media (max-width: 768px) {
    .gnc-shell,
    .gnc-shell.is-collapsed { grid-template-columns: minmax(0, 1fr); }

    .gnc-sidebar {
        position: fixed;
        top: 0; left: 0;
        z-index: 50;
        width: min(84vw, 300px);
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
        box-shadow: var(--shadow-lg);
    }
    .gnc-sidebar.is-open { transform: translateX(0); }

    /* A collapsed rail makes no sense in a drawer — always show full labels. */
    .is-collapsed .gnc-brand-text,
    .is-collapsed .gnc-nav-group-label,
    .is-collapsed .gnc-nav-caret,
    .is-collapsed .gnc-nav-link-label,
    .is-collapsed .gnc-logout span { display: revert; }
    .is-collapsed .gnc-nav-submenu { display: block; }
    .is-collapsed .gnc-brand,
    .is-collapsed .gnc-nav-group,
    .is-collapsed .gnc-nav-link,
    .is-collapsed .gnc-logout { justify-content: flex-start; padding-left: 12px; padding-right: 12px; }
    .is-collapsed [data-tip]:hover::after { content: none; }

    .gnc-profile-meta { display: none; }
    .gnc-profile-btn  { padding: 4px; border-color: transparent; }
    .page-header      { flex-direction: column; align-items: stretch; }
    .card, .page-section { border-radius: var(--radius); }
}

@media (max-width: 480px) {
    .gnc-content, .content { padding: 14px 12px 20px; }
    .page-header .button { width: 100%; }
    .form-grid-2 { grid-template-columns: 1fr !important; }
    .data-table  { min-width: 560px; }
}

@media (max-width: 640px) {
    .form-grid-2 { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   7. ACCESSIBILITY
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* On the navy sidebar the blue ring has too little contrast — use white. */
.gnc-sidebar a:focus-visible,
.gnc-sidebar button:focus-visible { outline-color: #fff; }

.skip-link {
    position: absolute;
    left: -9999px; top: 0;
    z-index: 10000;
    padding: 10px 16px;
    background: var(--brand); color: #fff;
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   8. LEGACY BRIDGES
   --------------------------------------------------------------------------
   Older views set colours inline. These keep them legible in dark mode without
   editing every view; they are deliberately narrow.
   ========================================================================== */

html.dark table thead tr { background: var(--bg-table-head) !important; }
html.dark table tbody tr { border-bottom-color: var(--border) !important; }
html.dark table td,
html.dark table th       { color: var(--text-primary) !important; }

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]),
html.dark select,
html.dark textarea {
    background-color: var(--bg-input) !important;
    border-color:     var(--border-input) !important;
    color:            var(--text-primary) !important;
}

/* Notification deep-link highlight (NotificationController ?highlight=<id>). */
@keyframes notifHighlightFlash {
    0%   { background-color: var(--warning-bg); }
    100% { background-color: transparent; }
}
.notif-highlight { animation: notifHighlightFlash 2.5s ease-out 1; }

/* ── Register search (x-table-search) ───────────────────────────────────────
   One search control shared by every register, so the box on Materials looks
   and behaves like the box on Money Requests. Built on the existing
   .form-control and .button so it inherits the theme rather than restating it. */

.gnc-search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 16px;
}

.gnc-search__label {
    display: block;
    width: 100%;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted, #6b7280);
    margin-bottom: 4px;
}

.gnc-search__field {
    position: relative;
    flex: 1 1 260px;
    min-width: 0; /* lets the field shrink inside the flex row instead of
                     forcing the toolbar to overflow on a narrow screen */
}

.gnc-search__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted, #6b7280);
    pointer-events: none; /* the icon must never steal the click from the input */
    display: flex;
}

.gnc-search__input {
    width: 100%;
    padding-left: 34px;   /* clears the icon */
    padding-right: 32px;  /* clears the X */
}

/* The browser's own clear affordance would sit on top of ours. */
.gnc-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.gnc-search__clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    color: var(--muted, #6b7280);
}

.gnc-search__clear:hover,
.gnc-search__clear:focus {
    background: var(--line, #e5e7eb);
    color: var(--body, #111827);
}

/* Focus must stay visible for keyboard users; the rounded hover state alone
   is not an indicator. */
.gnc-search__clear:focus-visible,
.gnc-search__input:focus-visible {
    outline: 2px solid var(--brand, #2563eb);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    /* Below this the submit button and the field compete for the row and the
       field wins, so the button takes its own line at full width. */
    .gnc-search__submit { width: 100%; }
}

/* =========================================================================
   Number inputs — the spinners are gone on purpose.

   A number field offers three ways to change its value without anybody
   meaning to: the little up/down buttons, the arrow keys, and the mouse
   wheel while the field has focus. On an amount field all three are a
   liability — stepping 5,999,999.88 by one cent is not something anyone
   wants, and a wheel-nudged figure is indistinguishable from a typed one.

   No server rule can catch it: the changed number is exactly as valid as
   the intended one. So it is stopped here, and in the wheel/keydown guards
   in layouts/app.blade.php.
   ========================================================================= */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;   /* Firefox draws its own */
    appearance: textfield;
}