@charset "UTF-8";
/* ==========================================================================
   Business Manager — Application Design System
   Corporate blue/slate. Single source of truth for the admin application.
   Load AFTER Bootstrap so component overrides win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand — corporate blue */
    --c-brand-50:  #eff6ff;
    --c-brand-100: #dbeafe;
    --c-brand-200: #bfdbfe;
    --c-brand-300: #93c5fd;
    --c-brand-400: #60a5fa;
    --c-brand-500: #3b82f6;
    --c-brand-600: #2563eb;
    --c-brand-700: #1d4ed8;
    --c-brand-800: #1e40af;
    --c-brand-900: #1e3a8a;

    /* Neutrals — slate */
    --c-slate-50:  #f8fafc;
    --c-slate-100: #f1f5f9;
    --c-slate-200: #e2e8f0;
    --c-slate-300: #cbd5e1;
    --c-slate-400: #94a3b8;
    --c-slate-500: #64748b;
    --c-slate-600: #475569;
    --c-slate-700: #334155;
    --c-slate-800: #1e293b;
    --c-slate-900: #0f172a;

    /* Semantic */
    --c-success:      #059669;
    --c-success-bg:   #ecfdf5;
    --c-success-line: #a7f3d0;
    --c-danger:       #dc2626;
    --c-danger-bg:    #fef2f2;
    --c-danger-line:  #fecaca;
    --c-warning:      #d97706;
    --c-warning-bg:   #fffbeb;
    --c-warning-line: #fde68a;
    --c-info:         #0891b2;
    --c-info-bg:      #ecfeff;
    --c-info-line:    #a5f3fc;

    /* Roles */
    --app-bg:          var(--c-slate-100);
    --surface:         #ffffff;
    --surface-sunken:  var(--c-slate-50);
    --surface-hover:   var(--c-slate-50);
    --border:          var(--c-slate-200);
    --border-strong:   var(--c-slate-300);
    --text:            var(--c-slate-800);
    --text-muted:      var(--c-slate-500);
    --text-subtle:     var(--c-slate-400);
    --text-inverse:    #ffffff;
    --accent:          var(--c-brand-600);
    --accent-hover:    var(--c-brand-700);
    --focus-ring:      0 0 0 3px rgba(37, 99, 235, .25);

    /* Sidebar */
    --sidebar-w:        264px;
    --sidebar-bg:       var(--c-slate-900);
    --sidebar-bg-2:     #0b1220;
    --sidebar-text:     #cbd5e1;
    --sidebar-text-dim: #7c8aa0;
    --sidebar-active:   var(--c-brand-400);
    --topbar-h:         60px;

    /* Typography */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    --fs-2xs: .6875rem;  /* 11px — table meta, chips        */
    --fs-xs:  .75rem;    /* 12px — labels, helper text      */
    --fs-sm:  .8125rem;  /* 13px — table body, dense forms  */
    --fs-md:  .875rem;   /* 14px — base body                */
    --fs-lg:  1rem;      /* 16px — card titles              */
    --fs-xl:  1.125rem;  /* 18px — page title               */
    --fs-2xl: 1.375rem;  /* 22px — stat values              */
    --fs-3xl: 1.75rem;   /* 28px — hero figures             */

    --lh-tight: 1.25;
    --lh-base:  1.5;

    /* Spacing (4px base) */
    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
    --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;

    /* Radius */
    --r-sm: 4px;  --r-md: 6px;  --r-lg: 10px;  --r-xl: 14px;  --r-pill: 999px;

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

    --transition: 160ms cubic-bezier(.4, 0, .2, 1);

    /* Bootstrap bridge — keeps stock BS components on-palette */
    --bs-primary: var(--c-brand-600);
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-link-color: var(--c-brand-700);
    --bs-link-hover-color: var(--c-brand-800);
}

/* Legacy aliases — pages not yet migrated still reference these names.
   Keeping them mapped to the new palette means nothing renders off-brand
   mid-migration. Delete once every page uses the tokens above. */
