/* ============================================================================
   bootstrap.css — Camada de tema X Byte / Protocoli
   ----------------------------------------------------------------------------
   Este arquivo NÃO redesenha componentes. Ele apenas:
   1. Declara as variáveis de marca da X Byte (--xb-*).
   2. Reaproveita essas variáveis dentro das variáveis nativas do Bootstrap
      (--bs-*), incluindo as variáveis de componentes (.btn-*, .card, etc.).
   Carregar SEMPRE depois do bootstrap.min.css do cdnjs.
   ========================================================================== */

:root {
  /* ---- Marca X Byte: azul institucional ---- */
  --xb-navy-900: #0a2740;
  --xb-navy-800: #0f3d63;   /* primária */
  --xb-navy-700: #15507f;
  --xb-navy-600: #1d6299;
  --xb-blue-500: #2f78b5;
  --xb-blue-100: #e7f0f8;
  --xb-blue-050: #f1f6fb;

  /* ---- Verde institucional (ação / resolvido) ---- */
  --xb-green-800: #0f5a3d;
  --xb-green-700: #137a52;
  --xb-green-600: #1a8d61;
  --xb-green-100: #e3f3ec;

  /* ---- Grafite / neutros frios ---- */
  --xb-ink-900: #14222e;    /* títulos */
  --xb-ink-700: #2f4150;    /* corpo */
  --xb-slate-600: #51677a;  /* texto suave */
  --xb-slate-400: #8499a8;
  --xb-slate-200: #c7d3dc;
  --xb-line: #e3eaf0;
  --xb-line-soft: #eef3f7;

  /* ---- Superfícies ---- */
  --xb-surface: #ffffff;
  --xb-bg: #f5f8fa;
  --xb-bg-tint: #eef3f7;

  /* ---- Status de demandas ---- */
  --xb-st-recebida: #64748b;
  --xb-st-analise: #b7791f;
  --xb-st-programada: #2f78b5;
  --xb-st-execucao: #0f3d63;
  --xb-st-resolvida: #1a8d61;

  /* ---- Sombras suaves (institucional, discreto) ---- */
  --xb-shadow-xs: 0 1px 2px rgba(15, 39, 64, .05);
  --xb-shadow-sm: 0 2px 8px rgba(15, 39, 64, .06);
  --xb-shadow-md: 0 10px 30px -12px rgba(15, 39, 64, .18);
  --xb-shadow-lg: 0 30px 70px -28px rgba(10, 39, 64, .35);

  /* ---- Raios ---- */
  --xb-radius-sm: 10px;
  --xb-radius: 14px;
  --xb-radius-lg: 20px;

  /* ---- Tipografia ---- */
  --xb-font-sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --xb-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ===========================================================
     Reaproveitamento nas variáveis nativas do Bootstrap
     =========================================================== */
  --bs-primary: var(--xb-navy-800);
  --bs-primary-rgb: 15, 61, 99;
  --bs-secondary: var(--xb-slate-600);
  --bs-secondary-rgb: 81, 103, 122;
  --bs-success: var(--xb-green-600);
  --bs-success-rgb: 26, 141, 97;
  --bs-info: var(--xb-blue-500);
  --bs-info-rgb: 47, 120, 181;
  --bs-light: var(--xb-bg);
  --bs-light-rgb: 245, 248, 250;
  --bs-dark: var(--xb-ink-900);
  --bs-dark-rgb: 20, 34, 46;

  --bs-body-color: var(--xb-ink-700);
  --bs-body-color-rgb: 47, 65, 80;
  --bs-body-bg: var(--xb-bg);
  --bs-body-bg-rgb: 245, 248, 250;
  --bs-body-font-family: var(--xb-font-sans);
  --bs-body-font-size: 1.0625rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;

  --bs-emphasis-color: var(--xb-ink-900);
  --bs-heading-color: var(--xb-ink-900);

  --bs-border-color: var(--xb-line);
  --bs-border-color-translucent: rgba(15, 39, 64, .10);
  --bs-border-radius: var(--xb-radius);
  --bs-border-radius-sm: var(--xb-radius-sm);
  --bs-border-radius-lg: var(--xb-radius-lg);
  --bs-border-radius-xl: 26px;
  --bs-border-radius-pill: 50rem;

  --bs-link-color: var(--xb-navy-700);
  --bs-link-color-rgb: 21, 80, 127;
  --bs-link-hover-color: var(--xb-navy-900);
  --bs-link-hover-color-rgb: 10, 39, 64;
  --bs-link-decoration: none;

  --bs-tertiary-bg: var(--xb-bg-tint);
  --bs-secondary-bg: var(--xb-line-soft);
}

