/* =========================
   THEME & TOKENS
========================= */
:root {
  --bg:#0b1020;
  --card:#121a34;
  --text:#e9ecf1;
  --muted:#9fb0d0;
  --accent:#6aa6ff;

  /* tokens usados ao longo do layout */
  --text-2: #e9ecf1;           /* antes referenciado como var(--text-2) */
  --border:#1d2747;            /* usado em várias bordas */
  --u-aqua:#21c7d9;            /* cor lateral p/ Agendado */
  --u-earth:#c08a2d;           /* cor lateral p/ Não compareceu */
  --topbar-h: 44px;            /* altura do cabeçalho */
}

/* =========================
   BASE
========================= */
* { box-sizing: border-box; font-family: system-ui, Segoe UI, Roboto, Arial; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); overflow: auto; }

/* Na página de Agenda removemos a rolagem global — cada coluna gerencia sua rolagem */
body.agenda { overflow: hidden; }

/* Links */
a { color: var(--accent); text-decoration: none; }

/* Tipografia e containers */
h1, h2, h3 { margin: 0 0 8px; }
.container { width: min(96vw, 1280px); margin: 24px auto; padding: 0 16px; }

/* Cartão */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

/* Grids utilitários */
.grid { display: grid; gap: 16px; align-items: start; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 640px){ .grid-2 { grid-template-columns: 1fr; } }

