/* ============================================================
   lightYOU Finance — shell.css (Sprint UI-C)
   Application Shell: sidebar + topbar + breadcrumb + content + footer.
   Consome SOMENTE var(--*) de tokens.css (AC-016, RF-UI-002). Nenhum
   valor visual hardcoded. Media queries usam o equivalente em `em`
   dos tokens --bp-* (CSS não aceita custom properties na condição de
   @media): 48em == --bp-md (768px); 62em == --bp-lg (992px).
   Foco visível (RNF-006/AC-019): o tema define --focus-ring:none; o
   shell reativa foco de teclado com outline medium + --color-focus.
   ============================================================ */

/* --- Root layout --- */
.app-shell { display:block; min-height:100vh; }

/* --- Sidebar --- */
.ly-sidebar {
  display:flex; flex-direction:column;
  width:var(--size-sidebar);
  background:var(--color-bg-surface);
  border-right:var(--border-width) solid var(--color-border);
  position:fixed; inset:0 auto 0 0; z-index:var(--z-sidebar);
  transform:translateX(-100%);
  transition:var(--transition-hamburger);
  overflow-y:auto;
}
.ly-brand {
  display:flex; align-items:center; gap:var(--space-2);
  height:var(--size-header); flex:0 0 auto;
  padding:0 var(--space-4);
  border-bottom:var(--border-width) solid var(--color-border);
}
.ly-brand-logo {
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--size-logo-sm); height:var(--size-logo-sm);
  border-radius:var(--radius-btn);
  background:var(--color-primary); color:var(--color-bg-surface);
  font-weight:var(--font-weight-heading);
}
.ly-brand-name { color:var(--color-text-heading); font-weight:var(--font-weight-heading); }
.ly-brand-name small { display:block; color:var(--color-text-muted); font-size:var(--font-size-10); font-weight:var(--font-weight-base); }

.ly-nav { flex:1 1 auto; padding:var(--space-3); overflow-y:auto; }
.ly-nav-group { margin-top:var(--space-3); }
.ly-nav-group:first-child { margin-top:0; }
.ly-nav-group-label {
  padding:var(--space-2) var(--space-3);
  font-size:var(--font-size-10); font-weight:var(--font-weight-strong);
  text-transform:var(--text-transform-caption); letter-spacing:var(--letter-spacing-1);
  color:var(--color-text-muted);
}
.ly-nav-link {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-3); margin-bottom:var(--space-1);
  border-radius:var(--radius-nxl-link);
  color:var(--color-text-body); font-weight:var(--font-weight-nxl-link);
  transition:var(--transition-base);
}
.ly-nav-link:hover { background:var(--color-menu-hover-bg); color:var(--color-text-heading); }
.ly-nav-link.is-active { background:var(--color-soft-primary); color:var(--color-primary); }
.ly-nav-link .icon { flex:0 0 auto; }
.ly-nav-link-text { flex:1 1 auto; }

/* --- Overlay (mobile drawer backdrop) --- */
.ly-overlay {
  display:none; position:fixed; inset:0;
  background:var(--color-backdrop); opacity:.5;
  z-index:calc(var(--z-sidebar) - 1);
}

/* --- Drawer open states: no-JS (:target) + JS (.is-open) --- */
#ly-sidebar:target { transform:translateX(0); }
#ly-sidebar:target ~ .ly-overlay { display:block; }
.app-shell.is-open .ly-sidebar { transform:translateX(0); }
.app-shell.is-open .ly-overlay { display:block; }

/* --- Main column --- */
.app-main { display:flex; flex-direction:column; min-height:100vh; min-width:0; }

/* --- Topbar --- */
.ly-topbar {
  display:flex; align-items:center; gap:var(--space-3);
  height:var(--size-header); flex:0 0 auto;
  padding:0 var(--padding-main-x);
  background:var(--color-bg-surface);
  border-bottom:var(--border-width) solid var(--color-border);
  position:sticky; top:0; z-index:var(--z-header);
}
.ly-topbar-spacer { flex:1 1 auto; }
.ly-icon-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-2); border-radius:var(--radius-btn);
  background:transparent; border:var(--border-width) solid transparent;
  color:var(--color-text-body); cursor:pointer; transition:var(--transition-base);
}
.ly-icon-btn:hover { background:var(--color-menu-hover-bg); color:var(--color-text-heading); }
.ly-nav-toggle { display:inline-flex; }
.ly-collapse { display:none; }

