/* Shared light/dark theme for the staff pages.
 *
 * Each page keeps its OWN :root block as the light theme — that is the default,
 * and it is what the log viewer and cost dashboard already looked like. This file
 * only supplies the dark values, under :root[data-theme="dark"].
 *
 * That selector is more specific than a bare :root, so it wins no matter which
 * stylesheet is loaded first. It also means a page that forgets to include this
 * file simply stays light rather than breaking.
 *
 * The variable list is the union of what all the staff pages use, so one file
 * covers the console, the users page, the log viewer and the cost dashboard.
 */
:root[data-theme="dark"] {
    /* surfaces + text (console, users, login, logs) */
    --bg:      #0f1216;
    --panel:   #171c22;
    --panel2:  #1e252d;
    --line:    #2a323c;
    --text:    #e7edf3;
    --muted:   #8a97a6;
    --accent:  #4667d6;
    --accent2: #3a58c4;

    /* conversation colours (console, logs) */
    --user:    #243b53;
    --agent:   #4ec27f;
    --caller:  #6aa9ff;
    --danger:  #d9695e;
    --err:     #e4796c;
    --warn:    #d8a441;
    --voice:   #6aa9ff;
    --chat:    #b18ae0;

    /* semantic accents: success / error / warning panels, links, code chips and
       the live-agent bubble. Named rather than literal so the same markup reads
       correctly in both themes. */
    --ok-bg:    #12261c;
    --ok-line:  #2f7d4f;
    --ok-fg:    #a8dcbb;
    --err-bg:   #2a1a1a;
    --err-line: #b3433a;
    --err-fg:   #f3c9c5;
    --warn-bg:  #1a1410;
    --warn-line:#6b5426;
    --warn-fg:  #d7b48a;
    --link:     #7fb6ff;
    --code-bg:  #11151a;
    --live-bg:  #12261c;
    --good:     #8fd6a8;

    /* cost dashboard uses its own names */
    --card:    #171c22;
    --ink:     #e7edf3;
    --llm:     #6aa9ff;
    --stt:     #34b8cf;
    --tts:     #a78bfa;
    --whatsapp:#4ec27f;
    --infra:   #8a97a6;

    color-scheme: dark;
}

/* Form controls, checkboxes and scrollbars follow the theme instead of staying
   stubbornly light — color-scheme above does most of it; this covers the rest. */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background: var(--panel2);
    color: var(--text);
    border-color: var(--line);
}

/* --- branding -------------------------------------------------------------
 * The wordmark is near-black navy, which vanishes on the dark theme, so there
 * are two copies of each asset and CSS picks one. Both are declared in the
 * markup and the unused one is hidden, rather than swapping `src` from script —
 * that way the right logo is painted on first render, with no flicker and no
 * JavaScript. brand/make_logo_assets.py derives all four from one file.
 *
 * `-full` is the whole lockup, "Tru" plus the words, at roughly 5:1. It is wide
 * rather than tall, so it is sized by WIDTH — at a fixed height it would run off
 * the side of the sign-in card. `-mark` is the "Tru" glyph on its own, for the
 * top bar, where the full lockup would render too small to read.
 */
.isa-logo-full,
.isa-logo-mark { display: block; }
.isa-logo-full { width: 100%; max-width: 250px; height: auto; }
.isa-logo-mark { height: 26px; width: auto; }

.isa-dark-only { display: none; }
:root[data-theme="dark"] .isa-light-only { display: none; }
:root[data-theme="dark"] .isa-dark-only { display: block; }

/* The mark in a page header, next to the title. */
.isa-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: inherit;
}

/* --- in-app dialogs (admin-ui.js) -----------------------------------------
 * Replaces window.prompt / confirm / alert. Built from the same variables, so a
 * dialog follows the theme instead of arriving as a grey browser box.
 */
