/* =========================================================
   Fast Cargo — design system
   Tokens first, then components. Every class hook the Blade
   views rely on is preserved.
   ========================================================= */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Brand */
    --brand: #2563eb;
    --brand-dark: #1d4ed8;
    --brand-soft: #eef4ff;
    --navy: #101a2e;
    --navy-2: #16223a;

    /* Surfaces */
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --line: #e7eaee;
    --line-soft: #f0f2f5;

    /* Text */
    --ink: #101828;
    --ink-2: #475467;
    --ink-3: #667085;   /* AA-contrast secondary text */

    /* Semantic */
    --ok: #067647;
    --ok-bg: #ecfdf3;
    --warn: #b54708;
    --warn-bg: #fffaeb;
    --bad: #b42318;
    --bad-bg: #fef3f2;
    --info: #175cd3;
    --info-bg: #eff8ff;

    /* Geometry */
    --r-sm: 6px;
    --r: 10px;
    --r-lg: 14px;
    --sidebar-w: 248px;

    /* Elevation */
    --sh-1: 0 1px 2px rgba(16, 24, 40, .05);
    --sh-2: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --sh-3: 0 8px 24px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .05);
}

/* Re-tint Bootstrap's variable-driven components. */
:root {
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-body-color: #101828;
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-border-color: #e7eaee;
    --bs-border-radius: var(--r);
    --bs-border-radius-sm: var(--r-sm);
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.006em;
}

a {
    color: var(--brand-dark);
    text-decoration: none;
}

a:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.layout {
    display: flex;
    min-height: 100vh;
}

/* =========================================================
   Sidebar
   ========================================================= */
.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #aab4c5;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    z-index: 1030;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 3px;
}

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.05rem 1.1rem;
    color: #fff;
    font-weight: 650;
    font-size: .92rem;
    letter-spacing: -.01em;
    line-height: 1.25;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    text-decoration: none;
}

.sidebar .brand:hover {
    text-decoration: none;
    color: #fff;
}

.sidebar .brand > i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--brand) 0%, #4f46e5 100%);
    color: #fff;
    font-size: 1.05rem !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .4);
}

.sidebar .brand small {
    display: block;
    font-weight: 400;
    font-size: .68rem;
    color: #8b97ab;
    letter-spacing: .01em;
    margin-top: 1px;
}

.sidebar .nav-section {
    padding: 1.1rem 1.1rem .35rem;
    font-size: .655rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #8b97ab;
}

.sidebar a.nav-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 1px .6rem;
    padding: .5rem .65rem;
    color: #b6c0d0;
    text-decoration: none;
    font-size: .855rem;
    font-weight: 450;
    border-radius: var(--r-sm);
    transition: background .13s ease, color .13s ease;
}

.sidebar a.nav-item i {
    font-size: 1rem;
    width: 1.15rem;
    text-align: center;
    color: #7f8ca0;
    transition: color .13s ease;
}

.sidebar a.nav-item:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    text-decoration: none;
}

.sidebar a.nav-item:hover i {
    color: #c3ccda;
}

.sidebar a.nav-item.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, .30) 0%, rgba(37, 99, 235, .13) 100%);
    color: #fff;
    font-weight: 550;
    box-shadow: inset 2px 0 0 var(--brand);
}

.sidebar a.nav-item.active i {
    color: #7ba7ff;
}

.sidebar a.nav-item .badge {
    margin-left: auto;
}

/* =========================================================
   Shell
   ========================================================= */
