/* ── Navbar ── */
.navbar {
    background: var(--accent);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    height: 52px;
    gap: .25rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.navbar .brand {
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: -.2px;
    color: var(--primary);
    white-space: nowrap;
    margin-right: .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.navbar .brand svg { flex-shrink: 0; }
.navbar nav {
    display: flex;
    gap: .15rem;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    align-items: center;
}
.navbar nav::-webkit-scrollbar { display: none; }
.navbar nav a {
    color: rgba(28,28,28,.6);
    padding: .35rem .7rem;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all .15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.navbar nav a:hover {
    background: rgba(0,0,0,.08);
    color: #111;
    text-decoration: none;
}
.navbar nav a.active {
    background: rgba(255,255,255,0.45);
    color: #111;
    font-weight: 700;
}
.navbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}
.upload-stamps {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}
.upload-stamp {
    font-size: .72rem;
    color: rgba(28,28,28,.5);
    white-space: nowrap;
}

/* ── Page wrapper ── */
.page {
    padding: 1.5rem 1.75rem;
    max-width: 1680px;
    margin: 0 auto;
}
.page-title {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}
.page-subtitle {
    font-size: .8rem;
    color: var(--gray-500);
    margin-top: .2rem;
}

/* ── Summary cards ── */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.summary-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.summary-card .sc-icon-wrap {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.summary-card .sc-body { flex: 1; min-width: 0; }
.summary-card .sc-label {
    font-size: .7rem; font-weight: 700;
    color: var(--gray-500); text-transform: uppercase;
    letter-spacing: .05em; margin-bottom: .25rem;
}
.summary-card .sc-value { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.summary-card .sc-sub   { font-size: .72rem; color: var(--gray-400); margin-top: .2rem; }
.sc-blue   { background: #EFF6FF; border-color: #BFDBFE; }
.sc-blue   .sc-icon-wrap { background: #DBEAFE; }
.sc-blue   .sc-value     { color: #1D4ED8; }
.sc-purple { background: #F5F3FF; border-color: #DDD6FE; }
.sc-purple .sc-icon-wrap { background: #EDE9FE; }
.sc-purple .sc-value     { color: #6D28D9; }
.sc-green  { background: #ECFDF5; border-color: #A7F3D0; }
.sc-green  .sc-icon-wrap { background: #D1FAE5; }
.sc-green  .sc-value     { color: #065F46; }
.sc-orange { background: #FEF9C3; border-color: #FDE68A; }
.sc-orange .sc-icon-wrap { background: #FEF08A; }
.sc-orange .sc-value     { color: #92400E; }

/* ── Filter bar ── */
.filter-bar {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: .85rem 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow);
}
.filter-bar .form-group { margin-bottom: 0; min-width: 150px; }

/* ── Date range pill ── */
.date-range-card {
    background: var(--primary);
    border-radius: var(--radius);
    padding: .6rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.date-range-label {
    font-size: .68rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.date-range-inputs {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}
.date-range-inputs input[type="date"] {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 5px;
    padding: .35rem .55rem;
    font-size: .82rem;
    color: #fff;
    cursor: pointer;
    outline: none;
    width: 132px;
    font-family: inherit;
    color-scheme: dark;
}
.date-range-inputs input[type="date"]:focus {
    background: rgba(255,255,255,.25);
}
.date-range-sep { color: rgba(255,255,255,.5); font-weight: 700; }
.btn-this-month {
    background: rgba(255,255,255,.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 5px;
    padding: .3rem .7rem;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    font-family: inherit;
}
.btn-this-month:hover { background: rgba(255,255,255,.35); }

/* ── Table card wrapper ── */
.table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 62vh;
}
.table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #FFF9E6;
}

/* ── Card table header ── */
.card-table-header {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.card-table-header h3 { color: var(--gray-800); font-size: .9rem; }
.card-table-header .record-count { font-size: .75rem; color: var(--gray-400); }

/* ── Column toggle panel ── */
.col-panel-wrap { position: relative; }
.col-panel {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: #fff; border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    padding: .75rem 1rem 1rem;
    z-index: 100; min-width: 320px;
}
.col-panel-title {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--gray-500);
    margin-bottom: .6rem; display: flex; justify-content: space-between; align-items: center;
}
.col-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .75rem; }
.col-check {
    display: flex; align-items: center; gap: .4rem;
    font-size: .8rem; color: var(--gray-700); cursor: pointer;
    padding: .2rem .3rem; border-radius: 4px;
}
.col-check:hover { background: var(--gray-100); }
.col-check input { cursor: pointer; accent-color: var(--primary); }
.btn-col-reset {
    font-size: .7rem; border: none; background: none;
    color: var(--primary); cursor: pointer; font-weight: 700; padding: 0; font-family: inherit;
}
.btn-col-reset:hover { text-decoration: underline; }

/* ── Chart card ── */
.chart-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow);
}
.chart-card h3 { margin: 0 0 1rem 0; font-size: .9rem; color: var(--gray-700); }

/* ── Stat card (charts) ── */
.stat-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: .85rem 1.1rem;
    text-align: center;
    min-width: 90px;
    box-shadow: var(--shadow);
}
.stat-card .stat-label {
    font-size: .68rem; font-weight: 700;
    color: var(--gray-500); text-transform: uppercase;
    letter-spacing: .05em; margin-bottom: .3rem;
}
.stat-card .stat-value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.stat-finished { color: #16A34A; }
.stat-pending  { color: #CA8A04; }
.stat-received { color: #2563EB; }

.donut-wrap {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: .85rem 1rem;
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    box-shadow: var(--shadow);
}
.donut-wrap .stat-label {
    font-size: .68rem; font-weight: 700;
    color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em;
}

/* ── Inline detail sections (charts) ── */
.detail-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .75rem;
}
.detail-section-header h3 { margin: 0; font-size: .9rem; color: var(--gray-700); }
.modal-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.modal-table th {
    background: #FFF9E6; padding: .45rem .65rem;
    text-align: left; font-weight: 700; color: var(--gray-500);
    white-space: nowrap; border-bottom: 2px solid var(--gray-200);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
}
.modal-table td { padding: .42rem .65rem; border-bottom: 1px solid var(--gray-100); white-space: nowrap; }
.modal-table tr:last-child td { border-bottom: none; }
.modal-table tr:hover td { background: #FFFBEB; }
.ctn-row { cursor: pointer; }
.ctn-row:hover td { background: #FFFBEB !important; }
.booking-group-header td { background: #FFF9E6; font-weight: 700; cursor: pointer; user-select: none; padding: .45rem .65rem; }
.booking-group-header:hover td { background: #FEF3C7; }
.group-toggle { display: inline-block; width: 1rem; font-size: .7rem; color: var(--gray-500); }
.booking-group-row td:first-child { padding-left: 1.5rem; }
.btn-modal-close {
    background: none; border: none; font-size: 1.15rem;
    cursor: pointer; color: var(--gray-500); line-height: 1;
    padding: .2rem .45rem; border-radius: 4px; font-family: inherit;
}
.btn-modal-close:hover { background: var(--gray-100); color: var(--gray-800); }
.sbadge { display: inline-block; padding: .1rem .45rem; border-radius: 9999px; font-size: .72rem; font-weight: 700; }
.sbadge-completed { background: #DCFCE7; color: #15803D; }
.sbadge-pending   { background: #FEF9C3; color: #854D0E; }

/* ── Section badge (upload page) ── */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .2rem .65rem;
    border-radius: 999px;
    margin-bottom: .6rem;
}
.badge-transport { background: #EFF6FF; color: #1D4ED8; }
.badge-warehouse { background: #ECFDF5; color: #065F46; }

/* ── Upload grid ── */
.upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 1060px;
}

/* ── Mobile responsive ── */
@media (max-width: 900px) {
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
    .upload-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .page { padding: .75rem; }
    .summary-grid { grid-template-columns: 1fr 1fr; }
    .filter-bar .form-group { min-width: 140px; flex: 1; }
}
@media (max-width: 480px) {
    .page { padding: .5rem; }
    .summary-grid { grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .75rem; }
    .summary-card { padding: .65rem .75rem; gap: .5rem; }
    .summary-card .sc-icon-wrap { width: 34px; height: 34px; }
    .summary-card .sc-value { font-size: 1.4rem; }
    .filter-bar { flex-direction: column; gap: .5rem; }
    .filter-bar .form-group { min-width: unset; width: 100%; }
    .date-range-card { width: 100%; }
    .date-range-inputs { flex-wrap: wrap; }
    .date-range-inputs input[type="date"] { flex: 1; min-width: 120px; }
    .btn-this-month { width: 100%; }
    .navbar .brand-sub { display: none; }
    .navbar { flex-wrap: wrap; height: auto; padding: .3rem 1rem; }
    .navbar > nav { order: 2; }
    .navbar-right { order: 3; }
    .upload-stamps {
        order: 10;
        flex-basis: 100%;
        justify-content: center;
        padding: .2rem 0 .1rem;
        border-top: 1px solid rgba(0,0,0,.1);
        margin-top: .15rem;
        gap: 1rem;
    }
    .upload-stamp { font-size: .68rem; }
    .table-wrap { max-height: 50vh; }
}
/* landscape phone (e.g. iPhone rotated) */
@media (max-height: 500px) and (orientation: landscape) {
    .navbar { flex-wrap: wrap; height: auto; padding: .3rem 1rem; }
    .navbar > nav { order: 2; }
    .navbar-right { order: 3; }
    .upload-stamps {
        order: 10;
        flex-basis: 100%;
        justify-content: center;
        padding: .15rem 0 .1rem;
        border-top: 1px solid rgba(0,0,0,.1);
        margin-top: .1rem;
        gap: 1rem;
    }
    .upload-stamp { font-size: .68rem; }
}