:root {
    --pakistan-green: var(--c-brand-700);
    --pakistan-green-light: var(--c-brand-600);
    --pakistan-green-dark: var(--c-brand-900);
    --gold: var(--c-brand-300);
    --white: #fff;
    --light-gray: var(--app-bg);
    --dark-gray: var(--c-slate-700);
    --text-dark: var(--text);
    --shadow: var(--sh-sm);
    --shadow-lg: var(--sh-md);
}

/* --------------------------------------------------------------------------
   2. Base / reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--text);
    background: var(--app-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-2);
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--c-slate-900);
    letter-spacing: -.011em;
}

a { color: var(--c-brand-700); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-brand-800); text-decoration: underline; }

/* Visible, consistent focus for keyboard users (WCAG 2.4.7) */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Skip link */
.skip-link {
    position: absolute; top: -100px; left: var(--sp-4); z-index: 2000;
    padding: var(--sp-2) var(--sp-4);
    background: var(--accent); color: #fff; border-radius: var(--r-md);
    font-weight: 600; font-size: var(--fs-sm);
}
.skip-link:focus { top: var(--sp-3); color: #fff; text-decoration: none; }

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

/* --------------------------------------------------------------------------
   3. Application shell
   -------------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

.app-main {
    flex: 1 1 auto;
    min-width: 0;                 /* lets wide tables scroll instead of pushing */
    display: flex;
    flex-direction: column;
    background: var(--app-bg);
}

.app-body { flex: 1 0 auto; padding: var(--sp-5) var(--sp-6); }

@media (max-width: 991.98px) { .app-body { padding: var(--sp-4); } }
@media (max-width: 575.98px) { .app-body { padding: var(--sp-3); } }

/* --- Sidebar ------------------------------------------------------------- */
.app-sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
    color: var(--sidebar-text);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1040;
}

.sidebar-brand {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex: 0 0 auto;
    color: #fff; text-decoration: none;
}
.sidebar-brand:hover { color: #fff; text-decoration: none; }
.sidebar-brand__mark {
    width: 36px; height: 36px; flex: 0 0 36px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--c-brand-500), var(--c-brand-700));
    color: #fff; font-size: var(--fs-lg);
}
.sidebar-brand__text { min-width: 0; }
.sidebar-brand__name {
    font-size: var(--fs-md); font-weight: 600; color: #fff;
    line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-brand__sub {
    font-size: var(--fs-2xs); color: var(--sidebar-text-dim);
    text-transform: uppercase; letter-spacing: .06em;
}

.sidebar-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--sp-2) 0 var(--sp-6);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16); border-radius: var(--r-pill);
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); }

/* Sidebar quick filter */
.sidebar-filter { padding: var(--sp-3) var(--sp-4) var(--sp-1); }
.sidebar-filter input {
    width: 100%;
    padding: .375rem .625rem .375rem 2rem;
    font-size: var(--fs-sm);
    color: #e2e8f0;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-md);
}
.sidebar-filter input::placeholder { color: var(--sidebar-text-dim); }
.sidebar-filter input:focus {
    outline: none;
    border-color: var(--c-brand-500);
    background: rgba(255, 255, 255, .1);
}
.sidebar-filter { position: relative; }
.sidebar-filter > i {
    position: absolute; left: 1.6rem; top: 50%; transform: translateY(-25%);
    color: var(--sidebar-text-dim); font-size: var(--fs-xs); pointer-events: none;
}

.nav-section {
    padding: var(--sp-4) var(--sp-4) var(--sp-1);
    font-size: var(--fs-2xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--sidebar-text-dim);
}

.nav-link-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: .5rem var(--sp-4);
    color: var(--sidebar-text);
    font-size: var(--fs-sm);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background var(--transition), color var(--transition);
}
.nav-link-item:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff; text-decoration: none;
}
.nav-link-item.is-active {
    background: rgba(59, 130, 246, .14);
    color: #fff;
    border-left-color: var(--sidebar-active);
    font-weight: 500;
}
.nav-link-item > i:first-child {
    width: 18px; flex: 0 0 18px; text-align: center;
    font-size: var(--fs-md); color: var(--sidebar-text-dim);
}
.nav-link-item:hover > i:first-child,
.nav-link-item.is-active > i:first-child { color: var(--sidebar-active); }
.nav-link-item > span { flex: 1 1 auto; min-width: 0; }