.content-wrap {
    margin-left: var(--sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(1.6) blur(8px);
    border-bottom: 1px solid var(--line);
    padding: .7rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.page-heading h1 {
    font-size: 1.02rem;
    font-weight: 620;
    letter-spacing: -.015em;
    margin: 0;
    color: var(--ink);
}

.page-heading small {
    font-size: .74rem;
    color: var(--ink-3);
}

.page-body {
    padding: 1.25rem;
    flex: 1;
}

.page-footer {
    padding: .9rem 1.25rem;
    color: var(--ink-3);
    font-size: .74rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.topbar-search .form-control {
    width: 230px;
}

.topbar .input-group-text {
    border-color: var(--line);
    color: var(--ink-3);
}

/* =========================================================
   Cards
   ========================================================= */
.card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-1);
    background: var(--surface);
}

.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600;
    font-size: .845rem;
    letter-spacing: -.008em;
    color: var(--ink);
    padding: .8rem 1rem;
    border-radius: var(--r) var(--r) 0 0 !important;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.card-header i {
    color: var(--ink-3);
}

.card-body {
    padding: 1rem;
}

/* ---------- Stat tiles ---------- */
.stat-card {
    position: relative;
    overflow: hidden;
    transition: box-shadow .16s ease, transform .16s ease;
}

.stat-card:hover {
    box-shadow: var(--sh-2);
}

.stat-card .value {
    font-size: 1.4rem;
    font-weight: 640;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.stat-card .label {
    font-size: .7rem;
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: .055em;
    color: var(--ink-3);
}

.stat-card .icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    flex: 0 0 42px;
}

/* =========================================================
   Tables
   ========================================================= */
.table {
    font-size: .825rem;
    color: var(--ink);
    margin-bottom: 0;
    /* Bootstrap paints row states with an inset shadow, so tint through its
       own variables rather than fighting them with background-color. */
    --bs-table-color: var(--ink);
    --bs-table-hover-bg: #f7f9fc;
    --bs-table-hover-color: var(--ink);
    --bs-table-striped-bg: #fafbfc;
}

.table > :not(caption) > * > * {
    padding: .6rem .75rem;
    border-bottom-color: var(--line-soft);
}

.table thead th {
    background: var(--surface-2);
    font-size: .685rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-3);
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.table tfoot {
    font-variant-numeric: tabular-nums;
}

.table tfoot td,
.table tfoot th {
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

/* Numbers line up and never wrap. */
.money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    text-align: right;
    white-space: nowrap;
}

.table-sheet input.form-control,
.table-sheet select.form-select {
    font-size: .8rem;
    padding: .25rem .45rem;
    border-color: transparent;
    background-color: var(--surface-2);
}

.table-sheet input.form-control:hover,
.table-sheet select.form-select:hover {
    border-color: var(--line);
}

.table-sheet input.form-control:focus,
.table-sheet select.form-select:focus {
    background-color: #fff;
}

/* =========================================================
   Forms
   ========================================================= */
.form-label {
    font-size: .765rem;
    font-weight: 550;
    color: var(--ink-2);
    margin-bottom: .28rem;
    letter-spacing: -.003em;
}

.form-control,
.form-select {
    border-color: #d7dce3;
    border-radius: var(--r-sm);
    color: var(--ink);
    box-shadow: var(--sh-1);
    transition: border-color .13s ease, box-shadow .13s ease;
}

.form-control::placeholder {
    color: #98a2b3;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}

.form-text {
    font-size: .735rem;
    color: var(--ink-3);
}

.required::after {
    content: " *";
    color: var(--bad);
}

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
    --bs-btn-border-radius: var(--r-sm);
    font-weight: 520;
    font-size: .845rem;
    letter-spacing: -.003em;
    transition: background-color .13s ease, border-color .13s ease, box-shadow .13s ease;
}

.btn-sm {
    font-size: .79rem;
}

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: #1a44b8;
    --bs-btn-active-border-color: #1a44b8;
    --bs-btn-disabled-bg: #9dbaf5;
    --bs-btn-disabled-border-color: #9dbaf5;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}

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

.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #dfe3e9;
    --bs-btn-color: var(--ink-2);
    --bs-btn-hover-bg: #f5f7fa;
    --bs-btn-hover-border-color: #d2d8e0;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-2);
    --bs-btn-border-color: #dfe3e9;
    --bs-btn-hover-bg: #f3f5f8;
    --bs-btn-hover-border-color: #cfd6df;
    --bs-btn-hover-color: var(--ink);
    --bs-btn-active-bg: #e9edf2;
    --bs-btn-active-border-color: #cfd6df;
    --bs-btn-active-color: var(--ink);
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .22);
}

/* =========================================================
   Badges
   ========================================================= */
.badge {
    font-weight: 550;
    font-size: .705rem;
    letter-spacing: .002em;
    padding: .28em .6em;
    border-radius: 999px;
}

/* Tinted status pills read far better in a dense table than solid blocks. */
.badge.badge-soft {
    border: 1px solid transparent;
}

