/* StationDesk: layout and components on top of Bootstrap 5.3 */
:root {
    --sd-sidebar-w: 248px;
    --sd-sidebar-bg: #0f1b2d;
    --sd-sidebar-fg: #aab6c8;
    --sd-sidebar-active: #ffffff;
    --sd-accent: #e8590c;
    --sd-body-bg: #f3f5f8;
    --sd-card-bg: #ffffff;
    --sd-tile-border: #e6e9ef;
}
[data-bs-theme="dark"] {
    --sd-sidebar-bg: #0b1320;
    --sd-body-bg: #111823;
    --sd-card-bg: #182130;
    --sd-tile-border: #263245;
}

body { background: var(--sd-body-bg); font-size: .925rem; }
.card { background: var(--sd-card-bg); }
.tabular { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
    width: var(--sd-sidebar-w);
    background: var(--sd-sidebar-bg);
    color: var(--sd-sidebar-fg);
    flex-shrink: 0;
}
@media (min-width: 992px) {
    .app-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
@media (max-width: 991.98px) {
    .app-sidebar.offcanvas-lg { --bs-offcanvas-width: 270px; background: var(--sd-sidebar-bg); }
}
.sidebar-brand { padding: 1rem 1rem .75rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #f76707, #d6336c); color: #fff; font-size: 1.1rem;
}
.brand-mark-lg { width: 56px; height: 56px; font-size: 1.6rem; border-radius: 14px; }
.brand-name { color: #fff; font-weight: 700; letter-spacing: .2px; }
.brand-sub { color: var(--sd-sidebar-fg); font-size: .7rem; }
.sidebar-nav { padding: .5rem .5rem 2rem; }
.sidebar-nav .nav-heading {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    color: #6b7a90; padding: 1rem .75rem .35rem;
}
.sidebar-nav .nav-link {
    display: flex; align-items: center; gap: .65rem;
    color: var(--sd-sidebar-fg); padding: .45rem .75rem; border-radius: 8px; font-size: .88rem;
}
.sidebar-nav .nav-link i { font-size: 1rem; width: 1.1rem; text-align: center; opacity: .85; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-nav .nav-link.active { background: rgba(247,103,7,.18); color: var(--sd-sidebar-active); box-shadow: inset 3px 0 0 var(--sd-accent); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem; background: var(--sd-card-bg);
    border-bottom: 1px solid var(--sd-tile-border);
}
.station-switch { display: flex; align-items: center; gap: .4rem; max-width: 320px; }
.station-name { font-weight: 600; max-width: 55vw; }
.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: #1c7ed6; color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .85rem;
}
.notif-badge { font-size: .6rem; }
.app-content { padding: 1.25rem; flex: 1; }
.app-footer { padding: .75rem 1.25rem; }
@media (max-width: 575.98px) {
    .app-content { padding: 1rem; }
}

/* ---------- Page header ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-title { font-size: 1.35rem; font-weight: 700; margin: 0; }
.page-title .bi { color: var(--sd-accent); margin-right: .25rem; }
.page-help { color: var(--bs-secondary-color); font-size: .85rem; margin: .25rem 0 0; max-width: 820px; }
.page-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* ---------- Stat tiles ---------- */
.stat-tile {
    background: var(--sd-card-bg); border: 1px solid var(--sd-tile-border);
    border-radius: 12px; padding: .8rem 1rem; height: 100%;
}
.stat-label { font-size: .75rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .03em; }
.stat-value { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.stat-sub { font-size: .75rem; color: var(--bs-secondary-color); }
.stat-lg .stat-value { font-size: 1.7rem; }
.stat-success { border-left: 4px solid var(--bs-success); }
.stat-warning { border-left: 4px solid var(--bs-warning); }
.stat-danger  { border-left: 4px solid var(--bs-danger); }

.fuel-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .45rem; vertical-align: middle; }
.chart-box { position: relative; height: 260px; }

/* ---------- Tables ---------- */
.table > :not(caption) > * > * { background-color: transparent; }
.data-table thead th, .entry-grid thead th, .report-table thead th {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--bs-secondary-color); font-weight: 600; white-space: nowrap;
    border-bottom-width: 1px;
}
.entry-grid .form-control { min-width: 90px; }
.recon-table td, .recon-table th { padding: .35rem .9rem; }
.recon-table .table-group th { background: var(--bs-tertiary-bg); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.recon-table .table-total td { border-top: 2px solid var(--bs-border-color); }
.over-short-row.is-short td { background: rgba(var(--bs-danger-rgb), .12); color: var(--bs-danger-text-emphasis); }
.over-short-row.is-over td { background: rgba(var(--bs-warning-rgb), .15); color: var(--bs-warning-text-emphasis); }
.over-short-row.is-even td { background: rgba(var(--bs-success-rgb), .12); color: var(--bs-success-text-emphasis); }
.formula { padding: .15rem 0; }

.sheet-tabs .nav-link { border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; }
.close-card { border-top: 3px solid var(--bs-success) !important; }

.audit-diff th, .audit-diff td { font-size: .8rem; padding: .2rem .4rem; }
.diff-old { color: var(--bs-danger-text-emphasis); text-decoration: line-through; }
.diff-new { color: var(--bs-success-text-emphasis); font-weight: 600; }

.report-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important; }
.report-card { transition: transform .12s ease, box-shadow .12s ease; }
.report-icon {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(247,103,7,.12); color: var(--sd-accent); font-size: 1.3rem;
}
.quick-action { padding: 1rem .5rem; border-radius: 12px; font-weight: 600; }

/* ---------- Permission matrix ---------- */
.perm-matrix th, .perm-matrix td { white-space: nowrap; }
.perm-matrix thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); position: sticky; top: 0; background: var(--sd-card-bg); z-index: 1; }
.perm-matrix .perm-group th { background: var(--bs-tertiary-bg); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }
.perm-matrix .form-check-input { width: 1.15em; height: 1.15em; cursor: pointer; }
.perm-matrix .special-cell { white-space: normal; }
.special-perm { display: inline-flex; align-items: center; gap: .3rem; margin: .1rem .9rem .1rem 0; font-size: .82rem; }
.perm-select { display: inline-block; width: auto; min-width: 92px; font-size: .78rem; padding: .1rem 1.6rem .1rem .45rem; }
.perm-eff { margin-left: .3rem; font-size: .85rem; }
.perm-select.perm-allow, .perm-legend.perm-allow { background-color: rgba(var(--bs-success-rgb), .15); border-color: var(--bs-success); color: var(--bs-success-text-emphasis); font-weight: 600; }
.perm-select.perm-deny, .perm-legend.perm-deny { background-color: rgba(var(--bs-danger-rgb), .15); border-color: var(--bs-danger); color: var(--bs-danger-text-emphasis); font-weight: 600; }
.perm-legend.perm-inherit { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); }
.perm-legend { font-weight: 500; }

