/* ============================================================
   Usina de Obras design system — brand restyle (aditivo).
   Carregado DEPOIS de style.css (ordem alfabética dos assets):
   as regras daqui vencem na cascata. Mantém todos os #id/.class
   que o JS usa; adiciona apenas regras visuais.
   Fontes (Comfortaa + Nunito Sans) via external_stylesheets em app.py.
   ============================================================ */

/* ── Tokens ────────────────────────────────────────────────── */
:root {
    --udo-wine-950: #270114;   /* sidebar/topo e thead */
    --udo-red-800: #5d221f;
    --udo-red-700: #89201d;    /* títulos, links, group-headers de tabela */
    --udo-red-600: #af1a1c;    /* botão primário */
    --udo-neutral-50: #faf7f6; /* fundo da página e zebra */
    --udo-neutral-100: #f2ebe9;
    --udo-neutral-200: #e4d7d4;
    --udo-neutral-300: #cbb8b4;
    --udo-neutral-600: #5c5350;
    --udo-neutral-900: #1a1210;
    --font-display: 'Comfortaa', ui-rounded, sans-serif;  /* títulos */
    --font-body: 'Nunito Sans', system-ui, sans-serif;    /* corpo */
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(15,10,9,.06), 0 1px 1px rgba(15,10,9,.04);
    --shadow-md: 0 4px 12px rgba(15,10,9,.10), 0 1px 2px rgba(15,10,9,.06);
}

/* ── Remap das variáveis do tema legado (style.css) ────────────
   Todo o CSS legado consome estas vars; redeclaradas aqui (mesmo
   seletor :root, depois na cascata) convertem o tema dark → claro. */
:root {
    --bg-root: var(--udo-neutral-50);
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: var(--udo-neutral-100);
    --bg-elevated: #ffffff;
    --bg-sidebar: var(--udo-wine-950);

    --accent: var(--udo-red-700);
    --accent-dim: rgba(175, 26, 28, 0.08);
    --accent-hover: var(--udo-red-600);
    --blue: #2b6cb0;
    --blue-dim: rgba(43, 108, 176, 0.10);

    --success: #2f855a;
    --danger: #c53030;
    --warning: #d97706;

    --text-primary: var(--udo-neutral-900);
    --text-secondary: var(--udo-neutral-600);
    --text-muted: #8a7d79;
    --text-accent: var(--accent);

    --border: var(--udo-neutral-200);
    --border-subtle: rgba(26, 18, 16, 0.06);
    --border-accent: rgba(175, 26, 28, 0.25);

    --radius-lg: 16px;

    --shadow-card: var(--shadow-sm);
    --shadow-elevated: var(--shadow-md);
    --shadow-glow: 0 0 20px rgba(175, 26, 28, 0.05);
}

/* ── Base ──────────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    background: var(--udo-neutral-50);
    color: var(--udo-neutral-900);
    margin: 0;
}

/* Textura de fundo do tema legado (copper/azul) → tons quentes sutis */
body::before {
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(175, 26, 28, 0.015) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 70%, rgba(39, 1, 20, 0.015) 0%, transparent 70%);
}

a { color: var(--udo-red-700); }
a:hover { color: var(--udo-red-600); }

/* ── Sidebar = "barra vinho" do design system ──────────────────
   Vars re-escopadas: tudo dentro do sidebar (dropdowns, counters,
   toggles, sliders, datepicker) herda automaticamente o contraste
   claro-sobre-vinho. */
.sidebar {
    --bg-card: rgba(255, 255, 255, 0.07);
    --bg-card-hover: rgba(255, 255, 255, 0.12);
    --bg-elevated: #3d0a24;
    --accent: #e8a798;
    --accent-dim: rgba(255, 255, 255, 0.10);
    --accent-hover: #f3c4b8;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.78);
    --text-muted: rgba(255, 255, 255, 0.55);
    --border: rgba(255, 255, 255, 0.16);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-accent: rgba(255, 255, 255, 0.28);
    --danger: #f0a3a3;
    --success: #7fd6ab;
}

/* Linha de acento no topo do sidebar (era copper) */
.sidebar::before {
    background: linear-gradient(90deg, var(--udo-red-600), transparent 80%);
}

.sidebar h5 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

/* Badge de versão (v1.0.X) no header do sidebar */
.app-version {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
}
.sidebar .app-version {
    display: block;
    margin-top: 4px;
}

/* Glow interno do counter-block (era copper) */
.counter-block::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
}

