/* ============================================================
   HABIB AUTO LEDGER — Professional UI Stylesheet
   ============================================================ */

/* ── CSS Custom Properties ── */
:root {
    /* Brand palette */
    --brand-50:  #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --brand-800: #1e40af;
    --brand-900: #1e3a8a;

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

    /* Semantic */
    --success-bg:     #f0fdf4; --success-border: #bbf7d0; --success-text: #15803d; --success-dot: #22c55e;
    --danger-bg:      #fff1f2; --danger-border:  #fecdd3; --danger-text:  #be123c; --danger-dot:  #f43f5e;
    --warning-bg:     #fffbeb; --warning-border: #fde68a; --warning-text: #b45309; --warning-dot: #f59e0b;
    --info-bg:        #eff6ff; --info-border:    #bfdbfe; --info-text:    #1d4ed8; --info-dot:    #3b82f6;

    /* Sidebar */
    --sidebar-bg-from:  #060d1c;
    --sidebar-bg-to:    #0c1628;
    --sidebar-border:   rgba(255,255,255,0.05);
    --sidebar-width:    260px;

    /* Topbar */
    --topbar-bg:        rgba(255,255,255,0.94);
    --topbar-border:    rgba(15,23,42,0.07);
    --topbar-height:    58px;

    /* Surface */
    --surface:          #ffffff;
    --surface-raised:   rgba(255,255,255,0.97);

    /* Radius */
    --r-xs:   8px;
    --r-sm:   12px;
    --r-md:   16px;
    --r-lg:   20px;
    --r-xl:   24px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md: 0 4px 12px rgba(15,23,42,0.07), 0 2px 4px rgba(15,23,42,0.04);
    --shadow-lg: 0 10px 28px rgba(15,23,42,0.09), 0 4px 8px rgba(15,23,42,0.05);
    --shadow-xl: 0 20px 50px rgba(15,23,42,0.12), 0 8px 16px rgba(15,23,42,0.06);
    --shadow-brand: 0 8px 22px rgba(37,99,235,0.24);

    /* Transitions */
    --t-fast:   all 0.15s cubic-bezier(0.4,0,0.2,1);
    --t-normal: all 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ─────────────────────────────────── BASE ─────────────────── */

*,*::before,*::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }

body {
    background: linear-gradient(145deg,#edf2ff 0%,#e8effe 100%);
    color: var(--gray-800);
    font-family: 'Manrope',system-ui,-apple-system,sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand-600); }
img,svg { height: auto; max-width: 100%; }

/* ─────────────────────────────────── LAYOUT ───────────────── */

.app-layout {
    align-items: stretch;
    display: flex;
    min-height: 100vh;
    position: relative;
    width: 100%;
}

/* ─────────────────────────────────── SIDEBAR ──────────────── */

.app-sidebar {
    background: linear-gradient(180deg,var(--sidebar-bg-from) 0%,var(--sidebar-bg-to) 100%);
    border-right: 1px solid var(--sidebar-border);
    color: #fff;
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--sidebar-width);
    height: 100vh;
    justify-content: space-between;
    max-width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 1040;
}

