/* ==========================================================================
   DESCOMPLICAI DESIGN SYSTEM DESIGN SYSTEM - TOKENS & FOUNDATIONS
   Aligns with official Design System specifications (zeroheight.com/skylab)
   ========================================================================== */

:root {
    /* --- T1: Design System Brand & Color Primitives --- */
    --palette-primary-lightest: #eef5fb;
    --palette-primary-lighter: #c9ddf0;
    --palette-primary-light: #8fb8dc;
    --palette-primary-medium: #2f6fa8; /* DescomplicAI Primary Blue */
    --palette-primary-dark: #255a8a;
    --palette-primary-darker: #1b4268;
    --palette-primary-darkest: #14324f;

    --palette-blue-lightest: #f2fafd;
    --palette-blue-lighter: #c5ecfb;
    --palette-blue-light: #9cdff8;
    --palette-blue-medium: #059bd2;
    --palette-blue-dark: #057ba6; /* DescomplicAI Secondary Blue */
    --palette-blue-darker: #066183;
    --palette-blue-darkest: #044056;

    --palette-green-lightest: #f5fbef;
    --palette-green-medium: #72bb2a;
    --palette-green-dark: #609f25;
    --palette-green-darker: #4e831f;

    --palette-red-lightest: #fff2f1;
    --palette-red-medium: #df3240;
    --palette-red-dark: #b91728;

    --palette-yellow-lightest: #fdfbee;
    --palette-yellow-medium: #e9d952;
    --palette-yellow-dark: #e2c82d;

    /* --- T1: Gray Numeric Ramp --- */
    --palette-white: #ffffff;
    --palette-gray-50: #fafbfc;
    --palette-gray-100: #f5f6f7;
    --palette-gray-200: #dee2e4;
    --palette-gray-300: #c1c7cf;
    --palette-gray-400: #acb7bd;
    --palette-gray-500: #89969f;
    --palette-gray-600: #687782;
    --palette-gray-700: #4a5965;
    --palette-gray-800: #20354a; /* DescomplicAI Deep Navy */
    --palette-gray-900: #0e1d2f;
    --palette-gray-1000: #091420;
    --palette-gray-1100: #050b12;
    --palette-gray-1200: #020508;

    /* --- T2: Semantic Tokens (Light Mode - Default) --- */
    --color-surface-canvas: #f8fafc;
    --color-surface-elevated: #ffffff;
    --color-surface-muted: #f1f5f9;
    --color-surface-chrome: #102a43;
    --color-surface-chrome-dark: #001738;
    --color-surface-card: #ffffff;

    --color-text-primary: #20354a;
    --color-text-secondary: #4a5965;
    --color-text-tertiary: #687782;
    --color-text-inverse: #ffffff;
    --color-text-link: #057ba6;
    --color-text-link-hover: #066183;

    --color-border-default: #c1c7cf;
    --color-border-muted: #dee2e4;
    --color-border-strong: #89969f;
    --color-border-subtle: #e2e8f0;

    --color-interactive-primary: #2f6fa8;
    --color-interactive-primary-hover: #255a8a;
    --color-interactive-primary-active: #1b4268;

    --color-interactive-secondary: #057ba6;
    --color-interactive-secondary-hover: #066183;
    --color-interactive-secondary-bg-hover: #f2fafd;

    --color-interaction-surface-hover: #f1f5f9;
    --color-interaction-surface-selected: #e0f2fe;
    --color-interaction-border-focus: #057ba6;

    /* Status & Feedback */
    --color-feedback-success-bg: #f5fbef;
    --color-feedback-success-text: #4e831f;
    --color-feedback-success-border: #b4e486;

    --color-feedback-error-bg: #fff2f1;
    --color-feedback-error-text: #b91728;
    --color-feedback-error-border: #f77576;

    --color-feedback-warning-bg: #fdfbee;
    --color-feedback-warning-text: #14324f;
    --color-feedback-warning-border: #f6eeab;

    --color-feedback-info-bg: #f2fafd;
    --color-feedback-info-text: #057ba6;
    --color-feedback-info-border: #9cdff8;

    /* Typography Foundations */
    --font-family-primary: 'DM Sans', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-headings: 'DM Sans', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

    /* Spacing & Radii */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 9999px;

    /* Elevation Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --shadow-modal: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);

    /* DescomplicAI Legacy Mappings for seamless compatibility */
    --dai-primary: var(--palette-primary-medium);
    --dai-primary-hover: var(--palette-primary-dark);
    --dai-navy: var(--palette-gray-800);
    --dai-bg: var(--color-surface-canvas);
    --dai-card: var(--color-surface-elevated);
    --dai-ink: var(--color-text-primary);
    --dai-ink-muted: var(--color-text-secondary);
    --dai-border: var(--color-border-muted);
}

/* --- Dark Mode Semantic Tokens (Design System Dark) --- */
html.dark-mode,
body.dark-mode,
[data-theme="dark"],
[data-sk-theme="dark"] {
    --color-surface-canvas: #091420;
    --color-surface-elevated: #0e1d2f;
    --color-surface-muted: #15263a;
    --color-surface-chrome: #050b12;
    --color-surface-chrome-dark: #020508;
    --color-surface-card: #0e1d2f;

    --color-text-primary: #f5f6f7;
    --color-text-secondary: #dee2e4;
    --color-text-tertiary: #acb7bd;
    --color-text-inverse: #091420;
    --color-text-link: #9cdff8;
    --color-text-link-hover: #c5ecfb;

    --color-border-default: #20354a;
    --color-border-muted: #1a2b3c;
    --color-border-strong: #4a5965;
    --color-border-subtle: #1e293b;

    --color-interactive-primary: #2f6fa8;
    --color-interactive-primary-hover: #8fb8dc;
    --color-interactive-primary-active: #c9ddf0;

    --color-interactive-secondary: #9cdff8;
    --color-interactive-secondary-hover: #c5ecfb;
    --color-interactive-secondary-bg-hover: #15263a;

    --color-interaction-surface-hover: #172a3e;
    --color-interaction-surface-selected: #1b3650;
    --color-interaction-border-focus: #059bd2;

    --color-feedback-success-bg: #0d2818;
    --color-feedback-success-text: #b4e486;
    --color-feedback-success-border: #37591b;

    --color-feedback-error-bg: #2d1215;
    --color-feedback-error-text: #f77576;
    --color-feedback-error-border: #7d1224;

    --color-feedback-warning-bg: #2e2308;
    --color-feedback-warning-text: #f6eeab;
    --color-feedback-warning-border: #866713;

    --color-feedback-info-bg: #092636;
    --color-feedback-info-text: #9cdff8;
    --color-feedback-info-border: #057ba6;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
    --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.7);

    --dai-bg: var(--color-surface-canvas);
    --dai-card: var(--color-surface-elevated);
    --dai-ink: var(--color-text-primary);
    --dai-ink-muted: var(--color-text-secondary);
    --dai-border: var(--color-border-default);
}

