/* ============================================================
   Phase 6 Admin Shell — shell.css
   Layered AFTER tokens.css, bootstrap-overrides.css, brand-*.css,
   identity.css, nav.css, dashboard.css, status-badge.css, states.css.
   Cascade order makes shell selectors win — no force declarations.
   No hex literals — all colors via hsl(var(--token)).
   No force declarations — specificity + load order do the work.
   Per RESTRUCTURE-02, L-08, L-03. Design spec Sections 1, 5, 8.
   ============================================================ */


/* ============================================================
   1. Root shell grid
   .secuura-shell is the top-level layout container wrapping
   .secuura-sidebar and .secuura-shell-rhs (topbar + main).
   ============================================================ */

.secuura-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 1fr;
  height: 100vh;          /* 06-13 pass 2: lock the shell to viewport; main scrolls internally */
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Short shell pages (login/sign-up, the public share-link pages) overflowed: .secuura-shell is a
   hard 100vh and the page <footer> sits BELOW it as a sibling, so 100vh + footer produced an empty
   scrollbar. Let the body flex so the shell and footer together fill exactly one viewport; the
   shell's main area still scrolls internally for tall content.

   PS-236 regression: this MUST be `height`, not `min-height`. The rule below drops the shell's
   hard 100vh in favour of `flex: 1 1 auto`, and flex only distributes space a container actually
   has — with `min-height` alone the body is unconstrained, so `flex-basis: auto` leaves the shell
   content-driven. Once the sidebar's own content grew past the viewport (the DevTools section on a
   dev deployment), the sidebar column grew with it, .secuura-sidebar-scroll stopped overflowing,
   and the WINDOW scrolled instead — which silently killed both halves of the PS-236 menu-scroll
   persistence (nothing to listen to, and `scrollTop =` on a non-scrollable element is a no-op).
   Pinning the body to exactly 100vh forces the shell to shrink to the space the footer leaves, so
   the sidebar is bounded and owns its scrolling again. Main still scrolls internally, and the
   login/sign-up overflow this block originally fixed stays fixed. */
body:has(> .secuura-shell) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(> .secuura-shell) > .secuura-shell { height: auto; flex: 1 1 auto; min-height: 0; }

/* Desktop only: below 768px the sidebar is already `position: fixed; top: 0; bottom: 0` (see the
   max-width: 767.98px block further down), so .secuura-sidebar-scroll is viewport-bounded there
   without help and the menu already keeps its position. Pinning the body height on mobile would
   only trade document scrolling for inner-pane scrolling while `100vh` still resolves to the LARGE
   viewport, leaving the footer row parked under the browser toolbar. */
@media (min-width: 768px) {
  body:has(> .secuura-shell) { height: 100vh; }
}

/* Print: the definite heights + overflow above would clip everything past the first page, so hand
   printing back to normal document flow and let tall tables paginate. */
