:root {
  --orange:#EE5A28;
  --orange2:#F3901E;
  --orange3:#F8AD40;
  --dark:#0b0b0b;
  --card:rgba(18,18,18,.82);
  --border:rgba(255,255,255,.10);
  --muted:rgba(255,255,255,.55);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  min-height:100vh;
  font-family:'Montserrat',sans-serif;
  background:#050505;
  color:#fff;
}

.topbar {
  background: rgba(10,10,10,.92);
  border-bottom: 1px solid var(--border);
  padding: 16px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar .logo-img { height: 26px; width: auto; }
.usuario-info { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--muted); }
.usuario-info a {
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 8px;
  transition: .2s;
}
.usuario-info a:hover { border-color: var(--orange); color: #fff; }
.badge-tipo {
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.conteudo { max-width: 1100px; margin: 48px auto; padding: 0 24px; }
.conteudo h1 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.conteudo p { color: var(--muted); line-height: 1.7; font-size: 14px; }
.conteudo ul { margin: 12px 0 12px 20px; color: #fff; font-size: 14px; }
.placeholder { margin-top: 24px; color: var(--muted); font-size: 13px; font-style: italic; }

.flash {
  background: rgba(238,90,40,.12);
  border: 1px solid rgba(238,90,40,.35);
  color: var(--orange3);
  padding: 11px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 13px;
}

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.82)),
    url('/static/img/login-bg.webp') center/cover no-repeat;
  position: relative;
}
.login-page::after {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(238,90,40,.22), transparent 32%),
    radial-gradient(circle at 80% 70%, rgba(248,173,64,.10), transparent 28%);
  pointer-events:none;
}

.brand-area {
  position:relative;
  z-index:1;
  padding:64px 72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:760px;
}
.brand-logo { width:280px; max-width:80%; margin-bottom:36px; filter:drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.brand-title { font-size:38px; line-height:1.1; font-weight:800; letter-spacing:-1.2px; max-width:540px; }
.brand-title span { color:var(--orange3); }
.brand-text { margin-top:18px; max-width:480px; color:rgba(255,255,255,.68); font-size:14px; line-height:1.8; font-weight:500; }
.brand-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.brand-pill {
  padding:8px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.26); color:rgba(255,255,255,.68); font-size:11px; font-weight:700;
  letter-spacing:.4px; backdrop-filter:blur(8px);
}

.form-area { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; padding:40px 56px; }

.login-card {
  width:100%; max-width:420px; background:var(--card); border:1px solid var(--border);
  border-radius:24px; padding:34px; box-shadow:0 28px 80px rgba(0,0,0,.55); backdrop-filter:blur(16px);
}
.card-logo { width:190px; max-width:75%; display:block; margin:0 auto 24px; }
.form-title { font-size:22px; font-weight:800; text-align:center; margin-bottom:6px; }
.form-sub { text-align:center; color:var(--muted); font-size:13px; margin-bottom:26px; }

.flash-erro {
  background:rgba(238,90,40,.12); border:1px solid rgba(238,90,40,.35); color:#F8AD40;
  font-size:12px; padding:11px 13px; border-radius:10px; margin-bottom:18px; line-height:1.5;
}

label { display:block; font-size:11px; font-weight:800; color:rgba(255,255,255,.48); letter-spacing:.8px; text-transform:uppercase; margin-bottom:7px; }

