/* ==========================================================================
   PartsPOS — Station shell
   Re-tones the Velzon chrome (sidebar, topbar, buttons, forms, cards) onto the
   Station UI tokens in station-ui.css, and styles the pre-auth login card.
   Loaded LAST in layouts/head-css.php.

   Rule: colours reference --st-* tokens (or --vz-* aliases of them). Never
   hard-code a hex that duplicates a token — dark mode must keep working.

   Sections
     1. Theme aliases  (--vz-* → --st-*)
     2. Sidebar
     3. Topbar
     4. Bootstrap components re-toned (buttons, forms, cards, tables, badges)
     5. Page helpers (tabs, filter bar, form sections, key/value lists)
     6. Auth (login / change password)
     7. Dark mode
   ========================================================================== */

/* ── 1. Theme aliases ───────────────────────────────────────────────────── */
:root {
    --vz-primary:                    var(--st-teal);
    --vz-primary-rgb:                32, 178, 170;
    --vz-primary-text-emphasis:      var(--st-teal-d);
    --vz-primary-bg-subtle:          rgba(32, 178, 170, .12);
    --vz-primary-border-subtle:      rgba(32, 178, 170, .3);
    --vz-link-color:                 var(--st-teal-d);
    --vz-link-hover-color:           var(--st-teal);
    --vz-body-bg:                    var(--st-canvas);
    --vz-secondary-bg:               var(--st-surface);
    --vz-border-color:               var(--st-line);
    --vz-font-sans-serif:            "Outfit", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --vz-vertical-menu-width:        250px;
    --vz-vertical-menu-bg:           var(--st-surface);
    --vz-vertical-menu-border:       var(--st-line);
    --vz-vertical-menu-item-color:   var(--st-ink-2);
    --vz-vertical-menu-item-bg:      rgba(32, 178, 170, .10);
    --vz-vertical-menu-item-hover-color:   var(--st-teal-d);
    --vz-vertical-menu-item-active-color:  var(--st-teal-d);
    --vz-vertical-menu-item-active-bg:     rgba(32, 178, 170, .10);
    --vz-vertical-menu-sub-item-color:        var(--st-ink-2);
    --vz-vertical-menu-sub-item-hover-color:  var(--st-teal-d);
    --vz-vertical-menu-sub-item-active-color: var(--st-teal-d);
    --vz-vertical-menu-title-color:  var(--st-ink-3);
    --vz-vertical-menu-box-shadow:   var(--st-sh-1);

    --vz-header-bg:                  var(--st-surface);
    --vz-header-border:              var(--st-line);
    --vz-header-item-color:          var(--st-ink-2);
    --vz-header-item-sub-color:      var(--st-ink-3);
    --vz-topbar-user-bg:             var(--st-surface-2);
    --vz-topbar-search-bg:           var(--st-surface-2);
    --vz-topbar-search-color:        var(--st-ink);
    --vz-footer-bg:                  transparent;
    --vz-footer-color:               var(--st-ink-3);
}

body { font-family: var(--vz-font-sans-serif); color: var(--st-ink); }
a { color: var(--st-teal-d); }
a:hover { color: var(--st-teal); }
.text-muted { color: var(--st-ink-3) !important; }

/* Topbar clearance: the theme's own calc is enough; keep a tight gap. */
.page-content { padding-top: calc(70px + 1.1rem); }

