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

/* 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;
  overflow-y: auto;
  overflow-x: 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;
}

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

/* ----- 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-content: center;
  padding: 12px 8px;
}
.secuura-sidebar[data-collapsed="true"] .secuura-identity-pill__meta,
.secuura-sidebar[data-collapsed="true"] .secuura-identity-pill__actions { 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));
}
.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;
}