:root {
    --ink: #18202b;
    --muted: #667085;
    --line: #e5e7eb;
    --surface: #ffffff;
    --surface-soft: #eef3f8;
    --nav: #101820;
    --nav-2: #243447;
    --accent: #f5c542;
    --accent-2: #2f80ed;
    --success: #16835f;
    --danger: #d92d20;
    --warning: #b7791f;
}

* { letter-spacing: 0; }

body {
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--surface-soft);
    color: var(--ink);
    line-height: 1.45;
}

.app-topbar {
    background: linear-gradient(135deg, #101820 0%, #243447 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    min-height: 76px;
    box-shadow: 0 12px 28px rgba(16, 24, 32, .16);
}

.btn-topbar-icon {
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    margin-right: 10px;
}

.btn-topbar-icon:hover,
.btn-topbar-icon:focus {
    color: var(--ink);
    background: var(--accent);
    border-color: var(--accent);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    font-weight: 800;
    font-size: 1.18rem;
}

.navbar-brand img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.app-shell > .row { min-height: calc(100vh - 76px); }

.sidebar {
    background: linear-gradient(180deg, #101820 0%, #1a2734 48%, #243447 100%);
    min-height: calc(100vh - 76px);
    box-shadow: 8px 0 24px rgba(16,24,32,.08);
}

.sidebar .nav-link {
    color: rgba(255,255,255,.76);
    padding: 11px 14px;
    margin: 3px 10px;
    border-radius: 8px;
    font-weight: 650;
    font-size: .92rem;
    display: flex;
    align-items: center;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: var(--accent);
    color: var(--ink);
    box-shadow: 0 8px 18px rgba(245, 197, 66, .22);
}

.sidebar .nav-link i {
    width: 22px;
    margin-right: 10px;
    text-align: center;
}

.sidebar-section-label {
    color: rgba(255,255,255,.48);
    font-size: .7rem;
    font-weight: 850;
    text-transform: uppercase;
    padding: 14px 22px 5px;
}

@media (min-width: 769px) {
    .sidebar,
    main.col-md-9 {
        transition: width .22s ease, flex-basis .22s ease, max-width .22s ease;
    }

    body.sidebar-collapsed #sidebar {
        flex: 0 0 76px !important;
        width: 76px !important;
        max-width: 76px !important;
    }

    body.sidebar-collapsed main.col-md-9,
    body.sidebar-collapsed main.col-lg-10 {
        flex: 0 0 calc(100% - 76px) !important;
        width: calc(100% - 76px) !important;
        max-width: calc(100% - 76px) !important;
        margin-left: 0 !important;
    }

    body.sidebar-collapsed .sidebar-section-label,
    body.sidebar-collapsed .nav-link-text {
        display: none;
    }

    body.sidebar-collapsed .sidebar .nav-link {
        justify-content: center;
        margin: 6px 10px;
        padding: 12px 0;
    }

    body.sidebar-collapsed .sidebar .nav-link i {
        margin-right: 0;
    }
}

main {
    padding-top: 26px;
    padding-bottom: 42px;
}

.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.page-title h1 {
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0;
}

.page-title p {
    color: var(--muted);
    margin: 4px 0 0;
}

.card {
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(16,24,32,.06);
    margin-bottom: 18px;
    background: var(--surface);
}

.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    border-radius: 8px 8px 0 0 !important;
    padding: 15px 18px;
    font-weight: 800;
}

.card-body { padding: 18px; }

.metric {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
    border-radius: 8px;
    padding: 16px;
    min-height: 118px;
}

.metric .label {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.metric .number {
    font-size: 1.75rem;
    font-weight: 850;
    margin-top: 8px;
}

.metric i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff7d6;
    color: #946200;
}

.balance-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.balance-metric {
    min-height: 126px;
    height: 100%;
    overflow: hidden;
}

