/* ISPTI Admin • CSS padrão (base 12px) */
:root{
  /* Cores */
  --bg:#0b1220;
  --panel:#101a2c;
  --panel-2:#0e1627;
  --elev:#0c1426;
  --border:#16223b;
  --text:#d8e1f0;
  --muted:#97a3b6;

  --brand:#2f85ff;       /* azul identidade do admin */
  --brand-rgb:47,133,255;
  --brand-2:#69a4ff;

  --success:#3bb273;
  --warning:#f2b84b;
  --danger:#e55353;

  --radius:14px;
  --shadow:0 2px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
}

html { font-size:12px; }
*, *::before, *::after { box-sizing:border-box; }
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:12px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Links */
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Containers e layout base */
.container{ max-width:1200px; margin:0 auto; padding:2rem; }
.main{ margin-left:240px; }
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 2rem; background:#0a1120; border-bottom:1px solid var(--border);
}
.sidebar{
  width:240px; position:fixed; inset:0 auto 0 0;
  background:#0a1120; border-right:1px solid var(--border); padding:1rem;
  overflow-y:auto;
}
.menu a{ display:block; padding:.6rem .8rem; border-radius:8px; color:#cdd7e8; }
.menu a:hover{ background:#0f1a31; }
.menu a.active{ background:#12315e; color:#fff; }

/* Cards */
.card{
  background: radial-gradient(120% 120% at 50% 10%, #0d182c 0%, var(--panel) 60%, var(--panel-2) 100%);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:1.5rem;
  border:1px solid rgba(255,255,255,.04);
}
.card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.card-title{ font-weight:600; font-size:1.4rem; }

/* Tipografia */
h1,h2,h3{ margin:0 0 1rem; font-weight:600; }
h1{ font-size:2rem; }
h2{ font-size:1.6rem; }
h3{ font-size:1.3rem; }
.small{ font-size:.875rem; color:#9fb3d9; }

/* Formulários */
label{ display:block; margin:.6rem 0 .3rem; color:#b9c5db; font-size:.95rem; }
input,select,textarea{
  width:100%; background:var(--elev); color:var(--text);
  border:1px solid #1a2742; border-radius:10px; padding:.75rem .9rem; outline:none;
}
input::placeholder,textarea::placeholder{ color:#6b7b96; }
input:focus,select:focus,textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.2);
}
.form-row{ margin-bottom:.9rem; }

/* Botões */
.btn{
  display:inline-block; border:0; cursor:pointer;
  border-radius:10px; padding:.7rem 1.2rem; font-weight:600;
}
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-secondary{ background:#182540; color:#c9d4e4; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-outline{
  background:transparent; color:var(--text); border:1px solid #2b3b61;
}
.menu-badge{
  margin-left:6px;
  background:#ef4444; color:#fff;
  border-radius:10px;
  padding:0 .35rem;
  font-size:.72rem; line-height:18px;
  display:inline-block; min-width:18px; text-align:center
}


.btn-ghost{ background:transparent; color:#c9d4e4; }

/* Tabelas */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:.8rem; border-bottom:1px solid var(--border); text-align:left; }
.table th{ color:#a9b7cf; font-weight:600; background:#0c1527; }

/* Badges / Chips */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.2rem .55rem; border-radius:999px; font-size:.85rem;
  border:1px solid #26365b; color:#cfe0ff; background:#12213f;
}
.badge.success{ color:#e8fff3; background:#133525; border-color:#1f6a44; }
.badge.warning{ color:#fff7e0; background:#3a2c10; border-color:#6b5218; }
.badge.danger{ color:#ffe6e6; background:#3a1616; border-color:#6e2c2c; }

/* Pills (segmented) */
.pills{ display:flex; gap:.6rem; flex-wrap:wrap; }
.pill{
  padding:.5rem .9rem; border-radius:999px; border:1px solid #2b3b61;
  color:#cfe0ff; background:#0f1a31; cursor:pointer; user-select:none;
}
.pill.active{ background:#15325e; border-color:#2f85ff; color:#fff; }

/* Alerts */
.alert{ padding:.8rem 1rem; border-radius:8px; border:1px solid #622a2a; background:#211016; color:#ffd6d6; }
.alert.info{ background:#0f1c2f; border-color:#25406f; color:#cfe0ff; }

/* Grids utilitárias */
.row{ display:grid; gap:1rem; }
.row.two{ grid-template-columns:1fr 1fr; }
.row.three{ grid-template-columns:repeat(3,1fr); }
@media (max-width: 1024px){ .row.two, .row.three{ grid-template-columns:1fr; } .main{ margin-left:0; } .sidebar{ position:static; width:auto; } }

/* Utilitários rápidos */
.mt-1{ margin-top:.5rem; } .mt-2{ margin-top:1rem; } .mt-3{ margin-top:1.5rem; }
.mb-1{ margin-bottom:.5rem; } .mb-2{ margin-bottom:1rem; } .mb-3{ margin-bottom:1.5rem; }
.text-right{ text-align:right; } .text-center{ text-align:center; }
.hidden{ display:none!important; }

/* Barra superior da página (título + ações) */
.page-bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.breadcrumbs{ color:#95a8c6; font-size:.95rem; }

/* Busca */
.search{ display:flex; gap:.6rem; }
.search input{ max-width:520px; }

/* Paginação simples */
.pagination{ display:flex; gap:.4rem; align-items:center; }
.pagination .page{ padding:.4rem .7rem; border-radius:8px; border:1px solid #2b3b61; }
.pagination .page.active{ background:#15325e; color:#fff; border-color:#2f85ff; }

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; place-items:center; z-index:1000;
}
.modal{ background:var(--panel); border-radius:12px; box-shadow:var(--shadow); padding:1.2rem; width:min(640px, 92vw); border:1px solid rgba(255,255,255,.06);}
.modal-backdrop.show{ display:grid; }

/* Loader */
.spinner{ width:22px; height:22px; border-radius:50%; border:3px solid #234; border-top-color:var(--brand); animation:spin .9s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* Login com fundo */
.login-wrap{
  min-height:100vh; display:grid; place-items:center;
  background:
    linear-gradient(180deg, rgba(11,18,32,.35) 0%, rgba(11,18,32,.85) 100%),
    url("/assets/img/fundo.jpg") center/cover no-repeat,
    url("/assets/img/fundo.png") center/cover no-repeat,
    var(--bg);
}
.login-card{
  width:420px;
  background:rgba(15,24,42,.72);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.06);
}

/* Headings pequenos (títulos de seção estilo prints) */
.section-title{
  font-size:1.6rem; margin-bottom:1rem;
}

/* Tabelas “vazias” */
.table-empty{ text-align:center; color:#90a1bf; padding:1rem; }

/* Footer */
.footer{ text-align:center; color:#8594ac; padding:2rem; font-size:.9rem; }

/* ==== ajustes de navegação (sidebar) ==== */
.menu-section-title{ margin:.9rem 0 .3rem; color:#7f91ad; font-size:.85rem; letter-spacing:.02em; text-transform:uppercase; }
.menu a.disabled{ opacity:.55; pointer-events:none; }

/* ==== Ícones e micro-efeitos ====*/
.menu a{ display:flex; align-items:center; gap:.6rem; }
.menu a .ico{ width:1.1rem; height:1.1rem; opacity:.9; flex:0 0 auto; }
.menu a{ position:relative; transition: transform .12s ease, background .12s ease; }
.menu a:hover{ transform:translateX(2px); background:#102043; }
.menu a.active{ background:#12315e; color:#fff; box-shadow: inset 3px 0 0 #2f85ff; }
.navbar{ background:linear-gradient(180deg, rgba(10,17,32,.95), rgba(10,17,32,.80)); border-bottom:1px solid var(--border);}
/* Fundo sutil nas páginas autenticadas */
body.app-shell::before{ content:""; position:fixed; inset:0; z-index:-1;
  background: radial-gradient(120% 120% at 100% -10%, rgba(47,133,255,.15), transparent 60%),
              url("/assets/img/fundo.jpg") center/cover no-repeat,
              url("/assets/img/fundo.png") center/cover no-repeat, var(--bg);
  filter: blur(2px) saturate(1.05); opacity:.18; }
/* Brilho de marca sutil no topo */
.brand-glow{ box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 0 30px rgba(47,133,255,.08); }

/* === ISPTI: padronização de largura dos cards (modais) === */
.card.fixed, .card { max-width: 1100px; margin-left:auto; margin-right:auto; }
.card .card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.grid-3 { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:12px; }
.grid-2 { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; }
.table table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:.6rem .7rem; border-bottom:1px solid var(--border); }
.btn.btn-sm { padding:.35rem .6rem; font-size:12px; }
.alert.success{background:#0a3a2a;border:1px solid #165c47;color:#d8ffe9;padding:.6rem .8rem;border-radius:8px}
.alert.danger {background:#3a0a12;border:1px solid #5c1620;color:#ffd8de;padding:.6rem .8rem;border-radius:8px}
.badge{display:inline-block;padding:.15rem .45rem;border-radius:999px;background:#2c3b5a;color:#cfe3ff;font-size:11px}

/* Uniformiza largura dos cards principais em páginas de listagem/form */
main .card, .content .card, .page .card, .container .card { max-width:1100px; margin-left:auto; margin-right:auto; }
.card .card-header{display:flex; align-items:center; justify-content:space-between; gap:12px}

/* === Padronização de largura do card no painel === */
:root{ --card-max:1100px; }

/* força todos os cards das páginas internas a terem a mesma largura */
main .card,
.content .card,
.container .card {
  max-width: var(--card-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* header do card com título + ações alinhados */
.card .card-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* não mexer no tamanho de modais/diálogos reais */
.modal .card, .dialog .card { max-width: initial !important; }
/* === ISPTI: cards com largura padronizada em todo o painel === */
:root { --ispti-card-w: 1080px; }

body main .card,
body .content .card,
body .page .card,
body .container .card,
body .wrap .card {
  width: var(--ispti-card-w) !important;
  max-width: var(--ispti-card-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Cabeçalho do card com título + ações alinhados */
.card .card-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* Não afetar modais/diálogos reais */
.modal .card, .dialog .card { width: initial !important; max-width: initial !important; }

/* Responsivo: em telas menores, ocupar 100% */
@media (max-width: 1200px){
  body main .card,
  body .content .card,
  body .page .card,
  body .container .card,
  body .wrap .card {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* === Exceção: no Dashboard os cards são fluidos (grid), não fixos === */
.ispti-dashboard .card{
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Grid responsivo dos KPIs no Dashboard */
.ispti-dashboard .kpis{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

/* Aparência dos blocos KPI (opcional) */
.ispti-dashboard .kpi .kpi-title{
  font-size: 12px; opacity: .75; margin-bottom: 6px;
}
.ispti-dashboard .kpi .kpi-value{
  font-size: 28px; line-height: 1.2; font-weight: 600;
}
/* ---- DASHBOARD FIX ---- */
/* Apenas os cards KPI ficam fluidos (grid). */
.ispti-dashboard .kpi.card{
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* O card-wrapper do dashboard mantém a mesma largura padrão e centralizado. */
.ispti-dashboard .card.card-wrap{
  width: min(1100px, calc(100% - 32px)) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Grid responsivo para os KPIs dentro do wrapper */
.ispti-dashboard .kpis{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

/* Aparência dos KPIs (opcional) */
.ispti-dashboard .kpi .kpi-title{ font-size:12px; opacity:.75; margin-bottom:6px; }
.ispti-dashboard .kpi .kpi-value{ font-size:28px; line-height:1.2; font-weight:600; }
/* ---- /DASHBOARD FIX ---- */

/* CHAMADOS – pills + tabela */
.pill{display:inline-block;padding:.125rem .5rem;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
/* prioridade */
.pill-prioridade-baixa{background:#0b3a2a;border-color:#0b3a2a;color:#d6ffe8}
.pill-prioridade-media{background:#0b2c4d;border-color:#0b2c4d;color:#d6ebff}
.pill-prioridade-alta{background:#4a1f1f;border-color:#4a1f1f;color:#ffd6d6}
.pill-prioridade-urgente,.pill-prioridade-critica{background:#5d0b0b;border-color:#5d0b0b;color:#ffdfdf}
/* status */
.pill-status-aberto{background:#2c2f36}
.pill-status-agendado{background:#3a2a0b;color:#ffe9bf}
.pill-status-em_andamento{background:#0c2c44;color:#d7f1ff}
.pill-status-concluido{background:#14321a;color:#d7ffe1}
.pill-status-cancelado{background:#3a1515;color:#ffdada}
/* origem */
.pill-origem-interno{background:#26283a}
.pill-origem-externo{background:#2a2b21}
.pill-origem-whatsapp{background:#0b3a2a}
.pill-origem-email{background:#1d2b3a}
.pill-origem-telefone{background:#3a251d}

/* tabela de chamados (namespaced p/ não interferir) */
.table-wrap{overflow:auto}
.tbl-chamados{width:100%;border-collapse:separate;border-spacing:0}
.tbl-chamados th,.tbl-chamados td{padding:.6rem .75rem;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.06)}
.tbl-chamados th{font-weight:600;opacity:.9;text-align:left}
.tbl-chamados td.subject{max-width:26rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl-chamados td.when{white-space:nowrap}

/* utilitários */
.header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.header-row h2{font-size:1.05rem;margin:0}
.search-row{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem}
.search-row input{flex:1;min-width:260px}
.actions .btn{margin-right:.25rem}