@media print {
  body:has(> .secuura-shell),
  body:has(> .secuura-shell) > .secuura-shell,
  .secuura-shell-rhs,
  .secuura-shell-main {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}

/* When sidebar is collapsed, reduce the sidebar column to the icon-rail width */
.secuura-shell:has(.secuura-sidebar[data-collapsed="true"]) {
  grid-template-columns: 56px 1fr;
}

/* Right-hand side: topbar (56px) | main (flex) | footer (auto) — three rows.
   06-13 (impeccable polish): bumped from 48px to 56px to relieve the cramped
   top-left feeling when the topbar carries the page heading instead of a
   subtitle. Matches the breathing room of the new in-topbar page title. */
.secuura-shell-rhs {
  display: grid;
  grid-template-rows: 56px 1fr auto;
  min-width: 0; /* prevent grid blowout from long content */
  overflow: hidden;
}

/* Main content area */
.secuura-shell-main {
  padding: 28px 24px 24px;     /* slightly more top padding so the topbar separates cleanly */
  overflow-x: auto;
  overflow-y: auto;
  background-color: hsl(var(--background));
}


/* ============================================================
   2. Sidebar
   Hybrid: 240px labeled by default; collapses to 56px icon rail.
   Preference persists per L-03 via JS (shell.js).
   ============================================================ */

.secuura-sidebar {
  background-color: hsl(var(--card));
  border-right: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  padding: 16px 8px;
  /* PS-236: scrolling moved to the inner .secuura-sidebar-scroll wrapper so the
     brand row above it stays pinned while the menu scrolls underneath. */
  overflow: hidden;
  width: 240px;
  transition: width 180ms ease-out;
  flex-shrink: 0;
  position: relative;
  z-index: 1031;          /* 06-13: sit above Bootstrap .fixed-bottom footer (z-index 1030); still below drawer-scrim (1040) so drawer dims sidebar correctly */
}

/* Collapsed icon-rail state */
.secuura-sidebar[data-collapsed="true"] {
  width: 56px;
  padding: 16px 4px;
}

/* Hide text labels and pills in collapsed state */
.secuura-sidebar[data-collapsed="true"] .secuura-sidebar-heading,
.secuura-sidebar[data-collapsed="true"] .secuura-sidebar-item span,
.secuura-sidebar[data-collapsed="true"] .secuura-sidebar-brand-text,
.secuura-sidebar[data-collapsed="true"] .secuura-sidebar-pill {
  display: none;
}

/* Center icons in collapsed state */
.secuura-sidebar[data-collapsed="true"] .secuura-sidebar-item {
  justify-content: center;
  padding: 8px;
}

/* ---- Brand slot (logo + wordmark) ----
   Sized so its bottom edge (incl. border) lands exactly on the topbar's
   bottom edge: sidebar padding-top 16 + brand min-height 40 = 56, matching
   .secuura-topbar { height: 56px }. Keeps the underline flush across the
   two columns where they meet under the page heading. */
.secuura-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 16px;
  min-height: 40px;
  flex-shrink: 0;
}

/* PS-236: the scrollable region below the pinned brand row. A flex column so the
   .secuura-sidebar-collapse-row { margin-top: auto } foot-pinning keeps working
   inside it; min-height: 0 lets it shrink below content so overflow can engage. */
.secuura-sidebar-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* PS-236: the logo is a real <button> (scroll-menu-to-top). Strip the UA button
   chrome; it fills the brand row so the logo's own margins keep centring it in
   the collapsed rail. */
.secuura-sidebar-brand-btn {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.secuura-sidebar-brand-btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---- Dev-mode "DEV" pill inside the DevTools section heading.
   Mirrors the red "Development Tools" header from the original navbar dropdown
   (MenuMasterService.cs:303 — color:red). Uses the theme destructive token so
   it adapts to both light/dark. Hidden in collapsed-sidebar state because the
   parent .secuura-sidebar-heading is also hidden there. */
.secuura-sidebar-dev-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: hsl(var(--destructive-foreground));
  background: hsl(var(--destructive));
  border-radius: 4px;
  line-height: 1.4;
  vertical-align: middle;
  text-transform: uppercase;
}

/* ---- Mobile-only close affordance inside the sidebar brand row.
   Hidden on desktop; revealed at <768px via the media-query override below.
   Pushed to the trailing edge of the brand row with margin-left:auto. */
