/* ==========================================================================
   DMS — shared design-system layer
   Restyles stock Bootstrap 5.3 classes for both light and dark themes.
   Loaded AFTER the Bootstrap CDN stylesheet so it wins on source order.
   RTL is handled by Bootstrap's .rtl build + the html[dir] selectors below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    --sidebar-w: 240px;
    --bs-body-font-family: 'Inter', 'Segoe UI', Tahoma, system-ui, -apple-system,
        'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

[data-bs-theme="light"] {
    --brand: #2563eb;
    --brand-hover: #1d4ed8;
    --brand-subtle: #eff4ff;
    --brand-rgb: 37, 99, 235;

    --bg: #eef1f6;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: #e5e7eb;
    --muted: #6b7280;
    --table-head-color: #4b5563;   /* darker than --muted so headers stay AA on the blue tint */

    --radius: .75rem;
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, .10);

    /* themed sidebar — light (deep blue brand gradient) */
    --sidebar-bg: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%);
    --sidebar-text: #e0e7ff;
    --sidebar-hover-bg: rgba(255, 255, 255, .12);
    --sidebar-hover-text: #ffffff;
    --sidebar-brand: #ffffff;
    --sidebar-border: rgba(255, 255, 255, .14);
    --sidebar-active-bg: rgba(255, 255, 255, .18);   /* white-translucent pill on blue */
    --sidebar-active-text: #ffffff;
    --sidebar-active-edge: #ffffff;                  /* accent edge */

    /* steer Bootstrap's own component vars toward the palette */
    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-hover);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--border);
}

[data-bs-theme="dark"] {
    --brand: #3b82f6;
    --brand-hover: #60a5fa;
    --brand-subtle: #16243f;
    --brand-rgb: 59, 130, 246;

    --bg: #0b1120;
    --surface: #111827;
    --surface-2: #172033;
    --border: #1f2a3c;
    --muted: #94a3b8;
    --table-head-color: #94a3b8;

    --radius: .75rem;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .55);

    /* themed sidebar — dark (slate) */
    --sidebar-bg: linear-gradient(180deg, #0f172a 0%, #0b1120 100%);
    --sidebar-text: #cbd5e1;
    --sidebar-hover-bg: #1e293b;
    --sidebar-hover-text: #ffffff;
    --sidebar-brand: #ffffff;
    --sidebar-border: #1e293b;
    --sidebar-active-bg: #1d4ed8;                    /* deeper blue so white text passes AA on the pill */
    --sidebar-active-text: #ffffff;
    --sidebar-active-edge: var(--brand-hover);

    /* let Bootstrap's baseline dark components inherit our palette */
    --bs-body-bg: var(--bg);
    --bs-body-color: #e5e7eb;
    --bs-emphasis-color: #f8fafc;
    --bs-border-color: var(--border);
    --bs-tertiary-bg: var(--surface-2);
    --bs-secondary-color: var(--muted);

    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-hover);
    --bs-link-color-rgb: var(--brand-rgb);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
    background: var(--bg);
    min-height: 100vh;
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   3. Structural shell (moved from layouts/app.blade.php, RTL-aware)
   -------------------------------------------------------------------------- */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: 1rem 0;
    overflow-y: auto;
}

html[dir="ltr"] .sidebar { left: 0; border-right: 1px solid var(--sidebar-border); }
html[dir="rtl"] .sidebar { right: 0; border-left: 1px solid var(--sidebar-border); }

.main { padding: 1.25rem 1.5rem; }
html[dir="ltr"] .main { margin-left: var(--sidebar-w); }
html[dir="rtl"] .main { margin-right: var(--sidebar-w); }

/* --------------------------------------------------------------------------
   4. Sidebar component (themed via tokens above)
   -------------------------------------------------------------------------- */
.sidebar .brand {
    color: var(--sidebar-brand);
    padding: .25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: .75rem;
}

