/* Painel / Contato / Admin / Monitoramento — Volt localhost (light + dark).
   Tokens só; sem navy/slate glass hardcoded do Hero Lab. */

html.volt-app .hl-account,
html.volt-app .hl-support,
html.volt-app .hl-admin,
html.volt-app .mon-page {
    --volt-card: #fff;
    --volt-card-line: var(--volt-gray-200, #E5E7EB);
    --volt-card-border: 0;
    --volt-card-shadow: var(--volt-shadow-lg, 0 1rem 3rem rgba(17, 24, 39, 0.175));
    --volt-chip-bg: var(--volt-gray-100, #F2F4F6);
    --volt-accent-soft: var(--volt-orange-soft, #fff4eb);
    --volt-ink: var(--volt-gray-800, #1F2937);
    --volt-muted: var(--volt-gray-500, #6B7280);
    --ds-ink: var(--volt-gray-800, #1F2937);
    --ds-ink-body: var(--volt-gray-700, #374151);
    --ds-ink-muted: var(--volt-gray-500, #6B7280);
    --ds-brand-midnight: var(--volt-gray-800, #1F2937);
    --text-primary: var(--volt-gray-700, #374151);
    --text-strong: var(--volt-gray-800, #1F2937);
    --text-muted: var(--volt-gray-500, #6B7280);
    --bg-elevated: #fff;
    --bg-secondary: var(--volt-gray-100, #F2F4F6);
    --border-subtle: var(--volt-gray-200, #E5E7EB);
    --hl-ink: var(--volt-gray-800, #1F2937);
    --hl-mute: var(--volt-gray-500, #6B7280);
    --hl-line: var(--volt-gray-200, #E5E7EB);
    --hl-panel: #fff;
    --hl-accent: var(--volt-orange, #ff6600);
    --page-surface: var(--volt-card);
    --page-input: var(--volt-gray-50, #F9FAFB);
    --page-hover: var(--volt-gray-50, #F9FAFB);
    --sem-ok-fg: var(--ds-success-text);
    --sem-ok-bg: color-mix(in srgb, var(--ds-success) 12%, var(--volt-card));
    --sem-ok-line: color-mix(in srgb, var(--ds-success) 32%, transparent);
    --sem-warn-fg: var(--ds-warning-text);
    --sem-warn-bg: color-mix(in srgb, var(--ds-warning-text) 12%, var(--volt-card));
    --sem-warn-line: color-mix(in srgb, var(--ds-warning-text) 32%, transparent);
    --sem-bad-fg: var(--ds-danger-text);
    --sem-bad-bg: color-mix(in srgb, var(--ds-danger) 12%, var(--volt-card));
    --sem-bad-line: color-mix(in srgb, var(--ds-danger) 32%, transparent);
    --sem-info-fg: var(--ds-info-text);
    --sem-info-bg: color-mix(in srgb, var(--ds-info) 12%, var(--volt-card));
    --sem-info-line: color-mix(in srgb, var(--ds-info) 32%, transparent);
    color: var(--volt-ink);
    font-family: "Inter", system-ui, sans-serif;
}

html.volt-app[data-theme="dark"] .hl-account,
html.volt-app[data-theme="dark"] .hl-support,
html.volt-app[data-theme="dark"] .hl-admin,
html.volt-app[data-theme="dark"] .mon-page {
    --volt-card: #202020;
    --volt-card-line: #363636;
    --volt-card-border: 1px solid #363636;
    --volt-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    --volt-chip-bg: color-mix(in srgb, #363636 28%, #202020);
    --volt-accent-soft: rgba(255, 102, 0, 0.12);
    --volt-ink: #f1f5f9;
    --volt-muted: #a1a1aa;
    --ds-ink: #f1f5f9;
    --ds-ink-body: #e8edf5;
    --ds-ink-muted: #a1a1aa;
    --ds-brand-midnight: #202020;
    --text-primary: #e8edf5;
    --text-strong: #f1f5f9;
    --text-muted: #a1a1aa;
    --bg-elevated: #202020;
    --bg-secondary: #171717;
    --border-subtle: #363636;
    --hl-ink: #f1f5f9;
    --hl-mute: #a1a1aa;
    --hl-line: #363636;
    --hl-panel: #202020;
    --page-surface: #202020;
    --page-input: #171717;
    --page-hover: #292929;
}

html.volt-app .hl-account .hl-h1,
html.volt-app .hl-support .hl-h1,
html.volt-app .hl-admin .hl-h1,
html.volt-app .mon-page .app-shell-title {
    font-family: "Inter", system-ui, sans-serif;
    letter-spacing: -0.03em;
    color: var(--volt-ink);
}

html.volt-app .hl-account .hl-lede,
html.volt-app .hl-support .hl-lede,
html.volt-app .hl-admin .hl-lede,
html.volt-app .mon-page .app-shell-subtitle,
html.volt-app .mon-page .dash-eyebrow,
html.volt-app .mon-page .mon-ui-ver {
    color: var(--volt-muted);
}

html.volt-app .hl-account .hl-btn-primary,
html.volt-app .hl-support .hl-btn-primary,
html.volt-app .hl-admin .hl-btn-primary,
html.volt-app .mon-page .mon-refresh {
    background: var(--volt-orange, #ff6600);
    border-color: var(--volt-orange, #ff6600);
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 102, 0, 0.25);
}

html.volt-app .hl-account .hl-btn-ghost,
html.volt-app .hl-support .hl-btn-ghost,
html.volt-app .hl-admin .hl-btn-ghost {
    background: var(--volt-card);
    border: 1px solid var(--volt-card-line);
    color: var(--volt-ink);
    box-shadow: none;
}

/* —— Cards / heros —— */
html.volt-app .hl-account-hero,
html.volt-app .hl-admin-hero {
    background:
        radial-gradient(circle at 76% 20%, var(--volt-accent-soft), transparent 34%),
        transparent;
    border-bottom-color: var(--hl-line);
}

html.volt-app .hl-support-hero {
    background:
        radial-gradient(ellipse 50% 40% at 20% 20%, var(--volt-accent-soft), transparent 50%),
        transparent;
}

html.volt-app .hl-account-sidebar,
html.volt-app .hl-account-card,
html.volt-app .hl-admin-kpi,
html.volt-app .hl-admin-card,
html.volt-app .hl-support-form-wrap,
html.volt-app .hl-support .hl-tool-card,
html.volt-app .mon-page .mon-card {
    background: var(--page-surface);
    border: var(--volt-card-border);
    border-color: var(--volt-card-line);
    box-shadow: var(--volt-card-shadow);
    color: var(--volt-ink);
}

html.volt-app .hl-admin-kpi.is-highlight {
    border: 1px solid var(--sem-ok-line);
    background: var(--sem-ok-bg);
    box-shadow: var(--volt-card-shadow);
}

html.volt-app .hl-admin-card-head,
html.volt-app .hl-admin-table thead th {
    background: transparent;
    border-color: var(--hl-line);
    color: var(--hl-mute);
}

html.volt-app .hl-admin-table tbody tr:hover td {
    background: var(--page-hover);
}

html.volt-app .hl-support .hl-tool-card {
    border: 1px solid var(--volt-card-line);
}

html.volt-app .hl-support .hl-tool-card:hover {
    border-color: color-mix(in srgb, var(--volt-orange, #ff6600) 45%, var(--volt-card-line));
    background: var(--volt-accent-soft);
}

html.volt-app .hl-support .hl-tool-card h3 {
    color: var(--volt-ink);
}

html.volt-app .hl-support .hl-tool-card p {
    color: var(--volt-muted);
}

html.volt-app .hl-tool-icon {
    background: var(--volt-accent-soft);
    color: var(--volt-orange, #ff6600);
}

/* —— Conta: nav, status, listas —— */
html.volt-app .hl-account-status,
html.volt-app .hl-admin-badge {
    background: var(--volt-chip-bg);
    border-color: var(--volt-card-line);
    color: var(--volt-muted);
}

html.volt-app .hl-account-status.is-pro,
html.volt-app .hl-account-access-list b.is-open {
    color: var(--volt-orange, #ff6600);
    border-color: color-mix(in srgb, var(--volt-orange, #ff6600) 35%, transparent);
    background: var(--volt-accent-soft);
}

html.volt-app .hl-account-nav a,
html.volt-app .hl-admin-action {
    color: var(--volt-ink);
    background: transparent;
    border-color: var(--volt-card-line);
}

html.volt-app .hl-account-nav a:hover,
html.volt-app .hl-admin-action:hover {
    color: var(--volt-ink);
    background: var(--page-hover);
}

html.volt-app .hl-account-nav a i {
    color: var(--volt-muted);
}

html.volt-app .hl-account-logout,
html.volt-app .hl-account-logout i,
html.volt-app .hl-account-logout:hover {
    color: var(--sem-bad-fg);
}

html.volt-app .hl-account-logout:hover {
    background: var(--sem-bad-bg);
}

html.volt-app .hl-account-access-list {
    border-color: var(--hl-line);
}

html.volt-app .hl-account-access-list > div > i {
    background: var(--volt-accent-soft);
    color: var(--volt-orange, #ff6600);
}

html.volt-app .hl-account-access-list b {
    color: var(--volt-muted);
    border-color: var(--hl-line);
    background: var(--volt-chip-bg);
}

html.volt-app .hl-account-upgrade {
    border-color: color-mix(in srgb, var(--volt-orange, #ff6600) 28%, transparent);
    background: var(--volt-accent-soft);
}

html.volt-app .hl-account-upgrade-note {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--volt-muted);
    max-width: none;
}

/* —— Formulários —— */
html.volt-app .hl-support-field input,
html.volt-app .hl-support-field select,
html.volt-app .hl-support-field textarea,
html.volt-app .hl-admin-mp-input {
    background: var(--page-input);
    border: 1px solid var(--volt-card-line);
    color: var(--volt-ink);
}

html.volt-app .hl-support-field input::placeholder,
html.volt-app .hl-support-field textarea::placeholder {
    color: var(--volt-muted);
}

html.volt-app .hl-support-field select {
    background-image: linear-gradient(45deg, transparent 50%, var(--volt-muted) 50%),
        linear-gradient(135deg, var(--volt-muted) 50%, transparent 50%);
}

html.volt-app .hl-support-field select option {
    background: var(--page-surface);
    color: var(--volt-ink);
}

html.volt-app .hl-support-alert.is-ok {
    color: var(--sem-ok-fg);
    background: var(--sem-ok-bg);
    border: 1px solid var(--sem-ok-line);
}

html.volt-app .hl-support-alert.is-err {
    color: var(--sem-bad-fg);
    background: var(--sem-bad-bg);
    border: 1px solid var(--sem-bad-line);
}

/* —— Admin badges / ações —— */
html.volt-app .hl-admin-kpi.is-highlight .hl-admin-kpi-label,
html.volt-app .hl-admin-badge.is-pro,
html.volt-app .hl-admin-action.is-success {
    color: var(--sem-ok-fg);
}

html.volt-app .hl-admin-badge.is-pro {
    border-color: var(--sem-ok-line);
    background: var(--sem-ok-bg);
}

html.volt-app .hl-admin-badge.is-free,
html.volt-app .hl-admin-badge.is-muted {
    color: var(--volt-muted);
}

html.volt-app .hl-admin-badge.is-active,
html.volt-app .hl-admin-card-head.is-pro h2 i {
    color: var(--sem-warn-fg);
}

html.volt-app .hl-admin-badge.is-active {
    border-color: var(--sem-warn-line);
    background: var(--sem-warn-bg);
}

html.volt-app .hl-admin-badge.is-warning,
html.volt-app .hl-admin-action.is-warning {
    color: var(--sem-warn-fg);
    border-color: var(--sem-warn-line);
}

html.volt-app .hl-admin-badge.is-warning {
    background: var(--sem-warn-bg);
}

html.volt-app .hl-admin-badge.is-admin {
    color: var(--volt-muted);
    border-color: var(--volt-card-line);
}

html.volt-app .hl-admin-action.is-primary {
    color: var(--sem-info-fg);
    border-color: var(--sem-info-line);
}

html.volt-app .hl-admin-action.is-primary:hover {
    background: var(--sem-info-bg);
    color: var(--sem-info-fg);
}

html.volt-app .hl-admin-action.is-success:hover {
    background: var(--sem-ok-bg);
}

html.volt-app .hl-admin-action.is-warning:hover {
    background: var(--sem-warn-bg);
}

html.volt-app .hl-admin-action.is-danger {
    color: var(--sem-bad-fg);
    border-color: var(--sem-bad-line);
}

html.volt-app .hl-admin-action.is-danger:hover {
    background: var(--sem-bad-bg);
    color: var(--sem-bad-fg);
}

html.volt-app .hl-admin-kpi-value,
html.volt-app .hl-admin-kpi-finance strong {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 800;
}

html.volt-app .hl-admin-kpi-finance .is-cash strong {
    color: var(--sem-ok-fg);
}

html.volt-app .hl-admin-mp-input:focus {
    border-color: color-mix(in srgb, var(--volt-orange, #ff6600) 55%, var(--volt-card-line));
}

/* —— Monitoramento —— */
html.volt-app .mon-page .mon-ok { color: var(--sem-ok-fg); }
html.volt-app .mon-page .mon-bad { color: var(--sem-bad-fg); }
html.volt-app .mon-page .mon-warn { color: var(--sem-warn-fg); }

html.volt-app .mon-page .mon-pill {
    background: var(--volt-chip-bg);
    color: var(--volt-ink);
}

html.volt-app .mon-page .mon-pill.pass {
    background: var(--sem-ok-bg);
    color: var(--sem-ok-fg);
}

html.volt-app .mon-page .mon-pill.fail {
    background: var(--sem-bad-bg);
    color: var(--sem-bad-fg);
}

html.volt-app .mon-page .mon-table th,
html.volt-app .mon-page .mon-table td {
    border-bottom-color: var(--border-subtle);
    color: var(--volt-ink);
}

html.volt-app .mon-page .text-muted {
    color: var(--volt-muted) !important;
}