/* Apply Design System Typography Globally */
body, button, input, select, textarea {
    font-family: var(--font-family-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Design System Standard Primary Button */
.btn-primary, .btn-orange, button.primary {
    background-color: var(--color-interactive-primary) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-family-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: var(--shadow-sm) !important;
}

.btn-primary:hover, .btn-orange:hover, button.primary:hover {
    background-color: var(--color-interactive-primary-hover) !important;
    transform: translateY(-1px);
}

/* Design System Standard Secondary Button */
.btn-secondary, button.secondary {
    background-color: var(--color-surface-elevated) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-family-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    transition: all 0.15s ease-in-out !important;
}

.btn-secondary:hover, button.secondary:hover {
    background-color: var(--color-interaction-surface-hover) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-text-primary) !important;
}

/* Design System Ghost / Outline Button */
.btn-outline, .btn-ghost, button.ghost {
    background-color: transparent !important;
    color: var(--color-text-link) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
}

.btn-outline:hover, .btn-ghost:hover, button.ghost:hover {
    background-color: var(--color-interaction-surface-hover) !important;
    color: var(--color-text-link-hover) !important;
}

/* Design System Data Table Standards */
.data-table, .styled-table, table.table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background-color: var(--color-surface-elevated) !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border-muted) !important;
    overflow: hidden !important;
}

.data-table th, .styled-table th, table.table th {
    background-color: var(--color-surface-muted) !important;
    color: var(--color-text-secondary) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid var(--color-border-muted) !important;
    text-align: left !important;
    vertical-align: middle !important;
}

.data-table td, .styled-table td, table.table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--color-border-muted) !important;
    color: var(--color-text-primary) !important;
    font-size: 13.5px !important;
    vertical-align: middle !important;
}

.data-table tr:hover, .styled-table tr:hover, table.table tbody tr:hover {
    background-color: var(--color-interaction-surface-hover) !important;
}

/* Design System Form Controls */
input[type="text"], input[type="date"], input[type="number"], input[type="search"], input[type="password"], select, textarea {
    background-color: var(--color-surface-elevated) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-family: var(--font-family-primary) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--color-interaction-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(5, 123, 166, 0.25) !important;
}

/* Design System Cards & Containers */
.card, .panel, .metric-card {
    background-color: var(--color-surface-card) !important;
    border: 1px solid var(--color-border-muted) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--color-text-primary) !important;
    padding: 20px !important;
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --dai-primary: #2f6fa8;
    --dai-primary-dark: #255a8a;
    --dai-navy: #14213D;
    --dai-navy-light: #1F3059;
    --dai-ink: #1A1F2B;
    --dai-gray: #6B7280;
    --dai-border: #E2E5EA;
    --dai-bg: #F5F6F8;
    --dai-success: #1E9E6C;
    --dai-danger: #D64545;
    --dai-blue: #2563EB;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', Segoe UI, Roboto, Arial, sans-serif;
    background: var(--dai-bg);
    color: var(--dai-ink);
    -webkit-font-smoothing: antialiased;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- Header ---------- */
.app-header {
    background: var(--dai-navy);
    background-image: linear-gradient(135deg, var(--dai-navy) 0%, var(--dai-navy-light) 100%);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 3px solid var(--dai-primary);
}

.app-header .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--dai-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.app-header .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.app-header .brand-text .product-name {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.app-header .brand-text .product-subtitle {
    color: #B9C2D6;
    font-size: 12px;
    font-weight: 400;
}

.header-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.header-user-name {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.header-user-role {
    color: #B9C2D6;
    font-size: 11px;
}

.header-user-link {
    background: none;
    border: none;
    color: #D9E4FF;
    font-size: 12.5px;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}

.header-user-link:hover {
    color: #fff;
    text-decoration: underline;
}

.header-user-logout {
    font-family: inherit;
}

/* ---------- Layout ---------- */
.app-body {
    flex: 1;
    display: flex;
}

.app-main {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 24px 48px;
}

/* ---------- Sidebar ---------- */
.side-nav {
    width: 220px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid var(--dai-border);
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dai-navy);
    text-decoration: none;
}

.side-link:hover {
    background: var(--dai-bg);
}

.side-link.active {
    background: #FFF1E6;
    color: var(--dai-primary-dark);
    font-weight: 600;
}

.side-icon {
    font-size: 15px;
    width: 20px;
    text-align: center;
}

.side-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dai-gray);
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.side-group-header:hover {
    color: var(--dai-navy);
}

.side-group-toggle {
    margin-left: auto;
    font-size: 11px;
}

.side-group-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 6px;
    border-left: 2px solid var(--dai-border);
    margin-left: 14px;
}

.billing-page, .dash-page {
    background: #ffffff;
    border-radius: 10px;
    padding: 28px 28px 24px;
    box-shadow: 0 1px 2px rgba(20, 33, 61, 0.04), 0 8px 24px rgba(20, 33, 61, 0.06);
    border: 1px solid var(--dai-border);
}

