/* Bang Media "bmadm" polish for the Filament admin — mirrors the Bang dashboard
   design system (bang-website/app/admin). Palette + Satoshi come from the panel
   config; this adds the signature dark canvas, cyan accents and pill buttons.
   Plain CSS, no build. */
:root {
    --bmadm-acc: #9cdaeb;
    --bmadm-mint: #5beeb9;
    --bmadm-blue: #67c6fb;
    --bmadm-ink: #04121a;
    --bmadm-mut: #6c8d9e;
    --bmadm-line: #232a33;
    --bmadm-grad: linear-gradient(135deg, #9cdaeb 0%, #5beeb9 100%);
}

/* Signature radial glow on the app canvas (bmadm body treatment) */
.fi-body {
    background-image: radial-gradient(55rem 42rem at 0% 100%, rgba(20, 60, 90, 0.35), transparent 65%);
    background-attachment: fixed;
}

/* Cyan hairline under the top bar */
.fi-topbar {
    position: relative;
}
.fi-topbar::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(156, 218, 235, 0.4), transparent);
}

/* Login card: cyan→mint accent + glowing title, matching the dashboard */
.fi-simple-main {
    position: relative;
    overflow: hidden;
}
.fi-simple-main::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--bmadm-grad);
}

/* Solid primary buttons → the bmadm bright-cyan pill with dark ink text + glow */
.fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link):not(label) {
    background-color: var(--bmadm-acc);
    background-image: none;
    color: var(--bmadm-ink);
    border-color: transparent;
    border-radius: 2rem;
    box-shadow: 0 0 24px 6px rgba(156, 218, 235, 0.18);
}
.fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link):not(label):hover {
    background-color: #b7e6f2;
    color: var(--bmadm-ink);
}

/* Toggle pickers (Report style etc): options are <label> buttons over a
   hidden radio - keep them quiet outlines and fill ONLY the checked one. */
.fi-fo-toggle-buttons .fi-btn {
    background-color: transparent;
    background-image: none;
    color: var(--bmadm-mut);
    border-radius: 2rem;
    box-shadow: inset 0 0 0 1px var(--bmadm-line);
}
.fi-fo-toggle-buttons .fi-btn:hover {
    color: #d9ecf4;
    box-shadow: inset 0 0 0 1px #3a4653;
}
.fi-fo-toggle-buttons input:checked + .fi-btn {
    background-color: var(--bmadm-acc);
    color: var(--bmadm-ink);
    box-shadow: 0 0 18px 3px rgba(156, 218, 235, 0.18);
}
.fi-fo-toggle-buttons input:checked + .fi-btn:hover {
    background-color: #b7e6f2;
    color: var(--bmadm-ink);
}
.fi-fo-toggle-buttons input:checked + .fi-btn svg {
    color: var(--bmadm-ink);
}

/* Headline glow, matching the dashboard's h1 treatment */
.fi-header-heading {
    text-shadow: 0 0 24px rgba(156, 218, 235, 0.22);
}

/* Active sidebar item → the bmadm solid-cyan pill with dark ink text
   (Filament's default is a faint white tint + cyan text). */
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: var(--bmadm-acc);
    border-radius: 0.6rem;
    box-shadow: 0 2px 14px -6px rgba(156, 218, 235, 0.65);
}
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button:hover,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button:focus-visible {
    background-color: #b7e6f2;
}
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button svg {
    color: var(--bmadm-ink);
}

/* ---- Reconciliation page ----
   Filament's core CSS build doesn't emit grid-template-columns utilities,
   arbitrary min-widths, tabular-nums or the semantic text colours, so the
   handful the page needs are defined here. */
.recon-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 1024px) {
    .recon-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.recon-min { width: 100%; min-width: 920px; }
.recon-num { font-variant-numeric: tabular-nums; }
.recon-over { color: #e28f8f; }   /* over budget  */
.recon-under { color: #f0b46b; }  /* under budget */
.recon-on { color: #5beeb9; }     /* on budget    */

/* Reconciliation platform chips: single-letter G/M badges, equal width */
.recon-pchip {
    min-width: 1.4rem;
    justify-content: center;
    font-weight: 700;
}