/* ===== EASYDOC MODERN THEME SYSTEM ===== */

/* CSS Variables para tema unificado */
:root {
    --font-sans: "Source Sans Pro", Arial, sans-serif;
    --type-caption-size: 0.8125rem;
    --type-label-size: 0.875rem;
    --type-body-size: 1rem;
    --type-title-size: 1.125rem;
    --type-headline-size: 1.5rem;
    --type-caption-leading: 1.4;
    --type-label-leading: 1.3;
    --type-body-leading: 1.5;
    --type-title-leading: 1.35;
    --type-headline-leading: 1.25;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 30px;
    --duration-fast: 150ms;
    --duration-structural: 220ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-smooth: color var(--duration-structural) var(--ease-out), background-color var(--duration-structural) var(--ease-out), border-color var(--duration-structural) var(--ease-out), box-shadow var(--duration-structural) var(--ease-out), opacity var(--duration-structural) var(--ease-out), transform var(--duration-structural) var(--ease-out);
    --transition-fast: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
    --z-navigation-backdrop: 19;
    --z-navigation: 20;
    --z-dropdown: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-toast: 60;
    --z-tooltip: 70;

    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Bordas */
    --border-radius-sm: 4px;
    --border-radius: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
}

/* MODO CLARO (Light Mode) */
body:not(.dark-mode),
body.light-mode {
    /* Cores de fundo */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-quaternary: #e2e8f0;

    /* Cores de superficie */
    --surface-primary: #ffffff;
    --surface-secondary: #f8fafc;
    --surface-elevated: #ffffff;

    /* Cores de texto */
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-quaternary: #94a3b8;
    --text-inverse: #ffffff;

    /* Cores de borda */
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;
    --border-focus: #3730a3;

    /* Cores de ação */
    --primary: #3730a3;
    --primary-hover: #4f46e5;
    --primary-active: #312e81;
    --primary-light: #e0e7ff;

    /* Estados semânticos: superfície, borda, texto e preenchimento sólido */
    --state-success-surface: #d1fae5;
    --state-success-border: #6ee7b7;
    --state-success-text: #065f46;
    --state-success-solid: #047857;
    --state-success-on-solid: #ffffff;
    --state-warning-surface: #fef3c7;
    --state-warning-border: #fcd34d;
    --state-warning-text: #78350f;
    --state-warning-solid: #92400e;
    --state-warning-on-solid: #ffffff;
    --state-danger-surface: #fee2e2;
    --state-danger-border: #fca5a5;
    --state-danger-text: #991b1b;
    --state-danger-solid: #b91c1c;
    --state-danger-on-solid: #ffffff;
    --state-info-surface: #dbeafe;
    --state-info-border: #93c5fd;
    --state-info-text: #1e40af;
    --state-info-solid: #1d4ed8;
    --state-info-on-solid: #ffffff;
    --category-brand-solid: #3730a3;
    --category-purple-solid: #4338ca;

    /* Aliases de compatibilidade */
    --success: var(--state-success-solid);
    --success-strong: var(--state-success-text);
    --success-hover: #059669;
    --success-light: var(--state-success-surface);
    --warning: var(--state-warning-solid);
    --warning-strong: var(--state-warning-text);
    --warning-hover: #78350f;
    --warning-light: var(--state-warning-surface);
    --danger: var(--state-danger-solid);
    --danger-strong: var(--state-danger-text);
    --danger-hover: #991b1b;
    --danger-light: var(--state-danger-surface);
    --info: var(--state-info-solid);
    --info-strong: var(--state-info-text);
    --info-hover: #1e40af;
    --info-light: var(--state-info-surface);

    /* Estados de hover */
    --hover-primary: #f8fafc;
    --hover-secondary: #f1f5f9;

    /* Estados específicos */
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --table-stripe: #f9fafb;
    --table-hover: #f3f4f6;

    /* Cores dos cards do dashboard */
    --card-blue: #3730a3;
    --card-red: #ef4444;
    --card-green: #10b981;
    --card-yellow: #f59e0b;
    --card-purple: #6366f1;

    /* Sombras para modo claro */
    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* MODO ESCURO (Dark Mode) */
body.dark-mode {
    /* Cores de fundo */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-quaternary: #475569;

    /* Cores de superficie */
    --surface-primary: #1e293b;
    --surface-secondary: #334155;
    --surface-elevated: #475569;

    /* Cores de texto */
    --text-primary: #f1f5f9;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e1;
    --text-quaternary: #94a3b8;
    --text-inverse: #0f172a;

    /* Cores de borda */
    --border-primary: #334155;
    --border-secondary: #475569;
    --border-focus: #818cf8;

    /* Cores de ação - ajustadas para melhor contraste */
    --primary: #818cf8;
    --primary-hover: #a5b4fc;
    --primary-active: #6366f1;
    --primary-light: #312e81;

    --state-success-surface: #052e2b;
    --state-success-border: #047857;
    --state-success-text: #6ee7b7;
    --state-success-solid: #047857;
    --state-success-on-solid: #ffffff;
    --state-warning-surface: #422006;
    --state-warning-border: #a16207;
    --state-warning-text: #fde68a;
    --state-warning-solid: #92400e;
    --state-warning-on-solid: #ffffff;
    --state-danger-surface: #450a0a;
    --state-danger-border: #b91c1c;
    --state-danger-text: #fecaca;
    --state-danger-solid: #b91c1c;
    --state-danger-on-solid: #ffffff;
    --state-info-surface: #172554;
    --state-info-border: #2563eb;
    --state-info-text: #bfdbfe;
    --state-info-solid: #1d4ed8;
    --state-info-on-solid: #ffffff;
    --category-brand-solid: #3730a3;
    --category-purple-solid: #4338ca;

    --success: var(--state-success-text);
    --success-strong: var(--state-success-text);
    --success-hover: #a7f3d0;
    --success-light: var(--state-success-surface);
    --warning: var(--state-warning-text);
    --warning-strong: var(--state-warning-text);
    --warning-hover: #fef3c7;
    --warning-light: var(--state-warning-surface);
    --danger: var(--state-danger-text);
    --danger-strong: var(--state-danger-text);
    --danger-hover: #fee2e2;
    --danger-light: var(--state-danger-surface);
    --info: var(--state-info-text);
    --info-strong: var(--state-info-text);
    --info-hover: #dbeafe;
    --info-light: var(--state-info-surface);

    /* Estados de hover */
    --hover-primary: #334155;
    --hover-secondary: #475569;

    /* Estados específicos */
    --input-bg: #334155;
    --input-border: #475569;
    --table-stripe: #334155;
    --table-hover: #475569;

    /* Cores dos cards do dashboard - melhor contraste */
    --card-blue: #818cf8;
    --card-red: #f87171;
    --card-green: #34d399;
    --card-yellow: #fbbf24;
    --card-purple: #a5b4fc;

    /* Sombras para modo escuro */
    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* APLICAÇÃO GLOBAL DO TEMA */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans);
    font-size: var(--type-body-size);
    font-weight: 400;
    line-height: var(--type-body-leading);
    font-kerning: normal;
    transition: var(--transition-smooth);
}

