/* ============================================================
   FM Studio — control panel
   ============================================================
   Monochrome by design. There is no brand colour: hierarchy comes from
   weight, size and space, and the greyscale ramp does the rest. Colour is
   reserved strictly for meaning — a station is live, a payment failed, a
   plan is over quota. When everything is coloured, nothing reads as urgent.

   Rules this file keeps to:
     · no gradients, no glow shadows, no coloured furniture
     · 1px rules instead of drop shadows, except where something floats
     · 2–3px radii: enough to look intentional, not enough to look soft
     · tabular figures wherever numbers are compared
   ============================================================ */

:root {
    --sr-sidebar-width: 248px;

    /* Greyscale ramp — the entire palette */
    --sr-0:  #0a0a0a;
    --sr-1:  #121212;
    --sr-2:  #1a1a1a;
    --sr-3:  #232323;
    --sr-4:  #2e2e2e;
    --sr-5:  #3d3d3d;
    --sr-6:  #565656;
    --sr-7:  #767676;
    --sr-8:  #9a9a9a;
    --sr-9:  #bdbdbd;
    --sr-10: #d9d9d9;
    --sr-11: #ebebeb;
    --sr-12: #f4f4f4;
    --sr-13: #fafafa;

    /* State — the only colour in the system, and it always means something */
    --sr-live:   #17864b;   /* on air, paid, healthy */
    --sr-warn:   #9a6b12;   /* grace, over quota, needs attention */
    --sr-danger: #a52422;   /* suspended, failed, destructive */

    --sr-radius: 3px;
    --sr-radius-sm: 2px;
    --sr-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--sr-font);
    letter-spacing: -.006em;
    -webkit-font-smoothing: antialiased;
}

/* Numbers that get compared must line up */
.table, .sr-widget .value, .font-monospace, code {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- Theme surfaces ---------- */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--sr-0);
    --bs-body-color: var(--sr-12);
    --bs-secondary-color: var(--sr-8);
    --bs-tertiary-bg: var(--sr-1);
    --bs-secondary-bg: var(--sr-3);
    --bs-border-color: var(--sr-3);
    --bs-border-color-translucent: var(--sr-3);
    --bs-emphasis-color: var(--sr-13);

    --sr-card-bg: var(--sr-1);
    --sr-topbar-bg: rgba(10, 10, 10, .88);
    --sr-input-bg: var(--sr-0);
    --sr-rule: var(--sr-3);

    /* The primary action inverts against the surface */
    --sr-action-bg: var(--sr-13);
    --sr-action-fg: var(--sr-0);
    --sr-action-hover: var(--sr-10);
    --sr-focus-ring: rgba(255, 255, 255, .22);

    --sr-live-fg:   #4ec27f;
    --sr-warn-fg:   #d9a441;
    --sr-danger-fg: #e0645f;
}

[data-bs-theme="light"] {
    --bs-body-bg: var(--sr-13);
    --bs-body-color: var(--sr-1);
    --bs-secondary-color: var(--sr-6);
    --bs-tertiary-bg: #ffffff;
    --bs-secondary-bg: var(--sr-11);
    --bs-border-color: var(--sr-10);
    --bs-border-color-translucent: var(--sr-10);
    --bs-emphasis-color: var(--sr-0);

    --sr-card-bg: #ffffff;
    --sr-topbar-bg: rgba(250, 250, 250, .88);
    --sr-input-bg: #ffffff;
    --sr-rule: var(--sr-10);

    --sr-action-bg: var(--sr-0);
    --sr-action-fg: var(--sr-13);
    --sr-action-hover: var(--sr-3);
    --sr-focus-ring: rgba(0, 0, 0, .18);

    --sr-live-fg:   var(--sr-live);
    --sr-warn-fg:   var(--sr-warn);
    --sr-danger-fg: var(--sr-danger);
}

/* Links are ink, not a hue */
:root { --bs-link-color: var(--bs-body-color); --bs-link-hover-color: var(--bs-body-color); }
a { text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:not(.btn):not(.nav-link):not(.page-link):not(.sr-brand):hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--sr-radius-sm);
    font-weight: 500;
    font-size: .875rem;
    padding: .45rem .9rem;
    box-shadow: none !important;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:focus-visible { outline: 2px solid var(--sr-focus-ring); outline-offset: 1px; }

