/* =============================
   Painel TI – Tema Verde Clean
   ============================= */
:root{
  /* Paleta */
  --g1:#0c4b36; --g2:#0b5f3e; --g3:#0b6b44;           /* fundo gradiente */
  --panel:#0a3a2b; --panel2:#0b4231;                  /* cartões */
  --text:#eaf7f0; --muted:#c8e0d3;                    /* textos */
  --accent:#22c55e; --accent2:#16a34a; --accent3:#34d399;
  --danger:#ef4444; --warn:#f59e0b;
  --ok:#22c55e;
  --border:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.06);                      /* vidro leve */
  --glass-strong:rgba(255,255,255,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  color:var(--text);
  background:
    radial-gradient(1000px 380px at 0% 0%, rgba(255,255,255,.05), transparent 50%),
    radial-gradient(1000px 380px at 100% 100%, rgba(255,255,255,.05), transparent 50%),
    linear-gradient(180deg, var(--g1), var(--g2) 55%, var(--g3));
}

/* ===== Layout autenticado ===== */
.shell{min-height:100vh;display:flex}
.sidebar{
  width:240px;
  background:rgba(0,0,0,.32); backdrop-filter:blur(6px);
  border-right:1px solid var(--border);
  color:var(--text); padding:16px; display:flex; flex-direction:column
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.brand img{height:34px;border-radius:6px}
.brand h1{font-size:16px;margin:0}
.nav a{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--text);
  background:transparent; transition:.15s ease;
}
.nav a:hover{background:var(--glass)}
.nav a.active{background:var(--glass-strong); box-shadow:inset 0 0 0 1px var(--border)}
.sidebar .foot{margin-top:auto;font-size:12px;color:var(--muted)}

.content{flex:1;padding:24px}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border);
  border-radius:16px; padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.card h3{margin:0 0 12px}

/* ===== Chips / Badges ===== */
.kv{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);font-size:12px;
  background:var(--glass);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.pill.ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35)}
.pill.err{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35)}
.badge{padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border);background:var(--glass)}
.badge.up{background:rgba(34,197,94,.16);color:#b6f6d0;border-color:rgba(34,197,94,.45)}
.badge.down{background:rgba(239,68,68,.16);color:#ffd1d1;border-color:rgba(239,68,68,.45)}
.badge.neutral{background:var(--glass-strong)}

/* ===== Tabela ===== */
.table{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--border); border-radius:12px; overflow:hidden; color:var(--text)
}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
.table th{background:var(--glass-strong)}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:rgba(255,255,255,.03)}

/* ===== Form / Controles (sem caixas pretas) ===== */
.input,.select,textarea{
  background:rgba(255,255,255,.08);            /* vidro verde suave */
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  font-size:15px; outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.input::placeholder, textarea::placeholder{color:#b7d2c3}
textarea{width:100%;min-height:82px;resize:vertical}

/* Select harmonizado + dropdown escuro legível */
.select{appearance:none;background-position:right 12px center;padding-right:36px}
.select option,.select optgroup{background:linear-gradient(180deg,#0c3a2c,#0b3528);color:#e8f5ee}
.select option[value=""]{color:#a8c8b7}

/* Focus states */
.input:focus,.select:focus,textarea:focus{
  border-color:rgba(34,197,94,.55);
  box-shadow:
    0 0 0 3px rgba(34,197,94,.20),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Campos compactos lado a lado em telas grandes */
@media (min-width:900px){
  .form-row{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
  .col-6{grid-column:span 6}
  .col-12{grid-column:span 12}
}

/* Desabilitados */
.input:disabled,.select:disabled,textarea:disabled{opacity:.7;cursor:not-allowed}

/* ===== Botões ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:12px;
  border:1px solid var(--border);
  background:var(--glass); color:var(--text);
  text-decoration:none; font-weight:700; transition:.15s ease;
}
.btn:hover{background:var(--glass-strong)}
.btn.green{background:linear-gradient(180deg,rgba(34,197,94,.22),rgba(34,197,94,.15));border-color:rgba(34,197,94,.45)}
.btn.green:hover{box-shadow:0 6px 18px rgba(34,197,94,.25)}
.btn.red{background:linear-gradient(180deg,rgba(239,68,68,.22),rgba(239,68,68,.15));border-color:rgba(239,68,68,.45)}
.btn.gray{background:rgba(255,255,255,.09)}
.button{ /* botão largo dos formulários (login) */
  width:100%;padding:14px 18px;border:0;border-radius:12px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:white;font-weight:800;font-size:16px;cursor:pointer;
  box-shadow:0 10px 20px rgba(34,197,94,.25);transition: transform .06s ease
}
.button:active{transform:translateY(1px)}

/* ===== Tabs (Serviços) ===== */
.tabs{display:flex;gap:12px;flex-wrap:wrap}
.tab{
  padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background:var(--glass); color:var(--text); text-decoration:none; font-weight:700;
}
.tab.active{background:linear-gradient(180deg,rgba(34,197,94,.20),rgba(34,197,94,.10)); border-color:rgba(34,197,94,.45)}
.tab:hover{background:var(--glass-strong)}

/* ===== Grid utilitário ===== */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}

/* ===== Login (maior e clean) ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.card.login{
  max-width:680px; width:95%; padding:28px; border-radius:20px;
  background:linear-gradient(180deg, rgba(10,58,43,.94), rgba(11,66,49,.94));
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.brand-login{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.brand-login img{height:34px;border-radius:6px}
.brand-login h1{font-size:28px;margin:0}
.subtitle{color:var(--muted);margin:0 0 18px 0;font-size:15px}
.row{display:flex;flex-direction:column;gap:10px;margin:14px 0 6px}
.label{font-size:14px;color:var(--muted)}
.error{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.35);color:#ffd7d7;padding:10px;border-radius:10px;margin-bottom:12px;font-size:14px}
.success{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);color:#c7f7da;padding:10px;border-radius:10px;margin-bottom:12px;font-size:14px}

/* ===== Pequenos retoques ===== */
hr{border:0;height:1px;background:var(--border);margin:12px 0}
.muted{color:var(--muted)}