.section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dai-gray);
    margin: 0 0 12px;
}

/* ---------- Campos ---------- */
.campos {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.campo {
    display: flex;
    flex-direction: column;
    min-width: 200px;
}

.campo-pequeno {
    min-width: 90px;
    max-width: 110px;
}

.campo-periodo {
    min-width: 150px;
    max-width: 170px;
}

.campo-multiselect {
    height: 110px;
}

.campo label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--dai-navy);
}

.form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--dai-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--dai-ink);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--dai-primary);
    box-shadow: 0 0 0 3px rgba(47, 111, 168, 0.12);
}

.form-control:disabled {
    background: #F2F3F5;
    color: var(--dai-gray);
}

/* ---------- Opções ---------- */
.opcoes {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding: 16px 18px;
    background: var(--dai-bg);
    border-radius: 8px;
    border: 1px solid var(--dai-border);
}

.opcao {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dai-navy);
    cursor: pointer;
}

.opcao input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--dai-primary);
    cursor: pointer;
}

/* ---------- Botões ---------- */
.botoes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.btn {
    padding: 11px 18px;
    border: none;
    border-radius: 6px;
    background: var(--dai-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.btn:hover:not(:disabled) {
    background: var(--dai-primary-dark);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn:disabled {
    background: #D8DCE3;
    color: #9AA1AC;
    cursor: not-allowed;
}

.btn-secondary {
    background: #fff;
    color: var(--dai-navy);
    border: 1px solid var(--dai-border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--dai-bg);
}

/* ---------- Status ---------- */
.status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #FFF4EC;
    border-left: 4px solid var(--dai-primary);
    border-radius: 6px;
    margin-bottom: 18px;
    white-space: pre-line;
    font-size: 13.5px;
    color: var(--dai-navy);
}

.status .spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(47, 111, 168, 0.25);
    border-top-color: var(--dai-primary);
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
    margin-top: 2px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------- Log ---------- */
.log-container {
    display: flex;
}

.log {
    width: 100%;
    height: 420px;
    resize: vertical;
    font-family: 'Cascadia Code', Consolas, "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.5;
    background: var(--dai-navy);
    color: #D9E4FF;
    border-radius: 8px;
    border: none;
    padding: 14px 16px;
    white-space: pre;
}

.log::-webkit-scrollbar {
    width: 10px;
}

.log::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

/* ---------- Dashboard: filtros ---------- */
.filtros {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.filtros-frame {
    border: 1px solid var(--dai-border);
    border-radius: 8px;
    padding: 4px 16px 16px;
    margin-bottom: 18px;
    background: #FAFBFC;
}

.filtros-frame-header {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dai-navy);
    cursor: pointer;
}

.filtros-frame-toggle {
    font-weight: 400;
    color: var(--dai-gray);
    font-size: 12px;
}

.filtros-frame .filtros:last-child,
.filtros-frame .filtros {
    margin-bottom: 16px;
}

.filtros-frame .filtros:last-of-type {
    margin-bottom: 0;
}

/* ---------- Dashboard: cards ---------- */
.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 22px 0;
}

.card {
    background: var(--dai-bg);
    border: 1px solid var(--dai-border);
    border-radius: 8px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--dai-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--dai-navy);
}

.card-alerta {
    background: #FFF4EC;
    border-color: #FFD9B8;
}

.card-alerta .card-value {
    color: var(--dai-primary-dark);
}

/* ---------- Dashboard: gráfico mensal (CSS puro) ---------- */
.chart-container {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 180px;
    padding: 12px 8px 0;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--dai-border);
    overflow-x: auto;
}

.chart-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 38px;
    flex: 1;
}

.chart-bar {
    width: 26px;
    min-height: 3px;
    background: linear-gradient(180deg, var(--dai-primary) 0%, var(--dai-primary-dark) 100%);
    border-radius: 4px 4px 0 0;
    transition: height 0.25s ease;
}

.chart-label {
    font-size: 10.5px;
    color: var(--dai-gray);
    margin-top: 6px;
    white-space: nowrap;
}

.chart-container-compacto {
    height: 110px;
    gap: 4px;
    margin-bottom: 0;
    border-bottom: none;
    align-items: flex-end;
}

.chart-container-compacto .chart-bar-wrap {
    min-width: 20px;
}

/* Área com altura FIXA reservada só para a barra — evita disputa de espaço
   com o rótulo vertical (que tem altura variável conforme o texto). Sem
   isso, o height:% da barra ficava relativo a um espaço ambíguo (barra +
   rótulo competindo), causando alturas instáveis/desproporcionais. */
.chart-container-compacto .chart-bar-area {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.chart-container-compacto .chart-bar {
    width: 12px;
}

.chart-container-compacto .chart-label {
    height: 42px;
    flex-shrink: 0;
    font-size: 8.5px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-top: 4px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* ---------- Dashboard: gráfico de evolução (SVG, coordenadas calculadas em C#) ---------- */
.linha-evolucao-svg {
    width: 100%;
    height: 220px;
    display: block;
}

.linha-evolucao-eixo {
    stroke: var(--dai-border);
    stroke-width: 1;
}

.linha-evolucao-linha {
    fill: none;
    stroke: var(--dai-primary);
    stroke-width: 2;
}

.linha-evolucao-ponto {
    fill: var(--dai-primary-dark);
}

.linha-evolucao-rotulos {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    padding: 0 2px;
    font-size: 7.5px;
    color: var(--dai-gray);
}

.linha-evolucao-rotulos span {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.linha-evolucao-legenda {
    display: flex;
    gap: 18px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--dai-navy);
}

.linha-evolucao-legenda-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.linha-evolucao-legenda-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* ---------- Dashboard: gráfico de pizza (SVG) ---------- */
.pizza-svg {
    width: 220px;
    height: 220px;
    display: block;
}

.pizza-legenda {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--dai-navy);
}

.pizza-legenda-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pizza-legenda-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

/* ---------- Dashboard: barras empilhadas (N2/N3) ---------- */
.barra-empilhada-legenda {
    display: flex;
    gap: 18px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--dai-navy);
}

.barras-empilhadas {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 130px;
    overflow-x: auto;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--dai-border);
}

