/* ==========================================================================
   Smilo — Design system moderno (preto / branco / verde #00FA9A)
   Carregado depois de core.css e demo.css — só adiciona ou sobrescreve,
   nunca edita os arquivos do template original.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Paleta da marca e tokens globais
   -------------------------------------------------------------------------- */
:root {
  --brand-black: #0b0c10;
  --brand-black-soft: #17181d;
  --brand-white: #ffffff;
  --brand-accent: #00fa9a;
  --brand-accent-rgb: 0, 250, 154;
  --brand-accent-strong: #00c97d;
  --brand-accent-ink: #00381f;

  /* Cantos e sombras mais suaves/modernos em toda a aplicação */
  --bs-border-radius: 0.55rem;
  --bs-border-radius-sm: 0.4rem;
  --bs-border-radius-lg: 0.85rem;
  --bs-border-radius-xl: 1.1rem;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--brand-accent-rgb), 0.5) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(var(--brand-accent-rgb), 0.45);
  border-radius: 1rem;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--brand-accent-rgb), 0.7);
}
::selection {
  background-color: rgba(var(--brand-accent-rgb), 0.35);
  color: var(--brand-black);
}

/* Foco visível consistente e discreto em toda a aplicação */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(var(--brand-accent-rgb), 0.8);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   1. Padrão de "cartão" usado em toda a aplicação (bg-white + rounded)
   -------------------------------------------------------------------------- */
.bg-white.rounded {
  background-color: var(--bs-paper-bg, #fff) !important;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 1rem !important;
  box-shadow: 0 0.6rem 1.75rem -0.75rem rgba(15, 23, 42, 0.16) !important;
}

.card {
  --bs-card-border-radius: 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* --------------------------------------------------------------------------
   2. Tabelas
   -------------------------------------------------------------------------- */
.table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  border-bottom-width: 2px;
  white-space: nowrap;
}
.table > tbody > tr {
  transition: background-color 0.12s ease;
}
.table-hover > tbody > tr:hover > * {
  background-color: rgba(var(--brand-accent-rgb), 0.07);
}

/* --------------------------------------------------------------------------
   3. Formulários
   -------------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--brand-accent-rgb), 0.9);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-accent-rgb), 0.18);
}
.form-floating > label {
  color: var(--bs-secondary-color);
}

/* --------------------------------------------------------------------------
   4. Botões
   -------------------------------------------------------------------------- */
.btn {
  font-weight: 500;
  letter-spacing: 0.01em;
}
.btn-accent {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-black);
}
.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--brand-accent-strong);
  border-color: var(--brand-accent-strong);
  color: var(--brand-black);
}

/* --------------------------------------------------------------------------
   5. Cabeçalho de página padrão (título + subtítulo/ação)
   -------------------------------------------------------------------------- */
.page-header,
.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.page-header h3,
.dashboard-header h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.page-header p,
.dashboard-header p {
  color: var(--bs-secondary-color);
}
.container h3 > i,
.page-header i {
  color: var(--brand-accent-strong);
}

/* --------------------------------------------------------------------------
   6. Sidebar flutuante — tema escuro com destaque verde (>= 1200px)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .layout-menu-fixed .layout-menu,
  .layout-menu-fixed-offcanvas .layout-menu {
    inset-block: 1rem;
    inset-inline-start: 1rem;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow:
      0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: box-shadow 0.2s ease;
  }

  .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page,
  .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page {
    padding-inline-start: calc(var(--bs-menu-width) + 1rem);
  }

  .layout-menu-fixed.layout-menu-collapsed .layout-page {
    padding-inline-start: calc(var(--bs-menu-collapsed-width) + 1rem);
  }
}

/* Tema escuro do menu — sobrescreve só as variáveis dentro do menu,
   sem afetar o resto da aplicação (botões, badges, etc. continuam intactos) */
