/* Central de Comando — o novo /app. Ver docs/frontend-css-guidelines.md §8. */

.command-center-page {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Números empilhados só alinham com casas de mesma largura — mesmo motivo de
   .reports-page .reports-figure. */
.command-center-page .cc-figure {
  font-variant-numeric: tabular-nums;
}

/* A caixa de rolagem do card de aniversariantes — hoje e os próximos dias
   juntos, numa lista só, como qualquer outra lista rolável.

   21rem é medido, não escolhido: a linha do card mede 3.25rem (py-2 mais o nome
   em text-sm e a idade em text-xs) e o rótulo do dia, 1.6rem. Seis nomes mais um
   rótulo dão exatamente isto. Passar daí é onde o card deixa de ser um resumo e
   vira uma lista — e ele não tem "Ver tudo" para onde mandar quem lê.

   O teto é o mesmo em toda largura, de propósito. Enquanto ele vinha da agenda
   ao lado (`flex-1` numa linha de grade esticada), o card tinha a altura da
   agenda e trinta linhas dentro: alto por acidente do vizinho, não por
   decisão. */
.command-center-page .cc-scroll-body {
  max-height: 21rem;
}

/* A casca v2 (proposta em teste, ligada por `?v=2`).

   A moldura passa do bloco para a FOLHA: um bloco é uma seção dela, e quem
   desenha borda, fundo e padding horizontal é a folha. O `.cc-sheet-block` não
   pinta nada — existe para dizer isso em uma classe, e para que o
   `turbo_stream.update` de uma ação inline tenha onde cair sem trazer moldura
   junto. */
.command-center-page--v2 .cc-sheet-block {
  min-width: 0;
}

/* Na folha, o teto da lista de aniversariantes é mais baixo: ele divide a
   coluna da direita com "A fazer", e as 21rem da casca de cards empurravam a
   segunda seção para fora da tela — que é exatamente o que esta casca veio
   resolver. Seis nomes viram quatro; o "+N neste dia" continua dizendo o que
   não coube. */
.command-center-page--v2 .cc-scroll-body {
  max-height: 15rem;
}

/* Proposta comparável em /app?v=3. Estilos restritos a esta apresentação. */
.cc-proposal-summary { display:flex; flex-wrap:wrap; background:white; border:1px solid #e2e8f0; border-radius:16px; padding:8px; }
.cc-proposal .cc-proposal-metric { display:flex; align-items:center; gap:12px; flex:1 1 180px; padding:16px; text-decoration:none; border-radius:10px; }
.cc-proposal .cc-proposal-metric:hover { background:#f8fafc; }
.cc-proposal-metric-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#eff6ff; color:#2563eb; }
.cc-proposal-metric strong { display:block; font-size:26px; line-height:1.15; font-variant-numeric:tabular-nums; }
.cc-proposal-metric span span { display:block; margin-top:4px; color:#64748b; font-size:12px; }
.cc-proposal-nudge { display:flex; align-items:center; gap:14px; padding:16px 20px; border:1px solid #dbeafe; background:#f0f6ff; border-radius:12px; }
.cc-proposal-nudge p { flex:1; margin:0; font-size:13px; color:#334155; }
.cc-proposal-nudge p span { display:block; margin-top:3px; color:#64748b; }
.cc-proposal-nudge a { color:#1d4ed8; font-size:12px; white-space:nowrap; }
.cc-proposal-columns { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:24px; align-items:start; }
.cc-proposal-primary,.cc-proposal-secondary { display:flex; flex-direction:column; gap:18px; min-width:0; }
.cc-proposal-section-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px; padding:0 2px; }
.cc-proposal-section-heading > span { font-size:15px; font-weight:600; color:#0f172a; }
.cc-proposal-section-heading small { font-size:11px; color:#64748b; }
.cc-proposal .cc-block { border-radius:14px; box-shadow:0 2px 6px #0f172a03; }
.cc-proposal .cc-block > header { border-bottom-color:#f1f5f9; }
@media(max-width:1100px) { .cc-proposal-columns { grid-template-columns:minmax(0,1fr); } }
@media(max-width:640px) { .cc-proposal-nudge { flex-wrap:wrap; } .cc-proposal-nudge a { margin-left:28px; } .cc-proposal .cc-proposal-metric { flex-basis:130px; padding:12px; } }

/* A apresentação experimental inclui a moldura da aplicação apenas em /app. */
body.cc-proposal-shell {
  --cc-canvas: #f4f6fa;
  --cc-border: #e7ebf2;
  --cc-heading: #102039;
  --cc-blue: #2563eb;
  --cc-blue-wash: #edf3ff;
  background: var(--cc-canvas);
  color: var(--cc-heading);
}
.cc-proposal-shell .app-shell-frame { padding:0 28px 32px 0; }
.cc-proposal-shell .app-shell-topbar { background:transparent; border:0; margin-bottom:12px; min-height:80px; }
.cc-proposal-shell .app-shell-page-title { color:#64748b; font-size:12px; letter-spacing:.025em; }
.cc-proposal-shell .cc-proposal-welcome { padding:8px 0 10px; }
.cc-proposal-shell .cc-proposal-welcome h1 { font-size:30px; line-height:1.25; color:var(--cc-heading); letter-spacing:-1px; }
.cc-proposal-shell .cc-proposal-welcome > div > p:first-child { font-size:11px; letter-spacing:.035em; margin-bottom:8px; }
.cc-proposal-shell .cc-proposal-summary { border-color:var(--cc-border); padding:10px 4px; box-shadow:var(--jo-shadow-card); }
.cc-proposal-shell .cc-proposal-metric { border-radius:0; padding:12px 22px; }
.cc-proposal-shell .cc-proposal-metric + .cc-proposal-metric { border-left:1px solid var(--cc-border); }
.cc-proposal-shell .cc-proposal-metric strong { font-size:29px; font-weight:650; letter-spacing:-.8px; }
.cc-proposal-shell .cc-proposal-metric-icon { width:42px; height:42px; flex-shrink:0; background:var(--cc-blue-wash); color:var(--cc-blue); border-radius:12px; }
.cc-proposal-shell .cc-proposal-metric:nth-child(2) .cc-proposal-metric-icon { background:#fff1ee; color:#c44a3b; }
.cc-proposal-shell .cc-proposal-metric:nth-child(3) .cc-proposal-metric-icon { background:#f2edff; color:#7957c5; }
.cc-proposal-shell .cc-proposal-metric:nth-child(4) .cc-proposal-metric-icon { background:#fff5e3; color:#aa7628; }
.cc-proposal-shell .cc-proposal-nudge { border:0; background:#eaf0fc; padding:15px 20px; }
.cc-proposal-shell .cc-proposal-columns { gap:22px; }
.cc-proposal-shell .cc-proposal .cc-block { padding:24px; border:1px solid var(--cc-border); border-radius:16px; box-shadow:var(--jo-shadow-card); }
.cc-proposal-shell .cc-proposal .cc-block > header { margin-bottom:12px; padding-bottom:16px; align-items:center; }
.cc-proposal-shell .cc-proposal .cc-block h2 { font-size:17px; letter-spacing:-.35px; color:var(--cc-heading); }
.cc-proposal-shell .cc-proposal .cc-block h2 i { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--cc-blue-wash); color:var(--cc-blue); font-size:14px; }
.cc-proposal-shell .cc-proposal #cc-pendencies h2 i { background:#f2edff; color:#7957c5; }
.cc-proposal-shell .cc-proposal #cc-birthdays h2 i { background:#fff5e3; color:#aa7628; }
.cc-proposal-shell .cc-proposal #cc-reminders > ul > li { padding-top:15px; padding-bottom:15px; }
.cc-proposal-shell .cc-proposal #cc-reminders > ul > li p:first-child { color:var(--cc-heading); font-weight:500; }
.cc-proposal-shell .cc-proposal #cc-agenda .grid { grid-template-columns:minmax(0,1fr); }
.cc-proposal-shell .cc-proposal .cc-scroll-body { max-height:19rem; }
.cc-proposal-shell .cc-proposal :is(a,button):focus-visible { outline:2px solid var(--cc-blue); outline-offset:4px; }
@media(min-width:1024px) {
  .cc-proposal-shell .app-shell-frame > div { grid-template-columns:228px minmax(0,1fr); gap:28px; }
  .cc-proposal-shell .app-shell-menu { background:white; min-height:100vh; padding:22px 15px; border-right:1px solid var(--cc-border); }
  .cc-proposal-shell .app-shell-menu > div:first-child { padding-top:0; }
  .cc-proposal-shell .app-shell-menu hr { border-color:var(--cc-border); margin:16px 0; }
  .cc-proposal-shell .app-shell-menu nav > ul > li > a { padding:10px 11px; border-radius:10px; gap:10px; font-size:13px; color:#506078 !important; }
  .cc-proposal-shell .app-shell-menu nav > ul > li > a:hover { background:var(--cc-canvas); background-image:none; }
  .cc-proposal-shell .app-shell-menu nav > ul > li > a.font-bold { background:var(--cc-blue-wash); color:var(--cc-blue) !important; }
  .cc-proposal-shell .app-shell-menu nav > ul > li > a > i { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#f0f4fa; color:#7990ad; font-size:13px; }
  .cc-proposal-shell .app-shell-menu nav > ul > li > a.font-bold > i { background:var(--cc-blue); color:white; }
  .cc-proposal-shell .app-shell-menu nav > ul > li.uppercase { font-size:10px; font-weight:600; letter-spacing:1.1px; color:#8591a3; padding:10px 11px 3px; }
  .cc-proposal-shell .app-shell-menu nav > ul > li > button[aria-haspopup] { background:var(--cc-blue); border-radius:10px; min-height:42px; font-size:13px; box-shadow:none; }
}
@media(max-width:1100px) {
  .cc-proposal-shell .cc-proposal-metric { flex-basis:40%; }
  .cc-proposal-shell .cc-proposal-metric:nth-child(3) { border-left:0; }
}
@media(max-width:1023px) {
  .cc-proposal-shell .app-shell-frame { padding:0 16px 24px; }
  .cc-proposal-shell .app-shell-topbar { background:white; }
}
@media(max-width:640px) {
  .cc-proposal-shell .cc-proposal-welcome h1 { font-size:25px; }
  .cc-proposal-shell .cc-proposal-metric { padding:12px; gap:8px; }
  .cc-proposal-shell .cc-proposal-metric-icon { width:32px; height:32px; }
  .cc-proposal-shell .cc-proposal-metric strong { font-size:24px; }
  .cc-proposal-shell .cc-proposal .cc-block { padding:20px; }
  .cc-proposal-shell .cc-proposal .cc-block > header { flex-wrap:wrap; gap:8px; }
}