/* ============================
   FONTE GLOBAL + VARIÁVEIS DE TEMA
   ============================ */
:root{
  --font-main: 'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* ===== Tema padrão (escuro) ===== */
  --bg-main: radial-gradient(
    ellipse at top,
    #1a2a38 0%,
    #0b1220 60%,
    #070b14 100%
  );

  /* Card do login */
  --card-bg: #d6d8dc;
  --card-text: #0f172a;

  /* Textos */
  --text-default: #0f172a;
  --text-on-dark: #e2e8f0;
  --text-on-dark-muted: #cbd5e1;

  /* Inputs / labels */
  --input-bg: #eef0f3;
  --input-text: #0f172a;
  --label-text: #111827;

  /* Painéis (page-mode) */
  --panel-bg: rgba(214,216,220,0.08);
  --panel-border: rgba(255,255,255,0.08);

  /* Blocos */
  --block-bg: rgba(214,216,220,0.12);
  --block-border: rgba(255,255,255,0.08);

  /* Muted-box page-mode */
  --muted-bg: rgba(238,240,243,0.10);
  --muted-text: #cbd5e1;
  --muted-border: rgba(255,255,255,0.06);

  /* Tabela */
  --table-bg: #fff;
  --table-th-bg: #f1f5f9;
  --table-th-text: #0b1220;
  --table-border: #cbd5e1;

  /* Cores do sistema */
  --brand-green: #10b981;
  --brand-green-2: #34d399;

  /* Botões de perigo (logout) */
  --danger: #ef4444;
  --danger-bg: rgba(239,68,68,0.10);
  --danger-border: rgba(239,68,68,0.35);
  --danger-bg-hover: rgba(239,68,68,0.16);
  --danger-border-hover: rgba(239,68,68,0.55);
}

/* ============================
   TEMA CLARO (aplicar: body.theme-light)
   ============================ */
body.theme-light{
  --bg-main: #f8fafc;

  --card-bg: #ffffff;
  --card-text: #0f172a;

  --text-default: #0f172a;
  --text-on-dark: #0f172a;
  --text-on-dark-muted: #475569;

  --input-bg: #e5e7eb;
  --input-text: #0f172a;
  --label-text: #0f172a;

  --panel-bg: #ffffff;
  --panel-border: #cbd5e1;

  --block-bg: #f1f5f9;
  --block-border: #cbd5e1;

  --muted-bg: #f1f5f9;
  --muted-text: #475569;
  --muted-border: #e5e7eb;

  --table-bg: #ffffff;
  --table-th-bg: #e5e7eb;
  --table-th-text: #0b1220;
  --table-border: #e5e7eb;
}

/* Reset e fonte */
* {
  box-sizing: border-box;
  font-family: var(--font-main);
}

/* Garante herança total (evita dashboard “diferente”) */
button,
input,
select,
textarea,
table,
th,
td,
label,
a,
span,
p,
h1,h2,h3,h4,h5,h6{
  font-family: inherit;
}

/* 🔑 ESSENCIAL PARA CENTRALIZAÇÃO */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Container principal */
body{
  display: flex;
  align-items: center;        /* centraliza vertical */
  justify-content: center;    /* centraliza horizontal */
  background: var(--bg-main);
  color: var(--text-default);
}

/* Card */
.card{
  width: 520px;
  max-width: calc(100% - 32px);
  background: var(--card-bg);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  color: var(--card-text);
}

/* Brand */
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-bottom: 22px;
}

.logo{
  width:64px;
  height:64px;
  border-radius: 14px;
  background: var(--brand-green);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 22px rgba(16,185,129,.35);
}

.logo svg{
  width:34px;
  height:34px;
  fill:white;
}

.brand h1{
  margin:0;
  font-size: 28px;
  font-weight: 800;
  color:#0b1220;
}

.brand p{
  margin:0;
  color:#475569;
  font-size:14px;
}

/* Form */
.form-group{ margin-top: 14px; }

label{
  display:block;
  font-size:14px;
  font-weight:700;
  color: var(--label-text);
  margin-bottom:8px;
}

.input{
  width:100%;
  border: 0;
  outline: none;
  padding: 14px;
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 14px;
}

/* Password */
.password-wrap{ position:relative; }

.toggle-eye{
  position:absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  border:0;
  background: transparent;
  cursor:pointer;
  padding:8px;
  color:#64748b;
  font-weight:700;
}

/* Botão */
.btn{
  margin-top: 18px;
  width:100%;
  border:0;
  padding: 14px;
  border-radius: 10px;
  background: var(--brand-green);
  color: #fff;
  font-weight: 800;
  cursor:pointer;
}

.btn:hover{
  filter: brightness(.95);
}

/* Links */
.links{
  margin-top: 12px;
  display:flex;
  justify-content: space-between;
  gap:10px;
  font-size: 13px;
}

.links a{
  color: var(--text-default);
  text-decoration: none;
  font-weight:700;
}

.links a:hover{
  text-decoration: underline;
}