.btn-primary {
    --bs-btn-bg: var(--sr-action-bg);
    --bs-btn-border-color: var(--sr-action-bg);
    --bs-btn-color: var(--sr-action-fg);
    --bs-btn-hover-bg: var(--sr-action-hover);
    --bs-btn-hover-border-color: var(--sr-action-hover);
    --bs-btn-hover-color: var(--sr-action-fg);
    --bs-btn-active-bg: var(--sr-action-hover);
    --bs-btn-active-border-color: var(--sr-action-hover);
    --bs-btn-active-color: var(--sr-action-fg);
    --bs-btn-disabled-bg: var(--sr-7);
    --bs-btn-disabled-border-color: var(--sr-7);
    --bs-btn-disabled-color: var(--bs-body-bg);
}
.btn-outline-primary, .btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--sr-7);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--sr-7);
    --bs-btn-active-color: var(--bs-body-color);
}
.btn-link { --bs-btn-color: var(--bs-body-color); --bs-btn-hover-color: var(--bs-body-color); }

/* Destructive and affirmative actions keep their colour — that is the point */
.btn-danger {
    --bs-btn-bg: var(--sr-danger); --bs-btn-border-color: var(--sr-danger);
    --bs-btn-hover-bg: #8d1d1c; --bs-btn-hover-border-color: #8d1d1c;
}
.btn-success {
    --bs-btn-bg: var(--sr-live); --bs-btn-border-color: var(--sr-live);
    --bs-btn-hover-bg: #126b3b; --bs-btn-hover-border-color: #126b3b;
}
.btn-warning {
    --bs-btn-bg: var(--sr-warn); --bs-btn-border-color: var(--sr-warn); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #80580f; --bs-btn-hover-border-color: #80580f; --bs-btn-hover-color: #fff;
}
.btn-outline-danger  { --bs-btn-color: var(--sr-danger-fg); --bs-btn-border-color: var(--bs-border-color);
                       --bs-btn-hover-bg: var(--sr-danger); --bs-btn-hover-border-color: var(--sr-danger); --bs-btn-hover-color: #fff; }
.btn-outline-success { --bs-btn-color: var(--sr-live-fg); --bs-btn-border-color: var(--bs-border-color);
                       --bs-btn-hover-bg: var(--sr-live); --bs-btn-hover-border-color: var(--sr-live); --bs-btn-hover-color: #fff; }
.btn-outline-warning { --bs-btn-color: var(--sr-warn-fg); --bs-btn-border-color: var(--bs-border-color);
                       --bs-btn-hover-bg: var(--sr-warn); --bs-btn-hover-border-color: var(--sr-warn); --bs-btn-hover-color: #fff; }

/* ---------- Forms ---------- */
.form-control, .form-select, .input-group-text {
    border-radius: var(--sr-radius-sm);
    background-color: var(--sr-input-bg);
    border-color: var(--bs-border-color);
    font-size: .875rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--sr-7);
    box-shadow: 0 0 0 3px var(--sr-focus-ring);
    background-color: var(--sr-input-bg);
}
.form-label { font-size: .8rem; font-weight: 500; color: var(--bs-secondary-color); margin-bottom: .3rem; }
.form-text { font-size: .78rem; color: var(--bs-secondary-color); }
.form-check-input:checked { background-color: var(--sr-action-bg); border-color: var(--sr-action-bg); }
.form-check-input:focus { border-color: var(--sr-7); box-shadow: 0 0 0 3px var(--sr-focus-ring); }

/* ---------- Badges: text and a hairline, never a coloured pill ---------- */
.badge {
    font-weight: 500; font-size: .7rem; letter-spacing: .02em;
    border-radius: var(--sr-radius-sm);
    padding: .25em .5em;
    border: 1px solid var(--bs-border-color);
    background: transparent !important;
    color: var(--bs-secondary-color) !important;
}
.text-bg-primary, .text-bg-secondary, .text-bg-info { color: var(--bs-secondary-color) !important; }
.text-bg-success { color: var(--sr-live-fg) !important;   border-color: color-mix(in srgb, var(--sr-live) 45%, transparent) !important; }
.text-bg-warning { color: var(--sr-warn-fg) !important;   border-color: color-mix(in srgb, var(--sr-warn) 45%, transparent) !important; }
.text-bg-danger  { color: var(--sr-danger-fg) !important; border-color: color-mix(in srgb, var(--sr-danger) 45%, transparent) !important; }

/* On air is the one state that earns a dot */
.sr-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sr-7); }
.sr-dot.is-live { background: var(--sr-live-fg); }
.sr-dot.is-down { background: var(--sr-danger-fg); }

/* Semantic text helpers, remapped off Bootstrap's brand hues */
.text-primary { color: var(--bs-body-color) !important; }
.text-success { color: var(--sr-live-fg) !important; }
.text-warning { color: var(--sr-warn-fg) !important; }
.text-danger  { color: var(--sr-danger-fg) !important; }
.text-info    { color: var(--bs-secondary-color) !important; }