/* ---------- Mobile: stack data tables into cards ---------- */
@media (max-width: 767.98px) {
    .data-table thead { display: none; }
    .data-table tbody tr { display: block; border-bottom: 1px solid var(--bs-border-color); padding: .5rem .75rem; }
    .data-table tbody td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .15rem 0; text-align: right !important; }
    .data-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--bs-secondary-color); text-align: left; }
    .data-table tfoot td { display: inline-block; border: 0; }
    .page-actions { width: 100%; }
}

/* ---------- Auth ---------- */
.auth-body {
    min-height: 100vh;
    background: radial-gradient(circle at 20% 10%, rgba(247,103,7,.18), transparent 40%),
                radial-gradient(circle at 80% 90%, rgba(28,126,214,.18), transparent 40%), var(--sd-body-bg);
}
.auth-wrap { max-width: 420px; margin: 0 auto; padding: 8vh 16px 2rem; }
.auth-card { border-radius: 16px; }

/* ---------- Print ---------- */
.print-body { background: #fff; font-size: 12px; }
.print-page { max-width: 1000px; margin: 0 auto; padding: 1.25rem; }
.print-toolbar { position: sticky; top: 0; background: #f8f9fa; padding: .5rem 1rem; border-bottom: 1px solid #dee2e6; display: flex; gap: .5rem; }
.print-h { margin-top: .75rem; border-bottom: 2px solid #212529; padding-bottom: .15rem; text-transform: uppercase; letter-spacing: .04em; }
.print-footer { margin-top: 1.5rem; font-size: 10px; color: #6c757d; text-align: center; }
.print-body .table { font-size: 11px; }
.print-body .card { box-shadow: none !important; border: 0 !important; }
@media print {
    .no-print, .app-sidebar, .app-topbar, .app-footer, .page-actions, .filter-bar { display: none !important; }
    .app-content { padding: 0; }
    body { background: #fff; }
    .card { box-shadow: none !important; }
    a { text-decoration: none; color: inherit; }
}