/* ═══════════════════════════════════════════════════════════════
 * CS Dashboard Handoff — override + new component styles (2026-04-18)
 * Source: Toomics BizOps Design System / design_handoff_cs_dashboard
 *
 * This file (a) overrides existing dashboard.css selectors to match
 * the prototype visually, and (b) adds new cs-* classes for prototype
 * elements that don't exist yet.
 *
 * Load order: after dashboard.css so overrides win on cascade.
 * ═══════════════════════════════════════════════════════════════ */

/* ═════════ Accessibility — WCAG 2.4.7 Focus Visible ═════════
 * UX audit 2026-04-18: .btn-primary / .ticket-item had outline=0 + box-shadow
 * =none → no visible focus indicator for keyboard users. Add 2px primary-blue
 * outline + 3px soft ring on all interactive elements in the CS dashboard.
 */
/* Explicit properties (not shorthand) — outline shorthand was being lost in cascade */
.header .btn:focus-visible,
.header a.btn:focus-visible,
main.main-content .btn:focus-visible,
.compose-actions .btn:focus-visible,
#btn-reply-pending:focus-visible,
#btn-reply-solved:focus-visible,
#btn-reply-open:focus-visible,
#btn-escalate:focus-visible,
#btn-reject-draft:focus-visible,
#btn-delete-ticket:focus-visible,
#btn-mark-spam:focus-visible,
#btn-internal-note:focus-visible,
#btn-generate-draft:focus-visible,
#btn-status-change:focus-visible,
#btn-l3-settings:focus-visible,
#btn-refresh:focus-visible,
.filter-tab:focus-visible,
.compose-tab:focus-visible,
.conv-tab:focus-visible,
.ticket-item:focus-visible,
.kpi-card:focus-visible {
    outline-width: 2px !important;
    outline-style: solid !important;
    outline-color: var(--color-primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

/* Header buttons on dark bg — use light ring for contrast */
.header .btn:focus-visible,
.header a.btn:focus-visible {
    outline-color: #93C5FD !important;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.3) !important;
}

/* Brute-force fallback: every clickable element gets visible focus ring
 * via explicit longhand props with max specificity + hardcoded colors.
 * Ensures no cascade/var() issue kills the outline. */
html body .header .btn:focus-visible,
html body .header a:focus-visible,
html body button:focus-visible,
html body a.btn:focus-visible,
html body .ticket-item:focus-visible,
html body .kpi-card:focus-visible,
html body .filter-tab:focus-visible {
    outline-width: 2px !important;
    outline-style: solid !important;
    outline-offset: 2px !important;
}
html body .header .btn:focus-visible,
html body .header a:focus-visible {
    outline-color: #93C5FD !important;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.35) !important;
}
html body main button:focus-visible,
html body .filter-tab:focus-visible,
html body .ticket-item:focus-visible,
html body .kpi-card:focus-visible {
    outline-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

/* Header anchor/button focus — Chromium UA blocks outline on links w/ no
 * default focus handling. Use border-color change on focus-visible as the
 * primary focus indicator since border on these buttons is already styled. */
header.cs-header a.btn:focus-visible,
header.cs-header a.btn.btn-portal:focus-visible,
header.cs-header a.btn.btn-translate-link:focus-visible,
.header a.btn:focus-visible,
.header button.btn:focus-visible,
#btn-refresh:focus-visible,
#btn-agent-town:focus-visible,
#btn-l3-settings:focus-visible,
#btn-logout:focus-visible {
    border-color: #FCD34D !important;        /* bright amber ring on dark header */
    box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.45) !important;
    outline: 2px solid #FCD34D !important;
    outline-offset: 1px !important;
}

/* Font stack + CS Dashboard Handoff tokens
 * All tokens here are additive — dashboard.css / design-tokens.css are
 * untouched so that Daily Ops / Reports / Portal visuals stay identical.
 * Only this file + index.html link change + prototype/ folder ship with
 * the redesign, giving rollback = single-file + single-line revert.
 */
:root {
    --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Prototype font-heading: Pretendard-first premium sans.
     * dashboard.css global --font-heading is Fira Code (legacy mono heading),
     * which makes big KPI numbers and subjects look monospaced. Override
     * with a scoped token that the CS redesign components use. */
    --cs-font-heading: 'Pretendard Variable', 'Pretendard', 'Malgun Gothic',
                       'Apple SD Gothic Neo', 'Noto Sans KR',
                       -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* CS Handoff tokens (2026-04-18) */
    --color-header-bg: #0B1220;              /* deep premium header / active tab */
    --color-primary-soft: #DBEAFE;           /* blue tint — customer accent fills */
    --color-warning-soft: #FEF3C7;           /* amber tint — internal notes, draft banner */
    --color-surface-soft-cs: #F3F5F9;        /* CS inner fills */
    --color-cs-info: #06B6D4;                /* cyan-500 — in-progress accent */
    --color-cs-purple: #8B5CF6;              /* weekly KPI only (violet-500) */
    --cs-radius-card: 10px;                  /* prototype card radius */
    --cs-radius-btn: 7px;                    /* prototype button radius */
    --cs-ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scope: only inside the main dashboard app shell we add .cs-scope
 * data attribute. Anything using cs-* class inherits these. */

/* ═════════ Header — override existing .header (prototype color swap) ═════════ */
/* Keep all existing header class structure; restyle only. */
.header {
    background: var(--color-header-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.header .logo {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.95);
}

.header .header-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    letter-spacing: 0;
}

.header .last-updated {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    font-variant-numeric: tabular-nums;
}

.header .user-badge {
    font-family: var(--font-mono);
    font-size: 11.5px;
    padding: 4px 10px 4px 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-weight: 500;
    position: relative;
    color: rgba(255, 255, 255, 0.9);
}

.header .user-badge::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6EE7B7;
    box-shadow: 0 0 0 2px rgba(110, 231, 183, 0.2);
}

/* Header icon buttons (refresh / L3 / agent-town) */
.header .btn.btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--cs-radius-btn);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header .btn.btn-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Portal / Translate buttons in header */
.header .btn-portal,
.header .btn-translate-link {
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-header-bg);
    border-color: transparent;
    border-radius: var(--cs-radius-btn);
}