html { background: #ffffff; color-scheme: light; }
html[data-theme="dark"] { background: #0f172a; color-scheme: dark; }

body.dark-mode { letter-spacing: 0.01em; }

.page-header .title {
    font-size: var(--type-headline-size) !important;
    font-weight: 600 !important;
    line-height: var(--type-headline-leading);
}

.card .heading .title,
.modal-main .content .header p,
.box-heading h3 {
    font-size: var(--type-title-size) !important;
    font-weight: 600 !important;
    line-height: var(--type-title-leading);
    letter-spacing: normal;
    text-transform: none;
}

.form-wrap .group label,
.ui-field > label,
.tab-main ul.nav li a,
.sidebar .menu-wrap ul li a span.label,
.btn {
    font-size: var(--type-label-size) !important;
    font-weight: 600 !important;
    line-height: var(--type-label-leading);
    letter-spacing: normal;
    text-transform: none;
}

.form-wrap .group input[type="text"],
.form-wrap .group input[type="email"],
.form-wrap .group input[type="password"],
.form-wrap .group select,
.form-wrap .group textarea {
    font-family: var(--font-sans);
    font-size: var(--type-body-size) !important;
    line-height: var(--type-body-leading);
}

table {
    font-family: var(--font-sans);
    font-size: var(--type-label-size);
    line-height: var(--type-caption-leading);
    font-variant-numeric: tabular-nums;
}

table th { font-weight: 600; }
table td { font-weight: 400; }

/* Layout principal */
.box-general {
    background-color: var(--bg-primary) !important;
}

/* Header */
.header {
    background-color: var(--surface-primary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-sm);
}

.topbar {
    background-color: var(--surface-primary) !important;
}

/* Sidebar */
.sidebar,
.menu-sidebar {
    background-color: var(--surface-secondary) !important;
    border-right: 1px solid var(--border-primary) !important;
}

.sidebar ul li a,
.menu-sidebar ul li a {
    color: var(--text-secondary) !important;
    transition: var(--transition-fast);
}

.sidebar ul li a:hover,
.menu-sidebar ul li a:hover,
.sidebar ul li a.active,
.menu-sidebar ul li a.active {
    background-color: var(--hover-primary) !important;
    color: var(--text-primary) !important;
}

/* Container principal */
.container {
    background-color: var(--bg-secondary) !important;
}

/* Cards e superfícies */
.card,
.dash-info-icon,
.box-content,
.table-wrap,
.modal-content,
.dropdown-menu {
    background-color: var(--surface-primary) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow);
    transition: var(--transition-smooth);
}

.card-header {
    background-color: var(--surface-secondary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

/* Textos */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

p, span, div, td, th, label {
    color: var(--text-secondary) !important;
}

.text-muted,
.small-text {
    color: var(--text-tertiary) !important;
}

/* Inputs e formulários */
input,
select,
textarea,
.form-control,
.form-select {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-primary) !important;
    transition: var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px rgba(55, 48, 163, 0.18) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary) !important;
}

/* Botões */
.btn {
    transition: var(--transition-fast);
    border-radius: var(--border-radius) !important;
}

.btn-blue,
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-inverse) !important;
}

