/* header.css - site look (Style C from project/mockups): medium density, orange accent,
   light chrome in light mode, proper dark in dark mode. The colour tokens (:root and dark)
   are in tokens.css, loaded just before this file; the building blocks the components share
   (accent buttons, chips, rating bands, icon buttons) are in ui.css, loaded just after it. */
body{background:var(--body);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.95rem;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}

/* top nav */
.c-nav{background:var(--chrome);color:var(--chrome-ink);border-bottom:1px solid var(--chrome-line)}
.c-brand{font-weight:700;letter-spacing:-.015em;color:var(--chrome-ink);text-decoration:none;white-space:nowrap}
.c-brand i{color:var(--ac)}
.c-brand{display:inline-flex;align-items:center;gap:7px}
.c-brand-mark{flex-shrink:0}
.c-brand-word{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.c-brand-word span{color:var(--ac)}
.c-nav .nav-link{color:var(--chrome-mut);font-size:.88rem;font-weight:500;padding:.4rem .75rem;border-radius:7px}
.c-nav .nav-link:hover{color:var(--ac);background:var(--ac-soft)}
.c-nav .nav-link.active{color:var(--on-ac);background:var(--ac)}
.c-nav .form-control,.c-nav .input-group-text{background:var(--field);border-color:var(--field-line);color:var(--chrome-ink);font-size:.84rem}
.c-nav .form-control::placeholder{color:var(--chrome-mut)}
.c-nav .form-control:focus{background:var(--field);border-color:var(--ac);box-shadow:none;color:var(--chrome-ink)}
.c-btn-chrome{background:transparent;border:1px solid var(--field-line);color:var(--chrome-mut);font-size:.78rem;padding:.22rem .55rem;border-radius:7px;text-decoration:none;display:inline-block;line-height:1.25}
.c-btn-chrome:hover{background:var(--ac);border-color:var(--ac);color:var(--on-ac)}
.c-nav .dropdown-menu{background:var(--surface);border-color:var(--line);font-size:.88rem}
.c-nav .dropdown-item{color:var(--chrome-ink)}
.c-nav .dropdown-item:hover{background:var(--ac-soft);color:var(--ac)}

/* surfaces */
.c-card{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.c-card-b{padding:.9rem 1rem}
.c-strip{background:var(--chrome-2);color:var(--chrome-ink);border-bottom:1px solid var(--line);border-radius:12px 12px 0 0;padding:.5rem .95rem;font-size:.82rem}
.page-title{font-weight:700;letter-spacing:-.02em}
.stat{font-variant-numeric:tabular-nums}

/* medium density table with a sticky header */
.t-mid{font-size:.88rem;margin-bottom:0}
.t-mid>:not(caption)>*>*{padding:.55rem .6rem;background:transparent;vertical-align:top;border-bottom-color:var(--line)}
.t-mid thead th{position:sticky;top:57px;z-index:2;background:var(--surface);font-size:.69rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap}
.t-mid tbody tr{border-bottom:1px solid var(--line)}
.t-mid tbody tr:last-child{border-bottom:0}
.t-mid tbody tr:hover{background:var(--ac-soft)}
@media (min-width:992px){.t-mid thead th{top:44px}}
.sortable{cursor:pointer;user-select:none}
.sort-icon{color:var(--muted);font-size:.8em}
.sort-icon.active{color:var(--ac)}

.hidden-row{opacity:.55}

/* footer */
.c-foot{border-top:1px solid var(--chrome-line);color:var(--chrome-mut);font-size:.76rem;padding:.75rem 0}

/* toasts (common.js) */
#loadingOverlay{position:fixed;inset:0;z-index:1090;background:rgba(0,0,0,.25);display:none;align-items:center;justify-content:center}
#loadingOverlay.show{display:flex}

/* a sticky table header inside its own scroll box starts at the top of that box, never under the nav */
.table-responsive .t-mid thead th, .modal .t-mid thead th { top: 0; }


/* the phone (under 992px, owner 2026-10-10, the mobile mock-up): one top bar (brand, DJ, Charts,
   account), the bottom tab bar and its More sheet; the footer line gives way to the tab bar */
:root{--tabbar-h:60px}
.c-icon-chrome{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--chrome-ink);font-size:1.3rem;border-radius:8px;text-decoration:none}
.c-icon-chrome:hover,.c-icon-chrome.active{color:var(--ac)}
.c-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1031;display:flex;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--chrome);border-top:1px solid var(--chrome-line)}
.c-tab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.72rem;font-weight:600;color:var(--chrome-mut);text-decoration:none;background:none;border:0;padding:0}
.c-tab i{width:52px;height:28px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.c-tab.active{color:var(--ac)}
.c-tab.active i{background:var(--ac-soft)}
.c-sheet{height:auto !important;max-height:80vh;border-radius:18px 18px 0 0;background:var(--surface);color:var(--chrome-ink);padding-bottom:env(safe-area-inset-bottom)}
.c-sheet-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.c-sheet-tile{height:76px;border-radius:12px;background:var(--chrome-2);color:var(--chrome-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:.85rem;font-weight:600;text-decoration:none}
.c-sheet-tile i{font-size:1.3rem;color:var(--ac)}
.c-sheet-tile.active{background:var(--ac-soft);color:var(--ac)}
.c-sheet-label{font-size:.8rem;font-weight:600;color:var(--chrome-mut);margin:1rem 0 .4rem}
.c-sheet-row{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line);color:var(--chrome-ink);text-decoration:none}
.c-sheet-row span{flex:1 1 auto}
.c-sheet-row i{color:var(--chrome-mut)}
.c-btn-out{color:var(--bad);border-color:var(--bad)}
.c-avatar{width:34px;height:34px;border-radius:50%;border:0;background:var(--ac-soft);color:var(--ac);font-weight:700;font-size:.8rem;margin-left:4px}
@media (max-width:991.98px){
  body:has(.c-tabbar){padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  body:has(.c-tabbar) .c-foot{display:none}
  body:has(.c-tabbar) #toastHost{bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom))}
}

/* the page's side margins (owner 2026-10-10: half of Bootstrap's 1rem / 1.5rem), header, page and footer alike */
.c-gutter{padding-left:.5rem;padding-right:.5rem}
@media (min-width:992px){.c-gutter{padding-left:.75rem;padding-right:.75rem}}