/* Boxes */
.muted-box{
  margin-top: 14px;
  background: var(--input-bg);
  border-radius: 10px;
  padding: 12px;
  text-align:center;
  color:#475569;
  font-size: 13px;
}

.error{
  background:#fee2e2;
  color:#7f1d1d;
  padding: 10px;
  border-radius: 10px;
  margin-top: 12px;
  font-size: 13px;
}

.success{
  background:#dcfce7;
  color:#14532d;
  padding: 10px;
  border-radius: 10px;
  margin-top:  12px;
  font-size: 13px;
}

.hint{
  color:#64748b;
  font-size:12px;
  margin-top:6px;
}

/* ===== Força da senha ===== */
.password-strength { margin-top: 10px; }

.strength-bar {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.strength-bar #strength-fill{
  display:block;
  height:100%;
  width:0%;
  background-color: transparent;
  transition: width .3s ease, background-color .3s ease;
}

/* 🔥 Mais específico: garante que a cor vença qualquer regra anterior */
.strength-bar #strength-fill.strength-weak   { background-color: #ef4444; }
.strength-bar #strength-fill.strength-medium { background-color: #f59e0b; }
.strength-bar #strength-fill.strength-strong { background-color: #10b981; }

.strength-text {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

/* ==========================================
   MODO PÁGINA (tela cheia) - não afeta login
   Use: <body class="page-mode">
========================================== */
body.page-mode{
  display: block !important;           /* desliga o flex do login */
  align-items: initial !important;
  justify-content: initial !important;
  background: var(--bg-main) !important;
  color: var(--text-on-dark) !important;
  min-height: 100vh;
}

/* container da página inteira */
.page{
  min-height: 100vh;
  width: 100%;
  display: flex;
}

/* coluna da marca (esquerda) */
.page-aside{
  width: 320px;
  padding: 28px;
  background: var(--bg-main);
  color: #fff;
}

/* área principal (direita) */
.page-main{
  flex: 1;
  padding: 28px;
  overflow: auto;
}

/* Garante que qualquer “card” dentro da página não limite largura */
.page-main .card{
  width: 100% !important;
  max-width: none !important;
}

/* Responsivo */
@media (max-width: 900px){
  .page{ flex-direction: column; }
  .page-aside{ width: 100%; }
}

/* ===============================
   CONTRASTE DO BRAND (SIDEBAR)
   =============================== */

/* Título principal */
.page-aside .brand h1{
  color: #f8fafc;            /* branco suave */
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* Subtítulo */
.page-aside .brand p{
  color: #cbd5e1;            /* cinza claro */
  font-size: 14px;
  opacity: 0.95;
}

/* Caso exista span ou destaque no título */
.page-aside .brand h1 span{
  color: var(--brand-green-2);            /* verde do sistema */
}

/* ======================================
   MENU LATERAL (SIDEBAR)
====================================== */

.side-nav{
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== Topo do menu lateral (Tema + Minimizar) ===== */
.side-nav-top{
  display:flex;
  justify-content:center; /* CENTRALIZADO */
  gap: 10px;
  margin-bottom: 10px;
}


.theme-btn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: #e2e8f0;
  transition: all .2s ease;
}

.theme-btn:hover{
  background: rgba(52,211,153,0.15);
  border-color: rgba(52,211,153,0.35);
  transform: translateY(-1px);
}

body.theme-light .theme-btn{
  border: 1px solid #cbd5e1;
  background: #eef2f7;
  color: #0f172a;
}

body.theme-light .theme-btn:hover{
  background: #e5e7eb;
}

/* Botões do menu */
.side-nav .nav-item{
  /* REMOVIDO: font-family (agora é global) */
  font-weight: 700;
  font-size: 15px;

  padding: 12px 14px;
  border-radius: 12px;

  text-decoration: none;
  color: #e2e8f0;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);

  transition: all .2s ease;
}

/* Hover */
.side-nav .nav-item:hover{
  background: rgba(52,211,153,0.15);
  border-color: rgba(52,211,153,0.4);
  color: #ecfdf5;
}

/* Item ativo */
.side-nav .nav-item.active{
  background: linear-gradient(
    135deg,
    rgba(16,185,129,0.9),
    rgba(52,211,153,0.9)
  );
  color: #022c22;
  box-shadow: 0 6px 18px rgba(16,185,129,.35);
}

/* Sidebar vira “coluna” com footer embaixo */
.side-layout{
  height: 100%;
  min-height: calc(100vh - 44px); /* acompanha padding do aside */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Menu (mantido como estava, sem mexer em largura) */
.side-nav{
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Footer do logout (canto inferior direito) */
.side-footer{
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.logout-btn{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.35);
  transition: all .2s ease;
}

.logout-btn svg{
  width: 22px;
  height: 22px;
  fill: #ef4444;
}

.logout-btn:hover{
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.55);
  transform: translateY(-1px);
}

/* Centraliza logo e textos no brand (sidebar) */
.page-aside .brand{
  align-items: center !important;
  text-align: center;
}

/* Menu continua em coluna e alinhado */
.page-aside .side-nav{
  width: 100%;
  align-items: stretch;
  margin-top: 22px;
}

/* Botão Sair (ícone) na topbar */
.topbar-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  transition: all .2s ease;
}

.icon-btn svg{
  width: 20px;
  height: 20px;
  fill: var(--danger);
}

.icon-btn:hover{
  background: var(--danger-bg-hover);
  border-color: var(--danger-border-hover);
  transform: translateY(-1px);
}

/* No LOGIN (sem page-mode), esconde o menu lateral e qualquer logout que esteja no brand */
body:not(.page-mode) .side-nav { display: none !important; }
body:not(.page-mode) .logout-btn { display: none !important; }

/* Força layout do sistema somente quando page-mode */
body.page-mode .page{
  width: 100%;
  min-height: 100vh;
  display: flex;
  gap: 22px;
  padding: 22px;
}

body.page-mode .page-aside{
  width: 320px;
  padding: 22px;
  border-radius: 18px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
}

body.page-mode .page-main{
  flex: 1;
  min-width: 0;
  display: block;
}

/* ===========================
   PADRAO DO SISTEMA (page-mode)
   =========================== */

body.page-mode{
  margin:0;
  color: var(--text-on-dark);
  background: var(--bg-main) !important;
}

/* Evita scroll “fantasma” por causa do padding */
body.page-mode .page{
  height: 100vh;
  padding: 22px;
  box-sizing: border-box;
  display: flex;
  gap: 22px;
  overflow: hidden; /* scroll só dentro do main quando precisar */
}

body.page-mode .page-aside{
  width: 320px;
  padding: 22px;
  border-radius: 18px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
}

body.page-mode .page-main{
  flex: 1;
  min-width: 0;
  overflow: auto;  /* scroll só se realmente precisar */
  padding-bottom: 2px;
}

/* Topbar (igual em todas as telas) */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 18px;
  border-radius: 18px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  margin-bottom: 16px;
  color: var(--text-on-dark);
}

/* Blocks (cards escuros) */
.block{
  padding: 18px;
  border-radius: 18px;
  background: var(--block-bg);
  border: 1px solid var(--block-border);
}

.block-title{
  font-weight: 900;
  color: var(--text-on-dark);
  margin: 0 0 12px 0;
}

.block-sep{ margin-top: 22px; }

/* Labels dentro do bloco escuro */
.block label{ color: var(--text-on-dark); }

/* Muted box mais “escuro” no sistema */
body.page-mode .muted-box{
  background: var(--muted-bg);
  color: var(--muted-text);
  border: 1px solid var(--muted-border);
}

/* Tabela padrao */
.table{
  width:100%;
  border-collapse: collapse;
  margin-top:14px;
  font-size:13px;
  background: var(--table-bg);
  border-radius:14px;
  overflow:hidden;
}
.table th, .table td{
  padding:10px;
  border-bottom:1px solid var(--table-border);
  text-align:left;
  vertical-align:top;
}
.table th{ color: var(--table-th-text); background: var(--table-th-bg); }

/* Login não pode mostrar menu */
body:not(.page-mode) .side-nav{ display:none !important; }

/* ===========================
   PADRAO DO SISTEMA (page-mode)
   Baseado no layout do Equipamentos
   =========================== */

body.page-mode{
  display:block !important;
  align-items: initial !important;
  justify-content: initial !important;
  margin:0;
  background: var(--bg-main) !important;
}

/* Layout geral */
body.page-mode .page{
  height: 100vh;
  width: 100%;
  display: flex;
  padding: 22px;
  gap: 22px;
  box-sizing: border-box;
  overflow: hidden; /* scroll só dentro do main se precisar */
}

body.page-mode .page-aside{
  width: 320px;
  padding: 22px;
  border-radius: 18px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  color:#fff;
  box-sizing: border-box;
}

body.page-mode .page-main{
  flex: 1;
  min-width: 0;
  overflow: auto; /* evita scroll no body */
  padding: 0;
}

/* Topbar */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 18px;
  border-radius: 18px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  margin-bottom: 16px;
  color: var(--text-on-dark);
}

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

