/* ---------------------------------------------------------------------------
   The app shell: a sticky topbar for actions and a gradient sidebar for
   navigation. Shared by both pages — the inbox uses the topbar and simply has
   no sidebar, which is what lets one file serve them both.

   RTL is the whole game here. The reference design pins its sidebar with
   left:0; under dir="rtl" that puts it on the wrong side AND overlaps the
   content. Everything below uses logical properties, so the sidebar lands on
   the right in Hebrew and would land on the left in English with no edit.
   --------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--ui-topbar-h);
  padding: 8px 20px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: var(--ui-surface);
  border-block-end: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-xs);
}
.topbar .spacer { flex: 1; }
.topbar h1 { font-size: 16px; margin: 0; white-space: nowrap; }
/* The console shows its name in the sidebar; this copy exists only for the
   narrow layout, where the sidebar collapses to a strip and loses its brand. */
.brand-dup { display: none; }

.layout { display: flex; align-items: flex-start; }

.sidebar {
  position: sticky;
  top: var(--ui-topbar-h);
  align-self: flex-start;
  flex: 0 0 var(--ui-sidebar-w);
  width: var(--ui-sidebar-w);
  height: calc(100dvh - var(--ui-topbar-h));
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  background: linear-gradient(180deg, var(--ui-sidebar-from), var(--ui-sidebar-to));
}
.sidebar-brand {
  color: var(--ui-sidebar-text);
  font-size: 17px;
  font-weight: 700;
  padding: 6px 12px 14px;
  white-space: nowrap;
}
.sidebar-foot {
  margin-block-start: auto;
  color: var(--ui-sidebar-text-dim);
  font-size: 11px;
  padding: 10px 12px;
}

.nav-item {
  display: block;
  width: 100%;
  text-align: start;
  background: none;
  border: none;
  border-radius: var(--ui-radius-sm);
  color: var(--ui-sidebar-text-dim);
  font-family: inherit;
  font-size: 15px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.nav-item:hover { background: var(--ui-sidebar-item-hover); color: var(--ui-sidebar-text); }
.nav-item.active { background: var(--ui-sidebar-item-active); color: var(--ui-sidebar-text); font-weight: 600; }

main {
  flex: 1;
  min-width: 0;
  padding: 24px;
}
main > section { max-width: 1100px; }

/* ── narrow screens ────────────────────────────────────────────────────────
   The same buttons, restyled into a horizontal scroll strip — NOT a duplicate
   nav. Duplicating would make [data-tab] match ten elements and fire every
   handler twice. The reference simply hides its sidebar here, but with five
   tabs and no burger menu that strands the operator with no way to navigate. */
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .sidebar {
    flex: none;
    width: 100%;
    height: auto;
    top: var(--ui-topbar-h);
    flex-direction: row;
    gap: 4px;
    padding: 8px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--ui-surface);
    border-block-end: 1px solid var(--ui-border);
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar-brand, .sidebar-foot { display: none; }
  .brand-dup { display: block; }
  .nav-item {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--ui-text-secondary);
    min-height: 44px; /* thumb-sized, per the platform minimum */
    padding: 12px 14px;
  }
  .nav-item:hover { background: var(--ui-surface-muted); color: var(--ui-text); }
  .nav-item.active { background: var(--ui-accent-soft); color: var(--ui-accent); }
  .topbar { padding: 8px 12px; }
  main { padding: 12px; }
}