/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Dark theme (default) — SENSOR slate palette ── */
:root {
    /* Backgrounds — Tailwind slate scale, pure navy (sem violeta) */
    --bg-primary:   #0f172a;   /* slate-900  — fundo principal */
    --bg-secondary: #1e293b;   /* slate-800  — cabeçalhos de tabela, status */
    --bg-panel:     #162032;   /* entre 800/900 com toque azul — painéis */
    --bg-card:      #1e2d45;   /* azul-marinho — cards */

    /* Sidebar — mais escura que o conteúdo (igual ao SENSOR) */
    --sidebar-bg:              #0c1221;
    --sidebar-border:          rgba(255,255,255,0.06);
    --sidebar-width:           260px;
    --sidebar-collapsed-width: 64px;

    /* Acentos — paleta SENSOR */
    --accent-cyan:   #22d3ee;   /* cyan-400   — primário */
    --accent-blue:   #3b82f6;   /* blue-500   — links/botões */
    --accent-green:  #10b981;   /* emerald-500 */
    --accent-orange: #f59e0b;   /* amber-500  */
    --accent-purple: #8b5cf6;   /* violet-500 */
    --accent-red:    #ef4444;   /* red-500    */

    /* Texto */
    --text-primary:   #f1f5f9;   /* slate-100 */
    --text-secondary: #94a3b8;   /* slate-400 */
    --text-muted:     #64748b;   /* slate-500 */

    --border-color: rgba(255,255,255,0.07);
    --btn-text: #0f172a;
}

/* ── Light theme override — SENSOR light palette ── */
html.light {
    --bg-primary:   #f1f5fb;
    --bg-secondary: #e2eaf5;
    --bg-panel:     #ffffff;
    --bg-card:      #ffffff;

    --sidebar-bg:     #f5f8fd;
    --sidebar-border: rgba(0,0,0,0.07);

    --accent-cyan:   #0891b2;   /* cyan-600  — mais escuro no claro */
    --accent-blue:   #2563eb;   /* blue-600  */
    --accent-green:  #059669;   /* emerald-600 */
    --accent-orange: #d97706;   /* amber-600 */
    --accent-purple: #7c3aed;   /* violet-600 */
    --accent-red:    #dc2626;   /* red-600   */

    --text-primary:   #0f172a;   /* slate-900 */
    --text-secondary: #475569;   /* slate-600 */
    --text-muted:     #94a3b8;   /* slate-400 */

    --border-color: rgba(0,0,0,0.07);
    --btn-text: #ffffff;
}

/* ===== SCROLLBAR GLOBAL — dark navy compatible ===== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(56,189,248,0.30) rgba(255,255,255,0.03);
}
/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb {
    background: rgba(56,189,248,0.28);
    border-radius: 6px;
    border: none;
    transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(56,189,248,0.55);
}
::-webkit-scrollbar-corner {
    background: transparent;
}
/* Modo claro */
html.light * {
    scrollbar-color: rgba(37,99,235,0.28) rgba(0,0,0,0.05);
}
html.light ::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
}
html.light ::-webkit-scrollbar-thumb {
    background: rgba(37,99,235,0.25);
}
html.light ::-webkit-scrollbar-thumb:hover {
    background: rgba(37,99,235,0.50);
}

html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100%;
    overflow: hidden !important;
    font-size: 14px;
    transition: background 0.25s, color 0.25s;
}

/* ===== LAYOUT ROOT ===== */
.layout-root {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.layout-main {
    flex: 1;
    overflow-y: auto;
    /* Fundo com "ambient glow" azul no topo — igual ao SENSOR */
    background:
        radial-gradient(ellipse at 55% 0%, rgba(56,110,200,0.18) 0%, transparent 55%),
        var(--bg-primary);
    min-width: 0;
    transition: background 0.3s;
}

html.light .layout-main {
    background: var(--bg-primary);
}

.layout-content {
    padding: 12px 18px 14px;
    min-height: 100%;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.25s ease, background 0.25s, border-color 0.25s;
    overflow: hidden;
}

.sidebar.sidebar-collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Header */
.sidebar-header {
    height: 64px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sidebar-toggle-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--accent-cyan);
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.75;
    transition: background 0.15s, opacity 0.15s;
}
.sidebar-toggle-btn:hover { background: rgba(34,211,238,0.12); opacity: 1; }

.sidebar-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
    min-width: 0;
}

.sidebar-brand-logo {
    height: 29px;
    width: auto;
    max-width: 42px;
    flex: 0 0 auto;
    object-fit: contain;
}

.sidebar-municipio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 108px;
    padding: 2px 6px;
    border: 1px solid rgba(56, 189, 248, .32);
    border-radius: 999px;
    background: rgba(56, 189, 248, .08);
    color: #7dd3fc;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sidebar-municipio svg { flex: 0 0 auto; }
.sidebar-municipio span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-brand-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.sidebar-brand-text {
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

/* Nav */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* scrollbar da sidebar-nav herdado do global (6px, cyan) */

.nav-group-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    text-align: left;
    white-space: nowrap;
}
.nav-group-btn:hover {
    background: rgba(34,211,238,0.08);
    color: var(--text-primary);
}
.nav-group-btn.nav-group-btn-active {
    background: rgba(34,211,238,0.12);
    color: var(--accent-cyan);
}

.nav-group-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color 0.15s;
    width: 18px;
}
.nav-group-icon.icon-active { color: var(--accent-cyan); }
.nav-group-btn:hover .nav-group-icon { color: var(--text-secondary); }

.nav-group-label { flex: 1; }

.nav-chevron {
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.nav-chevron.chevron-open { transform: rotate(90deg); }

.nav-subitems {
    margin-left: 18px;
    padding-left: 10px;
    border-left: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
    margin-bottom: 4px;
}

.nav-subitem {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
    white-space: nowrap;
}
.nav-subitem:hover {
    background: rgba(34,211,238,0.08);
    color: var(--text-primary);
}
.nav-subitem.nav-subitem-active {
    background: rgba(34,211,238,0.08);
    color: var(--accent-cyan);
    font-weight: 600;
    border-left: 2px solid var(--accent-cyan);
    margin-left: -1px;
    padding-left: 9px;
}

.nav-active-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    flex-shrink: 0;
}

/* Footer */
.sidebar-footer {
    padding: 8px;
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-footer-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    text-align: left;
    white-space: nowrap;
}
.sidebar-footer-btn:hover {
    background: rgba(34,211,238,0.08);
    color: var(--text-primary);
}

