/* THEME DIMIVIG - DARK + ORANGE (single file) */
:root {
  --bg-top: #070707;
  --bg-mid: #200800;
  --accent: #ff6600;
  --accent-2: #ff4400;
  --card: rgba(0,0,0,0.65);
  --muted: rgba(255,255,255,0.78);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Inter", "Segoe UI", system-ui, Arial, sans-serif;
  background: linear-gradient(180deg,var(--bg-top), var(--bg-mid) 60%, var(--accent) 160%);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}

/* center pages */
.page-center{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:18px;padding:24px}
.hero-card{background:var(--card);padding:32px;border-radius:14px;border:1px solid rgba(255,102,0,0.12);text-align:center;max-width:520px;width:100%}
.big-logo{width:120px;margin-bottom:8px}
.hero-card h1{margin:8px 0;color:var(--accent);font-size:22px}
.muted{color:var(--muted)}
.role-buttons{display:flex;gap:12px;justify-content:center;margin-top:18px}
.btn{padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700;cursor:pointer;display:inline-block}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border:none;box-shadow:0 8px 30px rgba(255,102,0,0.18)}
.btn-outline{background:transparent;border:2px solid rgba(255,102,0,0.25);color:var(--accent)}
.login-card{width:520px;max-width:96%;background:var(--card);padding:26px;border-radius:12px;border:1px solid rgba(255,102,0,0.12);box-shadow:0 12px 40px rgba(0,0,0,0.6);text-align:center;position:relative}
.login-logo{width:90px;margin-bottom:6px}
.lab{display:block;text-align:left;margin:10px 0 6px;color:var(--muted);font-weight:600}
input[type="text"],input[type="password"],select{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,102,0,0.08);background:rgba(0,0,0,0.35);color:#fff;outline:none;margin-bottom:6px;
}
input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(255,102,0,0.25);
  border-color:rgba(255,102,0,0.35);
}
.small{font-size:13px;color:var(--muted);text-align:center;margin-top:12px}

/* APP LAYOUT */
.app{display:flex;min-height:100vh}
.sidebar{width:260px;background:linear-gradient(180deg, rgba(0,0,0,0.9), rgba(18,6,0,0.6));padding:18px;border-right:1px solid rgba(255,102,0,0.06)}
.sidebar .logo{width:110px;display:block;margin:6px auto 12px}
.sidebar h2{font-size:18px;margin:6px 0;text-align:center;color:var(--accent)}
.nav-btn{display:block;padding:12px;border-radius:8px;color:#fff;text-decoration:none;margin:8px 0;background:transparent;border:none;text-align:left;cursor:pointer}
.nav-btn.active, .nav-btn:hover{background:rgba(255,102,0,0.08);color:var(--accent)}
.sidebar-footer{margin-top:20px;font-size:13px;color:var(--muted);text-align:center}

/* main area */
.main{flex:1;padding:20px}
.mobile-nav{display:none}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
.topbar input{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(0,0,0,0.45);color:#fff}
.topbar button{padding:10px 14px;border-radius:10px;border:none;background:var(--accent);cursor:pointer;color:#fff}

/* KPIs */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--card);padding:16px;border-radius:12px;border-left:4px solid var(--accent)}
.kpi-title{font-size:13px;color:var(--muted)}
.kpi-value{font-size:28px;font-weight:700;margin-top:8px}

/* cards */
.cards-row{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.card{background:var(--card);padding:16px;border-radius:12px}
.card.large{min-height:120px}
.resumo-list{list-style:none;padding:0;margin:0}
.resumo-list li{padding:6px 0;border-bottom:1px dashed rgba(255,255,255,0.03)}

/* portaria circles */
.portaria-circles{display:flex;gap:18px;justify-content:space-around;align-items:center;padding:8px 0}
.circle-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.circle{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle, rgba(255,102,0,0.9) 0%, rgba(255,68,0,0.9) 60%);box-shadow:0 12px 30px rgba(255,102,0,0.25);font-weight:700;font-size:28px}
.circle-label{color:var(--muted);font-weight:600}
.table-wrap{overflow:auto;max-height:60vh}
table{width:100%;border-collapse:collapse;color:#fff;min-width:780px}
th,td{padding:10px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.04)}
th{color:var(--muted);font-weight:700}

/* collaborator styles */
.topbar-collab{display:flex;align-items:center;gap:12px;padding:12px;background:linear-gradient(90deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6));}
.logo-mini{height:46px}
.container.collab{max-width:980px;margin:18px auto;padding:18px}
.form-card{background:var(--card);padding:16px;border-radius:12px;margin-bottom:12px}
.form-card .row{display:flex;gap:10px;margin-top:10px}
.form-card .row select{flex:1}
.form-card .row button{flex:1}
.card.mini{padding:10px;border-radius:10px;margin:8px 0;border-left:4px solid rgba(255,102,0,0.9);background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.48))}
.text-muted{color:var(--muted);font-size:13px}
.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff;padding:8px;border-radius:8px;cursor:pointer}
.btn.small{padding:8px 10px;font-size:13px;border-radius:8px}

/* form-group utility */
.form-group{margin-bottom:10px}
.hidden{display:none}

#btnMenu{display:none}

/* responsive */
@media (max-width:900px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .cards-row{grid-template-columns:1fr}
  .sidebar{display:none}
  .main{padding:12px;padding-bottom:64px}
  .mobile-nav{display:flex}
}

@media (max-width:600px){
  .kpi-row{grid-template-columns:1fr}
  .portaria-circles{flex-wrap:wrap;gap:12px}
  .circle{width:88px;height:88px;font-size:24px}
  .topbar{flex-direction:column;align-items:stretch}
.topbar{position:static;top:auto;background:transparent;z-index:auto;padding:0;border-bottom:none}
.topbar .search{display:flex;gap:8px}
.form-card .row{flex-direction:column}
.form-card .row select,
.form-card .row input,
.form-card .row button{width:100%}
th,td{padding:8px}
.table-wrap{max-height:none;overflow:auto;-webkit-overflow-scrolling:touch}
 table{min-width:0}
 /* esconder colunas menos críticas em telas pequenas */
 #tableRegistros th:nth-child(5),
 #tableRegistros th:nth-child(6),
 #tableRegistros th:nth-child(7),
 #tableRegistros th:nth-child(8),
 #tableRegistros th:nth-child(9),
 #tableRegistros th:nth-child(11),
 #tableRegistros th:nth-child(12){display:none}
 #tableRegistros td:nth-child(5),
 #tableRegistros td:nth-child(6),
 #tableRegistros td:nth-child(7),
 #tableRegistros td:nth-child(8),
 #tableRegistros td:nth-child(9),
 #tableRegistros td:nth-child(11),
 #tableRegistros td:nth-child(12){display:none}
 input[type="text"],input[type="password"],select{font-size:16px}
 .btn{padding:14px 18px}
 #btnMenu{display:none}
 .mobile-nav{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(90deg, rgba(0,0,0,0.85), rgba(0,0,0,0.6));border-top:1px solid rgba(255,102,0,0.15);padding:8px 12px;display:flex;gap:10px;justify-content:space-around;z-index:1000;pointer-events:auto}
 .mobile-nav .nav-btn{flex:1;text-align:center;background:transparent;border:1px solid rgba(255,102,0,0.15);border-radius:10px;padding:12px;color:#fff}
 .mobile-nav .nav-btn.active{background:rgba(255,102,0,0.12);color:var(--accent)}
}