/* ── 2. Sidebar ─────────────────────────────────────────────────────────── */
.navbar-menu { border-right: 1px solid var(--st-line); }
.navbar-menu .navbar-brand-box {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1rem; height: 70px;
    border-bottom: 1px solid var(--st-line);
    background: var(--st-surface);
}
.navbar-menu .navbar-brand-box .logo { align-items: center; gap: .6rem; text-decoration: none; line-height: 1; }
.navbar-menu .navbar-brand-box .logo-lg { display: inline-flex; align-items: center; gap: .6rem; }
.sh-mark {
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--st-grad); color: #fff; font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(32, 178, 170, .28);
}
.sh-brand-wrap { display: inline-flex; flex-direction: column; min-width: 0; }
.sh-brand {
    font-weight: 800; letter-spacing: -.02em; font-size: .98rem; color: var(--st-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.sh-brand-sub {
    font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--st-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
[data-sidebar-size="sm"] .sh-brand-wrap,
[data-sidebar-size="sm-hover"] .sh-brand-wrap { display: none; }
.navbar-menu #vertical-hover { color: var(--st-ink-3); }

.navbar-menu .navbar-nav .menu-title {
    padding: 1rem 1.35rem .45rem;
    font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--st-ink-3);
}
.navbar-menu .navbar-nav .menu-title span::after { display: none; }
.navbar-menu .navbar-nav .nav-link {
    display: flex; align-items: center; gap: .6rem;
    font-size: .84rem; font-weight: 600;
    padding: .55rem 1.35rem;
    border-radius: 0;
    transition: color .15s ease, background .15s ease;
}
.navbar-menu .navbar-nav .nav-link i { font-size: 1.1rem; width: 20px; text-align: center; color: var(--st-ink-3); transition: color .15s ease; }
.navbar-menu .navbar-nav .nav-link:hover,
.navbar-menu .navbar-nav .nav-link:hover i { color: var(--st-teal-d); }
.navbar-menu .navbar-nav .nav-link.active {
    color: var(--st-teal-d);
    background: rgba(32, 178, 170, .09);
    box-shadow: inset 3px 0 0 var(--st-teal);
}
.navbar-menu .navbar-nav .nav-link.active i { color: var(--st-teal); }
.navbar-menu .navbar-nav .nav-sm .nav-link {
    font-size: .8rem; font-weight: 500; padding: .38rem 1.35rem .38rem 3.05rem; color: var(--st-ink-2);
    box-shadow: none; background: transparent;
}
.navbar-menu .navbar-nav .nav-sm .nav-link::before { left: 1.85rem; background: var(--st-ink-3); opacity: .5; }
.navbar-menu .navbar-nav .nav-sm .nav-link.active { color: var(--st-teal-d); font-weight: 700; }
.navbar-menu .navbar-nav .nav-sm .nav-link.active::before { background: var(--st-teal); opacity: 1; }
/* Collapse arrow: the theme uses Material Design Icons, which PartsPOS does not ship — use Remix instead. */
.navbar-menu .navbar-nav .nav-link[data-bs-toggle="collapse"]::after {
    font-family: remixicon !important; content: "\ea4e" !important; font-size: 1rem; top: 0;
}

.sh-soon { cursor: default; opacity: .55; }
.sh-soon em {
    font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    background: var(--st-surface-2); border: 1px solid var(--st-line); color: var(--st-ink-3);
    border-radius: 5px; padding: 0 .3rem; margin-left: .35rem; vertical-align: middle;
}
.sh-badge {
    background: var(--st-grad); color: #fff; font-size: .58rem; font-weight: 800; letter-spacing: .08em;
    border-radius: 30px; padding: .18rem .5rem;
}

/* ── 3. Topbar ──────────────────────────────────────────────────────────── */
#page-topbar { box-shadow: var(--st-sh-1); }
#page-topbar .navbar-header { height: 70px; }
.topnav-hamburger .hamburger-icon span { background: var(--st-ink-2); }
.app-search .form-control {
    background: var(--st-surface-2); border: 1px solid var(--st-line); color: var(--st-ink);
    border-radius: 30px; padding-left: 2.6rem; height: 40px; width: 380px; font-size: .84rem;
}
.app-search .form-control:focus { border-color: var(--st-teal); box-shadow: 0 0 0 3px rgba(32, 178, 170, .15); background: var(--st-surface); }
.app-search .search-widget-icon { left: 15px; color: var(--st-ink-3); }
.btn-topbar { color: var(--st-ink-2) !important; }
.btn-topbar:hover { background: var(--st-surface-2) !important; color: var(--st-teal-d) !important; }
.topbar-user { background: var(--st-surface-2); border-left: 1px solid var(--st-line); }
.topbar-user .user-name-text { color: var(--st-ink); font-size: .84rem; }
.topbar-user .user-name-sub-text { color: var(--st-ink-3); }
.sh-avatar {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--st-grad); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .82rem; letter-spacing: .02em;
}
.dropdown-menu { border: 1px solid var(--st-line); border-radius: var(--st-r-md); box-shadow: var(--st-sh-3); background: var(--st-surface); }
.dropdown-item { font-size: .84rem; color: var(--st-ink-2); }
.dropdown-item:hover { background: var(--st-surface-2); color: var(--st-ink); }
.dropdown-header { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--st-ink-3); font-weight: 800; }
.sh-dd-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; background: var(--st-surface-2); border-bottom: 1px solid var(--st-line); }
.sh-dd-title { font-size: .84rem; font-weight: 800; color: var(--st-ink); flex: 1; }
.sh-dd-body { max-height: 320px; overflow-y: auto; }
.sh-notif { display: flex !important; gap: .65rem; align-items: flex-start; padding: .65rem 1rem; border-bottom: 1px solid var(--st-line-soft); white-space: normal; }
.sh-notif > i { font-size: 1.05rem; color: var(--st-teal-d); margin-top: .1rem; }
.sh-notif .t { display: block; font-size: .8rem; font-weight: 700; color: var(--st-ink); line-height: 1.25; }
.sh-notif .b { display: block; font-size: .72rem; color: var(--st-ink-2); line-height: 1.3; margin-top: .1rem; }
.sh-notif .w { display: block; font-size: .66rem; color: var(--st-ink-3); margin-top: .15rem; }
.sh-notif:hover { background: var(--st-surface-2); }
.topbar-badge { background: var(--st-red) !important; }