.balance-metric .number {
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

.balance-metric .label {
    font-size: .74rem;
}

.balance-metric,
.balance-metric .label,
.balance-metric .number {
    color: #fff;
}

.balance-metric i {
    background: rgba(255,255,255,.18);
    color: #fff;
}

.metric-receivable {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.metric-payable {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.metric-receivable .label,
.metric-payable .label {
    color: rgba(255,255,255,.86);
}

.metric-receivable i,
.metric-payable i {
    background: rgba(255,255,255,.18);
    color: #fff;
}

.balance-metric-white,
.balance-metric-white .label,
.balance-metric-white .number {
    color: #fff;
}

.balance-metric-white i {
    background: rgba(255,255,255,.18);
    color: #fff;
}

.dashboard-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.dashboard-metric {
    min-height: 138px;
    height: 100%;
    border-radius: 8px;
    padding: 16px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(16,24,32,.12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dashboard-metric i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,.18);
    color: #fff;
}

.dashboard-metric .number {
    font-size: 1.35rem;
    font-weight: 850;
    overflow-wrap: anywhere;
    line-height: 1.15;
}

.dashboard-metric .label {
    font-size: .76rem;
    font-weight: 850;
    text-transform: uppercase;
    color: rgba(255,255,255,.86);
}

.metric-blue { background: linear-gradient(135deg, #1f6feb 0%, #0f3d91 100%); }
.metric-indigo { background: linear-gradient(135deg, #635bff 0%, #34258f 100%); }
.metric-slate { background: linear-gradient(135deg, #243447 0%, #101820 100%); }
.metric-amber { background: linear-gradient(135deg, #f59e0b 0%, #92400e 100%); }
.metric-teal { background: linear-gradient(135deg, #0f766e 0%, #064e3b 100%); }
.metric-emerald { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.metric-gold { background: linear-gradient(135deg, #f5c542 0%, #946200 100%); color: #18202b; }
.metric-gold i { background: rgba(24,32,43,.16); color: #18202b; }
.metric-gold .label { color: rgba(24,32,43,.78); }
.metric-cyan { background: linear-gradient(135deg, #0891b2 0%, #155e75 100%); }
.metric-purple { background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%); }
.metric-red { background: linear-gradient(135deg, #dc3545 0%, #8f1d2a 100%); }
.metric-green { background: linear-gradient(135deg, #198754 0%, #0f5132 100%); }
.metric-rose { background: linear-gradient(135deg, #e11d48 0%, #881337 100%); }

.btn {
    border-radius: 8px;
    font-weight: 750;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
}

.btn-primary:hover,
.btn-primary:focus {
    background: #e7b72d;
    border-color: #e7b72d;
    color: var(--ink);
}

.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.form-label,
label {
    font-weight: 750;
    color: #344054;
    font-size: .9rem;
}

.form-control,
.form-select {
    border-radius: 8px;
    border-color: #d0d5dd;
}

.table-responsive {
    border: 1px solid var(--line);
    border-radius: 8px;
}

.table { margin: 0; }

.table thead th {
    background: #f0f3f7;
    color: #344054;
    border-bottom: 1px solid var(--line);
    font-size: .76rem;
    text-transform: uppercase;
    font-weight: 850;
    white-space: nowrap;
}

.table tbody td {
    vertical-align: middle;
    color: #293241;
    border-color: #edf0f3;
    font-size: .9rem;
}

.table-hover tbody tr:hover { background: #fffaf0; }

.badge {
    border-radius: 999px;
    font-weight: 750;
}

.status-cancelled { color: var(--danger); font-weight: 800; }
.status-live { color: var(--success); font-weight: 800; }
.wide-table { min-width: 1500px; }
.driver-directory-table { min-width: 2100px; }
.driver-table-scroll { max-height: 560px; }
.balance-table { min-width: 1780px; }

.balance-export-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.balance-export-btn {
    min-width: 154px;
    justify-content: center;
}

.balance-table .status-col {
    min-width: 104px;
}

.balance-table .bank-col {
    min-width: 132px;
    white-space: nowrap;
}

.balance-table .balance-status-col {
    min-width: 142px;
    white-space: nowrap;
}

.balance-table .narrow-balance-col {
    width: 96px;
    min-width: 96px;
    max-width: 104px;
    white-space: normal;
    line-height: 1.15;
}

.balance-table td.narrow-balance-col {
    white-space: nowrap;
}

.balance-table .opening-balance-col {
    min-width: 132px;
}

.data-table-scroll {
    max-height: 430px;
    overflow: auto;
}

.data-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

.driver-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}

.driver-export-actions {
    display: flex;
    gap: 8px;
    align-items: end;
}

.driver-th-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.column-note-btn {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #243447;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    padding: 0;
}

.column-note-btn:hover,
.column-note-btn:focus {
    background: var(--accent);
    color: var(--ink);
}

.driver-note-cell {
    min-width: 180px;
    white-space: normal;
}

.driver-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 220px;
    position: relative;
}

.driver-name-cell form {
    margin: 0;
}

.driver-name-hover {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: help;
}

.driver-name-hover .fa-circle-info {
    color: var(--accent-2);
    font-size: .84rem;
}

.driver-hover-card {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: 280px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 18px 38px rgba(16,24,32,.18);
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
}

.driver-hover-card span {
    display: block;
    margin-bottom: 3px;
}

.driver-hover-card span:last-child {
    margin-bottom: 0;
}

.driver-name-hover:hover .driver-hover-card,
.driver-name-hover:focus .driver-hover-card,
.driver-name-hover:focus-within .driver-hover-card {
    display: block;
}

.driver-reg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 5px 10px;
    border: 2px solid #18202b;
    border-radius: 6px;
    background: #f5c542;
    color: #101820;
    font-weight: 900;
    font-size: .92rem;
    letter-spacing: .04em;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}

.driver-vehicles-cell {
    min-width: 280px;
    white-space: normal;
}

.driver-vehicle-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

.driver-vehicle-summary:last-child {
    border-bottom: 0;
}

.driver-vehicle-summary small {
    flex-basis: 100%;
    color: var(--muted);
}

.driver-actions-cell {
    min-width: 132px;
    white-space: nowrap;
}

.driver-actions-cell form {
    display: inline-block;
    margin: 0 0 0 6px;
}

.status-form { margin: 0; }

.status-select {
    width: 104px;
    border: 0;
    color: #fff;
    font-weight: 850;
}

.status-active,
.status-active:focus {
    background-color: var(--success);
    color: #fff;
}

.status-inactive,
.status-inactive:focus {
    background-color: var(--danger);
    color: #fff;
}

.invoice-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 26px;
}

.login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #101820 0%, #243447 52%, #f5c542 52%, #f5c542 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 430px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(0,0,0,.22);
    padding: 30px;
}

.login-card img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 76px;
        left: -100%;
        width: 280px;
        z-index: 1050;
        transition: left .25s ease;
    }

    .sidebar.show { left: 0; }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 76px;
        left: 0;
        width: 100%;
        height: calc(100% - 76px);
        background: rgba(16,24,32,.55);
        z-index: 1040;
    }

    .sidebar-backdrop.show { display: block; }
    main { padding: 20px 14px !important; }
    .page-title { align-items: flex-start; flex-direction: column; }
    .login-page { background: #101820; }
}

@media print {
    .no-print,
    .sidebar,
    .navbar,
    footer,
    .btn { display: none !important; }
    body { background: white; }
    main { width: 100% !important; margin: 0 !important; padding: 0 !important; }
    .card,
    .invoice-box { box-shadow: none; border: none; }
}

/* ---------------------------------------------------------------------------
   Driver ledger - one colour rule, used by every accounting screen.

   payable to driver / paid to driver     -> red
   receivable from driver / received      -> green
   zero, settled, or a reversed row        -> neutral

   The classes are named for the meaning rather than the colour so the mapping
   lives in ledger_event_presentation() and nowhere else.
   --------------------------------------------------------------------------- */

.ledger-payable { color: var(--danger); font-weight: 700; }
.ledger-receivable { color: var(--success); font-weight: 700; }
.ledger-zero { color: #6c757d; font-weight: 600; }

tr.ledger-row-reversed td { opacity: .62; text-decoration-color: #adb5bd; }
tr.ledger-row-reversed .ledger-amount { text-decoration: line-through; }

.ledger-direction-word {
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 800;
}

/* Balance headline used on the read-only Driver Balances page. */
.balance-headline { white-space: nowrap; font-weight: 800; }
.balance-needs-review {
    color: #8a6d3b;
    background: #fff5db;
    border: 1px solid #f0dca4;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Ledger transaction table: sticky header plus two frozen leading columns so
   the date and the transaction name stay readable while scrolling sideways. */
.ledger-table-scroll {
    max-height: 620px;
    overflow: auto;
}

.ledger-table {
    min-width: 1180px;
    margin-bottom: 0;
}

.ledger-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #f0f3f7;
    white-space: nowrap;
}

.ledger-table th.ledger-col-date,
.ledger-table td.ledger-col-date {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff;
    min-width: 104px;
    white-space: nowrap;
}

.ledger-table th.ledger-col-type,
.ledger-table td.ledger-col-type {
    position: sticky;
    left: 104px;
    z-index: 3;
    background: #fff;
    min-width: 218px;
    white-space: nowrap;
}

.ledger-table thead th.ledger-col-date,
.ledger-table thead th.ledger-col-type {
    z-index: 5;
    background: #f0f3f7;
}

.ledger-table tbody tr:hover td.ledger-col-date,
.ledger-table tbody tr:hover td.ledger-col-type {
    background: #f6f8fb;
}

.ledger-table .ledger-col-reference { min-width: 152px; white-space: nowrap; }
.ledger-table .ledger-col-money { min-width: 116px; white-space: nowrap; text-align: right; }
.ledger-table .ledger-col-direction { min-width: 176px; }
.ledger-table .ledger-col-status { min-width: 108px; white-space: nowrap; }
.ledger-table .ledger-col-audit { min-width: 260px; font-size: .82rem; color: #5b6674; }

.ledger-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.ledger-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    padding: 14px 16px;
}

.ledger-card .ledger-card-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    font-weight: 700;
    margin-bottom: 6px;
}

.ledger-card .ledger-card-value {
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1.15;
}

.ledger-card .ledger-card-note {
    font-size: .78rem;
    color: #6c757d;
    margin-top: 4px;
}

.ledger-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
}

/* Invoice "Driver Account" block: three single directional entries. */
.driver-account-summary { margin-top: 10px; }
.driver-account-summary td { padding: 4px 6px; }
.driver-account-summary .direction-word {
    font-size: .82em;
    font-weight: 700;
    letter-spacing: .03em;
}

/* ---------------------------------------------------------------------------
   Final master pass - sidebar sections, ledger table, payment page.
   Rules later in the file win, so these refine the blocks above rather than
   replacing them.
   --------------------------------------------------------------------------- */

/* Sidebar: a subtle white rule under each section heading, so the groups read
   as groups without adding visual weight to a dark sidebar. The first heading
   needs no rule above it. */
.sidebar-section-label {
    color: rgba(255, 255, 255, .58);
    letter-spacing: .06em;
    margin-top: 6px;
    padding: 14px 22px 6px;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

.sidebar-section-label:first-of-type {
    border-top: 0;
    margin-top: 0;
}

.sidebar-section-label::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 6px;
    background: rgba(255, 255, 255, .16);
}

@media (min-width: 769px) {
    body.sidebar-collapsed .sidebar-section-label {
        border-top: 1px solid rgba(255, 255, 255, .13);
        padding: 8px 0 0;
        margin: 8px 12px 0;
    }
}

/* Ledger and payment tables.

   The header is sticky so the column meanings stay visible while scrolling.
   No transaction column is frozen: freezing columns on a table this wide
   produced misaligned rows at narrow widths and bought nothing, since the
   table already fits most screens. Horizontal scrolling stays inside the
   table container so the page itself never scrolls sideways. */
.ledger-table-scroll {
    max-height: 640px;
    overflow: auto;
}

.ledger-table {
    min-width: 1080px;
    margin-bottom: 0;
}

.ledger-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #f0f3f7;
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 #dde3ea;
}

.ledger-table th.ledger-col-date,
.ledger-table td.ledger-col-date {
    position: static;
    width: 108px;
    min-width: 108px;
    white-space: nowrap;
}

.ledger-table th.ledger-col-type,
.ledger-table td.ledger-col-type {
    position: static;
    min-width: 190px;
    background: transparent;
}

.ledger-table .ledger-col-reference { min-width: 140px; white-space: nowrap; }
.ledger-table .ledger-col-money { min-width: 132px; white-space: nowrap; text-align: right; }
.ledger-table .ledger-col-direction { min-width: 172px; white-space: nowrap; }
.ledger-table .ledger-col-status { width: 96px; min-width: 96px; white-space: nowrap; }
.ledger-table .ledger-col-remarks { min-width: 240px; font-size: .84rem; color: #4d5765; }
.ledger-table .ledger-col-action { width: 92px; min-width: 92px; white-space: nowrap; text-align: right; }

.ledger-table tbody td { vertical-align: middle; }

/* Compact cards - four across on a wide screen, never taller than they need. */
.ledger-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.ledger-card { padding: 12px 14px; }
.ledger-card .ledger-card-value { font-size: 1.3rem; }
.ledger-card .ledger-card-note { font-size: .76rem; }

.payment-balance-line {
    margin-bottom: 14px;
    color: #4d5765;
}

/* Ledger and payment action columns. The ledger's action is a correction
   control; the payments action is a shortcut to the voucher for that driver's
   own outstanding balance. Both stay narrow and right-aligned. */
.ledger-table .ledger-col-action {
    width: 132px;
    min-width: 132px;
    white-space: nowrap;
    text-align: right;
}

.ledger-form-note {
    color: #4d5765;
    font-size: .88rem;
    margin-bottom: 14px;
}

/* Running Balance carries the amount only. Whether the account is payable or
   receivable is expressed by colour, not by a repeated word: repeating it there
   invites it being read as the current transaction's own direction, which is a
   different thing entirely. */
.ledger-table .ledger-col-running { min-width: 138px; }

.ledger-running {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* The original transaction, shown inside the correction modal so the operator
   can see exactly what they are about to reverse. */
.correction-original {
    background: #f6f8fb;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.correction-original-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    color: #6c757d;
    margin-bottom: 6px;
}

.correction-original dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 14px;
    margin: 0;
}

.correction-original dt {
    font-weight: 600;
    color: #6c757d;
    font-size: .84rem;
}

.correction-original dd {
    margin: 0;
    font-weight: 700;
    font-size: .84rem;
    color: #18202b;
}