/* ---------------------------------------------------------------------------
   Agency Caller - panel stylesheet

   No external dependencies: no CDN, remote fonts or framework. The panel's
   Content-Security-Policy restricts resources to 'self', and loading a remote
   framework would require relaxing it.

   Status colors are CSS variables so they match the values returned by the
   PHP status enums.
--------------------------------------------------------------------------- */

@font-face {
    font-family: "Share Tech Mono";
    src: url("../fonts/ShareTechMono-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Design tokens.
 *
 * --cp-* is the single source of truth: backgrounds by level, borders, the
 * lilac brand colour, text and semantic states. The short aliases at the end
 * (--bg, --surface, --border, --primary, ...) are what the component rules
 * below use; they point at the --cp-* tokens, so no colour is written twice.
 *
 * Background levels, from the page up:
 *   page (--cp-bg) < sidebar/header < card < elevated < hover
 * Each step is a small lightness increment: panels are told apart by tone
 * and by 1px dividers, not by shadows.
 *
 * Lilac is an accent (active nav item, primary buttons, links, focus). It is
 * never a page background and never a status colour; statuses use the
 * semantic tokens.
 *
 * Contrast: --cp-text and --cp-text-secondary exceed 4.5:1 (WCAG AA) over
 * every background level. --cp-text-muted is for placeholders and decorative
 * labels only. Operators read phone numbers here for hours.
 */
:root {
    --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-tech: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* Backgrounds, level 1 to 5 */
    --cp-bg: #09090F;
    --cp-sidebar: #0C0C13;
    --cp-header: #0B0B12;
    --cp-card: #111119;
    --cp-card-elevated: #15151F;
    --cp-card-hover: #1A1625;

    /* Borders and dividers */
    --cp-border: #24202F;
    --cp-border-strong: #30263D;
    --cp-border-active: #5B2A91;

    /* Lilac brand */
    --cp-primary: #A855F7;
    --cp-primary-light: #B96AFF;   /* hover, active icons */
    --cp-primary-dark: #6D28D9;    /* pressed */
    --cp-primary-bg: #24113D;      /* selected item background */
    --cp-primary-muted: #1E1033;

    /* Text */
    --cp-text: #F4F1FA;
    --cp-text-secondary: #A8A3B5;
    --cp-text-muted: #686477;

    /* Semantic states */
    --cp-success: #22C55E;
    --cp-danger: #EF4444;
    --cp-warning: #F59E0B;
    --cp-info: #38BDF8;

    /* Radii */
    --cp-radius-control: 8px;   /* inputs and buttons */
    --cp-radius-card: 10px;     /* cards, panels, modals */
    --cp-radius-badge: 6px;

    /*
     * Component aliases. Historical names kept so the rules below stay
     * unchanged; they only resolve to --cp-* tokens.
     */
    --bg: var(--cp-bg);
    --surface: var(--cp-card);
    --surface-alt: var(--cp-card-elevated);
    --border: var(--cp-border);
    --border-strong: var(--cp-border-strong);
    --input-bg: var(--cp-card);
    --text: var(--cp-text);
    --text-muted: var(--cp-text-secondary);

    --primary: var(--cp-primary);            /* fills */
    --primary-hover: var(--cp-primary-light);
    --primary-dark: var(--cp-primary);       /* text, links and icon accents */
    --focus: var(--cp-primary);

    /* Status aliases (colour names kept from the previous theme) */
    --green: var(--cp-success);
    --green-text: var(--cp-success);
    --teal: var(--cp-info);
    --orange: var(--cp-warning);
    --red: var(--cp-danger);
    --blue: var(--cp-info);
    --yellow: var(--cp-warning);
    --gray: var(--cp-text-secondary);
    --slate: var(--cp-text-secondary);

    /* Badge and alert backgrounds: the status colour at this opacity. */
    --tint: 10%;

    --radius: var(--cp-radius-control);
    --shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

* { box-sizing: border-box; }

/*
 * color-scheme makes native controls (date picker icon, <select> arrow,
 * system checkboxes) render with the browser's dark palette. Without it they
 * are drawn for a light background and nearly vanish over --input-bg.
 */
:root { color-scheme: dark; }

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
}

.skip-link {
    position: fixed; top: 10px; left: 10px; z-index: 1000;
    padding: 9px 13px; border-radius: 9px; background: #fff; color: #160f1c;
    font-weight: 700; transform: translateY(-160%); transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

a { color: var(--primary-dark); text-decoration: none; }
a:hover { color: var(--cp-primary-light); text-decoration: underline; }

h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0; font-weight: 600; }

/* --- Main layout and sidebar --------------------------------------------- */
.app-shell { min-height: 100vh; display: flex; }
.sidebar {
    width: 256px; height: 100vh; position: sticky; top: 0; flex: 0 0 256px;
    padding: 26px 16px 20px; display: flex; flex-direction: column;
    background: var(--cp-sidebar); border-right: 1px solid var(--cp-border);
}
.workspace { min-width: 0; min-height: 100vh; flex: 1; display: flex; flex-direction: column; }
.global-call-alert {
    position: fixed; z-index: 900; top: 18px;
    left: calc(256px + (100vw - 256px) / 2); transform: translateX(-50%);
    width: min(620px, calc(100vw - 296px));
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center; gap: 12px; padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--orange) 62%, transparent);
    border-radius: 14px; background: color-mix(in srgb, var(--orange) 14%, var(--cp-card-elevated));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .48);
}
.global-call-alert[hidden] { display: none; }
.global-call-alert.is-escalated { border-color: var(--red); }
.global-call-alert.is-muted { border-color: var(--border-strong); }
.global-call-alert-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: #111; }
.global-call-alert > div { display: grid; gap: 2px; }
.global-call-alert > div strong { font-size: 14px; }
.global-call-alert > div span { color: var(--text-muted); font-size: 11px; }
.global-call-alert-mute { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; }
.global-call-alert-mute svg { width: 16px; height: 16px; }
.global-call-alert-mute .is-off,
.global-call-alert-mute.is-muted .is-on { display: none; }
.global-call-alert-mute.is-muted .is-off { display: block; }
.global-call-alert-icon svg { width: 18px; height: 18px; }
.lq-alert-toggle svg { width: 15px; height: 15px; }
.lq-urgent-icon svg { width: 19px; height: 19px; }

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand strong, .brand small { display: block; }
.brand small { margin-top: 2px; color: var(--text-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark {
    display: block; width: 53px; height: 53px; flex: 0 0 auto;
    border-radius: 50%; object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--cp-primary) 55%, transparent);
    box-shadow: 0 4px 12px rgba(0,0,0,.24);
}

/*
 * A logo that already spells the name out: shown whole, no round crop and no
 * text beside it. Height bounded, width free, so a wide wordmark fits the
 * sidebar instead of being cut into a circle.
 */
.brand.is-logo-only .brand-mark {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 48px;
    border: 0;
    border-radius: 6px;
    object-fit: contain;
    box-shadow: none;
}
.auth-head.is-logo-only .auth-logo {
    width: auto;
    height: auto;
    max-width: 240px;
    margin: 0 auto 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    padding: 0;
}
.auth-head.is-logo-only .auth-logo img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72px;
    border-radius: 8px;
    object-fit: contain;
}

.nav { display: flex; flex-direction: column; gap: 4px; margin-top: 46px; }
.nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .01em;
}
.nav a:hover { background: var(--cp-card-hover); text-decoration: none; color: var(--text); }
.nav a.active {
    background: var(--cp-primary-bg);
    border-color: var(--cp-border-active);
    color: var(--cp-primary-light);
}
.nav-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.nav-toggle {
    display: none; align-items: center; gap: 7px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }
.sidebar.is-open .nav-toggle { border-color: var(--cp-border-active); color: var(--cp-primary-light); }
.nav-live-count { min-width: 22px; margin-left: auto; padding: 1px 6px; border-radius: 999px; background: var(--red); color: #fff; font-family: var(--font-tech); font-size: 11px; text-align: center; }

@media (max-width: 760px) {
    .global-call-alert { top: 10px; left: 10px; right: 10px; transform: none; width: auto; grid-template-columns: auto minmax(0, 1fr) auto; }
    .global-call-alert .btn { grid-column: 1 / 3; justify-content: center; }
    .global-call-alert-mute { grid-column: 3; grid-row: 2; }
}

/* Nav entry replaced by a "coming soon" notice: same shape as .nav a, but
   without link color or pointer cursor so it reads as inert, not broken. */
.nav-soon {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .01em;
    cursor: default;
}
.nav-soon > span { white-space: nowrap; }
.nav-soon small {
    margin-left: auto;
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sidebar-actions { margin-top: auto; display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--border); }
.sidebar-actions .btn { text-align: center; }
.user { color: var(--text-muted); font-size: 13px; }

.session-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
}
.session-dot {
    width: 9px; height: 9px; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--green-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-text) 25%, transparent);
}
.session-text { min-width: 0; line-height: 1.25; }
.session-text strong { display: block; font-size: 13px; color: var(--text); }
.session-text small { display: block; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-logout { margin: 0; }
.session-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 10px;
}
.session-logout-btn svg { width: 15px; height: 15px; }
.session-logout-btn:hover { color: var(--text); background: var(--surface-alt); }

.workspace-header {
    /* Level-2 background, one step above the page, like the sidebar. */
    background: var(--cp-header);

    /* Thin divider between header and content. */
    border-bottom: 1px solid var(--cp-border);
}

.top-bar {
    max-width: 1440px;
    margin: 0 auto;
    min-height: 64px;
    padding: 0 64px 0 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.top-bar-rule { height: 1px; background: var(--cp-border); }
/* Header chips (server clock, SIP state): flat, small, one border. */
.sip-status,
.server-clock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--cp-border);
    color: var(--cp-text-secondary);
    background: var(--cp-card);
}
.sip-status svg,
.server-clock svg { width: 14px; height: 14px; }
.server-clock time { font-variant-numeric: tabular-nums; color: var(--cp-text); }
.server-clock small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.sip-status-up   { color: var(--cp-success); border-color: color-mix(in srgb, var(--cp-success) 30%, var(--cp-border)); }
.sip-status-down { color: var(--cp-danger); border-color: color-mix(in srgb, var(--cp-danger) 30%, var(--cp-border)); }
.sip-status-up::before,
.sip-status-down::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sip-status svg { display: none; }

.user-menu { position: relative; }
.user-menu-checkbox { display: none; }
.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 6px;
    border-radius: 50%;
    border: 1px solid var(--cp-border-active);
    background: var(--cp-primary-bg);
    color: var(--cp-primary-light);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.user-avatar:hover { border-color: var(--cp-primary); }
/* Invisible layer that closes the menu when you click elsewhere. */
.user-menu-backdrop { display: none; position: fixed; inset: 0; z-index: 30; }
.user-menu-checkbox:checked ~ .user-menu-backdrop { display: block; }

.user-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 40;
    min-width: 224px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-card);
    background: var(--cp-card-elevated);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
    text-align: left;
}
.user-menu-checkbox:checked ~ .user-menu-dropdown { display: block; }

