@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* =========================================================================
   EGCASP — Tema da marca (carregado DEPOIS do Bootstrap)
   Manual de Identidade Visual EGCASP v1.0
   Regra de ouro: cor é informação, não decoração.
   O dourado #F2B824 é a cor de TODA ação primária e nunca é substituído.
   ========================================================================= */

:root{
  --egc-dourado:#F2B824;
  --egc-dourado-esc:#D9A521;
  --egc-preto:#000000;
  --egc-cinza-esc:#2D2A30;
  --egc-cinza-med:#4D4B4D;
  --egc-cinza-claro:#696569;
  --egc-branco:#FFFFFF;
  --egc-fundo:#F0EFEF;
  --egc-borda:#EAEAEA;
  --egc-vermelho:#7A2E2E;

  /* Sobrescreve os tokens do Bootstrap 5 (prefixo --bs-) */
  --bs-primary:#F2B824;
  --bs-primary-rgb:242,184,36;
  --bs-link-color:#2D2A30;
  --bs-link-color-rgb:45,42,48;
  --bs-link-hover-color:#D9A521;
  --bs-link-hover-color-rgb:217,165,33;
  --bs-body-color:#4D4B4D;
  --bs-body-color-rgb:77,75,77;
  --bs-body-bg:#F0EFEF;
  --bs-body-font-family:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
  --bs-border-radius:4px;
  --bs-border-radius-sm:4px;
  --bs-border-radius-lg:6px;
}

/* ===== Tipografia da marca ===== */
body{
  font-family:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
  background:var(--egc-fundo);
  color:var(--egc-cinza-med);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--egc-cinza-esc);font-weight:700;}

/* ===== Tarja dourada de topo (4px) ===== */
.egc-tarja{height:4px;background:var(--egc-dourado)}

/* ===== Label de seção dourado (utilitário opcional) ===== */
.egc-label-sec{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:2.5px;color:var(--egc-dourado-esc)}