.barra-empilhada-coluna {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 34px;
}

.barra-empilhada-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.barra-segmento {
    width: 22px;
}

.barra-n3 {
    background: var(--dai-navy);
    border-radius: 3px 3px 0 0;
}

.barra-n2 {
    background: var(--dai-primary);
}

.barra-n3 + .barra-n2 {
    border-radius: 0 0 3px 3px;
}

/* ---------- Dashboard: totais por solution ---------- */
.solution-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 26px;
}

.solution-row {
    display: grid;
    grid-template-columns: 160px 1fr 120px;
    align-items: center;
    gap: 12px;
}

.solution-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--dai-navy);
}

.solution-track {
    background: var(--dai-bg);
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
}

.solution-fill {
    height: 100%;
    background: var(--dai-primary);
    border-radius: 6px;
}

.solution-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--dai-navy);
    text-align: right;
}

/* Igual a .solution-track, mas empilhando 2 segmentos coloridos dentro do mesmo track (ex.: Aberto x Fechado) — mais grossa que a barra simples, pra ficar mais fácil de ver/clicar cada segmento. */
.solution-track-empilhado {
    background: var(--dai-bg);
    border-radius: 6px;
    height: 22px;
    overflow: hidden;
    display: flex;
}

.solution-fill-segmento {
    height: 100%;
}

/* ---------- Dashboard: top clientes por produto ---------- */
.produto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.produto-card {
    background: #fff;
    border: 1px solid var(--dai-border);
    border-radius: 8px;
    padding: 16px 18px;
}

.produto-card-titulo {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dai-navy);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dai-border);
}

.produto-ranking {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.produto-ranking li {
    counter-increment: ranking;
}

.produto-ranking {
    counter-reset: ranking;
}

.produto-ranking-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    margin-bottom: 4px;
}

.produto-ranking-linha::before {
    content: counter(ranking) "º ";
    color: var(--dai-gray);
    font-weight: 600;
    flex-shrink: 0;
}

.produto-ranking-nome {
    color: var(--dai-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.produto-ranking-valor {
    font-weight: 600;
    color: var(--dai-primary-dark);
    flex-shrink: 0;
}

.produto-ranking-barra {
    height: 6px;
}

/* ---------- Dashboard: tabelas ---------- */
.table-wrap {
    overflow-x: auto;
    margin-bottom: 22px;
    border: 1px solid var(--dai-border);
    border-radius: 8px;
    position: relative;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead th {
    background: var(--dai-bg);
    color: var(--dai-gray);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--dai-border);
    white-space: nowrap;
}

.th-ordenavel {
    cursor: pointer;
    user-select: none;
}

.th-ordenavel:hover {
    color: var(--dai-primary-dark);
}

.data-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--dai-border);
    color: var(--dai-ink);
    white-space: nowrap;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: var(--dai-bg);
}

/* Coluna de ação (última) sempre fixa/visível, mesmo com scroll horizontal —
   evita ter que rolar pra achar o botão "Detalhar"/"Editar" em tabelas largas. */
.data-table th:last-child,
.data-table td:last-child {
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -6px 0 6px -6px rgba(20, 33, 61, 0.15);
    white-space: nowrap;
}

/* Desliga a coluna fixa acima — usada em tabelas largas onde a "última coluna"
   é só mais um valor de dado (ex.: pivot de meses), não um botão de ação. */
.sem-coluna-fixa th:last-child,
.sem-coluna-fixa td:last-child {
    position: static;
    box-shadow: none;
}

.data-table thead th:last-child {
    background: var(--dai-bg);
    box-shadow: none;
}

.data-table tbody tr:hover td:last-child {
    background: var(--dai-bg);
}

/* Padding mais compacto — usada na tabela de YTD/YoY Comparison, que tem várias
   colunas (Solution Group, Customers, 4 categorias de ARR, Total, % of Total) e
   corria risco de precisar de rolagem horizontal. */
.tabela-ytd-compacta thead th,
.tabela-ytd-compacta tbody td {
    padding: 8px 8px;
}

.linha-pai td:last-child {
    background: var(--dai-bg);
}

.linha-clicavel {
    cursor: pointer;
}

.linha-clicavel:hover {
    background: #FFF8F2;
}

.diff-positivo {
    color: var(--dai-success);
    font-weight: 600;
}

.diff-negativo {
    color: var(--dai-danger);
    font-weight: 600;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.empty-row {
    text-align: center;
    color: var(--dai-gray);
    padding: 24px;
}

/* ---------- Badges de status ---------- */
.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.badge-ok {
    background: #E4F6EC;
    color: var(--dai-success);
}

.badge-erro {
    background: #FBE7E7;
    color: var(--dai-danger);
}

.badge-pendente {
    background: #FFF1E6;
    color: var(--dai-primary-dark);
}

.badge-neutro {
    background: #EEF0F3;
    color: var(--dai-gray);
}

/* ---------- Paginação ---------- */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 13px;
    color: var(--dai-gray);
    margin-top: 6px;
}

.btn-page {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--dai-border);
    background: #fff;
    color: var(--dai-navy);
    font-size: 13px;
    cursor: pointer;
}

.btn-page:disabled {
    color: #C3C8D1;
    cursor: not-allowed;
}

.status-erro {
    background: #FBE7E7;
    border-left-color: var(--dai-danger);
    color: var(--dai-danger);
}

.cards-resumo {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.card-resumo {
    background: #fff;
    border: 1px solid var(--dai-border);
    border-radius: 8px;
    padding: 14px 20px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-resumo-valor {
    font-size: 22px;
    font-weight: 700;
    color: var(--dai-blue);
}

.card-resumo-rotulo {
    font-size: 12px;
    color: #6B7280;
}

.status-ok {
    background: #E4F6EC;
    border-left-color: var(--dai-success);
    color: #146C4A;
}

/* ---------- Abas (tabs) ---------- */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--dai-border);
}

