/* ==========================================================================
   GameTech OS — Tema padrão (fonte única de cores e tipografia)
   Carregado por TODAS as telas: internas (via includes/header.php) e
   públicas (portal, cadastro, assinatura, admin). Ajuste aqui, vale em tudo.
   ========================================================================== */

:root {
  /* Marca */
  --c-primary:    #1a3a5c;   /* azul-marinho: menu lateral, títulos */
  --c-primary-l:  #2563a8;   /* azul de ação: botões, links */
  --c-primary-d:  #1e4f8a;   /* hover */
  --c-accent:     #3b82f6;   /* destaques, foco */

  /* Semânticas */
  --c-success:    #16a34a;
  --c-warning:    #d97706;   /* texto/ícones */
  --c-warning-bg: #f59e0b;   /* fundos (badge/botão) — usar com texto escuro */
  --c-danger:     #dc2626;
  --c-info:       #0ea5e9;
  --c-purple:     #7c3aed;
  --c-orange:     #ea580c;

  /* Versões suaves (fundos de cartões/etiquetas) */
  --c-primary-soft: #eff6ff;
  --c-success-soft: #f0fdf4;
  --c-warning-soft: #fffbeb;
  --c-danger-soft:  #fef2f2;
  --c-info-soft:    #f0f9ff;
  --c-purple-soft:  #f5f3ff;
  --c-orange-soft:  #fff7ed;

  /* Neutros (com leve tom azulado, combinam com a marca) */
  --c-text:       #1e293b;
  --c-text-2:     #475569;
  --c-muted:      #64748b;
  --c-subtle:     #94a3b8;
  --c-border:     #e2e8f0;
  --c-border-2:   #cbd5e1;
  --c-surface:    #ffffff;
  --c-surface-2:  #f8fafc;
  --c-bg:         #f1f5f9;

  /* Tipografia — Inter em tudo */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs:   .72rem;   /* rótulos, legendas */
  --fs-sm:   .8rem;    /* texto secundário */
  --fs-base: .875rem;  /* texto padrão */
  --fs-lg:   1rem;     /* título de seção */
  --fs-xl:   1.25rem;  /* título de página */
  --fs-kpi:  1.55rem;  /* números de destaque */

  --radius:  .5rem;
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);

  /* Ponte para o Bootstrap: tudo que usa var(--bs-*) segue a paleta */
  --bs-font-sans-serif: var(--font);
  --bs-body-font-family: var(--font);
  --bs-body-font-size: var(--fs-base);
  --bs-body-color: var(--c-text);
  --bs-body-bg: var(--c-bg);
  --bs-border-color: var(--c-border);
  --bs-secondary-color: var(--c-muted);
  --bs-link-color: var(--c-primary-l);
  --bs-link-hover-color: var(--c-primary-d);
  --bs-link-color-rgb: 37,99,168;
  --bs-primary: #2563a8;  --bs-primary-rgb: 37,99,168;
  --bs-success: #16a34a;  --bs-success-rgb: 22,163,74;
  --bs-danger:  #dc2626;  --bs-danger-rgb: 220,38,38;
  --bs-warning: #f59e0b;  --bs-warning-rgb: 245,158,11;
  --bs-info:    #0ea5e9;  --bs-info-rgb: 14,165,233;
  --bs-secondary: #64748b; --bs-secondary-rgb: 100,116,139;
}

body { font-family: var(--font); font-size: var(--fs-base); color: var(--c-text); background: var(--c-bg); }

/* ---- Títulos ---- */
h1,h2,h3,h4,h5,h6 { color: var(--c-text); font-weight: 600; letter-spacing: -.005em; }
h1 { font-size: 1.5rem; } h2 { font-size: var(--fs-xl); } h3 { font-size: 1.1rem; }
h4 { font-size: var(--fs-xl); } h5 { font-size: var(--fs-lg); } h6 { font-size: var(--fs-base); }
.text-muted { color: var(--c-muted) !important; }
a { color: var(--c-primary-l); }
a:hover { color: var(--c-primary-d); }