.secuura-sidebar-mobile-close {
  display: none;
  margin-left: auto;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.secuura-sidebar-mobile-close:hover,
.secuura-sidebar-mobile-close:focus-visible {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}
.secuura-sidebar-mobile-close:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ---- Mobile drawer scrim (injected by shell.js initMobileDrawer).
   Sits at z-index 1059, one below the sidebar (1060), so it dims the rest
   of the viewport while the drawer is open and absorbs tap-to-dismiss.
   Hidden on desktop; flips to visible only when data-mobile-open=true. */
.secuura-sidebar-scrim {
  display: none;
}
@media (max-width: 767.98px) {
  .secuura-sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: hsl(var(--foreground) / 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
    z-index: 1059;
  }
  .secuura-sidebar-scrim[data-mobile-open="true"] {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .secuura-sidebar-scrim { transition: none; }
}

.secuura-sidebar-brand .navbar-logo {
  width: 180px;
  height: 26px;
  /* Use CSS mask so the wordmark fill tracks the theme foreground token directly —
     deep navy in light mode (var(--foreground) hsl(216 50% 13%)), near-white in dark
     (hsl(0 0% 97%)). One rule, no filter hacks, brand-consistent in both themes.
     The legacy background-image set in brand-secuura.css is suppressed below. */
  background-image: none;
  background-color: hsl(var(--foreground));
  mask: url('/images/secuura-wordmark.svg') no-repeat left center / contain;
  -webkit-mask: url('/images/secuura-wordmark.svg') no-repeat left center / contain;
  flex-shrink: 0;
}

/* Collapsed icon-rail state: swap wordmark → swan-only icon so the bird fits the 56px rail. */
.secuura-sidebar[data-collapsed="true"] .secuura-sidebar-brand .navbar-logo {
  width: 32px;
  height: 32px;
  mask: url('/images/secuura-swan.svg') no-repeat center / contain;
  -webkit-mask: url('/images/secuura-swan.svg') no-repeat center / contain;
  margin: 0 auto;
}

/* Primary "+ Upload" / "+ Upload & certify" CTA — sits ABOVE the WORKSPACE heading.
   Moved here from the topbar in 06-13. Tap target ≥44px (Phase 6 mobile-sweep precedent). */
.secuura-sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  min-height: 44px;
  margin: 0 0 16px;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: calc(var(--radius) - 2px);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 150ms ease;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}
.secuura-sidebar-cta:hover,
.secuura-sidebar-cta:focus-visible {
  background-color: hsl(var(--primary) / 0.9);
  color: hsl(var(--primary-foreground));
  text-decoration: none;
}
.secuura-sidebar-cta:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
.secuura-sidebar-cta i { flex-shrink: 0; }

.secuura-sidebar[data-collapsed="true"] .secuura-sidebar-cta {
  padding: 0;
  min-height: 40px;
  margin: 0 auto 16px;
  width: 40px;
}
.secuura-sidebar[data-collapsed="true"] .secuura-sidebar-cta-label {
  display: none;
}

/* ---- Nav sections and headings ---- */
.secuura-sidebar-section {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.secuura-sidebar-heading {
  padding: 4px 12px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
}

.secuura-sidebar-divider {
  height: 1px;
  background-color: hsl(var(--border));
  margin: 8px 0;
  flex-shrink: 0;
}

/* ---- Nav items ---- */
.secuura-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--foreground));
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 150ms ease, color 150ms ease;
  min-height: 36px;
  white-space: nowrap;
  overflow: hidden;
}

.secuura-sidebar-item i {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: hsl(var(--foreground));            /* 06-13: bumped from --muted-foreground so nav icons are clearly visible */
  font-size: 0.875rem;
}

.secuura-sidebar-item:hover,
.secuura-sidebar-item:focus-visible {
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
  text-decoration: none;
}

.secuura-sidebar-item:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: -2px;
}

/* Button variant — used by the Sign-out form so the <button type="submit"> reads
   visually identical to an <a class="secuura-sidebar-item">. */