.user-menu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--cp-border);
}
.user-menu-avatar {
    display: grid; place-items: center;
    width: 32px; height: 32px; flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--cp-border-active);
    background: var(--cp-primary-bg);
    color: var(--cp-primary-light);
    font-size: 13px; font-weight: 600;
}
.user-menu-id { min-width: 0; line-height: 1.3; }
.user-menu-id strong { display: block; font-size: 13px; color: var(--cp-text); }
.user-menu-id small { display: block; font-size: 11px; color: var(--cp-text-secondary); }

.user-menu-dropdown form { margin: 0; }

/* Language row: one small button per language, the current one marked. */
.user-menu-section { padding: 10px 14px; border-bottom: 1px solid var(--cp-border); }
.user-menu-label {
    display: block; margin-bottom: 6px;
    color: var(--cp-text-muted); font-size: 10px;
    font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.user-menu-langs { display: flex; gap: 4px; }
.user-menu-lang {
    flex: 1;
    padding: 5px 0;
    border: 1px solid var(--cp-border);
    border-radius: 6px;
    background: var(--cp-card);
    color: var(--cp-text-secondary);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
}
.user-menu-lang:hover { background: var(--cp-card-hover); color: var(--cp-text); }
.user-menu-lang.is-current {
    border-color: var(--cp-border-active);
    background: var(--cp-primary-bg);
    color: var(--cp-primary-light);
}

.user-menu-item-body { display: grid; gap: 1px; line-height: 1.3; }
.user-menu-item-body small { color: var(--cp-text-muted); font-size: 11px; }
a.user-menu-item:hover { text-decoration: none; }
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: none;
    color: var(--cp-text-secondary);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.user-menu-item svg { width: 15px; height: 15px; flex: 0 0 auto; }
.user-menu-dropdown > .user-menu-item,
.user-menu-dropdown form:last-child .user-menu-item { border-top: 0; }
.user-menu-item:hover { background: var(--cp-card-hover); color: var(--cp-text); }
.user-menu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.summary-strip { max-width: 1440px; margin: 0 auto; padding: 24px 64px 4px 48px; }
.summary-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 15px; }
.summary-head h2 { margin-top: 3px; color: var(--text); font-size: 18px; }
.eyebrow { color: var(--cp-text-secondary); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.summary-stats { max-width: 620px; margin-bottom: 0; }
.summary-stats .stat { padding: 11px 13px; }
.summary-stats .stat-icon { width: 32px; height: 32px; border-radius: 9px; }
.summary-stats .stat-value { font-size: 20px; }
.summary-range-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* --- Connected agents ----------------------------------------------------- */

.agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.agent-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--cp-radius-card);
    padding: 20px 16px;
    text-align: center;
    box-shadow: none;
}
.agent-avatar {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cp-primary-dark), var(--cp-primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}
.agent-name { font-weight: 600; margin-bottom: 2px; }
.agent-status-pill {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.agent-status-ready   { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }
.agent-status-paused  { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
.agent-status-offline { background: color-mix(in srgb, var(--gray) var(--tint), transparent); color: var(--gray); }
.agent-actions { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }

.summary-range-form select, .summary-range-form input[type="date"] {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 12px;
}

/* --- Container ----------------------------------------------------------- */

.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 64px 56px 48px; flex: 1 0 auto; }

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.page-head h1 { font-size: clamp(24px, 2vw, 28px); letter-spacing: -.025em; line-height: 1.2; }
.page-head h1 + .muted,
.page-head > div > .muted { margin: 5px 0 0; max-width: 720px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.mono { font-family: var(--font-tech); font-size: 13px; }
.num, .right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.inline { display: inline; }

/* --- Cards --------------------------------------------------------------- */

/*
 * Text placed directly inside a card, with no .form or .card-head around it,
 * would sit against the border. These give it the same gutter as the rest.
 */
.card > p,
.card > ol,
.card > ul,
.card > pre { margin: 14px 20px; }
.card > ol,
.card > ul { padding-left: 20px; }
.card > p:first-child,
.card > ol:first-child,
.card > ul:first-child { margin-top: 18px; }
.card > p:last-child,
.card > ol:last-child,
.card > ul:last-child { margin-bottom: 18px; }
.card > form:not(.form) > .field,
.card > form:not(.form) > .form-actions { margin-left: 20px; margin-right: 20px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--cp-radius-card);
    box-shadow: none;
    margin-bottom: 20px;
    overflow: hidden;
}

.card-head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.card-head h2 { font-size: 16px; letter-spacing: 0; }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* --- Stats --------------------------------------------------------------- */

/*
 * Figure boxes sit in ONE bordered block, separated by 1px lines, instead of
 * a row of individual cards. Each box draws a hairline on its top and left
 * edge (box-shadow); the block's overflow:hidden clips the ones on the outer
 * edge, so only the inner dividers remain, whatever the number of columns.
 */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    margin-bottom: 20px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-card);
    background: var(--cp-card);
    overflow: hidden;
}
.stats-secondary { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/*
 * Figure box: icon on the left, large value, label and description.
 * Every box is neutral: the value in the main text colour, the icon in the
 * secondary colour. The stat-<colour> classes from the views are kept for
 * markup compatibility but no longer tint anything; status colours belong
 * to badges and alerts, not to figures.
 */
.stat {
    --stat-color: var(--cp-text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: -1px -1px 0 0 var(--cp-border);
}
/* Figure boxes are informative, not interactive: no hover effect. */
.dashboard-stats { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.worker-status {
    display: flex; align-items: center; gap: 10px; margin: -6px 0 16px; padding: 0 2px;
}
.worker-status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.worker-status > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.worker-status strong { font-size: 13px; }
.worker-status span { color: var(--text-muted); font-size: 12px; }
.worker-status-up .worker-status-dot { background: var(--cp-success); }
.worker-status-down .worker-status-dot { background: var(--cp-danger); }
.stat-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--cp-radius-control);
    display: grid;
    place-items: center;
    background: var(--cp-card-elevated);
    color: var(--cp-text-secondary);
}
.stat-icon svg { width: 18px; height: 18px; }
.stat-body { min-width: 0; }
.stat-value { display: block; font-family: var(--font-tech); font-size: 24px; font-weight: 400; line-height: 1.1; color: var(--cp-text); }
.stat-label { display: block; color: var(--text); font-size: 12px; font-weight: 600; margin-top: 3px; }
/* Descriptions are kept in the markup for screen readers but not shown: one figure, one label. */
.stat-desc { display: none; }
.stat-sm .stat-value { font-size: 22px; }

.stat-total, .stat-green, .stat-teal, .stat-orange,
.stat-red, .stat-blue, .stat-slate { --stat-color: var(--cp-text-secondary); }

/* Live figures: one line under the day's cards. They change by the minute,
   so they get a line rather than four more boxes. */
.live-line {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    margin: -8px 0 20px; padding: 0 2px;
    color: var(--cp-text-secondary); font-size: 13px;
}
.live-line-item { display: inline-flex; align-items: center; gap: 7px; }
.live-line-item strong { color: var(--cp-text); font-weight: 600; }
.live-line-note { color: var(--cp-warning); }

/* --- Tables -------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; }
.table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--cp-sidebar);
    white-space: nowrap;
}
.table th.num { text-align: right; }
.table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--cp-card-hover); }

.table-scroll { overflow-x: auto; }

.empty { padding: 42px 20px; text-align: center; color: var(--text-muted); }
.empty strong, .empty span { display: block; }
.empty strong { color: var(--text); font-weight: 600; }
.empty span { margin-top: 3px; font-size: 12px; }
.empty-compact { padding: 34px 18px; }
.empty-state {
    display: grid; justify-items: center; gap: 7px; padding: 56px 24px;
    color: var(--text-muted); text-align: center;
}
.empty-state strong { color: var(--text); font-size: 16px; }
.empty-state > span:not(.empty-state-icon) { max-width: 460px; }
.empty-state .btn { margin-top: 9px; }
.empty-state-icon {
    display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 3px;
    border: 1px solid var(--border); border-radius: var(--radius); color: var(--primary-dark); background: var(--surface-alt);
}
.empty-state-icon svg { width: 19px; height: 19px; }

.note-mark { color: var(--text-muted); cursor: help; margin-left: 4px; }

.key {
    display: inline-block;
    min-width: 22px;
    padding: 1px 6px;

    /*
     * Physical key look: panel color with a strong border, as keys appear in
     * dark interfaces.
     */
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    font-family: var(--font-tech);
}

/* --- Status badges ------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--cp-radius-badge);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.badge-gray { background: color-mix(in srgb, var(--gray) var(--tint), transparent); color: var(--gray); }
.badge-blue { background: color-mix(in srgb, var(--blue) var(--tint), transparent); color: var(--blue); }
.badge-green { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }
.badge-teal { background: color-mix(in srgb, var(--teal) var(--tint), transparent); color: var(--teal); }
.badge-orange { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
.badge-red { background: color-mix(in srgb, var(--red) var(--tint), transparent); color: var(--red); }
.badge-slate { background: color-mix(in srgb, var(--slate) var(--tint), transparent); color: var(--slate); }

.badge-outcome-confirmed { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }
.badge-outcome-rescheduled { background: color-mix(in srgb, var(--teal) var(--tint), transparent); color: var(--teal); }
.badge-outcome-no_response { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
.badge-outcome-error { background: color-mix(in srgb, var(--red) var(--tint), transparent); color: var(--red); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}
.btn { transition: background .12s ease, border-color .12s ease; }
.btn:hover { background: var(--cp-card-hover); border-color: var(--border-strong); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 12px; }

.btn-primary { background: var(--primary); border-color: var(--primary); color: #ffffff; }
.btn-primary { box-shadow: none; }
.btn-primary:hover { background: var(--cp-primary-light); border-color: var(--cp-primary-light); }
.btn-primary:active { background: var(--cp-primary-dark); border-color: var(--cp-primary-dark); }

.btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--red) var(--tint), transparent); }
.btn-success { color: #07110a; background: var(--green-text); border-color: var(--green-text); }
.btn-success:hover { color: #07110a; background: color-mix(in srgb, var(--green-text) 88%, white); border-color: var(--green-text); }
.btn-warning { color: #181303; background: var(--yellow); border-color: var(--yellow); }
.btn-warning:hover { color: #181303; background: color-mix(in srgb, var(--yellow) 88%, white); border-color: var(--yellow); }

.btn-ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--cp-card-hover); color: var(--text); }

/* --- Forms --------------------------------------------------------------- */

.form { padding: 20px; }

.field { margin-bottom: 18px; }
.field label {
    display: block;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 6px;
}
.req { color: var(--red); }

.field input[type="text"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field input[type="password"],
.field input[type="datetime-local"],
.field select,
.field textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    background: var(--input-bg);
    color: var(--text);
}
.field textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--cp-text-muted); }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 18%, transparent);
}
.field .has-error { border-color: var(--red); }

.field-hint { display: block; color: var(--text-muted); font-size: 12px; margin-top: 5px; }
.field-hint code {
    background: var(--bg);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}
.field-error { display: block; color: var(--red); font-size: 12px; margin-top: 5px; }

.form-actions {
    display: flex;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 18px;
}