/* Collapsible group */
.nav-group__toggle {
    width: 100%; background: none; border: 0; text-align: left;
    cursor: pointer; font-family: inherit;
}
.nav-group__caret {
    font-size: .625rem; color: var(--sidebar-text-dim);
    transition: transform var(--transition); flex: 0 0 auto;
}
.nav-group__toggle[aria-expanded="true"] .nav-group__caret { transform: rotate(180deg); }
.nav-group__toggle[aria-expanded="true"] { color: #fff; }

.nav-group__items { background: rgba(0, 0, 0, .22); }
.nav-group__items .nav-link-item { padding-left: 2.9rem; color: var(--sidebar-text-dim); }
.nav-group__items .nav-link-item:hover,
.nav-group__items .nav-link-item.is-active { color: #fff; }
.nav-group__items .nav-link-item > i:first-child { font-size: var(--fs-xs); width: 14px; flex-basis: 14px; }

.sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .5);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    z-index: 1035;
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}
.sidebar-backdrop.is-open { opacity: 1; visibility: visible; }

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed; top: 0; left: 0;
        transform: translateX(-100%);
        transition: transform var(--transition);
        box-shadow: var(--sh-lg);
    }
    .app-sidebar.is-open { transform: translateX(0); }
    body.has-sidebar-open { overflow: hidden; }
}

/* --- Topbar -------------------------------------------------------------- */
.app-topbar {
    position: sticky; top: 0; z-index: 1030;
    min-height: var(--topbar-h);
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 0 var(--sp-6);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border);
}
@media (max-width: 991.98px) { .app-topbar { padding: 0 var(--sp-4); } }

.topbar-toggle {
    display: none;
    width: 38px; height: 38px;
    align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--c-slate-700);
    cursor: pointer; transition: all var(--transition);
}
.topbar-toggle:hover { background: var(--c-slate-100); border-color: var(--border-strong); }
@media (max-width: 991.98px) { .topbar-toggle { display: inline-flex; } }

.topbar-title {
    font-size: var(--fs-md); font-weight: 600; color: var(--c-slate-900);
    margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-spacer { flex: 1 1 auto; }

.topbar-clock {
    font-size: var(--fs-xs); color: var(--text-muted);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
@media (max-width: 767.98px) { .topbar-clock { display: none; } }

.topbar-user {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-pill); cursor: pointer;
    transition: all var(--transition);
}
.topbar-user:hover { background: var(--c-slate-50); border-color: var(--border-strong); }
.topbar-user::after { display: none; }        /* replace the Bootstrap caret */
.avatar {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: grid; place-items: center; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-brand-500), var(--c-brand-700));
    color: #fff; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em;
}
.topbar-user__meta { line-height: 1.15; text-align: left; }
.topbar-user__name { font-size: var(--fs-sm); font-weight: 600; color: var(--c-slate-800); }
.topbar-user__role { font-size: var(--fs-2xs); color: var(--text-muted); }
@media (max-width: 575.98px) { .topbar-user__meta { display: none; } }

/* --- Footer -------------------------------------------------------------- */
.app-footer {
    flex: 0 0 auto;
    padding: var(--sp-4) var(--sp-6);
    background: var(--surface);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs); color: var(--text-muted);
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    align-items: center; justify-content: space-between;
}

/* --------------------------------------------------------------------------
   4. Page header & breadcrumbs
   -------------------------------------------------------------------------- */