.header .btn-portal:hover,
.header .btn-translate-link:hover {
    background: #fff;
    color: var(--color-header-bg);
}

/* Logout outline button */
.header .btn-outline {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
    border-radius: var(--cs-radius-btn);
}

.header .btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

/* ═════════ cs-* additive components (for new prototype elements) ═════════ */
.cs-header-left,
.cs-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cs-logo {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
}

.cs-header-sub {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    letter-spacing: 0;
}

.cs-last-updated {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    font-variant-numeric: tabular-nums;
}

.cs-user-badge {
    font-family: var(--font-mono);
    font-size: 11.5px;
    padding: 4px 10px 4px 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-weight: 500;
    position: relative;
    color: rgba(255, 255, 255, 0.9);
}

.cs-user-badge::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6EE7B7;
    box-shadow: 0 0 0 2px rgba(110, 231, 183, 0.2);
}

/* ═════════ Buttons ═════════ */
.cs-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: var(--cs-radius-btn);
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-smooth);
    background: transparent;
    color: inherit;
    letter-spacing: -0.005em;
    cursor: pointer;
    font-family: inherit;
}

.cs-btn:active {
    transform: translateY(1px);
}

.cs-btn-sm {
    padding: 5px 10px;
    font-size: 11.5px;
}

.cs-btn-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(37, 99, 235, 0.24);
}

.cs-btn-primary:hover {
    background: #1D4ED8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 12px rgba(37, 99, 235, 0.32);
}

.cs-btn-success {
    background: #fff;
    color: #065F46;
    border-color: #A7F3D0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.cs-btn-success:hover {
    background: var(--color-success-light);
    border-color: #6EE7B7;
}

.cs-btn-accent {
    background: #111827;
    color: #FCD34D;
    border-color: #111827;
}

.cs-btn-accent:hover {
    background: #000;
}

.cs-btn-accent::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FCD34D;
    box-shadow: 0 0 8px #FCD34D;
    margin-right: 2px;
}

.cs-btn-outline {
    background: #fff;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.cs-btn-outline:hover {
    background: var(--color-muted);
    border-color: var(--color-text-subtle);
}

.cs-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

.cs-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cs-btn-portal {
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-header-bg);
    border-color: transparent;
}

.cs-btn-portal:hover {
    background: #fff;
}

.cs-btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--cs-radius-btn);
    font-size: 13px;
}

.cs-btn-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.cs-btn-danger-outline {
    background: #fff;
    color: var(--color-danger);
    border-color: #FECACA;
}

.cs-btn-danger-outline:hover {
    background: var(--color-danger-light);
}

/* ═════════ KPI Strip ═════════ */
.cs-kpi-strip-wrap {
    padding: 18px 24px 0;
    max-width: var(--content-max-width);
    width: 100%;
    margin: 0 auto;
}

.cs-kpi-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.cs-kpi-card {
    background: transparent;
    border: 0;
    border-right: 1px solid var(--color-border-light);
    padding: 16px 20px 18px;
    cursor: pointer;
    transition: background 180ms ease;
    outline: none;
    position: relative;
    font-family: inherit;
    text-align: left;
}

.cs-kpi-card:last-child {
    border-right: 0;
}

.cs-kpi-card::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 0;
    height: 2px;
    background: var(--cs-accent, transparent);
    opacity: 0;
    transition: opacity 220ms ease;
}

.cs-kpi-card:hover {
    background: var(--color-surface-soft-cs);
}

.cs-kpi-card:hover::before,
.cs-kpi-card.active::before {
    opacity: 1;
}

.cs-kpi-card.active {
    background: var(--color-surface-soft-cs);
}

.cs-kpi-card.c-new      { --cs-accent: var(--color-cs-info); }
.cs-kpi-card.c-open     { --cs-accent: var(--color-primary); }
.cs-kpi-card.c-pending  { --cs-accent: var(--color-warning); }
.cs-kpi-card.c-progress { --cs-accent: var(--color-cs-purple); }
.cs-kpi-card.c-solved   { --cs-accent: var(--color-success); }
.cs-kpi-card.c-weekly   { --cs-accent: var(--color-cyan); }
.cs-kpi-card.c-refund   { --cs-accent: var(--color-danger); }

