/* Odonto Sistema — tema base (estetica clinica).
   IMPORTANTE: --odo-primary, --odo-primary-dark, --odo-accent, --odo-bg
   sao definidas em base.html (inline) pra suportar temas sazonais.
   NAO redefinir aqui senao da conflito de cache. */
:root {
  --odo-sidebar-bg: #ffffff;
  --odo-sidebar-border: #e1efe6;
  --odo-text: #2c3e50;
  --odo-muted: #6c7a89;
  --odo-success: #1abc9c;
  --odo-warning: #f0ad4e;
  --odo-danger: #e74c3c;
}

html, body {
  background: var(--odo-bg);
  color: var(--odo-text);
  font-family: 'Inter', "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  letter-spacing: -.01em;
}

/* ----------------------------------------------------------------
   SCROLLBAR INVISIVEL GLOBAL — funcional, sem barra visivel
   (mesmo padrao do sistema_chamados)
   ---------------------------------------------------------------- */
* {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE / Edge antigo */
}
*::-webkit-scrollbar {           /* Chrome / Safari / Edge novo */
  width: 0;
  height: 0;
  display: none;
}

:root {
  --odo-sidebar-w: 220px;
  --odo-sidebar-w-collapsed: 60px;
}

.layout {
  display: flex;
  min-height: 100vh;
}

/* ----------------------------------------------------------------
   SIDEBAR — recolhida por padrão (60px), expande via toggle clicável.
   Estado salvo em localStorage (sidebar_expanded=true/false).
   ---------------------------------------------------------------- */
.sidebar {
  width: var(--odo-sidebar-w-collapsed);
  background: var(--odo-sidebar-bg);
  border-right: 1px solid var(--odo-sidebar-border);
  padding: .65rem .4rem .65rem;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s cubic-bezier(.4,0,.2,1);
}

/* Expandida: .expanded = fixada (pin), :hover = temporário */
.sidebar.expanded,
.sidebar:hover {
  width: var(--odo-sidebar-w);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
}

/* Textos — ocultos quando recolhida */
.sidebar .brand-text,
.sidebar .nav-item span,
.sidebar .nav-section-title,
.sidebar .user-name,
.sidebar .user-role,
.sidebar .logout-text,
.sidebar .sidebar-licenca,
.sidebar .alerta-mensalidade-text {
  opacity: 0;
  white-space: nowrap;
  transition: opacity .15s ease;
  pointer-events: none;
}
.sidebar.expanded .brand-text,
.sidebar.expanded .nav-item span,
.sidebar.expanded .nav-section-title,
.sidebar.expanded .user-name,
.sidebar.expanded .user-role,
.sidebar.expanded .logout-text,
.sidebar.expanded .sidebar-licenca,
.sidebar.expanded .alerta-mensalidade-text,
.sidebar:hover .brand-text,
.sidebar:hover .nav-item span,
.sidebar:hover .nav-section-title,
.sidebar:hover .user-name,
.sidebar:hover .user-role,
.sidebar:hover .logout-text,
.sidebar:hover .sidebar-licenca,
.sidebar:hover .alerta-mensalidade-text {
  opacity: 1;
  transition-delay: .06s;
  pointer-events: auto;
}

/* Botão de toggle fixo no topo da sidebar */
.sidebar-expand-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--odo-sidebar-border);
  color: var(--odo-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  font-size: .95rem;
  transition: background .15s, color .15s, transform .22s cubic-bezier(.4,0,.2,1);
  align-self: flex-end;
  margin-bottom: .4rem;
}
.sidebar-expand-btn:hover { background: var(--odo-accent); color: var(--odo-primary); }
.sidebar.expanded .sidebar-expand-btn { transform: rotate(180deg); align-self: flex-end; }

/* Esconde a barra/divisoria de licenca quando colapsada */
.sidebar .sidebar-licenca-card {
  overflow: hidden;
  height: auto;
  transition: opacity .15s, max-height .15s;
}

/* Versículo do dia + badge versão — barra fixa no rodapé */
.versiculo-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1040;
  background: var(--odo-accent);
  border-top: 1px solid var(--odo-primary);
  padding: 5px 12px;
  font-size: .72rem;
  color: #1a1a1a;
  text-align: center;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}
.versiculo-footer em { font-style: italic; color: #1a1a1a; }
.versiculo-footer strong { font-weight: 700; color: #1a1a1a; }
.versiculo-footer-versao {
  position: absolute;
  right: 10px;
  font-size: .65rem;
  font-family: monospace;
  color: #555;
  opacity: .85;
  pointer-events: none;
  user-select: none;
}
.versiculo-footer-only-versao {
  justify-content: flex-end;
  background: transparent;
  border-top: none;
}
/* Empurra o conteúdo principal pra não ficar escondido atrás da barra */
.main { padding-bottom: 36px; }

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--odo-primary);
  padding: .25rem .35rem .55rem;
  border-bottom: 1px solid var(--odo-sidebar-border);
  margin-bottom: .55rem;
  flex-shrink: 0;
}

