/* Unified operator navigation shell - the one persistent left sidebar shared
   by every logged-in admin_bp AND inbox_bp page (see base/_sidebar.html).
   Moved out of inbox.css (where it was Inbox-only) so both halves of the
   merged product load exactly one copy of these rules.

   Token strategy: every color/effect reads an --aw-* variable with an
   --sm-* fallback, so each half's own surface/text tokens still apply.
   The ACCENT is no longer one of those per-half values - it comes from
   the shared system in accents.css, which both halves load, so the
   appearance picker repaints the whole product rather than half of it. */

.aw-shell {
  --shell-panel: var(--aw-panel, var(--sm-panel));
  --shell-panel-border: var(--aw-panel-border, var(--sm-panel-border));
  --shell-panel-radius: var(--aw-panel-radius, var(--sm-panel-radius));
  --shell-shadow-panel: var(--aw-shadow-panel, var(--sm-shadow-panel));
  --shell-radius: var(--aw-radius, var(--sm-radius));
  --shell-text: var(--aw-text, var(--sm-foreground));
  --shell-text-muted: var(--aw-text-muted, var(--sm-muted-foreground));
  --shell-hover-bg: var(--aw-surface-variant, var(--sm-secondary));
  --shell-active-bg: var(--aw-primary-container, var(--sm-primary));
  --shell-active-fg: var(--aw-on-primary-container, var(--sm-primary-foreground));
  --shell-border: var(--aw-border, var(--sm-border));
  --shell-menu-bg: var(--aw-surface, var(--sm-card));
}

.aw-shell { display: flex; align-items: stretch; gap: 20px; padding: 20px; box-sizing: border-box; min-height: 100vh; }
/* Centered above tablet width, so the sidebar and content move together
   as one unit rather than the sidebar staying pinned to the true viewport
   edge while only the content pane shrinks.

   A fixed measure, not 80%: a proportional cap throws away a fixed share
   of every screen no matter how much room there is. On a 1425px window it
   was spending 285px on empty margins and squeezing the content pane to
   792px - which is what made the panels feel like a narrow ribbon of
   controls inside very wide cards. 96rem still stops the layout sprawling
   on an ultrawide monitor, which is what the cap is actually for. */
@media (min-width: 900px) {
  .aw-shell { max-width: 96rem; margin: 0 auto; }
}

.aw-sidebar {
  flex-shrink: 0; width: 240px; display: flex; flex-direction: column;
  background: var(--shell-panel);
  border: 1px solid var(--shell-panel-border); border-radius: var(--shell-panel-radius); box-shadow: var(--shell-shadow-panel);
  padding: 16px 12px; position: sticky; top: 20px; height: calc(100vh - 40px); overflow-y: auto;
  box-sizing: border-box;
  /* The content pane comes later in the DOM, so without lifting the
     sidebar's stacking context the mobile dropdown paints underneath it
     no matter how high its own z-index is. */
  z-index: 100;
}
.aw-sidebar-top { display: flex; align-items: center; justify-content: space-between; }
.aw-sidebar-brand.aw-brand { display: flex; align-items: center; gap: 8px; justify-content: flex-start; margin: 4px 8px 16px; }
/* No display:block here - that would out-rank the logo-swap rules below
   ((0,2,1) vs (0,2,0)) and force both variants visible at once. The brand
   is a flex container, so its children are blockified anyway. */
.aw-sidebar-brand.aw-brand img { height: 28px; width: auto; }
/* Logo swap honours BOTH the OS preference and an explicit [data-theme]
   choice - the higher-specificity attribute rules below always win over
   the media query, so a manual light/dark pick is never overridden by
   the OS setting. */
.aw-sidebar-brand .aw-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .aw-sidebar-brand .aw-logo-light { display: none; }
  .aw-sidebar-brand .aw-logo-dark { display: block; }
}
:root[data-theme="dark"] .aw-sidebar-brand .aw-logo-light { display: none; }
:root[data-theme="dark"] .aw-sidebar-brand .aw-logo-dark { display: block; }
:root[data-theme="light"] .aw-sidebar-brand .aw-logo-light { display: block; }
:root[data-theme="light"] .aw-sidebar-brand .aw-logo-dark { display: none; }

/* A real flex box on desktop too (not display:contents - buggy Safari
   support would silently drop children from the flex layout). flex:1 +
   margin-top:auto on the bottom group pushes Account/Log out down. */