.btn-blue:hover,
.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-gray,
.btn-default {
    background-color: var(--surface-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
}

.btn-gray:hover,
.btn-default:hover {
    background-color: var(--hover-secondary) !important;
}

/* Theme Toggle Button */
.theme-btn {
    background: transparent !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-secondary) !important;
    padding: 0.5rem !important;
    border-radius: var(--border-radius) !important;
    cursor: pointer;
    transition: var(--transition-fast);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-btn:hover {
    background-color: var(--hover-primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    transform: scale(1.05);
}

/* Tabelas */
table {
    background-color: var(--surface-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

table thead {
    background-color: var(--surface-secondary) !important;
}

table thead th {
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-primary) !important;
}

table tbody tr {
    border-bottom: 1px solid var(--border-primary) !important;
}

table tbody tr:nth-child(even) {
    background-color: var(--table-stripe) !important;
}

table tbody tr:hover {
    background-color: var(--table-hover) !important;
}

/* Primitivas compartilhadas do produto */
.ui-field > label {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
}

.ui-field > .error {
    display: block;
}

.ui-data-table {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.ui-data-table > table {
    min-width: 100%;
}

.ui-action-menu .dropdown-menu {
    min-width: 176px;
}

/* Badges e labels */
.badge {
    border-radius: var(--border-radius-sm) !important;
}

.badge-blue {
    background-color: var(--state-info-solid) !important;
    color: var(--state-info-on-solid) !important;
}

.badge-red {
    background-color: var(--state-danger-solid) !important;
    color: var(--state-danger-on-solid) !important;
}

.badge-green {
    background-color: var(--state-success-solid) !important;
    color: var(--state-success-on-solid) !important;
}

.badge-yellow {
    background-color: var(--state-warning-solid) !important;
    color: var(--state-warning-on-solid) !important;
}

.badge-purple {
    background-color: var(--category-purple-solid) !important;
    color: #fff !important;
}

/* Cards do Dashboard */
.dash-info-icon {
    border-radius: 12px !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.12), 0 2px 4px -1px rgba(15, 23, 42, 0.08) !important;
    border: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dash-info-icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.14), 0 4px 6px -2px rgba(15, 23, 42, 0.08) !important;
}

.dash-info-icon.ocean {
    background: var(--category-brand-solid) !important;
}

/* Entrada do produto — continuidade visual com a landing page */
.page-auth {
    min-height: 100vh;
    padding: 32px 20px;
    background: var(--bg-secondary) !important;
}

.page-auth .box-form-auth {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.14), 0 4px 6px -2px rgba(15, 23, 42, 0.08);
}

.page-auth .auth-brand {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--primary) !important;
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border-primary);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
}

.page-auth .auth-brand-mark {
    width: 34px;
    height: 38px;
}