/* Blocks */
.block{
  padding: 18px;
  border-radius: 18px;
  background: var(--block-bg);
  border: 1px solid var(--block-border);
}

.block-title{
  font-weight: 900;
  color: var(--text-on-dark);
  margin:  0 0 12px 0;
}

.block-sep{ margin-top: 22px; }

/* Labels visíveis no fundo escuro */
body.page-mode label{ color: var(--text-on-dark); }

/* Botão pequeno (quando usar) */
.btn.btn-small{
  width:auto;
  padding:10px 14px;
  border-radius:10px;
}

/* Tabela padrão */
.table{
  width:100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 13px;
  background: var(--table-bg);
  border-radius: 14px;
  overflow:hidden;
}
.table th, .table td{ padding:10px; border-bottom:1px solid var(--table-border); text-align:left; vertical-align:top; }
.table th{ color: var(--table-th-text); background: var(--table-th-bg); }

/* Ícone sair */
.icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  transition: all .2s ease;
}
.icon-btn svg{ width:20px; height:20px; fill: var(--danger); }
.icon-btn:hover{
  background: var(--danger-bg-hover);
  border-color: var(--danger-border-hover);
  transform: translateY(-1px);
}

/* Login não mostra menu */
body:not(.page-mode) .side-nav{ display:none !important; }