.secuura-sidebar-item--button {
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.secuura-sidebar-section--signout {
  margin-top: auto;       /* pin to bottom of the flex column sidebar */
}

/* 06-13 pass 2 — Identity pill: profile + signout + sidebar-collapse integrated into
   one component. Avatar carries a role-aware conic-gradient presence ring (the
   memorable detail). Expanded layout = 3-col grid (avatar | meta | actions); collapsed
   layout = avatar-only with a popover dialog above on click. */
.secuura-identity-pill {
  margin-top: auto;
  padding: 12px 10px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  position: relative;
  border-radius: calc(var(--radius) - 2px);
  background: linear-gradient(
    180deg,
    hsl(var(--card)) 0%,
    hsl(var(--card) / 0.6) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ----- Avatar + role-aware presence ring ----- */
.secuura-identity-pill__avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.secuura-identity-pill__ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  --ring-stop: 330deg;
  background: conic-gradient(
    from 220deg,
    hsl(var(--primary)) 0deg,
    hsl(var(--primary) / 0.45) calc(var(--ring-stop) * 0.5),
    hsl(var(--primary) / 0.05) var(--ring-stop),
    transparent var(--ring-stop)
  );
  mask: radial-gradient(circle, transparent 16px, #000 17px);
  -webkit-mask: radial-gradient(circle, transparent 16px, #000 17px);
  transition: filter 200ms ease;
}
.secuura-identity-pill[data-role="issuer"] .secuura-identity-pill__ring { --ring-stop: 250deg; }
.secuura-identity-pill[data-role="user"]   .secuura-identity-pill__ring { --ring-stop: 180deg; }
.secuura-identity-pill[data-role="guest"]  .secuura-identity-pill__ring {
  background: none;
  border: 1px dashed hsl(var(--muted-foreground) / 0.5);
  mask: none;
  -webkit-mask: none;
}
.secuura-identity-pill__initials {
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  background-color: hsl(var(--card));
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  display: inline-grid;
  place-items: center;
}
.secuura-identity-pill__avatar:hover .secuura-identity-pill__ring,
.secuura-identity-pill__avatar:focus-visible .secuura-identity-pill__ring {
  filter: brightness(1.25) drop-shadow(0 0 6px hsl(var(--primary) / 0.5));
}
.secuura-identity-pill__avatar:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: 9999px;
}

/* ----- Meta column (name + role) ----- */
.secuura-identity-pill__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.secuura-identity-pill__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.secuura-identity-pill__role {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* PS-404: organisation line between name and role — rendered only when the org has a name. */
.secuura-identity-pill__org {
  font-size: 0.6875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----- Action cluster (sign-out + collapse) ----- */
.secuura-identity-pill__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.secuura-identity-pill__form { margin: 0; }
.secuura-identity-pill__icon-btn {
  width: 32px;
  height: 32px;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  border: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background-color 150ms ease, color 150ms ease;
  font-size: 0.875rem;
}
.secuura-identity-pill__icon-btn:hover {
  background-color: hsl(var(--muted) / 0.5);
  color: hsl(var(--foreground));
}
.secuura-identity-pill__icon-btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  color: hsl(var(--foreground));
}

/* ----- Collapsed-state behaviour (56px rail) ----- */
.secuura-sidebar[data-collapsed="true"] .secuura-identity-pill {
  grid-template-columns: 40px;
  justify-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
}
.secuura-sidebar[data-collapsed="true"] .secuura-identity-pill__meta { display: none; }
/* Keep the collapse/expand toggle reachable in the rail — only the sign-out icon
   is hidden to save space. Previously the whole actions cluster was display:none,
   which removed the sole expand affordance and left the rail un-reopenable except
   via the avatar popover (undiscoverable). The button's chevron/aria flip to
   "Expand" via applySidebarState in shell.js. */
.secuura-sidebar[data-collapsed="true"] .secuura-identity-pill__actions {
  display: flex;
  justify-content: center;
}
.secuura-sidebar[data-collapsed="true"] .secuura-identity-pill__form { display: none; }

/* ----- Popover (only used in collapsed state) -----
   06-13 pass 2: position: fixed so the popover escapes .secuura-sidebar's
   overflow-x: hidden clip. Bottom-left of the viewport, just past the collapsed
   56px rail (8px gap). z-index above any shell chrome. */
.secuura-identity-popover {
  position: fixed;
  bottom: 16px;
  left: 64px;
  width: 240px;
  padding: 14px;
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 24px rgba(0,0,0,0.5);
  z-index: 1080;          /* above sidebar (1031) and drawer scrim (1040) */
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: secuura-popover-in 160ms ease-out;
}
.secuura-identity-popover[hidden] { display: none; }
.secuura-identity-popover__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}
.secuura-identity-popover__role {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
/* PS-404: organisation line in the popover — rendered only when the org has a name. */
.secuura-identity-popover__org {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
.secuura-identity-popover__email {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  word-break: break-all;
  padding-bottom: 8px;
  border-bottom: 1px solid hsl(var(--border));
}
.secuura-identity-popover__actions { display: flex; flex-direction: column; gap: 4px; }

/* Dedicated action button used inside the identity popover. Decoupled from the
   sidebar-item class chain so the collapsed-sidebar "hide spans" rule (line 78)
   can never affect it — Steve's Image #73 ask: "can't read the signout". */
.secuura-popover-action {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 4px);
  background: transparent;
  color: hsl(var(--popover-foreground));
  font-size: 0.875rem;
  font-weight: 500;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.secuura-popover-action span { display: inline !important; }
.secuura-popover-action i {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  color: hsl(var(--popover-foreground));
}
.secuura-popover-action:hover,
.secuura-popover-action:focus-visible {
  background: hsl(var(--muted));
  border-color: hsl(var(--border));
}
.secuura-popover-action:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: -2px;
}
.secuura-popover-action--danger { color: hsl(var(--destructive)); }
.secuura-popover-action--danger i { color: hsl(var(--destructive)); }
.secuura-popover-action--danger:hover {
  background: hsl(var(--destructive) / 0.1);
  border-color: hsl(var(--destructive) / 0.3);
}

/* Form wrappers around .secuura-popover-action must not collapse with the
   sidebar's collapsed-state rules — force display so the Sign-out button
   reliably appears in both states. */
.secuura-identity-popover form { display: block; margin: 0; }

@keyframes secuura-popover-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .secuura-identity-popover { animation: none; }
  .secuura-identity-pill__ring,
  .secuura-identity-pill__icon-btn { transition: none; }
}

/* 06-13 pass 2: compact page footer — rendered inside the shell main area so it
   doesn't span behind the sidebar. Copyright on the left, legal links right-aligned.
   No center brand text. */
.secuura-shell-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 24px;
  border-top: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
.secuura-shell-footer-copy {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.secuura-shell-footer-links {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  margin-left: auto;
}
.secuura-shell-footer-links a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
}
.secuura-shell-footer-links a:hover,
.secuura-shell-footer-links a:focus-visible {
  color: hsl(var(--foreground));
  text-decoration: underline;
}
@media (max-width: 575.98px) {
  .secuura-shell-footer-bar {
    flex-direction: column;
    gap: 4px;
    padding: 8px 16px;
    align-items: stretch;
    text-align: center;
  }
  .secuura-shell-footer-links {
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Active page: left accent bar + bold weight (L-10 mechanic) */
.secuura-sidebar-item[aria-current="page"] {
  background-color: hsl(var(--muted));
  font-weight: 600;
  box-shadow: inset 3px 0 0 hsl(var(--primary));
}

.secuura-sidebar-item[aria-current="page"] i {
  color: hsl(var(--primary));
}

/* "Soon" greyed-italic items (L-10: not omitted, just signalled) */
.secuura-sidebar-item--soon {
  color: hsl(var(--muted-foreground));
  font-style: italic;
  cursor: not-allowed;
  pointer-events: none;
}

.secuura-sidebar-item--soon i {
  color: hsl(var(--muted-foreground));
  opacity: 0.6;
}

/* ---- Pill badges (right-aligned count indicators) ---- */
.secuura-sidebar-pill {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
  /* Primary variant: action-needed (teal) */
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Secondary variant: informational */
.secuura-sidebar-pill--secondary {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/* ---- Collapse toggle button ---- */
.secuura-sidebar-collapse-btn {
  margin-top: auto;
  padding: 8px;
  border: none;
  background-color: transparent;
  color: hsl(var(--muted-foreground));
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  align-self: flex-end;
  transition: background-color 150ms ease, color 150ms ease;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.secuura-sidebar-collapse-btn:hover,
.secuura-sidebar-collapse-btn:focus-visible {
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.secuura-sidebar-collapse-btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}


/* ============================================================
   3. Topbar
   Fixed 56px header with three slots: breadcrumb | spacer | actions.
   Sits in the RHS grid row above .secuura-shell-main.
   ============================================================ */

.secuura-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;                       /* aligns with .secuura-shell-main left edge */
  height: 56px;                          /* paired with .secuura-shell-rhs grid row */
  background-color: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
  flex-shrink: 0;
}

/* Mobile hamburger — hidden by default, shown below 768px breakpoint */
.secuura-topbar-hamburger {
  display: none;
  padding: 8px;
  border: none;
  background-color: transparent;
  color: hsl(var(--foreground));
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.secuura-topbar-hamburger:hover {
  background-color: hsl(var(--muted));
}

.secuura-topbar-hamburger:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Breadcrumb — left slot. 06-13 (impeccable polish): when the breadcrumb IS
   the page title (no longer hidden via HideTopbarBreadcrumb on workspace pages),
   it should read like a heading. Promoted to Title-size + 600 weight. */
.secuura-topbar-breadcrumb {
  flex-shrink: 0;
  font-size: 0.9375rem;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.secuura-topbar-breadcrumb a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color 150ms ease;
}

.secuura-topbar-breadcrumb a:hover {
  color: hsl(var(--foreground));
}

.secuura-topbar-breadcrumb-current {
  color: hsl(var(--foreground));
  font-weight: 600;
  font-size: 1.0625rem;             /* 17px — title scale; reads as page heading */
  letter-spacing: -0.005em;
  margin: 0;                        /* h1 default browser margin removed (Audit Phase 5) */
}

/* Spacer — center (flex-grow pushes actions to the right) */
.secuura-topbar-spacer {
  flex-grow: 1;
}

/* Actions cluster — right slot */
.secuura-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.secuura-topbar-search {
  max-width: 240px;
  height: 32px;
}

/* CTA button (role-aware "+ Upload" / "+ Upload & certify") */
.secuura-topbar-cta {
  height: 32px;
  padding: 0 12px;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 150ms ease, border-color 150ms ease;
}


/* ============================================================
   4. Right-side drawer + scrim
   Slides in from the right: translateX(100%) → 0.
   Used by /Shares detail panel and foundation surfaces.
   z-index: scrim 1040, drawer 1050 (above Bootstrap modals at 1050 →
   intentional: drawer is a panel companion, not a blocking modal).
   ============================================================ */

/* Full-screen scrim behind the drawer */
.secuura-drawer-scrim {
  position: fixed;
  inset: 0;
  background-color: hsl(var(--foreground) / 0);
  pointer-events: none;
  transition: background-color 200ms ease-out;
  z-index: 1040;
}

.secuura-drawer-scrim[data-open="true"] {
  background-color: hsl(var(--foreground) / 0.45);
  pointer-events: auto;
}

/* Drawer panel */
.secuura-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 90vw;
  background-color: hsl(var(--card));
  border-left: 1px solid hsl(var(--border));
  transform: translateX(100%);
  opacity: 0;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  outline: none;
}

.secuura-drawer[data-open="true"] {
  transform: translateX(0);
  opacity: 1;
}

/* Drawer header: title + close button */
.secuura-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid hsl(var(--border));
  flex-shrink: 0;
}

.secuura-drawer-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Close (×) button */
.secuura-drawer-close {
  padding: 0;
  border: none;
  background-color: transparent;
  color: hsl(var(--muted-foreground));
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 150ms ease, color 150ms ease;
}

.secuura-drawer-close:hover {
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.secuura-drawer-close:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Drawer body: scrollable content area */
.secuura-drawer-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 16px;
}


/* ============================================================
   5. Mobile responsive — sidebar becomes off-canvas drawer
   Breakpoint: <768px (phone). Sidebar slides from the left.
   ============================================================ */

@media (max-width: 767.98px) {
  /* Collapse grid to single column — sidebar floats over main */
  .secuura-shell {
    grid-template-columns: 1fr;
  }

  /* Also remove the collapsed-variant column override on mobile */
  .secuura-shell:has(.secuura-sidebar[data-collapsed="true"]) {
    grid-template-columns: 1fr;
  }

  /* Sidebar becomes a fixed off-canvas panel sliding in from left */
  .secuura-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 200ms ease-out;
    z-index: 1060;
  }

  /* Mobile-open state: sidebar slides in + soft shadow */
  .secuura-sidebar[data-mobile-open="true"] {
    transform: translateX(0);
    box-shadow: 0 0 32px hsl(var(--foreground) / 0.2);
  }

  /* Show in-sidebar close affordance only at the mobile breakpoint —
     desktop hides it (rule outside this @media). */
  .secuura-sidebar-mobile-close {
    display: inline-flex;
  }

  /* Show hamburger on mobile; it was hidden above */
  .secuura-topbar-hamburger {
    display: inline-flex;
  }

  /* Hide desktop collapse toggle on mobile */
  .secuura-sidebar-collapse-btn {
    display: none;
  }

  /* Tighter padding on small screens */
  .secuura-shell-main {
    padding: 16px;
  }

  /* Drawer becomes full-screen modal on phones */
  .secuura-drawer {
    width: 100vw;
    max-width: 100vw;
  }

  /* Restore sidebar item layout on mobile (not collapsed) */
  .secuura-sidebar[data-collapsed="true"] .secuura-sidebar-item {
    justify-content: flex-start;
    padding: 8px 12px;
  }

  /* Restore all labels on mobile even if collapsed preference was set */
  .secuura-sidebar[data-collapsed="true"] .secuura-sidebar-heading,
  .secuura-sidebar[data-collapsed="true"] .secuura-sidebar-item span,
  .secuura-sidebar[data-collapsed="true"] .secuura-sidebar-brand-text,
  .secuura-sidebar[data-collapsed="true"] .secuura-sidebar-pill {
    display: revert;
  }
}


/* ============================================================
   6. Reduced-motion accommodations (WCAG 2.3.3 / L-03 spec)
   All transitions disabled for users who prefer reduced motion.
   Opacity/color changes are still applied — only animation stripped.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .secuura-sidebar,
  .secuura-drawer,
  .secuura-drawer-scrim,
  .secuura-sidebar-item,
  .secuura-sidebar-collapse-btn,
  .secuura-topbar-hamburger,
  .secuura-topbar-cta,
  .secuura-drawer-close,
  .secuura-topbar-breadcrumb a {
    transition: none;
  }
}


/* ============================================================
   7a. Phase 11 mobile touch-target refinements
   Appended by 06-11 — append only, no existing rules modified.
   ============================================================ */

@media (max-width: 767.98px) {
  .secuura-shell-main { padding: 12px; }
  /* All interactive items in sidebar/topbar/drawer become 44px tall on touch */
  .secuura-sidebar-item,
  .secuura-topbar .btn,
  .secuura-drawer .btn { min-height: 44px; }
  /* Topbar: hide search input on phone — keep CTA + theme toggle visible */
  .secuura-topbar-search { display: none; }
  /* Topbar breadcrumb: hide text on very narrow screens */
  .secuura-topbar-breadcrumb { display: none; }
}


/* ============================================================
   7. Collapsed sidebar tooltip (hover reveal on icon rail)
   When collapsed, the title attribute is not visually apparent;
   a CSS-driven tooltip provides the label on :hover.
   Shell.js may also inject aria-label + title for AT support.
   ============================================================ */

.secuura-sidebar[data-collapsed="true"] .secuura-sidebar-item {
  position: relative;
}

/* The tooltip is injected by shell.js via data-label attribute;
   this CSS provides the display mechanism. */
.secuura-sidebar[data-collapsed="true"] .secuura-sidebar-item[data-label]:hover::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: 4px 8px;
  border-radius: calc(var(--radius) - 4px);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1100;
}

/* ============================================================================
 * Identity pill relocated to the TOP-RIGHT of the topbar (_IdentityPill.cshtml).
 * The base .secuura-identity-pill rules are sidebar-oriented; these compact it for
 * the topbar and anchor its popover below-right. The sidebar keeps only the
 * standalone collapse chevron at its foot (.secuura-sidebar-collapse-row).
 * Appended last so it wins the cascade over the base pill + topbar rules.
 * ========================================================================== */
.secuura-identity-pill--topbar {
  margin-top: 0;
  padding: 3px 6px 3px 4px;
  gap: 8px;
  display: flex;          /* trigger (avatar+meta) + sign-out, laid out inline */
  align-items: center;
  background: transparent;
  box-shadow: none;
  border-radius: 9999px;
  transition: background-color 150ms ease;
}
.secuura-identity-pill--topbar:hover {
  background: hsl(var(--muted) / 0.45);
}
/* The popover trigger spans the avatar + name/role. Avatar stays 40px so the
   presence-ring "swish" (conic gradient masked with a fixed 16px hole) renders
   exactly as before. Sign-out is a separate control, outside this button. */
.secuura-identity-pill__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px;
  background: transparent;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.secuura-identity-pill__trigger:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
.secuura-identity-pill__trigger:hover .secuura-identity-pill__ring,
.secuura-identity-pill__trigger:focus-visible .secuura-identity-pill__ring {
  filter: brightness(1.25);
}
.secuura-identity-pill--topbar .secuura-identity-pill__meta {
  line-height: 1.15;
  min-width: 0;
  max-width: 150px;
}
.secuura-identity-pill--topbar .secuura-identity-pill__name {
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.secuura-identity-pill--topbar .secuura-identity-pill__role {
  font-size: 0.625rem;
}
.secuura-identity-pill--topbar .secuura-identity-pill__org {
  font-size: 0.625rem;
}
.secuura-identity-pill--topbar .secuura-identity-pill__icon-btn {
  width: 28px;
  height: 28px;
}
/* Popover now drops DOWN from the top-right pill (base rule anchors it bottom-left
   to the sidebar). Anchored to the pill, which is position:relative. */
.secuura-identity-pill--topbar .secuura-identity-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  bottom: auto;
  left: auto;
}
/* Narrow widths: collapse the pill to just the ringed avatar (name/role hidden). */
@media (max-width: 991.98px) {
  .secuura-identity-pill--topbar .secuura-identity-pill__meta { display: none; }
}

/* Standalone sidebar collapse control — sits at the foot where the pill used to be. */
/* Pinned to the foot of the sidebar. The inner button is a .secuura-sidebar-item,
   so it aligns with the menu items and inherits the collapsed-state rules
   (icon centered + label hidden). */
.secuura-sidebar-collapse-row {
  margin-top: auto;
  padding: 4px 0 10px;
}

/* Light/Dark toggle relocated to the top-left of the menu bar (sidebar brand,
   beside the wordmark). Pushed to the right edge of the brand row; hidden in the
   collapsed rail where there's no room beside the 32px swan icon. */
.secuura-sidebar-brand .nav-item {
  margin: 0 0 0 auto;
  flex-shrink: 0;
}
.secuura-sidebar[data-collapsed="true"] .secuura-sidebar-brand .nav-item {
  display: none;
}

/* ── Chain / integrity table row highlights ───────────────────────────────
   Bootstrap's .table-* row variants paint a light background, but the dark
   theme keeps the row text light → unreadable on those rows. Force a much
   lighter tint + near-black text so the root/current/clicked (and integrity
   "fail") rows read in both the dark and the white theme. Scoped to chain /
   integrity tables via .secuura-chain-highlight so other tables are untouched.
   Only plain cell text is recoloured — <code>, badges and buttons keep their
   own colours. */
.secuura-chain-highlight tbody tr.table-success td,
.secuura-chain-highlight tbody tr.table-success th { background-color: #eef8f1 !important; color: #1a1a1a !important; }
.secuura-chain-highlight tbody tr.table-info td,
.secuura-chain-highlight tbody tr.table-info th    { background-color: #ecf3fc !important; color: #1a1a1a !important; }
.secuura-chain-highlight tbody tr.table-warning td,
.secuura-chain-highlight tbody tr.table-warning th { background-color: #fdf7e6 !important; color: #1a1a1a !important; }
.secuura-chain-highlight tbody tr.table-danger td,
.secuura-chain-highlight tbody tr.table-danger th  { background-color: #fdeef0 !important; color: #1a1a1a !important; }

/* ── Embedded mode ──────────────────────────────────────────────────────────
   A page rendered inside an iframe (e.g. the lineage view hosting an action flow
   in a modal) drops the app shell so only the page content shows. is-embedded is
   set on <html> in _HeadAssets before first paint.

   The shell is normally a 100vh grid (sidebar | rhs[topbar/main/footer]) with the
   rhs `overflow:hidden` and `.secuura-shell-main` scrolling INSIDE it. Inside an
   iframe that clips the content, so we fully neutralise the grid/height/overflow and
   let .secuura-shell-main flow as a normal block. */
html.is-embedded, html.is-embedded body {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
html.is-embedded body { background: hsl(var(--background)); }

html.is-embedded .secuura-shell,
html.is-embedded .secuura-shell-rhs,
html.is-embedded .secuura-shell-main {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Hide the sidebar + drawer host (shell children that aren't the rhs) and the topbar
   (rhs child that isn't the main content) and the footer. */
html.is-embedded .secuura-shell > *:not(.secuura-shell-rhs) { display: none !important; }
html.is-embedded .secuura-shell-rhs > *:not(.secuura-shell-main) { display: none !important; }
html.is-embedded .secuura-shell-footer-bar { display: none !important; }
html.is-embedded .secuura-shell-main { padding: 1rem 1.25rem !important; max-width: 100% !important; }

/* Hide the in-page Back affordance — it navigates elsewhere in the app, confusing inside the
   action modal. Cancel stays visible: in lineage-launched flows it returns to the lineage (it
   carries retval=lineage), giving the user the expected Cancel / <Action> pair in the modal. */
html.is-embedded [data-testid$="-back-link"] { display: none !important; }