.filters {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 16px;
}
.filters.card { box-shadow: none; }
.filters .field { margin-bottom: 0; flex: 1; min-width: 140px; }
.field-actions { display: flex; gap: 8px; flex: 0 0 auto !important; }

/* --- Dial pad -------------------------------------------------------------
   Used by quick call and the softphone: a large input, a grid of clickable
   keys and a call button that turns green once there is input. ---------- */

.field[data-dialpad] {
    max-width: 420px;
}

.dialpad-input {
    width: 100%;
    padding: 16px 14px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--input-bg);
    color: var(--text);
    font-family: var(--font-tech);
}
.dialpad-input::placeholder { color: var(--cp-text-muted); font-weight: 400; }
.dialpad-input:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 18%, transparent);
}

.dialpad-keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.dialpad-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 14px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    color: var(--text);
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    font-family: var(--font-tech);
}
.dialpad-key:hover { background: var(--cp-card-hover); }
.dialpad-key:active { background: var(--border); }
.dialpad-key small {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--text-muted);
}
.dialpad-key-accent { color: var(--primary-dark); }

.dialpad-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.dialpad-call svg { width: 16px; height: 16px; fill: currentColor; }
/* Without a number the button waits for one; it must not look switched off. */
.sp-dialer .dialpad-call:not(.has-digits):not(:disabled) {
    border-color: var(--cp-border-active);
    color: var(--text);
}
.dialpad-call.has-digits {
    background: var(--green-text);
    border-color: var(--green-text);
    color: #0b0f0c;
}
.dialpad-call.has-digits:hover { filter: brightness(1.08); }
.dialpad-call:disabled {
    background: var(--surface-alt) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
    opacity: .6;
    cursor: not-allowed;
}

/* --- Softphone (two columns) ---------------------------------------------- */

[hidden] { display: none !important; }

.sp-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 18px; align-items: stretch; }
.sp-layout > .card { margin-bottom: 0; }
.sp-panel { display: flex; flex-direction: column; }
.sp-panel .sp-tab-panel.is-active { flex: 1 1 auto; }
.sp-dialer { padding: 18px; }
.sp-dialer .field[data-dialpad] { max-width: none; margin-bottom: 0; }

.sp-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.sp-status-line {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 12px; font-size: 12px; color: var(--cp-text-secondary);
}
.sp-status-dot {
    width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%;
    background: var(--cp-text-secondary);
}
.sp-status-line.is-ok { color: var(--cp-success); }
.sp-status-line.is-ok .sp-status-dot { background: var(--cp-success); }
.sp-status-line.is-bad { color: var(--cp-danger); }
.sp-status-line.is-bad .sp-status-dot { background: var(--cp-danger); }

.sp-number-field { position: relative; }
.sp-number-hint { margin: 6px 2px 12px; font-size: 11px; color: var(--text-muted); text-align: center; }
.sp-mic-status {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: -6px 0 12px 14px; font-size: 12px; color: var(--cp-text-secondary);
}
.sp-mic-status.is-ok { color: var(--cp-success); }
.sp-mic-status.is-bad { color: var(--cp-danger); }
.sp-number-input { padding-right: 44px; padding-left: 44px; }
.sp-backspace {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    padding: 4px;
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
}
.sp-backspace svg { width: 20px; height: 20px; }
.sp-backspace:hover { color: var(--text); }

.dialpad-call.is-hangup,
.dialpad-call.is-hangup:hover { background: var(--cp-danger); border-color: var(--cp-danger); color: #fff; }

.sp-audio { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; }
.sp-audio-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.sp-audio-name { font-size: 12px; font-weight: 600; }
.sp-device {
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 12px;
}
.sp-meter { grid-column: 2 / 4; height: 5px; border-radius: 3px; background: var(--surface-alt); overflow: hidden; }
.sp-meter span { display: block; height: 100%; width: 0; background: var(--green-text); transition: width .08s linear; }

.sp-panel { padding: 0; overflow: hidden; }
.sp-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.sp-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.sp-tab.is-active { background: var(--surface); color: var(--primary-dark); border-bottom-color: var(--primary); }
.sp-count {
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 700;
}
.sp-tab-panel { display: none; padding: 14px; }
.sp-tab-panel.is-active { display: block; }

.sp-search {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 13px;
    margin-bottom: 8px;
}
.sp-recent { list-style: none; margin: 0; padding: 0; }
.sp-recent li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 11px 6px;
    border-bottom: 1px solid var(--border);
}
.sp-recent li:last-child { border-bottom: 0; }
.sp-recent-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.sp-recent-icon svg { width: 18px; height: 18px; }
.sp-ic-green  { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }
.sp-ic-red    { background: color-mix(in srgb, var(--red) var(--tint), transparent); color: var(--red); }
.sp-ic-orange { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
.sp-ic-gray   { background: color-mix(in srgb, var(--gray) var(--tint), transparent); color: var(--gray); }
.sp-recent-number { font-weight: 600; }
.sp-recent-reason { font-size: 12px; color: var(--red); }
.sp-recent-meta { font-size: 12px; color: var(--text-muted); }
.sp-recent-result { font-size: 12px; font-weight: 700; white-space: nowrap; }
.sp-res-green { color: var(--green-text); }
.sp-res-red { color: var(--red); }
.sp-res-orange { color: var(--orange); }
.sp-res-gray { color: var(--gray); }
.sp-callback {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--green-text) 40%, transparent);
    background: color-mix(in srgb, var(--green-text) var(--tint), transparent);
    color: var(--green-text);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.sp-callback svg { width: 15px; height: 15px; }

.sp-live-hero {
    text-align: center;
    padding: 22px 16px;
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
    border-radius: 14px;
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%);
}
.sp-live-pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sp-live-pill.is-answered { background: var(--green-text); color: #0b0f0c; }
.sp-live-phone {
    width: 64px;
    height: 64px;
    margin: 14px auto 12px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 18%, transparent);
}
.sp-live-phone svg { width: 26px; height: 26px; }
.sp-live-number { font-family: var(--font-tech); font-size: 22px; font-weight: 400; letter-spacing: .02em; }
.sp-live-state { margin-top: 4px; color: var(--primary-dark); font-weight: 600; }
.sp-live-meta { margin-top: 4px; font-family: var(--font-tech); font-size: 12px; color: var(--text-muted); }

.sp-dtmf {
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
    border-radius: 12px;
}
.sp-dtmf-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.sp-dtmf-actions { margin-left: auto; display: flex; gap: 6px; }
.sp-live-tag { padding: 1px 8px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 10px; }
.sp-dtmf-log {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input-bg);
    font-family: var(--font-tech);
    font-size: 18px;
    letter-spacing: .15em;
    word-break: break-all;
}
.sp-dtmf-log .muted { font-family: inherit; font-size: 13px; letter-spacing: 0; }
/* Keys received: the one thing the agent is waiting for, so it stands out. */
.sp-dtmf-log.has-keys {
    border-color: var(--cp-primary);
    color: var(--cp-primary-light);
    font-size: 26px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 18%, transparent);
}
.sp-dtmf-toggle {
    width: 100%;
    margin-top: 8px;
    padding: 9px;
    border: 0;
    border-radius: 8px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
}
.sp-dtmf-toggle.is-on { background: var(--primary); color: #fff; }

.sp-live-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.sp-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
.sp-control-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); display: grid; place-items: center; color: var(--text); }
.sp-control-icon svg { width: 18px; height: 18px; }
.sp-control.is-on { border-color: var(--primary); color: var(--primary-dark); }
.sp-control.is-on .sp-control-icon { color: var(--primary-dark); }

.sp-inline-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.sp-inline-pad button {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-alt);
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.sp-inline-pad button:hover { background: var(--cp-card-hover); }

.sp-hangup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--cp-danger);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.sp-hangup svg { width: 18px; height: 18px; }
.sp-hangup:hover { filter: brightness(1.08); }

@media (max-width: 960px) {
    .sp-layout { grid-template-columns: 1fr; }
}

/* --- Campaign report ------------------------------------------------------ */

.report-head h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.report-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--green-text) var(--tint), transparent);
    color: var(--green-text);
}
.report-check svg { width: 16px; height: 16px; }
.report-pill {
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}
.report-pill-green {
    border-color: color-mix(in srgb, var(--green-text) 40%, transparent);
    background: color-mix(in srgb, var(--green-text) var(--tint), transparent);
    color: var(--green-text);
}
.report-country { width: 1%; }
.country-code {
    display: inline-block; min-width: 26px; padding: 2px 6px;
    border: 1px solid var(--cp-border); border-radius: 4px;
    background: var(--cp-card-elevated); color: var(--cp-text-secondary);
    font-family: var(--font-tech); font-size: 11px; letter-spacing: .04em;
    text-align: center;
}
.td-sub { font-size: 11px; margin-top: 2px; }

/* --- Live call queue ------------------------------------------------------ */

.lq-system {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.lq-system .lq-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.lq-system.is-up { color: var(--green-text); border-color: color-mix(in srgb, var(--green-text) 40%, transparent); }
.lq-system.is-up .lq-dot { background: var(--green-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-text) 22%, transparent); }
.lq-system.is-down { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.lq-system.is-down .lq-dot { background: var(--red); }
/* Still connecting: neutral, so the first seconds do not look like a fault. */
.lq-system.is-connecting { color: var(--cp-text-secondary); border-color: var(--cp-border); }
.lq-system.is-connecting .lq-dot { background: var(--cp-text-secondary); animation: lq-dot-pulse 1.4s ease-in-out infinite; }
@keyframes lq-dot-pulse { 50% { opacity: .35; } }

/* The agent's own extension, next to the state indicator. */
.lq-ext {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border: 1px solid var(--cp-border); border-radius: 6px;
    background: var(--cp-card); color: var(--cp-text-secondary);
    font-size: 11px; white-space: nowrap;
}
.lq-ext strong { color: var(--cp-text); font-weight: 400; }
.lq-ext .lq-audio-state:not(:empty) { margin-left: 4px; }
.lq-ext-note { display: none; }
.lq-system-wrap { display: grid; justify-items: end; gap: 4px; }
.lq-updated { color: var(--text-muted); font-size: 11px; }
.lq-updated.is-stale { color: var(--red); }

.lq-alert-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.lq-alert-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.lq-alert-toggle.is-enabled {
    border-color: color-mix(in srgb, var(--green-text) 45%, transparent);
    color: var(--green-text);
}
.lq-alert-toolbar .muted { font-size: 12px; }
.lq-urgent {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--orange) 13%, var(--surface));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--orange) 8%, transparent), 0 12px 28px rgba(0, 0, 0, .18);
}
.lq-urgent:not([hidden]) { display: grid; }
.lq-urgent.is-escalated {
    border-color: color-mix(in srgb, var(--red) 65%, transparent);
    animation: lq-alert-pulse 1.8s ease-in-out infinite;
}
.lq-urgent-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--orange);
    color: #111;
    font-size: 19px;
}
.lq-urgent-copy { display: grid; gap: 3px; }
.lq-urgent-copy strong { font-size: 15px; }
.lq-urgent-copy span { color: var(--text-muted); font-size: 12px; }
@keyframes lq-alert-pulse {
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 13%, transparent), 0 12px 28px rgba(0, 0, 0, .18); }
}

