/* ============================================================================
   GTI SMS — Tema corporativo (grafite) — CUSTOM (gtisms)
   Override do tema Vuexy. Carregado por ÚLTIMO em panels/styles.blade.php.
   Recolore o roxo padrão (#7367f0) para grafite/slate, refina cards e fonte.
   NÃO edita nenhuma view — só sobrescreve classes via CSS.
   Para mudar o tom, ajuste as variáveis abaixo.
   ============================================================================ */
:root {
  --gti-primary:        #2c4a7c;             /* navy / azul aço — cor da marca */
  --gti-primary-hover:  #233c66;             /* hover/darker */
  --gti-primary-light:  #3a5d99;             /* fim do gradiente (azul mais claro) */
  --gti-primary-soft:   rgba(44,74,124,.12); /* fundo claro (badges, bg-light) */
  --gti-primary-soft-2: rgba(44,74,124,.20);
  --gti-glow:           rgba(44,74,124,.45); /* sombras/glow */
  --gti-gradient:       linear-gradient(118deg, #3a5d99, #2c4a7c);
}

/* ---------- Tipografia (fonte corporativa moderna; cai p/ Segoe UI no Windows) ---------- */
body,
.main-menu,
h1, h2, h3, h4, h5, h6,
.card-title, .btn, .form-control, .nav, .breadcrumb, label, table {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif !important;
}
body { letter-spacing: -.002em; }

/* ---------- Links e texto primário ---------- */
a { color: var(--gti-primary); }
a:hover { color: var(--gti-primary-hover); }
.text-primary,
.link-primary,
.nav-link,
.btn-link,
.email-application .email-app-menu .list-group .list-group-item.active,
.text-primary * { color: var(--gti-primary) !important; }

/* ---------- Botões ---------- */
.btn-primary {
  background-color: var(--gti-primary) !important;
  border-color: var(--gti-primary) !important;
  color: #fff !important;
}
.btn-primary:hover:not(.disabled):not(:disabled) {
  background-color: var(--gti-primary-hover) !important;
  border-color: var(--gti-primary-hover) !important;
  box-shadow: 0 8px 22px -8px var(--gti-glow) !important;
}
.btn-primary:focus, .btn-primary:active, .btn-primary.active { background-color: var(--gti-primary-hover) !important; border-color: var(--gti-primary-hover) !important; }
.btn-primary.disabled, .btn-primary:disabled { background-color: var(--gti-primary) !important; border-color: var(--gti-primary) !important; }

.btn-outline-primary { color: var(--gti-primary) !important; border-color: var(--gti-primary) !important; }
.btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active,
.btn-outline-primary:not(:disabled):not(.disabled):hover {
  background-color: var(--gti-primary) !important; border-color: var(--gti-primary) !important; color: #fff !important;
}
.btn-outline-primary:not(:disabled):not(.disabled):focus { background-color: var(--gti-primary-soft-2) !important; color: var(--gti-primary) !important; }

.btn-flat-primary { color: var(--gti-primary) !important; }
.btn-flat-primary.active, .btn-flat-primary:active, .btn-flat-primary:focus, .btn-flat-primary:hover { background-color: var(--gti-primary-soft) !important; color: var(--gti-primary) !important; }

.btn-relief-primary { background-color: var(--gti-primary) !important; border-color: var(--gti-primary) !important; color: #fff !important; }

.bg-gradient-primary, .btn-gradient-primary { background-image: linear-gradient(47deg, var(--gti-primary), var(--gti-primary-light)) !important; color: #fff !important; }
.bg-gradient-primary:active, .bg-gradient-primary:focus, .btn-gradient-primary:active, .btn-gradient-primary:focus { background-image: linear-gradient(47deg, var(--gti-primary-hover), var(--gti-primary)) !important; }

/* ---------- Fundos ---------- */
.bg-primary { background-color: var(--gti-primary) !important; }
.bg-light-primary, .avatar.bg-light-primary { background: var(--gti-primary-soft) !important; color: var(--gti-primary) !important; }
.badge.badge-light-primary { background-color: var(--gti-primary-soft) !important; color: var(--gti-primary) !important; }
.badge-primary, .badge.bg-primary { background-color: var(--gti-primary) !important; color: #fff !important; }
.bg-primary.badge-glow, .border-primary.badge-glow { box-shadow: 0 0 10px var(--gti-primary) !important; }

/* ---------- Sidebar (menu-light/dark) — item ativo em navy ----------
   CUSTOM (gtisms): o Vuexy pinta o item ativo em ELEMENTOS DIFERENTES em cada nível:
     • 1º nível  → no <a>  (.navigation > li.active > a)
     • submenu   → no <li> (.navigation > li ul .active)
   ...e o core.css ainda pinta `.navigation > li .active` de CINZA (#f0f0f0). Resultado: o item
   ativo do submenu saía acinzentado e o do topo azulado (visualmente inconsistentes).
   Solução: aplicar o gradiente SEMPRE no <a> nos dois níveis (mesmo elemento => renderização
   idêntica) e ZERAR o fundo/sombra do <li> do submenu, que agora não pinta mais nada. */
.main-menu.menu-light .navigation > li.active > a,
.main-menu.menu-light .navigation > li ul li.active > a,
.main-menu.menu-dark .navigation > li.active > a,
.main-menu.menu-dark .navigation > li ul li.active > a {
  background: var(--gti-gradient) !important;
  box-shadow: 0 4px 14px -2px var(--gti-glow) !important;
  border-radius: 6px !important;
  color: #fff !important;
}

/* O <li> ativo do submenu não pinta fundo algum (core.css põe #f0f0f0 e/ou o gradiente roxo nele). */
.main-menu.menu-light .navigation > li ul .active,
.main-menu.menu-dark .navigation > li ul .active {
  background: transparent !important;
  box-shadow: none !important;
}
/* Texto E ícone do item ativo (top-level e submenu) SEMPRE brancos sobre o gradiente grafite.
   Antes uma regra deixava o texto do submenu ativo grafite = mesma cor do fundo (invisível). */
.main-menu.menu-light .navigation > li.active > a,
.main-menu.menu-light .navigation > li.active > a *,
.main-menu.menu-light .navigation > li ul li.active > a,
.main-menu.menu-light .navigation > li ul li.active > a *,
.main-menu.menu-light .navigation > li .active > a,
.main-menu.menu-light .navigation > li .active > a *,
.main-menu.menu-dark .navigation > li.active > a,
.main-menu.menu-dark .navigation > li ul li.active > a,
.main-menu.menu-dark .navigation > li ul li.active > a * { color: #fff !important; }

/* hover de itens NÃO ativos: texto grafite + fundo suave */
.main-menu.menu-light .navigation > li:not(.active) > a:hover,
.main-menu.menu-light .navigation > li ul li:not(.active) > a:hover { color: var(--gti-primary) !important; }
.main-menu.menu-light .navigation > li:not(.open):not(.active) > a:hover { background: var(--gti-primary-soft) !important; }

/* ---------- Nav tabs / pills ---------- */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--gti-primary) !important; }
.nav-tabs .nav-link:after { background: linear-gradient(30deg, var(--gti-primary), var(--gti-primary-light)) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--gti-primary) !important; color: #fff !important;
  border-color: var(--gti-primary) !important; box-shadow: 0 4px 18px -6px var(--gti-glow) !important;
}

/* ---------- Paginação ---------- */
.page-item.active .page-link, .pagination-primary .page-item.active .page-link { background-color: var(--gti-primary) !important; border-color: var(--gti-primary) !important; color: #fff !important; }
.page-item .page-link:hover, .page-link:hover { color: var(--gti-primary) !important; }
.page-item.prev-item .page-link:active, .page-item.prev-item .page-link:hover,
.page-item.next-item .page-link:active, .page-item.next-item .page-link:hover { background-color: var(--gti-primary) !important; color: #fff !important; }

/* ---------- Formulários ---------- */
.form-control:focus, .custom-select:focus, .select2-container--focus .select2-selection { border-color: var(--gti-primary) !important; }
.form-check-input:checked { background-color: var(--gti-primary) !important; border-color: var(--gti-primary) !important; }
.form-check-input:focus { border-color: var(--gti-primary) !important; box-shadow: 0 2px 4px 0 var(--gti-primary-soft-2) !important; }
.form-check-input[type=checkbox]:indeterminate { background-color: var(--gti-primary) !important; border-color: var(--gti-primary) !important; }
.form-floating > .form-control:focus ~ label { color: var(--gti-primary) !important; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--gti-primary) !important; border-color: var(--gti-primary) !important; }

/* ---------- Dropdown / list-group ativos ---------- */
.dropdown-item.active, .dropdown-item:active { background-color: var(--gti-primary) !important; color: #fff !important; }
.list-group-item.active { background-color: var(--gti-primary) !important; border-color: var(--gti-primary) !important; color: #fff !important; }
.list-group-item-action:active { background-color: var(--gti-primary) !important; color: #fff !important; }

/* ---------- Plugins (select2, flatpickr, switch) ---------- */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted,
.select2-container--classic .select2-results__option--highlighted[aria-selected] { background-color: var(--gti-primary) !important; color: #fff !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--gti-primary-soft) !important; color: var(--gti-primary) !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--gti-primary) !important; border-color: var(--gti-primary) !important; }
.flatpickr-day.today { border-color: var(--gti-primary) !important; }

/* Divider decorativo do "card congratulations" (boas-vindas) */
.card-congratulations { background: linear-gradient(118deg, var(--gti-primary), var(--gti-primary-light)) !important; }

/* ---------- Toque moderno nos cards: sombra mais suave + cantos + borda sutil ---------- */
.card {
  border: 1px solid #e9ebf1 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(34,41,47,.04), 0 10px 26px -16px rgba(34,41,47,.20) !important;
}
.dark-layout .card { border-color: #3b4253 !important; box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 12px 30px -18px rgba(0,0,0,.5) !important; }
.btn { border-radius: 8px; }
.avatar { border-radius: 10px; }
.avatar.rounded-circle, .avatar[class*="round"] { border-radius: 50%; }