/* App shell: fixed sidebar on desktop; top bar + bottom tab bar + slide-in menu on phones and tablets. */
.sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: var(--sidebar-w); z-index: 60;
  display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--side-bg); color: var(--side-ink); overflow-y: auto;
  transition: transform var(--t-med) var(--ease);
}
.brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand img { block-size: 36px; inline-size: auto; }
.brand-dark { display: none; }
/* the wordmark is purple: on the plum sidebar the full logo sits on a cream plate */
.sidebar .brand { justify-content: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: #f7eedf; }
.sidebar .brand img { block-size: 120px; }
.brand-sub { margin-block-start: calc(var(--s-2) * -1); padding-inline: var(--s-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--side-muted); }
[data-theme='dark'] .topbar .brand-light { display: none; }
[data-theme='dark'] .topbar .brand-dark { display: block; }

.nav { display: flex; flex-direction: column; gap: var(--s-4); }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-label { padding: 0 var(--s-3); margin-block-end: var(--s-1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--side-muted); }
.nav a {
  display: flex; align-items: center; gap: var(--s-3); min-block-size: 44px; padding: 0 var(--s-3); border-radius: var(--r-md);
  color: var(--side-ink); font-weight: 600; font-size: var(--fs-base); text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav a:hover { background: var(--side-hover); color: var(--side-ink); }
.nav a[aria-current='page'] { background: var(--side-active-bg); color: var(--side-active-ink); }
.nav a .icon { color: var(--side-muted); }
.nav a:hover .icon { color: var(--side-ink); }
.nav a[aria-current='page'] .icon { color: var(--side-active-ink); }
.nav a .kbd { margin-inline-start: auto; }
.sidebar :focus-visible { outline-color: #cdbff0; }

.avatar { flex: none; inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-fill); color: var(--on-accent); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); }

/* top bar: page title, language switch and user menu (desktop and phones) */
.topbar {
  display: flex; align-items: center; gap: var(--s-3); position: fixed; inset-block-start: 0; inset-inline: var(--sidebar-w) 0; z-index: 50; block-size: var(--topbar-h);
  padding: 0 var(--s-6); background: var(--surface); border-block-end: 1px solid var(--line);
}
.topbar .brand, .topbar #menu-btn { display: none; }
.topbar-title { flex: 1; min-inline-size: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-end { display: flex; align-items: center; gap: var(--s-2); }
.usermenu { position: relative; }
.userbtn { display: flex; align-items: center; gap: var(--s-2); min-block-size: 44px; padding: 4px var(--s-2) 4px 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-weight: 700; font-size: var(--fs-sm); }
:root[dir='rtl'] .userbtn { padding: 4px 4px 4px var(--s-2); }
.userbtn:hover, .userbtn[aria-expanded='true'] { border-color: var(--accent); color: var(--accent-strong); }
.userbtn-name { max-inline-size: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-pop { position: absolute; inset-block-start: calc(100% + var(--s-2)); inset-inline-end: 0; z-index: 70; inline-size: 260px; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2); }
.usermenu-who { display: flex; flex-direction: column; padding: var(--s-3); border-block-end: 1px solid var(--line); margin-block-end: var(--s-1); overflow-wrap: anywhere; }
.usermenu-who span { color: var(--muted); font-size: var(--fs-sm); }
.usermenu-item { display: flex; align-items: center; gap: var(--s-3); inline-size: 100%; min-block-size: 44px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-md); background: none; color: var(--ink); font-weight: 600; font-size: var(--fs-sm); text-align: start; }
.usermenu-item:hover { background: var(--wash); }
.usermenu-item.danger { color: var(--danger); }
.usermenu-item .icon { color: var(--accent); } .usermenu-item.danger .icon { color: var(--danger); }

.tabbar, .scrim { display: none; }
.main { margin-inline-start: var(--sidebar-w); padding: calc(var(--topbar-h) + var(--s-5)) var(--s-6) calc(var(--s-7) + var(--s-5)); min-block-size: 100vh; }
.content { max-inline-size: var(--content-max); margin-inline: auto; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-4); margin-block-end: var(--s-5); }
.page-head h1 { margin: 0; }
.page-head .sub { margin-block-start: var(--s-1); color: var(--muted); font-size: var(--fs-base); }
.page-head .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crumb { display: inline-flex; align-items: center; gap: var(--s-1); margin-block-end: var(--s-2); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--muted); }
.crumb:hover { color: var(--accent); }
.section { margin-block-start: var(--s-6); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-3); }

@media (min-width: 1024px) {
  .page-head h1[data-dup] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .page-head:has(h1[data-dup]) { margin-block-end: var(--s-4); }
}

/* tablets and phones */
@media (max-width: 1023px) {
  :root { --content-pad: var(--s-4); }
  .sidebar { transform: translateX(-105%); box-shadow: var(--shadow-2); inline-size: min(86vw, 320px); }
  :root[dir='rtl'] .sidebar { transform: translateX(105%); }
  body.nav-open .sidebar { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease); }
  body.nav-open .scrim { opacity: 1; pointer-events: auto; }
  .main { margin-inline-start: 0; padding: calc(var(--topbar-h) + var(--s-4)) var(--s-4) calc(var(--tabbar-h) + var(--s-6)); }
  .topbar { inset-inline: 0; padding: 0 var(--s-3); }
  .topbar .brand, .topbar #menu-btn { display: inline-flex; }
  .topbar .brand img { block-size: 32px; }
  .topbar-title { display: none; }
  .topbar-end { margin-inline-start: auto; }
  .userbtn-name, .userbtn > .icon { display: none; }
  .userbtn { padding: 3px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 50; block-size: var(--tabbar-h);
    padding-block-end: env(safe-area-inset-bottom); background: var(--surface); border-block-start: 1px solid var(--line);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; text-decoration: none;
    color: var(--muted); font-size: var(--fs-xs); font-weight: 700; min-block-size: 44px;
  }
  .tabbar .icon { color: inherit; }
  .tabbar a[aria-current='page'] { color: var(--accent-soft-ink); }
  .tabbar a[aria-current='page'] .tab-ico { background: var(--accent-soft); }
  .tab-ico { display: grid; place-items: center; inline-size: 52px; block-size: 28px; border-radius: var(--r-pill); transition: background-color var(--t-fast) var(--ease); }
  .page-head { margin-block-end: var(--s-4); }
  h1 { font-size: var(--fs-xl); }
}
@media print {
  .sidebar, .topbar, .tabbar, .scrim, .no-print, #toasts { display: none !important; }
  .main { margin: 0; padding: 0; } body { background: #fff; color: #000; }
}