/* =========================================================================
   theme.css — Design tokens + tema Bootstrap 5 + shims de compatibilidade BS4
   Fonte única de cores/variáveis do Ecommerce Dental (marca Mount Hermon).
   Carregado globalmente via views/partials/head.ejs.
   NÃO afeta os PDFs de contrato (style-contrato.css é independente).
   ========================================================================= */

:root {
  /* ---- Paleta da marca ---- */
  --mh-navy: #0E3178;
  --mh-navy-700: #162E59;
  --mh-navy-900: #0a2255;
  --mh-gold: #BE7512;
  --mh-gold-600: #C27E2A;
  --mh-gold-700: #9e610f;

  --mh-white: #ffffff;
  --mh-gray-50: #fafafa;
  --mh-gray-100: #f4f4f5;
  --mh-gray-200: #e9ecef;
  --mh-gray-300: #d4d4d8;
  --mh-gray-500: #71717a;
  --mh-gray-700: #3f3f46;
  --mh-gray-800: #27272a;
  --mh-border: #e3e6ec;
  --mh-body-bg: #f3f5f9;

  /* ---- Cores de status ---- */
  --mh-status-ecommerce: #00c2b8;
  --mh-status-pagamento: #7d02cf;
  --mh-status-ds: #cfb001;
  --mh-status-error: #FB7185;
  --mh-status-success: #2ecc71;

  /* ---- Escala / formato ---- */
  --mh-radius-sm: .375rem;
  --mh-radius: .625rem;
  --mh-radius-lg: 1rem;
  --mh-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --mh-shadow: 0 4px 16px rgba(16, 24, 40, .08);
  --mh-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
  --mh-font: 'Kanit', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Override das variáveis nativas do Bootstrap 5 ---- */
  --bs-primary: #0E3178;
  --bs-primary-rgb: 14, 49, 120;
  --bs-link-color-rgb: 14, 49, 120;
  --bs-link-hover-color-rgb: 10, 34, 85;
  --bs-border-radius: var(--mh-radius);
  --bs-border-radius-sm: var(--mh-radius-sm);
  --bs-border-radius-lg: var(--mh-radius-lg);
  --bs-body-bg: var(--mh-body-bg);
  --bs-body-color: #1f2430;
  --bs-body-font-family: var(--mh-font);
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
body {
  font-family: var(--mh-font);
  background-color: var(--mh-body-bg);
  color: var(--bs-body-color);
}

/* ------------------------------------------------------------------ */
/* Re-tinta dos botões (BS5 grava os valores literais em --bs-btn-*)   */
/* ------------------------------------------------------------------ */
.btn-primary {
  --bs-btn-bg: var(--mh-navy);
  --bs-btn-border-color: var(--mh-navy);
  --bs-btn-hover-bg: var(--mh-navy-900);
  --bs-btn-hover-border-color: var(--mh-navy-900);
  --bs-btn-active-bg: var(--mh-navy-900);
  --bs-btn-active-border-color: var(--mh-navy-900);
  --bs-btn-disabled-bg: var(--mh-navy);
  --bs-btn-disabled-border-color: var(--mh-navy);
  --bs-btn-focus-shadow-rgb: 14, 49, 120;
}

.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mh-gold);
  --bs-btn-border-color: var(--mh-gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mh-gold-700);
  --bs-btn-hover-border-color: var(--mh-gold-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--mh-gold-700);
  --bs-btn-active-border-color: var(--mh-gold-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--mh-gold);
  --bs-btn-disabled-border-color: var(--mh-gold);
  --bs-btn-focus-shadow-rgb: 190, 117, 18;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mh-status-ecommerce);
  --bs-btn-border-color: var(--mh-status-ecommerce);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #00a89f;
  --bs-btn-hover-border-color: #00a89f;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #00a89f;
  --bs-btn-active-border-color: #00a89f;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--mh-status-ecommerce);
  --bs-btn-disabled-border-color: var(--mh-status-ecommerce);
}