.page-head {
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    align-items: flex-start; justify-content: space-between;
    margin-bottom: var(--sp-4);
}
.page-head__title {
    font-size: var(--fs-xl); font-weight: 600; margin: 0;
    display: flex; align-items: center; gap: var(--sp-2);
}
.page-head__title i { color: var(--accent); font-size: .9em; }
.page-head__sub { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--sp-1) 0 0; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1);
    list-style: none; margin: 0 0 var(--sp-2); padding: 0;
    font-size: var(--fs-xs); color: var(--text-subtle);
}
.crumbs li { display: flex; align-items: center; gap: var(--sp-1); }
.crumbs li + li::before { content: "/"; color: var(--c-slate-300); margin-right: var(--sp-1); }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--c-slate-700); font-weight: 500; }

/* --------------------------------------------------------------------------
   5. Cards & surfaces
   -------------------------------------------------------------------------- */
.card-app {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    margin-bottom: var(--sp-4);
    overflow: hidden;
}
.card-app__head {
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    align-items: center; justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-sunken);
}
.card-app__title {
    margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--c-slate-800);
    display: flex; align-items: center; gap: var(--sp-2);
}
.card-app__title i { color: var(--accent); font-size: .9em; }
.card-app__body { padding: var(--sp-4); }
.card-app__body--flush { padding: 0; }
.card-app__foot {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    background: var(--surface-sunken);
}

/* --- Stat tile ----------------------------------------------------------- */
.stat {
    position: relative;
    display: block;
    height: 100%;
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    text-decoration: none; color: inherit;
    transition: box-shadow var(--transition), transform var(--transition),
                border-color var(--transition);
}
a.stat:hover {
    box-shadow: var(--sh-md); transform: translateY(-2px);
    border-color: var(--c-brand-200); text-decoration: none; color: inherit;
}
.stat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.stat__label {
    font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em;
}
.stat__icon {
    width: 36px; height: 36px; flex: 0 0 36px;
    display: grid; place-items: center; border-radius: var(--r-md);
    font-size: var(--fs-md);
}
.stat__value {
    margin-top: var(--sp-2);
    font-size: var(--fs-2xl); font-weight: 650; line-height: 1.1;
    color: var(--c-slate-900); font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.stat__value small { font-size: .55em; font-weight: 500; color: var(--text-muted); }
.stat__meta {
    margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted);
    display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap;
}
.stat--brand   .stat__icon { background: var(--c-brand-50);   color: var(--c-brand-700); }
.stat--success .stat__icon { background: var(--c-success-bg); color: var(--c-success); }
.stat--danger  .stat__icon { background: var(--c-danger-bg);  color: var(--c-danger); }
.stat--warning .stat__icon { background: var(--c-warning-bg); color: var(--c-warning); }
.stat--info    .stat__icon { background: var(--c-info-bg);    color: var(--c-info); }
.stat--neutral .stat__icon { background: var(--c-slate-100);  color: var(--c-slate-600); }

.trend { font-weight: 600; }
.trend--up   { color: var(--c-success); }
.trend--down { color: var(--c-danger); }
.trend--flat { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   6. Toolbar / filter bar
   -------------------------------------------------------------------------- */
.toolbar {
    display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-4);
}
.toolbar__field { flex: 1 1 180px; min-width: 0; }
.toolbar__field--sm { flex: 0 1 150px; }
.toolbar__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .toolbar__field, .toolbar__field--sm { flex: 1 1 100%; }
    .toolbar__actions { width: 100%; }
    .toolbar__actions .btn { flex: 1 1 auto; }
}

/* Search input with a leading icon */
.search-field { position: relative; }
.search-field > i {
    position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
    color: var(--text-subtle); font-size: var(--fs-sm); pointer-events: none;
}
.search-field .form-control { padding-left: 2.15rem; }

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.form-label {
    font-size: var(--fs-xs); font-weight: 600; color: var(--c-slate-600);
    margin-bottom: var(--sp-1); text-transform: uppercase; letter-spacing: .03em;
}
.form-label .req { color: var(--c-danger); margin-left: 2px; }