.sidebar .nav-link {
    color: var(--sidebar-text);
    padding: .6rem 1.1rem;
    border-radius: 0;
    transition: background-color .12s ease, color .12s ease;
}
.sidebar .nav-link:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
}
.sidebar .nav-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 500;
    position: relative;
}
/* RTL-aware accent edge on the active pill (inset-inline-start flips with dir) */
.sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    inset-block: .25rem;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--sidebar-active-edge);
}

/* rounded "pill" look for the top-level links only — scoped so it does NOT
   clobber the .ps-5/.ms-3 utility margins on the Finance sub-items */
.sidebar > ul.nav > li.nav-item > .nav-link {
    border-radius: .5rem;
    margin: .1rem .6rem;
    padding-inline: .85rem;
}

/* Finance collapse sub-items: keep their indentation, just round + inset the end */
.sidebar #financeMenu .nav-link {
    border-radius: .5rem;
    margin-inline-end: .6rem;
    padding-top: .45rem;
    padding-bottom: .45rem;
}
.sidebar #financeMenu .nav-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}

/* the Finance section LABEL is a non-link <span class="nav-link" pointer-events:none>
   — never give it a hover state */
.sidebar .nav-link[style*="pointer-events"]:hover {
    background: transparent;
    color: inherit;
}

.sidebar .nav-link i { width: 20px; text-align: center; }
html[dir="ltr"] .sidebar .nav-link i { margin-right: .5rem; }
html[dir="rtl"] .sidebar .nav-link i { margin-left: .5rem; }

/* --------------------------------------------------------------------------
   5. Topbar (sticky, soft blur + elevation)
   -------------------------------------------------------------------------- */
.topbar {
    background: var(--surface); /* fallback for no color-mix support */
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .6rem .9rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    position: sticky;
    top: .75rem;
    z-index: 1020;
    box-shadow: var(--shadow-sm);
}
/* the sticky topbar uses z-index + backdrop-filter (a stacking context); keep its
   dropdowns explicitly on top so they're never obscured (below Bootstrap modals @ 1055) */
.topbar .dropdown-menu { z-index: 1050; }

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--shadow-sm);
}
.card-header {
    border-bottom: 1px solid var(--border);
    padding: .9rem 1.1rem;
    font-weight: 600;
    background: rgba(var(--brand-rgb), .04);                 /* subtle blue tint; card body stays white */
    box-shadow: inset 0 2px 0 rgba(var(--brand-rgb), .6);    /* thin top accent (no RTL/rounding issues) */
}

/* form section headers (h6.text-muted.text-uppercase.small) — RTL-safe left accent bar */
h6.text-muted.text-uppercase.small {
    border-inline-start: 3px solid var(--brand);
    padding-inline-start: .6rem;
}

/* --------------------------------------------------------------------------
   7. Stat cards
   -------------------------------------------------------------------------- */