/* =====================================================
   FIX DEFINITIVO: TABELAS BRANCAS COM TEXTO “APAGADO”
   (cola no FINAL para vencer regras duplicadas)
===================================================== */

/* Força texto escuro dentro da tabela (independente do tema) */
body.page-mode .table{
  color: #0f172a !important;
}

/* Cabeçalho e células */
body.page-mode .table th{
  color: #0b1220 !important;
}
body.page-mode .table td{
  color: #0f172a !important;
}

/* Links dentro da tabela */
body.page-mode .table a{
  color: #0f172a !important;
}
body.page-mode .table a:hover{
  text-decoration: underline;
}

/* Fallback caso exista alguma tabela sem class="table" */
body.page-mode table{
  color:#0f172a !important;
}
body.page-mode table th,
body.page-mode table td{
  color:#0f172a !important;
}
/* =====================================================
   PATCH: TEMA CLARO MAIS LEGÍVEL + BOTÃO "ATUALIZAR" COM TEXTO BRANCO
   (COLE NO FINAL do styles.css)
===================================================== */

/* ---------- 1) Tema claro: melhorar contraste do layout (sidebar + blocos) ---------- */
body.theme-light.page-mode{
  /* mantém o fundo claro, mas com contraste mais “sistema” */
  --bg-main: #f3f6fb;

  /* painéis e blocos mais definidos */
  --panel-bg: rgba(255,255,255,0.92);
  --panel-border: rgba(15,23,42,0.12);

  --block-bg: rgba(255,255,255,0.92);
  --block-border: rgba(15,23,42,0.12);

  --muted-bg: rgba(15,23,42,0.04);
  --muted-text: #334155;
  --muted-border: rgba(15,23,42,0.10);

  /* inputs ligeiramente mais claros */
  --input-bg: #eef2f7;
  --input-text: #0f172a;
  --label-text: #0f172a;

  /* tabela mantém branco ok */
  --table-bg: #ffffff;
  --table-th-bg: #e9eef6;
  --table-th-text: #0b1220;
  --table-border: #d7dee9;
}

/* Sidebar no tema claro (o seu CSS fixa #fff em alguns pontos) */
body.theme-light.page-mode .page-aside{
  color: #0f172a !important;
  background: var(--panel-bg) !important;
  border-color: var(--panel-border) !important;
  box-shadow: 0 12px 30px rgba(2,6,23,0.08);
}

/* Brand (título/subtítulo) no tema claro */
body.theme-light.page-mode .page-aside .brand h1{
  color: #0f172a !important;
  text-shadow: none !important;
}
body.theme-light.page-mode .page-aside .brand p{
  color: #475569 !important;
}

/* Itens do menu no tema claro (contraste bom e padrão “sistema”) */
body.theme-light.page-mode .side-nav .nav-item{
  color: #0f172a !important;
  background: rgba(15,23,42,0.04) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
}
body.theme-light.page-mode .side-nav .nav-item:hover{
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.30) !important;
  color: #0b1220 !important;
}
body.theme-light.page-mode .side-nav .nav-item.active{
  color: #ffffff !important; /* ativo com texto branco fica bem melhor */
  box-shadow: 0 10px 26px rgba(16,185,129,0.22);
}

/* ---------- 2) Botões dentro da tabela: manter TEXTO BRANCO no verde ---------- */
/* Seu “fix definitivo” força .table a e td pra #0f172a !important,
   e isso deixa o texto do botão (se for <a class="btn ...">) preto.
   Aqui a gente EXCLUI os botões dessa regra. */