.field { position:relative; margin-bottom:16px; }
.field i { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#555; font-size:14px; }
.field input {
  width:100%; height:50px; background:rgba(10,10,10,.72); border:1px solid rgba(255,255,255,.10);
  border-radius:12px; padding:0 15px 0 42px; font-family:'Montserrat',sans-serif; font-size:14px;
  color:#fff; outline:none; transition:.2s;
}
.field input:focus { border-color:var(--orange); background:rgba(15,15,15,.92); box-shadow:0 0 0 3px rgba(238,90,40,.12); }
.field input::placeholder { color:#444; }

.password-toggle {
  position:absolute; right:13px; top:50%; transform:translateY(-50%); border:0; background:transparent;
  color:#666; cursor:pointer; font-size:12px; padding:6px; font-weight:700;
}
.password-toggle:hover { color:var(--orange); }
.password-field input { padding-right:60px; }

.btn {
  width:100%; height:52px; margin-top:6px; background:linear-gradient(135deg,var(--orange),var(--orange2));
  border:0; border-radius:13px; font-family:'Montserrat',sans-serif; color:#fff; font-size:14px;
  font-weight:800; cursor:pointer; letter-spacing:.3px; box-shadow:0 12px 26px rgba(238,90,40,.26); transition:.2s;
}
.btn:hover { transform:translateY(-1px); box-shadow:0 16px 34px rgba(238,90,40,.36); }

.secure { margin-top:14px; display:flex; justify-content:center; align-items:center; gap:7px; color:rgba(255,255,255,.45); font-size:11px; font-weight:700; }
.secure i { color:var(--orange3); }

.footer { margin-top:22px; text-align:center; color:rgba(255,255,255,.32); font-size:10px; line-height:1.6; }

@media (max-width: 980px) {
  .login-page { grid-template-columns:1fr; }
  .brand-area { padding:44px 28px 10px; text-align:center; align-items:center; }
  .brand-title { font-size:28px; }
  .brand-pills { justify-content: center; }
  .form-area { padding:24px 20px 40px; }
  .login-card { max-width:460px; }
}
@media (max-width: 520px) {
  .brand-logo { width:220px; margin-bottom:22px; }
  .brand-title { font-size:23px; }
  .brand-text { font-size:13px; }
  .login-card { padding:26px 22px; border-radius:18px; }
}

/* ---------- ADMIN: tabela, formulario, botoes ---------- */
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }

.btn-mini {
    background: linear-gradient(135deg, var(--orange), var(--orange2));
    color:#fff; padding:9px 16px; border-radius:8px; text-decoration:none;
    font-size:13px; font-weight:700;
}

.tabela-admin { width:100%; border-collapse:collapse; font-size:13px; }
.tabela-admin th {
    text-align:left; padding:10px 14px; color:var(--muted); text-transform:uppercase;
    font-size:11px; letter-spacing:.5px; border-bottom:1px solid var(--border);
}
.tabela-admin td { padding:12px 14px; border-bottom:1px solid var(--border); }
.tabela-admin a { color:var(--orange3); text-decoration:none; font-size:12px; }
.tabela-admin a:hover { text-decoration:underline; }

.badge-tipo-mini {
    background:rgba(255,255,255,.08); padding:2px 10px; border-radius:10px;
    font-size:10px; text-transform:uppercase; font-weight:700; letter-spacing:.4px;
}
.status-ativo { color:#4ade80; font-size:12px; font-weight:700; }
.status-inativo { color:#888; font-size:12px; font-weight:700; }

.form-admin { max-width:520px; display:flex; flex-direction:column; gap:4px; }
.form-admin label {
    font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
    margin-top:14px; margin-bottom:4px; font-weight:700;
}
.form-admin input[type=text], .form-admin input[type=email], .form-admin input[type=password], .form-admin select {
    background:rgba(10,10,10,.72); border:1px solid var(--border); border-radius:8px;
    padding:10px 12px; color:#fff; font-family:'Montserrat',sans-serif; font-size:14px;
}
.form-admin input:focus, .form-admin select:focus { outline:none; border-color:var(--orange); }
.checkbox-label {
    display:flex; align-items:center; gap:8px; font-size:13px; text-transform:none;
    color:#fff; font-weight:500; margin-top:8px;
}
.bloco-condicional { border-left:2px solid var(--border); padding-left:14px; margin-top:10px; }
.form-admin .btn { margin-top:24px; max-width:200px; }

/* ---------- SERVIDORES: lista e detalhe ---------- */
.contador { color: var(--muted); font-size: 13px; }
.linha-clicavel { cursor: pointer; transition: .15s; }
.linha-clicavel:hover { background: rgba(238,90,40,.06); }

.voltar {
    color: var(--muted); text-decoration:none; font-size:13px; display:inline-block; margin-bottom:16px;
}
.voltar:hover { color: var(--orange3); }

.detalhe-grid {
    display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:20px;
}
.detalhe-item {
    background: rgba(255,255,255,.03); border:1px solid var(--border); border-radius:10px; padding:14px 16px;
}
.detalhe-item label {
    display:block; font-size:10px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--muted); font-weight:700; margin-bottom:6px;
}
.detalhe-item span { font-size:14px; color:#fff; word-break:break-word; }
.detalhe-full { grid-column: 1 / -1; }

@media (max-width: 900px) {
    .detalhe-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .detalhe-grid { grid-template-columns: 1fr; }
}

.aviso-info {
    background: rgba(238,90,40,.08); border:1px solid rgba(238,90,40,.25);
    border-radius:8px; padding:12px 14px; font-size:13px; color: var(--orange3);
}
.obrigatorio { color: var(--orange); }

/* ---------- BUSCA, ORDENACAO, PAGINACAO ---------- */
.barra-busca { display:flex; gap:10px; align-items:center; margin-bottom:20px; }
.barra-busca input[type=text] {
    flex:1; max-width:400px; background:rgba(10,10,10,.72); border:1px solid var(--border);
    border-radius:8px; padding:10px 14px; color:#fff; font-family:'Montserrat',sans-serif; font-size:14px;
}
.barra-busca input:focus { outline:none; border-color:var(--orange); }
.barra-busca button {
    background: linear-gradient(135deg, var(--orange), var(--orange2));
    color:#fff; border:0; padding:10px 18px; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer;
}
.limpar-busca { color:var(--muted); font-size:13px; text-decoration:none; }
.limpar-busca:hover { color:var(--orange3); }

.th-ordenavel { color:var(--muted); text-decoration:none; display:flex; align-items:center; gap:5px; }
.th-ordenavel:hover { color:#fff; }
.th-ordenavel i { color:var(--orange3); font-size:10px; }

.paginacao {
    display:flex; justify-content:center; align-items:center; gap:20px; margin-top:24px; font-size:13px;
}
.paginacao a { color:var(--orange3); text-decoration:none; }
.paginacao a:hover { text-decoration:underline; }
.pagina-atual { color:var(--muted); }

/* ---------- Tabela de servidores: mais espaco, menos quebra de linha ---------- */
.conteudo:has(.tabela-admin) { max-width: 1500px; }

.tabela-admin td, .tabela-admin th { white-space: nowrap; }

.tabela-admin td:nth-child(1) {
    white-space: normal;
    max-width: 200px;
}
.tabela-admin td:nth-child(3) {
    white-space: normal;
    max-width: 180px;
}

/* ---------- REDESIGN: cartoes, selos, paginacao (padrao CRM) ---------- */
.painel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}
.painel-busca { padding: 16px 20px; margin-bottom: 20px; }
.painel-tabela { padding: 8px; overflow: hidden; }
.painel-tabela .tabela-admin th,
.painel-tabela .tabela-admin td { border-color: rgba(255,255,255,.06); }
.painel-tabela .tabela-admin tr:last-child td { border-bottom: none; }

.page-header h1 { display:flex; align-items:center; gap:10px; }
.page-header h1 i { color: var(--orange); font-size: 20px; }

.selo {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.3px;
}
.selo::before { content:''; width:6px; height:6px; border-radius:50%; }
.selo-verde { background: rgba(74,222,128,.12); color:#4ade80; }
.selo-verde::before { background:#4ade80; }
.selo-amarelo { background: rgba(248,173,64,.14); color: var(--orange3); }
.selo-amarelo::before { background: var(--orange3); }
.selo-cinza { background: rgba(255,255,255,.08); color: var(--muted); }
.selo-cinza::before { background: var(--muted); }

.paginacao {
    display:flex; justify-content:center; align-items:center; gap:6px; margin-top:20px; flex-wrap:wrap;
}
.pg-btn {
    min-width:34px; height:34px; padding:0 10px; display:flex; align-items:center; justify-content:center;
    border-radius:8px; background: rgba(255,255,255,.04); border:1px solid var(--border);
    color: var(--muted); text-decoration:none; font-size:13px; font-weight:600; transition:.15s;
}
.pg-btn:hover { border-color: var(--orange); color:#fff; }
.pg-atual {
    background: linear-gradient(135deg, var(--orange), var(--orange2));
    color:#fff; border-color: transparent;
}
.pg-disabled { opacity:.3; pointer-events:none; }
.pg-reticencias { color: var(--muted); padding: 0 4px; }

.selo-vermelho { background: rgba(238,90,40,.14); color: var(--orange); }
.selo-vermelho::before { background: var(--orange); }

.acoes-header { display:flex; align-items:center; gap:14px; }
.btn-mini-secundario {
    background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--muted);
}
.form-colunas {
    max-width: 420px; padding: 24px; display:flex; flex-direction:column; gap:2px;
}
.form-colunas .checkbox-label { padding: 6px 0; }
.form-colunas .btn { margin-top: 20px; max-width: 200px; }

/* ---------- Tabela larga com scroll horizontal proprio ---------- */
.conteudo:has(.tabela-admin) { max-width: 98vw; width: 98vw; }

.tabela-scroll { overflow-x: auto; }
.tabela-scroll table { width: max-content; min-width: 100%; }
.tabela-scroll::-webkit-scrollbar { height: 8px; }
.tabela-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.tabela-scroll::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* ---------- Pagina de detalhe do servidor: mais larga, organizada por secao ---------- */
.conteudo:has(.pagina-detalhe) { max-width: 98vw; width: 98vw; }

.id-badge { color: var(--muted); font-size: 15px; font-weight: 500; margin-left: 8px; }

.secao { padding: 20px 24px; margin-bottom: 20px; }
.secao-zabbix { padding: 20px 24px; margin-bottom: 24px; border-color: rgba(238,90,40,.25); }

.secao-titulo {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 16px; display: flex; align-items: center; gap: 8px; color: var(--muted);
}
.secao-titulo i { color: var(--orange); font-size: 13px; }
.secao-zabbix .secao-titulo { color: #fff; font-size: 14px; text-transform: none; letter-spacing: normal; }

.secao .detalhe-grid { grid-template-columns: repeat(4, 1fr); }
.secao-vazia { color: var(--muted); font-size: 13px; }
.observacao-texto { color: var(--text); font-size: 14px; line-height: 1.7; white-space: pre-wrap; }

@media (max-width: 1200px) {
    .secao .detalhe-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .secao .detalhe-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .secao .detalhe-grid { grid-template-columns: 1fr; }
}

.secao .grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1400px) {
    .secao .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .secao .grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .secao .grid-5 { grid-template-columns: 1fr; }
}

.atualizado-em { display:block; margin-top:4px; font-size:10px; color: var(--muted); font-style: italic; }

.secao-zabbix .detalhe-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}