@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* =====================================================================
   TEMA UNIFICADO — Sistema de Produção  ·  "Centro de Operações" (dark)
   Mesma linguagem visual do Portal de Sistemas (index):
   carvão quente + verde-petróleo, tipografia Fraunces/Hanken/JetBrains
   Mono, glows discretos, grade técnica e grão sutil.
   Carregado por último em cada página: redefine os tokens e sobrescreve
   as cores cravadas das telas de lançamento.
   ===================================================================== */

:root {
    /* tokens compartilhados pelas páginas (redefinidos para o dark) */
    --bg-body:      #121316;
    --bg-panel:     #1c1e23;
    --text-main:    #ecedea;
    --text-muted:   #9fa29b;
    --accent-green: #45cbb4;
    --accent-green-soft: rgba(69,203,180,.14);
    --accent-red:   #f0795f;
    --border-light: rgba(255,255,255,.08);

    /* tokens próprios do tema */
    --surface:    #1c1e23;
    --surface-2:  #212429;
    --surface-3:  #262a30;
    --ink:        #ecedea;
    --muted:      #9fa29b;
    --faint:      #6d6f69;
    --line:       rgba(255,255,255,.08);
    --line-soft:  rgba(255,255,255,.05);
    --accent:     #45cbb4;
    --accent-2:   #2fb7a0;
    --accent-deep:#157d6e;
    --accent-soft:rgba(69,203,180,.12);
    --accent-line:rgba(69,203,180,.24);
    --accent-glow:rgba(69,203,180,.30);
    --online:     #4fc983;
    --danger:     #f0795f;
    --danger-soft:rgba(240,121,95,.12);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 6px 18px rgba(0,0,0,.28);
    --shadow-lg: 0 18px 44px rgba(0,0,0,.40);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;
}

/* ---- Base ---- */
body {
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--bg-body) !important;
    background-image:
        radial-gradient(820px 460px at 6% -6%, rgba(69,203,180,.10), transparent 60%),
        radial-gradient(680px 420px at 100% 0%, rgba(224,146,90,.06), transparent 55%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    color: var(--text-main) !important;
    position: relative;
}