.page-auth .auth-brand-mark svg {
    width: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-auth .form-wrap .title {
    margin-bottom: 28px;
}

.page-auth .form-wrap .title strong,
.page-auth .form-wrap .title span {
    display: block;
}

.page-auth .form-wrap .title strong {
    color: var(--text-primary) !important;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
}

.page-auth .form-wrap .title span {
    max-width: 42ch;
    margin-top: 7px;
    color: var(--text-tertiary) !important;
    font-size: 0.875rem;
    line-height: 1.5;
}

.page-auth .form-wrap .group input {
    min-height: 44px;
    border-radius: 6px;
}

.page-auth .form-wrap .btn {
    min-height: 44px;
    font-weight: 700;
}

.page-auth .form-wrap a:focus-visible,
.page-auth .auth-brand:focus-visible,
.page-auth .form-wrap .btn:focus-visible {
    outline: 3px solid rgba(55, 48, 163, 0.22);
    outline-offset: 3px;
}

@media (max-width: 560px) {
    .page-auth {
        align-items: flex-start;
        padding: 20px 14px;
    }

    .page-auth .box-form-auth {
        width: 100%;
    }

    .page-auth .form-wrap > .col-50 {
        width: 100%;
        text-align: left !important;
    }

    .page-auth .form-wrap > .col-50 + .col-50 {
        margin-top: 16px;
    }
}

.dash-info-icon.blue {
    background: var(--category-brand-solid) !important;
}

.dash-info-icon.purple {
    background: var(--category-purple-solid) !important;
}

.dash-info-icon.red {
    background: var(--state-danger-solid) !important;
}

.dash-info-icon.green {
    background: var(--state-success-solid) !important;
}

.dash-info-icon.yellow {
    background: var(--state-warning-solid) !important;
}

.dash-info-icon .big-text,
.dash-info-icon .small-text {
    color: #ffffff !important;
    z-index: 10;
    position: relative;
}

.dash-info-icon .big-text {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.dash-info-icon .small-text {
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.875rem !important;
    opacity: 0.9;
}

.dash-info-icon .icon {
    opacity: 0.15;
    transform: scale(2.5);
    position: absolute;
    right: 15px;
    bottom: -5px;
    z-index: 1;
}

/* Alertas */
.alert {
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--border-primary) !important;
}

.alert-default {
    background-color: var(--surface-secondary) !important;
    color: var(--text-secondary) !important;
}

/* Dropdown */
.dropdown-menu {
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-lg);
}

.dropdown-item {
    color: var(--text-secondary) !important;
}

.dropdown-item:hover {
    background-color: var(--hover-primary) !important;
    color: var(--text-primary) !important;
}

/* Modais */
.modal-content {
    background-color: var(--surface-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-primary) !important;
}

.modal-footer {
    border-top: 1px solid var(--border-primary) !important;
}

/* Gráficos e charts */
.chart-container {
    background-color: var(--surface-primary) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--border-radius) !important;
}

/* Scrollbars para dark mode */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--text-quaternary);
}

/* Animações e transições */
button, a, input, select, textarea, .card, .modal-main { transition: var(--transition-smooth); }