.lq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.lq-col { padding: 0; overflow: hidden; }
.lq-col-head { padding: 16px 18px; }
.lq-col-head h2 { display: flex; align-items: center; gap: 8px; }
.lq-col-head h2 svg { width: 17px; height: 17px; color: var(--primary-dark); }
.lq-pill { padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.lq-pill-wait { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
.lq-pill-live { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }

.lq-list { list-style: none; margin: 0; padding: 0; }
.lq-list li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
}
.lq-item-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.lq-item-icon svg { width: 18px; height: 18px; }
.lq-ic-wait { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
.lq-ic-live { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }
.lq-item-number { font-family: var(--font-tech); font-weight: 400; }
.lq-item-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.lq-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}
.lq-btn svg { width: 15px; height: 15px; }
.lq-btn:disabled { opacity: .55; cursor: not-allowed; }
.lq-btn-answer { background: var(--green-text); color: #0b0f0c; }
.lq-btn-answer:hover:not(:disabled) { filter: brightness(1.08); }
.lq-btn-hangup { background: var(--cp-danger); }
.lq-btn-hangup:hover:not(:disabled) { filter: brightness(1.08); }
.lq-ext-note { margin-top: 16px; font-size: 12px; }
.lq-audio-state { font-variant-numeric: tabular-nums; }
.lq-audio-state.is-bad { color: var(--cp-danger); font-weight: 600; }

@media (max-width: 860px) {
    .lq-grid { grid-template-columns: 1fr; }
    .lq-alert-toolbar { align-items: flex-start; flex-direction: column; }
    .lq-urgent { grid-template-columns: auto minmax(0, 1fr); }
    .lq-urgent .lq-btn { grid-column: 1 / -1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .lq-urgent.is-escalated { animation: none; }
}

/* --- Agent cards (softphone) ---------------------------------------------- */

.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ag-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--cp-radius-card);
    padding: 16px;
    box-shadow: none;
}
.ag-card-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.ag-avatar {
    width: 46px; height: 46px; flex: 0 0 auto;
    border-radius: var(--cp-radius-control);
    display: grid; place-items: center;
    border: 1px solid var(--cp-border-active);
    background: var(--cp-primary-bg);
    color: var(--cp-primary-light); font-weight: 600; font-size: 15px;
}
.ag-id { min-width: 0; flex: 1; }
.ag-name { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sub { font-size: 12px; color: var(--text-muted); }
.ag-status {
    padding: 4px 10px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap;
}
.ag-status.ag-ok   { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }
.ag-status.ag-warn { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
/* Offline is a normal state, not an error: neutral, never red. */
.ag-status.ag-off  { background: var(--surface-alt); color: var(--text-muted); }

.ag-rows { margin: 4px 0 0; }
.ag-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.ag-row:last-child { border-bottom: 0; }
.ag-row dt { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cp-text-secondary); }
.ag-row dt svg { width: 14px; height: 14px; }
.ag-row dd { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.ag-val { font-weight: 400; font-family: var(--font-tech); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-secret { letter-spacing: .1em; }
.ag-ext-tag { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); }
.ag-icon-btn {
    margin-left: auto; flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    border: 1px solid var(--border); background: var(--surface-alt);
    color: var(--text-muted); cursor: pointer;
}
.ag-icon-btn svg { width: 14px; height: 14px; }
.ag-icon-btn:hover { color: var(--text); }
.ag-icon-btn.is-copied { color: var(--green-text); border-color: color-mix(in srgb, var(--green-text) 45%, transparent); }

.ag-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.ag-stats { margin-bottom: 20px; }
.ag-text { font-size: 13px; color: var(--text); }
.ag-note {
    margin: 10px 0 0; padding: 9px 11px; font-size: 12px; line-height: 1.45;
    border-radius: var(--cp-radius-control);
    background: var(--surface-alt); color: var(--text-muted);
}
.ag-pause-form { flex: 0 0 auto; }
.ag-pause { display: inline-flex; align-items: center; gap: 6px; }
.ag-pause svg { width: 14px; height: 14px; }

/* "Add agent" as the last card of the grid: dashed outline, soft glow, the
   plus in a ring. Stretches to the height of the agent cards in its row. */
.ag-add {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; min-height: 300px; padding: 24px;
    border: 1px dashed var(--cp-border-active);
    border-radius: var(--cp-radius-card);
    background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cp-primary) 16%, transparent), transparent 55%);
    color: var(--text); text-align: center; text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.ag-add:hover, .ag-add:focus-visible {
    border-style: solid; border-color: var(--cp-primary);
    background-color: color-mix(in srgb, var(--cp-primary) 5%, transparent);
    color: var(--text); text-decoration: none;
}
.ag-add-plus {
    width: 52px; height: 52px; margin-bottom: 8px;
    display: grid; place-items: center; border-radius: 50%;
    border: 1px solid var(--cp-border-active);
    background: var(--surface); color: var(--cp-primary-light);
    transition: background-color .15s ease, color .15s ease;
}
.ag-add-plus svg { width: 22px; height: 22px; }
.ag-add:hover .ag-add-plus, .ag-add:focus-visible .ag-add-plus { background: var(--cp-primary); color: #fff; border-color: var(--cp-primary); }
.ag-add-title { font-weight: 700; font-size: 16px; }
.ag-add-sub { font-size: 13px; color: var(--text-muted); max-width: 220px; }
@media (max-width: 640px) {
    .ag-add { min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
    .ag-add, .ag-add-plus { transition: none; }
}
.ag-edit { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ag-edit svg { width: 15px; height: 15px; }

.agency-admin-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.agency-admin-fieldset legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--primary-dark); }
.agency-admin-fieldset .field:last-child { margin-bottom: 0; }

/* SIP mode: visible radios plus a block revealed when "own SIP" is chosen,
   without JavaScript (same sibling technique as the campaign IVR block). */
.sip-mode-field .sip-mode-radio { margin-right: 6px; accent-color: var(--primary-dark); }
.sip-mode-option { margin-right: 16px; font-size: 14px; cursor: pointer; }
.sip-reveal {
    display: none;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--primary-dark) 40%, var(--border));
    border-radius: var(--radius);
}
.sip-reveal legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--primary-dark); }
.sip-reveal .field:last-child { margin-bottom: 0; }
.sip-mode-radio-own:checked ~ .sip-reveal { display: block; }

.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form input[type="date"] {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
}

/* --- Alerts -------------------------------------------------------------- */

.alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 14px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    border: 1px solid;
    font-size: 13px;
}
.alert-icon { font-weight: 700; line-height: 1.4; flex: 0 0 auto; }

/*
 * .alert is a flex container, so every direct child (including loose text
 * between inline elements) becomes its own flex item. The icon is one child
 * (.alert-icon); the whole message must be wrapped in this single second
 * child so it flows as one block.
 */
.alert-body,
.alert > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* Link list inside an alert: one per line instead of run-on text. */
.alert-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}
.alert-list-item { white-space: nowrap; }
.alert { background: var(--cp-card); border-color: var(--cp-border); color: var(--cp-text); }
.alert .alert-icon { width: 18px; text-align: center; }
.alert-success .alert-icon { color: var(--cp-success); }
.alert-error .alert-icon { color: var(--cp-danger); }
.alert-warning .alert-icon { color: var(--cp-warning); }
.alert-info .alert-icon { color: var(--cp-info); }
.alert-error { border-left: 3px solid var(--cp-danger); }
.alert-warning { border-left: 3px solid var(--cp-warning); }
.alert-success { border-left: 3px solid var(--cp-success); }
.alert-info { border-left: 3px solid var(--cp-info); }

/* Action button inside an alert (telephony banner): pinned right, aligned
   with the text rather than the icon. */
.alert-action { flex: 0 0 auto; margin: -2px 0 -2px auto; }
.alert-action .btn { white-space: nowrap; }

/* --- Telephony connection ------------------------------------------------- */

.telephony-state { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; }
.telephony-state .status-dot { margin-top: 5px; }
.telephony-state .muted { display: block; font-size: 13px; }
.telephony-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.telephony-actions form { margin: 0; }
.telephony-detail { margin-bottom: 20px; }
.telephony-detail .ivr-title { margin-top: 18px; }
.telephony-detail .field { margin-top: 12px; }

.brand-row { display: flex; align-items: flex-start; gap: 18px; }
.brand-preview {
    flex: 0 0 auto;
    border: 1px solid var(--cp-border-strong);
    border-radius: 50%;
    background: var(--cp-card-elevated);
    object-fit: cover;
}
.brand-fields { flex: 1; min-width: 0; }
.brand-fields .field:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
    .brand-row { flex-direction: column; }
}

/* --- First run ------------------------------------------------------------ */

.setup-steps { margin-bottom: 20px; }
.setup-list { list-style: none; margin: 0; padding: 0; }
.setup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--cp-border);
}
.setup-item:last-child { border-bottom: 0; }
.setup-number {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border: 1px solid var(--cp-border);
    border-radius: 50%;
    background: var(--cp-card-elevated);
    color: var(--cp-text-secondary);
    font-family: var(--font-tech);
    font-size: 12px;
}
.setup-item.is-done .setup-number {
    border-color: var(--cp-success);
    background: color-mix(in srgb, var(--cp-success) 18%, transparent);
    color: var(--cp-success);
}
.setup-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.setup-body strong { font-size: 14px; }
.setup-body span { color: var(--cp-text-secondary); font-size: 12px; }
.setup-item.is-done .setup-body strong { color: var(--cp-text-secondary); font-weight: 500; }

@media (max-width: 620px) {
    .setup-item { flex-wrap: wrap; }
    .setup-item .btn { width: 100%; text-align: center; }
}

/* --- Reports -------------------------------------------------------------- */

.report-period { flex: 1 0 100%; margin: 4px 0 0; color: var(--cp-text-secondary); font-size: 12px; }
.report-period strong { color: var(--cp-text); font-weight: 600; }

.report-list { list-style: none; margin: 0; padding: 0; }
.report-list > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cp-border);
}
.report-list > li:last-child { border-bottom: 0; }
.report-list > li > div { display: grid; gap: 2px; min-width: 0; }
.report-list strong { font-size: 14px; }
.report-list span { color: var(--cp-text-secondary); font-size: 12px; }
.report-inline { display: flex; align-items: center; gap: 8px; margin: 0; }
.report-inline select {
    /* Outside a .field, so it needs the panel's own field styling. */
    max-width: 220px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-control);
    background: var(--cp-card-elevated);
    color: var(--cp-text);
    font-family: inherit;
    font-size: 13px;
}
.report-inline select:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 18%, transparent);
}

@media (max-width: 720px) {
    .report-list > li { flex-direction: column; align-items: flex-start; }
    .report-inline { width: 100%; }
    .report-inline select { flex: 1; max-width: none; }
}

/* --- Detail -------------------------------------------------------------- */

.detail { margin: 0; padding: 18px; display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; }
.detail dt { color: var(--text-muted); font-size: 13px; }
.detail dd { margin: 0; }

/* --- Timeline ------------------------------------------------------------ */