/* ---- Tipografia base mapeada ---- */
body {
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--xb-font-sans);
  color: var(--bs-heading-color);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
}

/* ===========================================================
   Botões — remapeando as variáveis de componente do Bootstrap
   =========================================================== */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.35rem;
  --bs-btn-padding-y: 0.72rem;
  --bs-btn-border-radius: var(--xb-radius-sm);
  --bs-btn-font-size: 1rem;
  letter-spacing: -0.01em;
}

.btn-primary {
  --bs-btn-bg: var(--xb-navy-800);
  --bs-btn-border-color: var(--xb-navy-800);
  --bs-btn-hover-bg: var(--xb-navy-900);
  --bs-btn-hover-border-color: var(--xb-navy-900);
  --bs-btn-active-bg: var(--xb-navy-900);
  --bs-btn-active-border-color: var(--xb-navy-900);
  --bs-btn-disabled-bg: var(--xb-navy-800);
  --bs-btn-disabled-border-color: var(--xb-navy-800);
}

.btn-success {
  --bs-btn-bg: var(--xb-green-600);
  --bs-btn-border-color: var(--xb-green-600);
  --bs-btn-hover-bg: var(--xb-green-700);
  --bs-btn-hover-border-color: var(--xb-green-700);
  --bs-btn-active-bg: var(--xb-green-800);
  --bs-btn-active-border-color: var(--xb-green-800);
}

.btn-outline-primary {
  --bs-btn-color: var(--xb-navy-800);
  --bs-btn-border-color: var(--xb-slate-200);
  --bs-btn-hover-bg: var(--xb-navy-800);
  --bs-btn-hover-border-color: var(--xb-navy-800);
  --bs-btn-active-bg: var(--xb-navy-900);
  --bs-btn-active-border-color: var(--xb-navy-900);
}

.btn-light {
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: var(--xb-line);
  --bs-btn-color: var(--xb-navy-800);
  --bs-btn-hover-bg: var(--xb-blue-050);
  --bs-btn-hover-border-color: var(--xb-slate-200);
  --bs-btn-active-bg: var(--xb-blue-100);
}

/* Botão "claro sobre fundo escuro" */
.btn-on-dark {
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-color: var(--xb-navy-900);
  --bs-btn-hover-bg: var(--xb-blue-050);
  --bs-btn-hover-border-color: var(--xb-blue-050);
  --bs-btn-hover-color: var(--xb-navy-900);
}

/* ===========================================================
   Cards — variáveis de componente
   =========================================================== */
.card {
  --bs-card-bg: var(--xb-surface);
  --bs-card-border-color: var(--xb-line);
  --bs-card-border-radius: var(--xb-radius);
  --bs-card-inner-border-radius: calc(var(--xb-radius) - 1px);
  --bs-card-spacer-x: 1.5rem;
  --bs-card-spacer-y: 1.5rem;
}

/* ===========================================================
   Badges
   =========================================================== */
.badge {
  --bs-badge-font-weight: 600;
  --bs-badge-padding-x: 0.7em;
  --bs-badge-padding-y: 0.45em;
  --bs-badge-border-radius: 50rem;
  letter-spacing: 0;
}

/* ===========================================================
   Form controls
   =========================================================== */
.form-control, .form-select {
  --bs-border-radius: var(--xb-radius-sm);
  border-color: var(--xb-line);
  padding: 0.7rem 0.9rem;
  background-color: #fff;
  color: var(--xb-ink-700);
}
.form-control:focus, .form-select:focus {
  border-color: var(--xb-navy-600);
  box-shadow: 0 0 0 0.2rem rgba(15, 61, 99, .12);
}
.form-label {
  font-weight: 600;
  color: var(--xb-ink-900);
  font-size: .9rem;
  margin-bottom: .4rem;
}

/* Texto utilitário com cores de marca */
.text-primary { color: var(--xb-navy-800) !important; }
.text-success { color: var(--xb-green-700) !important; }
.bg-primary { background-color: var(--xb-navy-800) !important; }
.bg-light { background-color: var(--xb-bg) !important; }
.border { border-color: var(--xb-line) !important; }