.app-sidebar::before {
    background: radial-gradient(ellipse at 20% 8%,rgba(37,99,235,0.2) 0%,transparent 55%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.app-sidebar > * { position: relative; z-index: 1; }

.app-sidebar-body {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 1rem 0.8rem;
}

.app-sidebar-body::-webkit-scrollbar { width: 3px; }
.app-sidebar-body::-webkit-scrollbar-track { background: transparent; }
.app-sidebar-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: var(--r-pill); }

/* Brand */
.sidebar-brand {
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    gap: 0.72rem;
    margin-bottom: 1rem;
    padding-bottom: 0.95rem;
}

.sidebar-brand-mark {
    align-items: center;
    background: #fff;
    border-radius: var(--r-sm);
    box-shadow: 0 8px 18px rgba(0,0,0,0.3);
    display: inline-flex;
    flex-shrink: 0;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.sidebar-brand-logo { display: block; height: 26px; object-fit: contain; width: 26px; border-radius: 5px; }

.sidebar-brand h1 {
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-brand p {
    color: rgba(255,255,255,0.4);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0.16rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Section label */
.sidebar-section-label {
    color: rgba(255,255,255,0.28);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin: 1rem 0 0.38rem 0.35rem;
    text-transform: uppercase;
}

/* Nav links */
.sidebar-nav { display: grid; gap: 2px; }

.sidebar-link {
    align-items: center;
    border-radius: var(--r-sm);
    color: rgba(255,255,255,0.72);
    display: flex;
    font-size: 0.85rem;
    font-weight: 700;
    gap: 0.62rem;
    min-width: 0;
    padding: 0.58rem 0.72rem;
    position: relative;
    transition: var(--t-fast);
}

.sidebar-link::before {
    background: linear-gradient(180deg,var(--brand-500),var(--brand-700));
    border-radius: var(--r-pill);
    content: '';
    height: 52%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 24%;
    transition: var(--t-fast);
    width: 3px;
}

.sidebar-link-icon {
    align-items: center;
    color: rgba(255,255,255,0.6);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.88rem;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.sidebar-link span:last-child,
.sidebar-group-meta span:last-child,
.sidebar-sublink span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-link:hover .sidebar-link-icon { color: rgba(255,255,255,0.9); }
.sidebar-link.active { background: rgba(255,255,255,0.1); color: #fff; }
.sidebar-link.active::before { opacity: 1; }
.sidebar-link.active .sidebar-link-icon { color: var(--brand-400); }

/* Accordion groups */
.sidebar-accordion { display: grid; gap: 3px; }

.sidebar-group {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.sidebar-group-toggle {
    align-items: center;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.8);
    display: flex;
    font-size: 0.85rem;
    font-weight: 700;
    justify-content: space-between;
    min-width: 0;
    padding: 0.6rem 0.72rem;
    text-align: left;
    transition: var(--t-fast);
    width: 100%;
}

.sidebar-group-toggle:hover { background: rgba(255,255,255,0.06); color: #fff; }

.sidebar-group-meta { align-items: center; display: flex; gap: 0.62rem; min-width: 0; }

.sidebar-group-arrow {
    color: rgba(255,255,255,0.38);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.68rem;
    transition: transform 0.22s ease;
}

.sidebar-group-toggle.collapsed .sidebar-group-arrow { transform: rotate(-90deg); }
.sidebar-group-collapse { border-top: 1px solid rgba(255,255,255,0.04); }
.sidebar-submenu { display: grid; gap: 1px; padding: 0.38rem 0.42rem; }

.sidebar-sublink {
    align-items: center;
    border-radius: var(--r-xs);
    color: rgba(255,255,255,0.64);
    display: flex;
    font-size: 0.81rem;
    font-weight: 600;
    gap: 0.62rem;
    min-height: 33px;
    min-width: 0;
    padding: 0.42rem 0.62rem;
    transition: var(--t-fast);
}

.sidebar-sublink-icon {
    align-items: center;
    color: rgba(255,255,255,0.38);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.8rem;
    height: 16px;
    justify-content: center;
    transition: var(--t-fast);
    width: 16px;
}

.sidebar-sublink:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.9); }
.sidebar-sublink:hover .sidebar-sublink-icon { color: rgba(255,255,255,0.7); }
.sidebar-sublink.active { background: rgba(59,130,246,0.18); color: #fff; }
.sidebar-sublink.active .sidebar-sublink-icon { color: var(--brand-400); }

/* Sidebar footer */
.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 0.72rem 0.8rem;
    position: relative;
    z-index: 1;
}

.sidebar-footer-card {
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--r-sm);
    display: flex;
    gap: 0.62rem;
    padding: 0.52rem 0.62rem;
}

.sidebar-footer-avatar,
.sidebar-user-avatar,
.app-topbar-avatar {
    align-items: center;
    background: linear-gradient(135deg,var(--brand-700) 0%,var(--brand-800) 100%);
    border-radius: var(--r-xs);
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 800;
    justify-content: center;
}

.sidebar-footer-avatar { height: 32px; width: 32px; }

.sidebar-footer-meta { flex: 1; min-width: 0; }

.sidebar-footer-name {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-footer-role {
    color: var(--brand-400);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-top: 0.1rem;
    text-transform: uppercase;
}

.sidebar-logout-form { margin: 0; }

.sidebar-logout-btn {
    align-items: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--r-xs);
    color: rgba(255,255,255,0.5);
    display: inline-flex;
    font-size: 0.9rem;
    height: 29px;
    justify-content: center;
    transition: var(--t-fast);
    width: 29px;
}

.sidebar-logout-btn:hover {
    background: rgba(244,63,94,0.18);
    border-color: rgba(244,63,94,0.3);
    color: #f43f5e;
}

/* Backdrop */
.app-sidebar-backdrop {
    backdrop-filter: blur(4px);
    background: rgba(5,10,22,0.62);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 0.25s ease;
    z-index: 1030;
}

/* ───────────────────────── SHELL & TOPBAR ─────────────────── */

.app-shell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding-top: var(--topbar-height);
}

.app-topbar {
    align-items: center;
    background: var(--topbar-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--topbar-border);
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    left: var(--sidebar-width);
    min-height: var(--topbar-height);
    padding: 0.65rem 1.2rem;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1020;
}

.app-topbar-start,
.app-topbar-actions { align-items: center; display: flex; gap: 0.5rem; min-width: 0; }
.app-topbar-actions  { flex-shrink: 0; }

.app-topbar-label {
    color: var(--gray-400);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.app-topbar-title {
    color: var(--gray-800);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0.07rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icon buttons */
.app-icon-btn {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
    color: var(--gray-500);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.9rem;
    height: 36px;
    justify-content: center;
    transition: var(--t-fast);
    width: 36px;
}

.app-icon-btn:hover {
    background: var(--brand-50);
    border-color: var(--brand-200);
    box-shadow: var(--shadow-md);
    color: var(--brand-700);
    transform: translateY(-1px);
}

/* Avatar */
.app-topbar-avatar {
    border: 2px solid var(--brand-200);
    border-radius: var(--r-sm);
    cursor: default;
    font-size: 0.78rem;
    font-weight: 800;
    height: 36px;
    user-select: none;
    width: 36px;
}

/* ── Notification Bell ───────────────────────────────────── */
.notif-bell-wrap {
    position: relative;
}

.notif-bell-btn {
    position: relative;
}

.notif-bell-btn .bi-bell-fill {
    display: inline-block;
    animation: bell-ring 1s ease 0.6s 3;
    transform-origin: top center;
}

@keyframes bell-ring {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(18deg); }
    30%  { transform: rotate(-16deg); }
    45%  { transform: rotate(12deg); }
    60%  { transform: rotate(-10deg); }
    75%  { transform: rotate(6deg); }
    90%  { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}

.notif-badge {
    background: #ef4444;
    border: 2px solid var(--sidebar-bg, #0c1628);
    border-radius: 999px;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1;
    min-width: 17px;
    padding: 2px 4px;
    position: absolute;
    right: -4px;
    text-align: center;
    top: -4px;
}

.notif-dropdown {
    background: var(--surface-raised);
    border: 1px solid var(--gray-100);
    border-radius: var(--r-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    display: none;
    min-width: 340px;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 1080;
}

.notif-dropdown.is-open {
    display: block;
}

.notif-dropdown-header {
    align-items: center;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    font-size: 0.78rem;
    font-weight: 700;
    justify-content: space-between;
    padding: 0.7rem 1rem;
}

.notif-count-badge {
    background: var(--brand-50);
    border-radius: 999px;
    color: var(--brand-700);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
}

.notif-dropdown-list {
    max-height: 420px;
    overflow-y: auto;
}

.notif-item {
    border-bottom: 1px solid var(--gray-100);
    padding: 0.75rem 1rem;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item-meta {
    align-items: center;
    display: flex;
    font-size: 0.7rem;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.2rem;
}

.notif-item-dealer {
    color: var(--brand-700);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.notif-item-due {
    color: #b91c1c;
    font-weight: 600;
}

.notif-item-vehicle {
    color: var(--gray-800);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.notif-item-chassis {
    background: var(--gray-100);
    border-radius: 4px;
    color: var(--gray-500);
    font-size: 0.72rem;
    font-weight: 500;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
}

.notif-item-rate {
    color: var(--gray-500);
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
}

.notif-post-form {
    display: inline;
}

.notif-post-btn {
    font-size: 0.78rem;
    padding: 0.25rem 0.65rem;
}

.notif-dropdown-footer {
    border-top: 1px solid var(--gray-100);
    color: var(--brand-600);
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.65rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: background 0.12s;
}

.notif-dropdown-footer:hover {
    background: var(--brand-50);
    color: var(--brand-700);
}

/* Primary button */
.app-primary-btn {
    align-items: center;
    background: linear-gradient(135deg,var(--brand-600) 0%,var(--brand-700) 100%);
    border: none;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-brand);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.83rem;
    font-weight: 700;
    gap: 0.42rem;
    padding: 0.56rem 0.9rem;
    transition: var(--t-fast);
    white-space: nowrap;
}

.app-primary-btn:hover {
    background: linear-gradient(135deg,var(--brand-700) 0%,var(--brand-800) 100%);
    box-shadow: 0 12px 28px rgba(37,99,235,0.3);
    color: #fff;
    transform: translateY(-1px);
}

.app-primary-btn:active { transform: translateY(0); }

/* Soft primary */
.btn-soft-primary {
    align-items: center;
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: var(--r-sm);
    color: var(--brand-700);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.83rem;
    font-weight: 700;
    gap: 0.42rem;
    padding: 0.56rem 0.9rem;
    transition: var(--t-fast);
    white-space: nowrap;
}

.btn-soft-primary:hover {
    background: var(--brand-100);
    border-color: var(--brand-300);
    box-shadow: var(--shadow-sm);
    color: var(--brand-800);
    transform: translateY(-1px);
}

/* ───────────────────────── MAIN CONTENT ───────────────────── */

.app-main {
    animation: page-in 0.28s ease;
    flex: 1;
    overflow-x: hidden;
    padding: 1.2rem 1.4rem;
    width: 100%;
}

.app-main > * { margin-left: auto; margin-right: auto; max-width: 1520px; width: 100%; }

@keyframes page-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ───────────────────────── PAGE HEADER ────────────────────── */

.page-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.page-header > div,.card,.panel-card,.stat-card,
.quick-action-link,.overview-metric,.row > * { min-width: 0; }

.page-title {
    color: var(--gray-900);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.page-subtitle {
    color: var(--gray-500);
    font-size: 0.85rem;
    margin: 0.3rem 0 0;
}

.app-topbar-title,.page-title,.page-subtitle,
.hero-title,.hero-text { overflow-wrap: anywhere; word-break: break-word; }

/* ───────────────────────── CARDS / PANELS ─────────────────── */

.panel-card,
.stat-card {
    background: var(--surface-raised);
    border: 1px solid rgba(148,163,184,0.15);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

.panel-card .card-body,
.stat-card .card-body { position: relative; z-index: 1; }

.stat-card { overflow: hidden; position: relative; transition: var(--t-normal); }
.stat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.stat-card::before {
    background: linear-gradient(135deg,rgba(255,255,255,0.55),rgba(255,255,255,0.1));
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.stat-label { color: var(--gray-500); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.stat-value { color: var(--gray-900); font-size: 1.6rem; font-weight: 800; line-height: 1; margin: 0.35rem 0 0; }
.stat-meta  { color: var(--gray-500); font-size: 0.74rem; }

/* ───────────────────────── FORMS ──────────────────────────── */

.form-label {
    color: var(--gray-700);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 0.35rem;
}

.form-control,
.form-select {
    background: var(--surface);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--r-sm);
    color: var(--gray-800);
    font-size: 0.88rem;
    font-weight: 500;
    min-height: 42px;
    padding: 0.6rem 0.85rem;
    transition: var(--t-fast);
}

.form-control::placeholder { color: var(--gray-400); }

.form-control:focus,
.form-select:focus {
    background: var(--surface);
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    color: var(--gray-900);
    outline: none;
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus) { border-color: var(--gray-300); }

textarea.form-control { line-height: 1.6; min-height: 110px; resize: vertical; }

.form-control.bg-light,
.form-select.bg-light { background-color: var(--gray-50) !important; }

.form-text { color: var(--gray-400); font-size: 0.76rem; margin-top: 0.28rem; }

.was-validated .form-control:invalid,
.form-control.is-invalid { background-image: none; border-color: var(--danger-text); }

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(190,18,60,0.1); }

.invalid-feedback { color: var(--danger-text); font-size: 0.76rem; font-weight: 600; }
.valid-feedback   { color: var(--success-text); font-size: 0.76rem; font-weight: 600; }

/* ───────────────────────── BUTTONS ────────────────────────── */

.btn {
    align-items: center;
    border-radius: var(--r-sm);
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 700;
    gap: 0.4rem;
    justify-content: center;
    padding: 0.55rem 1rem;
    transition: var(--t-fast);
    white-space: nowrap;
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: linear-gradient(135deg,var(--brand-600) 0%,var(--brand-700) 100%);
    border: none;
    box-shadow: var(--shadow-brand);
    color: #fff;
}

.btn-primary:hover {
    background: linear-gradient(135deg,var(--brand-700) 0%,var(--brand-800) 100%);
    box-shadow: 0 10px 24px rgba(37,99,235,0.28);
    color: #fff;
}

.btn-outline-secondary {
    background: transparent;
    border: 1.5px solid var(--gray-200);
    color: var(--gray-600);
}

.btn-outline-secondary:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--gray-700);
}

.btn-outline-primary {
    background: transparent;
    border: 1.5px solid var(--brand-200);
    color: var(--brand-700);
}

.btn-outline-primary:hover {
    background: var(--brand-50);
    border-color: var(--brand-300);
    color: var(--brand-800);
}

.btn-danger {
    background: linear-gradient(135deg,#e11d48 0%,#be123c 100%);
    border: none;
    box-shadow: 0 6px 16px rgba(225,29,72,0.22);
    color: #fff;
}

.btn-danger:hover {
    background: linear-gradient(135deg,#be123c 0%,#9f1239 100%);
    color: #fff;
}

.btn-outline-danger {
    background: transparent;
    border: 1.5px solid #fecdd3;
    color: #e11d48;
}

.btn-outline-danger:hover {
    background: #fff1f2;
    border-color: #fda4af;
    color: #be123c;
}

.btn-success {
    background: linear-gradient(135deg,#059669 0%,#047857 100%);
    border: none;
    box-shadow: 0 6px 16px rgba(5,150,105,0.2);
    color: #fff;
}

.btn-success:hover { background: linear-gradient(135deg,#047857 0%,#065f46 100%); color: #fff; }

.btn-sm {
    border-radius: var(--r-xs);
    font-size: 0.78rem;
    gap: 0.3rem;
    padding: 0.38rem 0.75rem;
}

.btn-lg {
    border-radius: var(--r-md);
    font-size: 0.92rem;
    min-height: 46px;
    padding: 0.7rem 1.3rem;
}

.btn-group > .btn,
.d-flex.gap-2 > .btn,
.d-inline-flex.gap-2 > .btn { white-space: nowrap; }

/* Loading state */
.btn.is-loading {
    opacity: 0.78;
    pointer-events: none;
}

.btn.is-loading::after {
    animation: btn-spin 0.7s linear infinite;
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: var(--r-pill);
    border-top-color: #fff;
    content: '';
    display: inline-block;
    height: 14px;
    width: 14px;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ───────────────────────── TABLES ─────────────────────────── */

.table-responsive {
    border-radius: var(--r-md);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.table-responsive .table { margin-bottom: 0; }

.table thead th {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-500);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.7rem 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.table thead th:first-child { border-top-left-radius: var(--r-sm); }
.table thead th:last-child  { border-top-right-radius: var(--r-sm); }

.table tbody td {
    border-top: 1px solid var(--gray-100);
    color: var(--gray-700);
    font-size: 0.85rem;
    padding: 0.72rem 1rem;
    vertical-align: middle;
}

.table tbody tr { transition: background-color 0.12s ease; }
.table tbody tr:hover > td { background: var(--brand-50); }
.table tbody tr:first-child > td { border-top: none; }

/* Section title */
.section-title {
    color: var(--gray-800);
    font-size: 0.92rem;
    font-weight: 800;
    margin-bottom: 0.82rem;
}

/* ───────────────────────── BADGES ─────────────────────────── */

.badge-soft {
    align-items: center;
    border-radius: var(--r-pill);
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 700;
    gap: 0.28rem;
    letter-spacing: 0.03em;
    padding: 0.28rem 0.58rem;
    white-space: nowrap;
}

.badge-soft::before {
    background: currentColor;
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: 5px;
    opacity: 0.65;
    width: 5px;
}

.badge-soft-success   { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); }
.badge-soft-danger    { background: var(--danger-bg);  border: 1px solid var(--danger-border);  color: var(--danger-text); }
.badge-soft-warning   { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-text); }
.badge-soft-info      { background: var(--info-bg);    border: 1px solid var(--info-border);    color: var(--info-text); }
.badge-soft-secondary { background: var(--gray-100);   border: 1px solid var(--gray-200);       color: var(--gray-600); }

/* ───────────────────────── ALERTS ─────────────────────────── */

.alert {
    border-radius: var(--r-md);
    border-width: 1px;
    box-shadow: var(--shadow-sm);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0.85rem 1rem;
}

.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.alert-info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-text); }

/* ───────────────────────── FILTER CARD ────────────────────── */

.filter-card { margin-bottom: 1rem; }
.filter-card .card-body { padding: 1rem 1.1rem; }

/* ───────────────────────── DASHBOARD ──────────────────────── */

/* Hero card */
.hero-card {
    background: linear-gradient(120deg,var(--surface) 0%,var(--brand-50) 100%);
    border: 1px solid var(--brand-100);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    margin-bottom: 1.2rem;
    overflow: hidden;
    position: relative;
}

.hero-card::after {
    background: radial-gradient(ellipse at 92% 18%,rgba(37,99,235,0.16) 0%,transparent 52%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.hero-card .card-body { padding: 1.4rem 1.5rem !important; position: relative; z-index: 1; }

.hero-content { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }

.hero-title { color: var(--gray-900); font-size: 1.65rem; font-weight: 800; line-height: 1.15; margin: 0; }

.hero-text { color: var(--gray-500); font-size: 0.88rem; line-height: 1.6; margin: 0.55rem 0 0; max-width: 500px; }

.hero-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 0.65rem; justify-content: flex-end; }

/* Overview grid */
.overview-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-bottom: 1.2rem;
}

.overview-metric {
    background: var(--surface-raised);
    border: 1px solid rgba(148,163,184,0.14);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    min-height: 148px;
    padding: 1.1rem;
    position: relative;
    transition: var(--t-normal);
}

.overview-metric:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.overview-metric-header { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 0.6rem; }

.overview-metric-title { color: var(--gray-500); font-size: 0.74rem; font-weight: 700; line-height: 1.35; max-width: 110px; }

.overview-metric-value { color: var(--gray-900); font-size: 2rem; font-weight: 800; line-height: 1; margin: 0.3rem 0 0.4rem; }

.overview-metric-subtitle { color: var(--gray-500); font-size: 0.73rem; font-weight: 600; }

.overview-metric-note { font-size: 0.73rem; font-weight: 700; margin-top: 0.52rem; }

.metric-icon {
    align-items: center;
    border-radius: var(--r-sm);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.05rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.metric-icon-blue   { background: rgba(59,130,246,0.12);  color: var(--brand-700); }
.metric-icon-pink   { background: rgba(244,63,94,0.1);    color: #e11d48; }
.metric-icon-indigo { background: rgba(99,102,241,0.12);  color: #4338ca; }
.metric-icon-rose   { background: rgba(244,114,182,0.14); color: #be185d; }
.metric-icon-green  { background: rgba(16,185,129,0.12);  color: #059669; }
.metric-icon-amber  { background: rgba(245,158,11,0.12);  color: #b45309; }

.text-growth         { color: #059669; }
.text-warning-strong { color: #d97706; }

/* Lower grid */
.overview-lower-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0,1.8fr) minmax(0,1fr);
    margin-bottom: 1.2rem;
}

.analytics-card,
.status-card { min-height: 100%; }

/* Analytics */
.analytics-toolbar {
    border: 1px solid var(--gray-200);
    border-radius: var(--r-sm);
    display: inline-flex;
    overflow: hidden;
}

.analytics-chip {
    background: var(--surface);
    border: none;
    color: var(--gray-700);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.36rem 0.68rem;
    transition: var(--t-fast);
}

.analytics-chip.active  { background: var(--gray-100); color: var(--gray-900); }
.analytics-chip:hover:not(.active) { background: var(--gray-50); }

.analytics-chart {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--r-md);
    margin-top: 0.85rem;
    min-height: 180px;
    padding: 1rem;
}

.analytics-values {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-bottom: 0.85rem;
}

.analytics-value-card {
    background: var(--surface);
    border: 1px solid var(--gray-100);
    border-radius: var(--r-sm);
    padding: 0.65rem;
}

.analytics-value-label { color: var(--gray-500); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.analytics-value-number { color: var(--gray-900); font-size: 1.1rem; font-weight: 800; margin-top: 0.22rem; }

.analytics-bars { align-items: flex-end; display: flex; gap: 0.55rem; height: 88px; }

.analytics-bar {
    align-items: flex-end;
    background: linear-gradient(180deg,var(--brand-400) 0%,var(--brand-700) 100%);
    border-radius: 7px 7px 4px 4px;
    color: #fff;
    display: flex;
    flex: 1;
    font-size: 0.58rem;
    font-weight: 800;
    justify-content: center;
    min-width: 0;
    padding-bottom: 0.28rem;
}

/* Status items */
.status-list { display: grid; gap: 0.52rem; margin-top: 0.75rem; }

.status-item {
    align-items: center;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--r-sm);
    display: flex;
    gap: 0.65rem;
    padding: 0.62rem 0.78rem;
    transition: var(--t-fast);
}

.status-item:hover { background: var(--surface); box-shadow: var(--shadow-sm); }

.status-item-icon {
    align-items: center;
    border-radius: var(--r-xs);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.85rem;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.status-item-icon.blue   { background: rgba(59,130,246,0.1);  color: var(--brand-700); }
.status-item-icon.yellow { background: rgba(245,158,11,0.12); color: #b45309; }
.status-item-icon.pink   { background: rgba(244,63,94,0.1);   color: #e11d48; }
.status-item-icon.green  { background: rgba(16,185,129,0.1);  color: #059669; }

.status-item-title { color: var(--gray-800); font-size: 0.82rem; font-weight: 700; }
.status-item-text  { color: var(--gray-500); font-size: 0.7rem; margin-top: 0.14rem; }
.status-item-value { color: var(--gray-900); font-size: 0.94rem; font-weight: 800; margin-left: auto; }

/* Quick actions */
.quick-action-card {
    background: linear-gradient(135deg,var(--surface) 0%,var(--brand-50) 100%);
    border: 1px solid var(--brand-100);
}

.quick-action-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fit,minmax(165px,1fr));
}

.quick-action-link {
    align-items: flex-start;
    background: var(--surface);
    border: 1.5px solid var(--gray-100);
    border-radius: var(--r-md);
    color: var(--gray-900);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 85px;
    padding: 0.78rem;
    transition: var(--t-normal);
}

.quick-action-link:hover {
    border-color: var(--brand-200);
    box-shadow: var(--shadow-md);
    color: var(--gray-900);
    transform: translateY(-2px);
}

.quick-action-title { font-size: 0.84rem; font-weight: 800; }
.quick-action-text  { color: var(--gray-500); font-size: 0.72rem; line-height: 1.5; }

/* ──────────────────────── REPORT PAGES ────────────────────── */

.report-summary-row .col-md-6,
.report-summary-row .col-xl-3 { display: flex; }

.report-stat-card { width: 100%; }

.report-stat-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 158px;
    padding: 1.1rem;
}

.report-stat-name   { color: var(--gray-800); font-size: 0.9rem; font-weight: 800; line-height: 1.25; margin-top: 0.4rem; overflow-wrap: anywhere; word-break: break-word; }
.report-stat-amount { color: var(--gray-900); font-size: clamp(1.1rem,1.5vw,1.6rem); font-weight: 800; line-height: 1.15; margin-top: 0.35rem; overflow-wrap: anywhere; word-break: break-word; }
.report-stat-side   { color: var(--gray-800); font-size: 0.9rem; font-weight: 800; line-height: 1.2; }
.report-stat-meta   { line-height: 1.45; margin-top: auto; }

/* ── Dealer ledger summary cards ────────────────────────────── */
.dlr-stat-card {
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: box-shadow var(--t-normal), transform var(--t-normal);
}
.dlr-stat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.dlr-stat-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.25rem 1.3rem;
}

.dlr-stat--opening { background: linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%); border-left: 4px solid #3b82f6; }
.dlr-stat--closing { background: linear-gradient(135deg,#f5f3ff 0%,#ede9fe 100%); border-left: 4px solid #8b5cf6; }
.dlr-stat--due     { background: linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%); border-left: 4px solid #f59e0b; }
.dlr-stat--grand   { background: linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%); border-left: 4px solid #22c55e; }
.dlr-stat--pbu     { background: linear-gradient(135deg,#fff1f2 0%,#ffe4e6 100%); border-left: 4px solid #f43f5e; }

.dlr-stat-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.dlr-stat-label {
    color: var(--gray-500);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dlr-stat-icon {
    align-items: center;
    border-radius: var(--r-sm);
    display: inline-flex;
    font-size: 1rem;
    height: 32px;
    justify-content: center;
    width: 32px;
}
.dlr-stat--opening .dlr-stat-icon { background: rgba(59,130,246,0.12); color: #2563eb; }
.dlr-stat--closing .dlr-stat-icon { background: rgba(139,92,246,0.12); color: #7c3aed; }
.dlr-stat--due     .dlr-stat-icon { background: rgba(245,158,11,0.12); color: #d97706; }
.dlr-stat--grand   .dlr-stat-icon { background: rgba(34,197,94,0.15);  color: #16a34a; }
.dlr-stat--pbu     .dlr-stat-icon { background: rgba(244,63,94,0.12);  color: #e11d48; }

.dlr-stat-link { color: var(--brand-600); font-weight: 700; text-decoration: none; }
.dlr-stat-link:hover { color: var(--brand-800); text-decoration: underline; }

.dlr-stat-amount {
    color: var(--gray-900);
    font-size: clamp(1.05rem,1.6vw,1.55rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dlr-stat-badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem 0.2rem 0.45rem;
    width: fit-content;
}
.dlr-badge-dot {
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    height: 7px;
    width: 7px;
}
.dlr-badge--dr  { background: #fee2e2; color: #b91c1c; }
.dlr-badge--dr  .dlr-badge-dot { background: #ef4444; }
.dlr-badge--cr  { background: #dcfce7; color: #15803d; }
.dlr-badge--cr  .dlr-badge-dot { background: #22c55e; }
.dlr-badge--nil { background: var(--gray-100); color: var(--gray-500); }
.dlr-badge--nil .dlr-badge-dot { background: var(--gray-400); }

.dlr-stat-meta {
    color: var(--gray-500);
    font-size: 0.72rem;
    line-height: 1.5;
    margin-top: 0.1rem;
}

.report-action-stack {
    align-items: center;
    display: inline-flex;
    flex-direction: row;
    gap: 0.35rem;
    min-width: 0;
    width: auto;
}

.report-action-form { display: inline-flex; margin: 0; width: auto; }

.report-action-btn {
    justify-content: center;
    min-width: 36px;
    padding-inline: 0.5rem;
    white-space: nowrap;
}

.report-action-icon-btn {
    align-items: center;
    display: inline-flex;
    font-size: 0.9rem;
    height: 34px;
    justify-content: center;
    min-width: 34px;
    padding: 0;
    width: 34px;
}

.report-action-icon { align-items: center; color: currentColor; display: inline-flex; justify-content: center; line-height: 1; }
.report-action-icon svg { display: block; fill: currentColor; height: 15px; width: 15px; }

/* ───────────────── LEDGER BOOK (Dealer Ledger Report) ─────── */

/* Container — no Bootstrap card, full control */
.ledger-book {
    background: var(--surface-raised);
    border: 1px solid rgba(148,163,184,0.15);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* Header row — flush, no margin, no extra padding */
.ledger-book-header {
    align-items: center;
    background: var(--surface-raised);
    border-bottom: 2px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
}

.ledger-book-title {
    color: var(--gray-800);
    font-size: 0.95rem;
    font-weight: 800;
}

.ledger-book-page {
    color: var(--gray-400);
    font-size: 0.75rem;
    font-weight: 700;
}

.ledger-book-footer {
    border-top: 1px solid var(--gray-100);
    padding: 0.85rem 1.25rem;
}

/* The table — completely custom, no Bootstrap .table */
.ledger-tbl {
    border-collapse: collapse;
    font-size: 0.82rem;
    table-layout: fixed;
    width: 100%;
}

/* Column widths — fitted to avoid horizontal scroll */
.ledger-col-sno         { width: 44px; }
.ledger-col-date        { width: 100px; }
.ledger-col-type        { width: 130px; }
.ledger-col-description { width: auto; }
.ledger-col-amount      { width: 118px; }
.ledger-col-balance     { width: 165px; }
.ledger-col-status      { width: 112px; }
.ledger-col-action      { width: 68px; }

/* Thead */
.ledger-tbl thead th {
    background: #f1f5f9;
    border-bottom: 2px solid #e2e8f0;
    color: var(--gray-500);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.6rem 0.85rem;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Tbody common */
.ledger-tbl tbody td {
    border-bottom: 1px solid var(--gray-100);
    padding: 0.55rem 0.85rem;
    vertical-align: middle;
}

.ledger-tbl tbody tr:last-child td { border-bottom: none; }

/* Alternating rows */
.ledger-tbl tbody tr:nth-child(even) td { background: rgba(248,250,252,0.6); }
.ledger-tbl tbody tr:hover td { background: #eff6ff; }

/* Opening row special */
.ledger-row-opening td { background: #f8fafc !important; }
.ledger-row-opening:hover td { background: #eff6ff !important; }

/* Cell types */
.ledger-sno-cell {
    color: var(--gray-400);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.ledger-date-cell {
    color: var(--gray-700);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.ledger-description-cell { line-height: 1.3; }

.ledger-description-title {
    color: var(--gray-800);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ledger-description-meta {
    color: var(--gray-400);
    font-size: 0.74rem;
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ledger-amount-cell { white-space: nowrap; }

.ledger-debit  { color: #be123c; font-weight: 700; }
.ledger-credit { color: #15803d; font-weight: 700; }
.ledger-zero   { color: var(--gray-300); font-weight: 500; }

.ledger-balance-amount {
    color: var(--gray-800);
    font-weight: 700;
}

.ledger-pending-note {
    color: var(--gray-400);
    font-size: 0.72rem;
    margin-top: 0.12rem;
    white-space: nowrap;
}

/* Dr / Cr / Nil pill */
.ledger-side-badge {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-left: 0.3rem;
    padding: 0.08rem 0.42rem;
    vertical-align: middle;
}
.ledger-side-dr  { background: #fee2e2; color: #b91c1c; }
.ledger-side-cr  { background: #dcfce7; color: #15803d; }
.ledger-side-nil { background: var(--gray-100); color: var(--gray-400); }

/* Badge size inside ledger */
.ledger-tbl .badge-soft { font-size: 0.65rem; padding: 0.22rem 0.5rem; white-space: nowrap; }

/* ── Ledger tfoot totals ── */
.ledger-tfoot td {
    padding: 0.65rem 0.85rem;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 0.83rem;
}

.ledger-tfoot-label {
    text-align: right;
    padding-right: 1rem;
}

.ledger-tfoot-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 0.22rem 0.85rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.ledger-tfoot-tag-all {
    color: #1e40af;
    background: linear-gradient(135deg, #bfdbfe, #dbeafe);
    border-color: #93c5fd;
}

.ledger-tfoot-page {
    border-top: 2px solid #e2e8f0;
    background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
}

.ledger-tfoot-page td .ledger-debit  { font-size: 0.88rem; }
.ledger-tfoot-page td .ledger-credit { font-size: 0.88rem; }

.ledger-tfoot-all {
    border-top: 1px dashed #93c5fd;
    background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 100%);
}

.ledger-tfoot-all td .ledger-debit  { font-size: 0.92rem; }
.ledger-tfoot-all td .ledger-credit { font-size: 0.92rem; }

/* Action buttons */
.report-action-icon-btn {
    align-items: center;
    display: inline-flex;
    font-size: 0.85rem;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 30px;
}

/* ───────────────────────── AUTH / LOGIN ───────────────────── */

.auth-wrapper {
    align-items: center;
    background:
        radial-gradient(circle at 12% 18%,rgba(37,99,235,0.38) 0%,transparent 36%),
        radial-gradient(circle at 88% 82%,rgba(99,102,241,0.22) 0%,transparent 32%),
        linear-gradient(145deg,#0b1530 0%,#111c40 50%,#091228 100%);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    overflow-y: auto;
    padding: 1rem;
}

.auth-card {
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: var(--r-xl);
    box-shadow: 0 32px 80px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.05);
    max-width: 430px;
    overflow: hidden;
    width: 100%;
}

.auth-card-top { background: transparent; padding: 1.4rem 1.5rem 0; }

.auth-brand { align-items: center; display: flex; gap: 1rem; }
.auth-brand-centered { align-items: center; flex-direction: column; gap: 0.55rem; text-align: center; }

.auth-brand-logo-wrap {
    align-items: center;
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: 0 16px 36px rgba(11,16,32,0.2);
    display: inline-flex;
    flex-shrink: 0;
    height: 80px;
    justify-content: center;
    padding: 0.75rem;
    width: 80px;
}

.auth-brand-logo-wrap-centered { height: 58px; width: 58px; }
.auth-brand-logo { display: block; height: 30px; object-fit: contain; width: 30px; border-radius: 5px; }

.auth-brand-copy { min-width: 0; }
.auth-brand-copy-centered { color: var(--gray-800); }

.auth-brand-badge {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--r-pill);
    color: rgba(255,255,255,0.9);
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    margin-bottom: 0.6rem;
    padding: 0.32rem 0.65rem;
    text-transform: uppercase;
}

.auth-brand-badge-centered {
    background: var(--brand-50);
    border-color: var(--brand-100);
    color: var(--brand-700);
    font-size: 0.6rem;
    margin-bottom: 0.35rem;
    padding: 0.22rem 0.55rem;
}

.auth-card-top h1 { color: var(--gray-900); font-size: 1.2rem; font-weight: 800; margin: 0; }
.auth-card-top p  { color: var(--gray-500); font-size: 0.76rem; line-height: 1.5; margin: 0.3rem auto 0; max-width: 300px; }

.auth-card-body { padding: 1rem 1.5rem 1.25rem; }
.auth-login-body .alert { margin-bottom: 0.8rem; }
.auth-login-form { margin-top: 0.1rem; }
.auth-field { margin-bottom: 0.7rem !important; }

.auth-form-label { color: var(--gray-700); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 0.3rem; }

.auth-input {
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--r-sm);
    color: var(--gray-800);
    font-size: 0.88rem;
    min-height: 42px;
    padding: 0.62rem 0.88rem;
    transition: var(--t-fast);
}

.auth-input::placeholder { color: var(--gray-400); }
.auth-input:focus { background: var(--surface); border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); outline: none; }

.auth-login-submit {
    background: linear-gradient(135deg,var(--brand-600) 0%,var(--brand-800) 100%);
    border: none;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-brand);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    min-height: 43px;
    transition: var(--t-fast);
}

.auth-login-submit:hover,
.auth-login-submit:focus {
    background: linear-gradient(135deg,var(--brand-700) 0%,var(--brand-900) 100%);
    box-shadow: 0 10px 28px rgba(37,99,235,0.3);
    color: #fff;
    transform: translateY(-1px);
}

.auth-divider {
    align-items: center;
    color: var(--gray-400);
    display: flex;
    font-size: 0.72rem;
    font-weight: 700;
    gap: 0.65rem;
    justify-content: center;
    letter-spacing: 0.14em;
    margin: 0.8rem 0;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after { background: var(--gray-200); content: ''; flex: 1; height: 1px; }
.auth-divider span   { background: var(--surface); padding: 0 0.2rem; }

.auth-secondary-panel {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-sm);
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    min-height: 40px;
    padding: 0.5rem 0.8rem;
}

.auth-secondary-icon { color: var(--brand-700); display: inline-flex; font-size: 0.88rem; }
.auth-secondary-text { color: var(--gray-800); font-size: 0.74rem; font-weight: 700; text-align: center; }
.auth-note { color: var(--gray-400); font-size: 0.7rem; line-height: 1.4; margin-top: 0.6rem; text-align: center; }

/* ───────────────────────── SUMMARY / DETAIL ───────────────── */

.summary-list dt { color: var(--gray-500); font-size: 0.84rem; font-weight: 700; }
.summary-list dd { color: var(--gray-800); font-size: 0.88rem; font-weight: 700; margin-bottom: 0.85rem; }

/* Input group integration */
.input-group-text {
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    color: var(--gray-400);
    font-size: 0.9rem;
}

.input-group .form-control:focus { z-index: 1; }

/* ─────────────────────── PAGINATION ───────────────────────── */

.pagination { gap: 3px; }

.page-link {
    border: 1px solid var(--gray-200);
    border-radius: var(--r-xs) !important;
    color: var(--gray-600);
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 34px;
    padding: 0.4rem 0.65rem;
    text-align: center;
    transition: var(--t-fast);
}

.page-link:hover { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.page-item.active .page-link { background: var(--brand-600); border-color: var(--brand-600); box-shadow: 0 4px 10px rgba(37,99,235,0.2); color: #fff; }
.page-item.disabled .page-link { opacity: 0.4; }

/* ─────────────────────── EMPTY STATE ──────────────────────── */

/* Auto-style table empty-row cells (py-4 + text-muted + text-center) */
.table tbody td.text-center.text-muted.py-4 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.table tbody td.text-center.text-muted.py-4::before {
    content: '\F1BF';
    display: block;
    font-family: 'bootstrap-icons';
    font-size: 2rem;
    color: var(--gray-300);
    margin-bottom: 0.5rem;
}

.empty-state {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.empty-state-icon {
    align-items: center;
    background: var(--gray-100);
    border-radius: 50%;
    color: var(--gray-400);
    display: inline-flex;
    font-size: 1.8rem;
    height: 64px;
    justify-content: center;
    margin-bottom: 0.5rem;
    width: 64px;
}

.empty-state-title { color: var(--gray-700); font-size: 1rem; font-weight: 800; }
.empty-state-text  { color: var(--gray-400); font-size: 0.84rem; max-width: 320px; }

/* ─────────────────────── TOAST ────────────────────────────── */

#toast-container {
    bottom: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    pointer-events: none;
    position: fixed;
    right: 1.4rem;
    z-index: 9999;
}

.toast-msg {
    align-items: center;
    animation: toast-in 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
    background: var(--surface);
    border-left: 4px solid var(--brand-500);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-xl);
    color: var(--gray-800);
    display: flex;
    font-size: 0.84rem;
    font-weight: 600;
    gap: 0.65rem;
    max-width: 360px;
    min-width: 240px;
    padding: 0.8rem 1rem;
    pointer-events: auto;
}

.toast-msg.toast-success { border-left-color: var(--success-dot); }
.toast-msg.toast-danger  { border-left-color: var(--danger-dot); }
.toast-msg.toast-warning { border-left-color: var(--warning-dot); }
.toast-msg.toast-out     { animation: toast-out 0.25s ease forwards; }

@keyframes toast-in  { from { opacity:0; transform:translateX(30px) scale(0.96); } to { opacity:1; transform:none; } }
@keyframes toast-out { to   { opacity:0; transform:translateX(30px) scale(0.95); } }

/* ─────────────────────── PWA INSTALL ─────────────────────── */

.pwa-install-btn {
    align-items: center;
    background: linear-gradient(135deg,var(--brand-600) 0%,var(--brand-700) 100%);
    border: none;
    border-radius: var(--r-pill);
    bottom: 1.4rem;
    box-shadow: var(--shadow-brand);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 800;
    gap: 0.5rem;
    left: 1.4rem;
    padding: 0.78rem 1rem;
    position: fixed;
    transition: var(--t-fast);
    z-index: 9985;
}

.pwa-install-btn:hover {
    background: linear-gradient(135deg,var(--brand-700) 0%,var(--brand-800) 100%);
    color: #fff;
    transform: translateY(-1px);
}

.pwa-install-btn:focus-visible {
    outline: 3px solid rgba(59,130,246,0.22);
    outline-offset: 3px;
}

.pwa-install-btn i {
    font-size: 0.95rem;
}

/* ─────────────────── CONFIRM DIALOG ───────────────────────── */

.confirm-dialog-overlay {
    align-items: center;
    animation: fade-in 0.18s ease;
    backdrop-filter: blur(4px);
    background: rgba(5,10,20,0.62);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 9990;
}

.confirm-dialog {
    animation: slide-up 0.22s cubic-bezier(0.34,1.56,0.64,1);
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl);
    max-width: 380px;
    padding: 2rem;
    text-align: center;
    width: 100%;
}

.confirm-dialog-icon {
    align-items: center;
    background: var(--danger-bg);
    border-radius: 50%;
    color: var(--danger-text);
    display: inline-flex;
    font-size: 1.4rem;
    height: 56px;
    justify-content: center;
    margin-bottom: 1rem;
    width: 56px;
}

.confirm-dialog-title   { color: var(--gray-900); font-size: 1.05rem; font-weight: 800; margin-bottom: 0.5rem; }
.confirm-dialog-msg     { color: var(--gray-500); font-size: 0.86rem; margin-bottom: 1.4rem; }
.confirm-dialog-actions { display: flex; gap: 0.65rem; justify-content: center; }
.confirm-dialog-actions .btn { flex: 1; }

@keyframes fade-in  { from { opacity:0; } to { opacity:1; } }
@keyframes slide-up { from { opacity:0; transform:translateY(20px) scale(0.96); } to { opacity:1; transform:none; } }

/* ─────────────────────── MODAL OVERRIDES ──────────────────── */

.modal-content    { border: 1px solid var(--gray-100); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); }
.modal-header     { border-bottom: 1px solid var(--gray-100); padding: 1.1rem 1.3rem; }
.modal-title      { font-size: 1rem; font-weight: 800; }
.modal-body       { padding: 1.2rem 1.3rem; }
.modal-footer     { border-top: 1px solid var(--gray-100); gap: 0.5rem; padding: 0.85rem 1.3rem; }

/* ─────────────────────── SKELETON ─────────────────────────── */

.skeleton {
    animation: sk-pulse 1.6s ease-in-out infinite;
    background: linear-gradient(90deg,var(--gray-100) 25%,var(--gray-50) 50%,var(--gray-100) 75%);
    background-size: 400px 100%;
    border-radius: var(--r-xs);
}

@keyframes sk-pulse { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }

/* ─────────────────────── RESPONSIVE ───────────────────────── */

/* Fixed sidebar on desktop */
@media (min-width: 992px) {
    .app-sidebar { bottom:0; left:0; position:fixed; top:0; }
    .app-shell   { margin-left:var(--sidebar-width); width:calc(100% - var(--sidebar-width)); }
    .js-sidebar-toggle { display:none; }
}

/* Smaller desktop */
@media (min-width: 992px) and (max-width: 1399.98px) {
    :root { --sidebar-width:248px; }
    .app-main { padding:1rem 1.1rem; }
    .app-main > * { max-width:100%; }
    .overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hero-title { font-size:1.5rem; }
    .report-stat-card .card-body { min-height:148px; }
}

/* Mobile */
@media (max-width: 991.98px) {
    .app-sidebar {
        box-shadow: 20px 0 60px rgba(0,0,0,0.35);
        flex-basis: auto;
        height: 100vh;
        left: 0;
        max-width: min(82vw,310px);
        min-width: 0;
        position: fixed;
        top: 0;
        transform: translateX(-100%);
        transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
        width: min(82vw,310px);
    }

    body.sidebar-open .app-sidebar { transform: translateX(0); }
    body.sidebar-open .app-sidebar-backdrop { opacity:1; pointer-events:auto; }

    .app-topbar { flex-wrap:wrap; left:0; min-height:auto; padding:0.7rem 0.9rem; }
    .app-topbar-title { font-size:0.98rem; }
    .app-main { padding:0.85rem; }
    .page-header { flex-direction:column; }

    .overview-grid,
    .overview-lower-grid,
    .analytics-values,
    .quick-action-grid { grid-template-columns:1fr; }

    .hero-title { font-size:1.4rem; }
    .hero-content { align-items:flex-start; flex-direction:column; }
    .hero-actions { justify-content:flex-start; }

    .app-topbar-actions { justify-content:flex-end; }

    .page-header .btn,
    .page-header .app-primary-btn,
    .page-header .btn-soft-primary { flex:1 1 160px; }

    .filter-card .d-flex.gap-2,
    .page-header .d-flex.gap-2,
    .page-header .d-inline-flex.gap-2 { flex-wrap:wrap; }

    .auth-brand { align-items:flex-start; flex-direction:column; }
    .auth-brand-centered { align-items:center; }

    .report-stat-card .card-body { min-height:145px; }

    .report-action-stack,
    .report-action-form,
    .report-action-btn { min-width:auto; width:auto; }
}

@media (max-width: 1199.98px) {
    .app-topbar-actions .app-primary-btn span { display:none; }
    .app-primary-btn { min-width:38px; padding-inline:0.72rem; }
    .page-header .d-flex,.page-header .btn-group { flex-wrap:wrap; }
    .quick-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 767.98px) {
    body { font-size:14px; }
    .app-topbar { padding:0.65rem 0.75rem; }
    .app-topbar-start,.app-topbar-actions { width:100%; }
    .app-topbar-actions { justify-content:space-between; }
    .app-topbar-actions .app-primary-btn { flex:1 1 auto; justify-content:center; }
    .app-main { padding:0.72rem; }
    .panel-card .card-body,.stat-card .card-body { padding:0.9rem; }
    .form-control,.form-select { min-height:40px; }
    .quick-action-grid { grid-template-columns:1fr; }

}

@media (max-width: 575.98px) {
    .app-sidebar { max-width:280px; }
    .app-topbar-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .app-icon-btn,.app-topbar-avatar { height:34px; width:34px; }
    .page-title { font-size:1.1rem; }
    .auth-card-top { padding:1.1rem 1.1rem 0; }
    .auth-card-body { padding:0.95rem; }
    .auth-brand-logo-wrap { height:60px; width:60px; }
    .auth-brand-logo { height:28px; width:28px; }
    .auth-card-top h1 { font-size:1.08rem; }
    .auth-input { min-height:40px; }
    .app-primary-btn,.btn-soft-primary { justify-content:center; width:100%; }
    .hero-actions { width:100%; }
    .report-stat-card .card-body { min-height:auto; padding:0.95rem; }
    .report-action-stack { align-items:center; }
    #toast-container { bottom:1rem; left:1rem; right:1rem; }
    .toast-msg { max-width:100%; min-width:0; width:100%; }
    .pwa-install-btn { bottom:1rem; left:1rem; justify-content:center; right:1rem; width:auto; }
}

@media (min-height: 0) and (max-height: 900px) {
    .auth-wrapper { align-items:flex-start; padding-bottom:0.6rem; padding-top:0.6rem; }
}

/* ══════════════ ENHANCED MOBILE RESPONSIVENESS ═════════════ */

/* ── Tap highlight for touch devices ── */
* { -webkit-tap-highlight-color: rgba(59,130,246,0.1); }

/* ── iOS safe area insets (notch / home indicator) ── */
@supports (padding: max(0px)) {
    .app-main        { padding-bottom: max(1.2rem, env(safe-area-inset-bottom)); }
    .sidebar-footer  { padding-bottom: max(0.72rem, env(safe-area-inset-bottom)); }
}

/* ── Ledger book — horizontal scroll on tablet & mobile ── */
@media (max-width: 991.98px) {
    .ledger-book { -webkit-overflow-scrolling: touch; overflow-x: auto; }
    .ledger-tbl  { min-width: 700px; table-layout: auto; }
    .ledger-col-description { min-width: 155px; width: auto; }
}

/* ── Table-responsive smooth scroll ── */
.table-responsive { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }

/* ── Topbar — keep single row on mobile, actions pinned to right ── */
@media (max-width: 767.98px) {
    .app-topbar         { flex-wrap: nowrap; }
    .app-topbar-start   { flex: 1 1 0; min-width: 0; width: auto; }
    .app-topbar-actions { flex-shrink: 0; justify-content: flex-end; width: auto; }
}

/* ── Notification dropdown — prevent overflow on narrow phones ── */
@media (max-width: 575.98px) {
    .notif-bell-wrap { position: static; }
    .notif-dropdown  {
        left: 0.75rem;
        max-width: none;
        min-width: 0;
        position: fixed;
        right: 0.75rem;
        top: calc(var(--topbar-height) + 10px);
        width: auto;
    }
}

/* ── Topbar — compact layout for very small phones (< 400 px) ── */
@media (max-width: 399.98px) {
    :root { --topbar-height: 54px; }
    .app-topbar        { gap: 0.25rem; padding: 0.5rem 0.6rem; }
    .app-topbar-label  { display: none; }
    .app-topbar-title  { font-size: 0.88rem; }
    .app-icon-btn      { font-size: 0.85rem; height: 32px; width: 32px; }
    .app-topbar-avatar { font-size: 0.72rem; height: 32px; width: 32px; }
    .app-primary-btn   { font-size: 0.78rem; padding: 0.44rem 0.65rem; }
}

/* ── Stat / metric values — scale down on phones ── */
@media (max-width: 767.98px) {
    .stat-value            { font-size: 1.45rem; }
    .overview-metric-value { font-size: 1.55rem; }
}

@media (max-width: 575.98px) {
    .stat-value            { font-size: 1.25rem; }
    .overview-metric-value { font-size: 1.35rem; }
    .overview-metric       { min-height: 120px; padding: 0.85rem; }
    .dlr-stat-amount       { font-size: 1.05rem !important; }
    .report-stat-amount    { font-size: 1.05rem !important; }
    .hero-title            { font-size: 1.15rem; }
}

/* ── Touch-friendly minimum tap targets ── */
@media (pointer: coarse) {
    .sidebar-link        { min-height: 44px; }
    .sidebar-sublink     { min-height: 42px; }
    .sidebar-group-toggle{ min-height: 44px; }
    .app-icon-btn        { min-height: 40px; min-width: 40px; }
    .btn                 { min-height: 44px; }
    .btn-sm              { min-height: 36px; }
    .form-control,
    .form-select         { min-height: 44px; }
    .page-link           { min-height: 40px; min-width: 40px; }
}

/* ── Filter card — stack submit buttons on small phones ── */
@media (max-width: 575.98px) {
    .filter-card .col-12.d-flex         { flex-direction: column; }
    .filter-card .col-12.d-flex .btn    { justify-content: center; width: 100%; }
}

/* ── Page header action buttons — flex wrap on small screens ── */
@media (max-width: 575.98px) {
    .page-header .d-flex.gap-2 .btn,
    .page-header .d-flex.flex-wrap .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
}

/* ── Pagination — compact on small screens ── */
@media (max-width: 575.98px) {
    .pagination       { gap: 2px; }
    .page-link        { font-size: 0.78rem; min-width: 32px; padding: 0.35rem 0.5rem; }
}

/* ── Panel card padding — tighten on very small screens ── */
@media (max-width: 399.98px) {
    .app-main                            { padding: 0.55rem; }
    .panel-card .card-body               { padding: 0.75rem; }
    .dlr-stat-card .card-body            { padding: 0.85rem 1rem; }
    .page-title                          { font-size: 1rem; }
    .ledger-book-header,
    .ledger-book-footer                  { padding: 0.65rem 0.9rem; }
    .section-title                       { font-size: 0.85rem; }
}

/* ─────────────────────── DARK MODE ────────────────────────── */

[data-theme="dark"] {
    /* Remap gray scale — light grays become dark surfaces, dark grays become light text */
    --gray-50:  #0d1525;
    --gray-100: #1a2744;
    --gray-200: #2d3f60;
    --gray-300: #3d5278;
    --gray-400: #64748b;
    --gray-500: #94a3b8;
    --gray-600: #b0c4d8;
    --gray-700: #c8d8e8;
    --gray-800: #dce8f4;
    --gray-900: #f0f6ff;

    /* Semantic badge colours — muted dark backgrounds, light vivid text */
    --success-bg:    rgba(5,46,22,0.45);   --success-border: rgba(22,163,74,0.22);  --success-text: #4ade80;
    --danger-bg:     rgba(80,10,20,0.45);  --danger-border:  rgba(244,63,94,0.22);  --danger-text:  #fb7185;
    --warning-bg:    rgba(80,55,0,0.45);   --warning-border: rgba(245,158,11,0.22); --warning-text: #fbbf24;
    --info-bg:       rgba(10,35,90,0.45);  --info-border:    rgba(59,130,246,0.22); --info-text:    #60a5fa;

    /* Topbar */
    --topbar-bg:      rgba(9,16,35,0.97);
    --topbar-border:  rgba(255,255,255,0.07);

    /* Surfaces */
    --surface:        #131f36;
    --surface-raised: #0d1525;

    /* Shadows — heavier for depth on dark backgrounds */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.45),  0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 28px rgba(0,0,0,0.65),0 4px 8px rgba(0,0,0,0.4);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.75),0 8px 16px rgba(0,0,0,0.5);
}

[data-theme="dark"] body {
    background: linear-gradient(145deg,#080f1f 0%,#0b1429 100%);
    color: var(--gray-700);
}

/* Topbar title */
[data-theme="dark"] .app-topbar-title { color: var(--gray-900); }
[data-theme="dark"] .app-topbar-label { color: var(--gray-400); }

/* Stat card glass overlay — tone down in dark mode */
[data-theme="dark"] .stat-card::before {
    background: linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
}

/* Tables */
[data-theme="dark"] .table thead th {
    background: #111d33;
    border-bottom-color: var(--gray-200);
    color: var(--gray-500);
}
[data-theme="dark"] .table tbody td { border-top-color: var(--gray-200); }
[data-theme="dark"] .table tbody tr:hover td { background: rgba(255,255,255,0.025); }

/* Outline buttons */
[data-theme="dark"] .btn-outline-danger:hover { background: rgba(244,63,94,0.12); border-color: rgba(244,63,94,0.4); }
[data-theme="dark"] .btn-outline-success              { border-color: rgba(22,163,74,0.35);  color: #4ade80; }
[data-theme="dark"] .btn-outline-success:hover        { background: rgba(22,163,74,0.1);    color: #4ade80; }

/* Dark mode toggle button — golden sun/moon tint */
[data-theme="dark"] #halDarkToggle              { border-color: rgba(251,191,36,0.22); color: #fbbf24; }
[data-theme="dark"] #halDarkToggle:hover        { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.4); color: #f59e0b; }

/* Light mode toggle button — blue tint in dark mode (when showing moon for light mode) */
#halDarkToggle { transition: var(--t-fast); }

/* Notification dropdown */
[data-theme="dark"] .notif-dropdown        { border-color: var(--gray-200); }
[data-theme="dark"] .notif-dropdown-header { border-bottom-color: var(--gray-200); }
[data-theme="dark"] .notif-item            { border-bottom-color: var(--gray-200); }
[data-theme="dark"] .notif-dropdown-footer { border-top-color: var(--gray-200); }
[data-theme="dark"] .notif-item-due        { color: #fb7185; }
[data-theme="dark"] .notif-item-vehicle    { color: var(--gray-800); }
[data-theme="dark"] .notif-item-chassis    { background: var(--gray-100); color: var(--gray-500); }
[data-theme="dark"] .notif-count-badge     { background: rgba(59,130,246,0.15); }
[data-theme="dark"] .notif-dropdown-footer:hover { background: rgba(59,130,246,0.1); color: var(--brand-400); }

/* Confirm dialog uses --surface so it auto-inherits dark background */

/* Modal */
[data-theme="dark"] .modal-header { border-bottom-color: var(--gray-200); }
[data-theme="dark"] .modal-footer { border-top-color:    var(--gray-200); }

/* Auth page */
[data-theme="dark"] .auth-wrapper {
    background: linear-gradient(145deg,#050d1c 0%,#091428 100%);
}
[data-theme="dark"] .auth-input-wrap .form-control { color: var(--gray-800); }

/* ──────────────────────── PRINT ────────────────────────────── */

@media print {
    body { background:#fff; font-size:12px; }
    .app-layout { display:block; }
    .app-sidebar,.app-topbar,.app-sidebar-backdrop,
    .d-print-none,.btn,.btn-group,.sidebar-footer,
    .filter-card { display:none !important; }
    .app-shell { margin-left:0; width:100%; }
    .app-main  { padding:0; }
    .panel-card,.stat-card,.overview-metric { border:1px solid #d1d5db; box-shadow:none; }
    .card,.row,.table-responsive { break-inside:avoid; }
    .table thead th,.table tbody td { padding:0.5rem 0.7rem; }
    a[href]::after { content:'' !important; }
}