/* ============================================================
   MOZABOOT DESIGN SYSTEM — TOKENS (identidade "Produto")
   Fonte: Mozaboot Design System, Brand Book v1.0 — pasta
   "Mozaboot Design System" (tokens/colors.css, typography.css,
   spacing.css). Decisão do projecto: o Mozaboot Vital Care usa a
   identidade Produto (navy + Azulão + gradiente de assinatura),
   não a família teal (essa é exclusiva de ferramentas internas).
   Ver memória "project-mozaboot-design-system-adoption".

   Ficheiro linkado em TODAS as páginas (depois do bootstrap.min.css)
   — é a única fonte de verdade para cor/tipografia/espaçamento daqui
   em diante; os CSS por página devem referenciar estas variáveis em
   vez de valores hex à parte.
   ============================================================ */

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

:root {
  /* ---- Brand core ---- */
  --moz-navy: #00062E;
  --moz-azulao: #0072FD;
  --moz-azul-claro: #00FFFF;
  --moz-white: #FFFFFF;

  /* Gradiente de assinatura — sempre 135°; só para detalhes/acentos
     (linha activa do menu, CTAs, destaques) — nunca texto corrido
     nem fundo atrás de corpo de texto. */
  --moz-gradient: linear-gradient(135deg, #0072FD 0%, #00FFFF 100%);
  --moz-gradient-soft: linear-gradient(135deg, rgba(0,114,253,0.14) 0%, rgba(0,255,255,0.14) 100%);

  /* ---- Rampa Navy ---- */
  --moz-navy-900: #00062E;
  --moz-navy-800: #0A1240;
  --moz-navy-700: #182253;
  --moz-navy-600: #2A3768;
  --moz-navy-500: #45527F;
  --moz-navy-400: #6B779B;
  --moz-navy-300: #99A2BC;
  --moz-navy-200: #C5CBDC;
  --moz-navy-100: #E4E8F1;
  --moz-navy-50:  #F3F5FA;

  /* ---- Rampa Azulão (acento interactivo) ---- */
  --moz-blue-700: #004FB0;
  --moz-blue-600: #0060DC;
  --moz-blue-500: #0072FD;
  --moz-blue-400: #3A91FF;
  --moz-blue-300: #79B3FF;
  --moz-blue-200: #B6D5FF;
  --moz-blue-100: #E0EDFF;
  --moz-blue-50:  #F0F6FF;

  /* ---- Neutros (cinzas com viés frio, para superfícies) ---- */
  --moz-gray-900: #14161C;
  --moz-gray-800: #262932;
  --moz-gray-700: #3C404B;
  --moz-gray-600: #555A67;
  --moz-gray-500: #757B89;
  --moz-gray-400: #9CA2AE;
  --moz-gray-300: #C4C9D2;
  --moz-gray-200: #E2E5EB;
  --moz-gray-100: #F1F3F6;
  --moz-gray-50:  #F8F9FB;

  /* ---- Estados semânticos ---- */
  --moz-success: #1F9D6B;
  --moz-success-bg: #E6F6EE;
  --moz-warning: #E0930C;
  --moz-warning-bg: #FCF2DE;
  --moz-danger: #D8443C;
  --moz-danger-bg: #FCE9E8;
  --moz-info: #0072FD;
  --moz-info-bg: #E0EDFF;

  /* ============================================================
     ALIASES SEMÂNTICOS — usar estes no CSS de cada página
     ============================================================ */
  --text-strong: var(--moz-navy-900);
  --text-body:   var(--moz-navy-800);
  --text-muted:  var(--moz-navy-500);
  --text-subtle: var(--moz-navy-400);
  --text-on-dark: var(--moz-white);
  --text-link:   var(--moz-blue-500);
  --text-accent: var(--moz-blue-500);

  --surface-page:    var(--moz-gray-50);
  --surface-card:    var(--moz-white);
  --surface-sunken:  var(--moz-navy-50);
  --surface-inverse: var(--moz-navy-900);
  --surface-accent-soft: var(--moz-blue-50);

  --border-subtle:  var(--moz-navy-100);
  --border-default: var(--moz-navy-200);
  --border-strong:  var(--moz-navy-300);
  --focus-ring:     rgba(0,114,253,0.30);

  --action-primary:        var(--moz-navy-900);
  --action-primary-hover:  var(--moz-navy-800);
  --action-accent:         var(--moz-blue-500);
  --action-accent-hover:   var(--moz-blue-600);

  /* ---- Tipografia ---- */
  --font-sans: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---- Espaçamento (ritmo de 8pt) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* ---- Raios ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Sombras — frias, com base navy, nunca preto puro ---- */
  --shadow-xs: 0 1px 2px rgba(0, 6, 46, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 6, 46, 0.08), 0 1px 2px rgba(0, 6, 46, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 6, 46, 0.08), 0 2px 4px rgba(0, 6, 46, 0.05);
  --shadow-lg: 0 12px 28px rgba(0, 6, 46, 0.12), 0 4px 8px rgba(0, 6, 46, 0.06);
  --shadow-glow: 0 6px 24px rgba(0, 114, 253, 0.30);
}

body {
  font-family: var(--font-sans);
}

/* ============================================================
   PONTE COM O BOOTSTRAP — a maioria dos ecrãs já usa classes
   nativas do Bootstrap (btn-primary, badge, .text-primary, focus
   ring dos inputs, links). Ao redefinir as variáveis do próprio
   Bootstrap 4 aqui, essas classes herdam o Azulão automaticamente
   sem ter de re-escrever cada página uma a uma.
   ============================================================ */
a {
  color: var(--moz-blue-500);
}
a:hover, a:focus {
  color: var(--moz-blue-600);
}

/* Gradiente de assinatura (135°) nos CTAs e nas faixas de destaque — é
   exactamente o que a marca pede ("reservado a detalhes: destaques, linhas,
   ícones, CTAs") e o que o menu lateral já fazia antes de existirem estes
   tokens. Cor sólida a seguir, como "background" de recurso: navegadores
   antigos ou um qualquer contexto sem suporte a gradientes ficam com o
   Azulão liso em vez de branco/transparente. */
.btn-primary {
  background: var(--moz-blue-500);
  background: var(--moz-gradient);
  border-color: var(--moz-blue-500);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
  border-color: var(--moz-blue-600);
  box-shadow: var(--shadow-glow);
}
.btn-outline-primary {
  color: var(--moz-blue-500);
  border-color: var(--moz-blue-500);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: var(--moz-blue-500);
  background: var(--moz-gradient);
  border-color: var(--moz-blue-500);
  color: #fff;
}

.text-primary { color: var(--moz-blue-500) !important; }
.bg-primary {
  background-color: var(--moz-blue-500) !important;
  background-image: var(--moz-gradient) !important;
}
.border-primary { border-color: var(--moz-blue-500) !important; }

.badge-primary { background-color: var(--moz-blue-500); }
.badge-info { background-color: var(--moz-blue-100); color: var(--moz-blue-700); }
.badge-success { background-color: var(--moz-success); }
.badge-warning { background-color: var(--moz-warning); color: #fff; }
.badge-danger { background-color: var(--moz-danger); }

.form-control:focus {
  border-color: var(--moz-blue-400);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.page-item.active .page-link {
  background-color: var(--moz-blue-500);
  border-color: var(--moz-blue-500);
}
.page-link {
  color: var(--moz-blue-500);
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--moz-blue-500);
  background-color: var(--moz-blue-500);
}

.nav-tabs .nav-link.active {
  color: var(--moz-blue-600);
  border-color: var(--moz-blue-300) var(--moz-blue-300) #fff;
}
.nav-link {
  color: var(--text-muted);
}

/* ============================================================
   RAIO DOS CANTOS — os cartões da app já usavam ~14px (perto do
   token --radius-lg); botões, inputs e modais tinham ficado no
   raio pequeno por defeito do Bootstrap (4–4.8px), nunca trocado.
   Esta secção alinha tudo à mesma linguagem visual.
   ============================================================ */
.btn,
.btn-group > .btn {
  border-radius: var(--radius-md);
}
.btn-sm, .btn-group-sm > .btn {
  border-radius: var(--radius-sm);
}

.form-control,
.custom-select,
select.form-control,
textarea.form-control {
  border-radius: var(--radius-md);
}

.modal-content {
  border-radius: var(--radius-lg);
  overflow: hidden; /* sem isto, cabeçalhos/rodapés com fundo de cor
                        ficam com cantos quadrados a "furar" o modal
                        já arredondado */
}

.dropdown-menu {
  border-radius: var(--radius-md);
}

.alert {
  border-radius: var(--radius-md);
}

/* Badges nativos do Bootstrap (badge-success, badge-danger, etc.) —
   as pílulas/badges já desenhadas à mão nas páginas (dr-badge,
   de-badge, m-badge...) já nasceram em pílula; isto alinha as que
   ainda vêm do Bootstrap puro (ex.: Estado em Utilizadores/Médicos). */
.badge:not(.badge-pill) {
  border-radius: var(--radius-pill);
}

.toast {
  border-radius: var(--radius-lg);
}

/* ============================================================
   IMPRESSÃO DE LISTAGENS — ver Frontend/SiteAssets/js/impressao-lista.js.
   #mozImpressaoArea fica sempre fora de vista no ecrã (display:none); só o
   print stylesheet abaixo a torna visível, escondendo tudo o resto da
   página (sidebar, filtros, paginação) para a folha impressa sair limpa.
   ============================================================ */
#mozImpressaoArea {
  display: none;
}

@media print {
  body * {
    visibility: hidden;
  }
  #mozImpressaoArea,
  #mozImpressaoArea * {
    visibility: visible;
  }
  #mozImpressaoArea {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .moz-impressao-cabecalho {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 2px solid var(--moz-navy-900);
    padding-bottom: 12px;
    margin-bottom: 16px;
  }
  .moz-impressao-marca {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--moz-navy-900);
    letter-spacing: -0.01em;
  }
  .moz-impressao-info h1 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--moz-navy-900);
  }
  .moz-impressao-info p {
    margin: 0;
    font-size: 0.8rem;
    color: #555555;
  }
  .moz-impressao-meta {
    margin-top: 2px !important;
    color: #888888 !important;
  }

  .moz-impressao-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
  }
  .moz-impressao-tabela th,
  .moz-impressao-tabela td {
    border: 1px solid #cccccc;
    padding: 6px 8px;
    text-align: left;
  }
  .moz-impressao-tabela th {
    background: var(--moz-navy-50);
  }
  .moz-impressao-tabela tr {
    break-inside: avoid;
  }
  .moz-impressao-vazio {
    text-align: center;
    color: #888888;
    padding: 14px;
  }

  @page {
    margin: 16mm;
  }
}