/* ==========================================================================
   SAFETY - Painel unificado (menu lateral)
   Usado por admin, técnico e cliente. Cada área inclui seu próprio sidebar
   (admin_sidebar.php, etc.) e define $ACTIVE para marcar o item ativo.
   ========================================================================== */

:root{
  --pnl-blue:#0b3b66;
  --pnl-blue2:#0e548f;
  --pnl-line:#dfe7ef;
  --pnl-bg:#eef3f8;
  --pnl-side-w:232px;
}

/* ---------- Sidebar ---------- */
.panel-side{
  position:fixed;
  top:0; left:0;
  width:var(--pnl-side-w);
  height:100vh;
  background:var(--pnl-blue);
  color:#eaf2fb;
  display:flex;
  flex-direction:column;
  z-index:1000;
  overflow-y:auto;
}
.panel-side .side-logo{
  background:#fff;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.panel-side .side-logo img{ max-height:40px; display:block; }

.panel-side nav{ padding:12px 10px; flex:1; }
.panel-side .side-link{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 13px;
  border-radius:10px;
  color:#cddcee;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  margin-bottom:3px;
  transition:background .15s, color .15s;
}
.panel-side .side-link .ic{ font-size:17px; width:22px; text-align:center; flex:0 0 auto; }
.panel-side .side-link:hover{ background:rgba(255,255,255,.09); color:#fff; }
.panel-side .side-link.active{ background:#fff; color:var(--pnl-blue); }
.panel-side .side-badge{
  margin-left:auto;
  background:#e5484d;
  color:#fff;
  border-radius:999px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  font-size:11px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 3px rgba(229,72,77,.30);
}

.panel-side .side-foot{
  padding:10px;
  border-top:1px solid rgba(255,255,255,.12);
}
.panel-side .side-foot a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 13px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
}
.panel-side .side-foot .ic{ font-size:16px; width:22px; text-align:center; }
.panel-side .side-voltar{ color:#cddcee; }
.panel-side .side-voltar:hover{ background:rgba(255,255,255,.09); }
.panel-side .side-sair{ color:#ffd7d2; }
.panel-side .side-sair:hover{ background:rgba(217,83,79,.28); color:#fff; }

/* ---------- Área de conteúdo ---------- */
.panel-content{
  margin-left:var(--pnl-side-w);
  min-height:100vh;
}

.panel-topbar{
  position:sticky;
  top:0;
  z-index:500;
  background:#fff;
  border-bottom:1px solid var(--pnl-line);
  display:flex;
  align-items:center;
  gap:14px;
  padding:9px 20px;
  flex-wrap:wrap;
}
.panel-topbar h1{
  font-size:20px;
  color:var(--pnl-blue);
  margin:0;
  white-space:nowrap;
}
.panel-burger{
  display:none;
  background:var(--pnl-blue);
  color:#fff;
  border:0;
  border-radius:9px;
  width:44px;
  height:40px;
  font-size:20px;
  cursor:pointer;
}
.panel-topbar .pnl-back{
  margin-left:auto;
  background:#eef4fb;
  color:var(--pnl-blue);
  border:1px solid #cfdbe8;
  border-radius:9px;
  padding:8px 13px;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
}
.panel-topbar .pnl-back:hover{ background:#e2ecf7; }

/* ---------- Backdrop mobile ---------- */
.panel-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.42);
  z-index:900;
}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .panel-side{
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:0 0 46px rgba(0,0,0,.4);
  }
  body.side-open .panel-side{ transform:none; }
  body.side-open .panel-backdrop{ display:block; }
  .panel-content{ margin-left:0; }
  .panel-burger{ display:inline-flex; align-items:center; justify-content:center; }
}

/* Impressão: esconde o menu/topo (ex.: cliente imprimindo um chamado) */
@media print{
  .panel-side, .panel-topbar, .panel-backdrop{ display:none !important; }
  .panel-content{ margin-left:0 !important; }
}

/* ==========================
   Componentes compartilhados
   ========================== */

/* Grid responsivo para atalhos/opções */
.opc-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}
@media(max-width:1250px){ .opc-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .opc-grid{ grid-template-columns:repeat(2,1fr); } }

.opc-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid var(--pnl-line);
  border-radius:14px;
  background:#fff;
  color:#0b3b66;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 1px 2px rgba(11,40,70,.05), 0 6px 22px rgba(11,40,70,.06);
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.opc-card:hover{
  transform:translateY(-2px);
  border-color:#cbd7e6;
  box-shadow:0 10px 22px rgba(9,30,66,.12);
}
.opc-card .ic{
  width:38px; height:38px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; font-size:18px;
  background:#eef4fb; color:#0b3b66;
}
.opc-card small{ font-weight:700; color:#6a7f96; display:block; margin-top:2px; font-size:11px }

/* Variações (cores) para as opções */
.opc-primary .ic{ background:#e7f0ff; color:#0e548f }
.opc-warn    .ic{ background:#fff4e6; color:#a5610a }
.opc-good    .ic{ background:#e9f7ef; color:#1f9d47 }
.opc-crit    .ic{ background:#ffe9ea; color:#c0392b }

/* Lista de eventos/feed */
.feed{ list-style:none; margin:0; padding:0 }
.feed li{ display:flex; gap:10px; padding:10px 6px; border-bottom:1px solid #e6edf5; align-items:flex-start }
.feed li:last-child{ border-bottom:0 }
.feed time{ color:#6a7f96; font-size:12px; white-space:nowrap }
.feed .evt{
  flex:1; min-width:0; color:#0e1c2b; font-size:13.5px
}
.feed .evt b{ color:#0b3b66 }
.feed .city{ color:#6a7f96; font-size:12px }
.feed .pill{
  padding:2px 8px; border-radius:999px; font-size:11px; font-weight:900; white-space:nowrap
}
.pill-blue{ background:#e7f0ff; color:#0e548f }
.pill-green{ background:#e9f7ef; color:#1f9d47 }
.pill-amber{ background:#fff4e6; color:#a5610a }
.pill-gray{ background:#eef3f8; color:#385066 }