.tab-btn {
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dai-gray);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab-btn:hover {
    color: var(--dai-navy);
}

.tab-ativa {
    color: var(--dai-primary-dark);
    border-bottom-color: var(--dai-primary);
    font-weight: 600;
}

/* ---------- Hierarquia pai/filha (Visão Gerencial) ---------- */
.linha-pai td {
    background: var(--dai-bg);
    font-weight: 500;
}

.linha-filha td {
    padding-left: 28px;
    color: var(--dai-navy);
}

.btn-expand {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: var(--dai-primary-dark);
    width: 20px;
}

/* ---------- Gerenciador de Tarefas ---------- */
.tarefas-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.tarefas-sub {
    font-size: 12.5px;
    color: var(--dai-gray);
}

.row-selecionada {
    background: #FFF8F2;
}

/* ---------- Cadastros (índice) ---------- */
.cadastro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.cadastro-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--dai-border);
    border-radius: 8px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cadastro-card:hover {
    border-color: var(--dai-primary);
    box-shadow: 0 2px 10px rgba(47, 111, 168, 0.08);
}

.cadastro-card-titulo {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--dai-navy);
}

.cadastro-card-tabela {
    font-size: 11px;
    font-family: Consolas, monospace;
    color: var(--dai-gray);
}

.cadastro-card-desc {
    font-size: 12.5px;
    color: var(--dai-gray);
    margin-top: 4px;
}

/* ---------- Manutenção de cadastros (CRUD genérico) ---------- */
.tabela-nome {
    font-size: 12px;
    font-weight: 400;
    color: var(--dai-gray);
    font-family: Consolas, monospace;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.campo-obrigatorio {
    color: var(--dai-danger);
    margin-left: 2px;
}

.campo-hint {
    font-size: 11px;
    color: var(--dai-gray);
    font-weight: 400;
    margin-left: 4px;
}

.campo-hint-bloco {
    display: block;
    font-size: 11px;
    color: var(--dai-gray);
    font-weight: 400;
    margin-top: 4px;
}

.btn-page-danger {
    color: var(--dai-danger);
    border-color: #F3C6C6;
}

.confirmar-exclusao {
    font-size: 12.5px;
    color: var(--dai-danger);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---------- Link "abrir em nova aba" ---------- */
.link-nova-aba {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--dai-primary-dark);
    text-decoration: none;
    margin-left: 10px;
    text-transform: none;
    letter-spacing: normal;
}

.link-nova-aba:hover {
    text-decoration: underline;
}

/* ---------- ClientPicker (autocomplete embutido) ---------- */
.client-picker {
    position: relative;
}

.client-picker-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    background: #fff;
    border: 1px solid var(--dai-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 33, 61, 0.14);
    max-height: 260px;
    overflow-y: auto;
}

.client-picker-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid var(--dai-border);
}

.client-picker-item:last-child {
    border-bottom: none;
}

.client-picker-item:hover {
    background: var(--dai-bg);
}

.client-picker-id {
    font-family: Consolas, monospace;
    font-size: 11px;
    color: var(--dai-primary-dark);
    font-weight: 600;
    flex-shrink: 0;
}

.client-picker-nome {
    color: var(--dai-navy);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-picker-cnpj {
    font-size: 11px;
    color: var(--dai-gray);
    flex-shrink: 0;
}

.client-picker-msg {
    color: var(--dai-gray);
    cursor: default;
    font-style: italic;
}

.client-picker-msg:hover {
    background: transparent;
}

.opcao-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--dai-gray);
    margin-top: 6px;
    cursor: pointer;
}

/* ====================================================================

/* ==========================================================================
   GLOBAL DARK MODE SYSTEM & PALETTE
   ========================================================================== */
html.dark-mode, 
body.dark-mode, 
[data-theme="dark"] {
    --dai-bg: #0F172A !important;
    --dai-card-bg: #1E293B !important;
    --dai-ink: #F8FAFC !important;
    --dai-gray: #94A3B8 !important;
    --dai-border: #334155 !important;
    --dai-navy: #0B1120 !important;
    --dai-navy-light: #1E293B !important;
    background-color: #0F172A !important;
    color: #F8FAFC !important;
}

html.dark-mode body,
html.dark-mode .app-shell,
html.dark-mode .app-body,
html.dark-mode .app-main,
html.dark-mode .dash-page,
html.dark-mode main,
body.dark-mode .app-shell,
body.dark-mode .app-body,
body.dark-mode .app-main,
body.dark-mode .dash-page {
    background-color: #0F172A !important;
    color: #F8FAFC !important;
}

html.dark-mode .app-header,
body.dark-mode .app-header {
    background: #0B1120 !important;
    background-image: linear-gradient(135deg, #0B1120 0%, #1E293B 100%) !important;
    border-bottom: 3px solid #2f6fa8 !important;
}

html.dark-mode .side-nav,
body.dark-mode .side-nav {
    background-color: #1E293B !important;
    border-right: 1px solid #334155 !important;
}

html.dark-mode .side-link,
body.dark-mode .side-link {
    color: #CBD5E1 !important;
}

html.dark-mode .side-link:hover,
html.dark-mode .side-link.active,
body.dark-mode .side-link:hover,
body.dark-mode .side-link.active {
    background-color: #334155 !important;
    color: #FFFFFF !important;
}

html.dark-mode .side-group-header,
body.dark-mode .side-group-header {
    color: #94A3B8 !important;
}

html.dark-mode .data-table,
html.dark-mode table,
body.dark-mode .data-table,
body.dark-mode table {
    background-color: #1E293B !important;
    color: #F8FAFC !important;
    border-color: #334155 !important;
}

html.dark-mode .data-table th,
html.dark-mode table th,
body.dark-mode .data-table th,
body.dark-mode table th {
    background-color: #0B1120 !important;
    color: #E2E8F0 !important;
    border-color: #334155 !important;
    border-bottom: 2px solid #334155 !important;
}

html.dark-mode .data-table td,
html.dark-mode table td,
body.dark-mode .data-table td,
body.dark-mode table td {
    background-color: #1E293B !important;
    color: #F8FAFC !important;
    border-color: #334155 !important;
    border-bottom: 1px solid #334155 !important;
}

html.dark-mode .data-table tr:hover td,
html.dark-mode table tr:hover td,
body.dark-mode .data-table tr:hover td,
body.dark-mode table tr:hover td {
    background-color: #2D3D58 !important;
}

html.dark-mode .tabela-nome,
body.dark-mode .tabela-nome {
    color: #E2E8F0 !important;
}

html.dark-mode .form-control,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
body.dark-mode .form-control,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #1E293B !important;
    color: #F8FAFC !important;
    border-color: #475569 !important;
}