.form-control, .form-select {
    font-size: var(--fs-sm);
    padding: .4375rem .625rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    color: var(--text);
    background-color: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--c-brand-400);
    box-shadow: var(--focus-ring);
    outline: none;
}
.form-control::placeholder { color: var(--text-subtle); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: var(--c-slate-100); color: var(--text-muted); cursor: not-allowed;
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--c-danger); }
.form-control.is-valid, .form-select.is-valid { border-color: var(--c-success); }
.form-text { font-size: var(--fs-xs); color: var(--text-muted); }
.invalid-feedback { font-size: var(--fs-xs); }

/* Numeric inputs read right-aligned with tabular figures */
.input-amount, input[type="number"].form-control {
    text-align: right; font-variant-numeric: tabular-nums;
}

/* iOS Safari zooms into any field under 16px on focus — this prevents it */
@media (max-width: 767.98px) {
    .form-control, .form-select, .input-amount { font-size: 16px; }
}

fieldset.form-block { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
fieldset.form-block > legend {
    float: none; width: auto;
    font-size: var(--fs-xs); font-weight: 700; color: var(--c-slate-500);
    text-transform: uppercase; letter-spacing: .06em;
    padding: 0 0 var(--sp-2); margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
    font-size: var(--fs-sm); font-weight: 500;
    padding: .4375rem .875rem;
    border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    transition: all var(--transition);
    white-space: nowrap;
}
.btn-sm { font-size: var(--fs-xs); padding: .3125rem .625rem; }
.btn-lg { font-size: var(--fs-md); padding: .5625rem 1.25rem; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--c-brand-600); border-color: var(--c-brand-600); color: #fff; }
.btn-primary:hover, .btn-primary:focus {
    background: var(--c-brand-700); border-color: var(--c-brand-700); color: #fff;
}
.btn-outline-primary { color: var(--c-brand-700); border-color: var(--c-brand-300); }
.btn-outline-primary:hover { background: var(--c-brand-600); border-color: var(--c-brand-600); color: #fff; }

.btn-neutral {
    background: var(--surface); border: 1px solid var(--border-strong); color: var(--c-slate-700);
}
.btn-neutral:hover { background: var(--c-slate-100); color: var(--c-slate-900); }

.btn-success { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.btn-success:hover { background: #047857; border-color: #047857; color: #fff; }
.btn-danger  { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

/* Icon-only button */
.btn-icon { width: 30px; height: 30px; padding: 0; flex: 0 0 30px; border-radius: var(--r-md); }

/* Touch targets must stay tappable (WCAG 2.5.5) */
@media (hover: none) and (pointer: coarse) {
    .btn { min-height: 38px; }
    .btn-icon { width: 38px; height: 38px; flex-basis: 38px; }
}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-lg);
}

.table-app {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
    background: var(--surface);
}
.table-app > thead > tr > th {
    position: sticky; top: 0; z-index: 2;
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-slate-50);
    border-bottom: 1px solid var(--border-strong);
    font-size: var(--fs-2xs); font-weight: 700;
    color: var(--c-slate-600);
    text-transform: uppercase; letter-spacing: .05em;
    white-space: nowrap; text-align: left; vertical-align: middle;
}
.table-app > tbody > tr > td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--c-slate-700);
}
.table-app > tbody > tr:last-child > td { border-bottom: 0; }
.table-app > tbody > tr { transition: background var(--transition); }
.table-app > tbody > tr:hover > td { background: var(--c-brand-50); }
.table-app--striped > tbody > tr:nth-child(even) > td { background: var(--c-slate-50); }
.table-app--striped > tbody > tr:nth-child(even):hover > td { background: var(--c-brand-50); }
.table-app--compact > thead > tr > th,
.table-app--compact > tbody > tr > td { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }

.table-app > tfoot > tr > td, .table-app > tfoot > tr > th {
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-slate-100);
    border-top: 2px solid var(--border-strong);
    font-weight: 700; color: var(--c-slate-800);
}