.btn-outline-primary {
  --bs-btn-color: var(--mh-navy);
  --bs-btn-border-color: var(--mh-navy);
  --bs-btn-hover-bg: var(--mh-navy);
  --bs-btn-hover-border-color: var(--mh-navy);
  --bs-btn-active-bg: var(--mh-navy);
  --bs-btn-active-border-color: var(--mh-navy);
}

a {
  color: var(--mh-navy);
}

/* ------------------------------------------------------------------ */
/* Cards / tabelas — toque "Tabler-like"                               */
/* ------------------------------------------------------------------ */
.card {
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-lg);
  box-shadow: var(--mh-shadow-sm);
}

.table {
  --bs-table-hover-bg: rgba(14, 49, 120, .04);
  vertical-align: middle;
}

.table > thead {
  background-color: var(--mh-gray-100);
  color: var(--mh-navy);
}

.table > thead th {
  font-weight: 600;
  border-bottom: 2px solid var(--mh-border);
  white-space: nowrap;
}

/* Status pills */
.badge.bg-primary { background-color: var(--mh-navy) !important; }
.badge.bg-warning { background-color: var(--mh-gold) !important; color: #fff !important; }

/* ------------------------------------------------------------------ */
/* Page header genérico                                                */
/* ------------------------------------------------------------------ */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-header h1,
.page-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--mh-navy);
}

.page-subtitle {
  color: var(--mh-gray-500);
  font-size: .9rem;
}

/* ==================================================================== */
/* SHIMS BS4 -> BS5                                                      */
/* Classes removidas no Bootstrap 5 ainda presentes em markup/JS legado */
/* (em especial as injetadas por src/js/scriptFormulario.js).           */
/* ==================================================================== */

/* .form-group (removido no BS5) */
.form-group {
  margin-bottom: 1rem;
}

/* .btn-block (removido no BS5) */
.btn-block {
  display: block;
  width: 100%;
}

/* .form-row (removido no BS5) */
.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}
.form-row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

/* .custom-select -> aparência de .form-select */
.custom-select {
  display: block;
  width: 100%;
  padding: .5rem 2.25rem .5rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: #fff;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-sm);
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
}

/* .custom-control / .custom-radio / .custom-checkbox (removidos no BS5).
   Renderiza como linha "card" com input nativo visível — usado pelas
   opções de pagamento injetadas via JS (#payment-options). */
.custom-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: auto;
  padding: .65rem .85rem;
  margin-bottom: .5rem;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-sm);
  background-color: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.custom-control:hover {
  border-color: var(--mh-navy);
}
.custom-control:has(.custom-control-input:checked) {
  border-color: var(--mh-navy);
  box-shadow: 0 0 0 1px var(--mh-navy);
  background-color: rgba(14, 49, 120, .03);
}
.custom-control-input {
  position: static;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  opacity: 1;
  flex: 0 0 auto;
  accent-color: var(--mh-navy);
  cursor: pointer;
}
.custom-control-label {
  margin: 0;
  cursor: pointer;
}

/* .input-group-append / .input-group-prepend (removidos no BS5) */
.input-group-append,
.input-group-prepend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

/* .thead-light -> .table-light */
.thead-light th {
  background-color: var(--mh-gray-100);
}

/* .sr-only -> .visually-hidden */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Badges legados .badge-* -> equivalentes BS5 */
.badge-primary { background-color: var(--mh-navy) !important; color: #fff; }
.badge-secondary { background-color: var(--mh-gray-500) !important; color: #fff; }
.badge-success { background-color: var(--mh-status-success) !important; color: #fff; }
.badge-danger { background-color: var(--mh-status-error) !important; color: #fff; }
.badge-warning { background-color: var(--mh-gold) !important; color: #fff; }
.badge-info { background-color: var(--mh-status-ecommerce) !important; color: #fff; }
.badge-pill { border-radius: 50rem; }

/* Barra de rolagem com a cor da marca (mantém comportamento do style.css) */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb { background-color: var(--mh-navy); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--mh-gold); }