body.page-mode .table a.btn,
body.page-mode .table a.btn:visited,
body.page-mode .table button.btn{
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Garantir o botão verde com fonte branca e boa leitura */
body.page-mode .table .btn{
  background: var(--brand-green) !important;
  color: #ffffff !important;
  font-weight: 800;
}
body.page-mode .table .btn:hover{
  filter: brightness(.95);
}

/* Caso exista botão “Atualizar” como <a class="btn btn-small">, centraliza melhor */
body.page-mode .table td .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* =====================================================
   TEMA CLARO (page-mode) — CONTRASTE DE VERDADE
   COLE NO FINAL DO styles.css
===================================================== */

/* Base do tema claro: fundo levemente mais escuro p/ destacar cards */
body.theme-light.page-mode{
  --bg-main: #eef2f7;

  --text-default: #0f172a;
  --text-on-dark: #0f172a;
  --text-on-dark-muted: #475569;

  --panel-bg: #ffffff;
  --panel-border: rgba(15,23,42,0.14);

  --block-bg: #ffffff;
  --block-border: rgba(15,23,42,0.12);

  --muted-bg: rgba(15,23,42,0.045);
  --muted-text: #334155;
  --muted-border: rgba(15,23,42,0.10);

  --input-bg: #f1f5f9;
  --input-text: #0f172a;
  --label-text: #0f172a;

  --table-bg: #ffffff;
  --table-th-bg: #e9eef6;
  --table-th-text: #0b1220;
  --table-border: #d7dee9;
}

/* Dá “profundidade” (diferencia do fundo) */
body.theme-light.page-mode .topbar,
body.theme-light.page-mode .block,
body.theme-light.page-mode .page-aside{
  box-shadow: 0 14px 34px rgba(2,6,23,0.08) !important;
}

/* Sidebar clara bem definida */
body.theme-light.page-mode .page-aside{
  background: #ffffff !important;
  border-color: rgba(15,23,42,0.14) !important;
  color: #0f172a !important;
}

/* Brand no claro */
body.theme-light.page-mode .page-aside .brand h1{
  color: #0f172a !important;
  text-shadow: none !important;
}
body.theme-light.page-mode .page-aside .brand p{
  color: #475569 !important;
  opacity: 1 !important;
}

/* Botão de tema no claro */
body.theme-light.page-mode .theme-btn{
  border: 1px solid rgba(15,23,42,0.12) !important;
  background: rgba(15,23,42,0.04) !important;
  color: #0f172a !important;
}
body.theme-light.page-mode .theme-btn:hover{
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.30) !important;
}

/* Menu no claro: contraste forte + texto escuro */
body.theme-light.page-mode .side-nav .nav-item{
  color: #0f172a !important;
  background: rgba(15,23,42,0.04) !important;
  border: 1px solid rgba(15,23,42,0.12) !important;
}
body.theme-light.page-mode .side-nav .nav-item:hover{
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.30) !important;
}

/* Ativo no claro: verde com texto branco (fica “sistema”) */
body.theme-light.page-mode .side-nav .nav-item.active{
  background: linear-gradient(135deg, rgba(16,185,129,0.95), rgba(52,211,153,0.95)) !important;
  color: #ffffff !important;
  border-color: rgba(16,185,129,0.45) !important;
  box-shadow: 0 10px 26px rgba(16,185,129,0.22) !important;
}

/* Conteúdo principal no claro: dá um “tapete” leve pra separar do resto */
body.theme-light.page-mode .page-main{
  background: transparent !important;
}

/* Cards/títulos dentro dos blocos no claro */
body.theme-light.page-mode .block-title{
  color: #0f172a !important;
}

/* Mantém botão verde com texto branco (inclusive na tabela) */
body.page-mode .table a.btn,
body.page-mode .table button.btn{
  color: #ffffff !important;
  text-decoration: none !important;
}
/* =====================================================
   PATCH: TEXTOS “APAGADOS” DENTRO DOS MÓDULOS (TEMA CLARO)
   COLE NO FINAL do styles.css
===================================================== */

/* Regra geral: no tema claro, dentro dos blocos/painéis, força texto legível */
body.theme-light.page-mode .topbar + .block,
body.theme-light.page-mode .block,
body.theme-light.page-mode .topbar{
  color: #0f172a !important;
}

/* MUITO comum: cards/atalhos são <a> dentro do bloco */
body.theme-light.page-mode .block a{
  color: #0f172a !important;
  opacity: 1 !important;
}

/* Títulos dentro dos cards (h1/h2/h3/h4/strong) */
body.theme-light.page-mode .block a h1,
body.theme-light.page-mode .block a h2,
body.theme-light.page-mode .block a h3,
body.theme-light.page-mode .block a h4,
body.theme-light.page-mode .block a strong,
body.theme-light.page-mode .block a b{
  color: #0f172a !important;
  opacity: 1 !important;
}

/* Subtítulos/descrições (p/span/small) */
body.theme-light.page-mode .block a p,
body.theme-light.page-mode .block a span,
body.theme-light.page-mode .block a small,
body.theme-light.page-mode .block .hint{
  color: #475569 !important;
  opacity: 1 !important;
}

/* Ícones (emoji ok, mas SVG/font-icon costuma ficar “lavado”) */
body.theme-light.page-mode .block a svg,
body.theme-light.page-mode .block a i{
  opacity: 1 !important;
  color: #0f172a !important;
  fill: currentColor !important;
}

/* Se esses cards tiverem efeito “disabled” por CSS (opacity), remove no claro */
body.theme-light.page-mode .block a,
body.theme-light.page-mode .block [class*="card"],
body.theme-light.page-mode .block [class*="tile"],
body.theme-light.page-mode .block [class*="shortcut"],
body.theme-light.page-mode .block [class*="module"]{
  opacity: 1 !important;
}

/* Opcional: deixa os cards/atalhos com borda mais visível no claro */
body.theme-light.page-mode .block a{
  border-color: rgba(15,23,42,0.12) !important;
}
/* =====================================================
   PATCH: "PREVENTIVAS A VENCER" (TEMA CLARO) — TEXTO E CONTRASTE
   COLE NO FINAL do styles.css
===================================================== */

