/* =====================================================
   IC Manager — InterCenter Networks
   ===================================================== */
:root {
  --ic-primary: #2563eb;
  --ic-primary-dark: #1d4ed8;
  --ic-sidebar: #0b1526;
  --ic-sidebar-2: #0e1c33;
  --ic-bg: #f1f5f9;
  --ic-border: #e2e8f0;
  --ic-text: #0f172a;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--ic-bg);
  color: var(--ic-text);
  font-size: .95rem;
}

/* ---------- Layout geral ---------- */
.app-main { min-height: 100vh; display: flex; flex-direction: column; }

.sidebar {
  width: 264px;
  background: linear-gradient(180deg, var(--ic-sidebar), var(--ic-sidebar-2));
  color: #cbd5e1;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.35) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(148,163,184,.3); border-radius: 3px; }
.sidebar .nav.flex-column { flex: 0 0 auto; }
@media (min-width: 992px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1035; }
  .app-main { margin-left: 264px; }
}

.sidebar .brand {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
.brand-mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: .95rem; letter-spacing: -.02em;
  box-shadow: 0 4px 14px rgba(37,99,235,.45);
}
.sidebar .brand { justify-content: center; }
.brand-text { text-align: right; }
.brand-sep {
  width: 2px; height: 28px; flex: 0 0 2px;
  border-radius: 1px;
  background: rgba(255,255,255,.45);
}
.brand-logo {
  height: 34px; width: auto; max-width: 132px;
  object-fit: contain; flex: 0 0 auto;
}
.login-logo {
  height: 88px; width: auto; max-width: 420px;
  object-fit: contain; margin-inline: auto;
}
.brand-title { color: #fff; font-weight: 700; line-height: 1.1; }
.brand-sub { font-size: .72rem; color: #64748b; }

.sidebar .nav-link {
  color: #94a3b8;
  border-radius: .6rem;
  margin: .12rem .8rem;
  padding: .6rem .9rem;
  display: flex; align-items: center; gap: .7rem;
  font-size: .925rem;
}
.sidebar .nav-link i { font-size: 1.05rem; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar .nav-link.active { color: #fff; background: var(--ic-primary); }
.sidebar .nav-link .badge { margin-left: auto; }

/* Anexos de chamados */
.anexos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.anexos-thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .65rem; }
.anexo-thumb {
  display: flex; flex-direction: column; text-decoration: none;
  max-width: 280px; border-radius: .6rem; overflow: hidden;
  border: 1px solid #e2e8f0; background: #f8fafc;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Monitoramento — timeline de checagens */
.mdot {
  width: 10px; height: 24px; border-radius: 3px;
  display: inline-block; margin-right: 3px;
}
.mdot-ok   { background: #22c55e; }
.mdot-fail { background: #ef4444; }

.anexo-thumb:hover { border-color: var(--ic-primary); box-shadow: 0 4px 14px rgba(37,99,235,.18); }
.anexo-thumb img {
  display: block; width: 100%; max-height: 210px; object-fit: cover;
  cursor: zoom-in; background: #f1f5f9;
}
.anexo-thumb-cap {
  font-size: .72rem; color: #64748b; padding: .3rem .5rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anexos-thumbs.multi .anexo-thumb { max-width: 168px; }
.anexos-thumbs.multi .anexo-thumb img { max-height: 126px; }
.anexos-thumbs.multi .anexo-thumb-cap { font-size: .66rem; }

/* miniatura de vídeo (mesma caixa das imagens; player só no lightbox) */
.anexo-video-frame { position: relative; display: block; width: 100%; background: #000; border-radius: .45rem; overflow: hidden; }
.anexo-video-frame video {
  width: 100%; max-height: 210px; object-fit: cover; display: block; pointer-events: none;
}
.anexos-thumbs.multi .anexo-video-frame video { max-height: 126px; }
.anexo-video-frame .bi-play-circle-fill {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 2.4rem; line-height: 1; color: #fff; opacity: .92;
  text-shadow: 0 2px 10px rgba(0,0,0,.65); transition: transform .15s ease;
}
.anexo-thumb:hover .anexo-video-frame .bi-play-circle-fill { transform: translate(-50%, -50%) scale(1.18); }

/* lightbox de anexos */
.ic-lb-dialog { max-width: min(1100px, 94vw); }
.ic-lb { background: rgba(15, 23, 42, .97); color: #e2e8f0; border: 1px solid rgba(255,255,255,.08); }
.ic-lb .modal-header { padding: .6rem 1rem; }
.ic-lb-body { display: flex; justify-content: center; align-items: center; padding: .4rem 1rem 1rem; }
.ic-lb-img { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: .4rem; }
.ic-lb-video { width: 100%; max-height: 76vh; background: #000; border-radius: .4rem; }

.anexo-thumb:hover .anexo-thumb-cap { color: var(--ic-primary); }
.anexo-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: .5rem;
  padding: .3rem .6rem; font-size: .8rem; color: #334155;
  text-decoration: none; max-width: 100%; transition: all .15s ease;
}
.anexo-chip:hover { border-color: var(--ic-primary); color: var(--ic-primary); background: #eff6ff; }
.anexo-chip .bi { font-size: 1rem; color: var(--ic-primary); }
.anexo-nome {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anexo-tam { color: #94a3b8; white-space: nowrap; }

/* Submenu (Empresas → Contatos) */
.nav-group .seta { font-size: .8rem; transition: transform .2s ease; margin-left: auto; }
.nav-group.aberto .seta { transform: rotate(180deg); }
.nav-group .nav-sub {
  padding-left: 2.15rem;
  font-size: .875rem;
  margin: .05rem .8rem;
}
.nav-group .nav-sub.active { color: #fff; background: var(--ic-primary); }
.nav-group-toggle.active-pai { color: #e2e8f0; background: rgba(255,255,255,.04); }
.sidebar .sec-title {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: #475569; padding: 1.1rem 1rem .35rem;
}
.sidebar-foot {
  padding: .9rem 1.25rem; font-size: .75rem; color: #475569;
  border-top: 1px solid rgba(148,163,184,.12);
}

/* ---------- Topbar ---------- */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--ic-border);
  padding: .6rem 1.4rem;
  display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 1020;
}
.topbar .page-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.user-btn {
  display: flex; align-items: center; gap: .6rem;
  background: none; border: 0; padding: .25rem .5rem; border-radius: .6rem;
}
.user-btn:hover { background: var(--ic-bg); }
.user-btn .nome { line-height: 1.1; text-align: left; }
.user-btn .nome strong { font-size: .875rem; display: block; }
.user-btn .nome small { color: #64748b; font-size: .72rem; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: .8rem; flex: 0 0 36px;
  object-fit: cover;
}

/* ---------- Conteúdo ---------- */
.content { padding: 1.5rem 1.4rem; flex: 1; }
.app-foot {
  padding: .8rem 1.4rem; font-size: .78rem; color: #64748b;
}

/* ---------- Cards ---------- */
.card { border: 1px solid var(--ic-border); border-radius: .85rem; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.card-header {
  background: #fff; border-bottom: 1px solid var(--ic-border);
  font-weight: 600; border-radius: .85rem .85rem 0 0 !important;
  display: flex; align-items: center; gap: .5rem;
}
.stat-card { display: flex; flex-direction: row; align-items: center; gap: .6rem; padding: .5rem .8rem; height: 100%; color: inherit; text-decoration: none; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.stat-card > div:not(.stat-icon) { display: flex; align-items: baseline; gap: .4rem; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; }
.stat-card > div:not(.stat-icon) > .small { flex-basis: 100%; }
.stat-card .valor { font-size: 1.15rem; font-weight: 800; line-height: 1.05; }
.stat-card .rotulo { color: #64748b; font-size: .72rem; line-height: 1.2; }
a.stat-card:hover { border-color: var(--ic-primary); box-shadow: 0 10px 26px rgba(15,23,42,.16); transform: translateY(-3px); color: inherit; text-decoration: none; }
.stat-icon {
  width: 36px; height: 36px; border-radius: .7rem;
  display: grid; place-items: center; font-size: 1rem; flex: 0 0 36px;
  order: 2; margin-left: auto;
  color: #fff; transition: transform .18s ease;
  box-shadow: inset 0 -10px 16px rgba(0,0,0,.14), 0 3px 8px rgba(15,23,42,.14);
}
a.stat-card:hover .stat-icon { transform: scale(1.1) rotate(-4deg); }

/* Card "Na fila" — pisca quando há cliente esperando */
@keyframes ic-card-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,0); }
  50%      { box-shadow: 0 0 0 6px var(--pulsa-cor, rgba(217,119,6,.25)), 0 6px 20px var(--pulsa-glow, rgba(245,158,11,.35)); border-color: var(--pulsa-borda, #f59e0b); }
}
.stat-card-alerta { animation: ic-card-pulsa 1.5s ease-in-out infinite; }
.stat-card-alerta .valor { color: #b45309; }
/* Variante azul — chamados abertos */
.stat-card-alerta-azul { --pulsa-cor: rgba(37,99,235,.22); --pulsa-glow: rgba(59,130,246,.38); --pulsa-borda: #2563eb; animation: ic-card-pulsa 1.5s ease-in-out infinite; }
.stat-card-alerta-azul .valor { color: #1d4ed8; }
@media (prefers-reduced-motion: reduce) {
  .stat-card-alerta, .stat-card-alerta-azul { animation: none; }
  .stat-card-alerta { border-color: #f59e0b; box-shadow: 0 0 0 4px rgba(217,119,6,.2); }
  .stat-card-alerta-azul { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.2); }
}
.si-blue   { background: linear-gradient(135deg, #60a5fa, #1d4ed8); }
.si-indigo { background: linear-gradient(135deg, #818cf8, #4f46e5); }
.si-amber  { background: linear-gradient(135deg, #fbbf24, #d97706); }
.si-green  { background: linear-gradient(135deg, #34d399, #059669); }
.si-red    { background: linear-gradient(135deg, #f87171, #dc2626); }
.si-cyan   { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.si-purple { background: linear-gradient(135deg, #c084fc, #7c3aed); }
.si-teal   { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.si-gray   { background: linear-gradient(135deg, #94a3b8, #475569); }

/* ---------- Badges suaves ---------- */
.badge { font-weight: 600; padding: .42em .7em; border-radius: .5rem; }
.badge-soft-primary { background: rgba(37,99,235,.12);  color: #1d4ed8; }
.badge-soft-indigo  { background: rgba(99,102,241,.13); color: #4338ca; }
.badge-soft-warning { background: rgba(245,158,11,.16); color: #b45309; }
.badge-soft-success { background: rgba(16,185,129,.14); color: #047857; }
.badge-soft-danger  { background: rgba(239,68,68,.13);  color: #b91c1c; }
.badge-soft-info    { background: rgba(14,165,233,.14); color: #0369a1; }
.badge-soft-secondary { background: rgba(100,116,139,.15); color: #475569; }

/* ---------- Tabelas ---------- */
.table { --bs-table-hover-bg: #f8fafc; }
.table thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: #64748b; font-weight: 600; border-bottom: 1px solid var(--ic-border);
}
.table td { vertical-align: middle; }

/* ---------- Formulários ---------- */
.form-label { font-weight: 600; font-size: .85rem; color: #334155; }
.form-control, .form-select { border-radius: .6rem; }
.form-control:focus, .form-select:focus { border-color: #93c5fd; box-shadow: 0 0 0 .2rem rgba(37,99,235,.12); }
.required::after { content: ' *'; color: #dc2626; }

/* ---------- Botões ---------- */
.btn { border-radius: .6rem; font-weight: 600; }
.btn-primary { background: var(--ic-primary); border-color: var(--ic-primary); }
.btn-primary:hover { background: var(--ic-primary-dark); border-color: var(--ic-primary-dark); }
.btn-outline-secondary:hover { color: #334155; }

/* ---------- Timeline do chamado ---------- */
.msg {
  border: 1px solid var(--ic-border); border-radius: .85rem;
  background: #fff; padding: 1rem 1.15rem;
}
.msg + .msg { margin-top: .9rem; }
.msg-interna { background: #fffbeb; border-color: #fde68a; }
.msg-cab { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .55rem; }
.msg-cab .autor { font-weight: 700; font-size: .9rem; }
.msg-cab .quando { color: #94a3b8; font-size: .78rem; margin-left: auto; }
.msg-corpo { white-space: pre-wrap; word-wrap: break-word; }

/* ---------- Filtros ---------- */
.filtro-bar { background: #fff; border: 1px solid var(--ic-border); border-radius: .85rem; padding: 1rem; }

/* ---------- Login ---------- */
.login-page {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(1100px 550px at 15% -10%, rgba(37,99,235,.38), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(56,189,248,.22), transparent 55%),
    #0b1526;
  color: #e2e8f0;
}
.login-card {
  width: 100%; max-width: 430px;
  background: rgba(13,23,41,.88);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 1.1rem; padding: 2.25rem 2rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.login-card .form-control, .login-card .form-select {
  background: #0b1526; border: 1px solid rgba(148,163,184,.28); color: #e2e8f0;
}
.login-card .form-control::placeholder { color: #475569; }
.login-card .form-control:focus {
  background: #0b1526; color: #fff; border-color: #2563eb;
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.28);
}
.login-card label { color: #94a3b8; font-size: .82rem; font-weight: 600; }
.login-rodape { color: #475569; font-size: .78rem; }

/* ---------- Diversos ---------- */
.page-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.page-head h1 { font-size: 1.3rem; font-weight: 800; margin: 0; }
.page-head .acoes { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.dl-meta { margin: 0; }
.dl-meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 600; }
.dl-meta dd { margin-bottom: .7rem; }
a { text-decoration: none; }

/* ===== Base de Conhecimento (leitura do artigo) ===== */
.kb-conteudo img { max-width: 100%; height: auto; border-radius: 6px; }
.kb-conteudo table { border-collapse: collapse; }
.kb-conteudo table td, .kb-conteudo table th { border: 1px solid #dee2e6; padding: 6px 10px; }
.kb-conteudo h1, .kb-conteudo h2, .kb-conteudo h3 { margin-top: 1.2em; margin-bottom: .5em; }
.kb-conteudo ul, .kb-conteudo ol { padding-left: 1.5rem; }
.kb-conteudo a { word-break: break-word; }
.kb-conteudo pre { background: #f5f6f8; border: 1px solid #e2e5ea; border-radius: 6px; padding: .75rem 1rem; overflow-x: auto; }

/* Linha clicável (tabelas de chamados do dashboard) */
.tr-click { cursor: pointer; }
.tr-click:hover td { background: #f1f5f9; }

/* Atendimento: minhas conversas em destaque, de outros técnicos em tom neutro */
.conv-minha { border-left: 3px solid #2563eb; background: #eff6ff; }
.conv-minha:hover { background: #dbeafe; }
.conv-outro { opacity: .82; border-left: 3px solid #cbd5e1; }
.conv-outro:hover { opacity: 1; }
.list-group-item.active.conv-minha { background: #2563eb; border-color: #2563eb; }

/* Atendimento em andamento (minhas): pulso sutil de atividade */
@keyframes conv-pulsa {
  0%, 100% { box-shadow: inset 3px 0 0 #2563eb; background: #eff6ff; }
  50%      { box-shadow: inset 4px 0 0 #3b82f6, -8px 0 18px rgba(37,99,235,.35); background: #dbeafe; }
}
.conv-minha:not(.active) { animation: conv-pulsa 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .conv-minha { animation: none; } }

/* Indicador "ao vivo" nos meus atendimentos — visível mesmo selecionado */
.pulse-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2563eb; margin: 0 4px 0 2px; vertical-align: middle; animation: dot-pulsa 1.3s ease-in-out infinite; }
@keyframes dot-pulsa {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(37,99,235,.55); }
  50%      { transform: scale(1.4);  box-shadow: 0 0 0 7px rgba(37,99,235,0); }
}
.list-group-item.active .pulse-dot { background: #fff; animation-name: dot-pulsa-branca; }
@keyframes dot-pulsa-branca {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,255,255,.85); }
  50%      { transform: scale(1.4);  box-shadow: 0 0 0 7px rgba(255,255,255,0); }
}