/* Tema VOLAREOS do painel administrativo (claro e escuro).
   Carregado depois de app-20260727-01.css: so muda a aparencia, nunca a estrutura. */

html[data-tema="claro"] {
    color-scheme: light;
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-2: #f8f9fb;
    --border: #e4e6eb;
    --border-strong: #d0d4db;
    --text: #1c1f26;
    --muted: #5b6170;
    --sidebar: #12151b;
    --sidebar-text: #c9ced8;
    --sidebar-line: #232833;
    --sidebar-hover: #1c2029;
    --primary: #ff3300;
    --primary-hover: #d92b00;
    --primary-soft: rgba(255, 51, 0, .10);
    --success: #12855a;
    --danger: #d23545;
    --warning: #b77905;
    --blue: #e0400b;
    --field: #ffffff;
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .05);
    --shadow-hover: 0 8px 24px rgba(16, 24, 40, .10);
    --radius: 14px;
}

html[data-tema="escuro"] {
    color-scheme: dark;
    --bg: #0c0e12;
    --surface: #161920;
    --surface-2: #1b1f27;
    --border: #262a33;
    --border-strong: #353a46;
    --text: #e8eaee;
    --muted: #a0a7b4;
    --sidebar: #0f1116;
    --sidebar-text: #c2c8d2;
    --sidebar-line: #1f232c;
    --sidebar-hover: #191d25;
    --primary: #ff3300;
    --primary-hover: #ff5226;
    --primary-soft: rgba(255, 51, 0, .16);
    --success: #34c486;
    --danger: #ff6170;
    --warning: #f0b43c;
    --blue: #ff7a4d;
    --field: #10131a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, .45);
    --radius: 14px;
}