/* 1) Dentro do bloco de preventivas, força contraste nos textos */
body.theme-light.page-mode .block{
  --pv-title: #0f172a;
  --pv-sub:   #475569;
  --pv-faint: #64748b;
}

/* 2) Cards/caixas internas (os 90/60/30 dias) — fundo e borda mais nítidos */
body.theme-light.page-mode .block .grid > * ,
body.theme-light.page-mode .block [class*="due"],
body.theme-light.page-mode .block [class*="kpi"],
body.theme-light.page-mode .block [class*="card"]{
  color: var(--pv-title) !important;
}

/* 3) Títulos tipo "90 Dias / 60 Dias / 30 Dias" */
body.theme-light.page-mode .block .grid > * h3,
body.theme-light.page-mode .block .grid > * h4,
body.theme-light.page-mode .block [class*="due"] h3,
body.theme-light.page-mode .block [class*="kpi"] h3{
  color: var(--pv-title) !important;
  opacity: 1 !important;
}

/* 4) Textos menores tipo "Nenhum equipamento..." */
body.theme-light.page-mode .block .grid > * p,
body.theme-light.page-mode .block .grid > * small,
body.theme-light.page-mode .block .grid > * span{
  color: var(--pv-sub) !important;
  opacity: 1 !important;
}

/* 5) Quando estiver “vazio” (geralmente vem com opacity ou muted) */
body.theme-light.page-mode .block .grid > *[style*="opacity"],
body.theme-light.page-mode .block [class*="muted"],
body.theme-light.page-mode .block [class*="empty"]{
  opacity: 1 !important;
  color: var(--pv-sub) !important;
}

/* 6) “0 itens / 1 itens” (badge/pill) — deixar legível */
body.theme-light.page-mode .block .grid > * [class*="pill"],
body.theme-light.page-mode .block .grid > * [class*="badge"],
body.theme-light.page-mode .block .grid > * [class*="tag"]{
  color: #0f172a !important;
  opacity: 1 !important;
}

/* 7) Botão Detalhes (se for <a> ou <button>) */
body.theme-light.page-mode .block a.btn,
body.theme-light.page-mode .block button.btn{
  color: #ffffff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
/* =====================================================
   ACABAMENTO: CARDS "PREVENTIVAS A VENCER" (TEMA CLARO)
   COLE NO FINAL do styles.css
===================================================== */

body.theme-light.page-mode{
  --pv-card-bg: #ffffff;
  --pv-card-border: rgba(15,23,42,0.12);
  --pv-title: #0f172a;
  --pv-sub: #475569;
  --pv-muted: #64748b;
}

/* 1) Força os “mini-cards” (90/60/30) a ficarem brancos e com borda nítida */
body.theme-light.page-mode .block .grid > *{
  background: var(--pv-card-bg) !important;
  border: 1px solid var(--pv-card-border) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,0.06) !important;
}

/* 2) O “90 Dias” estava com cara de disabled/muted: remove isso */
body.theme-light.page-mode .block .grid > * *{
  opacity: 1 !important;
  filter: none !important;
}

/* 3) Título (90/60/30 Dias) */
body.theme-light.page-mode .block .grid > * h3,
body.theme-light.page-mode .block .grid > * h4,
body.theme-light.page-mode .block .grid > * strong{
  color: var(--pv-title) !important;
}

/* 4) Subtexto/descrição */
body.theme-light.page-mode .block .grid > * p,
body.theme-light.page-mode .block .grid > * span,
body.theme-light.page-mode .block .grid > * small{
  color: var(--pv-sub) !important;
}

/* 5) “Atenção: ...” (deixa um pouco mais escuro e legível) */
body.theme-light.page-mode .block .grid > * [class*="warn"],
body.theme-light.page-mode .block .grid > * .warning,
body.theme-light.page-mode .block .grid > * .alert,
body.theme-light.page-mode .block .grid > * em{
  color: #334155 !important;
  font-style: normal !important;
}

/* 6) Badge “0 itens / 1 itens” */
body.theme-light.page-mode .block .grid > * [class*="pill"],
body.theme-light.page-mode .block .grid > * [class*="badge"],
body.theme-light.page-mode .block .grid > * [class*="tag"]{
  background: rgba(15,23,42,0.06) !important;
  border: 1px solid rgba(15,23,42,0.12) !important;
  color: #0f172a !important;
}