/* grade técnica + grão (camadas fixas, não interferem no layout) */
body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.020) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.020) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 80%);
    mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 80%);
}
body::after {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    opacity: .045; mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* garante que o conteúdo real fique acima das camadas decorativas */
body > *:not(script):not(style) { position: relative; z-index: 1; }

::selection { background: var(--accent-soft); color: #fff; }

/* ---- Scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.16);
    border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); background-clip: padding-box; }

/* ---- Foco acessível ---- */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---- Cabeçalho de página (alinhado ao header do dashboard) ---- */
.page-header { position: relative; padding-bottom: 22px; margin-bottom: 28px !important; border-bottom: 1px solid var(--line); }
.page-header h1 {
    font-family: 'Fraunces', serif !important;
    font-weight: 600 !important;
    font-size: 1.95rem !important;
    letter-spacing: -0.015em !important;
    color: var(--ink) !important;
    line-height: 1.1 !important;
}
/* eyebrow "Centro de Operações", igual ao dashboard */
.page-header h1::before {
    content: "Centro de Operações";
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}
.page-header p { color: var(--muted) !important; margin-top: 4px !important; }

/* ---- Painéis / barras ---- */
.filter-bar,
.tabela-container,
.painel,
.card {
    background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--line) !important;
}

.filter-group label { color: var(--muted) !important; letter-spacing: .06em; }

/* ---- Selects dos filtros ---- */
.filter-group select,
select {
    background: var(--surface-3) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.filter-group select:hover, select:hover { border-color: rgba(255,255,255,.2) !important; background: #2b2f36 !important; }
.filter-group select:focus, select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px var(--accent-soft) !important;
    background: var(--surface-3) !important;
}
select option { background: #1c1e23; color: var(--ink); }

/* ---- Tabela tipo planilha ---- */
.tabela-excel th,
.tabela-excel td {
    border-bottom: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
}
.tabela-excel thead th {
    background-color: #11302b !important;   /* cabeçalho em verde-petróleo escuro */
    color: #eafaf6 !important;
    letter-spacing: .04em;
}
.tabela-excel thead th:first-child { background-color: #11302b !important; }

.tabela-excel td:first-child,
.peca-nome {
    background-color: var(--surface-2) !important;
    color: var(--ink) !important;
    border-right: 1px solid var(--line) !important;
}

/* totais */
.coluna-total {
    background-color: var(--surface-3) !important;
    color: var(--ink) !important;
    border-left: 1px solid var(--line) !important;
}
.linha-rodape th {
    background-color: var(--surface-3) !important;
    color: var(--ink) !important;
    border-top: 1px solid var(--accent-line) !important;
    box-shadow: 0 -4px 10px rgba(0,0,0,.25) !important;
}
.super-total {
    background-color: #11302b !important;
    color: #eafaf6 !important;
    border-left: 1px solid var(--accent-line) !important;
}

/* fim de semana */
.fim-de-semana { background-color: rgba(255,255,255,.025) !important; }
th.fim-de-semana { background-color: #0d241f !important; color: #8fb9b0 !important; }

/* ---- Inputs ---- */
input[type="number"],
input[type="text"]:not(.login-input),
textarea {
    color: var(--ink);
    background: transparent;
}
input[type="number"] { color: var(--ink) !important; }
input[type="number"]:focus {
    background-color: rgba(69,203,180,.08) !important;
    box-shadow: inset 0 0 0 2px var(--accent) !important;
    color: var(--accent) !important;
}
input.input-retrabalho {
    background-color: var(--danger-soft) !important;
    color: var(--danger) !important;
    border-top: 1px dashed var(--line) !important;
}
input.input-retrabalho:focus { box-shadow: inset 0 0 0 2px var(--danger) !important; background-color: rgba(240,121,95,.16) !important; }
input.input-retrabalho::placeholder { color: rgba(240,121,95,.55) !important; }

/* marcação de comentário */
.icone-comentario::after { border-top-color: rgba(255,255,255,.28) !important; }
.icone-comentario:hover::after { border-top-color: var(--accent) !important; }
.tem-comentario .icone-comentario::after { border-top-color: #e0925a !important; }

/* ---- Modal ---- */
.modal-content {
    background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--ink) !important;
}
.modal-content h3 { font-family: 'Fraunces', serif !important; color: var(--ink) !important; }
.modal-content p { color: var(--muted) !important; border-bottom: 1px solid var(--line) !important; }
.modal-content textarea {
    background: var(--surface-3) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
}
.modal-content textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }

/* ---- Botões ---- */
.btn-salvar, .btn-filter, .btn-com, .btn-metricas {
    background: linear-gradient(150deg, var(--accent), var(--accent-2)) !important;
    color: #0c1714 !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px -6px var(--accent-glow) !important;
}
.btn-salvar:hover, .btn-filter:hover, .btn-com:hover, .btn-metricas:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}
.btn-cancelar, .btn-exit {
    background: var(--surface-3) !important;
    color: var(--muted) !important;
    border: 1px solid var(--line) !important;
    font-weight: 600 !important;
}
.btn-cancelar:hover, .btn-exit:hover { background: #2b2f36 !important; color: var(--ink) !important; }

/* ---- Maquinário: cards e inputs de estoque ---- */
.card-estoque {
    background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-md) !important;
}
.card-estoque h4 { color: var(--ink) !important; }
.card-estoque.alerta-estoque {
    background: linear-gradient(180deg, rgba(240,121,95,.12), var(--surface) 70%) !important;
    border-color: rgba(240,121,95,.35) !important;
}
.card-estoque.alerta-estoque h4 { color: var(--danger) !important; }
.input-estoque, .input-minimo {
    background: var(--surface-3) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
}
.input-estoque:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    background: #2b2f36 !important;
}
.input-minimo:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.linha-minimo { color: var(--muted) !important; }