.aw-sidebar-menu { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.aw-sidebar-toggle {
  display: none; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  align-items: center; justify-content: center; cursor: pointer;
  background: transparent; color: var(--shell-text); border: none; flex-shrink: 0;
}
.aw-sidebar-toggle:hover { background: var(--shell-hover-bg); }
.aw-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.aw-sidebar-group-label {
  margin: 14px 10px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--shell-text-muted);
}
.aw-sidebar-nav .aw-sidebar-group-label:first-child { margin-top: 2px; }
.aw-sidebar-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--shell-radius); color: var(--shell-text-muted);
  text-decoration: none; font-size: 14px; font-weight: 500;
}
.aw-sidebar-link:hover { background: var(--shell-hover-bg); color: var(--shell-text); }
.aw-sidebar-link.aw-active { background: var(--shell-active-bg); color: var(--shell-active-fg); }
/* Unread count on a sidebar link. Pushed to the far end with margin-left
   auto rather than a spacer element, so it sits flush right whatever the
   label's length - and it inherits nothing from .badge, which is a status
   pill for a different job. */
.aw-sidebar-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  background: var(--shell-active-bg);
  color: var(--shell-active-fg);
}
.aw-sidebar-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--shell-border); display: flex; flex-direction: column; gap: 2px; }
.aw-shell-main { flex: 1; min-width: 0; padding: 24px; box-sizing: border-box; }

/* Admin pages nest their existing centered .app-main container inside the
   shell's content pane - trim its own outer padding so the two containers'
   padding doesn't stack into an oversized gutter. */
.aw-shell-main > .app-main { padding: 0.5rem 0.25rem; }

/* Below tablet width the sidebar collapses into a hamburger dropdown:
   brand + toggle stay on screen, the menu opens as a panel underneath
   (see app/static/js/shell.js). */
@media (max-width: 760px) {
  .aw-shell { flex-direction: column; padding: 12px; gap: 12px; }
  .aw-sidebar {
    width: 100%; height: auto; position: relative; box-sizing: border-box;
    flex-direction: column; align-items: stretch; overflow: visible;
  }
  .aw-sidebar-brand.aw-brand { margin: 0; }
  .aw-sidebar-toggle { display: flex; }
  .aw-sidebar-menu {
    display: none; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px;
    background: var(--shell-menu-bg);
    border: 1px solid var(--shell-panel-border); border-radius: var(--shell-panel-radius); box-shadow: var(--shell-shadow-panel);
    padding: 8px; z-index: 1000;
  }
  .aw-sidebar.aw-menu-open .aw-sidebar-menu { display: flex; }
  .aw-sidebar-nav { flex-direction: column; }
  .aw-sidebar-bottom { margin: 8px 0 0; padding-top: 8px; }
  .aw-shell-main { padding: 4px 4px 16px; }
}

/* The appearance control sits between the brand and the (mobile-only)
   hamburger, in the same place on every operator screen. */
.aw-sidebar-theme-toggle { display: flex; align-items: center; margin-bottom: 16px; }
@media (max-width: 760px) {
  .aw-sidebar-theme-toggle { margin-bottom: 0; }
}

/* --- appearance picker ------------------------------------------------ */
/* The one light/dark + accent control, anchored in the sidebar rather than
   floating over the page: it used to be position:fixed and Inbox-only,
   which put it in the same corner as the mobile hamburger and left the
   admin half with a different control entirely. Colours come from the
   shared accent system (accents.css), so a choice here repaints
   everything. */
.aw-theme-picker { position: relative; }
.aw-theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--shell-text-muted);
  border: 1px solid var(--shell-border);
}
.aw-theme-toggle:hover { color: var(--shell-text); background: var(--shell-hover-bg); }
.aw-theme-panel {
  position: absolute; top: 44px; right: 0; width: 220px; z-index: 1100;
  background: var(--shell-menu-bg);
  border: 1px solid var(--shell-panel-border);
  border-radius: var(--shell-panel-radius); box-shadow: var(--shell-shadow-panel);
  padding: 12px; text-align: left;
}
.aw-theme-label {
  margin: 0 0 6px; font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--shell-text-muted);
}
.aw-theme-modes { display: flex; gap: 6px; margin-bottom: 14px; }
.aw-theme-mode {
  flex: 1; padding: 6px 0; font-size: 13px; border: none;
  border-radius: var(--shell-radius); cursor: pointer;
  background: var(--shell-hover-bg); color: var(--shell-text); font-weight: 500;
}
.aw-theme-mode:hover { filter: brightness(0.95); }
.aw-theme-mode.aw-active { background: var(--accent); color: var(--on-accent); }
.aw-theme-accents { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.aw-swatch {
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 2px solid transparent; box-shadow: none; cursor: pointer;
}
.aw-swatch:hover { filter: brightness(1.08); }
.aw-swatch.aw-active { border-color: var(--shell-text); }

/* On a phone the sidebar collapses to a bar with the hamburger at its
   right, so the panel opens from the left edge instead to stay on screen. */
@media (max-width: 760px) {
  .aw-theme-panel { right: auto; left: 0; }
}