/* Shared visual language for academy administration; preserves component behavior. */
:root, :root[data-theme="light"] {
    --bg: #f3f7fb;
    --surface: #fff;
    --surface-2: #f4f5f7;
    --text: #20323d;
    --muted: #7b8790;
    --line: #e1e5e9;
    --brown: #008f68;
    --brown-dark: #007957;
    --gold: #008f68;
    --gold-soft: #e5f8f1;
    --green: #008f68;
    --primary: var(--brown);
    --accent: var(--gold);
    --surface-strong: var(--surface);
    --shadow: 0 8px 28px rgb(30 55 80 / 5%);
    --radius: 18px;
}
:root[data-theme="dark"], :root:not([data-theme]) {
    --bg: #090f15;
    --surface: #101923;
    --surface-2: #141f2a;
    --text: #f2f6f8;
    --muted: #8b9aa7;
    --line: #1e2b37;
    --brown: #00d492;
    --brown-dark: #19dfa4;
    --gold: #00d492;
    --gold-soft: #0c332b;
    --green: #00d492;
    --shadow: 0 8px 28px rgb(0 0 0 / 22%);
}
html body { background: var(--bg); font-family: Cairo, "Segoe UI", Tahoma, Arial, sans-serif; }
:root[data-theme] body { background: var(--bg); }
:root[data-theme] .nav-link span, :root[data-theme] .nav-group-toggle > span { color: var(--muted); }
:root[data-theme] .nav-link.active span, :root[data-theme] .nav-group[open] > .nav-group-toggle > span { color: var(--brown); }
.sidebar { background: var(--surface); color: var(--text); border-inline-start: 1px solid var(--line); box-shadow: none; }
.brand { border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.brand small, .nav-heading, .nav-group-toggle > i { color: var(--muted); }
.sidebar-user small { color: var(--muted); }
.sidebar-user { border-color: var(--line); }
.brand-logo { box-shadow: none; border-color: var(--line); background: var(--surface); }
.nav-list { gap: 6px; }
.nav-link, .nav-group-toggle { color: var(--muted); background: transparent; border-radius: 12px; font-weight: 600; }
.nav-link span, .nav-group-toggle > span { color: inherit; }
.nav-link:hover, .nav-link.active, .nav-group-toggle:hover, .nav-group[open] > .nav-group-toggle { color: var(--brown-dark); background: var(--gold-soft); transform: none; }
.nav-link.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brown) 15%, transparent); }
.nav-group[open] { background: transparent; border-color: transparent; }
.nav-link small { color: var(--brown-dark); background: var(--gold-soft); }
.topbar { min-height: 72px; padding-block: 14px; background: var(--bg); backdrop-filter: none; }
.topbar h1 { font-size: 17px; }
.icon-button { box-shadow: none; border: 1px solid var(--line); border-radius: 12px; }
.panel, .stat-card { box-shadow: var(--shadow); background: var(--surface); border: 1px solid var(--line); }
:root[data-theme] .stat-card.gold, :root[data-theme] .stat-card.brown, :root[data-theme] .stat-card.green, :root[data-theme] .stat-card.blue { border-top: 1px solid var(--line); }
.control-center-hero, .employee-hero, .employee-activity-hero { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.control-center-card { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.control-center-card-icon { box-shadow: none; color: var(--brown-dark); background: var(--gold-soft); border-color: var(--line); }
.employee-hero::after, .employee-activity-hero::after { display: none; }
.stat-card::after { display: none; }
.stat-card.gold, .stat-card.brown, .stat-card.green, .stat-card.blue { border-top: 1px solid var(--line); color: var(--brown); }
.button, .btn { border-radius: 12px; box-shadow: none; }
.button.primary, .button.quick-reply-primary { color: #fff; background: var(--brown); box-shadow: none; }
.button.primary:hover, .button.quick-reply-primary:hover { color: #fff; background: var(--brown-dark); }
.button.secondary, .button.quick-reply-secondary { color: var(--text); background: var(--surface-2); border-color: var(--line); }
.whatsapp-web-theme .wa-web-shell { --wa-pane: var(--surface); --wa-pane-2: var(--surface-2); --wa-pane-3: var(--surface-2); --wa-text: var(--text); --wa-muted: var(--muted); --wa-line: var(--line); --wa-canvas: var(--bg); --wa-incoming: var(--surface); --wa-outgoing: var(--gold-soft); --wa-green: var(--brown); --wa-green-strong: var(--brown); }
.wa-channel-strip, .inbox-active-channel { background: var(--surface-2); }
.wa-filter-row .active { background: var(--gold-soft); color: var(--brown-dark); }
.wa-avatar { color: var(--brown-dark); background: var(--gold-soft); }
.wa-bubble { color: var(--text); }
.ai-agent-hero, .ai-corrections-hero, .contact-directory-hero { color: var(--text); background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.ai-agent-brain { color: var(--brown-dark); background: var(--gold-soft); border-color: var(--line); box-shadow: none; border-radius: 20px; transform: none; }
.agent-status.is-on, .ai-provider-chip.is-ready, .ai-agent-privacy strong { color: var(--brown-dark); }
.agent-status.is-on i { box-shadow: none; }
.badge.success, .badge.gold { color: var(--brown-dark); background: var(--gold-soft); }
.employee-stats article::after { display: none; }
.ai-agent-hero { grid-template-columns: 160px minmax(0, 1fr); min-height: 180px; }
:root body.ai-agent-theme, :root body.ai-corrections-theme { background: var(--bg); }
.ai-agent-hero-copy { padding: 24px; }
.ai-agent-hero-copy h2 { font-size: 26px; }
.ai-agent-hero-copy p { font-size: 13px; }
.ai-agent-hero-art { min-height: 180px; }
.ai-agent-hero-art::before, .ai-agent-orbit, .ai-agent-node { display: none; }
@media (max-width: 820px) { .ai-agent-hero { grid-template-columns: minmax(0, 1fr); } .ai-agent-hero-art { display: none; } .ai-agent-layout { grid-template-columns: minmax(0, 1fr); } .ai-agent-guide { position: static; } }
.platform-shell, .platform-topbar { color: var(--text); background: var(--bg); }
.platform-sidebar { color: var(--text); background: var(--surface); border-color: var(--line); }
.platform-nav a { color: var(--muted); background: var(--surface-2); }
.platform-nav a:hover, .platform-nav a.active { color: var(--brown-dark); background: var(--gold-soft); border-color: var(--line); }
.platform-stat strong { color: var(--text); }
.platform-only { color: var(--brown-dark); border-color: var(--line); background: var(--gold-soft); }
.wa-chat-pane, .wa-messages { background-color: var(--bg); }
.wa-list-header, .wa-chat-header, .wa-composer { color: var(--text); background: var(--surface); border-color: var(--line); }
.wa-forward-modal > form, .wa-ai-correction-modal > form { color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.wa-forward-modal header, .wa-forward-modal footer { background: var(--surface-2); border-color: var(--line); }
.wa-chat-search, .wa-list-search { background: var(--surface-2); color: var(--text); border-color: var(--line); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { border-radius: 12px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }
table thead { background: var(--surface-2); }
.contact-directory-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
.contact-directory-total { grid-column: 1 / -1; min-width: 0; justify-content: space-between; }
.contact-directory-table-panel { overflow-x: auto; }
.contact-directory-search, .contact-directory-search label { min-width: 0; }
.contact-directory-avatar { color: var(--brown-dark); background: var(--gold-soft); box-shadow: none; }
:root .auth-gateway { color: var(--text); background: var(--bg); }
.auth-gateway::before { display: none; }
.auth-gateway-card { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.auth-academy-brand img { background: var(--surface); border-color: var(--line); box-shadow: none; }
.auth-academy-brand strong, .auth-heading h1, .auth-approval-note strong { color: var(--text); }
.auth-academy-brand small, .auth-academy-description, .auth-heading p, .auth-form label, .auth-contact-line, .auth-contact-line b, .auth-approval-note small { color: var(--muted); }
.auth-tabs, .auth-login-methods { background: var(--surface-2); border-color: var(--line); }
.auth-tabs button, .auth-login-methods button { color: var(--muted); }
.auth-tabs button.active, .auth-login-methods button.active { color: var(--brown-dark); background: var(--gold-soft); border-color: var(--line); box-shadow: none; }
:root .auth-form input:not([type="checkbox"]), :root .auth-form select { color: var(--text); background: var(--surface-2); border-color: var(--line); }
.auth-approval-note { color: var(--muted); background: var(--gold-soft); border-color: var(--line); }
.login-language-switch button { color: var(--text); background: var(--surface); border-color: var(--line); }
:root:not([data-theme="light"]) .button.primary, :root:not([data-theme="light"]) .button.quick-reply-primary { color: #06251d; }
@media (max-width: 600px) { .contact-directory-toolbar { grid-template-columns: minmax(0, 1fr); } .contact-directory-total { grid-column: auto; } }
table th { color: var(--muted); }
table td, table th { border-color: var(--line); }
:root table thead th, :root .data-table thead th { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
:root table tbody td, :root .data-table tbody td { border-color: var(--line); }
:root table tbody tr:hover, :root .data-table tbody tr:hover { background: var(--gold-soft); }
@media (max-width: 820px) { .topbar { padding: 12px 16px; gap: 10px; flex-wrap: wrap; } .content { padding: 18px 16px 32px; } .panel-header { flex-wrap: wrap; } .button { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; } }

/* Keep report visualizations on the shared green and neutral palette. */
:root .report-kpi.purple, :root .report-kpi.blue, :root .report-kpi.lavender,
:root .report-kpi.green, :root .report-kpi.pink { --kpi-color: var(--brown); }
:root .report-kpi::after { display: none; }
:root .report-line-chart .chart-line { stroke: var(--brown); filter: none; }
:root .report-line-chart .chart-point { fill: var(--surface); stroke: var(--brown); }
:root .report-line-chart svg stop[stop-color] { stop-color: var(--brown) !important; }
:root .report-card .funnel-row { --funnel-color: var(--brown) !important; }
:root .funnel-track span,
:root .distribution-row > div:last-child span,
:root .distribution-list.sources .distribution-row > div:last-child span {
    background: var(--brown);
}

/* Flatten the older neon gradients so the dark workspace matches ConvoBest. */
:root:not([data-theme="light"]) .sidebar {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: none;
}
:root:not([data-theme="light"]) .nav-link,
:root:not([data-theme="light"]) .nav-group-toggle { background: transparent; }
:root:not([data-theme="light"]) .nav-link:hover,
:root:not([data-theme="light"]) .nav-link.active,
:root:not([data-theme="light"]) .nav-group-toggle:hover,
:root:not([data-theme="light"]) .nav-group[open] > .nav-group-toggle {
    color: var(--brown-dark);
    background: var(--gold-soft);
    box-shadow: none;
}
:root:not([data-theme="light"]) .topbar {
    background: var(--bg);
    border-color: var(--line);
    box-shadow: none;
}
:root:not([data-theme="light"]) :is(
    .panel, .stat-card, .report-card, .report-kpi, .table-panel, .table-wrap,
    .form-panel, .profile-card, .role-card, .settings-hub-card, .broadcast-card,
    .channel-card, .chat-panel, .quick-reply-card, .quick-reply-filters,
    .quick-reply-pagination, .quick-reply-dialog, .lead-stage-customer,
    .lead-stage-filters, .lead-journey-nav, .lead-stage-empty, .automation-card,
    .automation-stats article, .automation-filters, .automation-dialog,
    .template-manager-card, .transfer-dialog, .qr-connect-panel
) {
    color: var(--text);
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow);
}
:root:not([data-theme="light"]) .welcome-card,
:root:not([data-theme="light"]) .quick-replies-hero,
:root:not([data-theme="light"]) .lead-stage-hero,
:root:not([data-theme="light"]) .automation-hero,
:root:not([data-theme="light"]) .login-story {
    color: var(--text);
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow);
}
:root:not([data-theme="light"]) .button.primary,
:root:not([data-theme="light"]) .quick-reply-primary,
:root:not([data-theme="light"]) .lead-move-button {
    color: #05251b;
    background: var(--brown);
    border-color: transparent;
    box-shadow: none;
}