/* Opção selecionada nos dropdowns do sidebar (era copper hardcoded) */
.sidebar .dash-dropdown .Select-option.is-selected {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

/* Glow dos handles do slider (era copper) */
.sidebar .rc-slider-handle {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}
.sidebar .rc-slider-handle:hover,
.sidebar .rc-slider-handle:active,
.sidebar .rc-slider-handle-dragging {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.35) !important;
}

/* Dia selecionado no calendário (legado usa var(--bg-root) p/ texto) */
.CalendarDay__selected,
.CalendarDay__selected:hover {
    background: var(--udo-red-600) !important;
    color: #ffffff !important;
    border-color: var(--udo-red-600) !important;
}

/* Datepicker do Dash 4 (dash-datepicker-*): não usa mais CalendarDay;
   o dia selecionado/setas vêm dos tokens --Dash-* (roxo default). */
:root {
    --Dash-Fill-Interactive-Strong: var(--udo-red-600) !important;
    --Dash-Fill-Interactive-Weak: rgba(175, 26, 28, 0.08) !important;
}

/* Valores dos KPI cards: o overflow-wrap:break-word do Bootstrap quebrava
   "R$ 12.580.994,67" no meio dos dígitos; só pode quebrar após o "R$".
   O clamp acompanha a largura do card (4 colunas ao lado da sidebar) para
   o número inteiro caber sem clipar em viewports estreitos. */
.card-body h4.fw-bold {
    overflow-wrap: normal;
    word-break: keep-all;
    font-size: clamp(0.95rem, 4.3vw - 1.6rem, 1.55rem) !important;
}

/* ── Botões: pílula; primário vermelho ─────────────────────── */
.btn {
    font-family: var(--font-body);
    font-weight: 700;
    border-radius: var(--radius-pill) !important;
    transition: background-color 160ms ease, transform 120ms ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
    background-color: var(--udo-red-600) !important;
    border-color: var(--udo-red-600) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    background-color: var(--udo-red-700) !important;
    border-color: var(--udo-red-700) !important;
}

/* Sidebar: legado força radius-sm — pílula vence declarada depois */
.sidebar .btn { border-radius: var(--radius-pill) !important; }

/* Exportar Excel: botão sólido vermelho sobre o vinho */
.sidebar .btn-export-accent {
    background-color: var(--udo-red-600) !important;
    border-color: var(--udo-red-600) !important;
    color: #ffffff !important;
}
.sidebar .btn-export-accent:hover {
    background-color: #c93537 !important;
    border-color: #c93537 !important;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.35) !important;
}

/* Exportar PDF: outline claro sobre o vinho (inline usa ACCENT escuro) */
.sidebar .btn-export-outline {
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}
.sidebar .btn-export-outline:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    color: #ffffff !important;
}

/* Botão "Sair" (outline light sobre página clara) */
#dashboard-container div[style*="margin-left"] .btn-outline-light {
    color: var(--udo-neutral-600);
    border-color: var(--udo-neutral-300);
}
#dashboard-container div[style*="margin-left"] .btn-outline-light:hover {
    color: var(--udo-neutral-900);
    background-color: var(--udo-neutral-100);
    border-color: var(--udo-neutral-300);
}

/* ── Cabeçalho da página (equivalente ao .page-header) ─────── */
.page-header,
div[style*="margin-left"] > div.mb-3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 16px 24px;
    background: #fff;
    border: 1px solid var(--udo-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}

.page-title,
div[style*="margin-left"] > div.mb-3 > h4 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--udo-red-700) !important;
    margin: 0;
}

div[style*="margin-left"] > div.mb-3 > .btn {
    margin-left: auto !important;
}

/* ── Texto de status discreto ──────────────────────────────── */
.status-bar { font-size: 13px; color: var(--udo-neutral-600); padding: 10px 4px; margin-bottom: 8px; }
.status-bar strong { color: var(--udo-neutral-900); }

/* ── Avisos: âmbar suave ───────────────────────────────────── */
.warnings > * {
    background: #fbf1e0;
    color: #8a5a12;
    border: 1px solid #f0dcb2;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 13px;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card::before {
    background: linear-gradient(90deg, transparent, rgba(175, 26, 28, 0.08), transparent);
}
.card:hover {
    border-color: rgba(175, 26, 28, 0.18) !important;
}

/* ── Tabs ──────────────────────────────────────────────────── */
.nav-tabs .nav-link:hover {
    border-bottom-color: rgba(175, 26, 28, 0.30) !important;
}