.cs-kpi-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.cs-kpi-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cs-accent);
    display: inline-block;
}

.cs-kpi-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.cs-kpi-change {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-success);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.cs-kpi-change.down {
    color: var(--color-danger);
}

.cs-kpi-change::before {
    content: "▲ ";
    font-size: 8px;
    margin-right: 2px;
    vertical-align: 1px;
}

.cs-kpi-change.down::before {
    content: "▼ ";
}

/* ═════════ KPI Strip — override existing .kpi-strip / .kpi-card ═════════
 * Prototype pattern: single unified strip (1 outer border) with 7 equal columns,
 * inner dividers only, colored top accent bar on hover/active, uppercase label.
 */
.kpi-strip {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 0 !important;
    background: var(--color-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-xs) !important;
    overflow: hidden !important;
    padding: 0 !important;
    /* Breathing room below fixed header (prototype cs-kpi-strip-wrap padding-top 18px) */
    margin-top: 18px !important;
}

/* Reset per-card borders so only the strip itself has an outer border */
.kpi-strip .kpi-card {
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid var(--color-border-light) !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    padding: 16px 20px 18px !important;
    box-shadow: none !important;
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    cursor: pointer;
    transition: background 180ms ease;
}

.kpi-strip .kpi-card:last-child {
    border-right: 0 !important;
}

/* Top-border accent bar — opacity transitions on hover/active */
.kpi-strip .kpi-card::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 0;
    height: 2px;
    background: var(--cs-accent, transparent);
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
}

.kpi-strip .kpi-card:hover {
    background: var(--color-surface-soft-cs) !important;
}

.kpi-strip .kpi-card:hover::before,
.kpi-strip .kpi-card.kpi-active::before {
    opacity: 1;
}

.kpi-strip .kpi-card.kpi-active {
    background: var(--color-surface-soft-cs) !important;
    box-shadow: none !important;
}

/* Dim faded siblings during filter — prototype uses subtle bg highlight instead */
.kpi-strip.has-active .kpi-card { opacity: 1 !important; }

/* Accent mapping per data-status (matches prototype README table) */
.kpi-strip .kpi-card[data-status="new"]         { --cs-accent: var(--color-primary); }
.kpi-strip .kpi-card[data-status="open"]        { --cs-accent: var(--color-warning); }
.kpi-strip .kpi-card[data-status="pending"]     { --cs-accent: var(--color-warning-soft); }
.kpi-strip .kpi-card[data-status="in_progress"] { --cs-accent: var(--color-cs-info); }
.kpi-strip .kpi-card[data-status="solved"]      { --cs-accent: var(--color-success); }
.kpi-strip .kpi-card[data-status="weekly"]      { --cs-accent: var(--color-cs-purple); }
.kpi-strip .kpi-card[data-status="refund_open"] { --cs-accent: var(--color-danger); }

/* KPI value + change layout */
.kpi-strip .kpi-card .kpi-value {
    font-family: var(--cs-font-heading) !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    color: var(--color-text) !important;
    font-variant-numeric: tabular-nums !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kpi-strip .kpi-card .kpi-change {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--color-success);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.kpi-strip .kpi-card .kpi-change.kpi-change-up,
.kpi-strip .kpi-card .kpi-change.kpi-change-positive {
    color: var(--color-success) !important;
}

.kpi-strip .kpi-card .kpi-change.kpi-change-down,
.kpi-strip .kpi-card .kpi-change.kpi-change-negative {
    color: var(--color-danger) !important;
}

/* ═════════ Container alignment unification ═════════
 * dashboard.css has 3 misaligned rules:
 *   .filters max-width = calc(1080px - 48px)  → 1032px (48px narrower)
 *   .main-content padding: 0 24px             → panels inset 24px each side
 * Result: KPI at 180-1260, Filters at 204-1236, Panels at 204-1236 (no alignment).
 * Fix: all three sections share left=180 right=1260 at 1440vw.
 */
.filters {
    max-width: 1080px !important;
    margin: 16px auto 16px !important;
    /* 20px L/R padding matches KPI card internal padding (16px 20px 18px)
     * so filter row content starts at x=200 same as KPI values, and the
     * last filter item (e.g. "1799건" counter) keeps 20px gap from the
     * container border on the right edge. */
    padding: 12px 20px !important;
    width: auto !important;  /* override dashboard.css @media 768 width:calc(100% - 32px) */
}

/* Narrow viewport (≤ 768px) — keep filter outer edge flush with KPI strip
 * (which has padding 12px 16px via dashboard.css media query, so its visual
 * edge is at 16px). Remove external 16px filter margin and add 16px internal
 * padding so filter + KPI have identical outer edges at 0-viewport width. */
@media (max-width: 768px) {
    .filters {
        width: auto !important;
        margin: 12px 0 !important;
        padding: 12px 16px !important;
    }
}

main.main-content,
.main-content {
    padding: 0 0 24px !important;  /* Remove 24px L/R so panels sit flush with KPI/Filter edges */
}

/* Header content should also share the content-box alignment. Header is
 * fullwidth with 24px padding — inner content sits at (viewport - 48)/2 + 24 = 20
 * at 1440vw. KPI/filter/main containers are centered 1080px (left 180 at 1440).
 * For visual consistency, header padding 24px is fine — the header brand/nav
 * are naturally offset from content edge, which matches the prototype look.
 */

/* Responsive: on narrow viewports (< 1200px) keep 7 columns but
 * tighten padding and allow horizontal overflow gracefully rather than
 * clipping the last card. < 900px: wrap to 2 rows (4+3). */
@media (max-width: 1200px) {
    .kpi-strip .kpi-card {
        padding: 14px 14px 16px !important;
    }
    .kpi-strip .kpi-card .kpi-value {
        font-size: 24px !important;
    }
    .kpi-strip .kpi-card .kpi-label {
        font-size: 10px !important;
        letter-spacing: 0.08em !important;
    }
}

@media (max-width: 900px) {
    .kpi-strip {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .kpi-strip .kpi-card {
        border-bottom: 1px solid var(--color-border-light) !important;
    }
    .kpi-strip .kpi-card:nth-child(4n) {
        border-right: 0 !important;
    }
    .kpi-strip .kpi-card:nth-last-child(-n+3) {
        border-bottom: 0 !important;
    }
}

@media (max-width: 600px) {
    .kpi-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .kpi-strip .kpi-card:nth-child(2n) {
        border-right: 0 !important;
    }
    .kpi-strip .kpi-card:nth-last-child(-n+2) {
        border-bottom: 0 !important;
    }
}

/* KPI label — uppercase + dot prefix matching accent */
.kpi-strip .kpi-card .kpi-label {
    font-family: var(--cs-font-heading) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--color-text-muted) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.kpi-strip .kpi-card .kpi-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cs-accent);
    display: inline-block;
    flex-shrink: 0;
}