/* Column helpers */
.col-num, .table-app .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.col-sno { width: 48px; text-align: center; color: var(--text-subtle); }
.col-act { width: 1%; white-space: nowrap; text-align: right; }
.amount-pos  { color: var(--c-success); font-weight: 600; }
.amount-neg  { color: var(--c-danger); font-weight: 600; }
.amount-zero { color: var(--text-subtle); }

/* Sortable headers */
.table-app th[data-sort] { cursor: pointer; user-select: none; padding-right: 1.25rem; position: relative; }
.table-app th[data-sort]:hover { color: var(--accent); }
.table-app th[data-sort]::after {
    content: "\f0dc"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; right: var(--sp-2); opacity: .3; font-size: .8em;
}
.table-app th[aria-sort="ascending"]::after  { content: "\f0de"; opacity: 1; color: var(--accent); }
.table-app th[aria-sort="descending"]::after { content: "\f0dd"; opacity: 1; color: var(--accent); }

/* Row selection for master/detail lists */
.row-select { cursor: pointer; }
.row-select.is-selected > td {
    background: var(--c-brand-100) !important;
    box-shadow: inset 3px 0 0 var(--c-brand-600);
}

/* Stack rows as cards on phones — add data-label="…" to each <td> */
@media (max-width: 575.98px) {
    .table-stack, .table-stack > thead, .table-stack > tbody,
    .table-stack > tbody > tr, .table-stack > tbody > tr > td { display: block; width: 100%; }
    .table-stack > thead { position: absolute; left: -9999px; }
    .table-stack > tbody > tr {
        border: 1px solid var(--border); border-radius: var(--r-md);
        margin-bottom: var(--sp-2); padding: var(--sp-1) 0; background: var(--surface);
    }
    .table-stack > tbody > tr > td {
        display: flex; justify-content: space-between; gap: var(--sp-3);
        border: 0; border-bottom: 1px dashed var(--border);
        text-align: right;
    }
    .table-stack > tbody > tr > td:last-child { border-bottom: 0; }
    .table-stack > tbody > tr > td::before {
        content: attr(data-label);
        font-size: var(--fs-2xs); font-weight: 700; color: var(--text-muted);
        text-transform: uppercase; letter-spacing: .04em; text-align: left; flex: 0 0 auto;
    }
}

/* --------------------------------------------------------------------------
   10. Chips, empty & loading states
   -------------------------------------------------------------------------- */
.chip {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: .1875rem .5rem;
    font-size: var(--fs-2xs); font-weight: 600;
    border-radius: var(--r-pill);
    border: 1px solid transparent; white-space: nowrap;
    text-transform: uppercase; letter-spacing: .03em;
}
.chip--brand   { background: var(--c-brand-50);   color: var(--c-brand-700); border-color: var(--c-brand-200); }
.chip--success { background: var(--c-success-bg); color: var(--c-success);   border-color: var(--c-success-line); }
.chip--danger  { background: var(--c-danger-bg);  color: var(--c-danger);    border-color: var(--c-danger-line); }
.chip--warning { background: var(--c-warning-bg); color: var(--c-warning);   border-color: var(--c-warning-line); }
.chip--info    { background: var(--c-info-bg);    color: var(--c-info);      border-color: var(--c-info-line); }
.chip--neutral { background: var(--c-slate-100);  color: var(--c-slate-600); border-color: var(--c-slate-200); }

.empty-state { padding: var(--sp-10) var(--sp-4); text-align: center; color: var(--text-muted); }
.empty-state__icon {
    width: 56px; height: 56px; margin: 0 auto var(--sp-3);
    display: grid; place-items: center; border-radius: 50%;
    background: var(--c-slate-100); color: var(--c-slate-400); font-size: 1.375rem;
}
.empty-state__title { font-size: var(--fs-md); font-weight: 600; color: var(--c-slate-700); margin-bottom: var(--sp-1); }
.empty-state__text { font-size: var(--fs-sm); margin: 0 auto; max-width: 46ch; }