.timeline { list-style: none; margin: 0; padding: 18px; }
.timeline li {
    display: flex;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.timeline li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.timeline-time { color: var(--text-muted); font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.timeline-body { flex: 1; }
.timeline-meta { color: var(--text-muted); font-size: 12px; margin-top: 3px; }

/* --- Outcome bars -------------------------------------------------------- */

.bars { padding: 18px; }
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-label { flex: 0 0 130px; font-size: 13px; }
.bar-track { flex: 1; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; }
.bar-value { flex: 0 0 90px; text-align: right; font-size: 13px; }

.bar-confirmed   { background: var(--green); }
.bar-rescheduled { background: var(--teal); }
.bar-no_response { background: var(--orange); }
.bar-error       { background: var(--red); }

/* --- Pagination ---------------------------------------------------------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 0 18px;
}
.pagination .muted { margin-right: 6px; }
.pagination-pages { display: inline-flex; align-items: center; gap: 4px; }
.pagination-page {
    display: grid; place-items: center;
    min-width: 32px; height: 32px; padding: 0 8px;
    border: 1px solid var(--cp-border); border-radius: 6px;
    background: var(--cp-card); color: var(--cp-text-secondary);
    font-size: 13px; text-decoration: none;
}
.pagination-page:hover { background: var(--cp-card-hover); color: var(--cp-text); text-decoration: none; }
.pagination-page.is-current {
    border-color: var(--cp-border-active);
    background: var(--cp-primary-bg);
    color: var(--cp-primary-light);
    font-weight: 600;
}
.pagination-gap { padding: 0 2px; color: var(--cp-text-muted); }

.back { margin-top: 8px; }

/* --- Error page ---------------------------------------------------------- */

.error-page { text-align: center; padding: 64px 20px; max-width: 640px; margin: 0 auto; }
.error-code { font-size: 56px; font-weight: 700; color: var(--border); line-height: 1; }
.error-message { color: var(--text-muted); margin-bottom: 24px; }
.error-actions { display: flex; gap: 10px; justify-content: center; }
.error-detail {
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 20px 0;
    overflow: hidden;
}
.error-detail-head {
    padding: 8px 14px;
    background: color-mix(in srgb, var(--yellow) var(--tint), transparent);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--yellow);
}
.error-detail pre {
    margin: 0;
    padding: 14px;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.5;
}

/* --- Footer -------------------------------------------------------------- */

.footer {
    /* Same level as the sidebar and header. */
    background: var(--cp-sidebar);
    border-top: 1px solid var(--cp-border);
}
.footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 64px 32px 48px;
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 720px) {
    .app-shell { display: block; }
    .sidebar {
        width: 100%; height: auto; position: sticky; top: 0; z-index: 40;
        padding: 10px 12px 8px; border-right: 0; border-bottom: 1px solid var(--border);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    }
    .brand { gap: 9px; }
    .brand-mark { width: 36px; height: 36px; }
    .brand small { display: none; }
    /* The menu folds behind a button: a scrolling strip only ever showed
       three entries and hid the rest. */
    .sidebar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .nav-toggle { display: inline-flex; }
    .nav { display: none; width: 100%; margin-top: 10px; gap: 2px; }
    .nav a { padding: 11px 12px; font-size: 14px; }
    .sidebar.is-open .nav { display: flex; }
    .sidebar-actions { display: none; width: 100%; }
    .sidebar.is-open .sidebar-actions { display: grid; }
    .workspace { min-height: auto; }
    .top-bar { padding: 10px 16px 0; }
    .summary-strip { padding: 16px 16px 4px; }
    .summary-stats { max-width: none; }
    .summary-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .summary-head h2 { font-size: 16px; }
    .summary-range-form { width: 100%; }
    .summary-range-form select { flex: 1; }
    .container { padding: 22px 16px 40px; }
    .page-head { margin-bottom: 16px; }
    .page-head .actions { width: 100%; }
    .page-head .actions .btn { flex: 1 1 auto; text-align: center; }
    .dashboard-stats { grid-template-columns: 1fr 1fr; }
    .stats { gap: 9px; }
    .stat { padding: 12px; }
    .stat-icon { width: 32px; height: 32px; }
    .stat-value { font-size: 21px; }
    .filters { align-items: stretch; }
    .filters .field { flex: 1 1 calc(50% - 8px); }
    .filters .field-actions { flex: 1 0 100% !important; }
    .filters .field-actions .btn { flex: 1; text-align: center; }
    .detail { grid-template-columns: 1fr; gap: 3px; }
    .detail dd { margin-bottom: 10px; }
    .bar-row { flex-wrap: wrap; }
    .bar-label { flex: 1 1 auto; }
    .bar-track { flex: 1 0 100%; order: 3; }
    .footer-inner { padding: 18px 16px 28px; }
}

@media (max-width: 480px) {
    .dashboard-stats,
    .summary-stats { grid-template-columns: 1fr 1fr; }
    .summary-stats .stat { gap: 8px; }
    .summary-stats .stat-icon { display: none; }
    .filters .field { flex-basis: 100%; }
    .page-head > form.inline-form { width: 100%; display: flex; gap: 8px; }
    .page-head > form.inline-form input { flex: 1; min-width: 0; }
}

/* --- Settings page ------------------------------------------------------- */

/*
 * .card-head lays children out horizontally (title plus button). This
 * variant stacks them for a title with a description underneath.
 */
.card-head-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.card-head-stack h2 { font-size: 15px; font-weight: 600; }
.card-head-stack p { margin: 0; }

/*
 * Checkbox label. .inline is display:inline and cannot align the box with
 * its text, hence a separate class.
 */
.check {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
    cursor: pointer;
    vertical-align: middle;
}
.check input[type="checkbox"], .check input[type="radio"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.check.small span { font-size: 12px; color: var(--text-muted); }
.check.small { margin-top: 8px !important; }

/* Stacked group of mutually exclusive options. */
.field-radio {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-weight: 400 !important;
    margin: 6px 0 !important;
    cursor: pointer;
}
.field-radio input[type="radio"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
    flex: 0 0 auto;
}

/* Checkbox group (allowed countries). */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

/* Read-only setting: shown, visibly not editable. */
.field input:disabled, .field select:disabled {
    background: var(--bg);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* --- Asterisk config preview --------------------------------------------- */

/*
 * .conf files have long lines and meaningful indentation. They scroll
 * horizontally instead of wrapping so the preview matches what will be
 * written to disk.
 */
pre.mono {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    color: var(--text);
    margin: 0;
}
.config-preview {
    max-height: 420px;
    overflow-y: auto;
}

/* --- Campaigns (bulk dialing) --------------------------------------------- */

/*
 * Everything below is CSS only. Contact tabs and the IVR block use hidden
 * radios/checkboxes with the general sibling combinator (~).
 */

.field-hint-eyebrow {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
    font-weight: 600;
    margin: 0 0 8px;
}

.type-hints { margin-top: 10px; display: grid; gap: 4px; }
.type-hints .field-hint { margin: 0; }
.type-hints strong { color: var(--text); }

/* Upload box: the real input covers the whole area, transparent, so click
   and drag-and-drop work without JavaScript. */
/*
 * The dropzone is a <label>, and `.field label` (two classes) would otherwise
 * beat `.dropzone` (one) and turn it back into a block: the icon then left
 * itself against the edge while the text stayed centred.
 */
.dropzone,
.field label.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 96px;
    padding: 18px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: center;
    cursor: pointer;
}
.dropzone:hover { border-color: var(--focus); background: var(--surface-alt); }
.dropzone.has-error { border-color: var(--red); }
.dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.dropzone-text { font-size: 13px; font-weight: 600; color: var(--text); }
.dropzone-meta { font-size: 12px; color: var(--text-muted); }
.dropzone-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 4px;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary-dark) 14%, transparent);
    color: var(--primary-dark);
}
.dropzone-icon svg { width: 20px; height: 20px; }
.dropzone-text, .dropzone-meta { display: block; }
.dropzone.is-dragover { border-style: solid; border-color: var(--focus); background: var(--surface-alt); }
.dropzone.has-file { border-style: solid; border-color: var(--primary-dark); }
.dropzone.has-file .dropzone-text { color: var(--primary-dark); word-break: break-all; }

/* Campaign form sections (new campaign modal). */
.campaign-form { padding: 0 !important; }
.form-section { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.form-section:last-of-type { border-bottom: 0; }
.form-section-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.form-section-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.form-section-head p { margin: 2px 0 0; font-size: 12px; }
.form-section-title,
.field-label-row { display: flex; align-items: center; gap: 7px; }
.field-label-row { justify-content: space-between; margin-bottom: 6px; }
.field-label-row > label,
.field-label-row > .field-label { margin: 0; }
.field-label { display: block; font-weight: 600; color: var(--text); }
.context-help { position: relative; z-index: 4; display: inline-flex; flex: 0 0 auto; }
.context-help[open] { z-index: 8; }
.context-help summary {
    width: 20px; height: 20px; display: grid; place-items: center;
    list-style: none; border: 1px solid var(--border-strong); border-radius: 50%;
    color: var(--text-muted); background: var(--surface-alt);
    font-size: 12px; font-weight: 700; line-height: 1; cursor: help; user-select: none;
}
.context-help summary::-webkit-details-marker { display: none; }
.context-help summary:hover,
.context-help summary:focus-visible,
.context-help[open] summary {
    color: #fff; border-color: var(--primary-dark); background: var(--primary); outline: none;
}
.context-help summary:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.context-help-popover {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    width: min(290px, calc(100vw - 52px)); padding: 11px 12px;
    border: 1px solid var(--border-strong); border-radius: 10px;
    background: var(--cp-card-elevated); box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
    color: var(--text-muted); font-size: 12px; font-weight: 400;
    line-height: 1.45; text-transform: none; letter-spacing: normal;
}
.context-help-popover::before {
    content: ""; position: absolute; top: -5px; right: 6px; width: 8px; height: 8px;
    transform: rotate(45deg); border-left: 1px solid var(--border-strong);
    border-top: 1px solid var(--border-strong); background: var(--cp-card-elevated);
}

/* A help icon at the left edge of its row opens the bubble to the right;
   anchored to the right it would spill out of the dialog and be cut off. */
.form-section-title .context-help-popover,
.form-section-head .context-help-popover,
.campaign-capacity-grid > .field:first-child .context-help-popover { left: 0; right: auto; }
.form-section-title .context-help-popover::before,
.form-section-head .context-help-popover::before,
.campaign-capacity-grid > .field:first-child .context-help-popover::before { left: 6px; right: auto; }

/* Never wider than the dialog it lives in. */
.context-help-popover { max-width: min(290px, calc(100vw - 52px)); }
.modal-card .context-help-popover { max-width: min(290px, 66vw); }
.context-help-popover strong,
.context-help-popover span { display: block; }
.context-help-popover strong { margin-bottom: 3px; color: var(--text); }
.context-help[open] .context-help-popover,
.context-help:hover .context-help-popover { display: block; }
.form-section-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary-dark) 16%, transparent);
    color: var(--primary-dark);
}
.form-section-icon svg { width: 17px; height: 17px; }
.form-section .field:last-child { margin-bottom: 0; }
.campaign-form .form-actions { margin: 0; padding: 16px 20px 20px; border-top: 0; }
.tab-btn svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.time-input { position: relative; }
.time-input input[type="time"] {
    width: 100%;
    padding: 9px 36px 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--input-bg);
    color: var(--text);
    font-family: var(--font-tech);
    font-size: 14px;
}
.time-input input[type="time"].has-error { border-color: var(--red); }
.btn-icon { display: inline-flex; align-items: center; gap: 6px; }
.btn-icon svg { width: 15px; height: 15px; }