/* ---- Cores utilitárias do Bootstrap alinhadas à paleta ---- */
.text-primary { color: var(--c-primary-l) !important; }
.text-success { color: var(--c-success) !important; }
.text-danger  { color: var(--c-danger) !important; }
.text-warning { color: var(--c-warning) !important; }
.text-info    { color: var(--c-info) !important; }
.text-purple  { color: var(--c-purple) !important; }
.bg-primary   { background-color: var(--c-primary-l) !important; }
.bg-success   { background-color: var(--c-success) !important; }
.bg-danger    { background-color: var(--c-danger) !important; }
.bg-warning   { background-color: var(--c-warning-bg) !important; }
.bg-info      { background-color: var(--c-info) !important; }
.bg-secondary { background-color: var(--c-muted) !important; }
.bg-purple    { background-color: var(--c-purple) !important; }
.bg-orange    { background-color: var(--c-orange) !important; }
.bg-warning, .bg-info { color: #0f172a; }               /* texto escuro sobre âmbar/azul-claro */
.badge.bg-warning, .badge.bg-info { color: #0f172a !important; }

/* ---- Botões ---- */
.btn { font-size: var(--fs-base); font-weight: 500; border-radius: var(--radius); }
.btn-sm { font-size: var(--fs-sm); }
.btn-primary   { --bs-btn-bg:#2563a8; --bs-btn-border-color:#2563a8; --bs-btn-hover-bg:#1e4f8a; --bs-btn-hover-border-color:#1e4f8a; --bs-btn-active-bg:#1a3a5c; --bs-btn-active-border-color:#1a3a5c; --bs-btn-disabled-bg:#2563a8; --bs-btn-disabled-border-color:#2563a8; --bs-btn-focus-shadow-rgb:37,99,168; }
.btn-success   { --bs-btn-bg:#16a34a; --bs-btn-border-color:#16a34a; --bs-btn-hover-bg:#15803d; --bs-btn-hover-border-color:#15803d; --bs-btn-active-bg:#166534; --bs-btn-active-border-color:#166534; --bs-btn-disabled-bg:#16a34a; --bs-btn-disabled-border-color:#16a34a; --bs-btn-focus-shadow-rgb:22,163,74; }
.btn-danger    { --bs-btn-bg:#dc2626; --bs-btn-border-color:#dc2626; --bs-btn-hover-bg:#b91c1c; --bs-btn-hover-border-color:#b91c1c; --bs-btn-active-bg:#991b1b; --bs-btn-active-border-color:#991b1b; --bs-btn-disabled-bg:#dc2626; --bs-btn-disabled-border-color:#dc2626; --bs-btn-focus-shadow-rgb:220,38,38; }
.btn-warning   { --bs-btn-color:#0f172a; --bs-btn-bg:#f59e0b; --bs-btn-border-color:#f59e0b; --bs-btn-hover-color:#0f172a; --bs-btn-hover-bg:#d97706; --bs-btn-hover-border-color:#d97706; --bs-btn-active-color:#0f172a; --bs-btn-active-bg:#b45309; --bs-btn-active-border-color:#b45309; --bs-btn-disabled-color:#0f172a; --bs-btn-disabled-bg:#f59e0b; --bs-btn-disabled-border-color:#f59e0b; --bs-btn-focus-shadow-rgb:245,158,11; }
.btn-info      { --bs-btn-color:#0f172a; --bs-btn-bg:#0ea5e9; --bs-btn-border-color:#0ea5e9; --bs-btn-hover-color:#0f172a; --bs-btn-hover-bg:#0284c7; --bs-btn-hover-border-color:#0284c7; --bs-btn-active-color:#0f172a; --bs-btn-active-bg:#0369a1; --bs-btn-active-border-color:#0369a1; --bs-btn-disabled-color:#0f172a; --bs-btn-disabled-bg:#0ea5e9; --bs-btn-disabled-border-color:#0ea5e9; --bs-btn-focus-shadow-rgb:14,165,233; }
.btn-secondary { --bs-btn-bg:#64748b; --bs-btn-border-color:#64748b; --bs-btn-hover-bg:#475569; --bs-btn-hover-border-color:#475569; --bs-btn-active-bg:#334155; --bs-btn-active-border-color:#334155; --bs-btn-disabled-bg:#64748b; --bs-btn-disabled-border-color:#64748b; --bs-btn-focus-shadow-rgb:100,116,139; }
.btn-outline-primary   { --bs-btn-color:#2563a8; --bs-btn-border-color:#2563a8; --bs-btn-hover-bg:#2563a8; --bs-btn-hover-border-color:#2563a8; --bs-btn-active-bg:#1e4f8a; --bs-btn-active-border-color:#1e4f8a; --bs-btn-disabled-color:#2563a8; --bs-btn-disabled-border-color:#2563a8; --bs-btn-focus-shadow-rgb:37,99,168; }
.btn-outline-success   { --bs-btn-color:#16a34a; --bs-btn-border-color:#16a34a; --bs-btn-hover-bg:#16a34a; --bs-btn-hover-border-color:#16a34a; --bs-btn-active-bg:#15803d; --bs-btn-active-border-color:#15803d; --bs-btn-disabled-color:#16a34a; --bs-btn-disabled-border-color:#16a34a; --bs-btn-focus-shadow-rgb:22,163,74; }
.btn-outline-danger    { --bs-btn-color:#dc2626; --bs-btn-border-color:#dc2626; --bs-btn-hover-bg:#dc2626; --bs-btn-hover-border-color:#dc2626; --bs-btn-active-bg:#b91c1c; --bs-btn-active-border-color:#b91c1c; --bs-btn-disabled-color:#dc2626; --bs-btn-disabled-border-color:#dc2626; --bs-btn-focus-shadow-rgb:220,38,38; }
.btn-outline-warning   { --bs-btn-color:#b45309; --bs-btn-border-color:#f59e0b; --bs-btn-hover-color:#0f172a; --bs-btn-hover-bg:#f59e0b; --bs-btn-hover-border-color:#f59e0b; --bs-btn-active-color:#0f172a; --bs-btn-active-bg:#d97706; --bs-btn-active-border-color:#d97706; --bs-btn-disabled-color:#b45309; --bs-btn-disabled-border-color:#f59e0b; --bs-btn-focus-shadow-rgb:245,158,11; }
.btn-outline-info      { --bs-btn-color:#0369a1; --bs-btn-border-color:#0ea5e9; --bs-btn-hover-color:#0f172a; --bs-btn-hover-bg:#0ea5e9; --bs-btn-hover-border-color:#0ea5e9; --bs-btn-active-color:#0f172a; --bs-btn-active-bg:#0284c7; --bs-btn-active-border-color:#0284c7; --bs-btn-disabled-color:#0369a1; --bs-btn-disabled-border-color:#0ea5e9; --bs-btn-focus-shadow-rgb:14,165,233; }
.btn-outline-secondary { --bs-btn-color:#475569; --bs-btn-border-color:#cbd5e1; --bs-btn-hover-color:#1e293b; --bs-btn-hover-bg:#f1f5f9; --bs-btn-hover-border-color:#94a3b8; --bs-btn-active-color:#1e293b; --bs-btn-active-bg:#e2e8f0; --bs-btn-active-border-color:#94a3b8; --bs-btn-disabled-color:#94a3b8; --bs-btn-disabled-border-color:#e2e8f0; --bs-btn-focus-shadow-rgb:100,116,139; }

/* ---- Alertas ---- */
.alert { font-size: var(--fs-base); border-radius: var(--radius); }
.alert-success { --bs-alert-color:#166534; --bs-alert-bg:var(--c-success-soft); --bs-alert-border-color:#bbf7d0; }
.alert-danger  { --bs-alert-color:#991b1b; --bs-alert-bg:var(--c-danger-soft);  --bs-alert-border-color:#fecaca; }
.alert-warning { --bs-alert-color:#92400e; --bs-alert-bg:var(--c-warning-soft); --bs-alert-border-color:#fde68a; }
.alert-info    { --bs-alert-color:#0c4a6e; --bs-alert-bg:var(--c-info-soft);    --bs-alert-border-color:#bae6fd; }

/* ---- Abas / pílulas / paginação / modais ---- */
.nav-pills { --bs-nav-pills-link-active-bg: var(--c-primary); }
.nav-pills .nav-link { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-2); }
.nav-pills .nav-link:not(.active):hover { background: var(--c-border); color: var(--c-primary); }
.page-link { color: var(--c-primary-l); font-size: var(--fs-sm); }
.page-item.active .page-link { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.modal-title { font-size: var(--fs-lg); font-weight: 600; }
.modal-content { border: 1px solid var(--c-border); border-radius: .75rem; }
.dropdown-menu { font-size: var(--fs-sm); border-color: var(--c-border); box-shadow: var(--shadow-md); }
.progress { background: var(--c-border); }
.progress-bar { background-color: var(--c-primary-l); }

/* ==========================================================================
   Componentes reutilizáveis (usar nas telas novas e ao ajustar as antigas)
   ========================================================================== */

/* Cabeçalho da página: título/subtítulo à esquerda, ações à direita */
.page-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:1rem; }
.page-head h4, .page-head .page-head-title { font-size: var(--fs-xl); font-weight: 700; color: var(--c-primary); margin: 0; }
.page-head .sub, .page-head .page-head-sub { color: var(--c-muted); font-size: var(--fs-sm); }

/* Cartão de indicador (KPI) */
.kpi { background:var(--c-surface); border:1px solid var(--c-border); border-radius:.6rem; padding:1rem 1.1rem; box-shadow:var(--shadow); height:100%; display:flex; gap:.9rem; align-items:flex-start; text-decoration:none; color:inherit; transition:box-shadow .15s, transform .15s; }
a.kpi:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); color:inherit; }
.kpi-ico { width:42px; height:42px; border-radius:.6rem; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.kpi-label { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--c-muted); font-weight:600; }
.kpi-value { white-space:nowrap; font-size:var(--fs-kpi); font-weight:700; line-height:1.15; color:#0f172a; font-variant-numeric:tabular-nums; }
.kpi-sub { font-size:var(--fs-xs); color:var(--c-muted); margin-top:.15rem; }
.kpi-sub .up { color:var(--c-success); font-weight:600; } .kpi-sub .down { color:var(--c-danger); font-weight:600; }
.tone-primary { background:var(--c-primary-soft); color:var(--c-primary-l); }
.tone-success { background:var(--c-success-soft); color:var(--c-success); }
.tone-warning { background:var(--c-warning-soft); color:var(--c-warning); }
.tone-danger  { background:var(--c-danger-soft);  color:var(--c-danger); }
.tone-info    { background:var(--c-info-soft);    color:var(--c-info); }
.tone-purple  { background:var(--c-purple-soft);  color:var(--c-purple); }
.tone-orange  { background:var(--c-orange-soft);  color:var(--c-orange); }

/* Etiquetas de alerta clicáveis e atalhos de filtro */
.chip-alert { display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .8rem; border-radius:2rem; font-size:var(--fs-sm); font-weight:500; text-decoration:none; border:1px solid; }
.chip-alert.danger  { background:var(--c-danger-soft);  color:#b91c1c; border-color:#fecaca; }
.chip-alert.warning { background:var(--c-warning-soft); color:#b45309; border-color:#fde68a; }
.chip-alert.info    { background:var(--c-primary-soft); color:#1d4ed8; border-color:#bfdbfe; }
.chip-alert:hover { filter:brightness(.97); }
.quick { display:flex; flex-wrap:wrap; gap:.5rem; }
.quick a { display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .8rem; border-radius:2rem; border:1px solid var(--c-border); background:var(--c-surface); color:var(--c-text-2); font-size:var(--fs-sm); font-weight:500; text-decoration:none; transition:all .15s; }
.quick a:hover { border-color:#93b4d8; color:var(--c-primary); }
.quick a .n { background:var(--c-bg); color:#334155; border-radius:1rem; padding:0 .5rem; font-size:var(--fs-xs); font-weight:700; font-variant-numeric:tabular-nums; }
.quick a.on { background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.quick a.on .n { background:rgba(255,255,255,.2); color:#fff; }
.quick a.danger:not(.on) .n { background:#fee2e2; color:#b91c1c; }

/* Células de tabela: linha principal + linha secundária */
.cell-title { font-weight:600; color:var(--c-primary); text-decoration:none; }
a.cell-title:hover { text-decoration:underline; }
.cell-sub { font-size:var(--fs-xs); color:var(--c-subtle); white-space:nowrap; }
.prio-dot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; margin-right:.4rem; }
.avatar-initials { width:1.65rem; height:1.65rem; border-radius:50%; background:#e0e7ff; color:#3730a3; font-size:.65rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-right:.45rem; flex-shrink:0; }