/**
 * Layout — TopBar, Sidebar, AppShell.
 * Mobile-first: sidebar je drawer pod 768px (Alpine x-show).
 */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* =====================
 * TOP BAR
 * ===================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--header-height);
  background: var(--color-surface-base);
  border-bottom: 1px solid var(--color-border-default);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-4);
}
/* CZ: Plná šířka — brand vlevo (nad sidebarem), akce vpravo (žádné centrování). */
/* EN: Full width — brand on the left (above the sidebar), actions on the right (no centering). */
.topbar-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--spacing-4); }
/* CZ: min-width:0 dovolí levé i pravé skupině se zúžit (jinak by nezalomitelný obsah roztáhl
       sticky topbar přes šířku viewportu na mobilu). EN: min-width:0 lets both groups shrink
       (otherwise non-wrapping content would stretch the sticky topbar past the viewport). */
.topbar-inner > * { min-width: 0; }
.topbar-brand { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text-primary); text-decoration: none; }
.topbar-actions { display: flex; align-items: center; gap: var(--spacing-2); }
/* CZ: Uživatelské tlačítko (jméno/e-mail) se na úzké obrazovce zkrátí s „…", ať nepřetéká.
   EN: The user button (name/email) truncates with an ellipsis on narrow screens so it can't overflow. */
.topbar-user-btn { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }

/* CZ: Mobil (≤480px) — menší padding/mezery, zúžené logo a uživatelské tlačítko, aby se
       hamburger + logo + 3 ikony + uživatel vešly bez horizontálního přetečení stránky.
   EN: Mobile (≤480px) — smaller padding/gaps, narrower logo and user button so the hamburger
       + logo + 3 icons + user fit without horizontal page overflow. */
@media (max-width: 480px) {
  .topbar { padding: 0 var(--spacing-2); }
  .topbar-inner { gap: var(--spacing-2); }
  .topbar-actions { gap: var(--spacing-1); }
  .topbar-brand img { max-width: 108px; }
  .topbar-user-btn { max-width: 6rem; }
}

/* =====================
 * APP BODY (sidebar + main)
 * ===================== */
.app-body { display: flex; flex: 1; min-height: calc(100vh - var(--header-height)); }

.sidebar {
  width: var(--sidebar-width);
  background: var(--color-surface-base);
  border-right: 1px solid var(--color-border-default);
  padding: var(--spacing-3);
  flex-shrink: 0;
  height: calc(100vh - var(--header-height));
  position: sticky;
  top: var(--header-height);
  overflow-y: auto;
}

.sidebar-section { margin-bottom: var(--spacing-4); }
.sidebar-section-label { padding: var(--spacing-2) var(--spacing-3); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.sidebar-link:hover { background: var(--color-surface-muted); color: var(--color-text-primary); text-decoration: none; }
/* CZ: Aktivní odkaz — „strong" accent jako text na accent-soft tintu (brand #FF6B35 by na
       světlém tintu neprošel kontrastem). EN: Active link — "strong" accent as text on the
       accent-soft tint (brand #FF6B35 would fail contrast on the light tint). */
.sidebar-link.active { background: var(--color-brand-accent-soft); color: var(--color-accent-text); }
.sidebar-link-icon { width: 18px; height: 18px; flex-shrink: 0; }

.main-content {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-6) var(--spacing-4);
}
@media (min-width: 768px) {
  .main-content { padding: var(--spacing-8); }
}

/* =====================
 * PAGE HEADER (uvnitř main content)
 * ===================== */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--spacing-4); margin-bottom: var(--spacing-6); }
.page-header h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); margin: 0; }
.page-header .page-description { color: var(--color-text-secondary); margin-top: var(--spacing-1); }
/* CZ: flex-wrap — víc tlačítek (např. finance: Nahrát/Záznamy/Cashflow/Power of One) se na
       úzké obrazovce zalomí místo přetečení. EN: flex-wrap — multiple buttons wrap on a narrow
       screen instead of overflowing. */
.page-header-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }

/* =====================
 * FOOTER (public layout)
 * ===================== */
.footer {
  border-top: 1px solid var(--color-border-default);
  padding: var(--spacing-6) 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* =====================
 * MOBILE — sidebar drawer
 * ===================== */
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(26, 35, 50, 0.5); z-index: calc(var(--z-modal-backdrop) - 1); }

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-modal-backdrop);
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    height: 100vh;
  }
  .sidebar[data-open="true"] { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar-backdrop[data-open="true"] { display: block; }
  .sidebar-toggle { display: inline-flex; }
}

/* =====================
 * PUBLIC LAYOUT (auth pages)
 * ===================== */
.public-layout { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-surface-subtle); }
.public-main { flex: 1; padding: var(--spacing-12) var(--spacing-4); }