.modal-title { display: flex; gap: 12px; align-items: center; }
.modal-title-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    background: var(--primary);
    color: #fff;
}
.modal-title-icon svg { width: 18px; height: 18px; }
.modal-subtitle { margin: 2px 0 0; font-size: 12px; }

/* Contact tabs: hidden radios plus labels styled as buttons. */
.tabs { margin-top: 2px; }
.tab-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.tab-btn {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.tab-btn:first-of-type { border-radius: var(--radius) 0 0 var(--radius); }
.tab-btn:last-of-type { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.tab-input:checked + .tab-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    position: relative;
    z-index: 1;
}
.tab-input:focus-visible + .tab-btn { outline: 2px solid var(--focus); outline-offset: 1px; }

.tab-panel { display: none; padding-top: 12px; }
#contacts_source_paste:checked ~ .tab-panel-paste { display: block; }
#contacts_source_file:checked ~ .tab-panel-file { display: block; }

/* IVR block: hidden until the IVR checkbox is ticked. */
.ivr-title { font-size: 14px; font-weight: 600; margin: 4px 0 10px; }
.ivr-reveal {
    display: none;
    margin-top: 14px;
    padding: 14px 0 0 16px;
    border-left: 2px solid var(--border);
}
/*
 * The real checkbox stays where it is, because it is the sibling that reveals
 * the options block below. It is not what you see: the visible box is drawn
 * inside the card next to the text, so the control reads as one piece.
 */
.ivr-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.ivr-toggle + .campaign-check .check::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 2px;
    border: 1px solid var(--cp-border-strong);
    border-radius: 4px;
    background: var(--cp-card);
}
.ivr-toggle:checked + .campaign-check .check::before {
    border-color: var(--cp-primary);
    background: var(--cp-primary)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E")
        center / 13px no-repeat;
}
.ivr-toggle:focus-visible + .campaign-check { outline: 2px solid var(--focus); outline-offset: 1px; }
.ivr-toggle + .campaign-check .check { cursor: pointer; }
.ivr-toggle:checked ~ .ivr-reveal { display: block; }
.ivr-toggle:focus-visible + .check { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Capacity and dialing: three controls in a grid on desktop, stacked on
   mobile; checkboxes with full text and generous hit area; advanced settings
   in a secondary <details> (no JavaScript). */
.campaign-capacity-grid {
    display: grid;
    /* auto-fit: three columns on the edit page, as many as fit inside the
       modal (560px), one on mobile. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px 16px;
    align-items: start;
}
.campaign-capacity-grid .field { margin-bottom: 0; }
.campaign-capacity-grid input[type="number"] { font-family: var(--font-tech); }
.campaign-checks { display: grid; gap: 8px; margin-top: 16px; }
.campaign-check {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    min-height: 44px;
}
.campaign-check > .check { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.campaign-check:hover { border-color: var(--border-strong); }
.campaign-check input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }
.campaign-check span { display: block; }
.campaign-check strong { display: block; font-weight: 600; font-size: 13px; color: var(--text); }
.campaign-check small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.campaign-check:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.campaign-advanced {
    margin-top: 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface-alt) 60%, transparent);
}
.campaign-advanced summary {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
}
.campaign-advanced summary::-webkit-details-marker { display: none; }
.campaign-advanced summary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.campaign-advanced[open] summary::before { transform: rotate(45deg); }
.campaign-advanced summary:hover { color: var(--text); }
.campaign-advanced summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius); }
.campaign-advanced-body { padding: 4px 12px 14px; }
.campaign-advanced-body .field { margin-bottom: 0; max-width: 320px; }
.campaign-current-file { margin: 0 0 10px; font-size: 13px; }
.campaign-current-file strong { color: var(--text); word-break: break-all; }
.campaign-live-overview { display: grid; grid-template-columns: minmax(260px, 1.3fr) 1fr; gap: 24px; align-items: center; padding: 18px 20px; }
.campaign-progress-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; }
.campaign-progress-head > div { display: grid; gap: 2px; }
.campaign-overview-label,
.campaign-live-metrics span { color: var(--text-muted); font-size: 12px; }
.campaign-progress-percent { color: var(--primary-dark); font-family: var(--font-tech); font-size: 22px; }
.campaign-progress-track { height: 8px; margin: 10px 0 6px; overflow: hidden; border-radius: 99px; background: var(--surface-alt); }
.campaign-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cp-primary-dark), var(--cp-primary)); }
.campaign-live-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.campaign-live-metrics > div { display: grid; gap: 2px; padding: 10px 12px; border-left: 1px solid var(--border); }
.campaign-live-metrics strong { font-size: 20px; }
.campaign-live-metrics strong small { margin-left: 2px; color: var(--text-muted); font-size: 12px; font-weight: 500; }
.campaign-live-metrics .campaign-live-text { font-size: 14px; }
.campaign-table-meta { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.campaign-table-progress { min-width: 130px; width: 170px; }
.campaign-table-progress > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.campaign-table-progress > div span { color: var(--text-muted); font-family: var(--font-tech); }
.campaign-mini-progress { display: block; height: 4px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: var(--surface-alt); }
.campaign-mini-progress i { display: block; height: 100%; border-radius: inherit; background: var(--primary-dark); }
.campaign-mini-progress.is-paused i { background: var(--cp-text-muted); }
.audio-preview {
    margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: 12px; background: var(--surface-alt);
}
.audio-preview[hidden] { display: none; }
.audio-preview-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.audio-preview-meta { min-width: 0; overflow: hidden; color: var(--text-muted); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.audio-preview-remove { padding: 3px 7px; border: 0; border-radius: 6px; background: transparent; color: var(--red); font: inherit; cursor: pointer; }
.audio-preview-remove:hover,
.audio-preview-remove:focus-visible { background: color-mix(in srgb, var(--red) 12%, transparent); outline: none; }
.audio-preview audio { display: block; width: 100%; height: 36px; }
#new-campaign .modal-card { max-width: 740px; }
#new-campaign .modal-card {
    /* One size for every step: the dialog must not resize as you move
       through them. The tallest step scrolls inside the body. */
    height: calc(100vh - 80px);
    height: min(740px, calc(100dvh - 80px));
    border-color: var(--border-strong);
    border-radius: var(--cp-radius-card);
    background: var(--cp-card);
}
#new-campaign .modal-head {
    padding: 18px 22px;
    background: var(--cp-card-elevated);
}
#new-campaign .modal-body {
    height: 0; min-height: 0; flex: 1 1 0; display: flex;
    padding: 0; overflow: hidden; background: var(--cp-bg);
}
#new-campaign .campaign-form {
    width: 100%; height: auto; min-height: 0; flex: 1 1 0;
    display: flex; flex-direction: column; overflow: hidden;
}
#new-campaign .campaign-form-content {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px;
    scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin;
}
#new-campaign .campaign-form-content::-webkit-scrollbar { width: 9px; }
#new-campaign .campaign-form-content::-webkit-scrollbar-track { background: transparent; }
#new-campaign .campaign-form-content::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--cp-bg); border-radius: 8px; }
#new-campaign .form-section {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--cp-radius-card);
    background: var(--cp-card);
}
#new-campaign .form-section-head { margin-bottom: 16px; }
#new-campaign .form-section-icon {
    background: color-mix(in srgb, var(--cp-primary) 13%, transparent);
    box-shadow: none;
}
#new-campaign .field { margin-bottom: 15px; }
#new-campaign .field > label,
#new-campaign .field-label-row > label,
#new-campaign .field-label { font-size: 12px; }
#new-campaign input[type="text"],
#new-campaign input[type="number"],
#new-campaign input[type="time"],
#new-campaign select,
#new-campaign textarea {
    border-color: var(--border);
    background: var(--cp-card-elevated);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#new-campaign input:hover,
#new-campaign select:hover,
#new-campaign textarea:hover { border-color: var(--border-strong); background: var(--cp-card-hover); }
#new-campaign input:focus,
#new-campaign select:focus,
#new-campaign textarea:focus {
    border-color: var(--primary-dark);
    background: var(--cp-card-hover);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 12%, transparent);
}
#new-campaign .dropzone {
    min-height: 108px;
    border-width: 1px;
    background: var(--cp-card-elevated);
}
#new-campaign .dropzone:hover { background: var(--cp-primary-muted); }
#new-campaign .campaign-check { background: var(--cp-card-elevated); }
#new-campaign .campaign-advanced { background: var(--cp-bg); }
#new-campaign .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#new-campaign .tab-btn { display: flex; align-items: center; justify-content: center; margin: 0; border-radius: 8px !important; }
#new-campaign .tab-panel { grid-column: 1 / -1; }
#new-campaign .modal-body .campaign-form .form-actions {
    flex: 0 0 auto; align-items: center; margin: 0; padding: 12px 18px;
    background: var(--cp-card-elevated);
    border-top: 1px solid var(--border); box-shadow: none;
}
.campaign-create-summary { display: grid; gap: 1px; margin-right: auto; line-height: 1.3; }
.campaign-create-summary strong { font-size: 12px; }
.campaign-create-summary > span { color: var(--text-muted); font-size: 11px; }
.audio-preview-head strong { display: flex; align-items: center; gap: 6px; }
.audio-ready-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-success) 12%, transparent); }
@media (max-width: 760px) {
    .campaign-capacity-grid { grid-template-columns: 1fr; }
    .campaign-live-overview { grid-template-columns: 1fr; }
    .campaign-live-metrics > div:first-child { border-left: 0; }
    #new-campaign .modal-card { height: calc(100vh - 24px); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
    #new-campaign.modal-overlay { padding: 12px; }
    #new-campaign .campaign-form-content { padding: 8px; gap: 8px; }
    #new-campaign .form-section { padding: 15px; }
    .campaign-form .form-actions { padding: 14px 16px; }
    #new-campaign .modal-body .campaign-form .form-actions { padding: 10px 12px; flex-wrap: wrap; }
    .campaign-create-summary { flex: 1 0 100%; }
    .campaign-live-metrics { grid-template-columns: 1fr; }
    .campaign-live-metrics > div { border-left: 0; border-top: 1px solid var(--border); }
}

/* --- New campaign: four steps ---------------------------------------------
   One hidden radio per step decides which panel is visible, which step the
   indicator marks and which navigation buttons appear. No JavaScript, same
   technique as the contact tabs and the IVR block. Editing shows every
   section at once, so none of this applies there. */