/* ═════════ Badges ═════════ */
.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.5;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-family: inherit;
}

.cs-badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.cs-badge-new      { color: #0369A1; border-color: #BAE6FD; background: var(--color-primary-light); }
.cs-badge-open     { color: var(--color-primary-dark); border-color: #BFDBFE; background: var(--color-primary-light); }
.cs-badge-pending  { color: var(--color-cta-text); border-color: #FDE68A; background: #FFFBEB; }
.cs-badge-progress { color: #5B21B6; border-color: #DDD6FE; background: var(--color-primary-light); }
.cs-badge-solved   { color: #065F46; border-color: #A7F3D0; background: #ECFDF5; }
.cs-badge-closed   { color: var(--color-text-muted); border-color: var(--color-border); background: var(--color-bg); }

.cs-badge-ai {
    background: #111827;
    color: #FCD34D;
    border-color: #111827;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0.02em;
    padding: 2px 7px;
}

.cs-badge-ai::before {
    display: none;
}

.cs-badge-market {
    background: #fff;
    color: var(--color-text-muted);
    border-color: var(--color-border);
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 1px 6px;
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
}

.cs-badge-market::before {
    display: none;
}

.cs-badge-category {
    background: #fff;
    color: var(--color-text-muted);
    border-color: var(--color-border);
    font-size: 10px;
    padding: 1px 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.cs-badge-category::before {
    display: none;
}

/* ═════════ Filter pill tabs (문의 / 플랫폼) — dark active ═════════ */
.filter-market-tabs {
    display: flex !important;
    flex-direction: row !important;
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--cs-radius-btn) !important;
    padding: 2px !important;
    gap: 0 !important;
    box-shadow: var(--shadow-xs) !important;
    margin-right: 6px !important;
}

.filter-market-tabs .filter-tab {
    background: transparent !important;
    border: 0 !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--color-text-muted) !important;
    border-radius: 5px !important;
    transition: var(--transition-smooth) !important;
    white-space: nowrap;
}

.filter-market-tabs .filter-tab:hover {
    color: var(--color-text) !important;
    background: transparent !important;
}

.filter-market-tabs .filter-tab.active {
    background: var(--color-header-bg) !important;
    color: #fff !important;
    border-color: var(--color-header-bg) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;
}

/* ═════════ Ticket list rows — status-colored left border via :has() ═════════
 * Prototype pattern: 3px left accent bar matching ticket status, clean 2-line
 * subject clamp, 13.5px / 600 weight subject. Active: soft blue bg + blue accent.
 */
#ticket-list .ticket-item {
    padding: 14px 18px 14px 22px !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    position: relative;
    transition: background 160ms ease;
}

#ticket-list .ticket-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    background: transparent;
    border-radius: 0 2px 2px 0;
    transition: background 160ms ease;
    pointer-events: none;
}

/* Status-color left accent — keyed off existing .badge classes via :has() */
#ticket-list .ticket-item:has(.badge-new)::before         { background: var(--color-primary); }
#ticket-list .ticket-item:has(.badge-open)::before        { background: var(--color-warning); }
#ticket-list .ticket-item:has(.badge-pending)::before     { background: var(--color-warning-soft); }
#ticket-list .ticket-item:has(.badge-in_progress)::before,
#ticket-list .ticket-item:has(.badge-in-progress)::before { background: var(--color-cs-info); }
#ticket-list .ticket-item:has(.badge-solved)::before      { background: var(--color-success); }
#ticket-list .ticket-item:has(.badge-refund-open)::before { background: var(--color-danger); }

#ticket-list .ticket-item:hover {
    background: var(--color-surface-soft-cs) !important;
}

#ticket-list .ticket-item.active {
    background: var(--color-primary-light) !important;
    border-left: 0 !important;
}