/* ── Toast (Bootstrap claro) ───────────────────────────────── */
.toast {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* ── Modal expand: close button sem o invert do tema dark ──── */
.modal-expand-chart .modal-header .btn-close {
    filter: none;
    opacity: 0.6;
}

/* Overlay do dcc.Loading (era escuro) */
._dash-loading-callback {
    background-color: rgba(250, 247, 246, 0.55) !important;
}

/* ── AG Grid: thead vinho, zebra e hover quentes ───────────────
   Mesmo seletor do legado (.ag-theme-alpine-dark, classe mantida
   — o JS/Dash a referencia); só as cores mudam. */
.ag-theme-alpine-dark {
    --ag-background-color: #ffffff !important;
    --ag-foreground-color: var(--udo-neutral-900) !important;
    --ag-data-color: var(--udo-neutral-900) !important;
    --ag-secondary-foreground-color: var(--udo-neutral-600) !important;
    --ag-disabled-foreground-color: var(--udo-neutral-300) !important;
    --ag-header-background-color: var(--udo-wine-950) !important;
    --ag-header-foreground-color: #ffffff !important;
    /* dash-ag-grid >=33 (theming API nova) renomeou as vars de texto/acento;
       sem estas, o texto do header herda o foreground escuro. */
    --ag-header-text-color: #ffffff !important;
    --ag-cell-text-color: var(--udo-neutral-900) !important;
    --ag-accent-color: var(--udo-red-600) !important;
    --ag-odd-row-background-color: var(--udo-neutral-50) !important;
    --ag-row-hover-color: #f2e3e0 !important;
    --ag-border-color: var(--udo-neutral-200) !important;
    --ag-secondary-border-color: var(--udo-neutral-100) !important;
    --ag-row-border-color: var(--udo-neutral-100) !important;
    --ag-selected-row-background-color: rgba(175, 26, 28, 0.08) !important;
    --ag-range-selection-border-color: var(--udo-red-600) !important;
    --ag-alpine-active-color: var(--udo-red-600) !important;
    --ag-input-border-color: var(--udo-neutral-300) !important;
    --ag-input-focus-border-color: var(--udo-red-600) !important;
    --ag-control-panel-background-color: #ffffff !important;
    --ag-chip-background-color: var(--udo-neutral-100) !important;
    --ag-checkbox-background-color: #ffffff !important;
    --ag-checkbox-checked-color: var(--udo-red-600) !important;
    --ag-modal-overlay-background-color: rgba(250, 247, 246, 0.66) !important;
    --ag-tooltip-background-color: #ffffff !important;
    --ag-menu-background-color: #ffffff !important;
    --ag-popup-shadow: var(--shadow-md) !important;
    border: 1px solid var(--udo-neutral-200) !important;
}

.ag-theme-alpine-dark .ag-header-cell .ag-icon,
.ag-theme-alpine-dark .ag-header-cell-menu-button .ag-icon {
    color: rgba(255, 255, 255, 0.8);
}

/* ── Tabelas HTML puras (componente do design system) ──────────
   Nenhuma <table> própria hoje (a grade é AG Grid, acima); regras
   ficam disponíveis, escopadas em .table-wrapper para não afetar
   o <table> interno do calendário do date-picker. */
.table-wrapper {
    background: #fff;
    border: 1px solid var(--udo-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: auto;
}
.table-wrapper table { border-collapse: collapse; width: 100%; font-size: 13px; }
.table-wrapper thead th {
    background: var(--udo-wine-950);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
    padding: 10px 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: sticky;
    top: 0;
    z-index: 1;
}
.table-wrapper thead th.group-header { background: var(--udo-red-700); }
.table-wrapper tbody td {
    padding: 9px 12px;
    text-align: center;
    border: 1px solid var(--udo-neutral-100);
    color: var(--udo-neutral-900);
}
.table-wrapper tbody tr:nth-child(even) { background: var(--udo-neutral-50); }
.table-wrapper tbody tr:hover { background: #f2e3e0; }
.table-wrapper tfoot td {
    font-weight: 700;
    background: var(--udo-neutral-100);
    border: 1px solid var(--udo-neutral-200);
}

/* ── Upload (aba Conferência Sienge) ───────────────────────── */
.upload-conferencia {
    transition: border-color 160ms ease, background-color 160ms ease;
}
.upload-conferencia:hover {
    border-color: var(--udo-red-600) !important;
    background-color: #fdf4f2 !important;
}
.upload-conferencia a { color: var(--udo-red-700); text-decoration: none; }

/* ── Utilitários do design system ──────────────────────────── */
.hidden { display: none !important; }
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: udo-spin 700ms linear infinite;
}
@keyframes udo-spin { to { transform: rotate(360deg); } }