.theme-icon { flex-shrink: 0; }
.sun-icon  { color: #f59e0b; }
.moon-icon { color: var(--accent-cyan); }

/* ── Usuário logado no footer ── */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 2px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding-bottom: 10px;
    margin-bottom: 6px;
}
.sidebar-user-collapsed {
    justify-content: center;
    padding: 6px;
}
.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.sidebar-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.sidebar-user-name {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-login {
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-footer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 11px;
    padding: 6px 10px;
    white-space: nowrap;
}

/* ===== PAGE HEADER ===== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 5px 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    flex-wrap: wrap;
    gap: 8px;
}
html.light .page-header { box-shadow: 0 2px 8px rgba(0,0,0,0.07); }

/* ── Logo: tamanho aumentado nos headers de página ── */
img.page-logo  { height:44px !important; width:auto; object-fit:contain; }
img.header-logo{ height:44px !important; width:auto; object-fit:contain; }

/* ── Logo: versão clara quando tema claro está ativo ── */
html.light img.page-logo,
html.light img.header-logo,
html.light img.lp-logo-img {
    content: url('LogoMenu_Claro.png');
}

.page-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-group label { color: var(--text-secondary); font-size: 12px; font-weight: 500; }

.period-select, .date-input {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.period-select:focus, .date-input:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 0 3px rgba(34,211,238,0.12); }

.btn-buscar {
    background: var(--accent-cyan);
    color: var(--btn-text);
    border: none;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: opacity 0.2s, box-shadow 0.2s;
}
.btn-buscar:hover { opacity: 0.88; box-shadow: 0 4px 12px rgba(34,211,238,0.35); }

.countdown-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-cyan);
    background: rgba(34,211,238,0.08);
    border: 1px solid rgba(34,211,238,0.2);
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    opacity: 0.92;
    flex-shrink: 0;
}

.ultima-atualizacao {
    color: var(--text-muted);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ultima-atualizacao::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-cyan);
    opacity: 0.8;
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.85); }
}

.periodo-display {
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-cyan);
    background: rgba(34,211,238,0.08);
    border: 1px solid rgba(34,211,238,0.2);
    padding: 7px 12px;
    border-radius: 8px;
    white-space: nowrap;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    align-self: stretch;
}

/* ===== DASHBOARD CARDS ===== */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, 188px);
    gap: 12px;
    margin-bottom: 10px;
}

.dash-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, background 0.25s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.22);
}
.dash-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.32); }

html.light .dash-card { box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
html.light .dash-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.13); }