#ticket-list .ticket-item.active::before {
    background: var(--color-primary);
    width: 3px;
}

/* Subject: 2-line clamp, 13.5px, 600 weight (prototype) */
#ticket-list .ticket-item .ticket-subject {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
    letter-spacing: -0.005em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: clip !important;
}

/* Ticket id: mono muted (not blue accent) per prototype */
#ticket-list .ticket-item .ticket-id {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    color: var(--color-text-muted) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

/* Badges inside ticket row — refine to prototype chip look */
#ticket-list .ticket-item .badge {
    font-size: 10px !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    border: 1px solid var(--color-border) !important;
    background: #fff !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    font-weight: 500 !important;
}

#ticket-list .ticket-item .badge-market {
    font-family: var(--font-mono) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

#ticket-list .ticket-item .badge.badge-new     { color: #0369A1; border-color: #BAE6FD; background: var(--color-primary-light) !important; }
#ticket-list .ticket-item .badge.badge-open    { color: var(--color-primary-dark); border-color: #BFDBFE; background: var(--color-primary-light) !important; }
#ticket-list .ticket-item .badge.badge-pending { color: var(--color-cta-text); border-color: #FDE68A; background: #FFFBEB !important; }
#ticket-list .ticket-item .badge.badge-in_progress,
#ticket-list .ticket-item .badge.badge-in-progress { color: #5B21B6; border-color: #DDD6FE; background: var(--color-primary-light) !important; }
#ticket-list .ticket-item .badge.badge-solved  { color: #065F46; border-color: #A7F3D0; background: #ECFDF5 !important; }
#ticket-list .ticket-item .badge.badge-refund-open { color: var(--color-danger-text); border-color: #FECACA; background: #FEF2F2 !important; }

/* ═════════ Ticket Detail — header, subject, customer strip ═════════ */
#ticket-detail .detail-header {
    padding: 22px 26px 16px !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

#ticket-detail #detail-ticket-id {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--color-text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

#ticket-detail #detail-subject {
    font-family: var(--cs-font-heading) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    margin: 6px 0 14px !important;
    color: var(--color-text) !important;
    text-wrap: balance;
}

#ticket-detail .detail-meta {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

#ticket-detail #detail-created {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    color: var(--color-text-subtle) !important;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

#ticket-detail .detail-meta .badge {
    font-size: 10px !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    border: 1px solid var(--color-border) !important;
    background: #fff !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    font-weight: 500 !important;
}

#ticket-detail .detail-meta .badge-market {
    font-family: var(--font-mono) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* ═════════ Customer profile — avatar gradient + layout ═════════ */
#ticket-detail #customer-profile {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 26px !important;
    background: var(--color-surface-soft-cs) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

#ticket-detail #customer-profile .customer-avatar {
    width: 36px !important;
    height: 36px !important;
    background: linear-gradient(135deg, var(--color-primary), #1E40AF) !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3) !important;
    flex-shrink: 0;
}

#ticket-detail #customer-profile .customer-name {
    font-weight: 600 !important;
    font-size: 13.5px !important;
    letter-spacing: -0.005em;
    color: var(--color-text) !important;
}

#ticket-detail #customer-profile .customer-email {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    color: var(--color-text-muted) !important;
}

/* ═════════ Compose — mode tabs, editor, AI draft button ═════════ */
.compose-section {
    background: var(--color-surface-soft-cs) !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 16px 26px 22px !important;
}

.compose-mode-tabs {
    display: flex !important;
    gap: 0 !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: transparent !important;
    padding: 0 !important;
}

.compose-mode-tabs .compose-tab {
    background: transparent !important;
    border: 0 !important;
    padding: 8px 0 !important;
    margin-right: 20px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--color-text-muted) !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
    border-radius: 0 !important;
    transition: var(--transition-smooth);
    letter-spacing: -0.005em;
}

.compose-mode-tabs .compose-tab:hover {
    color: var(--color-text) !important;
    background: transparent !important;
}

.compose-mode-tabs .compose-tab.active {
    color: var(--color-text) !important;
    border-bottom-color: var(--color-text) !important;
    background: transparent !important;
}

.compose-mode-tabs #tab-note.active {
    color: var(--color-cta-text) !important;
    border-bottom-color: var(--color-warning) !important;
}

.compose-editable {
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 14px 16px !important;
    min-height: 160px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: var(--color-text) !important;
    outline: none !important;
    white-space: pre-wrap !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02) !important;
    transition: var(--transition-smooth) !important;
}

.compose-editable:focus {
    border-color: var(--color-text) !important;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06) !important;
}

.compose-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--color-text-subtle);
}

/* Generate AI Draft — dark + yellow accent button (prototype .cs-btn-accent) */
#btn-generate-draft {
    background: #111827 !important;
    color: #FCD34D !important;
    border: 1px solid #111827 !important;
    border-radius: var(--cs-radius-btn) !important;
    padding: 7px 13px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: var(--transition-smooth);
}