.layout-menu {
  --bs-menu-bg: var(--brand-black);
  --bs-menu-bg-rgb: 11, 12, 16;
  --bs-menu-color: rgba(255, 255, 255, 0.66);
  --bs-menu-color-rgb: 255, 255, 255;
  --bs-menu-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-menu-hover-color: #ffffff;
  --bs-menu-active-bg: rgba(var(--brand-accent-rgb), 0.16);
  --bs-menu-active-color: var(--brand-accent);
  --bs-menu-sub-active-bg: rgba(var(--brand-accent-rgb), 0.16);
  --bs-menu-sub-active-color: var(--brand-accent);
  --bs-menu-active-toggle-bg: rgba(255, 255, 255, 0.06);
  --bs-menu-divider-color: rgba(255, 255, 255, 0.08);
  --bs-menu-box-shadow: none;
  --bs-heading-color: #ffffff;
  --bs-primary: var(--brand-accent);
  --bs-primary-rgb: var(--brand-accent-rgb);
  --bs-primary-bg-subtle: rgba(var(--brand-accent-rgb), 0.22);
  --bs-gray-200: rgba(255, 255, 255, 0.12);
  --bs-gray-400: rgba(255, 255, 255, 0.4);
  --bs-paper-bg: var(--brand-black);
}

/* Logo em preto vira branco dentro do menu escuro */
.layout-menu .app-brand-link img {
  filter: brightness(0) invert(1);
}

.layout-menu .app-brand {
  padding-block: 0.5rem;
}

/* Itens do menu com mais respiro e cantos arredondados.
   Importante: cada .menu-item tem largura fixa (var(--bs-menu-width)), igual
   à largura do próprio menu — por isso o espaçamento das bordas é feito com
   margin no .menu-link (que reduz sua própria caixa) e NUNCA com padding no
   .menu-inner (isso faria os itens "vazarem" para fora do menu arredondado). */
.layout-menu .menu-inner {
  overflow-x: hidden;
}
.layout-menu .menu-inner > .menu-item {
  margin-block: 0.2rem;
  max-inline-size: 100%;
}
.layout-menu .menu-inner > .menu-item > .menu-link,
.layout-menu .menu-inner .menu-sub .menu-link {
  border-radius: 0.65rem;
  margin-inline: 0.75rem;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.layout-menu .menu-inner > .menu-item > .menu-link:hover {
  transform: translateX(2px);
}
.layout-menu .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle) {
  border-radius: 0.65rem;
  font-weight: 600;
}
/* A barrinha lateral de item ativo não combina com o menu arredondado */
.layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner > .menu-item.active::before {
  display: none;
}

/* Cabeçalhos de grupo do menu (Geral, Atendimento, Financeiro...) */
.layout-menu .menu-header-text {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.layout-menu .menu-header::before {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Card de "Minha assinatura" e workspace atual */
.sidebar-workspace {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-workspace__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  background: rgba(var(--brand-accent-rgb), 0.16);
  color: var(--brand-accent);
  font-size: 1rem;
  flex-shrink: 0;
}
.sidebar-workspace__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.15rem;
}
.sidebar-workspace__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-workspace__badge {
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-black);
  background: var(--brand-accent);
  padding: 0.05rem 0.5rem;
  border-radius: 1rem;
}

/* --------------------------------------------------------------------------
   7. Navbar / cartão de saudação
   -------------------------------------------------------------------------- */
.layout-navbar.navbar-detached {
  border-radius: 1.1rem;
  padding-block: 0.65rem;
}

.navbar-nav-right {
  gap: 0.5rem;
}
.navbar-greeting {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
}
.navbar-greeting__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(var(--brand-accent-rgb), 0.16);
  color: var(--brand-accent-strong);
  font-size: 1.25rem;
  flex-shrink: 0;
}
.navbar-greeting__text {
  min-width: 0;
  overflow: hidden;
}
.navbar-greeting__text h5,
.navbar-greeting__text small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navbar-greeting__text h5 {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}
.navbar-greeting__text small {
  display: block;
  color: var(--bs-secondary-color);
}
/* O grupo de ações (tema/avatar) nunca deve encolher nem quebrar linha */
.navbar-nav-right > ul.navbar-nav {
  flex-shrink: 0;
}

/* Navbar mais compacta em telas pequenas, para caber tudo numa linha só */
@media (max-width: 575.98px) {
  .layout-navbar.navbar-detached {
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
  }
  .navbar-greeting {
    gap: 0.5rem;
  }
  .navbar-greeting__icon {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1rem;
  }
  .navbar-greeting__text h5 {
    font-size: 0.85rem;
  }
  .navbar-greeting__text small {
    display: none;
  }
  .theme-toggle-btn {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 0.9rem;
  }
}

