.appbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 var(--space-4);
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.appbar-lead { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
/* Sprint 15.2 (R-11): rede de segurança em viewports muito estreitos ou
   fonte de sistema maior — sem isso, o item flex não encolhe abaixo do
   próprio conteúdo (min-width:auto é o padrão do flexbox) e o wordmark
   poderia empurrar o layout do appbar. min-width:0 no pai libera o
   encolhimento; aqui o texto trunca em vez de vazar. */
.appbar-brand { font-weight: 700; font-size: var(--fs-lg); color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar-brand:hover { color: var(--accent); }
.appbar-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.usermenu { position: relative; }
.usermenu-btn { width: var(--control-md); height: var(--control-md); border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-contrast); border: none; font-weight: 700; cursor: pointer; font-size: var(--fs-label); }
.usermenu-panel { position: absolute; right: 0; top: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: 180px; padding: var(--space-2); display: none; }
.usermenu-panel.open { display: block; }
.usermenu-panel a, .usermenu-panel button { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: none; border: none; color: var(--text-primary); font-size: var(--fs-label); cursor: pointer; text-decoration: none; transition: background-color .12s ease; }
.usermenu-panel a:hover, .usermenu-panel button:hover { background: var(--bg-subtle); }
/* Sprint 19: painel do sino lista solicitações pendentes (admin) —
   reaproveita .usermenu-panel; só ajusta o recuo do rótulo de seção,
   o ponto de status (mesmo âmbar de "aguardando") e o divisor do
   "Ver todas". Sem componente novo. */
.usermenu-panel .subhead { padding: var(--space-2) var(--space-3) var(--space-1); }
.notif-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--status-aguardando); margin-right: var(--space-2); vertical-align: middle; }
.notif-see-all { border-top: 1px solid var(--border); margin-top: var(--space-1); color: var(--accent); font-weight: 600; }

/* Shell com sidebar unificada (Sprint 12) — admin e dev usam a mesma
   navegação, recolhível e com estado preservado em localStorage. */
/* Sem transição em grid-template-columns: a interpolação de faixas de grid
   (com minmax) é instável entre navegadores e pode "travar" no valor
   inicial. O recolhimento é instantâneo e confiável; microinterações ficam
   para a Sprint 16. */
.shell { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 0; }
.sidebar { background: var(--bg-subtle); border-right: 1px solid var(--border); padding: var(--space-3); min-height: calc(100vh - 56px); overflow: hidden; }
.sidebar-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--fs-label); font-weight: 500; text-decoration: none; margin-bottom: 2px; white-space: nowrap; transition: background-color .12s ease, color .12s ease; }
.sidebar-link:hover { background: var(--surface); color: var(--text-primary); }
.sidebar-link.active { background: var(--surface); color: var(--accent); }
.sidebar-ico { display: inline-flex; align-items: center; flex-shrink: 0; }
.sidebar-label { overflow: hidden; text-overflow: ellipsis; }
/* Rótulo de grupo (Operação/Análises/Configurações) - reaproveita .subhead. */
.sidebar .subhead { padding: var(--space-4) var(--space-3) var(--space-1); }
.sidebar .subhead:first-child { padding-top: 0; }

/* Estado recolhido (trilho de ícones, estilo ChatGPT): só os ícones,
   rótulos escondidos, largura reduzida. */
:root[data-sidebar="collapsed"] .shell { grid-template-columns: 60px minmax(0,1fr); }
:root[data-sidebar="collapsed"] .sidebar-label,
:root[data-sidebar="collapsed"] .sidebar .subhead { opacity: 0; visibility: hidden; height: 0; padding: 0; margin: 0; }
:root[data-sidebar="collapsed"] .sidebar .subhead:first-child { padding: 0; }
:root[data-sidebar="collapsed"] .sidebar-link { justify-content: center; padding: var(--space-2); }

/* Cabeçalho de página */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.page-title { font-size: var(--fs-page); font-weight: 700; }
.weeknav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.weeklabel { font-weight: 700; font-size: var(--fs-body); }
.page-head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.page-head-actions .weeknav { margin-top: 0; justify-content: flex-end; }