/* ===== Navbar / headers / footers escuros da marca ===== */
.navbar.bg-dark,.navbar-dark{background-color:var(--egc-cinza-esc)!important}
.navbar-brand .egc-brand{font-weight:700;letter-spacing:.5px;color:#fff}
.navbar-brand .egc-brand span{color:var(--egc-dourado)}

/* ===== Links sóbrios ===== */
a{text-decoration:none;color:var(--egc-cinza-esc);font-weight:600}
a:hover{color:var(--egc-dourado-esc)}
/* Não interferir em links que já têm cor própria (navbar, dropdown, botões, abas) */
.navbar a,.dropdown-item,.btn,.nav-link,.page-link,.alert a{font-weight:inherit}

/* ===== Botão primário = ação da marca (dourado) ===== */
.btn-primary,
.btn-success,
.btn-outline-success{
  background:var(--egc-dourado);
  border-color:var(--egc-dourado);
  color:#000;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.btn-success:hover,.btn-success:focus,.btn-success:active,
.btn-outline-success:hover,.btn-outline-success:focus,.btn-outline-success:active{
  background:var(--egc-dourado-esc)!important;
  border-color:var(--egc-dourado-esc)!important;
  color:#000!important;
}
.btn-primary:disabled,.btn-primary.disabled{background:var(--egc-dourado);border-color:var(--egc-dourado);color:#000}

/* ===== Botões secundários / neutros ===== */
.btn-secondary,.btn-outline-secondary,
.btn-outline-primary,
.btn-info,.btn-outline-info,
.btn-warning,.btn-outline-warning,
.btn-light,.btn-outline-light{
  color:var(--egc-cinza-med);
  border-color:#C9C7CB;
  background:transparent;
}
.btn-secondary:hover,.btn-outline-secondary:hover,
.btn-outline-primary:hover,.btn-outline-primary:focus,
.btn-info:hover,.btn-outline-info:hover,
.btn-warning:hover,.btn-outline-warning:hover{
  background:var(--egc-cinza-esc);
  color:#fff;
  border-color:var(--egc-cinza-esc);
}
/* btn-outline-light continua claro sobre fundos escuros (navbar) */
.navbar .btn-outline-light{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.navbar .btn-outline-light:hover{background:#fff;color:var(--egc-cinza-esc);border-color:#fff}
.navbar .btn-light{background:var(--egc-dourado);border-color:var(--egc-dourado);color:#000;font-weight:700}
.navbar .btn-light:hover{background:var(--egc-dourado-esc);border-color:var(--egc-dourado-esc);color:#000}

/* ===== Ação destrutiva discreta, vermelho sóbrio ===== */
.btn-danger,.btn-outline-danger{
  background:transparent;
  color:var(--egc-vermelho);
  border-color:var(--egc-vermelho);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.btn-danger:hover,.btn-danger:focus,.btn-outline-danger:hover,.btn-outline-danger:focus{
  background:var(--egc-vermelho)!important;
  color:#fff!important;
  border-color:var(--egc-vermelho)!important;
}

/* ===== Badges no padrão da marca ===== */
.badge{
  border-radius:2px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:700;
  font-size:.68rem;
  padding:.35em .7em;
}

/* Sistema único de status/prioridade — classes utilitárias da marca.
   Usadas via helper badge_status()/badge_priority() (bg-egc-*) e diretamente (.status--*). */
.badge.bg-egc-aberto,.status--aberto{background:#EAEAEA!important;color:#696569!important}
.badge.bg-egc-andamento,.status--andamento{background:#EDE7D5!important;color:#8A6D12!important}
.badge.bg-egc-validacao,.status--validacao{background:#2D2A30!important;color:#F2B824!important}
.badge.bg-egc-concluido,.status--concluido{background:#2D2A30!important;color:#F2B824!important}
.badge.bg-egc-vencido,.status--vencido{background:#7A2E2E!important;color:#fff!important}

/* Sobrescreve badges genéricos do Bootstrap que ainda apareçam no markup,
   mapeando para tons sóbrios da paleta (sem azul/verde/teal vibrantes). */
.badge.bg-secondary,.badge.text-bg-secondary,.badge.bg-light,.badge.text-bg-light{background-color:#EAEAEA!important;color:#696569!important}
.badge.bg-success,.badge.text-bg-success{background-color:#2D2A30!important;color:#F2B824!important}
.badge.bg-primary,.badge.text-bg-primary,
.badge.bg-info,.badge.text-bg-info,
.badge.bg-warning,.badge.text-bg-warning{background-color:#EDE7D5!important;color:#8A6D12!important}
.badge.bg-danger,.badge.text-bg-danger{background-color:#7A2E2E!important;color:#fff!important}

/* ===== Cards de métrica da marca (Dashboard) ===== */
.egc-metric{
  display:block;
  background:var(--egc-cinza-esc);
  border-radius:var(--bs-border-radius);
  padding:14px 16px;
  position:relative;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  height:100%;
  border:0;
}
.egc-metric::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--egc-dourado)}
.egc-metric .egc-metric-label{font-size:10px;color:#C9C7CB;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.egc-metric .egc-metric-num{font-size:30px;font-weight:700;color:var(--egc-dourado);line-height:1.1}
a.egc-metric:hover{color:inherit}
a.egc-metric:hover .egc-metric-num{color:var(--egc-dourado-esc)}
a.egc-metric{transition:transform .12s ease,box-shadow .12s ease}
a.egc-metric:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.18)}

/* ===== Quadro Kanban — cabeçalho de coluna fixo (sticky) ===== */
.board-column{background:#fff!important;border:1px solid var(--egc-borda)!important}
.board-column-head{
  position:sticky;
  top:0;
  z-index:3;
  background:var(--egc-cinza-esc);
  color:#fff;
  margin:-10px -10px 6px;
  padding:8px 12px;
  border-radius:4px 4px 0 0;
}
.board-column-head + .small{padding-top:2px}

/* Conteúdo do card não pode estourar a largura (290px) da coluna */
.ticket-card{overflow:hidden}
.ticket-card .fw-semibold a{overflow-wrap:anywhere}
/* A linha "Responsável / Prioridade" quebra em vez de empurrar o badge para fora */
.ticket-card .d-flex.justify-content-between{flex-wrap:wrap;gap:4px}
.ticket-card .badge{
  white-space:normal;
  text-align:left;
  max-width:100%;
  overflow-wrap:anywhere;
  letter-spacing:.6px;
}

/* ===== Tabela "Dados de acesso do cliente" responsiva (cards no mobile) ===== */
@media (max-width:768px){
  .egc-access-table thead{display:none}
  .egc-access-table,.egc-access-table tbody,.egc-access-table tr,.egc-access-table td{display:block;width:100%}
  .egc-access-table tr{border:1px solid var(--egc-borda);border-radius:var(--bs-border-radius);margin-bottom:10px;padding:6px 4px;background:#fff}
  .egc-access-table td{border:0;padding:6px 10px}
  .egc-access-table td::before{
    content:attr(data-label);
    display:block;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--egc-cinza-claro);
    font-weight:700;
    margin-bottom:2px;
  }
}

/* ===== Utilitários de texto / cor fora da paleta ===== */
.text-primary,.link-primary{color:var(--egc-cinza-esc)!important}
a.text-primary:hover,a.link-primary:hover{color:var(--egc-dourado-esc)!important}
.text-success,.text-info{color:var(--egc-cinza-med)!important}
.text-danger{color:var(--egc-vermelho)!important}
.dropdown-item.text-danger{color:var(--egc-vermelho)!important}
.dropdown-item.text-danger:hover,.dropdown-item.text-danger:focus{background:var(--egc-vermelho);color:#fff!important}
.dropdown-item:active{background:var(--egc-dourado);color:#000}

/* ===== Abas / outros acentos ===== */
.nav-tabs .nav-link.active{color:var(--egc-cinza-esc);border-bottom-color:transparent;box-shadow:inset 0 -2px 0 var(--egc-dourado)}
.alert-warning{--bs-alert-color:#8A6D12;--bs-alert-bg:#EDE7D5;--bs-alert-border-color:#E0D2A8}
.form-select:focus,.form-control:focus{border-color:var(--egc-dourado);box-shadow:0 0 0 .2rem rgba(242,184,36,.25)}
.table>:not(caption)>*>*{}

/* ===== Portal do cliente (somente leitura) ===== */
.egc-portal-nav .egc-muni{
  background:rgba(242,184,36,.14);
  border:1px solid rgba(242,184,36,.4);
  color:var(--egc-dourado);
  font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:2px;
  text-transform:uppercase;letter-spacing:1px;
}
.egc-portal-nav .egc-ro-tag{
  background:#3a3640;color:#C9C7CB;
  font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;border:1px solid #4a4650;
}
.egc-portal-nav .nav-link:hover{color:#fff!important}

.egc-kv-k{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--egc-cinza-claro);font-weight:700}
.egc-kv-v{color:var(--egc-cinza-esc);font-weight:600}
.egc-desc-box{background:var(--egc-fundo);border-radius:var(--bs-border-radius);padding:14px 16px;color:var(--egc-cinza-med)}

.egc-timeline{border-left:2px solid var(--egc-borda);margin-left:6px;padding-left:18px}
.egc-tl-ev{position:relative;padding:0 0 16px}
.egc-tl-ev::before{content:"";position:absolute;left:-25px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--egc-dourado);border:2px solid #fff;box-shadow:0 0 0 1px var(--egc-dourado)}
.egc-tl-ev:last-child{padding-bottom:0}
.egc-tl-when{font-size:11px;color:var(--egc-cinza-claro)}
.egc-tl-what{font-size:14px;color:var(--egc-cinza-esc);font-weight:600}

.egc-attach{display:flex;align-items:center;gap:10px;border:1px solid var(--egc-borda);border-radius:var(--bs-border-radius);padding:9px 12px;margin-top:8px;color:var(--egc-cinza-esc);text-decoration:none}
.egc-attach:hover{border-color:var(--egc-dourado-esc);color:var(--egc-cinza-esc)}
.egc-attach-ic{color:var(--egc-dourado-esc);font-weight:700}

.egc-conditional{border-left:3px solid var(--egc-dourado);background:#FBF7EA;border-radius:var(--bs-border-radius);padding:14px 16px}

/* ===== Página de erro 404 ===== */
.egc-error{max-width:560px;margin:48px auto;text-align:center}
.egc-error .egc-error-code{font-size:72px;font-weight:700;color:var(--egc-cinza-esc);line-height:1}
.egc-error .egc-error-code span{color:var(--egc-dourado)}
.egc-error h1{font-size:24px;margin:8px 0}
.egc-error p{color:var(--egc-cinza-claro)}