/* 7) Botão Detalhes: mantém padrão verde com texto branco */
body.theme-light.page-mode .block .grid > * a.btn,
body.theme-light.page-mode .block .grid > * button.btn{
  background: var(--brand-green) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* =====================================================
   FIX FINAL: TÍTULOS "90 / 60 / 30 DIAS" MUITO CLAROS
===================================================== */

/* Target direto nos cards de "Preventivas a vencer" */
body.theme-light.page-mode
.block
.grid
> * {

  /* garante base correta */
  color: #0f172a !important;
}

/* 1️⃣ Texto "90 Dias / 60 Dias / 30 Dias" (normalmente span/small) */
body.theme-light.page-mode
.block
.grid
> *
span:first-child,
body.theme-light.page-mode
.block
.grid
> *
small:first-child {
  color: #0f172a !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* 2️⃣ Caso venha com classe muted / secondary */
body.theme-light.page-mode
.block
.grid
> *
[class*="muted"],
body.theme-light.page-mode
.block
.grid
> *
[class*="secondary"] {
  color: #0f172a !important;
  opacity: 1 !important;
}

/* 3️⃣ Remove QUALQUER efeito de “desativado” no card */
body.theme-light.page-mode
.block
.grid
> * * {
  opacity: 1 !important;
  filter: none !important;
}

/* 4️⃣ Subtexto (descrição) fica cinza, mas legível */
body.theme-light.page-mode
.block
.grid
> *
p,
body.theme-light.page-mode
.block
.grid
> *
small:not(:first-child),
body.theme-light.page-mode
.block
.grid
> *
span:not(:first-child) {
  color: #475569 !important;
}
/* Título do card (90/60/30) */
.due-title{
  font-weight: 900;
  line-height: 1;
}

/* Tema escuro */
body.page-mode.theme-dark .due-title{
  color: #e2e8f0;
}

/* Tema claro */
body.page-mode.theme-light .due-title{
  color: #0f172a;
}
/* =====================================================
   TEMA CLARO: BADGES (itens + "Corte/Janela") COM BOA LEITURA
   COLE NO FINAL do styles.css
===================================================== */

/* Badge padrão no TEMA CLARO */
body.page-mode.theme-light .badge{
  background: rgba(15,23,42,0.06) !important;
  border: 1px solid rgba(15,23,42,0.14) !important;
  color: #0f172a !important;
  opacity: 1 !important;
}

/* Badge dentro dos cards "a vencer" (combina com cada faixa) */
body.page-mode.theme-light .due-card.due-has-90 .badge{
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.30) !important;
  color: #064e3b !important;
}
body.page-mode.theme-light .due-card.due-has-60 .badge{
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.30) !important;
  color: #7c2d12 !important;
}
body.page-mode.theme-light .due-card.due-has-30 .badge{
  background: rgba(249,115,22,0.12) !important;
  border-color: rgba(249,115,22,0.30) !important;
  color: #7c2d12 !important;
}

/* Quando NÃO tem itens (ex.: 90 dias sem itens) — ainda legível */
body.page-mode.theme-light .due-card:not(.due-has-90):not(.due-has-60):not(.due-has-30) .badge{
  background: rgba(15,23,42,0.05) !important;
  border-color: rgba(15,23,42,0.12) !important;
  color: #0f172a !important;
}
/* =====================================================
   TEMA CLARO: TEXTO DE AVISO ACIMA DO BOTÃO (muted-small)
===================================================== */

body.page-mode.theme-light .muted-small{
  color: #334155 !important;   /* cinza escuro legível */
  opacity: 1 !important;
  font-weight: 600;
}
/* =====================================================
   TEMA CLARO: BOTÃO VOLTAR (ICON-BTN) COM SETA VISÍVEL
===================================================== */

body.page-mode.theme-light .icon-btn{
  background: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.35) !important;
}

body.page-mode.theme-light .icon-btn svg{
  fill: #b91c1c !important; /* vermelho escuro */
}

/* Hover mantém destaque */
body.page-mode.theme-light .icon-btn:hover{
  background: rgba(239,68,68,0.18) !important;
  border-color: rgba(239,68,68,0.55) !important;
}
/* =====================================================
   FIX FINAL: TEXTO DE REGRA ACIMA DO BOTÃO "SALVAR MANUTENÇÃO"
===================================================== */

/* Texto explicativo dentro do formulário de manutenção */
body.page-mode.theme-light
section.block
.muted-small{
  color: #1e293b !important;   /* bem mais escuro */
  opacity: 1 !important;
  font-weight: 600;
  line-height: 1.4;
}

/* Se existir algum span/p dentro (garantia extra) */
body.page-mode.theme-light
section.block
.muted-small *{
  color: #1e293b !important;
  opacity: 1 !important;
}
/* Centraliza o conteúdo da coluna Ação (botão) */
td.col-action{
  vertical-align: middle !important;  /* mantém */
  padding-top: 10px;
  padding-bottom: 10px;
}

