/* ==============================================================================
   ESTILOS PERSONALIZADOS & DESIGN SYSTEM - PAULIBRAS B.I.
   SUPORTE DE ALTO CONTRASTE PARA TEMA ESCURO E CLARO
   ============================================================================== */

/* Prevenção Rigorosa de Vazamento de Conteúdo (Content Overflow) */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Responsividade de Mídias e Gráficos */
img, svg, video {
    max-width: 100%;
    height: auto;
}

canvas {
    max-width: 100% !important;
}

/* Scroll Horizontal Seguro e Otimizado para Tabelas */
.overflow-x-auto {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Prevenção de quebra em tabelas e badges */
table {
    max-width: 100%;
}

/* Variáveis de Marca Oficial Paulibras */
:root {
    --paulibras-navy: #1D2649;
    --paulibras-red: #CD1619;
    --paulibras-red-hover: #B51316;
    --paulibras-gray: #6E747B;
    --font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
    --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;
    --font-numeric: 'Roboto', monospace;
}

/* Variáveis de Tema (Dark Padrão & Light) */
:root,
[data-theme="dark"],
.dark,
.dark-theme {
    --bg-main: #020617;
    --bg-card: #0f172a;
    --bg-card-hover: #1e293b;
    --border-color: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --header-bg: #0f172a;
    --accent-color: #CD1619;
}

[data-theme="light"],
.light,
.light-theme {
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --border-color: #cbd5e1;
    --text-primary: #1D2649;
    --text-secondary: #4A4A4A;
    --text-muted: #6E747B;
    --header-bg: #ffffff;
    --accent-color: #CD1619;
}

/* ==============================================================================
   REGRAS DE TEMA ESCURO
   ============================================================================== */

html.dark body,
html.dark-theme body,
html[data-theme="dark"] body,
body.dark,
body.dark-theme,
body[data-theme="dark"] {
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
}

/* ==============================================================================
   REGRAS DE TEMA CLARO (ALTO CONTRASTE E LEGIBILIDADE)
   ============================================================================== */

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

/* Header & Navbar */
html[data-theme="light"] header,
html.light header,
html.light-theme header {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04) !important;
}

