/* 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; }
/* No padding of its own. The shell already provides the gutter - 20px of
   padding round the whole thing and a 20px gap between the sidebar and
   this pane - and anything added here stacks on top of that.

   It used to be 24px here plus 4px on the nested .app-main, which put 48px
   between the sidebar and the first panel while every gap BETWEEN panels
   was 20px. The eye reads that as the layout being wrong, because it is:
   the style guide asks for a consistent 20px, not 20px in some places and
   48px in others. */
.aw-shell-main { flex: 1; min-width: 0; box-sizing: border-box; }

/* Admin pages nest their existing .app-main container inside the shell's
   content pane. Both its padding AND its max-width come off: the shell
   already caps the whole layout at 96rem, and leaving a 72rem cap here
   would centre the content inside the pane and reopen the same uneven
   left gap on any wide screen. */
.aw-shell-main > .app-main { padding: 0; max-width: none; }

/* 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: 0; }
}

/* 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; }
}