/* --------------------------------------------------------------------------
   8. Dashboard — cartões de atalho e cartões de conteúdo
   -------------------------------------------------------------------------- */
.stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bs-paper-bg, #fff);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
  height: 100%;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem -0.5rem rgba(15, 23, 42, 0.18);
}
.stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.85rem;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.stat-card__body h4 {
  margin: 0 0 0.15rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bs-heading-color);
}
.stat-card__body span {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}
.stat-card--primary .stat-card__icon {
  background: rgba(var(--brand-accent-rgb), 0.16);
  color: var(--brand-accent-strong);
}
.stat-card--info .stat-card__icon {
  background: rgba(var(--bs-info-rgb), 0.14);
  color: #03a5c9;
}
.stat-card--success .stat-card__icon {
  background: var(--brand-black);
  color: var(--brand-accent);
}

.info-card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(15, 23, 42, 0.1);
  overflow: hidden;
  height: 100%;
}
.info-card .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
}
.info-card .card-header i {
  color: var(--brand-accent-strong);
}
.info-card .card-body {
  padding: 1.25rem;
}
.info-card .card-title {
  font-weight: 700;
  font-size: 1.6rem;
}
/* --------------------------------------------------------------------------
   9. Botão de alternância de tema (claro / escuro)
   -------------------------------------------------------------------------- */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: transparent;
  color: var(--bs-heading-color);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s ease, border-color 0.15s ease;
}
.theme-toggle-btn:hover {
  background: rgba(var(--brand-accent-rgb), 0.16);
  border-color: rgba(var(--brand-accent-rgb), 0.4);
  color: var(--brand-accent-strong);
  transform: rotate(-12deg);
}
.theme-toggle-btn:focus-visible {
  outline: 2px solid rgba(var(--brand-accent-rgb), 0.8);
  outline-offset: 2px;
}
.theme-toggle-btn__icon-dark,
.theme-toggle-btn__icon-light {
  display: none;
}
html:not([data-bs-theme="dark"]) .theme-toggle-btn__icon-dark {
  display: inline-block;
}
html[data-bs-theme="dark"] .theme-toggle-btn__icon-light {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   10. Modo escuro — completa os tokens que o template não define para
   [data-bs-theme="dark"] (paper-bg, sombras, navbar) e ajusta os
   componentes próprios criados acima. O menu lateral já é sempre escuro,
   então não muda entre os dois modos.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  color-scheme: dark;
  /* O tema base define --bs-primary como preto (#000), pensado para fundo
     claro. No modo escuro isso deixa botões outline-primary e primary
     (Nova Consulta, Novo Exame, baixar anexo, etc.) pretos sobre fundo
     escuro, quase invisíveis. Aqui trocamos "primary" pelo verde da marca
     no modo escuro, igual já era feito só dentro do menu lateral. */
  --bs-primary: var(--brand-accent);
  --bs-primary-rgb: var(--brand-accent-rgb);
  --bs-primary-contrast: var(--brand-black);
  --bs-paper-bg: #17181c;
  --bs-paper-bg-rgb: 23, 24, 28;
  --bs-body-bg: #101114;
  --bs-body-bg-rgb: 16, 17, 20;
  --bs-base-color: #e7e9ea;
  --bs-base-color-rgb: 231, 233, 234;
  --bs-box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.45);
  --bs-box-shadow-xs: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.35);
  --bs-box-shadow-sm: 0 0.2rem 0.75rem 0 rgba(0, 0, 0, 0.4);
  --bs-box-shadow-lg: 0 0.35rem 1.25rem 0 rgba(0, 0, 0, 0.5);
  --bs-box-shadow-xl: 0 0.5rem 1.75rem 0 rgba(0, 0, 0, 0.55);
  --bs-floating-component-shadow: var(--bs-box-shadow);
  --bs-navbar-bg: var(--bs-paper-bg);
  --bs-navbar-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  --bs-navbar-border-color: rgba(255, 255, 255, 0.06);
  --bs-nav-border-color: var(--bs-paper-bg);
}
/* Restaura os tokens claros para qualquer trecho marcado explicitamente
   como data-bs-theme="light" (ex.: a tela de login, que tem um visual
   próprio e não deve escurecer junto com o resto do sistema), mesmo
   quando um ancestral (o <html>) está em modo escuro. */