/* Mini-dashboard de contadores (Task 4/5) */
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); box-shadow: var(--card-shadow, none); }
/* Sprint 24 (ideias de consistência de card): quando o card vive dentro
   de um .panel (que já carrega sua própria sombra — Dashboard, Home),
   a sombra própria do stat-card só duplica peso visual sem acrescentar
   informação. Fora de um .panel (contadores do Board, que ficam direto
   na página), o stat-card continua com sua sombra — é ele quem precisa
   se destacar do fundo. */
.panel .stat-card { box-shadow: none; }
.stat-num { font-size: var(--fs-page); font-weight: 700; line-height: 1; }
.stat-label { font-size: var(--fs-label); color: var(--text-secondary); margin-top: var(--space-1); display: flex; align-items: center; gap: 6px; }

/* Board */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px),1fr)); gap: var(--space-4); align-items: start; }
.col { padding-bottom: var(--space-3); }
.col-head { font-weight: 700; font-size: var(--fs-lg); padding: var(--space-4) var(--space-4) var(--space-1); }
.subhead { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); font-weight: 700; padding: var(--space-3) var(--space-4) var(--space-2); }
.tasks, .today-list { padding: 0 var(--space-3); display: grid; gap: var(--space-2); }

/* Layout do dev (duas colunas) */
.dev-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--space-4); align-items: start; }
.dev-side { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 72px; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { min-height: auto; border-right: none; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
  /* Sidebar vira barra horizontal - rótulo de grupo força quebra de linha
     antes de cada grupo, sem o respiro vertical que faz sentido na coluna. */
  .sidebar .subhead { flex: 1 0 100%; padding: var(--space-2) var(--space-1) 2px; }
  .sidebar .subhead:first-child { padding-top: 0; }
  .dev-layout { grid-template-columns: 1fr; }
  .dev-side { position: static; }
}
@media (max-width: 640px) {
  .page { padding: var(--space-4); }
  .appbar { padding: 0 var(--space-4); }
  .board { grid-template-columns: 1fr; }
  .page-head-actions { align-items: flex-start; width: 100%; }
  .page-head-actions .weeknav { justify-content: flex-start; }
}

/* Layout do board do dev (painéis "Hoje"/"Semana" e coluna lateral). */


/* Contadores do dev (2 colunas fixas) */
/* Sprint 26 (auditoria de UX da Área do Dev, item 1): 2 indicadores
   viraram 4 — a coluna fixa (repeat(2,...)) esticaria cada card demais;
   volta pro auto-fit já usado pela .counters base (Dashboard, Home). */
.dev-counters { grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }

/* Coluna principal do dev (painéis Hoje/Semana) */
.dev-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.today-panel, .week-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.section-title { font-weight: 700; font-size: var(--fs-lg); padding: var(--space-4) var(--space-4) var(--space-2); }
.dev-today-list { padding: 0 var(--space-4) var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); }
.dev-task-list { padding: 0 var(--space-3) var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%,340px),1fr)); }
/* Sprint 26 (auditoria de UX da Área do Dev, item 2): .today-item virou
   <button> (abre o modal de detalhes) — reset dos estilos nativos de
   botão, mantendo a aparência de "chip" que já tinha como <div>. */
.today-item {
  font: inherit; text-align: left; width: 100%; cursor: pointer;
  border: 1px solid transparent; transition: border-color .12s;
  font-size: var(--fs-label); background: var(--bg-subtle); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
}
.today-item:hover { border-color: var(--accent); }

/* Painéis laterais (mural / recados) */
.side-panel { margin-bottom: 0; }
.side-panel h4 { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); margin-bottom: var(--space-3); }

@media (max-width: 640px) {
  .tasks, .today-list, .dev-today-list, .dev-task-list { grid-template-columns: 1fr; }
  .add-task-form, .chat-form { flex-direction: column; }
  .add-task-form input, .chat-form .btn-solid { width: 100%; }
}