html.dark-mode .form-control:focus,
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus,
body.dark-mode .form-control:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #2f6fa8 !important;
    background-color: #0F172A !important;
    color: #FFFFFF !important;
}

/* As telas de autenticação (Login, Setup Inicial, 2FA) usam um cartão branco fixo,
   pensado para ficar igual independente do tema do app — nunca devem seguir o dark
   mode. Como a regra acima usa !important em seletores de elemento genéricos (input,
   select, textarea), precisamos de uma regra MAIS específica para restaurar a
   aparência clara dentro de ".reforma-auth-card". */
html.dark-mode .reforma-auth-card .form-control,
html.dark-mode .reforma-auth-card input,
html.dark-mode .reforma-auth-card select,
html.dark-mode .reforma-auth-card textarea,
body.dark-mode .reforma-auth-card .form-control,
body.dark-mode .reforma-auth-card input,
body.dark-mode .reforma-auth-card select,
body.dark-mode .reforma-auth-card textarea {
    background-color: #FFFFFF !important;
    color: #14213D !important;
    border-color: #CBD5E1 !important;
}

html.dark-mode .reforma-auth-card .form-control:focus,
html.dark-mode .reforma-auth-card input:focus,
html.dark-mode .reforma-auth-card select:focus,
html.dark-mode .reforma-auth-card textarea:focus,
body.dark-mode .reforma-auth-card .form-control:focus,
body.dark-mode .reforma-auth-card input:focus,
body.dark-mode .reforma-auth-card select:focus,
body.dark-mode .reforma-auth-card textarea:focus {
    border-color: #2f6fa8 !important;
    background-color: #FFFFFF !important;
    color: #14213D !important;
}

html.dark-mode .filtros-frame,
html.dark-mode .filtros,
html.dark-mode .card,
html.dark-mode .produto-card,
html.dark-mode .stat-card,
html.dark-mode .box-resumo,
html.dark-mode .card-resumo,
html.dark-mode .cadastro-card,
html.dark-mode .table-wrap,
body.dark-mode .filtros-frame,
body.dark-mode .filtros,
body.dark-mode .card,
body.dark-mode .produto-card,
body.dark-mode .stat-card,
body.dark-mode .box-resumo,
body.dark-mode .card-resumo,
body.dark-mode .cadastro-card,
body.dark-mode .table-wrap {
    background-color: #1E293B !important;
    border-color: #334155 !important;
    color: #F8FAFC !important;
}

html.dark-mode .section-title,
html.dark-mode .page-title,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
body.dark-mode .section-title,
body.dark-mode .page-title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #F8FAFC !important;
}

html.dark-mode .campo label,
html.dark-mode label,
body.dark-mode .campo label,
body.dark-mode label {
    color: #CBD5E1 !important;
}

html.dark-mode .btn-page,
html.dark-mode .btn-secondary,
body.dark-mode .btn-page,
body.dark-mode .btn-secondary {
    background-color: #334155 !important;
    color: #F8FAFC !important;
    border-color: #475569 !important;
}

html.dark-mode .btn-page:hover,
html.dark-mode .btn-secondary:hover,
body.dark-mode .btn-page:hover,
body.dark-mode .btn-secondary:hover {
    background-color: #475569 !important;
    color: #FFFFFF !important;
}

html.dark-mode .tab-btn,
body.dark-mode .tab-btn {
    background-color: #1E293B !important;
    color: #94A3B8 !important;
    border-color: #334155 !important;
}

html.dark-mode .tab-btn.tab-ativa,
body.dark-mode .tab-btn.tab-ativa {
    background-color: #2f6fa8 !important;
    color: #FFFFFF !important;
    border-color: #2f6fa8 !important;
}

html.dark-mode .status,
body.dark-mode .status {
    background-color: #1E293B !important;
    border-color: #475569 !important;
    color: #E2E8F0 !important;
}

html.dark-mode .campo-hint-bloco,
body.dark-mode .campo-hint-bloco {
    color: #94A3B8 !important;
}

html.dark-mode pre,
html.dark-mode code,
body.dark-mode pre,
body.dark-mode code {
    background-color: #0F172A !important;
    color: #E2E8F0 !important;
    border-color: #334155 !important;
}

html.dark-mode .theme-toggle-btn,
body.dark-mode .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #FFFFFF !important;
}

html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background:white"],
html.dark-mode [style*="background: white"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: white"] {
    background-color: #1E293B !important;
    color: #F8FAFC !important;
    border-color: #334155 !important;
}

html.dark-mode [style*="background:#F0F9FF"],
html.dark-mode [style*="background: #F0F9FF"],
body.dark-mode [style*="background:#F0F9FF"],
body.dark-mode [style*="background: #F0F9FF"] {
    background-color: #0C2A4D !important;
    border-color: #0284C7 !important;
    color: #F8FAFC !important;
}