#btn-generate-draft::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FCD34D;
    box-shadow: 0 0 8px #FCD34D;
    margin-right: 2px;
}

#btn-generate-draft:hover {
    background: #000 !important;
}

/* AI draft banner / notices (amber tint + left border) */
.compose-section .draft-banner,
.compose-section .ai-draft-banner,
.compose-section [class*="draft-notice"] {
    background: #FFFBEB !important;
    border: 1px solid #FDE68A !important;
    border-left: 3px solid var(--color-warning) !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
    color: var(--color-cta-text) !important;
}

/* Note mode banner — same amber treatment */
.compose-section .note-mode-banner,
#compose-note-mode .note-mode-banner {
    background: #FFFBEB !important;
    border: 1px solid #FDE68A !important;
    border-left: 3px solid var(--color-warning) !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
    color: var(--color-cta-text) !important;
}

/* Quality bar (shows after AI draft generated) — prototype: label + track + value */
#quality-score.quality-bar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 12px 2px !important;
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--color-text-muted) !important;
}

#quality-score.quality-bar.hidden {
    display: none !important;
}

#quality-score .progress-bar {
    flex: 1 !important;
    height: 4px !important;
    background: var(--color-border-light) !important;
    border-radius: 999px !important;
    overflow: hidden;
    position: relative;
    padding: 0 !important;
}

#quality-score .progress-fill {
    height: 100% !important;
    background: var(--color-warning) !important;
    border-radius: 999px !important;
    transition: width 600ms var(--cs-ease-premium) !important;
}

#quality-score #quality-value {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums;
    color: var(--color-text) !important;
    font-size: 11px !important;
    text-transform: none;
    letter-spacing: 0;
    min-width: 32px;
    text-align: right;
}

#quality-score #btn-rescore {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
    border-radius: var(--cs-radius-btn) !important;
    text-transform: none;
    letter-spacing: 0;
}

/* ═════════ Conversation comments — dot prefix + variant colors ═════════ */
#conversation .comment,
#conversation-notes .comment {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--cs-radius-card) !important;
    padding: 14px 16px !important;
    background: var(--color-card) !important;
    margin-bottom: 10px !important;
}

#conversation .comment .comment-author,
#conversation-notes .comment .comment-author {
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: -0.005em;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#conversation .comment .comment-author::before,
#conversation-notes .comment .comment-author::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    background: var(--color-text-subtle);
    flex-shrink: 0;
}

#conversation .comment.comment-customer .comment-author::before { background: var(--color-primary); }

#conversation-notes .comment,
#conversation .comment.comment-internal {
    background: #FFFBEB !important;
    border-color: #FDE68A !important;
    border-left: 3px solid var(--color-warning) !important;
}

#conversation-notes .comment .comment-author::before,
#conversation .comment.comment-internal .comment-author::before { background: var(--color-warning); }

#conversation .comment.comment-agent .comment-author::before,
#conversation .comment.comment-support .comment-author::before { background: var(--color-success); }

#conversation .comment .comment-time,
#conversation-notes .comment .comment-time {
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    color: var(--color-text-subtle) !important;
    font-variant-numeric: tabular-nums;
}

/* ═════════ Compose action buttons — prototype button variants ═════════
 * Map existing .btn-* classes to prototype's cs-btn-* look, targeting the
 * specific IDs in .compose-actions so we don't affect other .btn-* users
 * (e.g. header, L3 save bar, ticket toolbar).
 */
.compose-actions .btn,
.compose-actions button[id^="btn-"] {
    border-radius: var(--cs-radius-btn) !important;
    padding: 7px 13px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: var(--transition-smooth) !important;
    border: 1px solid transparent !important;
}

/* Reply & Pending — primary blue with subtle inset highlight */
#btn-reply-pending {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(37, 99, 235, 0.24) !important;
}

#btn-reply-pending:hover {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 12px rgba(37, 99, 235, 0.32) !important;
}

/* Reply & Open — amber warning */
#btn-reply-open {
    background: #fff !important;
    color: var(--color-cta-text) !important;
    border-color: #FDE68A !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

#btn-reply-open:hover {
    background: var(--color-warning-soft) !important;
    border-color: var(--color-warning) !important;
}

/* Reply & Solved — green outline filled on hover */
#btn-reply-solved {
    background: #fff !important;
    color: #065F46 !important;
    border-color: #A7F3D0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

#btn-reply-solved:hover {
    background: var(--color-success-light) !important;
    border-color: #6EE7B7 !important;
}

/* Escalate — neutral outline */
#btn-escalate {
    background: #fff !important;
    color: var(--color-text) !important;
    border-color: var(--color-border-strong) !important;
}

#btn-escalate:hover {
    background: var(--color-muted) !important;
    border-color: var(--color-text-subtle) !important;
}

/* Reject Draft / Delete / Spam — danger outline (red border, white bg) */
#btn-reject-draft,
#btn-delete-ticket,
#btn-mark-spam {
    background: #fff !important;
    color: var(--color-danger) !important;
    border-color: #FECACA !important;
    padding: 7px 13px !important;
    font-size: 12.5px !important;
}