.wizard-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.wizard-steps {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 12px 18px;
    list-style: none;
    border-bottom: 1px solid var(--cp-border);
    background: var(--cp-card);
}
.wizard-steps li { flex: 1; min-width: 0; }
.wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: var(--cp-radius-control);
    color: var(--cp-text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.wizard-step:hover { background: var(--cp-card-hover); color: var(--cp-text); }
.wizard-step-n {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: 1px solid var(--cp-border);
    border-radius: 50%;
    background: var(--cp-card-elevated);
    font-family: var(--font-tech);
    font-size: 11px;
}
.wizard-step-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Filled in: the number becomes a tick. A plain glyph, not an emoji, so it
   draws the same on every system. */
.wizard-step.is-done .wizard-step-n {
    border-color: var(--cp-success);
    background: color-mix(in srgb, var(--cp-success) 18%, transparent);
    color: var(--cp-success);
    font-size: 0;
}
.wizard-step.is-done .wizard-step-n::after { content: "✓"; font-size: 12px; line-height: 1; }

.wizard-hint {
    margin: 0;
    padding: 12px 20px;
    border-bottom: 1px solid var(--cp-border);
    color: var(--cp-text-secondary);
    font-size: 13px;
}
.campaign-form-wizard .wizard-hint { display: none; }
#wizard-step-1:checked ~ .wizard-hint[data-step="1"],
#wizard-step-2:checked ~ .wizard-hint[data-step="2"],
#wizard-step-3:checked ~ .wizard-hint[data-step="3"],
#wizard-step-4:checked ~ .wizard-hint[data-step="4"] { display: block; }

.campaign-form-wizard .wizard-panel:not([data-step="3"]) > .form-section > .form-section-head { display: none; }

/* Inside the dialing step, the schedule is not part of the capacity block. */
.wizard-subsection { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--cp-border); }

.campaign-form-wizard .wizard-panel { display: none; }
.campaign-form-wizard .wizard-back,
.campaign-form-wizard .wizard-next { display: none; }
.campaign-form-wizard .wizard-next { margin-left: auto; }
.wizard-back, .wizard-next { cursor: pointer; }

/* One block per step: which panel shows, which step is marked, which
   navigation buttons appear. */
#wizard-step-1:checked ~ .campaign-form-content .wizard-panel[data-step="1"],
#wizard-step-2:checked ~ .campaign-form-content .wizard-panel[data-step="2"],
#wizard-step-3:checked ~ .campaign-form-content .wizard-panel[data-step="3"],
#wizard-step-4:checked ~ .campaign-form-content .wizard-panel[data-step="4"] { display: block; }

#wizard-step-1:checked ~ .wizard-steps .wizard-step[data-step="1"],
#wizard-step-2:checked ~ .wizard-steps .wizard-step[data-step="2"],
#wizard-step-3:checked ~ .wizard-steps .wizard-step[data-step="3"],
#wizard-step-4:checked ~ .wizard-steps .wizard-step[data-step="4"] {
    border-color: var(--cp-border-active);
    background: var(--cp-primary-bg);
    color: var(--cp-primary-light);
    font-weight: 600;
}
#wizard-step-1:checked ~ .wizard-steps .wizard-step[data-step="1"] .wizard-step-n,
#wizard-step-2:checked ~ .wizard-steps .wizard-step[data-step="2"] .wizard-step-n,
#wizard-step-3:checked ~ .wizard-steps .wizard-step[data-step="3"] .wizard-step-n,
#wizard-step-4:checked ~ .wizard-steps .wizard-step[data-step="4"] .wizard-step-n {
    border-color: var(--cp-primary);
    background: var(--cp-primary);
    color: #fff;
}

#wizard-step-1:checked ~ .form-actions .wizard-next[data-step="1"],
#wizard-step-2:checked ~ .form-actions .wizard-next[data-step="2"],
#wizard-step-3:checked ~ .form-actions .wizard-next[data-step="3"],
#wizard-step-2:checked ~ .form-actions .wizard-back[data-step="2"],
#wizard-step-3:checked ~ .form-actions .wizard-back[data-step="3"],
#wizard-step-4:checked ~ .form-actions .wizard-back[data-step="4"] { display: inline-flex; }

/* The panel keeps the section's own padding; no nested card inside a step. */
#new-campaign .campaign-form-wizard .wizard-panel > .form-section,
.campaign-form-wizard .wizard-panel > .form-section {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 2px 2px 0;
}

/* Moving forward is the main action until the last step, where creating is. */
.campaign-form-wizard .wizard-next {
    background: var(--cp-primary);
    border-color: var(--cp-primary);
    color: #fff;
}
.campaign-form-wizard .wizard-next:hover {
    background: var(--cp-primary-light);
    border-color: var(--cp-primary-light);
}
.campaign-form-wizard .wizard-submit { display: none; }
#wizard-step-4:checked ~ .form-actions .wizard-submit { display: inline-flex; }

@media (max-width: 620px) {
    .wizard-steps { padding: 10px 12px; gap: 4px; }
    .wizard-step { justify-content: center; padding: 7px 4px; }
    .wizard-step-name { display: none; }
}

/* Campaign status: colored dot plus label, in badges and in the detail
   highlight block. */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gray) 22%, transparent);
    flex: 0 0 auto;
}
.status-dot-lg { width: 12px; height: 12px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gray) 22%, transparent); }
.status-dot-green { background: var(--green-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-text) 25%, transparent); }
.status-dot-green.status-dot-lg { box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-text) 25%, transparent); }
.status-dot-orange { background: var(--yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 25%, transparent); }
.status-dot-orange.status-dot-lg { box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow) 25%, transparent); }
.status-dot-gray { background: var(--cp-text-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-text-muted) 25%, transparent); }
.campaign-status-badge { display: inline-flex; align-items: center; gap: 6px; }
.badge-orange.campaign-status-badge { color: var(--yellow); background: color-mix(in srgb, var(--yellow) var(--tint), transparent); }
.campaign-row-actions { white-space: nowrap; }
.campaign-schedule-col { white-space: nowrap; }
.campaign-schedule-col small { display: block; margin-top: 1px; color: var(--text-muted); font-size: 10px; }
.campaign-start-time { color: var(--primary-dark); font-size: 14px; }
.campaign-no-schedule { color: var(--text-muted); font-size: 12px; }
@media (max-width: 760px) {
    .campaign-created-col { display: none; }
    .campaign-schedule-col { display: none; }
    .campaign-table-progress { min-width: 110px; }
}

.campaign-status-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 22px;
    border-left: 4px solid var(--gray);
}
.campaign-status-running { border-left-color: var(--green-text); }
.campaign-status-paused { border-left-color: var(--yellow); }
.campaign-status-finished { border-left-color: var(--cp-text-muted); }
.campaign-status-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.campaign-status-label { font-size: 15px; font-weight: 700; letter-spacing: .12em; }
.campaign-status-running .campaign-status-label { color: var(--green-text); }
.campaign-status-paused .campaign-status-label { color: var(--yellow); }
.campaign-status-finished .campaign-status-label { color: var(--text-muted); }
.campaign-status-text { margin: 0; font-size: 13px; color: var(--text); line-height: 1.55; }
.campaign-status-note {
    margin: 10px 0 0;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--orange);
    background: color-mix(in srgb, var(--orange) var(--tint), transparent);
    border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
    border-radius: var(--radius);
    display: inline-block;
}
.campaign-status-actions { display: flex; flex-direction: column; gap: 12px; flex: 0 0 auto; }
.campaign-action { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin: 0; }
.campaign-action .btn { min-height: 40px; }
.campaign-action-hint { font-size: 11px; color: var(--text-muted); }
.campaign-resume-review {
    display: grid;
    justify-items: end;
    gap: 1px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    font-size: 11px;
    color: var(--text-muted);
}
.campaign-resume-review a { font-weight: 700; }
@media (max-width: 720px) {
    .campaign-status-card { flex-direction: column; align-items: stretch; }
    .campaign-status-actions { flex-direction: row; flex-wrap: wrap; }
    .campaign-action { align-items: flex-start; flex: 1 1 160px; }
    .campaign-action .btn { width: 100%; justify-content: center; }
    .campaign-resume-review { flex: 1 1 100%; justify-items: start; }
}

.campaign-edit-head { flex-wrap: wrap; }
.campaign-edit-head p { margin: 0; font-size: 12px; }

/* Saved configuration, on the detail page. */
.campaign-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 20px;
    margin: 0;
    padding: 16px 18px;
}
.campaign-config-grid dt { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.campaign-config-grid dd { margin: 3px 0 0; font-size: 14px; color: var(--text); word-break: break-word; }
.campaign-config-grid dd small { font-size: 12px; }

/* "Finish" confirmation: small modal for a destructive action. */
.modal-card-sm { max-width: 460px; }
.modal-title-icon-danger { background: var(--red); color: #fff; font-size: 14px; }
.modal-title-icon-warning { background: var(--yellow); color: #181303; font-size: 14px; }
.modal-card-sm .modal-body { overflow-y: auto; padding: 20px; }
.campaign-confirm-text { margin: 0 0 18px; font-size: 14px; line-height: 1.6; }
.campaign-confirm-actions { justify-content: flex-end; border-top: 0; padding-top: 0; margin: 0; }
.campaign-confirm-actions .btn { min-height: 40px; }

/* --- Modal (new campaign and similar) -------------------------------------

   No JavaScript: the opening link targets #new-campaign and the modal is
   shown with :target. Closing is a link to the URL without fragment. Known
   limitation: it cannot be closed by clicking outside or with Escape, only
   via the close button, since an <a> cannot wrap a <form>.
*/

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 40px 20px;
    overflow-y: auto;
    background: rgba(4, 3, 7, .72);
}
.modal-overlay:target { display: flex; justify-content: center; align-items: flex-start; }

.modal-card {
    width: 100%;
    max-width: 560px;
    /* Leave the overlay's 40px top/bottom padding free so scrolling happens
       inside the card, not the whole window. */
    max-height: calc(100vh - 80px);
    margin: auto;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--cp-radius-card);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    overflow: hidden; /* scrolling belongs to .modal-body */
}
.modal-head {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 17px; }
.modal-close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
}
.modal-close:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }

.modal-body {
    flex: 1 1 auto;
    /* 'scroll' rather than 'auto': the bar stays visible at the card's right
       edge instead of appearing on hover or vanishing with overlay
       scrollbars. */
    overflow-y: scroll;
    scrollbar-color: var(--border-strong) transparent; /* Firefox */
    scrollbar-width: thin;
}
.modal-body .form { padding: 20px; }

/* Same scrollbar for Chrome/Safari/Edge (no scrollbar-color support). */
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: 6px;
    border: 2px solid var(--surface);
}
.modal-body::-webkit-scrollbar-thumb:hover { background-color: var(--primary); }

/* --- Session: sidebar user and logout button ------------------------------ */

.user-row { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.btn-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.btn-link:hover { color: var(--text); }

/* --- Login page ----------------------------------------------------------- */

/*
 * Same visual system as the panel: the --auth-* names are local aliases of
 * the shared --cp-* tokens, the card is a flat surface with a 1px border, and
 * lilac appears only on the logo ring, the focus ring and the button. The
 * constellation canvas stays as quiet background texture.
 *
 * Scoped under .auth-body / .auth-card / .auth-* so it never affects the
 * authenticated panel.
 */
.auth-body {
    --auth-line: var(--cp-border);
    --auth-line-strong: var(--cp-border-strong);
    --auth-input: var(--cp-card-elevated);
    --auth-text: var(--cp-text);
    --auth-text-soft: var(--cp-text-secondary);
    --auth-text-muted: var(--cp-text-muted);

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--auth-text);

    /* One faint lilac glow behind the card; the rest is the panel background. */
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(168, 85, 247, .10) 0%, transparent 70%),
        var(--cp-bg);
}