html.dark-mode [style*="background:#FFFBEB"],
html.dark-mode [style*="background: #FFFBEB"],
body.dark-mode [style*="background:#FFFBEB"],
body.dark-mode [style*="background: #FFFBEB"] {
    background-color: #3B2A06 !important;
    border-color: #F59E0B !important;
    color: #FEF3C7 !important;
}

/* =====================================================================
   NEUTRALIZAÇÃO DO DARK MODE LEGADO DENTRO DO MÓDULO DescomplicAI Reforma Tributária
   O DescomplicAI Reforma Tributária tem seu próprio sistema de dark mode, bem mais preciso
   ([data-theme="dark"] .reforma-*, em reforma.css). As regras legadas acima
   (baseadas em seletores de atributo genéricos como [style*="background:#fff"]
   e em elementos genéricos como input/label) foram pensadas para outras
   telas do site e, com !important, sobrescreviam qualquer cor que o DescomplicAI Reforma Tributária
   definisse — inclusive correções já feitas inline. Por isso, dentro de
   ".reforma-container" (toda tela do DescomplicAI Reforma Tributária) e ".reforma-auth-card" (Login, Setup
   Inicial, 2FA), essas regras são neutralizadas e substituídas por valores
   fixos e legíveis, com especificidade maior para vencer o empate de
   !important.
   ===================================================================== */
html.dark-mode .reforma-container [style*="background:#fff"],
html.dark-mode .reforma-container [style*="background: #fff"],
html.dark-mode .reforma-container [style*="background:#ffffff"],
html.dark-mode .reforma-container [style*="background: #ffffff"],
html.dark-mode .reforma-container [style*="background:white"],
html.dark-mode .reforma-container [style*="background: white"],
html.dark-mode .reforma-auth-card [style*="background:#fff"],
html.dark-mode .reforma-auth-card [style*="background: #fff"],
html.dark-mode .reforma-auth-card [style*="background:#ffffff"],
html.dark-mode .reforma-auth-card [style*="background: #ffffff"],
html.dark-mode .reforma-dark-safe [style*="background:#fff"],
html.dark-mode .reforma-dark-safe [style*="background: #fff"],
html.dark-mode .reforma-dark-safe [style*="background:#ffffff"],
html.dark-mode .reforma-dark-safe [style*="background: #ffffff"],
html.dark-mode .reforma-dark-safe [style*="background:white"],
html.dark-mode .reforma-dark-safe [style*="background: white"],
body.dark-mode .reforma-container [style*="background:#fff"],
body.dark-mode .reforma-container [style*="background: #fff"],
body.dark-mode .reforma-container [style*="background:#ffffff"],
body.dark-mode .reforma-container [style*="background: #ffffff"],
body.dark-mode .reforma-container [style*="background:white"],
body.dark-mode .reforma-container [style*="background: white"],
body.dark-mode .reforma-auth-card [style*="background:#fff"],
body.dark-mode .reforma-auth-card [style*="background: #fff"],
body.dark-mode .reforma-auth-card [style*="background:#ffffff"],
body.dark-mode .reforma-auth-card [style*="background: #ffffff"],
body.dark-mode .reforma-dark-safe [style*="background:#fff"],
body.dark-mode .reforma-dark-safe [style*="background: #fff"],
body.dark-mode .reforma-dark-safe [style*="background:#ffffff"],
body.dark-mode .reforma-dark-safe [style*="background: #ffffff"],
body.dark-mode .reforma-dark-safe [style*="background:white"],
body.dark-mode .reforma-dark-safe [style*="background: white"] {
    background-color: #FFFFFF !important;
    color: #1E293B !important;
    border-color: #E2E8F0 !important;
}

html.dark-mode .reforma-container [style*="background:#f8fafc"],
html.dark-mode .reforma-container [style*="background: #f8fafc"],
html.dark-mode .reforma-dark-safe [style*="background:#f8fafc"],
html.dark-mode .reforma-dark-safe [style*="background: #f8fafc"],
body.dark-mode .reforma-container [style*="background:#f8fafc"],
body.dark-mode .reforma-container [style*="background: #f8fafc"],
body.dark-mode .reforma-dark-safe [style*="background:#f8fafc"],
body.dark-mode .reforma-dark-safe [style*="background: #f8fafc"] {
    background-color: #F8FAFC !important;
    color: #1E293B !important;
    border-color: #E2E8F0 !important;
}

html.dark-mode .reforma-container .form-control,
html.dark-mode .reforma-container input,
html.dark-mode .reforma-container select,
html.dark-mode .reforma-container textarea,
html.dark-mode .reforma-auth-card .form-control,
html.dark-mode .reforma-auth-card input,
html.dark-mode .reforma-auth-card select,
html.dark-mode .reforma-auth-card textarea,
html.dark-mode .reforma-dark-safe .form-control,
html.dark-mode .reforma-dark-safe input,
html.dark-mode .reforma-dark-safe select,
html.dark-mode .reforma-dark-safe textarea,
body.dark-mode .reforma-container .form-control,
body.dark-mode .reforma-container input,
body.dark-mode .reforma-container select,
body.dark-mode .reforma-container textarea,
body.dark-mode .reforma-auth-card .form-control,
body.dark-mode .reforma-auth-card input,
body.dark-mode .reforma-auth-card select,
body.dark-mode .reforma-auth-card textarea,
body.dark-mode .reforma-dark-safe .form-control,
body.dark-mode .reforma-dark-safe input,
body.dark-mode .reforma-dark-safe select,
body.dark-mode .reforma-dark-safe textarea {
    background-color: #FFFFFF !important;
    color: #14213D !important;
    border-color: #CBD5E1 !important;
}