[data-bs-theme="light"] {
  /* Desfaz a troca de "primary" para verde feita no modo escuro, caso este
     trecho claro esteja dentro de um <html> em modo escuro (ex.: login). */
  --bs-primary: #000000;
  --bs-primary-rgb: 105, 108, 255;
  --bs-primary-contrast: #fff;
  --bs-paper-bg: #fff;
  --bs-paper-bg-rgb: 255, 255, 255;
  --bs-base-color: #22303e;
  --bs-base-color-rgb: 34, 48, 62;
  --bs-box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
  --bs-box-shadow-xs: 0 0.0625rem 0.3175rem 0 rgba(34, 48, 62, 0.06);
  --bs-box-shadow-sm: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
  --bs-box-shadow-lg: 0 0.25rem 0.75rem 0 rgba(34, 48, 62, 0.14);
  --bs-box-shadow-xl: 0 0.3125rem 1.375rem 0 rgba(34, 48, 62, 0.18);
  --bs-floating-component-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
  --bs-navbar-bg: var(--bs-paper-bg);
  --bs-navbar-box-shadow: 0 0 10px #e4e6e8;
  --bs-navbar-border-color: var(--bs-paper-bg);
  --bs-nav-border-color: var(--bs-paper-bg);
}
[data-bs-theme="dark"] body {
  background-color: var(--bs-body-bg);
}
[data-bs-theme="dark"] .bg-white.rounded,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .info-card {
  border-color: rgba(255, 255, 255, 0.07);
}
[data-bs-theme="dark"] .bg-white.rounded {
  box-shadow: 0 0.6rem 1.75rem -0.75rem rgba(0, 0, 0, 0.55) !important;
}
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .info-card {
  box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .stat-card:hover {
  box-shadow: 0 1rem 2rem -0.5rem rgba(0, 0, 0, 0.55);
}
[data-bs-theme="dark"] .info-card .card-header {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
[data-bs-theme="dark"] .table thead th {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: rgba(var(--brand-accent-rgb), 0.1);
}
[data-bs-theme="dark"] .layout-navbar.navbar-detached {
  box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.55);
}
[data-bs-theme="dark"] .theme-toggle-btn {
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}
[data-bs-theme="dark"] ::selection {
  background-color: rgba(var(--brand-accent-rgb), 0.4);
  color: #fff;
}
/* --------------------------------------------------------------------------
   11. Agenda — colunas de dias (substituem a antiga tabela)
   -------------------------------------------------------------------------- */
.agenda-dias-grid {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
}
.agenda-dia-col {
  flex: 1 1 0;
  min-width: 175px;
  display: flex;
  flex-direction: column;
  background: var(--bs-paper-bg, #fff);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(15, 23, 42, 0.1);
  overflow: hidden;
}
.agenda-dia-col__header {
  text-align: center;
  padding: 0.65rem 0.5rem;
  background: rgba(var(--brand-accent-rgb), 0.08);
  color: var(--bs-heading-color);
}
.agenda-dia-col__weekday {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.agenda-dia-col__date {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 0.1rem;
}
.agenda-dia-col--hoje {
  border-color: rgba(var(--brand-accent-rgb), 0.55);
  box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(var(--brand-accent-rgb), 0.35);
}
.agenda-dia-col--hoje .agenda-dia-col__header {
  background: var(--brand-accent);
  color: var(--brand-black);
}
.agenda-dia-col__body {
  padding: 0.6rem;
  flex: 1 1 auto;
  min-height: 5.5rem;
}
.agenda-dia-col__empty {
  display: block;
  text-align: center;
  padding-block: 1.25rem;
  color: var(--bs-secondary-color);
}

/* Segurança extra: qualquer bg-white "solto" (sem .rounded) também respeita
   o modo escuro */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--bs-paper-bg) !important;
}
[data-bs-theme="dark"] .agenda-dia-col__header {
  background: rgba(var(--brand-accent-rgb), 0.14);
}