#btn-reject-draft:hover,
#btn-delete-ticket:hover,
#btn-mark-spam:hover {
    background: var(--color-danger-light) !important;
    border-color: var(--color-danger) !important;
}

/* Save Internal Note — neutral outline with pencil */
#btn-internal-note {
    background: #fff !important;
    color: var(--color-text) !important;
    border-color: var(--color-border-strong) !important;
    border-radius: var(--cs-radius-btn) !important;
}

#btn-internal-note:hover {
    background: var(--color-muted) !important;
    border-color: var(--color-text-subtle) !important;
}

/* Compose actions row spacing (prototype: 8px gap, wrap allowed, flex divider) */
.compose-actions-row,
.compose-actions .compose-actions-primary {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* ═════════ UX unification 2026-04-18 ═════════
 * Audit found 3-font mix, radius inconsistency, narrow search input.
 */

/* Unify body text typography to Pretendard (prototype spec).
 * dashboard.css --font-body = 'Fira Sans' → forces Fira Sans on labels/subjects.
 * Override on key CS components to use Pretendard. Mono preserved for IDs/times. */
.header .header-title,
.kpi-strip .kpi-label,
#ticket-list .ticket-subject,
#ticket-detail .ticket-subject,
.filter-tab,
.compose-tab,
.conv-tab,
.badge:not(.badge-market):not(.cs-badge-ai):not(.cs-badge-market) {
    font-family: var(--cs-font-heading) !important;
}

/* Unify primary button radius to 7px (prototype --cs-radius-btn).
 * dashboard.css sets .btn-primary radius 8px; my overrides use 7px elsewhere.
 * Align all main action buttons. */
.btn-primary:not(.btn-hamburger),
#ticket-detail .btn-primary,
.compose-actions .btn {
    border-radius: var(--cs-radius-btn) !important;
}

/* Filter pill tabs radius — prototype uses 5px inner but 7px outer container.
 * Current 5px is OK but make outer container radius match button radius pattern. */
.filter-market-tabs {
    border-radius: var(--cs-radius-btn) !important;
}

/* Search input — allow flex-grow so long mixed-script queries are readable.
 * Audit: width stuck at 120px on narrow (flex: none default). */
#filter-search {
    flex: 1 1 200px !important;
    min-width: 200px !important;
}

/* Date preset chips (Today / Yesterday / 7d / 30d / Week) — keep chips on
 * one line within the presets group, but allow the group itself (and
 * sibling items in filter-row-2) to wrap to a new line when viewport is
 * too narrow. Previously flex-shrink:0 forced row to overflow at 768-900vw. */
.date-presets {
    flex-wrap: nowrap !important;   /* chips stay in one line inside group */
    flex-shrink: 0 !important;
    gap: 4px !important;
}

/* Filter row-2 — allow wrapping so Today/Week chips + date inputs + search +
 * controls flow to multiple lines at narrow viewports instead of horizontal
 * scroll / body overflow. Previously row-2 used nowrap default → caused
 * 449px overflow at 800vw (measured by audit). */
.filters .filter-row-2 {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
}

/* At narrow viewports (≤900), stack row-2 segments vertically so everything
 * is reachable without horizontal scroll. */
@media (max-width: 900px) {
    .filters .filter-row-2 .date-group,
    .filters .filter-row-2 .date-presets {
        flex-basis: 100%;
    }
    .filters .filter-row-2 #filter-search {
        flex-basis: 100%;
        min-width: 0 !important;
    }
}

.date-preset {
    padding: 5px 9px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

/* Active preset — match prototype dark-active pill tabs treatment */
.date-preset.active {
    background: var(--color-header-bg) !important;
    border-color: var(--color-header-bg) !important;
    color: #fff !important;
    font-weight: 600;
}

/* ═════════ Conversation tabs (Replies / Internal Notes) ═════════
 * Prototype: underlined tabs, dark 2px border on active. Notes tab shows
 * amber border when active (matches the amber-tinted note variant).
 */
.conv-tabs {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: transparent !important;
    padding: 0 26px !important;
    margin: 0 !important;
}

.conv-tabs .conv-tab {
    background: transparent !important;
    border: 0 !important;
    padding: 10px 0 !important;
    margin-right: 24px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--color-text-muted) !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
    border-radius: 0 !important;
    letter-spacing: -0.005em !important;
    transition: var(--transition-smooth) !important;
}

.conv-tabs .conv-tab:hover {
    color: var(--color-text) !important;
    background: transparent !important;
}

.conv-tabs .conv-tab.active {
    color: var(--color-text) !important;
    border-bottom-color: var(--color-text) !important;
}

.conv-tabs #conv-tab-notes.active {
    color: var(--color-cta-text) !important;
    border-bottom-color: var(--color-warning) !important;
}

.conv-tabs .conv-tab-count {
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    color: var(--color-text-subtle) !important;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}

/* ═════════ Detail — status change row + nav buttons ═════════
 * Align radius 7px + refined outline look to match .compose-actions buttons.
 */
.detail-actions-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 26px !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    background: transparent !important;
}