/* --- User menu (native <details>, no-JS) --- */
.ly-user { position:relative; }
.ly-user > summary {
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill);
  cursor:pointer; list-style:none; color:var(--color-text-heading);
  transition:var(--transition-base);
}
.ly-user > summary::-webkit-details-marker { display:none; }
.ly-user > summary:hover { background:var(--color-menu-hover-bg); }
.ly-user-name { font-weight:var(--font-weight-strong); font-size:var(--font-size-12); }
.ly-user-name small { display:block; color:var(--color-text-muted); font-weight:var(--font-weight-base); font-size:var(--font-size-10); }
.ly-user-menu {
  position:absolute; right:0; top:calc(100% + var(--space-1));
  min-width:var(--size-dropdown-user);
  background:var(--color-bg-surface);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-card); box-shadow:var(--shadow-dropdown);
  padding:var(--space-2); z-index:var(--z-header);
}
.ly-user-menu-head { padding:var(--space-3); border-bottom:var(--border-width) solid var(--color-divider); margin-bottom:var(--space-2); }
.ly-menu-label {
  padding:var(--space-2) var(--space-3) var(--space-1);
  font-size:var(--font-size-10); text-transform:var(--text-transform-caption);
  letter-spacing:var(--letter-spacing-1); color:var(--color-text-muted);
}
.ly-menu-item {
  display:flex; align-items:center; gap:var(--space-3); width:100%;
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-dropdown-item);
  color:var(--color-text-body); font-weight:var(--font-weight-dropdown-item);
  font-size:var(--font-size-13); background:transparent; border:0; cursor:pointer;
  text-align:left; transition:var(--transition-base);
}
.ly-menu-item:hover { background:var(--color-menu-hover-bg); color:var(--color-text-heading); }
.ly-menu-item.is-danger:hover { color:var(--color-danger); }
.ly-menu-divider { height:var(--border-width); background:var(--color-divider); margin:var(--space-2) 0; border:0; }

/* --- Breadcrumb bar (trilha; distinta do page-header da tela) --- */
.ly-breadcrumb {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);
  padding:var(--space-3) var(--padding-content-area-body);
  font-size:var(--font-size-12); color:var(--color-text-muted);
  border-bottom:var(--border-width) solid var(--color-border);
}
.ly-breadcrumb a { color:var(--color-text-muted); }
.ly-breadcrumb a:hover { color:var(--color-link); }
.ly-breadcrumb [aria-current="page"] { color:var(--color-text-heading); font-weight:var(--font-weight-strong); }
.ly-crumb-sep { color:var(--color-text-placeholder); }

/* --- Content area --- */
.app-content { flex:1 1 auto; min-width:0; }

/* --- Footer (mínimo, institucionalmente neutro) --- */
.ly-footer {
  flex:0 0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);
  padding:var(--space-4) var(--padding-footer-x);
  border-top:var(--border-width) solid var(--color-border);
  color:var(--color-text-muted); font-size:var(--font-size-11);
}
.ly-footer .ly-crumb-sep { color:var(--color-text-placeholder); }

/* --- Foco visível de teclado (RNF-006/AC-019). O tema desativa focus
       rings globais; o shell os reativa via --color-focus. --- */
.ly-sidebar a:focus-visible,
.ly-topbar a:focus-visible,
.ly-topbar button:focus-visible,
.ly-user > summary:focus-visible,
.ly-menu-item:focus-visible,
.ly-breadcrumb a:focus-visible,
.ly-skip-link:focus-visible {
  outline:medium solid var(--color-focus); outline-offset:0;
}

/* --- Skip link (acessibilidade) --- */
.ly-skip-link {
  position:absolute; left:var(--space-3); top:calc(var(--space-3) * -10);
  z-index:var(--z-toast-container);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-btn);
  background:var(--color-primary); color:var(--color-bg-surface);
  transition:var(--transition-base);
}
.ly-skip-link:focus { top:var(--space-3); }

/* ============================================================
   Desktop (>= 62em == --bp-lg 992px): sidebar fixa/visível.
   ============================================================ */
@media (min-width:62em) {
  .app-shell { display:grid; grid-template-columns:var(--size-sidebar) minmax(0,1fr); }
  .app-shell.is-collapsed { grid-template-columns:var(--size-sidebar-mini) minmax(0,1fr); }

  .ly-sidebar {
    position:sticky; inset:auto; grid-column:1; grid-row:1;
    align-self:start; top:0; height:100vh; transform:none;
  }
  .app-main { grid-column:2; grid-row:1; }

  .ly-overlay { display:none; }
  .ly-nav-toggle { display:none; }
  .ly-collapse { display:inline-flex; }

  /* Estado recolhido (mini): só ícones */
  .app-shell.is-collapsed .ly-sidebar { width:var(--size-sidebar-mini); }
  .app-shell.is-collapsed .ly-nav-link-text,
  .app-shell.is-collapsed .ly-nav-group-label,
  .app-shell.is-collapsed .ly-brand-name { display:none; }
  .app-shell.is-collapsed .ly-nav-link,
  .app-shell.is-collapsed .ly-brand { justify-content:center; }
}

/* ============================================================
   S22.12 — topbar nunca estoura a viewport (RNF-001).
   Abaixo de 48em (== --bp-md) o resumo do usuário mostra só o
   avatar (nome/papel seguem no cabeçalho do menu aberto) e o
   dropdown respeita a largura da tela. Corrige scroll horizontal
   preexistente em telas estreitas.
   ============================================================ */
@media (max-width:48em) {
  .ly-user > summary .ly-user-name { display:none; }
  .ly-user-menu { max-width:calc(100vw - var(--space-6)); }
}

/* --- Sino de notificações (S21 — RNF-004) --- */
.ly-notify > summary { position:relative; padding:var(--space-1); }
.ly-notify-count {
  position:absolute;
  top:0;
  right:0;
  font-size:var(--font-size-9);
  line-height:1;
  padding:var(--space-1) var(--space-1);
  border-radius:var(--radius-pill);
}
.ly-notify .ly-user-menu { min-width:var(--size-sidebar); }