/* ── 4. Bootstrap components re-toned ───────────────────────────────────── */
.btn { font-weight: 600; border-radius: var(--st-r-sm); }
.btn-primary {
    --vz-btn-bg: var(--st-teal); --vz-btn-border-color: var(--st-teal);
    --vz-btn-hover-bg: var(--st-teal-d); --vz-btn-hover-border-color: var(--st-teal-d);
    --vz-btn-active-bg: var(--st-teal-d); --vz-btn-active-border-color: var(--st-teal-d);
    --vz-btn-disabled-bg: var(--st-teal); --vz-btn-disabled-border-color: var(--st-teal);
}
.btn-outline-primary {
    --vz-btn-color: var(--st-teal-d); --vz-btn-border-color: var(--st-teal);
    --vz-btn-hover-bg: var(--st-teal); --vz-btn-hover-border-color: var(--st-teal);
    --vz-btn-active-bg: var(--st-teal-d); --vz-btn-active-border-color: var(--st-teal-d);
}
.btn-soft-primary { background: rgba(32, 178, 170, .12); color: var(--st-teal-d); border-color: transparent; }
.btn-soft-primary:hover { background: var(--st-teal); color: #fff; }
.btn-light { --vz-btn-bg: var(--st-surface-2); --vz-btn-border-color: var(--st-line); --vz-btn-color: var(--st-ink-2); --vz-btn-hover-bg: var(--st-line-soft); --vz-btn-hover-border-color: var(--st-line); --vz-btn-hover-color: var(--st-ink); }

.form-label { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--st-ink-3); margin-bottom: .3rem; }
.form-control, .form-select {
    background: var(--st-surface); border: 1px solid var(--st-line); color: var(--st-ink);
    border-radius: var(--st-r-sm); font-size: .88rem; padding: .5rem .75rem;
}
.form-control::placeholder { color: var(--st-ink-3); }
.form-control:focus, .form-select:focus { border-color: var(--st-teal); box-shadow: 0 0 0 3px rgba(32, 178, 170, .15); background: var(--st-surface); color: var(--st-ink); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--st-red); }
.form-check-input:checked { background-color: var(--st-teal); border-color: var(--st-teal); }
.form-check-input:focus { border-color: var(--st-teal); box-shadow: 0 0 0 3px rgba(32, 178, 170, .15); }
.form-switch .form-check-input { width: 2.2em; }
.form-text { color: var(--st-ink-3); font-size: .74rem; }
.input-group-text { background: var(--st-surface-2); border-color: var(--st-line); color: var(--st-ink-3); font-size: .8rem; font-weight: 700; }

