/*
 * Refresco visual dos cartoes de estatistica/atalho (".small-box" do
 * AdminLTE), inspirado no layout do Orion (admin.theorionai.pt) mas
 * adaptado: em vez de cartoes pintados a solido numa cor diferente
 * cada, ficam neutros (fundo branco, borda fina, sombra subtil) com
 * um acento de cor discreto so no icone - mantem alguma cor para
 * reconhecer a categoria "de relance", sem pintar a caixa toda.
 *
 * Carregar depois de adminlte.css. So aplica a elementos com a classe
 * "stat-card" - nao mexe em mais nada do tema.
 */

.stat-card.small-box {
  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 1.25rem 1.375rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.stat-card.small-box .inner {
  order: 1;
}

.stat-card.small-box .inner h3 {
  font-size: 1.65rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.15rem;
  line-height: 1.2;
}

.stat-card.small-box .inner p {
  font-size: 0.78rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0;
}

/* Icone: circulo pequeno com a cor de acento, em vez do icone grande
   e semi-transparente encostado ao canto que o AdminLTE usa por
   omissao. */
.stat-card.small-box .small-box-icon {
  position: static;
  order: 0;
  align-self: flex-start;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
  opacity: 1;
  font-size: 1.25rem;
  background: #f3f4f6;
  color: #374151;
}

.stat-card.small-box .small-box-footer {
  order: 2;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
  color: #6b7280 !important;
  background: transparent !important;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left !important;
}

.stat-card.small-box .small-box-footer:hover {
  color: #4f46e5 !important;
}

/* Acentos por categoria - so mudam a cor do circulo do icone. */
.stat-card.small-box.accent-primary .small-box-icon { background: #eef2ff; color: #4f46e5; }
.stat-card.small-box.accent-success .small-box-icon { background: #ecfdf5; color: #059669; }
.stat-card.small-box.accent-warning .small-box-icon { background: #fffbeb; color: #d97706; }
.stat-card.small-box.accent-danger  .small-box-icon { background: #fef2f2; color: #dc2626; }

/* Filamentos: a cor de acento e a propria cor do filamento, definida
   inline por cartao via --acento-fundo/--acento-cor (ver filamentos.php) -
   nao faz sentido ter uma lista fixa de classes para isto. */
.stat-card.small-box.accent-variavel .small-box-icon {
  background: var(--acento-fundo, #f3f4f6);
  color: var(--acento-cor, #374151);
}

/*
 * Paginas de autenticacao (login, definir password) - cartao branco
 * centrado e simples, ao estilo da pagina de login do Orion: sem
 * icones nos campos, so etiqueta + campo, um unico botao a cor de
 * marca (indigo, a mesma usada nos acentos dos cartoes acima).
 */
body.auth-page {
  background: #f9fafb;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-wrap {
  width: 100%;
  max-width: 380px;
}

.auth-brand {
  text-align: center;
  margin-bottom: 1.75rem;
}

.auth-brand h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.25rem;
}

.auth-brand p {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 0;
}

.auth-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 2rem 1.75rem;
}

.auth-card label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.35rem;
  display: block;
}

.auth-card .form-control {
  border-radius: 0.5rem;
  border-color: #d1d5db;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

.auth-card .form-control:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.auth-card .btn-auth {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1rem;
}

.auth-card .btn-auth:hover {
  background: #4338ca;
  border-color: #4338ca;
  color: #fff;
}

.auth-card .btn-auth:disabled {
  opacity: 0.6;
}

.auth-error {
  background: #fef2f2;
  color: #dc2626;
  border-radius: 0.5rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/*
 * Fase 3: menu lateral. O AdminLTE ja usa custom properties
 * (--lte-sidebar-*) para o tema escuro - so redefinimos essas, em vez
 * de tentar sobrepor regras individuais, para o item activo passar do
 * branco semi-transparente por omissao para o mesmo indigo solido
 * usado nos acentos dos cartoes (mais parecido ao Orion). Fundo mais
 * escuro e neutro, sem depender do bg-body-secondary do Bootstrap
 * (removido de partials/sidebar.php - tinha !important e ia ganhar
 * a qualquer override daqui).
 */
/*
 * Fase 7: unificar o "fundo" do modo escuro. Todas as paginas usam a
 * classe ".bg-body-tertiary" no <body> - por omissao, o Bootstrap
 * define essa cor (--bs-tertiary-bg) como um cinzento neutro
 * (rgb(42.5, 47.5, 52.5), ~#2a2f34) completamente à parte da paleta
 * jà usada aqui (sidebar #111827, cartoes #1f2937). O resultado era
 * o fundo da pagina ficar mais CLARO do que os cartoes por cima dele
 * - a hierarquia ao contrario do suposto (cartao devia parecer
 * "levantado", mais claro que a pagina, nao mais escuro). Aqui o
 * corpo da pagina e a sidebar passam a partilhar a mesma cor base,
 * para os cartoes serem claramente a unica superficie "elevada".
 * --bs-body-bg tambem se muda (usada por modais/dropdowns), para nao
 * ficarem com um tom diferente do resto.
 */
[data-bs-theme="dark"] {
  --bs-body-bg: #111827;
  --bs-tertiary-bg: #111827;
}

[data-bs-theme=dark].app-sidebar,
[data-bs-theme=dark] .app-sidebar {
  --lte-sidebar-menu-active-bg: #4f46e5;
  --lte-sidebar-menu-active-color: #fff;
  --lte-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --lte-sidebar-submenu-active-bg: rgba(79, 70, 229, 0.35);
  --lte-sidebar-submenu-active-color: #fff;
  --lte-sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.06);
}

.app-sidebar {
  background-color: #111827;
}

.app-sidebar .sidebar-brand {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/*
 * Fase 4: cards e tabelas no resto da app. Bootstrap/AdminLTE ja
 * definem o cartao atraves de custom properties (--bs-card-*), por
 * isso redefinimos essas em vez de sobrepor propriedades a eito -
 * cantos mais arredondados, borda mais clara, sombra subtil (igual
 * aos cartoes de estatistica das fases anteriores). card-outline
 * (usado em quase todas as paginas) tinha um risco de 3px colorido
 * no topo - fica so com borda uniforme, neutra, à volta.
 */
.card {
  --bs-card-border-radius: 0.75rem;
  --bs-card-border-color: #e5e7eb;
  --bs-card-cap-bg: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.card > .card-header {
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  color: #111827;
}

/* O Bootstrap define ".card-title"/".card-footer" a partir de
   variaveis internas (--bs-card-title-color fica vazia por omissao,
   ".text-muted" usa --bs-secondary-color) que na pratica nao estavam
   a herdar a cor clara certa dentro de um cabecalho/rodape escurecido
   - texto quase impossivel de ler sobre o fundo escuro do card. Da-se
   a cor directamente em vez de depender dessa heranca. */
.card > .card-header .card-title {
  color: inherit;
}

.card-footer.text-muted {
  color: #6b7280 !important;
}

.card.card-outline {
  border-top-width: 1px;
  border-top-color: #e5e7eb;
}

/* .thead-dark aparece por toda a app mas nunca teve estilo nenhum
   definido (classe do Bootstrap 4, nao existe no Bootstrap 5) -
   ficava sempre com o aspecto por omissao do browser. Aproveita-se a
   classe ja presente no HTML em vez de a ir trocar pagina a pagina. */
.thead-dark th {
  background-color: #f9fafb;
  color: #374151;
  border-color: #e5e7eb;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table {
  --bs-table-border-color: #e5e7eb;
}

/*
 * Fase 5: modo escuro. O Bootstrap 5.3/AdminLTE ja vem com suporte
 * completo a [data-bs-theme="dark"] embutido - body, .card, .table,
 * formularios, etc. redefinem-se sozinhos assim que o atributo e
 * posto no <html> (ver partials/navbar.php, que tem o botao e o
 * script que faz isso). So e preciso tratar aqui o que e desta folha
 * (stat-card, auth-*, thead-dark), porque usam cores fixas em vez das
 * variaveis --bs-* que o resto do tema ja usa.
 */
[data-bs-theme="dark"] .stat-card.small-box {
  background: #1f2937;
  border-color: #374151;
  color: #f3f4f6;
}

[data-bs-theme="dark"] .stat-card.small-box .inner h3 {
  color: #f9fafb;
}

[data-bs-theme="dark"] .stat-card.small-box .inner p {
  color: #9ca3af;
}

[data-bs-theme="dark"] .stat-card.small-box .small-box-footer {
  border-top-color: #374151;
  color: #9ca3af !important;
}

[data-bs-theme="dark"] .stat-card.small-box .small-box-footer:hover {
  color: #818cf8 !important;
}

[data-bs-theme="dark"] .stat-card.small-box .small-box-icon {
  background: #374151;
  color: #d1d5db;
}

[data-bs-theme="dark"] .stat-card.small-box.accent-primary .small-box-icon { background: rgba(79, 70, 229, 0.25); color: #818cf8; }
[data-bs-theme="dark"] .stat-card.small-box.accent-success .small-box-icon { background: rgba(5, 150, 105, 0.25); color: #34d399; }
[data-bs-theme="dark"] .stat-card.small-box.accent-warning .small-box-icon { background: rgba(217, 119, 6, 0.25); color: #fbbf24; }
[data-bs-theme="dark"] .stat-card.small-box.accent-danger  .small-box-icon { background: rgba(220, 38, 38, 0.25); color: #f87171; }

/* Filamentos: ao contrario dos acentos fixos acima, aqui NAO se troca
   para um icone neutro em modo escuro - o pedido foi explicito para
   cada icone continuar a mostrar a cor real do filamento (definida
   inline por cartao via --acento-fundo/--acento-cor, ver
   filamentos.php). O par fundo-claro/icone-escuro de cada cor (ex:
   #eff6ff com #2563eb) foi pensado para ter sempre bom contraste
   entre si, independente da cor a volta.
   Precisa mesmo de uma regra propria aqui (nao basta remover uma
   versao anterior): a regra logo acima
   ("[data-bs-theme=dark] .stat-card.small-box .small-box-icon", sem
   ".accent-variavel") tambem apanha estes cartoes e tem a MESMA
   especificidade que a regra base la em cima - e por vir depois no
   ficheiro, ganhava sempre, escurecendo o icone na mesma. Com
   ".accent-variavel" no seletor esta regra fica mais especifica e
   vence as duas. */
[data-bs-theme="dark"] .stat-card.small-box.accent-variavel .small-box-icon {
  background: var(--acento-fundo, #374151);
  color: var(--acento-cor, #d1d5db);
}

[data-bs-theme="dark"] body.auth-page {
  background: #0f172a;
}

[data-bs-theme="dark"] .auth-brand h1 {
  color: #f9fafb;
}

[data-bs-theme="dark"] .auth-brand p {
  color: #9ca3af;
}

[data-bs-theme="dark"] .auth-card {
  background: #1f2937;
  border-color: #374151;
}

[data-bs-theme="dark"] .auth-card label {
  color: #d1d5db;
}

[data-bs-theme="dark"] .auth-error {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

[data-bs-theme="dark"] .thead-dark th {
  background-color: #1f2937;
  color: #d1d5db;
  border-color: #374151;
}

[data-bs-theme="dark"] .card {
  --bs-card-border-color: #374151;
  --bs-card-cap-bg: #1f2937;
}

[data-bs-theme="dark"] .card > .card-header {
  border-bottom-color: #374151;
  color: #f3f4f6;
}

[data-bs-theme="dark"] .card-footer.text-muted {
  color: #9ca3af !important;
}

[data-bs-theme="dark"] .card.card-outline {
  border-top-color: #374151;
}

/* Botao de alternar tema, no navbar (ver partials/navbar.php). */
#botao_tema {
  color: var(--bs-navbar-color, #6c757d);
  font-size: 1.1rem;
}
#botao_tema:hover {
  color: var(--bs-navbar-hover-color, #4f46e5);
}

/*
 * Fase 6: calendario (marcacoes.php). O FullCalendar (build "global",
 * sem o plugin bootstrap5) tem o proprio sistema de variaveis CSS
 * para theming (--fc-*, documentado pelo proprio FullCalendar) - usar
 * essas em vez de adivinhar nomes de classes internas, tanto para
 * ficar coerente com o indigo do resto da app como para o modo
 * escuro.
 */
.fc {
  --fc-border-color: #e5e7eb;
  --fc-neutral-bg-color: #f9fafb;
  --fc-list-event-hover-bg-color: #f3f4f6;
  --fc-button-bg-color: #4f46e5;
  --fc-button-border-color: #4f46e5;
  --fc-button-hover-bg-color: #4338ca;
  --fc-button-hover-border-color: #4338ca;
  --fc-button-active-bg-color: #4338ca;
  --fc-button-active-border-color: #4338ca;
  --fc-today-bg-color: rgba(79, 70, 229, 0.08);
}

.fc .fc-button {
  border-radius: 0.5rem;
  text-transform: capitalize;
  box-shadow: none !important;
}

.fc .fc-toolbar-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
}

.fc .fc-col-header-cell-cushion {
  color: #374151;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
}

[data-bs-theme="dark"] .fc {
  color: #e5e7eb;
  --fc-border-color: #374151;
  --fc-page-bg-color: #111827;
  --fc-neutral-bg-color: #1f2937;
  --fc-list-event-hover-bg-color: #374151;
  --fc-today-bg-color: rgba(79, 70, 229, 0.15);
}

[data-bs-theme="dark"] .fc .fc-toolbar-title,
[data-bs-theme="dark"] .fc .fc-daygrid-day-number,
[data-bs-theme="dark"] .fc .fc-timegrid-slot-label,
[data-bs-theme="dark"] .fc .fc-col-header-cell-cushion {
  color: #e5e7eb;
}

/*
 * Fase 6: formularios em toda a app - o mesmo tratamento que ja
 * estava so nas paginas de autenticacao (cantos arredondados, foco a
 * indigo) passa a aplicar-se a qualquer .form-control/.form-select,
 * ja que todas as paginas carregam esta folha desde a fase 4.
 */
.form-control,
.form-select {
  border-radius: 0.5rem;
  border-color: #d1d5db;
}

.form-control:focus,
.form-select:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #374151;
}

[data-bs-theme="dark"] label {
  color: #d1d5db;
}

/* .form-group e uma classe do Bootstrap 4 (tal como .thead-dark, ja
   corrigida na fase 4) - nao existe no Bootstrap 5, por isso nunca
   deu espacamento nenhum aos campos que a usam em varios formularios
   da app (ficavam encostados uns aos outros). */
.form-group {
  margin-bottom: 1rem;
}

/* Botoes: cantos arredondados em geral, e o "primary" passa a usar o
   mesmo indigo de marca em vez do azul por omissao do Bootstrap -
   coerente com o resto (sidebar, cartoes, login). */
.btn {
  --bs-btn-border-radius: 0.5rem;
}

.btn-primary {
  --bs-btn-bg: #4f46e5;
  --bs-btn-border-color: #4f46e5;
  --bs-btn-hover-bg: #4338ca;
  --bs-btn-hover-border-color: #4338ca;
  --bs-btn-active-bg: #4338ca;
  --bs-btn-active-border-color: #4338ca;
  --bs-btn-disabled-bg: #4f46e5;
  --bs-btn-disabled-border-color: #4f46e5;
  --bs-btn-focus-shadow-rgb: 99, 102, 241;
}

/*
 * BUG REAL (nao so cosmetica): ".form-row" e uma terceira classe do
 * Bootstrap 4 sem qualquer efeito no Bootstrap 5 (mesmo problema do
 * .thead-dark e .form-group ja corrigidos) - usada em 6 formularios
 * (novo/editar paciente, novo/editar utilizador, nova ficha clinica,
 * alterar password). Sem ".row" (o nome actual no Bootstrap 5) a
 * dar display:flex aos campos, cada ".col-md-6"/".col-md-4" la
 * dentro ficava a 50%/33% de largura mas empilhado na vertical em
 * vez de lado a lado - o "aspecto antigo" reportado nao era so os
 * cantos dos campos, era o layout inteiro dos formularios a
 * multiplas colunas. Replica aqui o comportamento do .row.
 */
.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.form-row > [class*="col-"] {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

/* ".ml-2" e outra classe do Bootstrap 4 (o nome actual e ".ms-2") -
   usada nos botoes "Voltar" a seguir ao botao principal, sem nenhum
   espaco entre os dois. */
.ml-2 {
  margin-left: 0.5rem !important;
}

/*
 * Fase 8: tabelas em ecras pequenos. Uma tabela com muitas colunas
 * (ex: pacientes.php tem 10) obriga sempre a scroll horizontal em
 * telemovel, mesmo dentro de ".table-responsive" - da para usar, mas
 * e dificil de ler. Em ecras estreitos, uma tabela com a classe
 * ".table-mobile-stack" passa de linhas/colunas para uma lista de
 * "cartoes": cada linha vira um bloco, cada celula mostra a sua
 * propria etiqueta (o texto do cabecalho da coluna) por cima do
 * valor em vez de ao lado - funciona tanto para texto simples como
 * para celulas com botoes/formularios (ex: coluna "Acoes").
 *
 * A etiqueta (atributo data-label) e preenchida em runtime por um
 * pequeno script no fim de cada pagina que usa esta classe - le o
 * texto de cada <th> e aplica-o as celulas da mesma coluna, para nao
 * ser preciso escrever o nome da coluna duas vezes (uma no <th>,
 * outra em cada <td>) nem manter as duas em sincronia manualmente.
 */
@media (max-width: 767.98px) {
  .table-mobile-stack thead {
    display: none;
  }

  .table-mobile-stack,
  .table-mobile-stack tbody,
  .table-mobile-stack tr,
  .table-mobile-stack td {
    display: block;
    width: 100%;
  }

  .table-mobile-stack tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
  }

  .table-mobile-stack td {
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.45rem 0;
  }

  /* Sem separador depois do ultimo campo - ja tem a borda do proprio
     "cartao" (.table-mobile-stack tr) a fechar ali. */
  .table-mobile-stack td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .table-mobile-stack td:first-child {
    padding-top: 0;
  }

  .table-mobile-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.15rem;
  }
}

/* Icone generico da navbar (partials/navbar.php) quando o utilizador
   ainda nao tem foto de perfil - substitui a foto real (.user-image).
   Uma correcao anterior so com "margin-top" negativo (copiada do que
   o AdminLTE usa para ".user-image") nao chegou - um icone de fonte
   nao se alinha da mesma forma que uma <img>, os dois tem modelos de
   caixa/metricas verticais diferentes, por isso um valor de margem
   copiado de um nao da o mesmo resultado no outro. Em vez de tentar
   acertar a posicao a custa de margens, a caixa fica com um tamanho
   fixo (2rem x 2rem, igual ao ".user-image") e centra o icone la
   dentro com flexbox - isso funciona independentemente das metricas
   verticais proprias da fonte de icones, ao contrario de margin/
   vertical-align. */
.avatar-provisorio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.375rem;
  line-height: 1;
  vertical-align: middle;
}