/* InfoMonitor — modern blue dashboard with yellow + orange accents.
   Tokens (see tailwind.config in _Layout): ink #0F1E3D · cobalt #2F5BEA · paper #F3F6FC · line #E1E7F2
   · signal (orange) #FF7A1A · sun (yellow) #FFC531 */

:root {
    --ink: #0F1E3D;
    --navy: #0B1A3A;
    --cobalt: #2F5BEA;
    --cobalt-dark: #2147C9;
    --cobalt-soft: #EAF0FF;
    --paper: #F3F6FC;
    --line: #E1E7F2;
    --muted: #64708A;
    --orange: #FF7A1A;
    --orange-soft: #FFF1E6;
    --sun: #FFC531;
    --sun-soft: #FFF8E1;
    --shadow: 0 1px 2px rgba(15, 30, 61, .04), 0 4px 16px rgba(15, 30, 61, .06);
}

body { background:
        radial-gradient(1200px 400px at 100% -100px, rgba(47, 91, 234, .08), transparent 60%),
        var(--paper); }

/* ---------- Header ---------- */
.im-header {
    background: linear-gradient(100deg, #0B1A3A 0%, #13296B 55%, #2147C9 100%);
    box-shadow: 0 6px 24px rgba(11, 26, 58, .18);
}
.im-logo-mark {
    width: 26px; height: 26px; border-radius: 8px; position: relative;
    background: linear-gradient(135deg, var(--sun), var(--orange));
    box-shadow: 0 2px 8px rgba(255, 122, 26, .45);
}
.im-logo-mark::after {
    content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff;
}
.im-nav {
    display: flex; align-items: center; padding: 0 .9rem; position: relative;
    font-size: .875rem; font-weight: 500; color: rgba(255, 255, 255, .65); transition: color .15s;
}
.im-nav:hover { color: #fff; }
.im-nav.is-active { color: #fff; }
.im-nav.is-active::after {
    content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 0; height: 3px;
    border-radius: 3px 3px 0 0; background: var(--sun);
}

.im-onair {
    display: flex; align-items: center; gap: .45rem;
    padding: .3rem .7rem; border-radius: 9999px;
    background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .12);
}
.im-onair-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.im-onair.is-live { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 0 0 4px rgba(255, 122, 26, .25); }
.im-onair.is-live .im-onair-dot { background: #fff; animation: im-blink 1.2s infinite; }
@keyframes im-blink { 50% { opacity: .25; } }

/* ---------- Sidebar ---------- */
.im-sidebar {
    background: linear-gradient(180deg, #0B1A3A 0%, #0F2257 70%, #132A6E 100%);
    box-shadow: 4px 0 24px rgba(11, 26, 58, .15);
}
.im-side-link {
    position: relative; display: flex; align-items: center; gap: .75rem;
    padding: .55rem .75rem; border-radius: 12px;
    font-size: .9rem; font-weight: 500; color: rgba(255, 255, 255, .65);
    transition: background .15s, color .15s;
}
.im-side-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.im-side-icon {
    width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; font-size: .85rem; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .7);
    transition: background .15s, color .15s;
}
.im-side-link.is-active { background: rgba(47, 91, 234, .35); color: #fff; }
.im-side-link.is-active::before {
    content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px;
    border-radius: 0 4px 4px 0; background: var(--sun);
}
.im-side-link.is-active .im-side-icon { background: var(--cobalt); color: #fff; box-shadow: 0 2px 10px rgba(47, 91, 234, .5); }

.im-side-section { padding: 0 .75rem .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .35); }

/* ---------- Typography ---------- */
.h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; color: var(--ink); }
.h2 { font-size: .95rem; font-weight: 700; color: var(--ink); }
.eyebrow { font-size: .75rem; font-weight: 600; color: var(--cobalt); }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.lnk { color: var(--cobalt); font-weight: 500; }
.lnk:hover { color: var(--cobalt-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Surfaces ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); }
.card-body { padding: 1.1rem 1.25rem; }
.card.p-5, .card.p-6 { padding: 1.25rem; }

/* ---------- Inline stat pill (same height as .btn) ---------- */
.im-stat {
    display: inline-flex; align-items: center; gap: .6rem; height: 2.4rem; padding: 0 .9rem;
    background: #fff; border: 1px solid var(--line); border-radius: 10px; white-space: nowrap;
}
.im-stat-label { font-size: .8rem; color: var(--muted); }
.im-stat-value { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.btn { height: 2.4rem; }
.btn-sm { height: auto; }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem;
    border-radius: 9999px; font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.badge-grey   { color: var(--muted); background: #EEF2F8; }
.badge-blue   { color: #7A5300; background: var(--sun-soft); box-shadow: inset 0 0 0 1px #FFE08A; } /* "News" tag = yellow accent */
.badge-green  { color: #12704A; background: #E4F7EE; }
.badge-red    { color: #fff; background: var(--orange); }
.badge-orange { color: #B24A00; background: var(--orange-soft); }
.badge-purple { color: var(--cobalt-dark); background: var(--cobalt-soft); }

/* ---------- Tables ---------- */
.im-table { width: 100%; font-size: .875rem; border-collapse: separate; border-spacing: 0; }
.im-table thead th {
    text-align: left; padding: .55rem .75rem; font-size: .75rem; font-weight: 600; color: var(--muted);
    background: var(--paper); border-bottom: 1px solid var(--line);
}
.im-table thead th:first-child { border-top-left-radius: 10px; }
.im-table thead th:last-child { border-top-right-radius: 10px; }
.im-table td { padding: .65rem .75rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.im-table tbody tr:last-child td { border-bottom: 0; }
.im-table tbody tr { transition: background .1s; }
.im-table tbody tr:hover { background: #F7F9FE; }
.im-table td:first-child { color: #9AA4B8; font-size: .75rem; font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem;
    border-radius: 10px; font-size: .875rem; font-weight: 600; border: 1px solid transparent;
    cursor: pointer; transition: background .15s, box-shadow .15s, border-color .15s;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--cobalt); color: #fff; box-shadow: 0 2px 8px rgba(47, 91, 234, .3); }
.btn-primary:hover { background: var(--cobalt-dark); }
.btn-signal { background: linear-gradient(135deg, #FF9A3D, var(--orange)); color: #fff; box-shadow: 0 2px 10px rgba(255, 122, 26, .35); }
.btn-signal:hover { background: linear-gradient(135deg, #FF8A26, #E5630A); }
.btn-light { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-light:hover { border-color: #C7D2E8; background: #F7F9FE; }
.btn-sm { padding: .3rem .65rem; font-size: .8rem; border-radius: 8px; }

.pill { padding: .4rem .8rem; font-size: .8rem; font-weight: 500; border-radius: 9999px; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.pill:hover { border-color: #C7D2E8; }
.pill.is-active { background: var(--cobalt); border-color: var(--cobalt); color: #fff; box-shadow: 0 2px 8px rgba(47, 91, 234, .3); }

/* ---------- Brief ---------- */
.im-brief { line-height: 1.65; color: var(--ink); }
.im-brief p { margin: 0 0 .6rem; }
.im-brief strong { font-weight: 700; color: #0B1A3A; }
.im-brief-list { list-style: none; padding: 0; margin: 0; }
.im-brief-list li { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: .9rem; margin-bottom: .9rem; padding: .35rem .5rem; border-radius: 12px; transition: background .15s; }
.im-brief-list li.is-active { background: var(--cobalt-soft); }
.im-brief-num { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.im-brief-num > span { font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; }
.im-story-btn { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; color: var(--cobalt); white-space: nowrap;
    background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .15rem .5rem; }
.im-story-btn:hover { border-color: var(--cobalt); background: var(--cobalt-soft); }
.im-brief .money { background: #E4F7EE; color: #12704A; font-weight: 600; border-radius: 4px; padding: 0 .2rem; white-space: nowrap; }
.im-brief strong.pol { background: var(--cobalt-soft); color: var(--cobalt-dark); border-radius: 4px; padding: 0 .2rem; }

/* ---------- Interactive transcript ---------- */
.im-player { position: sticky; top: 0; z-index: 5; background: #fff; padding: .5rem 0 .75rem; }
.im-player audio { display: none; }
.im-wave { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.im-wave-play { width: 44px; height: 44px; flex: none; border-radius: 9999px; background: var(--cobalt); color: #fff; box-shadow: 0 4px 12px rgba(47,91,234,.35); }
.im-wave-play:hover { background: var(--cobalt-dark); }
.im-wave-box { flex: 1; min-width: 0; min-height: 56px; display: flex; align-items: center; cursor: pointer; }
.im-wave-loading { width: 100%; text-align: center; font-size: .78rem; color: var(--muted); }
.im-wave-time { flex: none; font-size: .78rem; color: var(--muted); min-width: 6.5rem; text-align: right; }
.im-wave-speed { flex: none; font-size: .72rem; font-weight: 700; color: var(--cobalt); border: 1px solid var(--line); border-radius: 8px; padding: .2rem .45rem; }
@media (max-width: 640px) { .im-wave-time { min-width: 0; } .im-wave-speed { display: none; } }
.im-transcript { font-size: .92rem; line-height: 1.75; }
.im-transcript p { margin: 0 0 .55rem; }
.im-ts { font-family: "JetBrains Mono", monospace; font-size: .72rem; color: #9AA4B8; margin-right: .35rem; }
.im-ts.js-w { cursor: pointer; }
.im-ts.js-w:hover { color: var(--cobalt); }
.im-spk { font-size: .72rem; font-weight: 700; color: var(--cobalt); margin-right: .35rem; text-transform: uppercase; letter-spacing: .03em; }
.im-transcript .w.js-w { cursor: pointer; border-radius: 4px; padding: 0 1px; transition: background .1s; }
.im-transcript .w.js-w:hover { background: var(--cobalt-soft); }
.im-transcript .w.b { font-weight: 700; color: #0B1A3A; }
.im-transcript .w.pol { background: var(--cobalt-soft); color: var(--cobalt-dark); border-radius: 3px; }
.im-transcript p.is-story { background: #F4F7FF; box-shadow: inset 3px 0 0 var(--cobalt); border-radius: 6px; padding: .2rem .5rem; margin-left: -.5rem; margin-right: -.5rem; }
.im-transcript .w.kw { background: var(--sun-soft); box-shadow: inset 0 -2px 0 var(--sun); border-radius: 3px; }
.im-transcript .w.is-now { background: var(--sun); color: var(--ink); box-shadow: 0 0 0 2px var(--sun); }

/* ---------- Live panel ---------- */
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: im-blink 1.2s infinite; }
.im-live {
    border-radius: 18px; overflow: hidden; color: #fff;
    background: radial-gradient(800px 300px at 0% 0%, rgba(255, 197, 49, .12), transparent 60%),
                linear-gradient(120deg, #0B1A3A 0%, #13296B 60%, #1E3FAF 100%);
    box-shadow: 0 10px 30px rgba(11, 26, 58, .25);
}
.transcript { white-space: pre-wrap; font-family: "JetBrains Mono", monospace; font-size: .8rem; line-height: 1.65; }
.ticker { font-size: .95rem; line-height: 1.7; }

/* ---------- Forms (modal) ---------- */
.im-input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; font-size: .875rem; background: #fff; transition: border-color .15s, box-shadow .15s; }
.im-input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(47, 91, 234, .15); }
.im-day { display: inline-flex; align-items: center; justify-content: center; min-width: 2.9rem; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 9999px; font-size: .78rem; font-weight: 600; cursor: pointer; user-select: none; background: #fff; }
.im-day input { display: none; }
.im-day:has(input:checked) { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }

/* =========================================================
   Mobile (phones). Tables → cards, bottom-sheet modals,
   16px inputs (no iOS zoom), scrollable pill rows.
   ========================================================= */
.im-sortbar { display: none; }

@media (max-width: 767.98px) {
    .h1 { font-size: 1.45rem; }
    .card-head, .card-body { padding-left: 1rem; padding-right: 1rem; }

    /* Sort bar replaces the header row */
    .im-sortbar { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
    .im-sortbar-label { font-size: .75rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
    .im-sortbar-select { flex: 1; padding: .35rem .6rem; }
    .im-sortbar-dir { min-width: 2.5rem; justify-content: center; }

    /* Table rows → cards */
    .im-table, .im-table tbody, .im-table tr, .im-table td { display: block; width: 100%; }
    .im-table thead { display: none; }
    .im-table tbody tr {
        position: relative; padding: .75rem .9rem .6rem; margin-bottom: .6rem;
        background: #fff; border: 1px solid var(--line); border-radius: 14px;
    }
    .im-table tbody tr:hover { background: #fff; }
    /* Label floats left, the cell's own content stays together on the right */
    .im-table td { padding: .3rem 0; border: 0; text-align: right; overflow-wrap: anywhere; }
    .im-table td::after { content: ""; display: table; clear: both; }
    .im-table td[data-label]::before {
        content: attr(data-label); float: left; max-width: 45%; margin-right: .75rem; padding-top: .1rem;
        font-family: Inter, system-ui, sans-serif; font-size: .72rem; font-weight: 600; color: var(--muted); text-align: left;
    }
    .im-table td[data-empty] { display: none; }
    /* "#" as a small header line of the card */
    .im-table td[data-rownum-cell] { text-align: left; padding: 0 0 .2rem; font-size: .7rem; font-weight: 600; color: #9AA4B8; }
    .im-table td[data-rownum-cell]::before { content: "#"; }
    /* Actions: full-width row of buttons at the bottom of the card */
    .im-table td[data-actions] {
        display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .4rem;
        margin-top: .4rem; padding-top: .6rem; border-top: 1px solid var(--line);
    }
    .im-table td[data-actions]:not(:has(*)) { display: none; }
    .im-table td[data-actions] .btn { flex: 1; justify-content: center; padding: .5rem .6rem; }
    .im-table td[data-actions] .btn:only-child { flex: 1; }

    /* Cards that only wrap a table don't need the outer chrome on phones */
    .card:has(> .card-body > .im-table), .card:has(> .card-body > .im-sortbar) { background: transparent; border: 0; box-shadow: none; }
    .card:has(> .card-body > .im-table) > .card-body, .card:has(> .card-body > .im-sortbar) > .card-body { padding: 0; }
    .card.p-5:has(> .im-table), .card.p-5:has(> .im-sortbar) { background: transparent; border: 0; box-shadow: none; padding: 0; }

    /* Horizontal scroll strips (day pickers etc.) */
    .im-scroll-x { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem .25rem; }
    .im-scroll-x::-webkit-scrollbar { display: none; }
    .im-scroll-x > * { flex: none; }

    /* No iOS zoom on focus */
    .im-input, select, textarea, input { font-size: 16px !important; }

    .btn { padding: .55rem .9rem; }
}

/* Safe areas (notch / home indicator) when installed to home screen */
@supports (padding: env(safe-area-inset-bottom)) {
    .im-sidebar { padding-bottom: env(safe-area-inset-bottom); }
    #toast-root { bottom: calc(1rem + env(safe-area-inset-bottom)); }
}