/* Faint technical grid, same idea as the panel's quiet surfaces. */
.auth-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(168, 85, 247, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, .04) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 10%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 10%, transparent 100%);
}

.auth-canvas { position: fixed; inset: 0; z-index: 0; opacity: .45; }

.auth-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 24px 16px;
}
.auth-shell .alert { margin-bottom: 14px; }

.auth-card {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 32px 28px 24px;
    text-align: center;
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-card);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
    overflow: hidden;
}

.auth-head { margin-bottom: 22px; }

/* Logo: the same flat mark as the sidebar brand, one size up. */
.auth-logo {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 1px solid var(--cp-border-active);
    background: var(--cp-primary-bg);
}
.auth-logo img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; }

.auth-app-name {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--auth-text);
}

.auth-tagline {
    margin: 4px 0 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--auth-text-muted);
}

.auth-intro {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--auth-text-soft);
}

/* Form: override the generic .form padding. */
.auth-card .auth-form { padding: 0; text-align: left; }

.auth-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.auth-card .auth-field { position: relative; margin-bottom: 12px; }
.auth-field-icon {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 44px;
    color: var(--auth-text-muted);
    pointer-events: none;
    transition: color .15s ease;
}
.auth-field-icon svg { display: block; width: 17px; height: 17px; }

/* Same field shape as the panel: elevated surface, 1px border, 8px radius. */
.auth-card .auth-input,
.auth-card .field input[type="text"].auth-input,
.auth-card .field input[type="password"].auth-input {
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 14px 0 42px;
    font-size: 14px;
    color: var(--auth-text);
    background: var(--auth-input);
    border: 1px solid var(--auth-line);
    border-radius: var(--cp-radius-control);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-card .auth-input::placeholder { color: var(--auth-text-muted); opacity: 1; }
.auth-card .auth-input:hover { border-color: var(--auth-line-strong); }
.auth-card .auth-input:focus {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 18%, transparent);
}
.auth-card .auth-field:focus-within .auth-field-icon { color: var(--cp-primary-light); }
.auth-card .auth-input.has-error { border-color: var(--cp-danger); }
.auth-card .auth-input.has-error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-danger) 18%, transparent); }
.auth-card .auth-field-error { margin: 6px 0 0 2px; font-size: 12px; }

/* Browser autofill background: keep it consistent with the dark theme. */
.auth-card .auth-input:-webkit-autofill,
.auth-card .auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-text);
    -webkit-box-shadow: 0 0 0 1000px var(--cp-card-elevated) inset;
    caret-color: var(--auth-text);
}

.auth-card .auth-actions { margin: 18px 0 0; }
.auth-card .auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--cp-primary);
    border-radius: var(--cp-radius-control);
    background: var(--cp-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease;
}
.auth-card .auth-submit svg { flex: 0 0 auto; width: 16px; height: 16px; }
.auth-card .auth-submit:hover {
    background: var(--cp-primary-light);
    border-color: var(--cp-primary-light);
    filter: none;
    transform: none;
    box-shadow: none;
}
.auth-card .auth-submit:active { background: var(--cp-primary-dark); border-color: var(--cp-primary-dark); }
.auth-card .auth-submit:focus-visible { outline: 2px solid var(--cp-primary-light); outline-offset: 2px; }

/* Footer: one quiet service indicator, same shape as the header chips. */
.auth-foot { display: flex; justify-content: center; margin-top: 20px; }
.auth-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--cp-border);
    background: var(--cp-card-elevated);
    font-size: 11px;
    font-weight: 500;
    color: var(--auth-text-soft);
}
.auth-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cp-success);
}

@media (max-width: 480px) {
    .auth-shell { padding: 20px 16px; }
    .auth-card { padding: 28px 20px 20px; }
    .auth-logo { width: 56px; height: 56px; }
    .auth-logo img { width: 36px; height: 36px; }
    .auth-app-name { font-size: 20px; }
}

/* Very short viewports (landscape phones): fit without hiding the button. */
@media (max-height: 640px) {
    .auth-shell { padding-top: 16px; padding-bottom: 16px; }
    .auth-card { padding-top: 22px; padding-bottom: 18px; }
    .auth-head { margin-bottom: 14px; }
    .auth-logo { width: 52px; height: 52px; margin-bottom: 10px; }
    .auth-logo img { width: 34px; height: 34px; }
    .auth-intro { margin-bottom: 14px; }
    .auth-card .auth-actions { margin-top: 14px; }
    .auth-foot { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-field-icon,
    .auth-card .auth-input,
    .auth-card .auth-submit { transition: none; }
}

/* "Auto configure" button on the campaign form */
.campaign-auto-config { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 16px; }
.campaign-auto-config-note { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--text-muted); }
.campaign-auto-config-note.is-warning { color: var(--cp-warning); }
.campaign-auto-config-note.is-error { color: var(--cp-danger); }
.campaign-auto-config .is-autofilled { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-success) 25%, transparent); transition: box-shadow 0.6s; }

/* Live queue: today's calls */
.lq-history { margin-top: 16px; padding: 0; overflow: hidden; }
.lq-history .table-wrap { overflow-x: auto; }
.lq-history-table td, .lq-history-table th { white-space: nowrap; }
.lq-history-live { color: var(--primary-dark); font-weight: 600; }

/* Irreversible actions, kept below the form they belong to. */
.danger-zone { margin-top: 20px; padding: 18px 20px; border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
.danger-zone h2 { color: var(--red); font-size: 15px; margin: 0 0 4px; }
.danger-zone p { margin: 0 0 12px; }

/* --- Settings tabs --------------------------------------------------------- */

.set-tabs {
    display: flex; gap: 4px; margin: 0 0 18px; padding: 4px;
    border: 1px solid var(--border); border-radius: var(--cp-radius-card);
    background: var(--surface); overflow-x: auto;
}
.set-tab {
    flex: 1 0 auto; padding: 9px 16px; border-radius: var(--cp-radius-control);
    text-align: center; font-size: 13px; font-weight: 600; white-space: nowrap;
    color: var(--text-muted);
}
.set-tab:hover { color: var(--text); text-decoration: none; background: var(--surface-alt); }
.set-tab.is-active { background: var(--cp-primary-bg); color: var(--cp-primary-light); }
.field-label { display: block; font-weight: 500; font-size: 13px; margin-bottom: 6px; }
.field label.dropzone.dropzone-compact { min-height: 0; padding: 14px; }


/* --- Tables as cards on phones ------------------------------------------------
   Wide tables scrolled sideways and hid half their columns. Below 720 px each
   row becomes a card and each cell shows its column name (data-label, set by
   layout.js from the header). */
@media (max-width: 720px) {
    table.table.has-card-labels thead { display: none; }
    table.table.has-card-labels,
    table.table.has-card-labels tbody,
    table.table.has-card-labels tr,
    table.table.has-card-labels td { display: block; width: 100%; }
    table.table.has-card-labels tr {
        margin: 0 0 10px; padding: 8px 12px;
        border: 1px solid var(--border); border-radius: var(--cp-radius-control);
        background: var(--surface);
    }
    /* Label on the left; everything the cell holds stacks on the right. */
    table.table.has-card-labels td {
        display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline;
        padding: 6px 0; border: 0; text-align: right;
    }
    table.table.has-card-labels td > * { grid-column: 2; justify-self: end; }
    table.table.has-card-labels td[data-label]::before {
        content: attr(data-label); grid-column: 1; grid-row: 1 / span 4;
        font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
        color: var(--text-muted); text-align: left;
    }
    table.table.has-card-labels td[colspan] { display: block; text-align: center; }
    table.table.has-card-labels td[colspan]::before { content: none; }
}

/* Campaign type as cards: the explanation is what the choice depends on. */
.type-cards { display: grid; gap: 10px; }
.type-card {
    position: relative; display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--cp-radius-card);
    background: var(--surface); cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}
.field label.type-card { display: flex; font-weight: 400; margin: 0; }
.type-card:hover { border-color: var(--cp-border-active); }
.type-card input { margin-top: 3px; accent-color: var(--cp-primary); }
.type-card:has(input:checked) { border-color: var(--cp-primary); background: var(--cp-primary-bg); }
.type-card-body { display: grid; gap: 4px; }
.type-card-body strong { font-size: 14px; }
.type-card-body small { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.type-cards.has-error .type-card { border-color: var(--red); }


/* Form fields at a readable width: a 1,100 px text box for a name or a
   port is hard to scan. The campaign wizard lays out its own grid. */
.form:not(.campaign-form) > .field { max-width: 560px; }

/* --- Reports: figures and calls per day ---------------------------------- */

.report-stats { margin-bottom: 20px; }
.report-chart-card { overflow: visible; }
.report-chart-card .empty { margin: 0; padding: 28px 20px; }
.report-chart {
    display: flex; align-items: stretch; gap: 2px; height: 180px;
    margin: 20px 20px 0; border-bottom: 1px solid var(--border);
}
/* The whole column is the hover target, not just the (maybe tiny) bar. */
.report-bar { position: relative; flex: 1 1 0; display: flex; align-items: flex-end; min-width: 3px; outline: none; }
.report-bar-fill {
    display: block; width: 100%; min-height: 0;
    border-radius: 4px 4px 0 0; background: var(--cp-primary);
}
.report-bar:hover .report-bar-fill, .report-bar:focus-visible .report-bar-fill { background: var(--cp-primary-light); }
.report-bar:hover::after, .report-bar:focus-visible::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    z-index: 5; padding: 6px 9px; white-space: nowrap; pointer-events: none;
    border: 1px solid var(--border-strong); border-radius: 8px;
    background: var(--cp-card-elevated); color: var(--text); font-size: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
/* The label opens towards the middle of the chart, never past its edges. */
.report-bar.is-left:hover::after, .report-bar.is-left:focus-visible::after { left: 0; transform: none; }
.report-bar.is-right:hover::after, .report-bar.is-right:focus-visible::after { left: auto; right: 0; transform: none; }
/* Here the description carries the percentages, so it stays visible. */
.report-stats .stat-desc { display: block; }
.report-axis { display: flex; justify-content: space-between; margin: 6px 20px 0; font-size: 11px; color: var(--text-muted); font-family: var(--font-tech); }
.report-table-toggle { margin: 14px 20px 18px; }
.report-table-toggle summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
.report-table-toggle .table { margin-top: 10px; }

/* Status filter above a list: links, so the filter lives in the address. */
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 20px 0 12px; }
.filter-tab {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
    border: 1px solid var(--border); border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--surface);
}
.filter-tab:hover { color: var(--text); text-decoration: none; border-color: var(--cp-border-active); }
.filter-tab.is-active { color: var(--cp-primary-light); background: var(--cp-primary-bg); border-color: var(--cp-border-active); }
.filter-tab-count { font-family: var(--font-tech); font-size: 11px; color: inherit; opacity: .8; }
.sp-recent-more { display: block; margin: 10px auto 4px; }
.lq-history-more { margin: 0; padding: 10px 18px 14px; }