.sidebar .brand .logo,
.sidebar .brand img {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--odo-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  object-fit: contain;
}
.sidebar .brand-text {
  min-width: 0;
  overflow: hidden;
}
.sidebar .brand-text .brand-name {
  font-size: .9rem;
  line-height: 1.15;
  color: var(--odo-primary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar .brand-text .brand-slogan {
  font-size: .68rem;
  color: var(--odo-muted);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Area de scroll dos itens */
.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.sidebar .nav-section { margin-bottom: .65rem; }

.sidebar .nav-section-title {
  font-size: .62rem;
  font-weight: 700;
  color: var(--odo-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0 .55rem;
  margin: .35rem 0 .15rem;
}

.sidebar .nav-item {
  display: flex; align-items: center;
  gap: .65rem;
  padding: .42rem .55rem;
  border-radius: 7px;
  color: var(--odo-text);
  text-decoration: none;
  font-weight: 500;
  font-size: .85rem;
  margin-bottom: 1px;
  position: relative;
}
.sidebar .nav-item:hover { background: var(--odo-accent); color: var(--odo-primary-dark); }
.sidebar .nav-item.active { background: var(--odo-primary); color: #fff; }
.sidebar .nav-item.active .icon { color: #fff; }
.sidebar .nav-item .icon {
  width: 18px; text-align: center; font-size: .95rem;
  flex-shrink: 0;
}

/* Footer da sidebar com user info + sair */
.sidebar-footer {
  flex-shrink: 0;
  padding: .55rem .35rem .35rem;
  border-top: 1px solid var(--odo-sidebar-border);
  margin-top: .35rem;
}
.sidebar-footer .user-info {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .4rem;
  padding: 0 .15rem;
  /* Quando colapsada, centraliza o avatar pra alinhar com o botao Sair abaixo */
  justify-content: center;
}
.sidebar:hover .sidebar-footer .user-info,
.sidebar:focus-within .sidebar-footer .user-info {
  justify-content: flex-start;
}
.sidebar-footer .user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--odo-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}
.sidebar-footer .user-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--odo-text);
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-footer .user-role {
  font-size: .65rem;
  color: var(--odo-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.sidebar-footer .btn-logout {
  width: 100%;
  padding: .35rem;
  background: transparent;
  border: 1px solid var(--odo-sidebar-border);
  color: var(--odo-muted);
  border-radius: 7px;
  font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  gap: .45rem;
  cursor: pointer;
  transition: var(--transition);
}
.sidebar-footer .btn-logout:hover {
  background: rgba(220,53,69,.08);
  border-color: rgba(220,53,69,.25);
  color: #dc3545;
}

/* Conteudo principal: margem segue estado da sidebar */
.main {
  flex: 1;
  padding: .9rem 1.25rem;
  min-width: 0;
  margin-left: var(--odo-sidebar-w-collapsed);
  width: calc(100% - var(--odo-sidebar-w-collapsed));
  transition: margin-left .22s cubic-bezier(.4,0,.2,1),
              width .22s cubic-bezier(.4,0,.2,1);
}
body.sidebar-desktop-expanded .main {
  margin-left: var(--odo-sidebar-w);
  width: calc(100% - var(--odo-sidebar-w));
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .75rem;
}

.page-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--odo-text);
  margin: 0;
  letter-spacing: -.02em;
}

.card-odo {
  background: #fff;
  border: 1px solid var(--odo-sidebar-border);
  border-radius: 10px;
  padding: .85rem 1rem;
  box-shadow: 0 1px 2px rgba(76,175,128,.06);
}

/* ----------------------------------------------------------------
   KPI CARDS — dashboard com tendência
   ---------------------------------------------------------------- */
.kpi-card {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .9rem 1rem !important;
}
.kpi-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
  margin-bottom: .2rem;
}
.kpi-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--odo-muted);
  line-height: 1.2;
}
.kpi-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--odo-text);
  letter-spacing: -.04em;
  line-height: 1.1;
}
.kpi-sub { font-size: .75rem; color: var(--odo-muted); }
.kpi-trend {
  font-size: .73rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .15em;
}
.kpi-trend-up      { color: #059669; }
.kpi-trend-down    { color: #dc2626; }
.kpi-trend-neutral { color: var(--odo-muted); }

.stat-card { display: flex; align-items: center; gap: .75rem; }
.stat-card .icon-circle {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--odo-accent); color: var(--odo-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
}
.stat-card .label { color: var(--odo-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.stat-card .value { font-size: 1.45rem; font-weight: 700; color: var(--odo-text); letter-spacing: -.03em; line-height: 1.1; }

/* Tabelas mais densas por padrao */
.table > :not(caption) > * > * { padding: .45rem .55rem; }
.table thead th { font-size: .82rem; }
.table td, .table th { font-size: .9rem; }

/* Forms mais compactos */
.form-label { margin-bottom: .2rem; font-size: .85rem; font-weight: 500; }
.form-control, .form-select { padding: .35rem .65rem; font-size: .9rem; }
.form-text { font-size: .78rem; }
.mb-3 { margin-bottom: .75rem !important; }

/* Botoes em geral um pouco menores */
.btn { padding: .35rem .75rem; font-size: .9rem; }
.btn-sm { padding: .25rem .55rem; font-size: .8rem; }
.btn-lg { padding: .55rem 1.1rem; font-size: 1rem; }

/* Cabecalhos dentro de cards: sem margin-bottom default do bootstrap */
.card-odo h1, .card-odo h2, .card-odo h3, .card-odo h4, .card-odo h5, .card-odo h6 {
  margin-bottom: .5rem;
}

/* Espacamentos padrao mais apertados */
.mb-4 { margin-bottom: 1rem !important; }
.mt-4 { margin-top: 1rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.g-3 { --bs-gutter-y: .75rem; --bs-gutter-x: .75rem; }

/* Separador vertical entre botoes (Bootstrap .vr default tem 100% altura) */
.vr { margin-top: .25rem; margin-bottom: .25rem; opacity: .25; }

.btn-primary { background: var(--odo-primary); border-color: var(--odo-primary); }
.btn-primary:hover { background: var(--odo-primary-dark); border-color: var(--odo-primary-dark); }
.btn-outline-primary { color: var(--odo-primary); border-color: var(--odo-primary); }
.btn-outline-primary:hover { background: var(--odo-primary); color: #fff; }

.table thead th { background: var(--odo-accent); color: var(--odo-primary-dark); border-bottom: 0; font-weight: 600; }
.badge-status {
  padding: .3em .75em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .73rem;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  white-space: nowrap;
}
.badge-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.badge-PENDENTE  { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.badge-PENDENTE::before  { background: #f59e0b; }
.badge-CONFIRMADO { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.badge-CONFIRMADO::before { background: #10b981; }
.badge-FINALIZADO { background: #c7f2e0; color: #064e3b; border: 1px solid #34d399; }
.badge-FINALIZADO::before { background: #059669; }
.badge-CANCELADO  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-CANCELADO::before  { background: #ef4444; }
/* Status extras usados em orcamentos/atestados */
.badge-ACEITO   { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.badge-ACEITO::before { background: #10b981; }
.badge-RECUSADO { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-RECUSADO::before { background: #ef4444; }
.badge-EXPIRADO { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.badge-EXPIRADO::before { background: #9ca3af; }
.badge-PAGO  { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.badge-PAGO::before  { background: #10b981; }
.badge-VENCIDO { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-VENCIDO::before { background: #ef4444; }
.badge-REVOGADO { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.badge-REVOGADO::before { background: #9ca3af; }

/* ----------------------------------------------------------------
   EMPTY STATE — estado vazio de tabelas e listas
   ---------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--odo-muted);
}
.empty-state svg {
  width: 72px; height: 72px;
  opacity: .45;
  margin-bottom: 1rem;
  display: block;
  margin-left: auto; margin-right: auto;
}
.empty-state .empty-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--odo-text);
  margin-bottom: .3rem;
  opacity: .7;
}
.empty-state .empty-sub {
  font-size: .82rem;
  color: var(--odo-muted);
  margin-bottom: 1rem;
}

/* Busca AJAX */
.ajax-search-wrap { position: relative; }
.ajax-search-results {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--odo-sidebar-border);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  max-height: 320px; overflow-y: auto;
  z-index: 1000;
  display: none;
}
.ajax-search-results.show { display: block; }
.ajax-search-results .item {
  display: block; padding: .6rem .9rem;
  color: var(--odo-text); text-decoration: none;
  border-bottom: 1px solid #eaf4ee;
}
.ajax-search-results .item:hover { background: var(--odo-accent); }
.ajax-search-results .item small { color: var(--odo-muted); }

/* Odontograma */
.odontograma { display: flex; flex-direction: column; gap: .5rem; align-items: center; padding: 1rem; overflow-x: auto; }
.odontograma .linha { display: flex; gap: 6px; }
.dente {
  width: 44px; height: 58px;
  border: 2px solid #cfd8e3;
  border-radius: 8px 8px 14px 14px;
  background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 4px;
  cursor: pointer; position: relative;
  font-size: .72rem; color: var(--odo-muted);
  transition: transform .08s ease;
  flex-shrink: 0;
}
.dente:hover { transform: translateY(-2px); }
@media (max-width: 576px) {
  .odontograma { padding: .4rem .25rem; gap: .3rem; }
  .odontograma .linha { gap: 3px; }
  .dente { width: 22px; height: 34px; font-size: .5rem; border-radius: 4px 4px 8px 8px; border-width: 1px; padding-bottom: 2px; }
}
.dente[data-estado="HIGIDO"] { background: #fff; }
.dente[data-estado="CARIADO"] { background: #f8e4e1; border-color: #e74c3c; }
.dente[data-estado="RESTAURADO"] { background: #d9f0e2; border-color: #3a8e66; }
.dente[data-estado="AUSENTE"] { background: #dfe3e8; border-color: #6c7a89; opacity: .55; }
.dente[data-estado="CANAL"] { background: #fff4e0; border-color: #f0ad4e; }
.dente[data-estado="EXTRAIR"] { background: #ffe3e0; border-color: #b0372a; }
.dente[data-estado="PROTESE"] { background: #e0f6ef; border-color: #1abc9c; }

.sidebar-licenca {
  background: var(--odo-accent);
  border: 1px solid var(--odo-sidebar-border);
}

/* Toggle button (so aparece em mobile) */
.sidebar-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: .75rem;
  background: #fff; border: 1px solid var(--odo-sidebar-border);
  border-radius: 10px;
  color: var(--odo-primary); font-size: 1.4rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.sidebar-toggle:hover { background: var(--odo-accent); }

/* Backdrop quando a sidebar esta aberta em mobile */
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 1040;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    width: 260px !important;
    height: 100vh;
    transition: left .25s ease;
    z-index: 1050;
    box-shadow: 0 0 25px rgba(0,0,0,.15);
    overflow-y: auto;
  }
  .sidebar.open { left: 0; }
  /* No mobile, sidebar nao expande no hover (eh sempre off-canvas) */
  .sidebar:hover { width: 260px !important; box-shadow: 0 0 25px rgba(0,0,0,.15); }
  /* Forca textos visiveis sempre quando aberta no mobile */
  .sidebar .brand-text,
  .sidebar .nav-item span,
  .sidebar .nav-section-title,
  .sidebar .user-name,
  .sidebar .user-role,
  .sidebar .logout-text,
  .sidebar .sidebar-licenca,
  .sidebar .alerta-mensalidade-text { opacity: 1 !important; pointer-events: auto !important; }

  .main { padding: .6rem; margin-left: 0 !important; width: 100% !important; }
  body.sidebar-open { overflow: hidden; }

  /* Touch-friendly: botoes maiores no mobile (Apple/Material guideline = 44px) */
  .btn { min-height: 38px; padding: .5rem .85rem; }
  .btn-sm { min-height: 34px; padding: .4rem .65rem; font-size: .85rem; }

  /* Inputs com font-size 16px evitam zoom automatico no iOS */
  .form-control, .form-select { font-size: 16px; padding: .5rem .65rem; }
  .form-control-sm, .form-select-sm { font-size: 14px; padding: .4rem .55rem; }

  /* Tabelas: padding minimo, fonte menor, scroll horizontal se nao couber */
  .table > :not(caption) > * > * { padding: .4rem .35rem; font-size: .82rem; }
  .table thead th { font-size: .75rem; }

  /* Cards: padding ainda menor no mobile */
  .card-odo { padding: .65rem .75rem; }

  /* page-title menor em mobile */
  .page-title { font-size: 1.1rem; }
  .topbar { margin-bottom: .5rem; }

  /* Esconder nome do usuario no topo (sobra o botao Sair) */
  .topbar .text-muted.small { display: none; }
}

/* Em desktop, esconde toggle e backdrop */
@media (min-width: 769px) {
  .sidebar-toggle { display: none !important; }
  .sidebar-backdrop { display: none !important; }
}

/* ----------------------------------------------------------------
   MODO 'MODAL' — quando o template eh carregado dentro de iframe
   modal (?modal=1), esconde sidebar/topbar/badges pra parecer um
   formulario inline.
   ---------------------------------------------------------------- */
.body-modal .sidebar,
.body-modal .topbar,
.body-modal .versao-badge,
.body-modal .alerta-2fa,
.body-modal .copa-faixa,
.body-modal .sidebar-backdrop,
.body-modal .sidebar-toggle { display: none !important; }
.body-modal .main {
  margin-left: 0 !important;
  width: 100% !important;
  padding: .75rem 1rem !important;
}
.body-modal .layout { display: block; }
/* Cards de form que tinham max-width preenchem toda largura no modal */
.body-modal .card-odo { max-width: 100% !important; }