.detail-actions-bar label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--color-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#detail-status-select {
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--cs-radius-btn) !important;
    padding: 6px 10px !important;
    font-size: 12.5px !important;
    min-height: 32px !important;
    color: var(--color-text) !important;
    font-family: inherit !important;
}

#detail-status-select:hover {
    border-color: var(--color-border-strong) !important;
}

#btn-status-change {
    background: #fff !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--cs-radius-btn) !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

#btn-status-change:hover {
    background: var(--color-muted) !important;
    border-color: var(--color-text-subtle) !important;
}

/* Detail prev/next nav — ghost style */
#ticket-detail .detail-nav-btn {
    background: transparent !important;
    color: var(--color-text-muted) !important;
    border: 1px solid transparent !important;
    border-radius: var(--cs-radius-btn) !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
    min-width: 28px;
}

#ticket-detail .detail-nav-btn:hover {
    background: var(--color-muted) !important;
    color: var(--color-text) !important;
}

/* ═════════ Filter + customer selects — radius 7px consistency ═════════ */
#filter-status,
#filter-market,
#filter-category,
#filter-response,
#filter-agent {
    border-radius: var(--cs-radius-btn) !important;
    padding: 6px 10px !important;
    font-size: 12.5px !important;
    min-height: 32px !important;
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
}

#filter-status:hover,
#filter-market:hover,
#filter-category:hover,
#filter-response:hover,
#filter-agent:hover {
    border-color: var(--color-border-strong) !important;
}

#customer-profile .platform-lang-select {
    border-radius: var(--cs-radius-btn) !important;
    padding: 4px 8px !important;
    font-size: 11.5px !important;
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
}

/* ═════════ L3 master row — gradient fix (selector had too-specific scope) ═════════ */
.l3-master-row {
    background: linear-gradient(to right, var(--color-bg), var(--color-bg) 50%, var(--color-warning-soft) 200%) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--cs-radius-card) !important;
}

/* ═════════ L3 Settings page — prototype polish ═════════ */
#l3-settings-page .l3-card {
    background: var(--color-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-xs) !important;
    overflow: hidden !important;
}

#l3-settings-page .l3-card-header {
    padding: 16px 22px !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    /* Prototype: white bg + dark text. Override l3-settings.css blue gradient. */
    background: var(--color-card) !important;
    background-image: none !important;
    color: var(--color-text) !important;
}

#l3-settings-page .l3-card-header h3 {
    margin: 0 !important;
    font-family: var(--cs-font-heading) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    color: var(--color-text) !important;
}

#l3-settings-page .l3-card-header .ks-section-subtitle,
#l3-settings-page .l3-card-header small {
    color: var(--color-text-muted) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
}

#l3-settings-page .l3-card-body {
    padding: 18px 22px !important;
}

/* Toggle — dark header-bg when on (prototype .cs-toggle.on) */
#l3-settings-page .ks-toggle-dark input[type="checkbox"]:checked ~ .ks-slider,
#l3-settings-page .ks-toggle:checked ~ .ks-slider {
    background: var(--color-header-bg) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Master row layout */
#l3-settings-page .l3-master-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 14px 16px !important;
    background: linear-gradient(to right, var(--color-bg), var(--color-bg) 50%, var(--color-warning-soft) 200%) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--cs-radius-card) !important;
    margin-bottom: 18px !important;
}

/* Emergency stop button — red + bold */
#l3-settings-page .btn-emergency,
.btn-emergency {
    background: var(--color-danger) !important;
    color: #fff !important;
    border: 1px solid var(--color-danger) !important;
    border-radius: var(--cs-radius-btn) !important;
    padding: 9px 16px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: -0.005em !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

#l3-settings-page .btn-emergency:hover,
.btn-emergency:hover {
    background: #DC2626 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(239, 68, 68, 0.32) !important;
}

/* Back button in L3 header */
#l3-settings-page .header .btn-back {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

#l3-settings-page .header .btn-back:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

/* ═════════ Charts overview (empty detail placeholder) ═════════ */
.chart-overview {
    padding: 16px !important;
}

.chart-overview .chart-overview-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

.chart-overview .chart-overview-header h3 {
    margin: 0 !important;
    font-family: var(--cs-font-heading) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}

/* Chart cards within overview — prototype .cs-chart-card */
.chart-overview [class*="chart-card"],
.chart-overview .chart-box {
    background: var(--color-surface-soft-cs) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--cs-radius-card) !important;
    padding: 16px !important;
}

.chart-overview [class*="chart-card"] h4,
.chart-overview .chart-box h4 {
    margin: 0 0 4px !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--color-text-muted) !important;
    font-weight: 600 !important;
}

/* Inquiry/Platform toggle (top-right of chart-overview) */
.chart-overview .toggle-btn {
    background: transparent !important;
    border: 0 !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--color-text-muted) !important;
    border-radius: 5px !important;
    transition: var(--transition-smooth);
}

.chart-overview .toggle-btn.active {
    background: var(--color-header-bg) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;
}

/* ── Print mode ── */
@media print {
    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .handoff-toast, .handoff-banner-close, button[class*="close"] { display: none !important; }
    .handoff-banner, .handoff-card { page-break-inside: avoid; box-shadow: none; }
}