td.col-action{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Garante que o botão não “puxe” pra baixo */
td.col-action .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Global: colunas de ação nas tabelas */
.table td.col-action{
  display:flex;
  align-items:center;
  justify-content:center;
}
.table td.col-action .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
/* Centraliza verticalmente o conteúdo das linhas desta tabela (cadastros) */
.table.table-vmid th,
.table.table-vmid td{
  vertical-align: middle !important;
}

/* Mantém coluna de ação centralizada */
.table.table-vmid td.col-action,
.table.table-vmid th.col-action{
  text-align: center !important;
  white-space: nowrap;
}
/* =====================================================
   FIX: BOTÕES DENTRO DE TABELA NÃO PODEM TER margin-top DO LOGIN
===================================================== */

/* Remove o "empurrão" do botão dentro de tabelas */
body.page-mode .table .btn,
body.page-mode .table a.btn,
body.page-mode .table button.btn{
  margin-top: 0 !important;
  width: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Alinha verticalmente o conteúdo das células (texto + botão) */
body.page-mode .table th,
body.page-mode .table td{
  vertical-align: middle !important;
}
/* =====================================================
   FIX DASHBOARD NO TEMA CLARO (força painel/blocks/tabelas claros)
   Cole no FINAL do styles.css
===================================================== */

/* Garante fundo claro e texto escuro na área principal */
body.page-mode.theme-light .page-main{
  background: transparent !important;
  color: #0f172a !important;
}

/* Topbar e blocos principais ficam realmente claros (vence CSS local do dashboard) */
body.page-mode.theme-light .topbar,
body.page-mode.theme-light .block{
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

/* Títulos e textos dentro dos blocos */
body.page-mode.theme-light .block-title,
body.page-mode.theme-light .topbar *{
  color: #0f172a !important;
}

/* Textos “muted” no claro ficam legíveis */
body.page-mode.theme-light .muted,
body.page-mode.theme-light .muted-box,
body.page-mode.theme-light .muted-small{
  color: #334155 !important;
  opacity: 1 !important;
}

/* Badges/pills do dashboard no claro */
body.page-mode.theme-light .badge{
  background: rgba(15,23,42,0.06) !important;
  border: 1px solid rgba(15,23,42,0.14) !important;
  color: #0f172a !important;
}

/* Tabelas no dashboard (se houver tabela escura) */
body.page-mode.theme-light .table{
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
body.page-mode.theme-light .table th{
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
body.page-mode.theme-light .table td{
  color: #0f172a !important;
}

/* Se o dashboard tiver “cards” internos com fundo escuro */
body.page-mode.theme-light [class*="card"],
body.page-mode.theme-light [class*="panel"],
body.page-mode.theme-light [class*="widget"],
body.page-mode.theme-light [class*="kpi"]{
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
/* =====================================================
   SIDEBAR COLAPSÁVEL (Tema + Minimizar)
   (cole no FINAL do styles.css)
===================================================== */

/* Ícone + texto separados */
.side-nav .nav-item{
  display:flex;
  align-items:center;
  gap: 10px;
}

.nav-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  min-width: 28px;
  text-align:center;
  font-size: 18px;
}

.nav-text{
  display:inline-block;
  white-space: nowrap;
}

/* Quando colapsar: reduz largura do aside e esconde textos */
body.page-mode.sidebar-collapsed .page-aside{
  width: 92px !important;      /* bem ao canto */
  padding: 16px !important;
}

body.page-mode.sidebar-collapsed .brand-text{
  display:none !important;     /* some com título/subtítulo */
}

/* Itens do menu viram “ícone-only” */
body.page-mode.sidebar-collapsed .nav-text{
  display:none !important;
}

body.page-mode.sidebar-collapsed .side-nav .nav-item{
  justify-content:center;
  gap: 0;
  padding: 12px 10px;
}

/* Mantém o topo (botões) bem no centro mesmo colapsado */
body.page-mode.sidebar-collapsed .side-nav-top{
  justify-content:center;
}

/* Opcional: deixa logo um pouco menor no colapsado */
body.page-mode.sidebar-collapsed .logo{
  width: 54px;
  height: 54px;
  border-radius: 14px;
}

/* Suavidade */
body.page-mode .page-aside,
body.page-mode .page-main,
.side-nav .nav-item{
  transition: all .22s ease;
}
.collapse-btn{
  font-size: 18px;
  line-height: 1;
}
/* =====================================================
   FIX: BOTÃO "LIMPAR" DO FILTRO (tema claro) + alinhamento à esquerda
   (cole no FINAL do styles.css)
===================================================== */

/* Garante Filtrar/Limpar no canto esquerdo */
.filters-actions{
  justify-content: flex-start !important;
}

/* Estilo do botão "Limpar" (normalmente é o 2º/último botão do bloco) */
body.page-mode.theme-light .filters-actions .btn:last-child,
body.page-mode.theme-light .filters-actions a.btn:last-child{
  background: rgba(15,23,42,0.06) !important;
  border: 1px solid rgba(15,23,42,0.16) !important;
  color: #0b1220 !important;          /* MAIS ESCURO */
  font-weight: 900 !important;
  opacity: 1 !important;              /* remove “lavado” */
}

/* Se o "Limpar" estiver desabilitado (disabled) */
body.page-mode.theme-light .filters-actions .btn:last-child:disabled,
body.page-mode.theme-light .filters-actions button.btn:last-child:disabled{
  opacity: 1 !important;
  color: #0b1220 !important;
  cursor: not-allowed;
  filter: none !important;
}