/* ---------- Pagination ---------- */
.page-link {
    color: var(--bs-secondary-color); border-radius: var(--sr-radius-sm);
    margin: 0 .1rem; border-color: transparent; font-size: .85rem;
}
.page-link:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.page-item.active .page-link {
    background: var(--sr-action-bg); border-color: var(--sr-action-bg); color: var(--sr-action-fg);
}

/* ============================================================
   Auth & signup
   ============================================================ */
.auth-body {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--bs-body-bg);
    padding: 1.5rem;
}
.auth-wrap { width: 100%; max-width: 400px; }
.auth-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--sr-radius);
    background: var(--sr-card-bg);
}
.auth-logo {
    width: 44px; height: 44px; margin: 0 auto; border-radius: var(--sr-radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    background: var(--sr-action-bg); color: var(--sr-action-fg);
}

/* ============================================================
   App shell
   ============================================================ */
.sr-shell { display: flex; min-height: 100vh; }

.sr-sidebar {
    width: var(--sr-sidebar-width);
    flex-shrink: 0;
    background: var(--bs-tertiary-bg);
    border-right: 1px solid var(--sr-rule);
    display: flex; flex-direction: column;
    position: fixed; inset: 0 auto 0 0; z-index: 1040;
    transition: transform .2s ease;
}
.sr-main { flex: 1; margin-left: var(--sr-sidebar-width); min-width: 0; display: flex; flex-direction: column; }

.sr-brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.1rem 1.2rem;
    font-weight: 600; font-size: .95rem; letter-spacing: -.02em;
    border-bottom: 1px solid var(--sr-rule);
    color: var(--bs-body-color); text-decoration: none;
}
.sr-brand .logo {
    width: 28px; height: 28px; border-radius: var(--sr-radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--sr-action-bg); color: var(--sr-action-fg);
    font-size: .9rem;
}

.sr-nav { padding: .7rem .6rem; flex: 1; overflow-y: auto; }
.sr-nav .nav-label {
    font-size: .65rem; text-transform: uppercase; letter-spacing: .09em;
    font-weight: 600; color: var(--sr-7);
    padding: 1.1rem .7rem .35rem;
}
.sr-nav .nav-link {
    display: flex; align-items: center; gap: .65rem;
    color: var(--bs-secondary-color);
    border-radius: var(--sr-radius-sm); padding: .45rem .7rem;
    font-size: .865rem; font-weight: 450;
    transition: color .1s ease, background .1s ease;
}
.sr-nav .nav-link i { font-size: .95rem; width: 1.1rem; text-align: center; }
.sr-nav .nav-link:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.sr-nav .nav-link.active {
    background: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
    font-weight: 550;
}
.sr-nav .nav-link.disabled { opacity: .4; }
.sr-sidebar-footer { padding: .85rem 1.2rem; border-top: 1px solid var(--sr-rule); }

.sr-topbar {
    display: flex; align-items: center; gap: 1rem;
    padding: .75rem 1.75rem;
    background: var(--sr-topbar-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sr-rule);
    position: sticky; top: 0; z-index: 1030;
}
.sr-topbar h1 { font-weight: 600; letter-spacing: -.022em; font-size: 1.05rem; }
.sr-content { padding: 1.75rem; flex: 1; }

/* Impersonation is a warning, so it may use warning colour */
.sr-impersonate {
    background: transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--sr-warn) 45%, transparent);
    color: var(--sr-warn-fg);
    padding: .4rem 1.75rem; font-size: .8rem;
}

/* Billing lapse. Same restrained treatment as the impersonation bar — a rule
   and coloured text, never a coloured wash. Grace warns; suspended is a state
   colour because the station really is off air. */
.sr-billing-banner {
    background: transparent;
    padding: .5rem 1.75rem; font-size: .82rem;
}
.sr-billing-banner.is-grace {
    border-bottom: 1px solid color-mix(in srgb, var(--sr-warn) 45%, transparent);
    color: var(--sr-warn-fg);
}
.sr-billing-banner.is-suspended {
    border-bottom: 1px solid color-mix(in srgb, var(--sr-danger) 55%, transparent);
    color: var(--sr-danger-fg);
}

/* ---------- Cards ---------- */
.sr-card, .sr-widget, .card, .modal-content, .dropdown-menu {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--sr-radius);
    background: var(--sr-card-bg);
    box-shadow: none;
}
/* Only floating surfaces get a shadow, and it is grey, not coloured */
.modal-content, .dropdown-menu { box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .5); }

.card-header {
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 550; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--bs-secondary-color);
    padding: .7rem 1rem;
}
.card-footer { border-top: 1px solid var(--bs-border-color); background: transparent; }