.isa-modal-back {
    position: fixed;
    inset: 0;
    z-index: 2147483100;
    background: rgba(12, 18, 24, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
:root[data-theme="dark"] .isa-modal-back { background: rgba(0, 0, 0, .62); }

.isa-modal {
    background: var(--panel, #fff);
    color: var(--text, #1a2430);
    border: 1px solid var(--line, #d8dee7);
    border-radius: 14px;
    padding: 22px 22px 18px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 18px 48px -12px rgba(11, 26, 28, .38);
    font: 14px/1.55 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.isa-modal-title { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.isa-modal-msg { margin: 0 0 14px; color: var(--muted, #5a6673); font-size: 13.5px;
                 white-space: pre-wrap; }
.isa-modal-input {
    width: 100%;
    background: var(--panel2, #eef2f6);
    border: 1px solid var(--line, #d8dee7);
    color: var(--text, #1a2430);
    padding: 10px 12px;
    border-radius: 8px;
    font: inherit;
}
.isa-modal-input:focus { outline: none; border-color: var(--accent2, #2c49b4); }

.isa-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.isa-modal-btn {
    font: inherit;
    font-size: 13.5px;
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
    color: var(--text, #1a2430);
}
.isa-modal-btn.primary { background: var(--accent, #385ad5); color: #fff; }
.isa-modal-btn.primary:hover { background: var(--accent2, #2c49b4); }
.isa-modal-btn.danger { background: var(--danger, #b3433a); color: #fff; }
.isa-modal-btn.danger:hover { filter: brightness(1.08); }
.isa-modal-btn.ghost { border-color: var(--line, #d8dee7); color: var(--muted, #5a6673); }
.isa-modal-btn.ghost:hover { color: var(--text, #1a2430); border-color: var(--muted, #5a6673); }

/* --- the shared top bar (admin-nav.js) ------------------------------------
 * A slim bar above each page's own header, so the log viewer can keep a header
 * full of filters and still have navigation. Styled from the same variables, so
 * it follows the theme without any per-page CSS.
 */
.isa-topnav {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 7px 16px;
    background: var(--panel, #fff);
    border-bottom: 1px solid var(--line, #d8dee7);
    font: 14px/1 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    flex-wrap: wrap;
}
.isa-topnav-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.isa-topnav-brand .isa-logo-mark { height: 22px; }
.isa-topnav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.isa-topnav-grow { flex: 1 1 auto; }

.isa-topnav-link {
    color: var(--muted, #5a6673);
    text-decoration: none;
    font-size: 13.5px;
    padding: 6px 10px;
    border-radius: 7px;
    white-space: nowrap;
}
.isa-topnav-link:hover { color: var(--text, #1a2430); background: var(--panel2, #eef2f6); }
/* The page you are on, marked without shouting. */
.isa-topnav-link.current {
    color: var(--text, #1a2430);
    font-weight: 600;
    background: var(--panel2, #eef2f6);
}
.isa-topnav-out { margin-left: 2px; }

.isa-topnav-who,
.isa-topnav-tenant {
    font-size: 12px;
    color: var(--muted, #5a6673);
    white-space: nowrap;
}
.isa-topnav-tenant {
    border: 1px solid var(--line, #d8dee7);
    border-radius: 999px;
    padding: 3px 9px;
}
.isa-topnav-theme { display: inline-flex; }

@media (max-width: 720px) {
    .isa-topnav { gap: 8px; padding: 6px 10px; }
    .isa-topnav-who, .isa-topnav-tenant { display: none; }
}

/* The toggle itself, injected by admin-theme.js. Styled from the same variables
   so it belongs on every page without per-page CSS. */
.isa-theme-toggle {
    /* Pages style their own <button> elements — login.html makes them full
       width, for instance — and this one is injected into that page, so it has
       to state its own box rather than inherit a stranger's. */
    width: auto;
    margin: 0;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.isa-theme-toggle:hover {
    color: var(--text);
    border-color: var(--muted);
}
/* Pages with no header to slot into get it out of the way in a corner. */
.isa-theme-toggle.isa-floating {
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 2147483000;
    background: var(--panel);
}