.badge.badge-soft.bg-primary { background: var(--info-bg) !important; color: var(--info); border-color: #b2ddff; }
.badge.badge-soft.bg-success { background: var(--ok-bg) !important; color: var(--ok); border-color: #abefc6; }
.badge.badge-soft.bg-danger  { background: var(--bad-bg) !important; color: var(--bad); border-color: #fecdca; }
.badge.badge-soft.bg-warning { background: var(--warn-bg) !important; color: var(--warn); border-color: #fedf89; }
.badge.badge-soft.bg-info    { background: #f0f9ff !important; color: #026aa2; border-color: #b9e6fe; }
.badge.badge-soft.bg-secondary { background: #f2f4f7 !important; color: #475467; border-color: #e4e7ec; }
.badge.badge-soft.bg-light   { background: #f8f9fb !important; color: #667085; border-color: #eaecf0; }

/* Solid badges still need legible text on light fills. */
.badge.bg-warning { color: #7a4f01; }
.badge.bg-light { color: var(--ink-2); }

/* =========================================================
   Misc components
   ========================================================= */
.alert {
    border-radius: var(--r);
    border-width: 1px;
    font-size: .845rem;
}

.alert-success { background: var(--ok-bg); border-color: #abefc6; color: #05603a; }
.alert-danger  { background: var(--bad-bg); border-color: #fecdca; color: #912018; }
.alert-info    { background: var(--info-bg); border-color: #b2ddff; color: #194185; }
.alert-warning { background: var(--warn-bg); border-color: #fedf89; color: #93370d; }

.nav-pills .nav-link {
    color: var(--ink-2);
    font-weight: 500;
    border-radius: 999px;
    padding: .32rem .8rem;
}

.nav-pills .nav-link:hover {
    background: #eceff3;
    text-decoration: none;
}

.nav-pills .nav-link.active {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

.page-link {
    color: var(--ink-2);
    border-color: var(--line);
    font-size: .82rem;
}

.page-item.active .page-link {
    background: var(--brand);
    border-color: var(--brand);
}

.dropdown-menu {
    border-color: var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-3);
    font-size: .855rem;
    padding: .3rem;
}

.dropdown-item {
    border-radius: var(--r-sm);
    padding: .45rem .6rem;
}

.dropdown-header {
    font-size: .74rem;
    color: var(--ink-3);
}

hr {
    border-color: var(--line);
    opacity: 1;
}

.text-muted {
    color: var(--ink-3) !important;
}

/* =========================================================
   Search picker
   ========================================================= */
.search-picker {
    position: relative;
}

/* Fixed, not absolute: the sheet screens scroll horizontally, and an absolute
   menu would be clipped by that scroll container. JS sets top/left/width. */
.search-picker .sp-menu {
    display: none;
    position: fixed;
    z-index: 1055;
    min-width: 230px;
    max-height: 270px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-3);
    padding: .25rem;
}

.search-picker.sp-open .sp-menu {
    display: block;
}

.search-picker .sp-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: .42rem .55rem;
    font-size: .82rem;
    line-height: 1.35;
    border-radius: var(--r-sm);
}

.search-picker .sp-item:hover,
.search-picker .sp-item.active {
    background: var(--brand-soft);
}

.search-picker .sp-label {
    display: block;
    font-weight: 570;
    color: var(--ink);
}

.search-picker .sp-sub {
    display: block;
    font-size: .735rem;
    color: var(--ink-3);
}

.search-picker .sp-empty {
    padding: .5rem .6rem;
    font-size: .78rem;
    color: var(--ink-3);
}

/* =========================================================
   Responsive
   ========================================================= */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 26, 46, .55);
    backdrop-filter: blur(2px);
    z-index: 1029;
}

body.sidebar-locked {
    overflow: hidden;
}

@media (min-width: 992px) {
    .sidebar-backdrop {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .22s ease;
        width: 270px;
        flex-basis: 270px;
        box-shadow: 0 0 40px rgba(0, 0, 0, .3);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .content-wrap {
        margin-left: 0;
    }

    .sidebar a.nav-item {
        padding: .68rem .7rem;
        font-size: .9rem;
    }

    .topbar {
        padding: .55rem .8rem;
    }

    .page-body {
        padding: .85rem;
    }

    .page-heading h1 {
        font-size: .94rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .btn,
    .table tbody tr,
    .stat-card {
        transition: none;
    }
}

/* ---------- Touch sizing ---------- */
@media (max-width: 767.98px) {
    /* iOS zooms the page when a focused input is under 16px. The input-group
       selectors are listed explicitly because Bootstrap's descendant form
       (.input-group-sm > .form-control) outranks a bare .form-control. */
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select,
    .input-group-sm > .input-group-text,
    .input-group-sm > .btn {
        font-size: 16px;
    }

    .btn {
        min-height: 38px;
    }

    .btn-sm {
        min-height: 34px;
    }

    .card-header {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    .card-header form {
        width: 100%;
    }

    .card-header form .form-control,
    .card-header form .form-select {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    .stat-card .value {
        font-size: 1.15rem;
    }

    .page-footer {
        text-align: center;
    }
}

/* ---------- Wide tables ---------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Editable sheet grids stay tabular; keep the first column in view while
   scrolling sideways so the row being edited is always identifiable. */
@media (max-width: 991.98px) {
    .table-sheet table th:first-child,
    .table-sheet table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--surface);
        box-shadow: 1px 0 0 var(--line);
    }

    .table-sheet table thead th:first-child {
        z-index: 3;
        background: var(--surface-2);
    }
}

/* ---------- Stacked list tables ---------- */
@media (max-width: 767.98px) {
    .table-stack {
        border-collapse: separate;
        border-spacing: 0;
    }

    .table-stack thead {
        display: none;
    }

    .table-stack,
    .table-stack tbody,
    .table-stack tfoot,
    .table-stack tr,
    .table-stack td {
        display: block;
        width: 100%;
    }

    .table-stack tbody tr,
    .table-stack tfoot tr {
        border: 1px solid var(--line);
        border-radius: var(--r);
        margin: 0 0 .65rem;
        padding: .2rem .1rem;
        background: var(--surface);
        box-shadow: var(--sh-1);
    }

    .table-stack tfoot tr {
        background: var(--surface-2);
    }

    .table-stack > :not(caption) > * > * {
        padding: .4rem .7rem;
    }

    .table-stack tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        border-bottom: 1px solid var(--line-soft);
        text-align: right;
        min-height: 34px;
    }

    .table-stack tbody tr td:last-child {
        border-bottom: 0;
    }

    .table-stack tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: .685rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .055em;
        color: var(--ink-3);
        text-align: left;
    }

    /* Cells with nothing to label — empty states, spanning totals, actions. */
    .table-stack tbody td.sp-nolabel,
    .table-stack tbody td:not([data-label]) {
        justify-content: flex-end;
        text-align: right;
    }

    .table-stack tbody td.sp-nolabel::before,
    .table-stack tbody td:not([data-label])::before {
        content: none;
    }

    /* An empty-state row is a message, not a card. */
    .table-stack tbody tr:only-child td[colspan] {
        justify-content: center;
        text-align: center;
        border: 0;
    }

    .table-stack .money {
        text-align: right;
    }

    /* Row checkbox belongs at the top of its card. */
    .table-stack tbody td:first-child:has(> .form-check-input) {
        justify-content: flex-start;
    }

    /* The sheet grids opt out — they scroll instead. */
    .table-sheet .table-stack {
        display: table;
    }
}

/* ---------- Tab strips ---------- */
/* More tabs than fit: scroll them sideways rather than wrapping to three rows. */
.nav-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.nav-scroll::-webkit-scrollbar {
    display: none;
}

.nav-scroll .nav-item {
    flex: 0 0 auto;
}

/* ---------- Toolbars ---------- */
@media (max-width: 767.98px) {
    .bulk-toolbar {
        width: 100%;
        margin-left: 0 !important;
    }

    /* Beat the inline widths these selects carry for the desktop layout. */
    .bulk-toolbar .form-select {
        width: auto !important;
        flex: 1 1 130px;
        min-width: 0;
    }

    .bulk-toolbar .btn {
        flex: 1 1 auto;
    }

    .topbar-search .form-control {
        width: 100%;
    }
}

/* =========================================================
   Print
   ========================================================= */
@media print {
    .sidebar,
    .topbar,
    .page-footer,
    .sidebar-backdrop,
    .no-print {
        display: none !important;
    }

    .content-wrap {
        margin-left: 0;
    }

    .page-body {
        padding: 0;
    }

    body {
        background: #fff;
        font-size: 12px;
    }

    .card {
        border: none;
        box-shadow: none;
    }

    .table-stack thead {
        display: table-header-group;
    }

    .table-stack,
    .table-stack tbody,
    .table-stack tfoot,
    .table-stack tr,
    .table-stack td {
        display: revert;
    }

    .table-stack tbody td::before {
        content: none;
    }
}