.skeleton {
    background: linear-gradient(90deg, var(--c-slate-100) 25%, var(--c-slate-200) 37%, var(--c-slate-100) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--r-sm);
}
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.is-busy { position: relative; pointer-events: none; }
.is-busy::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(255, 255, 255, .6);
    border-radius: inherit; z-index: 5;
}

/* --------------------------------------------------------------------------
   11. Alerts & toasts
   -------------------------------------------------------------------------- */
.alert { font-size: var(--fs-sm); border-radius: var(--r-md); border-width: 1px; padding: var(--sp-3) var(--sp-4); }
.alert-success { background: var(--c-success-bg); border-color: var(--c-success-line); color: #065f46; }
.alert-danger  { background: var(--c-danger-bg);  border-color: var(--c-danger-line);  color: #991b1b; }
.alert-warning { background: var(--c-warning-bg); border-color: var(--c-warning-line); color: #92400e; }
.alert-info    { background: var(--c-info-bg);    border-color: var(--c-info-line);    color: #155e75; }

.toast-stack {
    position: fixed; top: calc(var(--topbar-h) + var(--sp-3)); right: var(--sp-4);
    z-index: 1090; display: flex; flex-direction: column; gap: var(--sp-2);
    max-width: 360px;
}
.toast-app {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--c-slate-400);
    border-radius: var(--r-md); box-shadow: var(--sh-lg);
    font-size: var(--fs-sm);
    animation: toast-in 220ms cubic-bezier(.4, 0, .2, 1);
}
.toast-app.is-leaving { animation: toast-out 180ms ease forwards; }
.toast-app--success { border-left-color: var(--c-success); }
.toast-app--danger  { border-left-color: var(--c-danger); }
.toast-app--warning { border-left-color: var(--c-warning); }
.toast-app--info    { border-left-color: var(--c-info); }
.toast-app__icon { flex: 0 0 auto; margin-top: 1px; }
.toast-app--success .toast-app__icon { color: var(--c-success); }
.toast-app--danger  .toast-app__icon { color: var(--c-danger); }
.toast-app--warning .toast-app__icon { color: var(--c-warning); }
.toast-app--info    .toast-app__icon { color: var(--c-info); }
.toast-app__body { flex: 1 1 auto; min-width: 0; }
.toast-app__close {
    background: none; border: 0; color: var(--text-subtle);
    cursor: pointer; padding: 0; line-height: 1; font-size: var(--fs-md);
}
.toast-app__close:hover { color: var(--c-slate-700); }
@keyframes toast-in  { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }

@media (max-width: 575.98px) {
    .toast-stack { left: var(--sp-3); right: var(--sp-3); max-width: none; }
}

/* --------------------------------------------------------------------------
   12. Dropdowns & modals
   -------------------------------------------------------------------------- */
.dropdown-menu {
    font-size: var(--fs-sm);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    padding: var(--sp-1);
}
.dropdown-item { border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--c-slate-100); }
.dropdown-item i { width: 16px; text-align: center; color: var(--text-muted); }
.dropdown-header { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); }

.modal-content { border: 0; border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
.modal-header { border-bottom: 1px solid var(--border); padding: var(--sp-3) var(--sp-4); background: var(--surface-sunken); }
.modal-title { font-size: var(--fs-md); font-weight: 600; }
.modal-body { padding: var(--sp-4); }
.modal-footer { border-top: 1px solid var(--border); padding: var(--sp-3) var(--sp-4); background: var(--surface-sunken); }

/* --------------------------------------------------------------------------
   13. Utilities
   -------------------------------------------------------------------------- */
.text-num     { font-variant-numeric: tabular-nums; }
.fs-2xs { font-size: var(--fs-2xs) !important; }
.fs-xs  { font-size: var(--fs-xs)  !important; }
.fs-sm  { font-size: var(--fs-sm)  !important; }
.fw-650 { font-weight: 650 !important; }
.bg-sunken { background: var(--surface-sunken) !important; }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--sp-4) 0; }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-md > * + * { margin-top: var(--sp-4); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   14. Print — A4 documents (invoices, vouchers, ledgers, reports)
   -------------------------------------------------------------------------- */
@media print {
    @page { size: A4 portrait; margin: 12mm 10mm; }

    html, body {
        background: #fff !important;
        font-size: 10.5pt;
        color: #000;
        width: auto; height: auto;
    }

    /* Hide every piece of application chrome */
    .app-sidebar, .sidebar-backdrop, .app-topbar, .app-footer,
    .toolbar, .page-head__actions, .toast-stack, .no-print,
    .btn, .dropdown, .modal, .modal-backdrop, .pagination {
        display: none !important;
    }

    .app      { display: block !important; }
    .app-main { display: block !important; }
    .app-body { padding: 0 !important; }

    .print-only { display: block !important; }

    .card-app, .table-wrap {
        border: 0 !important; box-shadow: none !important;
        border-radius: 0 !important; margin: 0 0 6mm !important;
        overflow: visible !important; page-break-inside: auto;
    }
    .card-app__head { background: none !important; border-bottom: 1pt solid #000 !important; padding: 0 0 2mm !important; }
    .card-app__body { padding: 0 !important; }

    /* Document header */
    .print-doc-head { display: block !important; margin-bottom: 5mm; }
    .print-doc-head__org   { font-size: 13pt; font-weight: 700; text-align: center; letter-spacing: .04em; }
    .print-doc-head__title { font-size: 11pt; font-weight: 700; margin: 1mm 0 0; text-align: center; text-transform: uppercase; }
    .print-doc-head__meta  { font-size: 9pt; display: flex; justify-content: space-between; margin-top: 3mm; }

    /* Tables: repeat headers across pages, never split a row */
    table { width: 100% !important; border-collapse: collapse !important; page-break-inside: auto; }
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr, img { page-break-inside: avoid; }
    .table-app > thead > tr > th {
        position: static !important;
        background: #eee !important;
        border-bottom: 1pt solid #000 !important;
        color: #000 !important; font-size: 8.5pt;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .table-app > tbody > tr > td {
        border-bottom: .5pt solid #999 !important;
        color: #000 !important; font-size: 9.5pt; padding: 1.5mm 2mm !important;
    }
    .table-app > tbody > tr:hover > td,
    .table-app--striped > tbody > tr:nth-child(even) > td { background: none !important; }
    .table-app > tfoot > tr > td, .table-app > tfoot > tr > th {
        border-top: 1pt solid #000 !important; background: none !important;
        color: #000 !important; font-weight: 700;
    }

    .amount-pos, .amount-neg { color: #000 !important; }
    a, a:visited { color: #000 !important; text-decoration: none !important; }
    a[href]::after { content: ""; }        /* never print raw URLs */

    .stat { border: .5pt solid #999 !important; box-shadow: none !important; break-inside: avoid; }

    .print-signatures {
        display: flex !important; justify-content: space-between;
        margin-top: 18mm; page-break-inside: avoid;
    }
    .print-signatures > div {
        width: 45mm; border-top: .5pt solid #000; padding-top: 1.5mm;
        font-size: 8.5pt; text-align: center;
    }
    .page-break { page-break-before: always; }
}

.print-only, .print-doc-head, .print-signatures { display: none; }

/* --------------------------------------------------------------------------
   15. Cross-browser safety nets
   -------------------------------------------------------------------------- */
/* Firefox keeps number spinners; hide them for a consistent look everywhere */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Safari misaligns date inputs without an explicit height */
input[type="date"], input[type="datetime-local"], input[type="time"] {
    -webkit-appearance: none; appearance: none; min-height: 34px;
}

/* Flexbox gap fallback for older Safari (<14.1) */
@supports not (gap: 1rem) {
    .toolbar > *      { margin-right: .75rem; margin-bottom: .75rem; }
    .page-head__actions > * { margin-left: .5rem; }
}

/* Windows high-contrast mode */
@media (forced-colors: active) {
    .stat, .card-app, .table-app { border: 1px solid CanvasText; }
    .nav-link-item.is-active { forced-color-adjust: none; }
}