/* Form */
label { display:block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
input, select, textarea {
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid #28345c; background:#0e1530; color:var(--text);
}
button {
  padding:10px 14px; border-radius:10px; border:1px solid #2d5fff;
  background:#143975; color:white; cursor:pointer;
}
button.secondary { background:transparent; border-color:#3a4b80; color:var(--muted); }

/* Listas */
.list { border-top:1px solid var(--border); margin-top:12px; overflow:visible; }
.item {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding:12px 10px; border-bottom:1px solid var(--border);
}
.item.clickable { cursor: pointer; }
.item.clickable:hover { background: rgba(255,255,255,.03); }
.list .item > div:first-child { flex: 1 1 auto; min-width: 0; }
.list .item > div:last-child  { flex: 0 0 auto; }
.list .item b, .list .item small { word-break: break-word; }
small { color: var(--muted); }

/* Badges / Status */
.badge { background:#0b2b6b; color:#a6c5ff; padding:4px 8px; border-radius:999px; font-size:12px; }
.badge.st-agendado  { background:#0b2b6b; color:#a6c5ff; }
.badge.st-atendido  { background:#124d2a; color:#b9f6ce; }
.badge.st-nshow     { background:#6b3e0b; color:#ffd9a6; }
.badge.st-cancelado { background:#5c1a1a; color:#ffb3b3; }

/* Cartões de agendamento com destaque lateral por status */
.list.appts .item{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0;
  background: rgba(255,255,255,.02);
}
.list.appts .item:hover{ background: rgba(255,255,255,.04); }
.list.appts .item b{ font-size: 16px; }
.list.appts .item small{ color: var(--text-2); }
.list.appts .item:has(.badge.st-agendado)  { border-left: 4px solid var(--u-aqua); }
.list.appts .item:has(.badge.st-atendido)  { border-left: 4px solid #2aa37b; }
.list.appts .item:has(.badge.st-nshow)     { border-left: 4px solid var(--u-earth); }
.list.appts .item:has(.badge.st-cancelado) { border-left: 4px solid #b04b4b; }
@media (max-width: 768px) {
  .list .item { flex-direction: column; }
  .list .item > div:last-child { align-self: flex-end; }
}

/* =========================
   TOPBAR
========================= */
.topbar {
  display:flex; align-items:center; gap:12px;
  justify-content:space-between;
  padding: 8px 16px;           /* topo mais “fininho” */
  border-bottom:1px solid var(--border);
  background: var(--card);
  position: sticky; top: 0; z-index: 50;
}
.brand { font-weight: 700; letter-spacing:.3px; color:#cfe0ff; display:flex; align-items:center; gap:8px; }
.brand img.logo{ width: 300px; }      /* logo menor */
.menu { display:flex; gap: 12px; }
/*.menu a{
  padding:6px 10px; border-radius:10px; border:1px solid transparent;
  color: var(--text); opacity:.9; font-size:14px;
}
/*.menu a:hover { border-color:#2d5fff; opacity:1; }
.menu a.active { background:#0b2b6b; color:#a6c5ff; border-color:#2d5fff; }*/
.topbar .user-slot { margin-left:auto; display:flex; align-items:center; gap:8px; }

/* Subnav (usado em formulários) */
.subnav { display:flex; gap:8px; margin:12px 0 0; }
.subnav a { padding:8px 12px; border-radius:10px; border:1px solid #2d3a66; color:var(--text); opacity:.9; }
.subnav a.active { background:#0b2b6b; color:#a6c5ff; border-color:#2d5fff; }
.subnav a:hover { opacity:1; }

/* =========================
   DIALOG / MODAL
========================= */
dialog {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 16px;
  padding: 0;
  inset: 0; margin: auto;
  width: min(96vw, 1000px);
  max-height: 92vh;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
.dialog-card {
  background: transparent; border: none; box-shadow: none;
  padding: 16px; max-height: calc(92vh - 16px); overflow: auto;
}

/* =========================
   PRINT
========================= */
@media print {
  .topbar, .subnav, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .print-card { background: #fff; color:#000; border: none; box-shadow: none; padding: 0; }
  a { color: #000; text-decoration: none; }
}

/* =========================
   FORM COMPACT HELPERS
========================= */
.form-compact label{ font-size:12px; color: var(--text-2); margin-bottom:6px; }
.form-compact input, .form-compact select, .form-compact textarea{
  padding:8px 10px; font-size:14px; border-radius:10px;
}
/* input + botão na mesma linha (responsivo) */
.field-inline{
  display:grid; grid-template-columns: minmax(0,1fr) auto; gap:8px; align-items:end;
}
@media (max-width: 600px){
  .field-inline{ grid-template-columns: 1fr; }
  .field-inline button{ justify-self: end; }
}
/* 2 colunas equilibradas (quebra p/ 1 no mobile) */
.row-2-balanced{ display:grid; gap:12px; grid-template-columns: 1fr; }
@media (min-width: 900px){ .row-2-balanced{ grid-template-columns: repeat(2, minmax(280px,1fr)); } }
/* Data & Hora juntos; Duração e Modo em linhas separadas (se preferir, use row-4-tight) */
.row-2-tight{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px){ .row-2-tight{ grid-template-columns: 1fr; } }
/* 4 colunas compactas (desktop) */
.row-4-tight{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(140px, 1fr)); }
@media (min-width: 900px){ .row-4-tight{ grid-template-columns: repeat(4, minmax(140px, 1fr)); } }
.actions-right{ display:flex; justify-content:flex-end; gap:8px; }

/* =========================
   AGENDA – SPLIT LAYOUT
========================= */
/* Wrapper de página (apenas na agenda) */
.main-split{
  height: calc(100vh - var(--topbar-h));
  width: min(96vw, 1280px);
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 0.8fr 1.7fr;    /* Agenda mais larga */
  gap: 20px;
  overflow: hidden;
}
@media (max-width: 1080px){
  body.agenda { overflow: auto; }        /* mobile: volta rolagem da página */
  .main-split{ height:auto; grid-template-columns: 1fr; }
}

/* Colunas */
.left-pane{
  /* sem rolagem “forçada”: se o conteúdo crescer muito, aparece barra, mas evitamos cortes */
  min-height: 0; overflow: auto;
}
.right-pane{ display: flex; flex-direction: column; overflow: hidden; }

/* Agenda: cabeçalho fixo + lista rolável */
.agenda-card{ display:flex; flex-direction:column; }
.agenda-body{ display:flex; flex-direction:column; height:100%; overflow:hidden; min-height:0; }
.agenda-sticky{
  position: sticky; top: 0; z-index: 2;
  background: var(--card);
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 12px rgba(0,0,0,.16);
}
.agenda-sticky h2{ margin:0 0 8px; }

/* Filtros: De • Até • Buscar • Botão na mesma linha */
.agenda-filters{
  display:grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap:12px; align-items:end;
}
@media (max-width: 900px){
  .agenda-filters{ grid-template-columns: 1fr; }
}

/* Onde a rolagem acontece (única) */
.agenda-list{ flex:1; overflow:auto; padding-top: 6px; scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable) { .agenda-list { padding-right: 8px; } }
/* === Somente a AGENDA com rolagem visível === */
body.agenda { overflow: hidden; }            /* página da Agenda sem scroll global */
.main-split { overflow: hidden; }            /* contêiner geral sem rolamento */
.left-pane { overflow: hidden; }             /* NADA de scroll na coluna esquerda */
.left-pane .form-scroll { overflow: visible; }

/* Agenda (direita): apenas a LISTA rola */
.right-pane { overflow: hidden; }
.agenda-body { overflow: hidden; height: 100%; }
.agenda-list {
  overflow-y: auto !important;               /* barra única aqui */
  scrollbar-gutter: stable both-edges;       /* reserva espaço p/ barra */
}
@supports not (scrollbar-gutter: stable) {
  .agenda-list { padding-right: 8px; }
}

/* Se o "Novo paciente" ficar muito alto, rola só o conteúdo dele */
.left-pane details[open] > div {
  max-height: calc(100vh - var(--topbar-h) - 260px);
  overflow: auto;
}


/* Só a Agenda rola */
body.agenda { overflow: hidden; }
.main-split{ height: calc(100vh - var(--topbar-h)); overflow: hidden; }

/* liberar encolhimento dos filhos flex */
.right-pane,
.agenda-card,
.agenda-body,
.agenda-list { min-height: 0; }

.right-pane   { display:flex; flex-direction:column; overflow:hidden; }
.agenda-card  { display:flex; flex-direction:column; overflow:hidden; }
.agenda-body  { display:flex; flex-direction:column; height:100%; overflow:hidden; }

/* barra ÚNICA aqui */
.agenda-list{
  flex: 1 1 auto;
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}

/* coluna esquerda sem scroll externo */
.left-pane{ overflow:hidden; }
.left-pane .form-scroll{ overflow:visible; }

/* se “Novo paciente” ficar muito alto, rola só ele */
.left-pane details[open] > div{
  max-height: calc(100vh - var(--topbar-h) - 260px);
  overflow:auto;
}

/* páginas em split (lista rola; página não) */
body.agenda,
body.catalog { overflow: hidden; }
.badge.st-remarcado { background:#0b476b; color:#a6e8ff; }


/* ===== Usuários: formulário sem cortes ===== */
body.users .main-split{
  grid-template-columns: 0.9fr 1.3fr; /* form à esquerda + lista à direita */
}

.users-form .row-2{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(260px, 1fr)); /* 2 colunas confortáveis */
}
@media (max-width: 1200px){
  .users-form .row-2{ grid-template-columns: 1fr; } /* quebra p/ 1 coluna se apertar */
}

/* 3 campos na mesma linha (se você usar em algum ponto) */
.users-form .row-3{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}
@media (max-width: 1200px){ .users-form .row-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .users-form .row-3{ grid-template-columns: 1fr; } }

/* campo que deve ocupar a linha inteira */
.users-form .wide{ grid-column: 1 / -1; }

/* garante que nada fica escondido no card da esquerda */
.left-pane{ overflow: visible; }

/* filtros da lista (direita) se ajustam em uma linha e quebram no mobile */
.users-filters{
  display: grid;
  grid-template-columns: 1fr 180px auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 900px){
  .users-filters{ grid-template-columns: 1fr; }
}


/* barra fixa dentro do card de recebíveis */
.recebiveis-sticky{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--card);
  padding: 10px 0 12px;
  border-bottom: 1px solid #1d2747;
  box-shadow: 0 6px 12px rgba(0,0,0,.18);
}

/* grid dos cartões de totais */
.totais-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 680px){
  .totais-grid{ grid-template-columns: 1fr; }
}

.total-card{
  background: rgba(255,255,255,.03);
  border: 1px solid #1d2747;
  border-radius: 12px;
  padding: 12px;
}

.total-label{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.total-value{
  font-size: 20px;
  font-weight: 700;
}

#btnFilter{
  width: 80px;
}

#q{
  width: 300px;
}
#p_q{width: 300px;}

/* ===== Recebíveis: filtros compactos em uma linha ===== */
.agenda-sticky .agenda-filters{
  display:grid;
  grid-template-columns: 140px 140px 1fr 170px auto; /* De | Até | Buscar | Status | Botão */
  gap: 10px;
  align-items: end;
}
.agenda-sticky .agenda-filters input[type="date"],
.agenda-sticky .agenda-filters input[type="text"],
.agenda-sticky .agenda-filters select{
  min-width: 0;  /* deixa encolher sem estourar */
}
.agenda-sticky .agenda-filters #btnFilter{
  white-space: nowrap;
}

/* Responsivo: quebra de forma elegante */
@media (max-width: 900px){
  .agenda-sticky .agenda-filters{
    grid-template-columns: 1fr 1fr;
  }
  .agenda-sticky .agenda-filters > *:nth-child(3){ grid-column: span 2; } /* Buscar */
  .agenda-sticky .agenda-filters > *:nth-child(5){ grid-column: span 2; } /* Botão */
}

/* ===== Totais: cards com destaque ===== */
.totals-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0;
}
.total-card{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border, #1d2747);
  background: rgba(255,255,255,.02);
}
.total-card small{ color: var(--muted); display:block; margin-bottom: 6px; }
.total-card .value{ font-weight: 700; font-size: 18px; }

/* Borda azul (padrão agenda) p/ "Em aberto" */
.total-card--aberto{ border-left: 4px solid #0b2b6b; }

/* Destaque VERDE (igual status recebido) para "Total recebido" */
.total-card--recebido{
  border-left: 4px solid #2aa37b;             /* verde */
  background: rgba(18,77,42,.23);              /* leve fundo */
  box-shadow: inset 0 0 0 1px rgba(42,163,123,.14);
}
.total-card--recebido .value{
  color: #b9f6ce;                               /* mesmo tom da badge recebida */
}


.agenda-filter{
  display:grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap:12px; align-items:end; 
}

/* ===== Contas a pagar / Fornecedores: mesmo grid da Agenda,
   mas com a coluna ESQUERDA mais estreita ===== */
.main-split.pay{
  grid-template-columns: 0.42fr 1.58fr;  /* antes estava largo demais à esquerda */
  gap: 16px;
  overflow: hidden;
}
@media (min-width: 1440px){
  .main-split.pay{ grid-template-columns: 0.38fr 1.62fr; }
}
@media (max-width: 1080px){
  .main-split.pay{ grid-template-columns: 1fr; } /* empilha no mobile */
}

/* Garante que a direita pode encolher e não “corte” conteúdo */
.pay .right-pane,
.pay .agenda-card,
.pay .agenda-body,
.pay .agenda-list { min-width: 0; }

/* A coluna da ESQUERDA não passa do razoável */
.pay .left-pane{ min-width: 320px; max-width: 460px; overflow:auto; }

/* Itens da lista nunca extrapolam a largura */
.pay .list.appts .item{ max-width: 100%; }

/* Linha de edição (valor/forma/botões) mais compacta e sem quebra ruim */
.pay .list.appts .item .grid{
  grid-template-columns: 120px 220px !important;  /* Valor | Forma */
  gap: 10px;
}
.pay .list.appts .item .grid input[type="number"]{ width: 120px; }
.pay .list.appts .item .grid select{ width: 220px; }

/* Botões ao lado (na mesma linha) e sem estourar */
.pay .list.appts .item .actions-right{
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;             /* se apertar, quebra com elegância */
}
.pay .list.appts .item .actions-right button{ white-space: nowrap; }
/* ===== Novo a pagar (coluna esquerda) ===== */

/* Data menor; Valor ocupa o restante */
.pay .left-pane .row-venc-valor{
  display: grid;
  grid-template-columns: 140px 1fr;   /* data mais estreita */
  gap: 12px;
  align-items: end;
}
.pay .left-pane .row-venc-valor input[type="date"]{ min-width: 0; }

/* Recorrente + Quantidade em linha (elegante) */
.pay .left-pane .row-recorrencia{
  display: grid;
  grid-template-columns: auto 1fr;    /* checkbox + quantidade */
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}
.pay .left-pane .chk-inline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Se o espaço apertar, empilha os pares de campos */
@media (max-width: 1280px){
  .pay .left-pane .row-venc-valor{ grid-template-columns: 1fr; }
  .pay .left-pane .row-recorrencia{ grid-template-columns: 1fr; }
}

/* (opcional) dá um tiquinho mais de folga para a lista à direita em telas médias */
@media (max-width: 1360px){
  .main-split.pay{ grid-template-columns: 0.44fr 1.56fr; }
}
:root{
  /* ajuste aqui se quiser ainda mais largo (ex.: 1560px ou 1680px) */
  --page-max: 1440px;
}

/* containers principais mais largos */
.container{ width:min(var(--page-max), 98vw); }
.main-split{ width:min(var(--page-max), 98vw); }

/* se quiser a coluna da direita ainda mais dominante nas telas grandes */
@media (min-width: 1200px){
  .main-split{ grid-template-columns: .8fr 2fr; } /* esq menor | dir maior */
}
.hidden { display: none; }

/* ===== Agenda: Lista por hora ===== */
.hour-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hour-slot{
  display: grid;
  grid-template-columns: 80px 1fr;   /* coluna da hora + coluna dos cards */
  align-items: start;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

.hour-label{
  color: var(--muted);
  font-weight: 600;
  padding-top: 4px;
}

.hour-items .item{
  margin-bottom: 8px;               /* espaço entre agendamentos da mesma hora */
}

/* ===== Agenda: header fixo ===== */
.agenda-card .agenda-sticky{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card-bg, #0f172a); /* mantém o fundo ao rolar */
  padding-bottom: 8px;
}

/* ===== Lista por hora: grid compacto para vários cards por linha ===== */
.hour-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hour-slot{
  display: grid;
  grid-template-columns: 72px 1fr;     /* coluna da hora + coluna dos cards */
  align-items: start;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

.hour-label{
  color: var(--muted);
  font-weight: 600;
  padding-top: 6px;
}

/* vários cards na mesma linha (ajuste o minmax para ampliar/reduzir) */
.hour-items{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

/* cartão mais compacto */
.hour-items .item{
  padding: 10px 12px;
  border-radius: 12px;
}

.hour-items .item b{
  font-size: .98rem;
  line-height: 1.2;
}

.hour-items .item small{
  color: var(--muted);
}


/* Cabeçalho da agenda: filtros e modos na mesma linha */
.agenda-filters{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;          /* quebra elegante se faltar espaço */
}

/* empurra os botões de modo para a direita em telas largas */
.agenda-filters .spacer{
  flex: 1 1 auto;
}

/* inputs e botão de filtro com altura consistente */
.agenda-filters input[type="date"],
.agenda-filters input[type="text"],
.agenda-filters button{
  height: 36px;
}

/* rótulo “Modo:” */
.agenda-filters .mode-label{
  font-size: 0.9rem;
  opacity: 0.85;
  margin-right: 2px;
  white-space: nowrap;
}

/* grupo dos botões de modo */
.agenda-filters .mode-group{
  display: flex;
  gap: 8px;
}

/* responsivo: em telas menores, empilha tudo e remove o espaçador */
@media (max-width: 768px){
  .agenda-filters{
    flex-direction: column;
    align-items: stretch;
  }
  .agenda-filters .spacer{ display: none; }
  .agenda-filters .mode-group{
    justify-content: center;
  }
}