html.dark-mode .reforma-container .form-control:focus,
html.dark-mode .reforma-container input:focus,
html.dark-mode .reforma-container select:focus,
html.dark-mode .reforma-container textarea:focus,
html.dark-mode .reforma-auth-card .form-control:focus,
html.dark-mode .reforma-auth-card input:focus,
html.dark-mode .reforma-auth-card select:focus,
html.dark-mode .reforma-auth-card textarea:focus,
html.dark-mode .reforma-dark-safe .form-control:focus,
html.dark-mode .reforma-dark-safe input:focus,
html.dark-mode .reforma-dark-safe select:focus,
html.dark-mode .reforma-dark-safe textarea:focus,
body.dark-mode .reforma-container .form-control:focus,
body.dark-mode .reforma-container input:focus,
body.dark-mode .reforma-container select:focus,
body.dark-mode .reforma-container textarea:focus,
body.dark-mode .reforma-auth-card .form-control:focus,
body.dark-mode .reforma-auth-card input:focus,
body.dark-mode .reforma-auth-card select:focus,
body.dark-mode .reforma-auth-card textarea:focus,
body.dark-mode .reforma-dark-safe .form-control:focus,
body.dark-mode .reforma-dark-safe input:focus,
body.dark-mode .reforma-dark-safe select:focus,
body.dark-mode .reforma-dark-safe textarea:focus {
    border-color: #2f6fa8 !important;
    background-color: #FFFFFF !important;
    color: #14213D !important;
}

html.dark-mode .reforma-container label,
html.dark-mode .reforma-auth-card label,
html.dark-mode .reforma-dark-safe label,
body.dark-mode .reforma-container label,
body.dark-mode .reforma-auth-card label,
body.dark-mode .reforma-dark-safe label {
    color: #475569 !important;
}

html.dark-mode .reforma-dark-safe table,
html.dark-mode .reforma-dark-safe .data-table,
body.dark-mode .reforma-dark-safe table,
body.dark-mode .reforma-dark-safe .data-table {
    background-color: #FFFFFF !important;
    color: #1E293B !important;
    border-color: #E2E8F0 !important;
}

html.dark-mode .reforma-dark-safe table th,
html.dark-mode .reforma-dark-safe .data-table th,
body.dark-mode .reforma-dark-safe table th,
body.dark-mode .reforma-dark-safe .data-table th {
    background-color: #F8FAFC !important;
    color: #475569 !important;
    border-color: #E2E8F0 !important;
}

html.dark-mode .reforma-dark-safe table td,
html.dark-mode .reforma-dark-safe .data-table td,
body.dark-mode .reforma-dark-safe table td,
body.dark-mode .reforma-dark-safe .data-table td {
    background-color: #FFFFFF !important;
    color: #1E293B !important;
    border-color: #E2E8F0 !important;
}

.side-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    flex-shrink: 0;
}
.side-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    transition: transform 0.2s ease, stroke 0.2s ease;
}
.side-group-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}
.chevron-icon {
    transition: transform 0.2s ease;
}
.chevron-icon.expanded {
    transform: rotate(180deg);
}


/* ==========================================================================
   ENHANCED DARK & LIGHT MODE STYLING FIXES (8 SCREENS)
   ========================================================================== */

/* 1. Transactional Data Loading */
html.dark-mode .billing-page,
body.dark-mode .billing-page {
    background: #1E293B !important;
    color: #F8FAFC !important;
    border-color: #334155 !important;
}

html.dark-mode .billing-page .section-title,
body.dark-mode .billing-page .section-title {
    color: #94A3B8 !important;
    border-color: #334155 !important;
}

html.dark-mode .billing-page .campo label,
body.dark-mode .billing-page .campo label {
    color: #F8FAFC !important;
}

/* 2. Dashboard Usage: Charts and Rankings */
html.dark-mode .solution-name,
body.dark-mode .solution-name,
html.dark-mode .solution-value,
body.dark-mode .solution-value {
    color: #F8FAFC !important;
}

html.dark-mode .solution-track,
body.dark-mode .solution-track {
    background: #334155 !important;
    border: 1px solid #475569 !important;
}

html.dark-mode .solution-fill,
body.dark-mode .solution-fill {
    background: #2f6fa8 !important;
}

html.dark-mode .produto-card,
body.dark-mode .produto-card {
    background: #1E293B !important;
    border-color: #334155 !important;
    color: #F8FAFC !important;
}

html.dark-mode .produto-card-titulo,
body.dark-mode .produto-card-titulo {
    color: #F8FAFC !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .produto-ranking-nome,
body.dark-mode .produto-ranking-nome {
    color: #F8FAFC !important;
}

html.dark-mode .produto-ranking-linha::before,
body.dark-mode .produto-ranking-linha::before {
    color: #94A3B8 !important;
}

html.dark-mode .produto-ranking-valor,
body.dark-mode .produto-ranking-valor {
    color: #FB923C !important;
}

/* 3. Radar de Campos, Modais e Popups */
html.dark-mode .modal-card,
body.dark-mode .modal-card,
html.dark-mode .modal-backdrop-custom > div,
body.dark-mode .modal-backdrop-custom > div {
    background: #1E293B !important;
    color: #F8FAFC !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .comunicado-markdown-view,
body.dark-mode .comunicado-markdown-view,
html.dark-mode .comunicado-markdown-view *,
body.dark-mode .comunicado-markdown-view * {
    color: #F8FAFC !important;
}

html.dark-mode .comunicado-markdown-view table,
body.dark-mode .comunicado-markdown-view table {
    background: #1E293B !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .comunicado-markdown-view th,
body.dark-mode .comunicado-markdown-view th {
    background: #0F172A !important;
    color: #F8FAFC !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .comunicado-markdown-view td,
body.dark-mode .comunicado-markdown-view td {
    background: #1E293B !important;
    color: #F8FAFC !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .comunicado-markdown-view code,
body.dark-mode .comunicado-markdown-view code {
    background: #0F172A !important;
    color: #FB923C !important;
    border: 1px solid #334155 !important;
}

/* 4. Code Blocks in ApiCredentials & General */
pre.curl-code,
.pre-code-dark {
    background: #0F172A !important;
    color: #F8FAFC !important;
    border: 1px solid #334155 !important;
}