/* Base */
html[data-tema] body { background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
html[data-tema] a { color: var(--blue); }
html[data-tema] label { color: var(--muted); }
html[data-tema] .field-label { color: var(--text); }

/* Menu lateral */
html[data-tema] .sidebar { background: var(--sidebar); color: var(--sidebar-text); border-right: 1px solid var(--sidebar-line); }
html[data-tema] .brand { border-bottom-color: var(--sidebar-line) !important; }
html[data-tema] .brand, html[data-tema] .mobile-brand, html[data-tema] .brand:hover, html[data-tema] .mobile-brand:hover { color: #fff; text-decoration: none; }
html[data-tema] .brand:hover { background: var(--sidebar-hover); }
html[data-tema] .brand-mark { background: var(--primary); box-shadow: 0 6px 16px rgba(255, 51, 0, .35); }
html[data-tema] .brand-logo { border-radius: 10px; }
html[data-tema] .brand small { color: #8b93a1; }
html[data-tema] .nav { gap: 2px; }
html[data-tema] .nav a { color: var(--sidebar-text); border-radius: 10px; font-weight: 500; transition: background .15s, color .15s; }
html[data-tema] .nav a:hover { background: var(--sidebar-hover); color: #fff; }
html[data-tema] .nav a.is-active { background: rgba(255, 51, 0, .16); color: #ff7a4d; box-shadow: inset 3px 0 0 var(--primary); font-weight: 650; }
html[data-tema] .nav a.is-active:hover { background: rgba(255, 51, 0, .22); color: #ff8c63; }
html[data-tema] .nav-section { color: #6f7785; }
html[data-tema] .logout-form .button { color: var(--sidebar-text); border-color: #2c313c; background: transparent; }
html[data-tema] .logout-form .button:hover { border-color: var(--primary); color: #fff; }

/* Topo */
html[data-tema] .topbar h1 { font-weight: 700; letter-spacing: -0.02em; }
html[data-tema] .topbar-actions { display: flex; align-items: center; gap: 14px; }
html[data-tema] .account small { color: var(--muted); }

/* Botao sol/lua */
.volare-tema-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; border: 1px solid var(--border, #dbe1e7); border-radius: 50%; background: var(--surface, #fff); color: var(--text, #1f2933); cursor: pointer; transition: border-color .15s, color .15s; }
.volare-tema-toggle:hover, .volare-tema-toggle:focus-visible { border-color: var(--primary, #ff3300); color: var(--primary, #ff3300); }
.volare-tema-toggle svg { width: 18px; height: 18px; }
.volare-tema-toggle .icone-sol { display: none; }
html[data-tema="escuro"] .volare-tema-toggle .icone-sol { display: block; }
html[data-tema="escuro"] .volare-tema-toggle .icone-lua { display: none; }
.mobile-header .volare-tema-toggle { width: 36px; height: 36px; flex-basis: 36px; background: transparent; border-color: #2c313c; color: #e8eaee; }
.login-page .volare-tema-toggle { position: fixed; top: 16px; right: 16px; }

/* Cartoes e blocos */
html[data-tema] .section-block,
html[data-tema] .metric,
html[data-tema] .observability-summary { background: var(--surface); border-color: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
html[data-tema] .section-block { overflow: hidden; }
html[data-tema] .section-block:has(.campaign-selection) { overflow: visible; }
html[data-tema] .metric { border-top: 1px solid var(--border); position: relative; overflow: hidden; color: var(--text); }
html[data-tema] .metric::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #7a8792; }
html[data-tema] .metric-trial::before { background: var(--warning); }
html[data-tema] .metric-active::before { background: var(--success); }
html[data-tema] .metric-warning::before { background: var(--danger); }
html[data-tema] .metric:hover, html[data-tema] .plan-summary-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
html[data-tema] .metric strong, html[data-tema] .plan-summary-card strong { font-weight: 700; letter-spacing: -0.02em; }
html[data-tema] .plan-summary-card { background: var(--surface-2); border-color: var(--border); border-left: 3px solid var(--primary); border-radius: 12px; color: var(--text); }
html[data-tema] .section-heading { border-bottom-color: var(--border); }
html[data-tema] .section-heading h2 { font-weight: 650; }
html[data-tema] .settings-card,
html[data-tema] .settings-email-item,
html[data-tema] .lifecycle-details div,
html[data-tema] .details.lifecycle-details > div,
html[data-tema] .email-image-fields,
html[data-tema] .email-library-item,
html[data-tema] .mfa-secret,
html[data-tema] .recovery-codes code { background: var(--surface-2); border-color: var(--border); border-radius: 12px; }
html[data-tema] .settings-fieldset,
html[data-tema] .plan-features,
html[data-tema] .release-lifecycle li { border-color: var(--border); border-radius: 12px; }
html[data-tema] .details div { border-bottom-color: var(--border); }
html[data-tema] .tenant-category > summary,
html[data-tema] .collapsible-block summary,
html[data-tema] .create-panel summary { color: var(--text); }
html[data-tema] .tenant-category[open] > summary,
html[data-tema] .collapsible-block[open] summary,
html[data-tema] .create-panel[open] summary,
html[data-tema] .inline-form,
html[data-tema] .email-test-row { border-color: var(--border); }

/* Tabelas */
html[data-tema] th, html[data-tema] td { border-bottom-color: var(--border); }
html[data-tema] th { background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 650; letter-spacing: .04em; }
html[data-tema] tbody tr:hover { background: var(--primary-soft); }
html[data-tema] .plan-edit-row > td,
html[data-tema] .queue-progress-row td { background: var(--surface-2); }
html[data-tema] .progress-track { background: var(--border); }

/* Campos */
html[data-tema] input, html[data-tema] select, html[data-tema] textarea { background: var(--field); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; min-height: 42px; }
html[data-tema] input:focus, html[data-tema] select:focus, html[data-tema] textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 51, 0, .15); outline: none; }
html[data-tema] input[type="checkbox"] { accent-color: var(--primary); min-height: 0; }
html[data-tema] .email-library-url { background: var(--surface-2); border-color: var(--border); color: var(--muted); }

/* Botoes */
html[data-tema] .button { min-height: 42px; border-radius: 999px; padding: 8px 18px; font-weight: 600; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
html[data-tema] .button-small { min-height: 32px; padding: 5px 12px; }
html[data-tema] .button-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(255, 51, 0, .22); }
html[data-tema] .button-primary:hover { background: var(--primary-hover); color: #fff; }
html[data-tema] .button-success { background: #12855a; color: #fff; }
html[data-tema] .button-success:hover { background: #0e6e4a; color: #fff; }
html[data-tema] .button-danger { background: var(--danger); color: #fff; }
html[data-tema] .button-quiet { background: transparent; border-color: var(--border-strong); color: var(--text); }
html[data-tema] .button-quiet:hover { border-color: var(--primary); color: var(--primary); }

/* Avisos e etiquetas */
html[data-tema] .notice { border-radius: 12px; }
html[data-tema] .badge { font-weight: 650; }
html[data-tema="escuro"] .notice-success { background: rgba(52, 196, 134, .12); border-color: rgba(52, 196, 134, .35); color: #7fe0b4; }
html[data-tema="escuro"] .notice-error { background: rgba(255, 97, 112, .12); border-color: rgba(255, 97, 112, .35); color: #ff9aa4; }
html[data-tema="escuro"] .notice-warning { background: rgba(240, 180, 60, .12); border-color: rgba(240, 180, 60, .35); color: #f5cd7a; }
html[data-tema="escuro"] .badge { background: #262a33; color: #c2c8d2; }
html[data-tema="escuro"] .badge-trial, html[data-tema="escuro"] .badge-pending, html[data-tema="escuro"] .badge-degraded { background: rgba(240, 180, 60, .16); color: #f5cd7a; }
html[data-tema="escuro"] .badge-active, html[data-tema="escuro"] .badge-completed, html[data-tema="escuro"] .badge-sent, html[data-tema="escuro"] .badge-healthy { background: rgba(52, 196, 134, .16); color: #7fe0b4; }
html[data-tema="escuro"] .badge-suspended, html[data-tema="escuro"] .badge-failed, html[data-tema="escuro"] .badge-down { background: rgba(255, 97, 112, .16); color: #ff9aa4; }
html[data-tema="escuro"] .badge-processing { background: rgba(96, 165, 250, .16); color: #9cc5fb; }
html[data-tema="escuro"] .badge-expired { background: rgba(255, 122, 77, .16); color: #ffa27f; }

/* Editor de e-mail e selecoes de campanha */
html[data-tema="escuro"] .email-toolbar { background: var(--surface-2); border-color: var(--border); }
html[data-tema="escuro"] .email-toolbar button { background: var(--field); border-color: var(--border-strong); color: var(--text); }
html[data-tema="escuro"] .email-editor { background: var(--field); border-color: var(--border); color: var(--text); }
html[data-tema="escuro"] .trumbowyg-box, html[data-tema="escuro"] .trumbowyg-editor { background: var(--field); border-color: var(--border); color: var(--text); }
html[data-tema="escuro"] .trumbowyg-button-pane { background: var(--surface-2); border-color: var(--border); }
html[data-tema="escuro"] .trumbowyg-button-pane button { color: var(--text); }
html[data-tema="escuro"] .trumbowyg-button-pane svg { fill: var(--text); color: var(--text); }
html[data-tema] .campaign-selection { background: var(--surface); border-color: var(--border); border-radius: 12px; }
html[data-tema] .campaign-selection-list,
html[data-tema] .campaign-selection > .settings-options { background: var(--surface); border-color: var(--border); }
html[data-tema] .email-library-item img { background: var(--surface-2); }
html[data-tema="escuro"] .settings-file-grid img.brand-preview { background: #fff; border-color: var(--border); }

/* Login, recuperacao de senha e verificacao em duas etapas */
html[data-tema] .login-page { background: var(--bg); background-image: radial-gradient(circle at 18% 25%, rgba(255, 51, 0, .10), transparent 45%); }
html[data-tema] .login-panel { background: var(--surface); border: 1px solid var(--border); border-top: 1px solid var(--border); border-radius: 18px; padding: 32px; box-shadow: 0 24px 60px rgba(16, 24, 40, .12); }
html[data-tema="escuro"] .login-panel { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
html[data-tema] .login-panel h1 { font-weight: 700; letter-spacing: -0.02em; }
html[data-tema] .login-panel .button-primary { width: 100%; margin-top: 4px; }
html[data-tema] .login-brand small { color: var(--muted); }
html[data-tema] .login-help a { color: var(--primary); font-weight: 600; }

/* Celular */
@media (max-width: 760px) {
    html[data-tema] .mobile-header { background: var(--sidebar); border-bottom: 1px solid var(--sidebar-line); }
    html[data-tema] .mobile-header .mobile-brand { margin-right: auto; }
    html[data-tema] .mobile-menu-toggle { border-color: #2c313c; border-radius: 10px; }
    html[data-tema] .mobile-menu-toggle:hover { background: var(--sidebar-hover); }
    html[data-tema] .sidebar-header { border-bottom-color: var(--sidebar-line); }
    html[data-tema] .mobile-menu-close:hover { background: var(--sidebar-hover); }
    html[data-tema] .logout-form { border-top-color: var(--sidebar-line) !important; }
    html[data-tema] .topbar-actions .volare-tema-toggle { display: none; }
    html[data-tema] .metric strong { font-size: 24px; }
}
@media (min-width: 761px) {
    html[data-tema] .sidebar { border-right: 1px solid var(--sidebar-line); }
    html[data-tema] .sidebar-header .brand { border-bottom: 1px solid var(--sidebar-line) !important; }
}