.stat-card {
    --bs-card-bg: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.stat-card .icon {
    width: 48px;
    height: 48px;
    border-radius: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */
.table > :not(caption) > * > * { vertical-align: middle; }
.table:not(.table-sm) > :not(caption) > * > * { padding: .7rem .9rem; }

.table > thead th {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .735rem;
    font-weight: 600;
    color: var(--table-head-color);
    border-bottom-color: var(--border);
    white-space: nowrap;
}
/* theme the stock .table-light header rows used across the app (subtle blue tint) */
.table-light {
    --bs-table-bg: rgba(var(--brand-rgb), .05);
    --bs-table-color: var(--table-head-color);
    --bs-table-border-color: var(--border);
}

/* row hover (the views use plain .table, so apply hover globally) */
.table > tbody > tr { transition: background-color .12s ease-in-out; }
.table > tbody > tr:hover > * { background-color: var(--surface-2); }

/* --------------------------------------------------------------------------
   9. Badges (soft, pill-shaped tints)
   -------------------------------------------------------------------------- */
.badge {
    border-radius: 50rem;
    font-weight: 600;
    padding: .38em .72em;
    letter-spacing: .01em;
}
.badge.bg-success   { background-color: rgba(22, 163, 74, .13) !important;  color: #15803d !important; }
.badge.bg-danger    { background-color: rgba(220, 38, 38, .13) !important;  color: #b91c1c !important; }
.badge.bg-secondary { background-color: rgba(100, 116, 139, .15) !important; color: #475569 !important; }
.badge.bg-warning   { background-color: rgba(234, 179, 8, .16) !important;  color: #a16207 !important; }
.badge.bg-info      { background-color: rgba(2, 132, 199, .13) !important;  color: #0369a1 !important; }
.badge.bg-primary   { background-color: var(--brand-subtle) !important;     color: var(--brand) !important; }

[data-bs-theme="dark"] .badge.bg-success   { background-color: rgba(34, 197, 94, .16) !important;  color: #4ade80 !important; }
[data-bs-theme="dark"] .badge.bg-danger    { background-color: rgba(248, 113, 113, .16) !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .badge.bg-secondary { background-color: rgba(148, 163, 184, .16) !important; color: #cbd5e1 !important; }
[data-bs-theme="dark"] .badge.bg-warning   { background-color: rgba(234, 179, 8, .18) !important;  color: #fbbf24 !important; }
[data-bs-theme="dark"] .badge.bg-info      { background-color: rgba(56, 189, 248, .16) !important;  color: #7dd3fc !important; }
[data-bs-theme="dark"] .badge.bg-primary   { background-color: var(--brand-subtle) !important;     color: #93c5fd !important; }

/* the fleet "type" badge uses bg-light text-dark — make it legible in dark mode */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--surface-2) !important;
    color: var(--bs-body-color) !important;
}

/* --------------------------------------------------------------------------
   10. Buttons
   -------------------------------------------------------------------------- */
.btn {
    border-radius: .55rem;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease,
        border-color .12s ease, color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .35); }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-active-bg: var(--brand-hover);
    --bs-btn-active-border-color: var(--brand-hover);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
}

/* --------------------------------------------------------------------------
   11. Form controls (brand focus ring)
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-color: var(--border);
    border-radius: .55rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .22);
}
.form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .22); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* --------------------------------------------------------------------------
   12. Alerts, dropdowns, pagination, modals
   -------------------------------------------------------------------------- */
.alert { border-radius: var(--radius); }

.dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-link-active-bg: var(--brand);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: .35rem;
}
.dropdown-item { border-radius: .4rem; padding: .45rem .75rem; }

.pagination {
    --bs-pagination-color: var(--brand);
    --bs-pagination-hover-color: var(--brand-hover);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
}
.page-link {
    border: 1px solid var(--border);
    border-radius: .5rem !important;
    margin: 0 .15rem;
}

.modal-content {
    --bs-modal-bg: var(--surface);
    --bs-modal-border-color: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.modal-header, .modal-footer { border-color: var(--border); }

/* --------------------------------------------------------------------------
   13. Auth / login (scoped to .auth-bg + .auth-card so it never leaks to the
       app shell — a bare `.brand` rule would otherwise hit the sidebar brand)
   -------------------------------------------------------------------------- */
.auth-bg {
    min-height: 100vh;
    background:
        radial-gradient(1100px 560px at 50% -12%, rgba(59, 130, 246, .35), transparent 60%),
        linear-gradient(160deg, #1e3a8a 0%, #0b1120 100%);
    background-attachment: fixed;
}
.auth-card { max-width: 420px; margin: 6rem auto; }
.auth-card .brand { color: #fff; text-align: center; margin-bottom: 1.5rem; }
.auth-card .brand h1 { font-weight: 300; letter-spacing: 2px; margin: 0; }
.auth-card .card { background-color: var(--surface); }

/* --------------------------------------------------------------------------
   14. Mobile off-canvas sidebar drawer (RTL-aware; replaces the old
       full-width stacked sidebar). JS only toggles .show — direction lives
       entirely here, so it is RTL-safe by construction.
   -------------------------------------------------------------------------- */
/* hidden by default at every width; only .show on mobile reveals it */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .5);
    z-index: 1040;
    display: none;
}

@media (max-width: 768px) {
    html[dir="ltr"] .main, html[dir="rtl"] .main { margin: 0; }
    .main { padding: 1rem; }

    .sidebar {
        width: var(--sidebar-w);
        z-index: 1045;
        transition: transform .2s ease;
        box-shadow: var(--shadow-md);
    }
    html[dir="ltr"] .sidebar { transform: translateX(-100%); }
    html[dir="rtl"] .sidebar { transform: translateX(100%); }
    /* scope .show with the dir context so it out-specifies the translateX(±100%) rules above */
    html[dir="ltr"] .sidebar.show,
    html[dir="rtl"] .sidebar.show { transform: translateX(0); }

    .sidebar-backdrop.show { display: block; }

    .topbar { top: .5rem; }
}
@media (min-width: 769px) {
    .sidebar-backdrop { display: none !important; }
}

/* --------------------------------------------------------------------------
   15. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .btn, .card, .stat-card, .sidebar, .sidebar .nav-link, .table > tbody > tr { transition: none !important; }
    .btn:hover, .btn:active, .card:hover, .stat-card:hover { transform: none !important; }
}

/* --------------------------------------------------------------------------
   16. Polished motion — hover feedback always on; entrance + lift opt-in only
       (opacity:0 lives ONLY inside the no-preference query, so content is
       never stuck invisible if CSS fails or motion is reduced)
   -------------------------------------------------------------------------- */
.card { transition: box-shadow .16s ease, transform .16s ease; }
.card:hover { box-shadow: var(--shadow-md); }
.stat-card { transition: transform .16s ease, box-shadow .16s ease; }

@media (prefers-reduced-motion: no-preference) {
    @keyframes dmsFadeUp {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* staggered entrance for content blocks — EXCLUDE the sticky .topbar
       (a lingering transform can disturb position:sticky) */
    /* exclude initially-hidden overlays (#upload-blocker / #run-blocker) — they're
       display:none and toggled by JS; entrance motion must not apply to them */
    .main > *:not(.topbar):not([style*="display:none"]) { animation: dmsFadeUp .42s cubic-bezier(.22, .61, .36, 1) both; }
    .main > *:nth-child(2) { animation-delay: .04s; }
    .main > *:nth-child(3) { animation-delay: .09s; }
    .main > *:nth-child(4) { animation-delay: .14s; }
    .main > *:nth-child(5) { animation-delay: .19s; }
    .main > *:nth-child(6) { animation-delay: .24s; }

    /* only summary stat cards physically lift (big table/form cards just get the shadow) */
    .stat-card:hover { transform: translateY(-2px); }
}

/* --------------------------------------------------------------------------
   17. Page-layout modernization (CSS cascade — reaches all views, no edits)
   -------------------------------------------------------------------------- */
.main > .card,
.main > .row,
.main > .table-responsive { margin-bottom: 1.25rem; }
.main > .row:last-child,
.main > .card:last-child { margin-bottom: 0; }
.main > .d-flex.justify-content-between { gap: .75rem; }

/* refined empty-state cell */
.table > tbody > tr > td.text-center.text-muted { padding-block: 2.25rem; font-style: italic; }

/* commission-run subtotal rows already use tr.table-light.fw-bold — accent them */
.table > tbody > tr.table-light.fw-bold > * {
    border-top: 2px solid rgba(var(--brand-rgb), .35);
    background: rgba(var(--brand-rgb), .06);
}

/* audit JSON <pre> blocks (keep their inline pre-wrap/font-size) */
.card-body > pre {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: .75rem .9rem;
}