/* Camada pequena de consistência visual. Regras específicas dos módulos
   continuam em sistema.css; este arquivo cuida apenas do acabamento comum. */

:root {
    color-scheme: dark;
    --ui-page-gap: 16px;
    --ui-card-radius: 12px;
    --ui-control-height: 38px;
    --ui-border: rgba(148, 163, 184, 0.14);
}

/* Tema claro: camada final para componentes antigos com cores fixas. */
[data-theme="light"] {
    --ui-border: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] body,
[data-theme="light"] .app-container,
[data-theme="light"] .main-content,
[data-theme="light"] .page-content {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

[data-theme="light"] .sidebar {
    background: var(--sidebar) !important;
    border-color: var(--sidebar-border) !important;
    color: var(--text-soft) !important;
}

html[data-theme="light"] body .topbar.app-topbar {
    background: #ffffff !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

[data-theme="light"] .app-topbar .period-tabs-wrapper {
    background: var(--surface-2) !important;
    border-color: var(--line) !important;
}

[data-theme="light"] .app-topbar .period-tab:not(.active) {
    color: var(--muted) !important;
}

[data-theme="light"] .app-topbar .topbar-page-heading,
[data-theme="light"] .app-topbar #page-title {
    color: var(--text) !important;
}

[data-theme="light"] .app-topbar :is(button, [role="button"]):not(.btn-primary) {
    color: var(--muted) !important;
}

[data-theme="light"] .app-topbar :is(button, [role="button"]):not(.btn-primary):hover {
    background-color: var(--surface-hover) !important;
    color: var(--text) !important;
}

[data-theme="light"] .app-topbar .period-tab.active {
    background: var(--blue) !important;
    color: #ffffff !important;
}

[data-theme="light"] .app-topbar #topbar-user-avatar {
    color: #ffffff !important;
}

[data-theme="light"] .content-section :is(.card, .panel, .widget, .stat-widget, .data-card, .modal-content, .modal-box) {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

/* Componentes legados ainda possuem branco fixo pensado para o tema escuro. */
[data-theme="light"] .content-section :is(
    .stat-value,
    .metric-value,
    .kpi-value,
    .card-title,
    .panel-title,
    h1,
    h2,
    h3,
    h4
) {
    color: var(--text) !important;
}

[data-theme="light"] .content-section :is(
    .stat-label,
    .stat-helper,
    .metric-label,
    .kpi-label,
    .card-subtitle,
    .text-muted
) {
    color: var(--muted) !important;
}

/* Utilitários Tailwind do shell foram gerados com a paleta escura fixa. */
[data-theme="light"] .content-section :is(.text-text, .text-white):not(button):not([role="button"]):not([class*="bg-"]),
[data-theme="light"] #section-dashboard .stat-widget .stat-value {
    color: #0f172a !important;
    opacity: 1 !important;
}

[data-theme="light"] .content-section :is(.text-text-soft, .text-text-muted, .text-muted-2) {
    color: #64748b !important;
    opacity: 1 !important;
}

[data-theme="light"] .content-section :is(p, label, td, th) {
    opacity: 1 !important;
}

[data-theme="light"] .sidebar-nav :is(a.active, .nav-item.active, .nav-sub-item.active) {
    color: var(--text-soft) !important;
}

[data-theme="light"] .sidebar-nav :is(a.active, .nav-item.active, .nav-sub-item.active) i {
    color: var(--blue) !important;
}

[data-theme="light"] .content-section :is(input, select, textarea, .form-control) {
    background-color: var(--surface-2) !important;
    border-color: var(--line-mid) !important;
    color: var(--text) !important;
}

[data-theme="light"] .content-section :is(input, textarea)::placeholder {
    color: var(--muted) !important;
}

[data-theme="light"] .app-footer {
    background-color: var(--bg) !important;
    border-color: var(--line) !important;
    color: var(--muted) !important;
}

.page-content {
    min-width: 0;
    padding: var(--ui-page-gap);
}

.content-section.section-active {
    min-width: 0;
}

.content-section .section-header {
    gap: 12px;
    margin-bottom: 16px;
}

.content-section .section-header h1,
.content-section .section-header h2 {
    margin: 0;
    line-height: 1.25;
}

.content-section :is(.card, .panel, .widget, .stat-widget, .data-card) {
    border-color: var(--ui-border);
    border-radius: var(--ui-card-radius);
}

.content-section :is(input, select, textarea, .form-control) {
    max-width: 100%;
}

.content-section :is(input:not([type="checkbox"]):not([type="radio"]), select, .form-control) {
    min-height: var(--ui-control-height);
}

.content-section :is(.table-container, .table-responsive, .gg-table-container) {
    max-width: 100%;
    overflow-x: auto;
    border-radius: var(--ui-card-radius);
    scrollbar-width: thin;
}

.content-section table {
    border-collapse: collapse;
}

.content-section :is(button, .btn, [role="button"]) {
    line-height: 1.2;
}

.modal-overlay,
.modal-backdrop {
    padding: 16px;
}

.modal-content,
.modal-box {
    max-width: min(100%, 960px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

@media (max-width: 860px) {
    :root {
        --ui-page-gap: 12px;
        --ui-card-radius: 10px;
    }

    .page-content {
        padding: var(--ui-page-gap) !important;
    }

    .content-section .section-header {
        align-items: stretch;
        flex-direction: column;
    }

    .content-section .section-header :is(.actions, .header-actions, .section-actions) {
        width: 100%;
    }

    .content-section .section-header :is(.actions, .header-actions, .section-actions) > * {
        flex: 1 1 auto;
    }

    .content-section table {
        min-width: 640px;
    }

    .modal-overlay,
    .modal-backdrop {
        padding: 8px;
    }

    .modal-content,
    .modal-box {
        max-height: calc(100dvh - 16px);
    }
}

@media (max-width: 640px) {
    /* O tema deve poder ser alternado também em celulares. */
    .app-topbar #btn-theme-toggle {
        display: inline-flex !important;
        flex: 0 0 34px;
        width: 34px !important;
        height: 34px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-section,
    .sidebar,
    .main-content {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}