.sr-widget .icon {
    width: 34px; height: 34px; border-radius: var(--sr-radius-sm); font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-secondary-color) !important;
}
.sr-widget .icon.text-bg-success { color: var(--sr-live-fg) !important; }
.sr-widget .icon.text-bg-warning { color: var(--sr-warn-fg) !important; }
.sr-widget .icon.text-bg-danger  { color: var(--sr-danger-fg) !important; }

/* A fixed 1.6rem overflowed a half-width tile on a phone: two tiles per row
   leaves roughly 100px for the text once the icon and gaps are taken out, and
   "UGX 1,250,000" does not fit at that size. Scale with the viewport and let a
   long value wrap rather than run past the border. */
.sr-widget .value {
    font-size: clamp(1.15rem, 1rem + 1.1vw, 1.6rem);
    font-weight: 600; line-height: 1.15; letter-spacing: -.03em;
    color: var(--bs-emphasis-color);
    overflow-wrap: anywhere;
}
.sr-widget .label {
    font-size: .72rem; color: var(--sr-7); font-weight: 500;
    text-transform: uppercase; letter-spacing: .07em;
}
.sr-widget:hover { border-color: var(--sr-7); }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; font-size: .875rem; }
.table > thead th {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
    font-weight: 600; color: var(--sr-7);
    border-bottom: 1px solid var(--bs-border-color);
    padding-top: .55rem; padding-bottom: .55rem;
}
.table > :not(caption) > * > * { padding: .65rem .9rem; border-bottom-color: var(--bs-border-color); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--bs-secondary-bg); }

/* ---------- Alerts: a rule and coloured text, not a wash ---------- */
.alert {
    border-radius: var(--sr-radius-sm);
    border: 1px solid var(--bs-border-color);
    border-left-width: 2px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: .875rem;
}
.alert-success { border-left-color: var(--sr-live);   }
.alert-warning { border-left-color: var(--sr-warn);   }
.alert-danger  { border-left-color: var(--sr-danger); }
.alert-info, .alert-secondary { border-left-color: var(--sr-7); }
.alert-success strong { color: var(--sr-live-fg); }
.alert-warning strong { color: var(--sr-warn-fg); }
.alert-danger strong  { color: var(--sr-danger-fg); }

/* ---------- Tabs ---------- */
.nav-tabs { border-bottom: 1px solid var(--bs-border-color); }
.nav-tabs .nav-link {
    border: none; border-bottom: 2px solid transparent;
    color: var(--bs-secondary-color); font-size: .875rem; font-weight: 500;
    padding: .5rem .9rem; border-radius: 0;
}
.nav-tabs .nav-link:hover { border-bottom-color: var(--sr-8); color: var(--bs-body-color); }
.nav-tabs .nav-link.active {
    background: transparent; color: var(--bs-emphasis-color);
    border-bottom-color: var(--bs-emphasis-color);
}

/* ---------- Toasts ---------- */
.sr-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 2000; }
.toast {
    border-radius: var(--sr-radius-sm);
    border: 1px solid var(--bs-border-color);
    background: var(--sr-card-bg);
    color: var(--bs-body-color);
    font-size: .875rem;
}

/* ---------- Progress ---------- */
.progress { background: var(--bs-secondary-bg); border-radius: var(--sr-radius-sm); height: .4rem; }
.progress-bar { background: var(--sr-action-bg); }
.progress-bar.bg-warning { background: var(--sr-warn) !important; }
.progress-bar.bg-danger  { background: var(--sr-danger) !important; }

/* ---------- Scrollbars (webkit) ---------- */
.sr-nav::-webkit-scrollbar { width: 5px; }
.sr-nav::-webkit-scrollbar-thumb { background: var(--sr-5); border-radius: 3px; }

/* ---------- Utilities ----------
   Bootstrap 5 ships no `min-w-0`, but the views use it in 17 places to let a
   flex child shrink below its content. Without it a flex item keeps
   `min-width:auto`, so `.text-truncate` has no constrained width to truncate
   against and long text runs past the card border instead of ellipsing. */
.min-w-0 { min-width: 0 !important; }

/* ---------- Submitting state ----------
   A disabled Bootstrap button only fades, which on a slow connection reads as
   "the click didn't register" rather than "this is working". The spinner is
   added by SR.busy(); this keeps the button from also going semi-transparent,
   because a faded spinner is harder to see than a solid one. */
.btn.sr-busy {
    opacity: 1;
    cursor: progress;
}
/* Anything else in the form is still disabled-looking, but the pointer says
   "wait", not "forbidden" — nothing was rejected. */
form:has(.sr-busy) { cursor: progress; }

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
    .sr-sidebar { transform: translateX(-100%); }
    .sr-sidebar.show { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .5); }
    .sr-main { margin-left: 0; }
    .sr-content, .sr-topbar { padding-left: 1.1rem; padding-right: 1.1rem; }
}