.card { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-r-lg); box-shadow: var(--st-sh-1); }
.card-header { background: var(--st-surface-2); border-bottom: 1px solid var(--st-line); }
.table { --vz-table-color: var(--st-ink-2); --vz-table-border-color: var(--st-line-soft); }
.table > :not(caption) > * > * { background: transparent; }
.table thead th { font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--st-ink-3); background: var(--st-surface-2); border-bottom: 1px solid var(--st-line); }
.badge { font-weight: 700; }
.alert { border-radius: var(--st-r-md); font-size: .86rem; }
.alert-danger  { background: rgba(239, 68, 68, .09); border-color: rgba(239, 68, 68, .25); color: #b91c1c; }
.alert-success { background: rgba(22, 163, 74, .09); border-color: rgba(22, 163, 74, .25); color: #15803d; }
.alert-info    { background: rgba(32, 178, 170, .09); border-color: rgba(32, 178, 170, .25); color: var(--st-teal-d); }
.alert-warning { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .3); color: #92400e; }
.modal-content { border: 1px solid var(--st-line); border-radius: var(--st-r-lg); background: var(--st-surface); }
.modal-header { background: var(--st-surface-2); border-bottom: 1px solid var(--st-line); }
.modal-title { font-weight: 800; font-size: .95rem; }
.pagination { --vz-pagination-color: var(--st-ink-2); --vz-pagination-bg: var(--st-surface); --vz-pagination-border-color: var(--st-line); --vz-pagination-active-bg: var(--st-teal); --vz-pagination-active-border-color: var(--st-teal); --vz-pagination-hover-bg: var(--st-surface-2); --vz-pagination-hover-color: var(--st-teal-d); }
.footer { border-top: 1px solid var(--st-line); font-size: .76rem; }

/* ── 5. Page helpers ────────────────────────────────────────────────────── */
/* .panel-body: station-ui.css styles .panel/.panel-head/.panel-foot but never
   defines the body inset — every page nests form fields, tables and empty
   states straight in .panel-body, so without this they sit flush against the
   panel's rounded edges. */
.panel-body { padding: 1.1rem; }

/* filter bar inside .panel-head */
.filter-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.filter-bar .form-control, .filter-bar .form-select { width: auto; height: 34px; padding: .25rem .7rem; font-size: .8rem; border-radius: 30px; min-width: 140px; }
.filter-bar .form-select { padding-right: 2rem; }
.filter-bar .form-control { min-width: 220px; }
.panel-head > .filter-bar { margin-left: auto; }

/* form sections inside a .panel-body */
.form-section { margin-bottom: 1.4rem; }
.form-section:last-child { margin-bottom: 0; }
.form-section-title {
    display: flex; align-items: center; gap: .5rem;
    font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--st-ink-3);
    margin-bottom: .8rem; padding-bottom: .4rem; border-bottom: 1px solid var(--st-line-soft);
}
.form-section-title i { color: var(--st-teal); }
.required::after { content: ' *'; color: var(--st-red); }

/* key / value description list */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; font-size: .84rem; margin: 0; }
.kv dt { color: var(--st-ink-3); font-weight: 600; font-size: .76rem; }
.kv dd { margin: 0; color: var(--st-ink); }

/* permission grid (roles) */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.perm-module { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-r-md); overflow: hidden; }
.perm-module-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; background: var(--st-surface-2); border-bottom: 1px solid var(--st-line); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--st-ink-2); }
.perm-module-head .form-check { margin-left: auto; margin-bottom: 0; }
.perm-module-body { padding: .5rem .85rem .6rem; display: flex; flex-direction: column; gap: .3rem; }
.perm-module-body .form-check-label { font-size: .8rem; color: var(--st-ink-2); }
.perm-module-body code { font-size: .66rem; color: var(--st-ink-3); background: transparent; padding: 0; }