/* Cards & Painéis */
html[data-theme="light"] .bg-slate-900,
html.light .bg-slate-900,
html.light-theme .bg-slate-900 {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .bg-slate-950,
html.light .bg-slate-950,
html.light-theme .bg-slate-950 {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] .bg-slate-800,
html.light .bg-slate-800,
html.light-theme .bg-slate-800 {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

/* Textos gerais no Tema Claro */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-slate-100,
html.light h1,
html.light h2,
html.light h3,
html.light .text-slate-200,
html.light .text-slate-100,
html.light-theme h1,
html.light-theme h2,
html.light-theme h3,
html.light-theme .text-slate-200,
html.light-theme .text-slate-100 {
    color: #0f172a !important;
}

html[data-theme="light"] .text-slate-300,
html.light .text-slate-300,
html.light-theme .text-slate-300 {
    color: #1e293b !important;
}

html[data-theme="light"] .text-slate-400,
html.light .text-slate-400,
html.light-theme .text-slate-400 {
    color: #475569 !important;
}

html[data-theme="light"] .text-slate-500,
html.light .text-slate-500,
html.light-theme .text-slate-500 {
    color: #64748b !important;
}

/* Títulos que usam text-white viram escuros no tema claro */
html[data-theme="light"] h1.text-white,
html[data-theme="light"] h2.text-white,
html[data-theme="light"] h3.text-white,
html[data-theme="light"] div.text-white:not(.btn-text-white),
html[data-theme="light"] span.text-white:not(.btn-text-white),
html[data-theme="light"] p.text-white,
html.light h1.text-white,
html.light h2.text-white,
html.light h3.text-white,
html.light div.text-white:not(.btn-text-white),
html.light span.text-white:not(.btn-text-white),
html.light p.text-white,
html.light-theme h1.text-white,
html.light-theme h2.text-white,
html.light-theme h3.text-white,
html.light-theme div.text-white:not(.btn-text-white),
html.light-theme span.text-white:not(.btn-text-white),
html.light-theme p.text-white {
    color: #0f172a !important;
}

/* PRESERVAÇÃO DE CONTRASTE EM BOTÕES COLORIDOS (TEXTO BRANCO OBRIGATÓRIO) */
html[data-theme="light"] button.bg-indigo-600,
html[data-theme="light"] button.bg-indigo-500,
html[data-theme="light"] a.bg-indigo-600,
html[data-theme="light"] button.bg-emerald-600,
html[data-theme="light"] button.bg-amber-600,
html[data-theme="light"] button.bg-rose-600,
html[data-theme="light"] button.bg-blue-600,
html[data-theme="light"] .bg-indigo-600 *,
html[data-theme="light"] .bg-emerald-600 *,
html[data-theme="light"] .bg-amber-600 *,
html[data-theme="light"] .bg-rose-600 *,
html.light button.bg-indigo-600,
html.light button.bg-indigo-500,
html.light a.bg-indigo-600,
html.light button.bg-emerald-600,
html.light button.bg-amber-600,
html.light button.bg-rose-600,
html.light button.bg-blue-600,
html.light .bg-indigo-600 *,
html.light .bg-emerald-600 *,
html.light .bg-amber-600 *,
html.light .bg-rose-600 *,
html.light-theme button.bg-indigo-600,
html.light-theme button.bg-indigo-500,
html.light-theme a.bg-indigo-600,
html.light-theme button.bg-emerald-600,
html.light-theme button.bg-amber-600,
html.light-theme button.bg-rose-600,
html.light-theme button.bg-blue-600,
html.light-theme .bg-indigo-600 *,
html.light-theme .bg-emerald-600 *,
html.light-theme .bg-amber-600 *,
html.light-theme .bg-rose-600 * {
    color: #ffffff !important;
}

/* Tabelas e Cabeçalhos no Tema Claro */
html[data-theme="light"] table thead.bg-slate-950,
html[data-theme="light"] table thead tr th,
html.light table thead.bg-slate-950,
html.light table thead tr th,
html.light-theme table thead.bg-slate-950,
html.light-theme table thead tr th {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] table tbody tr:hover,
html.light table tbody tr:hover,
html.light-theme table tbody tr:hover {
    background-color: #f8fafc !important;
}

html[data-theme="light"] table tbody td,
html.light table tbody td,
html.light-theme table tbody td {
    border-color: #e2e8f0 !important;
}

/* Formulários, Inputs e Selects */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html.light input,
html.light select,
html.light textarea,
html.light-theme input,
html.light-theme select,
html.light-theme textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html.light input:focus,
html.light select:focus,
html.light-theme input:focus,
html.light-theme select:focus {
    border-color: #4f46e5 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

/* Scrollbars modernas e discretas */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb,
html.light ::-webkit-scrollbar-thumb,
html.light-theme ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
html.light ::-webkit-scrollbar-thumb:hover,
html.light-theme ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Transições suaves globais */
.transition-theme {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ==============================================================================
   BARRA SELETORA DE TEMPO & BOTÕES DE PERÍODO (UX/UI SUAVE - ALTO CONTRASTE)
   ============================================================================== */
.btn-periodo,
.filtro-tempo-btn,
.time-filter-btn {
    transition: all 0.3s ease-in-out !important;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
}

.btn-periodo:hover,
.filtro-tempo-btn:hover,
.time-filter-btn:hover {
    transition: all 0.3s ease-in-out !important;
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: #334155 !important;
    transform: translateY(-1px);
}

.btn-periodo.active,
.filtro-tempo-btn.active,
.time-filter-btn.active {
    transition: all 0.3s ease-in-out !important;
    background-color: rgba(205, 22, 25, 0.22) !important;
    color: #ffffff !important;
    border-color: rgba(205, 22, 25, 0.65) !important;
    box-shadow: 0 0 12px rgba(205, 22, 25, 0.30) !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .btn-periodo:hover,
html[data-theme="light"] .filtro-tempo-btn:hover,
html[data-theme="light"] .time-filter-btn:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .btn-periodo.active,
html[data-theme="light"] .filtro-tempo-btn.active,
html[data-theme="light"] .time-filter-btn.active {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #CD1619 !important;
    box-shadow: 0 0 10px rgba(205, 22, 25, 0.2) !important;
    font-weight: 700 !important;
}

/* ==============================================================================
   MENU SUSPENSO ADMIN: PONTE INVISÍVEL E TRAVAMENTO POR CLIQUE
   ============================================================================== */
#adminDropdownContainer:hover #adminDropdownMenu,
#adminDropdownContainer.is-open #adminDropdownMenu {
    display: block !important;
}

#adminDropdownContainer:hover #iconAdminChevron,
#adminDropdownContainer.is-open #iconAdminChevron {
    transform: rotate(180deg) !important;
}



/* ==============================================================================
   BLINDAGEM RESPONSIVA NOTEBOOK & TELAS COMPACTAS (1024px - 1440px)
   ============================================================================== */
@media (max-width: 1535px) {
    header nav {
        display: none !important;
    }
    #btnOpenMobileDrawer {
        display: flex !important;
    }
    #headerConnectionBadge {
        display: none !important;
    }
    #badgeVelocidadeSistema {
        display: none !important;
    }
}

/* Protecao estrita de overflow horizontal para notebooks */
main, section, article, .grid {
    max-width: 100vw;
    box-sizing: border-box;
}

table {
    word-break: normal;
}


/* ==============================================================================
   RESPONSIVIDADE ORNADA & FLUIDA TOTAL (ZOOM, NOTEBOOKS E TELAS ULTRAWIDE)
   ============================================================================== */
:root {
    --nav-height: 4rem;
}

/* Header fluido que nunca estoura a tela nem esconde botoes de acao */
header {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
}

header .header-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Em zoom alto ou telas < 1536px, o nav desktop encolhe suavemente */
@media (max-width: 1535px) {
    header nav {
        display: none !important;
    }
    #btnOpenMobileDrawer {
        display: inline-flex !important;
    }
    .badge-telemetria {
        display: none !important;
    }
}

/* Garantia de que tabelas e paineis se adaptem sem quebrar o viewport */
.table-responsive-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ajuste dinamico de grids com zoom */
@media (max-width: 1024px) {
    .grid-kpi-responsivo {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    .grid-kpi-responsivo {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}