/* Portal Gestão ISS · Fintel */
:root {
    --bg: #0f1117;
    --bg2: #1a1d27;
    --bg3: #21253a;
    --border: #2d3250;
    --text: #e2e8f0;
    --muted: #8892b0;
    --accent: #7c6af7;
    --ok: #22c55e;
    --warn: #f59e0b;
    --crit: #ef4444;
    --info: #38bdf8;
    --purple: #a855f7;
    --radius: 10px;
    --shadow: 0 4px 20px rgba(0,0,0,.4);
}

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

body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 14px; min-height: 100vh; }

/* ── Layout ─────────────────────────────────────── */
.wrap { max-width: 1600px; margin: 0 auto; padding: 16px; }

/* ── Header ─────────────────────────────────────── */
.hdr { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.title { display: flex; align-items: center; gap: 10px; }
.title h1 { font-size: 18px; font-weight: 700; color: var(--text); }
.dot { width: 10px; height: 10px; background: var(--accent); border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px var(--accent); }
.sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.hdr-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* ── Badges ─────────────────────────────────────── */
.badge { background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; font-size: 12px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.bdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Buttons ─────────────────────────────────────── */
.btn { background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 6px 14px; cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-block; transition: opacity .15s; }
.btn:hover { opacity: .85; }
.btn-sec { background: var(--bg3); border: 1px solid var(--border); color: var(--text); }
.btn-full { width: 100%; padding: 10px; font-size: 15px; }

/* ── Checkbox label ──────────────────────────────── */
.chk { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--muted); }
.user { font-size: 12px; color: var(--muted); }

/* ── Tabs ─────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; background: var(--bg2); border-radius: var(--radius); padding: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.tab { background: transparent; border: none; color: var(--muted); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all .15s; display: flex; align-items: center; gap: 6px; }
.tab:hover { background: var(--bg3); color: var(--text); }
.tab.active { background: var(--accent); color: #fff; }
.count { background: rgba(255,255,255,.15); border-radius: 10px; padding: 1px 7px; font-size: 11px; }

/* ── KPIs ─────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: relative; overflow: hidden; }
.kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
.kpi.crit::before { background: var(--crit); }
.kpi.warn::before { background: var(--warn); }
.kpi.ok::before { background: var(--ok); }
.kpi.info::before { background: var(--info); }
.kpi.purple::before { background: var(--purple); }
.kpi .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.kpi .val { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1; }
.kpi .meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.kpi.kpi-link { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.kpi.kpi-link:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.kpi.kpi-link:hover .lbl { color: var(--accent); }

/* ── Cards grid ──────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.card.col-3 { grid-column: span 3; }
.card.col-4 { grid-column: span 4; }
.card.col-6 { grid-column: span 6; }
.card.col-12 { grid-column: span 12; }
@media (max-width: 1100px) { .card.col-3, .card.col-4, .card.col-6 { grid-column: span 6; } }
@media (max-width: 700px)  { .card.col-3, .card.col-4, .card.col-6, .card.col-12 { grid-column: span 12; } }
.card-hdr { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.card-hdr h3 { font-size: 13px; font-weight: 600; color: var(--text); }
.chart-box { padding: 16px; height: 260px; display: flex; align-items: center; justify-content: center; }
.chart-box.sm { height: 200px; }
.chart-box canvas { max-width: 100%; max-height: 100%; }

/* ── Tab panes ───────────────────────────────────── */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Status banners ──────────────────────────────── */
.status-banner { text-align: center; padding: 60px 20px; color: var(--muted); }
.status-banner h3 { font-size: 18px; margin-bottom: 8px; color: var(--text); }
.status-banner.err h3 { color: var(--crit); }
.hidden { display: none !important; }

/* ── Spinner ─────────────────────────────────────── */
.spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Ticket list (oldest) ────────────────────────── */
.list-tickets { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ticket-row { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--bg3); border-radius: 8px; }
.ticket-key { font-size: 11px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.ticket-key a { color: inherit; text-decoration: none; }
.ticket-key a:hover { text-decoration: underline; }
.ticket-summary { flex: 1; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-age { font-size: 11px; color: var(--warn); white-space: nowrap; font-weight: 600; }
.ticket-assign { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ── List tab toolbar ────────────────────────────── */
.list-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.list-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-sel { background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.filter-sel:focus { outline: none; border-color: var(--accent); }

/* ── Grid.js overrides ───────────────────────────── */
.gridjs-wrapper { border-radius: var(--radius); overflow: hidden; }
.gridjs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.gridjs-th, .gridjs-td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); color: var(--text); }
.gridjs-th { background: var(--bg3); font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.gridjs-tr:hover .gridjs-td { background: var(--bg3); }
.gridjs-pagination { background: var(--bg2); border-top: 1px solid var(--border); padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; }
.gridjs-pagination-button { background: var(--bg3); border: 1px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.gridjs-pagination-button:hover { border-color: var(--accent); }
.gridjs-pagination-button[disabled] { opacity: .4; cursor: default; }

/* ── Heatmap ─────────────────────────────────────── */
.heatmap-wrap { padding: 16px; overflow-x: auto; }
.heatmap-table { border-collapse: collapse; min-width: 600px; width: 100%; }
.heatmap-table th, .heatmap-table td { padding: 4px 6px; font-size: 11px; text-align: center; }
.heatmap-table th { color: var(--muted); }
.heatmap-cell { width: 36px; height: 28px; border-radius: 4px; }

/* ── Login ───────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 40px; width: 360px; box-shadow: var(--shadow); }
.login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.login-logo h1 { font-size: 20px; font-weight: 700; }
.login-sub { color: var(--muted); font-size: 12px; margin-bottom: 28px; }
.login-card label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; margin-top: 16px; }
.login-card input { width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card .btn { margin-top: 24px; }
.login-error { color: var(--crit); font-size: 13px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }

/* ══════════════════════════════════════════════════
   FILTROS GLOBAIS
══════════════════════════════════════════════════ */
.filter-bar { display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; margin-bottom:12px; }
.filter-group { display:flex; flex-direction:column; gap:4px; }
.filter-group label { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.filter-group select { background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:5px 28px 5px 10px; border-radius:8px; font-size:12px; min-width:120px; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238892b0' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
.filter-group select:focus { outline:none; border-color:var(--accent); }
.btn-sm { padding:5px 12px; font-size:12px; }
.filter-info { font-size:11px; color:var(--muted); align-self:center; }

/* ── Tab críticos ── */
.tab-crit { position:relative; }
.count-crit { background:var(--crit) !important; }

/* ══════════════════════════════════════════════════
   PAINEL CRÍTICOS
══════════════════════════════════════════════════ */
.crit-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-bottom:14px; }

.crit-section { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; }
.crit-section-hdr { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); }
.crit-section-hdr h3 { font-size:13px; font-weight:600; flex:1; }
.crit-section-hdr.red    { border-left:3px solid var(--crit); }
.crit-section-hdr.orange { border-left:3px solid var(--warn); }
.crit-section-hdr.yellow { border-left:3px solid #eab308; }
.crit-section-hdr.blue   { border-left:3px solid var(--info); }
.crit-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.crit-dot.red    { background:var(--crit); box-shadow:0 0 6px var(--crit); }
.crit-dot.orange { background:var(--warn); box-shadow:0 0 6px var(--warn); }
.crit-dot.yellow { background:#eab308; box-shadow:0 0 6px #eab308; }
.crit-dot.blue   { background:var(--info); box-shadow:0 0 6px var(--info); }
.crit-badge { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:2px 9px; font-size:11px; font-weight:700; }
.crit-table-wrap { overflow-x:auto; }
.crit-table { width:100%; border-collapse:collapse; font-size:12px; }
.crit-table th { background:var(--bg3); color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; padding:8px 12px; text-align:left; border-bottom:1px solid var(--border); }
.crit-table td { padding:8px 12px; border-bottom:1px solid rgba(45,50,80,.5); color:var(--text); }
.crit-table tr:last-child td { border-bottom:none; }
.crit-table tr.row-sla td { background:rgba(239,68,68,.06); }
.crit-table tr.row-sla td:first-child { border-left:2px solid var(--crit); }
@keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:.55} }
.crit-table tr.row-sla-pulse td { animation:pulse-red 2s infinite; }
.crit-empty { padding:16px; color:var(--muted); font-size:12px; text-align:center; }
.btn-jira { font-size:11px; padding:3px 10px; background:var(--bg3); border:1px solid var(--border); color:var(--accent); border-radius:6px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn-jira:hover { border-color:var(--accent); }
.tag-prio { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:700; }
.tag-prio.Highest,.tag-prio.highest { background:rgba(239,68,68,.2); color:#f87171; }
.tag-prio.High,.tag-prio.high       { background:rgba(245,158,11,.2); color:#fbbf24; }
.tag-prio.Medium,.tag-prio.medium   { background:rgba(56,189,248,.2); color:#38bdf8; }
.tag-prio.Low,.tag-prio.low         { background:rgba(100,116,139,.2); color:#94a3b8; }
.tag-sla-ok  { color:var(--ok);   font-size:11px; font-weight:700; }
.tag-sla-vio { color:var(--crit); font-size:11px; font-weight:700; }

/* Faixas SLA dentro de crit-section */
.sla-band { border-top:1px solid var(--border); }
.sla-band-hdr { display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--bg3); font-size:12px; }
.sla-band-name { font-weight:700; }
.sla-band-range { color:var(--muted); font-size:11px; flex:1; }
.sla-band-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sla-band-dot.recente  { background:#f87171; box-shadow:0 0 5px #f87171; }
.sla-band-dot.atencao  { background:#fb923c; box-shadow:0 0 5px #fb923c; }
.sla-band-dot.historico{ background:#64748b; }
.crit-badge.sm { font-size:10px; padding:1px 7px; }

/* ══════════════════════════════════════════════════
   PAINEL PRODUTIVIDADE
══════════════════════════════════════════════════ */
.prod-table { width:100%; border-collapse:collapse; font-size:12px; }
.prod-table th { background:var(--bg3); color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; padding:9px 14px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none; }
.prod-table th.num { text-align:right; }
.prod-table th:hover { color:var(--text); }
.prod-table th.sort-asc::after  { content:" ↑"; color:var(--accent); }
.prod-table th.sort-desc::after { content:" ↓"; color:var(--accent); }
.prod-table td { padding:9px 14px; border-bottom:1px solid rgba(45,50,80,.5); }
.prod-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.prod-table tr:hover td { background:var(--bg3); }
.prod-table tr:last-child td { border-bottom:none; }
.prod-name { font-weight:600; }
.text-crit { color:var(--crit); font-weight:700; }
.text-warn { color:var(--warn); font-weight:700; }
.score-badge { display:inline-block; min-width:38px; text-align:center; padding:3px 10px; border-radius:12px; font-size:12px; font-weight:700; }
.score-badge.green  { background:rgba(34,197,94,.2);  color:#4ade80; }
.score-badge.yellow { background:rgba(234,179,8,.2);  color:#facc15; }
.score-badge.red    { background:rgba(239,68,68,.2);  color:#f87171; }
.score-legend { display:flex; gap:6px; align-items:center; font-size:11px; color:var(--muted); }
.score-legend .score-badge { font-size:11px; padding:2px 8px; }

/* Seção de perfis administrativos (colapsável) */
.admin-profiles-section { border:1px solid var(--border); }
.admin-profiles-hdr { display:flex; justify-content:space-between; align-items:center; cursor:pointer; user-select:none; padding:12px 16px; border-bottom:none; }
.admin-profiles-hdr:hover { background:var(--bg3); }
.admin-profiles-hdr h3 { margin:0; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.admin-profiles-hdr .toggle-icon { font-size:10px; color:var(--muted); transition:transform .2s; }
.admin-profiles-hdr[aria-expanded="true"] .toggle-icon { transform:rotate(90deg); }
.admin-profiles-body { padding:0 0 8px; }
.admin-profiles-note { font-size:11px; color:var(--muted); padding:8px 16px; margin:0; font-style:italic; }

/* ══════════════════════════════════════════════════
   ADMIN — GERENCIAR USUÁRIOS
══════════════════════════════════════════════════ */
.admin-wrap { max-width: 1100px; }

/* Grid: formulário (fixo) | tabela (flex) */
.admin-grid { display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start; }
@media (max-width:768px) { .admin-grid { grid-template-columns:1fr; } }

/* Formulário */
.admin-form { padding:16px; }
.admin-form .form-row { margin-bottom:14px; }
.admin-form label { display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.admin-form input,
.admin-form select { width:100%; background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:9px 12px; border-radius:8px; font-size:13px; }
.admin-form input:focus,
.admin-form select:focus { outline:none; border-color:var(--accent); }
.admin-form select option { background:var(--bg2); }
.field-error { display:block; color:var(--crit); font-size:11px; margin-top:4px; }

/* Tabela de usuários */
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table thead th { padding:10px 14px; text-align:left; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); white-space:nowrap; }
.admin-table tbody td { padding:10px 14px; border-bottom:1px solid rgba(45,50,80,.5); vertical-align:middle; }
.admin-table tbody tr:last-child td { border-bottom:none; }
.admin-table tbody tr:hover td { background:var(--bg3); }
.row-inactive td { opacity:.45; }

/* Role & status badges */
.tag-role { display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px; font-weight:600; }
.tag-role.admin     { background:rgba(124,106,247,.2); color:var(--accent); border:1px solid rgba(124,106,247,.4); }
.tag-role.atendente { background:rgba(56,189,248,.15); color:var(--info);   border:1px solid rgba(56,189,248,.3);  }
.tag-active   { display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px; font-weight:600; background:rgba(34,197,94,.15); color:var(--ok);   border:1px solid rgba(34,197,94,.3); }
.tag-inactive { display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px; font-weight:600; background:rgba(239,68,68,.1);  color:var(--crit); border:1px solid rgba(239,68,68,.2); }

/* Botões extras */
.btn-ok  { background:var(--ok); color:#000; }
.btn-xs  { padding:3px 10px; font-size:11px; border-radius:6px; }
.badge-count { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:1px 8px; font-size:11px; color:var(--muted); margin-left:6px; font-weight:400; }

/* Feedback de sucesso */
.alert-ok { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); color:var(--ok); border-radius:var(--radius); padding:12px 16px; margin-bottom:16px; font-size:13px; }

/* Utilitários compartilhados */
.text-muted { color:var(--muted); }