/* audit json diff */
.diff { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .74rem; background: var(--st-surface-2); border: 1px solid var(--st-line); border-radius: var(--st-r-sm); padding: .6rem .75rem; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; color: var(--st-ink-2); }
.diff .k { color: var(--st-ink); font-weight: 700; }
.diff .old { color: #b91c1c; text-decoration: line-through; }
.diff .new { color: #15803d; font-weight: 700; }

/* settings tabs (segmented) */
.seg > button { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .8rem; border-radius: 30px; font-size: .74rem; font-weight: 700; color: var(--st-ink-2); background: transparent; border: none; cursor: pointer; transition: all .18s ease; white-space: nowrap; }
.seg > button:hover { color: var(--st-teal-d); background: rgba(32, 178, 170, .08); }
.seg > button.on { background: var(--st-grad); color: #fff; box-shadow: 0 2px 8px rgba(32, 178, 170, .3); }

/* mono for codes / numbers in tables */
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; }

/* ── 6. Auth (login / change password) ──────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--st-canvas); position: relative; overflow: hidden; }
.auth-wrap::before {
    content: ''; position: absolute; inset: auto -120px -160px auto; width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(32, 178, 170, .14) 0%, transparent 65%); pointer-events: none;
}
.auth-wrap::after {
    content: ''; position: absolute; inset: -140px auto auto -120px; width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(143, 188, 143, .16) 0%, transparent 65%); pointer-events: none;
}
.auth-card {
    position: relative; width: 100%; max-width: 420px;
    background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-r-lg);
    box-shadow: var(--st-sh-3); padding: 2rem 2rem 1.6rem; overflow: hidden;
}
.auth-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--st-grad); }
.auth-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.4rem; }
.auth-brand .sh-mark { width: 44px; height: 44px; border-radius: 13px; font-size: 1.3rem; }
.auth-brand img { max-height: 44px; max-width: 160px; }
.auth-brand-name { font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; color: var(--st-ink); line-height: 1.15; }
.auth-brand-sub { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--st-ink-3); }
.auth-eyebrow { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--st-teal-d); margin-bottom: .2rem; }
.auth-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--st-ink); margin: 0 0 .25rem; }
.auth-copy { font-size: .84rem; color: var(--st-ink-2); margin-bottom: 1.3rem; }
.auth-card .form-control { height: 44px; font-size: .92rem; }
.auth-card .btn-primary { height: 44px; font-weight: 700; border-radius: 30px; background: var(--st-grad); border: none; box-shadow: 0 6px 16px rgba(32, 178, 170, .3); }
.auth-card .btn-primary:hover { filter: brightness(1.05); }
.auth-foot { margin-top: 1.2rem; text-align: center; font-size: .72rem; color: var(--st-ink-3); }
.auth-clock { font-variant-numeric: tabular-nums; }

/* ── 7. Dark mode ───────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --vz-vertical-menu-bg:           var(--st-surface);
    --vz-vertical-menu-border:       var(--st-line);
    --vz-vertical-menu-item-color:   var(--st-ink-2);
    --vz-vertical-menu-item-hover-color:   #5eead4;
    --vz-vertical-menu-item-active-color:  #5eead4;
    --vz-vertical-menu-sub-item-color:        var(--st-ink-2);
    --vz-vertical-menu-sub-item-hover-color:  #5eead4;
    --vz-vertical-menu-sub-item-active-color: #5eead4;
    --vz-vertical-menu-title-color:  var(--st-ink-3);
    --vz-header-bg:                  var(--st-surface);
    --vz-header-border:              var(--st-line);
    --vz-header-item-color:          var(--st-ink-2);
    --vz-topbar-user-bg:             var(--st-surface-2);
    --vz-body-bg:                    var(--st-canvas);
    --vz-secondary-bg:               var(--st-surface);
    --vz-border-color:               var(--st-line);
    --vz-link-color:                 #5eead4;
    --vz-primary-text-emphasis:      #5eead4;
}
[data-bs-theme="dark"] a { color: #5eead4; }
[data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-link:hover,
[data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-link:hover i,
[data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-link.active,
[data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-sm .nav-link.active { color: #5eead4; }
[data-bs-theme="dark"] .btn-topbar:hover { color: #5eead4 !important; }
[data-bs-theme="dark"] .btn-soft-primary { color: #5eead4; }
[data-bs-theme="dark"] .btn-outline-primary { --vz-btn-color: #5eead4; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: var(--st-surface-2); color: var(--st-ink); border-color: var(--st-line); }
[data-bs-theme="dark"] .alert-danger  { color: #fca5a5; }
[data-bs-theme="dark"] .alert-success { color: #86efac; }
[data-bs-theme="dark"] .alert-warning { color: #fcd34d; }
[data-bs-theme="dark"] .alert-info    { color: #5eead4; }
[data-bs-theme="dark"] .diff .old { color: #fca5a5; }
[data-bs-theme="dark"] .diff .new { color: #86efac; }
[data-bs-theme="dark"] .sh-notif > i { color: #5eead4; }
[data-bs-theme="dark"] .light-dark-mode i::before { content: "\f1bf"; } /* ri-sun-line */

/* ── Reports (layouts/report_page.php) ─────────────────────────────────────── */
.rpt-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.rpt-main { min-width: 0; }
.rpt-main > .panel, .rpt-main > .stat-rail { margin-bottom: 1rem; }
.rpt-nav { padding: .55rem; position: sticky; top: calc(70px + 1rem); margin-bottom: 1rem; }
.rpt-nav-head { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--st-ink-3); padding: .35rem .6rem .5rem; }
.rpt-nav a { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--st-r-sm); color: var(--st-ink-2); font-size: .8rem; font-weight: 600; text-decoration: none; line-height: 1.2; }
.rpt-nav a > i:first-child { font-size: 1rem; color: var(--st-ink-3); flex: none; }
.rpt-nav a:hover { background: var(--st-surface-2); color: var(--st-teal-d); }
.rpt-nav a.on { background: var(--st-grad); color: #fff; box-shadow: 0 2px 8px rgba(32, 178, 170, .3); }
.rpt-nav a.on > i { color: #fff; }
.rpt-nav .rpt-ext { margin-left: auto; font-size: .8rem; color: var(--st-ink-3); }
.rpt-filters { margin-bottom: 1rem; }
.rpt-filters .filter-bar .form-control.rpt-date { min-width: 0; width: 150px; }
.rpt-filters .filter-bar .form-select { min-width: 150px; max-width: 220px; }
.rpt-param { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .72rem; font-weight: 700; color: var(--st-ink-3); text-transform: uppercase; letter-spacing: .06em; }
.rpt-presets { flex-wrap: wrap; }
.rpt-chart { min-height: 290px; }
/* Velzon's app.min.css paints every pie <text> white (for slice labels) — that hides the donut's centre total. */
.rpt-chart .apexcharts-datalabels-group .apexcharts-datalabel-label { fill: var(--st-ink-3); }
.rpt-chart .apexcharts-datalabels-group .apexcharts-datalabel-value { fill: var(--st-ink); font-weight: 800; }
.rpt-table tfoot td { font-weight: 800; border-top: 2px solid var(--st-line); background: var(--st-surface-2); }
.rpt-table tr.rpt-muted td { opacity: .5; }
.rpt-table tr.rpt-strong td { font-weight: 800; background: var(--st-surface-2); }
.rpt-table .rpt-link:hover { color: var(--st-teal-d) !important; text-decoration: underline; }
.rpt-note { font-size: .76rem; color: var(--st-ink-3); margin: -.25rem 0 1rem; }
@media (max-width: 1199.98px) {
    .rpt-layout { grid-template-columns: minmax(0, 1fr); }
    .rpt-nav { position: static; display: flex; gap: .25rem; overflow-x: auto; }
    .rpt-nav-head { display: none; }
    .rpt-nav a { white-space: nowrap; flex: none; }
}
[data-bs-theme="dark"] .rpt-nav a:hover, [data-bs-theme="dark"] .rpt-table .rpt-link:hover { color: #5eead4 !important; }
[data-bs-theme="dark"] .rpt-nav a.on { color: #fff !important; }