/* Estados de carregamento */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Fix para elementos específicos */
.page-header {
    background-color: var(--surface-primary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

.title {
    color: var(--text-primary) !important;
}

/* Melhorias para acessibilidade */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Gráficos Chart.js - Correção para dark mode */
body.dark-mode canvas {
    filter: brightness(1.1) !important;
}

/* Correções específicas para textos que ficam invisíveis */
body.dark-mode .chart-title,
body.dark-mode .chart-legend,
body.dark-mode .chart-labels {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

/* Correções para elementos SVG */
body.dark-mode svg text {
    fill: var(--text-primary) !important;
}

body.dark-mode svg .domain,
body.dark-mode svg .tick line {
    stroke: var(--border-primary) !important;
}

/* Select2 - Dropdown melhorado */
body.dark-mode .select2-container--default .select2-selection--single {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
}

body.dark-mode .select2-dropdown {
    background-color: var(--surface-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

body.dark-mode .select2-container--default .select2-results__option {
    background-color: var(--surface-primary) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .select2-container--default .select2-results__option--highlighted {
    background-color: var(--primary) !important;
    color: var(--text-inverse) !important;
}

/* Tab navigation */
.tab-main .nav li a {
    color: var(--text-secondary) !important;
    border-bottom: 2px solid transparent;
    transition: var(--transition-fast);
}

.tab-main .nav li.active a,
.tab-main .nav li a:hover {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
}

/* Melhorias para a sidebar */
.sidebar {
    box-shadow: 2px 0 8px var(--shadow-color);
}

.sidebar ul li.active a {
    background-color: var(--primary) !important;
    color: var(--text-inverse) !important;
    border-radius: var(--border-radius-md) !important;
    margin: 0 10px !important;
}

.sidebar ul li.active a::before,
.sidebar ul li.active a::after,
.menu-sidebar ul li.active a::before,
.menu-sidebar ul li.active a::after {
    display: none !important;
}

.sidebar ul li.active a i {
    color: var(--text-inverse) !important;
}

/* Sidebar Profile Dropdown fixes */
.sidebar .profile {
    display: flex;
    justify-content: center;
    width: 100%;
}

.sidebar .profile img {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid var(--border-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.sidebar .profile img:hover {
    border-color: var(--primary);
    transform: scale(1.05);
}

.sidebar .profile .dropdown-menu {
    top: auto !important;
    bottom: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 180px;
    box-shadow: 0 -4px 15px var(--shadow-color) !important;
}

/* Page header */
.page-header .title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* Charts container - período */
.chart-period-container {
    background-color: var(--surface-primary) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--border-radius) !important;
    padding: 1rem;
}

/* Texto dos gráficos */
.chart-period-container h3,
.chart-period-container .chart-title {
    color: var(--text-primary) !important;
    text-align: center;
    margin-bottom: 1rem;
}

/* Filtros de data */
.date-range-text {
    color: var(--text-tertiary) !important;
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

/* Loading states */
.loading-overlay {
    background-color: rgba(var(--bg-primary), 0.8) !important;
    color: var(--text-primary) !important;
}

/* Tooltips */
.tooltip {
    background-color: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-md);
}

/* Links */
a {
    color: var(--primary) !important;
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--primary-hover) !important;
}

/* Error messages */
.error {
    color: var(--danger-strong) !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Success messages */
.success {
    color: var(--success-strong) !important;
}

/* Warning messages */
.warning {
    color: var(--warning-strong) !important;
}

/* Paginação Moderna */
.pagination {
    background: transparent !important;
    border: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    width: 100%;
}

.pagination .col {
    display: flex;
    align-items: center;
}

.pagination p {
    font-size: 0.875rem;
    color: var(--text-tertiary) !important;
    margin: 0;
}

.pagination ul {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination a.page-link,
.pagination span.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--text-secondary) !important;
    background-color: var(--surface-primary) !important;
    border: 1px solid var(--border-primary) !important;
    transition: all 0.2s ease;
    text-decoration: none;
}

.pagination a.page-link:hover {
    background-color: var(--hover-primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.pagination .active span.page-link {
    background: var(--primary) !important;
    color: var(--text-inverse) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 6px -1px rgba(55, 48, 163, 0.25) !important;
}

.alert.alert-green,
.alert.alert-success {
    color: var(--state-success-text) !important;
    background-color: var(--state-success-surface) !important;
    border-color: var(--state-success-border) !important;
}

.alert.alert-yellow,
.alert.alert-warning {
    color: var(--state-warning-text) !important;
    background-color: var(--state-warning-surface) !important;
    border-color: var(--state-warning-border) !important;
}

.alert.alert-red,
.alert.alert-danger {
    color: var(--state-danger-text) !important;
    background-color: var(--state-danger-surface) !important;
    border-color: var(--state-danger-border) !important;
}

.alert.alert-blue,
.alert.alert-info {
    color: var(--state-info-text) !important;
    background-color: var(--state-info-surface) !important;
    border-color: var(--state-info-border) !important;
}

.alert a { color: currentColor !important; text-decoration: underline; }

/* Correções para chart.js específico */
.chart-container canvas {
    background-color: var(--surface-primary) !important;
}

/* Força contraste em todos os textos dentro de gráficos */
body.dark-mode .chartjs-tooltip {
    background-color: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

/* Print styles */
@media print {
body {
        background-color: white !important;
        color: black !important;
    }

    .sidebar {
        display: none !important;
    }

    .theme-toggle {
        display: none !important;
    }
}

/* RESPONSIVIDADE MOBILE */
@media (max-width: 768px) {
    /* Stack columns on mobile */
    .col-50 {
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* Fix modal sizing */
    .modal-main {
        width: 95% !important;
        margin: 10px auto !important;
    }

    /* Ensure tables scroll horizontally */
    .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Adjust padding for container */
    .container {
        padding: 10px !important;
    }

    /* Adjust button sizes for touch */
    .btn {
        padding: 12px 20px !important;
        height: auto !important;
    }
}

.skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-tooltip);
    padding: 10px 14px;
    color: #ffffff !important;
    background: #3730a3;
    border-radius: var(--border-radius);
    font-weight: 600;
    transform: translateY(calc(-100% - var(--space-5)));
    transition: transform var(--duration-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* EasyDoc flagship workspace */
.app-brand { display: inline-flex !important; align-items: center; gap: 10px; color: var(--text-primary) !important; font-weight: 700; text-decoration: none; }
.app-brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--primary); border-radius: 8px; font-size: var(--type-caption-size); letter-spacing: -0.01em; }
.app-brand-name { font-size: var(--type-title-size); line-height: var(--type-title-leading); }
.profile-initials { width: 45px; height: 45px; display: grid; place-items: center; color: #fff; background: var(--primary); border: 2px solid var(--border-primary); border-radius: 50%; font-weight: 700; cursor: pointer; }
.dropdown-trigger { min-width: 44px; min-height: 44px; padding: 8px; color: var(--text-secondary); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.dropdown.open > .dropdown-menu { display: block !important; visibility: visible !important; opacity: 1 !important; }
.modal-main[aria-hidden="true"] { visibility: hidden; }
.modal-main[aria-hidden="false"] { visibility: visible; }
.modal-main .content > button.close {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 1.5rem;
    cursor: pointer;
}
.modal-main .content > button.close:hover { color: var(--text-primary); background: var(--hover-primary); }
.dashboard-workspace { display: flex; flex-direction: column; }
.dashboard-documents { order: 1; }
.dashboard-summary { order: 2; }
.dashboard-analytics { order: 3; }
.dashboard-documents > .col-100 { margin-top: 0 !important; }
.dashboard-summary { margin-top: 8px; }
.dashboard-analytics { margin-top: 0; }
button.btn { font: inherit; cursor: pointer; }
.chip-remove { margin-left: 6px; padding: 4px; color: var(--text-tertiary); background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.chip-remove:focus-visible, button.close:focus-visible { outline: 3px solid rgba(79, 70, 229, .35); outline-offset: 2px; }
.download-progress { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 0 0 18px; padding: 16px 18px; color: var(--text-primary); background: var(--surface-variant); border: 1px solid var(--primary); border-radius: var(--border-radius-md); }
.download-progress-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--primary); background: var(--surface-primary); border-radius: 8px; }
.download-progress p { margin: 3px 0 0; color: var(--text-secondary); }
.download-progress-state { color: var(--primary); font-weight: 600; }
.advanced-filters { padding: 0 15px; }
.advanced-filters summary { min-height: 44px; display: flex; align-items: center; color: var(--primary); font-weight: 600; cursor: pointer; }
.advanced-filters-body { padding-top: 8px; border-top: 1px solid var(--border-primary); }
.auth-actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.auth-actions > a { align-self: flex-start; }
.auth-actions .btn { min-height: 44px; white-space: nowrap; }
.page-auth .title span { color: var(--text-secondary) !important; }
.active-filter-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.active-filter-summary span { padding: 4px 8px; color: var(--primary); background: var(--surface-variant); border-radius: 999px; font-size: var(--type-label-size); font-weight: 600; line-height: var(--type-label-leading); }
.integration-context { display: flex; align-items: center; gap: 10px; margin: 8px 0 18px; padding: 12px 14px; color: var(--text-secondary); background: var(--surface-secondary); border-radius: 8px; }
.integration-context i { color: var(--primary); }
.sidebar-menu-list { min-height: 80vh; height: 100%; display: flex; flex-direction: column; }
.sidebar-profile-item { margin-top: auto; padding: 10px 0; border-top: 1px solid var(--border-primary); text-align: center; }
.table-action-column { width: 60px; }
.fiscal-filter-link { color: var(--primary) !important; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fiscal-filter-link:hover { color: var(--primary-hover) !important; }
.company-context { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: var(--type-caption-size); line-height: var(--type-caption-leading); }
.active-filter-chip { display: inline-flex; align-items: center; margin-right: 15px; padding: 6px 10px 6px 14px; color: var(--text-primary); background: var(--surface-secondary); border: 1px solid var(--border-primary); border-radius: 999px; font-size: 0.875rem; font-weight: 600; }
.filter-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-compact { min-height: 36px; padding: 6px 12px !important; font-size: 0.875rem; font-weight: 600; }
.link-secondary { color: var(--text-secondary) !important; font-weight: 600; }
.link-secondary:hover { color: var(--primary) !important; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--border-focus) !important;
    outline-offset: 3px;
}
@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid Highlight !important; }
    .badge { border: 1px solid ButtonText; }
}
@media (max-width: 768px) {
    .download-progress { grid-template-columns: 42px 1fr; }
    .download-progress-state { grid-column: 2; }
    .dashboard-documents .heading.split-col { align-items: flex-start; flex-direction: column; gap: 16px; }
    .dashboard-documents .heading .col:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
    .dashboard-documents .heading .ml-10 { margin-left: 0 !important; }
}

@media (max-width: 640px) {
    .ui-data-table {
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
    }
    .ui-data-table > table,
    .ui-data-table > table tbody,
    .ui-data-table > table tr,
    .ui-data-table > table td { display: block; width: 100%; min-width: 0; }
    .ui-data-table > table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .ui-data-table > table tbody { display: flex; flex-direction: column; gap: var(--space-3); }
    .ui-data-table > table tbody tr {
        padding: var(--space-3) var(--space-4);
        background: var(--surface-primary) !important;
        border: 1px solid var(--border-primary);
        border-radius: var(--border-radius-md);
    }
    .ui-data-table > table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
        min-height: 44px;
        padding: 10px 0 !important;
        overflow-wrap: anywhere;
        text-align: right !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border-primary) !important;
    }
    .ui-data-table > table tbody td:last-child { border-bottom: 0 !important; }
    .ui-data-table > table tbody td::before {
        content: attr(data-label);
        flex: 0 0 min(42%, 12rem);
        color: var(--text-secondary);
        font-size: var(--type-label-size);
        font-weight: 600;
        line-height: var(--type-label-leading);
        text-align: left;
    }
    .ui-data-table > table tbody td:not([data-label])::before,
    .ui-data-table > table tbody td[data-label=""]::before { display: none; }
    .ui-data-table > table tbody td:first-child,
    .ui-data-table > table tbody td:nth-child(2) { justify-content: flex-end; }
    .ui-data-table > table tbody td small { max-width: 100%; }
}

/* Adaptação estrutural por contexto */
.box-general > .container > * {
    max-width: 1800px;
    margin-inline: auto;
}

@media (max-width: 1024px) {
    .dashboard-summary .col-33,
    .dashboard-summary .col-50 {
        width: 50%;
    }

    .dashboard-documents .col-20 {
        width: 33.333%;
    }

    .modal-main .content.modal-medium {
        width: min(100%, 880px);
    }
}

@media (max-width: 768px) {
    body {
        padding-right: env(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
    }

    .box-general > .header .logo {
        display: none;
    }

    .box-general > .header .topbar,
    .box-general > .header .topbar.closed,
    .box-general > .container,
    .box-general > .container.closed {
        width: 100%;
        margin-left: 0;
    }

    .box-general > .header .topbar {
        padding-right: max(16px, env(safe-area-inset-right));
        padding-left: max(16px, env(safe-area-inset-left));
    }

    .box-general > .header .topbar .toggle-menu { left: max(16px, env(safe-area-inset-left)); }
    .box-general > .header .topbar .right-box { right: max(16px, env(safe-area-inset-right)); }

    .box-general > .sidebar,
    .box-general > .sidebar.closed {
        left: -100%;
        width: min(85vw, 285px);
        z-index: 20;
        box-shadow: 6px 0 12px rgba(15, 23, 42, 0.16);
    }

    body.mobile-nav-ready .box-general > .sidebar:not(.closed) { left: 0; }
    .sidebar .menu-wrap { width: 100%; }

    .box-general > .container {
        padding: 16px max(14px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
    }

    .page-header {
        width: calc(100% + 28px);
        margin-left: -14px;
        padding: 20px 14px;
    }

    .page-header.split-col,
    .card .heading.split-col {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .dashboard-summary .col-33,
    .dashboard-summary .col-50,
    .dashboard-documents .col-20 {
        width: 50% !important;
    }

    .form-wrap .col-20,
    .form-wrap .col-30,
    .form-wrap .col-33,
    .form-wrap .col-40,
    .form-wrap .col-50,
    .form-wrap .col-60,
    .form-wrap .col-70,
    .form-wrap .col-80 {
        width: 100% !important;
    }

    .modal-main {
        width: 100% !important;
        margin: 0 !important;
    }

    .modal-main .dialog { margin: 12px; }
    .modal-main .content,
    .modal-main .content.modal-small,
    .modal-main .content.modal-medium,
    .modal-main .content.modal-large {
        width: 100%;
        max-width: 100%;
        border-radius: 12px;
    }

    .modal-main .content .header,
    .modal-main .content .body,
    .modal-main .content .footer { padding: 20px 16px; }

    .modal-main.sidebar .content {
        width: min(100%, 420px);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .modal-main.sidebar .content .body { height: calc(100dvh - 174px); }
    .modal-main .footer .row .col-50 { width: 50% !important; }

    .ui-data-table > table { min-width: 760px; }
    .ui-data-table { margin-inline: -14px; padding-inline: 14px; }

    .pagination { align-items: flex-start; flex-direction: column; gap: 12px; }
    .pagination ul { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }

    .dashboard-documents .heading .col:last-child,
    .final-actions { width: 100%; }

    .dashboard-documents .heading .btn { flex: 1 1 auto; }
}

@media (max-width: 480px) {
    .dashboard-summary .col-33,
    .dashboard-summary .col-50,
    .dashboard-documents .col-20 { width: 100% !important; }

    .download-progress { grid-template-columns: 1fr; text-align: left; }
    .download-progress-state { grid-column: 1; }
    .integration-context { align-items: flex-start; }
    .active-filter-chip { max-width: 100%; margin-right: 0; }
    .modal-main .footer .row { display: flex; flex-direction: column-reverse; gap: 8px; }
    .modal-main .footer .row .col-50 { width: 100% !important; padding-block: 0; }
}

@media (max-width: 560px) {
    .page-auth {
        display: flex;
        align-items: center;
        padding: max(20px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    }

    .page-auth .box-form-auth {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 450px;
        margin: auto;
        transform: none;
    }
}

@media (pointer: coarse) {
    .btn,
    .dropdown-item,
    .sidebar .menu-wrap ul li a,
    .pagination a.page-link,
    .pagination span.page-link { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Operational summary: one reading surface instead of a generic card row. */
.operational-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 30px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-primary);
    background: var(--surface-primary);
}

.operational-summary-heading { display: flex; flex-direction: column; gap: 2px; }
.operational-summary-heading > span { color: var(--text-primary); font-size: var(--type-title-size); font-weight: 600; }
.operational-summary-heading small { color: var(--text-secondary); font-size: var(--type-caption-size); }
.operational-summary-values { display: flex; gap: clamp(24px, 5vw, 72px); margin: 0; }
.operational-summary-values > div { display: flex; align-items: baseline; gap: 8px; }
.operational-summary-values dt { color: var(--text-secondary); font-size: var(--type-label-size); }
.operational-summary-values dd { margin: 0; color: var(--primary); font-size: var(--type-title-size); font-weight: 700; font-variant-numeric: tabular-nums; }

.fiscal-totals { display: contents; }
.fiscal-total {
    min-height: 104px;
    padding: 18px;
    color: #ffffff;
    background: var(--category-color, var(--category-brand-solid));
    border-radius: var(--border-radius-md);
}
.fiscal-total--blue { --category-color: var(--category-brand-solid); }
.fiscal-total--green { --category-color: var(--state-success-solid); }
.fiscal-total--yellow { --category-color: var(--card-yellow); --category-ink: #422006; }
.fiscal-total--red { --category-color: var(--state-danger-solid); }
.fiscal-total--purple { --category-color: var(--category-purple-solid); }
.fiscal-total .col { width: 100%; }
.fiscal-total .big-text {
    display: block;
    color: var(--category-ink, #ffffff) !important;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}
.fiscal-total .small-text {
    display: block;
    margin-top: var(--space-2);
    color: var(--category-ink, #ffffff) !important;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.fiscal-total small {
    display: block;
    margin-top: var(--space-1);
    color: var(--category-ink, #ffffff) !important;
    font-size: var(--type-label-size);
    font-weight: 600;
    line-height: var(--type-label-leading);
    font-variant-numeric: tabular-nums;
    opacity: 1;
}

.navigation-backdrop { display: none; }

@media (max-width: 768px) {
    body.mobile-nav-open { overflow: hidden; }
    body.mobile-nav-open .navigation-backdrop {
        position: fixed;
        inset: 0;
        z-index: 19;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, 0.55);
        cursor: default;
    }
    .operational-summary { align-items: flex-start; flex-direction: column; gap: 16px; padding: 16px; }
    .operational-summary-values { width: 100%; justify-content: space-between; gap: 12px; }
    .operational-summary-values > div { align-items: flex-start; flex-direction: column-reverse; gap: 2px; }
}

@media (max-width: 420px) {
    .operational-summary-values { flex-direction: column; }
    .operational-summary-values > div { flex-direction: row; justify-content: space-between; }
}