/* Top accent stripe */
.dash-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
}
.card-blue::before   { background: linear-gradient(90deg, var(--accent-blue), #60a5fa); }
.card-green::before  { background: linear-gradient(90deg, var(--accent-green), #34d399); }
.card-orange::before { background: linear-gradient(90deg, var(--accent-orange), #fcd34d); }
.card-purple::before { background: linear-gradient(90deg, var(--accent-purple), #a78bfa); }
.card-red::before    { background: linear-gradient(90deg, var(--accent-red), #f87171); }
.card-cyan::before   { background: linear-gradient(90deg, var(--accent-cyan), #67e8f9); }

/* Subtle ambient glow on card bg */
.card-blue   { border-color: rgba(59,130,246,0.2); }
.card-green  { border-color: rgba(16,185,129,0.2); }
.card-orange { border-color: rgba(245,158,11,0.2); }
.card-purple { border-color: rgba(139,92,246,0.2); }
.card-red    { border-color: rgba(239,68,68,0.2); }
.card-cyan   { border-color: rgba(34,211,238,0.2); }

/* Icon box */
.card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.card-blue .card-icon   { background: rgba(59,130,246,0.13); }
.card-green .card-icon  { background: rgba(16,185,129,0.13); }
.card-orange .card-icon { background: rgba(245,158,11,0.13); }
.card-purple .card-icon { background: rgba(139,92,246,0.13); }
.card-red .card-icon    { background: rgba(239,68,68,0.13); }
.card-cyan .card-icon   { background: rgba(34,211,238,0.13); }

.card-content { display: flex; flex-direction: column; gap: 4px; }

.card-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin-top: 4px;
    letter-spacing: -0.5px;
}

.card-pct {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.05);
    padding: 3px 8px;
    border-radius: 20px;
    width: fit-content;
}
html.light .card-pct { background: rgba(0,0,0,0.05); color: var(--text-secondary); }

/* ── Status breakdown no card Irregularidades ── */
.card-status-breakdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    flex-shrink: 0;
}
.csb-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    white-space: nowrap;
}
.csb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.csb-aberto    { color: #f97316; }
.csb-aberto    .csb-dot { background: #f97316; }
.csb-regular   { color: #10b981; }
.csb-regular   .csb-dot { background: #10b981; }
.csb-cancelado { color: #ef4444; }
.csb-cancelado .csb-dot { background: #ef4444; }
.csb-substituido { color: #a78bfa; }
.csb-substituido .csb-dot { background: #a78bfa; }

/* ===== PANELS ===== */
.dash-panel {
    background: var(--bg-panel);
    border-radius: 16px;
    padding: 0;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: background 0.25s, border-color 0.25s;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}

html.light .dash-panel { box-shadow: 0 2px 8px rgba(0,0,0,0.07); }

.panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-title::before {
    content: '';
    display: inline-block;
    width: 3px; height: 16px;
    border-radius: 3px;
    background: var(--accent-cyan);
    flex-shrink: 0;
}

/* título com botão à direita */
.panel-title.panel-title-row {
    justify-content: space-between;
}
.panel-title.panel-title-row > span {
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-title.panel-title-row > span::before {
    content: '';
    display: inline-block;
    width: 3px; height: 16px;
    border-radius: 3px;
    background: var(--accent-cyan);
    flex-shrink: 0;
}
/* anula o ::before do próprio .panel-title quando tem a classe extra */
.panel-title.panel-title-row::before { display: none; }

/* container lado direito do panel-title-row (badge + botão) */
.panel-title-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* badge valor total Ticket Médio */
.ticket-medio-total-badge {
    font-size: 13px;
    font-weight: 700;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 20px;
    padding: 3px 12px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* badge valor total genérico (Faturamento, Arrecadação…) */
.panel-value-badge {
    font-size: 13px;
    font-weight: 700;
    color: #22d3ee;
    background: rgba(34, 211, 238, 0.10);
    border: 1px solid rgba(34, 211, 238, 0.35);
    border-radius: 20px;
    padding: 3px 12px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.btn-toggle-grid {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(34,211,238,0.08);
    border: 1px solid rgba(34,211,238,0.25);
    color: var(--accent-cyan);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.btn-toggle-grid:hover {
    background: rgba(34,211,238,0.16);
    border-color: rgba(34,211,238,0.5);
}

/* ── Visão Geral: secções chart/table com CSS-toggle (sem @if) ── */
/* Modo normal: esconde a secção de gráfico quando tabela está activa */
.home-chart-section.hcs-hidden {
    height: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
    min-height: 0 !important;
}
/* Modo normal: esconde a secção de tabela quando gráfico está activo */
.home-table-section.hts-hidden {
    display: none !important;
}

/* Panel inner content spacing */
.dash-panel > .dash-table            { padding: 0; }
.dash-panel > .table-responsive      { padding: 14px 18px; }
.dash-panel > .status-grid           { padding: 16px; }
.dash-panel > p.no-data              { padding: 20px 18px; }

.dashboard-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 10px;
}

.dashboard-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.dashboard-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* mt-3 on dash-panel needs inner padding too */
.dash-panel.mt-3 > .dash-table { padding: 0; }

/* ===== TABLES ===== */
.table-responsive { overflow-x: auto; }

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

.dash-table thead tr { background: var(--bg-secondary); }

.dash-table th {
    padding: 10px 14px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color);
}

.dash-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table tbody tr:hover { background: rgba(34,211,238,0.04); }
.dash-table tfoot tr { background: var(--bg-secondary); }

.dash-table .tr-total {
    background: rgba(34,211,238,0.08);
    font-weight: 700;
    color: var(--accent-cyan);
}
/* Destaque visual da linha total — funciona tanto em tbody quanto em tfoot */
.dash-table .tr-total td {
    position: sticky; bottom: 0; z-index: 2;
    border-bottom: none;
    border-top: 3px solid #38bdf8;
    background: linear-gradient(180deg, #1e3a5f 0%, #0f2438 100%);
    color: #f1f5f9; font-weight: 800; font-size: 12.5px;
    padding-top: 10px; padding-bottom: 10px;
    box-shadow: 0 -4px 12px rgba(56, 189, 248, .25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .50);
}
.dash-table .tr-total td:first-child {
    color: #7dd3fc; border-left: 4px solid #38bdf8; padding-left: 11px;
    text-transform: uppercase; letter-spacing: .06em;
}
/* Tema claro */
html.light .dash-table .tr-total td {
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0c4a6e;
    border-top-color: #0284c7;
    box-shadow: 0 -4px 12px rgba(2, 132, 199, .20);
    text-shadow: none;
}
html.light .dash-table .tr-total td:first-child {
    color: #0369a1; border-left-color: #0284c7;
}

/* Ancora a tr-total (agora em <tfoot>) no fim do wrapper SEM tocar nas linhas:
   tabela com height:100% + spacer-row invisível no fim do tbody. O spacer
   absorve o espaço restante, empurrando o tfoot para o fundo. */
.home-table-section .table-responsive { position: relative; height: 100%; }
.home-table-section .dash-table { height: 100%; }
.home-table-section .dash-table > tbody::after {
    content: ''; display: table-row; height: 100%;
}

.dash-table-sm th, .dash-table-sm td { padding: 5px 8px; font-size: 12px; }

/* ── Gráfico Faturamento por Forma de Pagamento ───────────── */
.faturamento-pagto-chart-wrap {
    padding: 10px 16px 14px;
    height: 210px;
    position: relative;
}

/* ── Gráfico Ticket Médio ─────────────────────────────────── */
.ticket-medio-chart-wrap {
    padding: 10px 16px 8px;
    height: 220px;
    position: relative;
}

/* ── Gráfico Fiscalização Colunas ─────────────────────────── */
.fiscalizacao-colunas-wrap {
    padding: 16px 20px 20px;
    height: 280px;
    position: relative;
}

/* ── Grid assimétrico: Resumo Faturamento (1fr) + Ticket Médio (2fr) ── */
.dashboard-grid-resumo {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 600px) { .dashboard-grid-resumo { grid-template-columns: 1fr; } }

/* ── Chart Resumo de Faturamento ── */
.resumo-fat-chart-wrap {
    padding: 10px 16px 14px;
    height: 240px;
    position: relative;
}

/* ── Gráfico Meio de Arrecadação ──────────────────────────── */
.meio-arrecadacao-chart-wrap {
    padding: 10px 16px 14px;
    height: 240px;
    position: relative;
}

.text-right { text-align: right; }
.text-green { color: var(--accent-green); }
.text-orange { color: var(--accent-orange); }
.text-red   { color: var(--accent-red); }
.font-bold  { font-weight: 700; }
.table-footer td { font-weight: 700; }

/* ===== STATUS GRID ===== */
.status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
}

.status-item {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border-top: 3px solid transparent;
    transition: background 0.25s, transform 0.15s;
}
.status-item:hover { transform: translateY(-2px); }

.status-open   { border-top-color: var(--accent-orange); }
.status-ok     { border-top-color: var(--accent-green); }
.status-cancel { border-top-color: var(--accent-red); }
.status-total  { border-top-color: var(--accent-cyan); }

.status-count { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; }
.status-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500; }

/* ===== TICKET CARDS ===== */
.ticket-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.ticket-card {
    background: var(--bg-panel);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.ticket-card-header {
    background: var(--bg-secondary);
    padding: 10px 14px;
    font-weight: 700;
    font-size: 13px;
    color: var(--accent-cyan);
    border-bottom: 1px solid var(--border-color);
}

.ticket-card-body {
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ticket-stat { display: flex; flex-direction: column; gap: 2px; }
.ticket-stat-value { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.ticket-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }

/* ===== OCUPAÇÃO BAR ===== */
.occupancy-bar {
    display: inline-block;
    width: 60px;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 6px;
}

.occupancy-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-orange));
    border-radius: 4px;
    transition: width 0.5s;
}

/* ===== MAPA ===== */
.mapa-container { width: 100%; height: calc(100vh - 120px); border-radius: 10px; overflow: hidden; }
.mapa-iframe    { width: 100%; height: 100%; border: none; }

/* Mapa Online — ocupa 100% do espaço disponível sem scrollbar */
body:has(#mapabox) html,
body:has(#mapabox),
html:has(#mapabox) {
    overflow: hidden !important;
}
body:has(#mapabox) .layout-main {
    overflow: hidden !important;
    height: 100% !important;
}
body:has(#mapabox) .layout-content {
    padding: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

/* ===== LOADING ===== */
.loading-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 130px);
    gap: 28px;
    color: var(--text-secondary);
}

/* Orbital rings — substitui o spinner simples no loading-container */
.ov-orbits {
    position: relative;
    width: 140px; height: 140px;
    display: flex; align-items: center; justify-content: center;
}

.ov-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid transparent;
}

.ov-orbit-1 {
    width: 140px; height: 140px;
    border-top-color: #00C9C8;
    border-right-color: rgba(0,201,200,.35);
    animation: ov-cw 3.2s linear infinite;
}

.ov-orbit-2 {
    width: 104px; height: 104px;
    border-bottom-color: #00E676;
    border-left-color: rgba(0,230,118,.3);
    animation: ov-ccw 2.6s linear infinite;
}

.ov-orbit-3 {
    width: 70px; height: 70px;
    border-top-color: rgba(0,201,200,.6);
    border-left-color: rgba(0,201,200,.2);
    animation: ov-cw 1.9s linear infinite;
}

.ov-orbit::after { content: ""; position: absolute; border-radius: 50%; }

.ov-orbit-1::after {
    width: 6px; height: 6px;
    top: -3px; left: 50%; margin-left: -3px;
    background: #00C9C8;
    box-shadow: 0 0 8px #00C9C8, 0 0 16px rgba(0,201,200,.3);
}

.ov-orbit-2::after {
    width: 5px; height: 5px;
    bottom: -2.5px; left: 50%; margin-left: -2.5px;
    background: #00E676;
    box-shadow: 0 0 7px #00E676, 0 0 14px rgba(0,230,118,.3);
}

.ov-orbit-3::after {
    width: 4px; height: 4px;
    top: 50%; left: -2px; margin-top: -2px;
    background: #00C9C8;
    box-shadow: 0 0 5px #00C9C8;
}

.ov-center-logo {
    position: absolute;
    width: 36px; height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0,201,200,.3));
    animation: ov-pulse 2.8s ease-in-out infinite;
}

@keyframes ov-cw    { to { transform: rotate(360deg); } }
@keyframes ov-ccw   { to { transform: rotate(-360deg); } }
@keyframes ov-pulse { 0%,100%{opacity:.85;transform:scale(1);} 50%{opacity:1;transform:scale(1.05);} }
@keyframes ov-slide { 0%{margin-left:-35%;} 100%{margin-left:100%;} }

.ov-progress-track {
    width: 180px; height: 2px; border-radius: 1px;
    background: rgba(255,255,255,.04); overflow: hidden;
}
.ov-progress-bar {
    height: 100%; width: 35%; border-radius: 1px;
    background: linear-gradient(90deg, transparent, #00C9C8, #00E676, transparent);
    animation: ov-slide 2s ease-in-out infinite;
}
.loading-container p {
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(232,244,248,.5);
    letter-spacing: .015em;
    font-family: 'Exo 2', sans-serif;
    margin: 0;
}

/* ── Loading — modo claro ── */
html.light .loading-container p {
    color: #475569;
    font-weight: 600;
}
html.light .ov-orbit-1 {
    border-top-color:   #0891b2;
    border-right-color: rgba(8,145,178,.4);
}
html.light .ov-orbit-2 {
    border-bottom-color: #059669;
    border-left-color:   rgba(5,150,105,.35);
}
html.light .ov-orbit-3 {
    border-top-color:  rgba(8,145,178,.65);
    border-left-color: rgba(8,145,178,.25);
}
html.light .ov-orbit-1::after {
    background:  #0891b2;
    box-shadow:  0 0 8px rgba(8,145,178,.7), 0 0 16px rgba(8,145,178,.35);
}
html.light .ov-orbit-2::after {
    background:  #059669;
    box-shadow:  0 0 7px rgba(5,150,105,.7), 0 0 14px rgba(5,150,105,.35);
}
html.light .ov-orbit-3::after {
    background:  #0891b2;
    box-shadow:  0 0 5px rgba(8,145,178,.7);
}
html.light .ov-center-logo {
    filter: drop-shadow(0 0 8px rgba(8,145,178,.4));
}
html.light .ov-progress-track {
    background: rgba(0,0,0,.12);
}
html.light .ov-progress-bar {
    background: linear-gradient(90deg, transparent, #0891b2, #059669, transparent);
    opacity: 1;
}

/* Spinner simples — mantido para usos inline (mosaico, etc.) */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ===== MISC ===== */
.no-data      { color: var(--text-muted); text-align: center; padding: 20px; font-style: italic; }
.no-data-full { text-align: center; padding: 60px; color: var(--text-secondary); font-size: 15px; }
.mt-3 { margin-top: 10px; }
.mb-3 { margin-bottom: 10px; }

/* ===== ERROR UI ===== */
#blazor-error-ui {
    background: #6e1a1a;
    color: #fff;
    padding: 10px 20px;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: none;
    z-index: 9999;
    font-size: 13px;
}
#blazor-error-ui .reload { color: #ffeb3b; margin-left: 10px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* ── Overlay de reconexão Blazor ── */
#components-reconnect-modal        { display: none; }
#components-reconnect-modal.components-reconnect-show { display: block; }

#components-reconnect-modal .reconnect-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 12, 24, 0.82);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
#components-reconnect-modal .reconnect-box {
    background: #0f1e30;
    border: 1px solid rgba(56,189,248,0.30);
    border-radius: 16px;
    padding: 36px 44px;
    text-align: center;
    max-width: 360px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.60);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.reconnect-spinner {
    width: 44px; height: 44px;
    border: 4px solid rgba(56,189,248,0.20);
    border-top-color: #38bdf8;
    border-radius: 50%;
    animation: reconnect-spin 0.9s linear infinite;
}
@@keyframes reconnect-spin {
    to { transform: rotate(360deg); }
}
.reconnect-title {
    color: #e2e8f0;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    letter-spacing: .01em;
}
.reconnect-sub {
    color: #64748b;
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
    min-height: 38px;
}
.reconnect-btn {
    background: rgba(56,189,248,0.12);
    border: 1px solid rgba(56,189,248,0.40);
    color: #38bdf8;
    border-radius: 8px;
    padding: 8px 22px;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s;
    display: none;
}
.reconnect-btn:hover { background: rgba(56,189,248,0.22); }
html.light #components-reconnect-modal .reconnect-box { background: #f8fafc; border-color: rgba(8,145,178,0.25); }
html.light .reconnect-title { color: #0f172a; }
html.light .reconnect-sub   { color: #64748b; }
html.light .reconnect-btn   { background: rgba(8,145,178,0.10); border-color: rgba(8,145,178,0.35); color: #0891b2; }

/* ===== HOME LAYOUT: main + monitors sidebar ===== */
.home-content-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 10px;
    align-items: start;   /* side-col NÃO afeta a altura da linha — mede main-col corretamente */
}

.home-main-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Right column — altura definida pelo JS via ResizeObserver */
.home-side-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Badge de contagem no título do painel de monitores */
.monitors-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 32px;
    padding: 0 14px;
    background: rgba(34, 211, 238, 0.08);
    border: 2px solid var(--accent-cyan);
    color: var(--accent-cyan);
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.3px;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.25);
}

/* Monitors panel preenche toda a altura da side-col */
.monitors-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.monitors-list {
    overflow-y: auto;
    flex: 1;
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* scrollbar da monitors-list herdado do global (6px, cyan) */

.monitor-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    transition: background 0.15s, border-color 0.15s;
}
.monitor-card:hover {
    background: rgba(34,211,238,0.05);
    border-color: rgba(34,211,238,0.2);
}

/* ── Alertas de atualização dos monitores ─────────────────── */
@keyframes pulse-warn {
    0%, 100% { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.35); }
    50%       { background: rgba(245, 158, 11, 0.26); border-color: rgba(245, 158, 11, 0.70); }
}
@keyframes pulse-alert {
    0%, 100% { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.35); }
    50%       { background: rgba(239, 68, 68, 0.28); border-color: rgba(239, 68, 68, 0.72); }
}

.monitor-card.monitor-card-warn {
    animation: pulse-warn 2s ease-in-out infinite;
    border-color: rgba(245, 158, 11, 0.45);
}
.monitor-card.monitor-card-warn:hover {
    animation: none;
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.70);
}

.monitor-card.monitor-card-alert {
    animation: pulse-alert 1.4s ease-in-out infinite;
    border-color: rgba(239, 68, 68, 0.45);
}
.monitor-card.monitor-card-alert:hover {
    animation: none;
    background: rgba(239, 68, 68, 0.20);
    border-color: rgba(239, 68, 68, 0.72);
}

.monitor-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.monitor-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.monitor-apelido {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.monitor-nome {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.monitor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.monitor-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 20px;
    white-space: nowrap;
}
.tag-re     { background: rgba(59,130,246,0.15); color: var(--accent-blue); }
.tag-setor  { background: rgba(34,211,238,0.12); color: var(--accent-cyan); }
.tag-area   { background: rgba(139,92,246,0.12); color: var(--accent-purple); }

.monitor-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.monitor-status-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--text-muted);
}

.monitors-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 13px;
}

.monitor-header-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.monitor-bat {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 700;
    margin-left: auto;
}

.monitor-com {
    font-size: 10px;
    font-weight: 700;
    background: rgba(34,211,238,0.1);
    color: var(--accent-cyan);
    padding: 1px 5px;
    border-radius: 4px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    :root { --sidebar-width: var(--sidebar-collapsed-width); }
    .sidebar-brand, .nav-group-label, .nav-subitems,
    .nav-chevron, .sidebar-footer-info { display: none; }
    .layout-content { padding: 12px; }
    .dashboard-grid-2 { grid-template-columns: 1fr; }
    .dashboard-grid-3 { grid-template-columns: 1fr; }
    .dashboard-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .dashboard-cards { grid-template-columns: repeat(2, 1fr); }
    .home-content-grid { grid-template-columns: 1fr; }
    .home-side-col { height: auto !important; }
    .monitors-panel { max-height: 400px; }
}

@media (max-width: 1200px) {
    .home-content-grid { grid-template-columns: 1fr 260px; }
}

@media (max-width: 1024px) {
    .home-content-grid { grid-template-columns: 1fr; }
    .home-side-col { height: auto !important; }
    .monitors-panel { max-height: 400px; }
}

/* =========================================================================
   TEMA CLARO — Padronização da paleta nos módulos
   Sobrescreve cores hard-coded escuras (#151f2e, #182c3e, #091520, #111c2d,
   #162840, #0b1827, etc.) usadas em cabeçalhos/painéis dos módulos
   Digipare, Faturamento, Tickets, Fiscalização, Ocupação, Mosaico.
   Faz com que tenham a mesma paleta clara da Visão Geral.
   ========================================================================= */

/* Cabeçalho principal de tabelas (1ª linha thead) */
html.light .dig-mov-table .dash-table thead th,
html.light .tk-table-section .dash-table thead th,
html.light .fat-tab-body .dash-table thead th,
html.light .mos-table-sect .dash-table thead th,
html.light .mos-table-sect-full .dash-table thead th,
html.light .dig-forma-table .dash-table thead th,
html.light .fisc-table-section .dash-table thead th,
html.light .ocu-table-section .dash-table thead th {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* 2ª linha do thead (sub-cabeçalhos) — leve diferença para hierarquia */
html.light .dig-mov-table .dash-table thead tr:last-child th,
html.light .tk-table-section .dash-table thead tr:last-child th,
html.light .fat-tab-body .dash-table thead tr:last-child th,
html.light .mos-table-sect .dash-table thead tr:last-child th,
html.light .mos-table-sect-full .dash-table thead tr:last-child th,
html.light .fisc-table-section .dash-table thead tr:last-child th,
html.light .ocu-table-section .dash-table thead tr:last-child th {
    background: #d8e2f0 !important;
    color: var(--text-secondary) !important;
}

/* Cabeçalho de GRUPO (colspan) — fundo ciano translúcido + texto ciano escuro */
html.light .dig-mov-th-grupo,
html.light .th-grupo,
html.light .fisc-th-grupo,
html.light .ocu-th-grupo,
html.light .fat-chart-bar {
    background: rgba(34,211,238,0.12) !important;
    color: #0e7490 !important;
    border-bottom: 1px solid rgba(8,145,178,0.20) !important;
}
html.light .fat-chart-bar-title { color: #0e7490 !important; }

/* Divisores adaptativos no tema claro */
html.light .fat-divider,
html.light .fat-tabs { border-bottom-color: var(--border-color) !important; }
html.light .fat-divider { background: var(--border-color) !important; }

/* Células de filtro HORA / DIA DA SEMANA */
html.light .dig-mov-th-filter {
    background: var(--bg-secondary) !important;
}

/* Override do span de label dentro do filter cell */
html.light .dig-mov-th-filter .ms-th-wrap > span:first-child {
    color: var(--text-secondary) !important;
}

/* tfoot Total (linha totalizadora) */
html.light .fat-tfoot td,
html.light .tk-tfoot td,
html.light .dig-tfoot td,
html.light .fisc-tfoot td,
html.light .ocu-tfoot td,
html.light .dig-mov-table .dash-table tfoot td {
    background: #d8e2f0 !important;
    color: var(--text-primary) !important;
    border-top: 2px solid rgba(8,145,178,0.45) !important;
}
html.light .fat-tfoot td:first-child,
html.light .tk-tfoot td:first-child,
html.light .dig-tfoot td:first-child,
html.light .fisc-tfoot td:first-child,
html.light .ocu-tfoot td:first-child {
    color: #0891b2 !important;
    border-left: 3px solid #0891b2 !important;
}

/* Botão multi-select trigger no tema claro */
html.light .ms-th-trigger {
    background: rgba(0,0,0,.04) !important;
    border-color: rgba(0,0,0,.12) !important;
    color: var(--text-secondary) !important;
}
html.light .ms-th-trigger:hover,
html.light .ms-th-trigger-open {
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
}
html.light .ms-panel {
    background: #ffffff !important;
    border-color: rgba(0,0,0,.12) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
}
html.light .ms-option { color: var(--text-primary) !important; }
html.light .ms-option:hover { background: rgba(8,145,178,.08) !important; }
html.light .ms-all-opt { color: var(--text-secondary) !important; border-bottom-color: var(--border-color) !important; }

/* Painéis de seção do Mosaico, headers de seção */
html.light .mos-section-header,
html.light .mos-section,
html.light .mos-sect-body {
    background: var(--bg-panel) !important;
}
html.light .mos-card {
    background: var(--bg-panel) !important;
    border-color: var(--border-color) !important;
}
html.light .mos-card-img-wrap { background: #e2eaf5 !important; }
html.light .mos-card-no-img { color: var(--text-muted) !important; }
html.light .mos-grid,
html.light .mos-grid-wrap { background: transparent !important; }
html.light .mos-card-body { color: var(--text-primary) !important; }
html.light .mos-search-wrap input,
html.light .mos-search {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Tabs / chips de seleção em vários módulos */
html.light .mos-tabbar,
html.light .dig-tabbar {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}
html.light .mos-tab,
html.light .dig-tab {
    color: var(--text-secondary) !important;
}
html.light .mos-tab:hover,
html.light .dig-tab:hover { background: rgba(8,145,178,.06) !important; }
html.light .mos-tab-active,
html.light .dig-tab-active {
    background: rgba(8,145,178,.12) !important;
    color: var(--accent-cyan) !important;
}

/* Toolbar de gráfico/tabela (Digipare, Faturamento, Mosaico) */
html.light .dig-mov-toolbar {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
html.light .dig-toggle-btn {
    background: var(--bg-panel) !important;
    color: var(--accent-cyan) !important;
    border-color: rgba(8,145,178,.40) !important;
}
html.light .dig-toggle-btn:hover { background: rgba(8,145,178,.08) !important; }

/* Painel de personalização de gráfico (séries) */
html.light .dig-personalizar-panel {
    background: var(--bg-panel) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18) !important;
}
html.light .dig-personalizar-header { color: var(--text-primary) !important; border-bottom-color: var(--border-color) !important; }
html.light .dig-serie-label { color: var(--text-primary) !important; }
html.light .dig-serie-row:hover { background: rgba(0,0,0,0.04) !important; }

/* Linhas de dados nas tabelas com células coloridas — ajusta no claro */
html.light .dig-mov-periodo { color: var(--text-primary) !important; }
html.light .dig-mov-diasem-col,
html.light .dig-mov-diasem { color: var(--text-secondary) !important; }

/* =========================================================================
   FULLSCREEN para gráficos — botão flutuante no canto + painel expandido
   O page-header (título do módulo) permanece visível acima do painel.
   ========================================================================= */
/* Quando o painel tem botão fullscreen inline ao lado de botões existentes, agrupa-os à direita */
.panel-title.panel-title-row > .btn-toggle-grid {
    margin-left: auto;
}
.panel-title.panel-title-row > .btn-toggle-grid + .chart-fs-btn-inline {
    margin-left: 6px;
}

/* ── Fullscreen: split-view gráfico + tabela ──
   Em tela cheia, oculta o botão de toggle e exibe AMBAS as secções:
   gráfico preenchendo o espaço disponível, tabela ancorada na parte inferior. */
.chart-panel-fullscreen .btn-toggle-grid {
    display: none !important;
}
/* Em tela cheia, oculta o nome do card no header ao lado do logo */
.chart-fs-header-titulo {
    display: none !important;
}
/* Secção do gráfico cresce para preencher o espaço */
.chart-panel-fullscreen .home-chart-section {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
/* Chart wraps internos da Home têm altura fixa em modo normal (210/220/240px) — em fullscreen precisam crescer */
.chart-panel-fullscreen .faturamento-pagto-chart-wrap,
.chart-panel-fullscreen .ticket-medio-chart-wrap,
.chart-panel-fullscreen .meio-arrecadacao-chart-wrap,
.chart-panel-fullscreen .resumo-fat-chart-wrap {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
}
.chart-panel-fullscreen .faturamento-pagto-chart-wrap > canvas,
.chart-panel-fullscreen .ticket-medio-chart-wrap > canvas,
.chart-panel-fullscreen .meio-arrecadacao-chart-wrap > canvas,
.chart-panel-fullscreen .resumo-fat-chart-wrap > canvas {
    width: 100% !important; height: 100% !important;
}
/* Layout donut + legenda em fullscreen — cresce e centraliza */
.chart-panel-fullscreen .pagto-donut-layout {
    flex: 1 1 auto !important; min-height: 0 !important;
    padding: 12px 16px !important; gap: 24px !important;
}
.chart-panel-fullscreen .pagto-donut-wrap {
    flex: 0 0 50% !important; align-self: stretch !important;
}
/* Se estava oculta (hcs-hidden), mostra mesmo assim */
.chart-panel-fullscreen .home-chart-section.hcs-hidden {
    height: auto !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
}
/* Secção da tabela ancorada na base, altura máxima 38% */
.chart-panel-fullscreen .home-table-section {
    display: block !important;
    flex-shrink: 0 !important;
    max-height: 38% !important;
    overflow-y: auto !important;
    border-top: 1px solid rgba(56, 189, 248, 0.18) !important;
}

/* ── Fullscreen Faturamento: gráfico topo (~55%) + tabs/tabela base (~45%) ──
   Sobrescreve a regra genérica que dá flex:1 ao fat-chart-section. */
.chart-panel-fullscreen.fat-card {
    display: flex !important;
    flex-direction: column !important;
}
.chart-panel-fullscreen.fat-card .fat-chart-section {
    flex: 0 0 55% !important;
    max-height: 55% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.chart-panel-fullscreen.fat-card .fat-chart-bar {
    flex-shrink: 0 !important;
}
/* O div inline height:300px dentro do fat-chart-section cresce para preencher */
.chart-panel-fullscreen.fat-card .fat-chart-section > div[style*="height:300px"],
.chart-panel-fullscreen.fat-card .fat-chart-section > div[style*="height: 300px"] {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
}
/* Canvas preenche o div pai via position absolute */
.chart-panel-fullscreen.fat-card .fat-chart-section canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.chart-panel-fullscreen.fat-card .fat-divider {
    flex-shrink: 0 !important;
}
.chart-panel-fullscreen.fat-card .fat-tabs {
    flex-shrink: 0 !important;
}
/* Corpo das tabs cresce para preencher o restante */
.chart-panel-fullscreen.fat-card .fat-tab-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.chart-panel-fullscreen.fat-card .fat-tab-body .table-responsive {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Digipare — empurra botões à direita nas toolbars */
.dig-panel-bar > .dig-toggle-btn,
.dig-panel-bar > .dig-personalizar-btn {
    margin-left: auto;
}
.dig-panel-bar > .dig-toggle-btn ~ .chart-fs-btn-inline,
.dig-panel-bar > .dig-personalizar-btn ~ .chart-fs-btn-inline,
.dig-panel-bar > .dig-toggle-btn + .dig-personalizar-btn { margin-left: 6px; }

.dig-tab-header > .dig-personalizar-btn { margin-left: auto; }
.dig-tab-header > .chart-fs-btn-inline { margin-left: 6px; }
.dig-tab-header > .dig-personalizar-btn + .chart-fs-btn-inline { margin-left: 6px; }
/* Quando NÃO há Personalizar (tabs sem botões), empurra fullscreen para direita */
.dig-tab-header:not(:has(.dig-personalizar-btn)) > .chart-fs-btn-inline { margin-left: auto; }

.dig-mov-toolbar > .chart-fs-btn-inline { margin-left: 6px; }

/* Botão fullscreen INLINE (dentro de toolbars existentes — ao lado de outros botões) */
.chart-fs-btn-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    margin-left: 6px;
    padding: 0;
    background: rgba(56,189,248,0.12);
    color: #38bdf8;
    border: 1px solid rgba(56,189,248,0.32);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
}
.chart-fs-btn-inline:hover {
    background: rgba(56,189,248,0.25);
    border-color: rgba(56,189,248,0.55);
    transform: scale(1.05);
}
html.light .chart-fs-btn-inline {
    background: rgba(8,145,178,0.10);
    color: #0891b2;
    border-color: rgba(8,145,178,0.30);
}
html.light .chart-fs-btn-inline:hover { background: rgba(8,145,178,0.18); }

/* Botão fullscreen FLUTUANTE (fallback quando não há toolbar) */
.chart-fs-btn {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 15;
    width: 28px; height: 28px;
    background: rgba(56,189,248,0.12);
    color: #38bdf8;
    border: 1px solid rgba(56,189,248,0.32);
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
    opacity: 0.55;
}
.chart-fs-btn:hover {
    background: rgba(56,189,248,0.25);
    border-color: rgba(56,189,248,0.55);
    opacity: 1;
    transform: scale(1.08);
}

/* ── Card-cabeçalho do fullscreen: logo + módulo + título do gráfico (decorativo) ── */
.chart-fs-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
.chart-fs-header-left {
    display: flex; align-items: center; gap: 12px; min-width: 0;
}
.chart-fs-header-logo {
    height: 32px; width: auto;
    flex-shrink: 0;
}
.chart-fs-header-text {
    display: flex; flex-direction: column; min-width: 0;
}
.chart-fs-header-modulo {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.1;
}
.chart-fs-header-titulo {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: .04em;
    line-height: 1.25;
    margin-top: 2px;
}
.chart-fs-header-close {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: rgba(56,189,248,0.10);
    color: #38bdf8;
    border: 1px solid rgba(56,189,248,0.30);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .15s;
}
.chart-fs-header-close:hover {
    background: rgba(56,189,248,0.22);
    transform: scale(1.06);
}

/* Container das ações do lado direito do header — gap entre botões clonados + fechar */
.chart-fs-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Toolbar original do painel escondida em fullscreen (substituída pelo card-header) */
.chart-fs-hidden { display: none !important; }

/* Botões clonados no card-header — herdam estilo mas com leve ajuste */
.chart-fs-header .chart-fs-cloned {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}
html.light .chart-fs-header { background: var(--bg-secondary); }
html.light .chart-fs-header-titulo { color: #0e7490; }
html.light .chart-fs-header-close { background: rgba(8,145,178,0.10); color: #0891b2; border-color: rgba(8,145,178,0.30); }
html.light .chart-fs-header-close:hover { background: rgba(8,145,178,0.18); }
/* Em fullscreen real do navegador, o cabeçalho perde border-radius */
.chart-panel-fullscreen:fullscreen > .chart-fs-header,
.chart-panel-fullscreen:-webkit-full-screen > .chart-fs-header {
    border-radius: 0 !important;
}
html.light .chart-fs-btn {
    background: rgba(8,145,178,0.10);
    color: #0891b2;
    border-color: rgba(8,145,178,0.32);
}
html.light .chart-fs-btn:hover { background: rgba(8,145,178,0.18); }

/* Painel em modo tela cheia — fallback (sem Fullscreen API do navegador) */
.chart-panel-fullscreen {
    position: fixed !important;
    top: var(--fs-top, 72px) !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    z-index: 9990 !important;
    margin: 0 !important;
    max-height: none !important;
    height: auto !important;
    background: var(--bg-panel) !important;
    box-shadow: 0 18px 56px rgba(0,0,0,0.55) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(56,189,248,0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    animation: chart-fs-in 0.22s ease-out;
}
/* Quando em fullscreen REAL do navegador (barra de endereço escondida),
   o painel ocupa 100% do viewport — remove margens/border-radius/sombras */
.chart-panel-fullscreen:fullscreen,
.chart-panel-fullscreen:-webkit-full-screen,
.chart-panel-fullscreen:-ms-fullscreen {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.chart-panel-fullscreen:fullscreen > .chart-fs-title,
.chart-panel-fullscreen:-webkit-full-screen > .chart-fs-title {
    border-radius: 0 !important;
}
html.light .chart-panel-fullscreen {
    box-shadow: 0 18px 56px rgba(0,0,0,0.22) !important;
    border-color: rgba(8,145,178,0.30) !important;
}
@keyframes chart-fs-in {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}
.chart-panel-fullscreen .panel-title,
.chart-panel-fullscreen .panel-title-row,
.chart-panel-fullscreen .fat-chart-bar { flex-shrink: 0; }

/* Wraps internos crescem para preencher TODO o espaço restante */
.chart-panel-fullscreen .ticket-medio-chart-wrap,
.chart-panel-fullscreen .faturamento-pagto-chart-wrap,
.chart-panel-fullscreen .meio-arrecadacao-chart-wrap,
.chart-panel-fullscreen .dig-usu12-chart-wrap,
.chart-panel-fullscreen .dig-usu-chart-wrap,
.chart-panel-fullscreen .dig-forma-chart-wrap,
.chart-panel-fullscreen .fat-chart-section,
.chart-panel-fullscreen .tk-frac-chart-wrap,
.chart-panel-fullscreen .home-chart-wrap,
.chart-panel-fullscreen .tk-canvas-wrap,
.chart-panel-fullscreen .ocu-chart-wrap {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    width: 100% !important;
}

/* Digipare: o .dash-panel.dig-panel-usu12 contém tab-header + (mov-toolbar) + chart-wrap.
   O dash-panel precisa ser flex coluna para o chart-wrap crescer. */
.chart-panel-fullscreen.dash-panel {
    display: flex !important;
    flex-direction: column !important;
}
.chart-panel-fullscreen .dig-tab-header,
.chart-panel-fullscreen .dig-mov-toolbar,
.chart-panel-fullscreen .dig-panel-bar {
    flex-shrink: 0 !important;
}
/* Container do canvas dentro do .fat-chart-section que tem altura 300px hard-coded inline */
.chart-panel-fullscreen.fat-chart-section > div[style*="height:300px"],
.chart-panel-fullscreen.fat-chart-section > div[style*="height: 300px"] {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
}
/* Wraps de chart com height inline em outras seções */
.chart-panel-fullscreen .fisc-chart-section > div[style*="height"] {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
}
/* Canvas absoluto dentro do wrap — preenche 100% via position absolute */
.chart-panel-fullscreen .ticket-medio-chart-wrap > canvas,
.chart-panel-fullscreen .faturamento-pagto-chart-wrap > canvas,
.chart-panel-fullscreen .meio-arrecadacao-chart-wrap > canvas,
.chart-panel-fullscreen .dig-usu12-chart-wrap > canvas,
.chart-panel-fullscreen .dig-usu-chart-wrap > canvas,
.chart-panel-fullscreen .dig-forma-chart-wrap > canvas,
.chart-panel-fullscreen .home-chart-wrap > canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
/* Para canvas diretamente filho do painel (sem wrap) */
.chart-panel-fullscreen > canvas {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
}

/* Backdrop escuro atrás do painel fullscreen (apenas no fallback CSS — em fullscreen real
   do navegador o backdrop é desnecessário pois o browser oculta o resto da tela).
   NÃO usar overflow:hidden no body: a remoção/retorno da scrollbar muda a largura do
   viewport e dispara ResizeObserver em todos os charts, redimensionando-os erroneamente. */
body.has-fs-chart::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9985;
    pointer-events: none;
}
html.light body.has-fs-chart::before { background: rgba(0,0,0,0.30); }

/* Page-header sempre visível acima do backdrop e do painel */
body.has-fs-chart .page-header {
    position: relative;
    z-index: 9995 !important;
    background: var(--bg-panel) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.30);
}

/* =========================================================================
   Painel "Personalizar Gráfico" — PADRONIZAÇÃO entre todos os módulos
   Faz com que customize-panel (Tickets/Faturamento/Fiscalização) tenha
   a mesma aparência do dig-personalizar-panel (Digipare).
   ========================================================================= */

/* Container (dimensões e visual iguais ao Digipare) */
.customize-panel,
.fat-cust-panel {
    width: 210px !important;
    background: #0f1e2e !important;
    border: 1px solid rgba(56,189,248,0.2) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5) !important;
}
/* Header — fonte 700, mesma cor do Digipare */
.cust-header {
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(56,189,248,0.12) !important;
}
.cust-close { color: #64748b !important; }
.cust-close:hover { color: #94a3b8 !important; }
/* Label da aba "Canais/Séries" — estilo da aba ativa do Digipare */
.cust-tab-lbl {
    padding: 6px 4px !important;
    margin: 0 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #38bdf8 !important;
    border-bottom: 2px solid #38bdf8 !important;
}
/* Item de série — mesma fonte/peso do dig-serie-label */
.cust-series-item {
    color: #cbd5e1 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}
.cust-series-item:hover { background: rgba(255,255,255,0.04) !important; }
.cust-series-item input[type=checkbox] { accent-color: #38bdf8 !important; }

/* ── TEMA CLARO — aplica a mesma paleta clara que o Digipare ── */
html.light .customize-panel,
html.light .fat-cust-panel,
html.light .dig-personalizar-panel {
    background: var(--bg-panel) !important;
    border-color: rgba(8,145,178,0.25) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.15) !important;
}
html.light .cust-header,
html.light .dig-personalizar-header {
    color: var(--text-primary) !important;
    border-bottom-color: rgba(8,145,178,0.18) !important;
}
html.light .cust-close,
html.light .dig-personalizar-close { color: var(--text-secondary) !important; }
html.light .cust-close:hover,
html.light .dig-personalizar-close:hover { color: var(--text-primary) !important; }
html.light .cust-tab-lbl,
html.light .dig-personalizar-tab.active {
    color: var(--accent-cyan) !important;
    border-bottom-color: var(--accent-cyan) !important;
}
html.light .dig-personalizar-tab { color: var(--text-secondary) !important; }
html.light .cust-series-item,
html.light .dig-serie-label,
html.light .dig-serie-row { color: var(--text-primary) !important; }
html.light .cust-series-item:hover,
html.light .dig-serie-row:hover { background: rgba(8,145,178,.08) !important; }

/* ── Digipare movimentação: modo normal — toggle chart/table ── */
.dig-mov-toolbar.dmt-hidden  { display: none !important; }
.dig-chart-section.dcs-hidden { height: 0 !important; overflow: hidden !important; flex: 0 0 0 !important; min-height: 0 !important; }
.dig-table-section.dts-hidden { display: none !important; }

/* ── Digipare Forma/Meio: classes de visibilidade (substituem @if/@if) ── */
.dig-fv-hidden { height: 0 !important; overflow: hidden !important; flex: 0 0 0 !important; min-height: 0 !important; padding: 0 !important; }
.dig-ft-hidden { display: none !important; }

/* Fullscreen split-view para dig-panel-forma e dig-panel-meio */
.chart-panel-fullscreen.dig-panel-forma,
.chart-panel-fullscreen.dig-panel-meio {
    display: flex !important;
    flex-direction: column !important;
}
/* Barra de título: nunca encolhe */
.chart-panel-fullscreen.dig-panel-forma .dig-panel-bar,
.chart-panel-fullscreen.dig-panel-meio .dig-panel-bar {
    flex-shrink: 0 !important;
}
/* Gráfico (visível OU oculto): cresce para preencher espaço disponível */
.chart-panel-fullscreen.dig-panel-forma .dig-forma-chart-wrap,
.chart-panel-fullscreen.dig-panel-meio .dig-forma-chart-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    position: relative !important;
}
/* Gráfico antes oculto: adiciona padding e garante visibilidade */
.chart-panel-fullscreen.dig-panel-forma .dig-fv-hidden,
.chart-panel-fullscreen.dig-panel-meio .dig-fv-hidden {
    height: auto !important;
    overflow: hidden !important;
    padding: 6px 10px 8px !important;
}
/* Tabela: altura automática baseada no conteúdo, max 38%, ancorada na base */
.chart-panel-fullscreen.dig-panel-forma .dig-forma-table,
.chart-panel-fullscreen.dig-panel-meio .dig-forma-table {
    flex: 0 0 auto !important;
    max-height: 38% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}
/* Tabela antes oculta: torna visível mantendo o estilo acima */
.chart-panel-fullscreen.dig-panel-forma .dig-ft-hidden,
.chart-panel-fullscreen.dig-panel-meio .dig-ft-hidden {
    display: flex !important;
    flex-direction: column !important;
}

/* ── Digipare dig-panel-usu12 em fullscreen: split-view ── */
.chart-panel-fullscreen.dig-panel-usu12 {
    display: flex !important;
    flex-direction: column !important;
}
/* Tab header e toolbar: não crescem */
.chart-panel-fullscreen.dig-panel-usu12 .dig-tab-header,
.chart-panel-fullscreen.dig-panel-usu12 .dig-mov-toolbar {
    flex-shrink: 0 !important;
}
/* Toolbar sempre visível em fullscreen mesmo que estivesse oculta (modo tabela) */
.chart-panel-fullscreen.dig-panel-usu12 .dig-mov-toolbar.dmt-hidden {
    display: flex !important;
}
/* Botão "Ver tabela" oculto em fullscreen */
.chart-panel-fullscreen .dig-toggle-btn {
    display: none !important;
}
/* Seção do gráfico: ocupa ~55% */
.chart-panel-fullscreen.dig-panel-usu12 .dig-chart-section {
    flex: 0 0 55% !important;
    max-height: 55% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
/* Se estava oculta (dcs-hidden), mostra em fullscreen */
.chart-panel-fullscreen.dig-panel-usu12 .dig-chart-section.dcs-hidden {
    height: auto !important;
    overflow: hidden !important;
    flex: 0 0 55% !important;
}
/* O chart-wrap dentro da seção cresce */
.chart-panel-fullscreen.dig-panel-usu12 .dig-chart-section .dig-usu12-chart-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    position: relative !important;
    height: auto !important;
}
/* Seção da tabela: ocupa o restante (~45%) */
.chart-panel-fullscreen.dig-panel-usu12 .dig-table-section {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    border-top: 1px solid rgba(56, 189, 248, 0.18) !important;
    overflow: hidden !important;
}
/* dig-mov-table dentro da seção com scroll */
.chart-panel-fullscreen.dig-panel-usu12 .dig-table-section .dig-mov-table {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}