/**
 * SENVIQ Design System — AppShell/Sidebar/TopBar (the future
 * authenticated application, Prompt 46+) and the Portal shell (the
 * anonymous recipient experience). Two distinct shells by design —
 * see SENVIQ_VISUAL_DIRECTION.md: the Portal never uses the sidebar
 * shell (Prompt 43's own instruction).
 */

/* ================= App Shell (authenticated application) ================= */

/**
 * Prompt 45 — real bug found via actual browser testing, same shape as
 * Prompt 43's .senviq-modal-backdrop fix: author `display` styles beat
 * the UA's own `[hidden] { display: none }` default even when the
 * `hidden` attribute IS present, unless explicitly guarded. Without
 * `:not([hidden])` here, `<div class="senviq-app-shell" hidden>` still
 * rendered as a visible grid — this is exactly the "briefly show
 * unauthorized navigation while permissions are loading" failure mode
 * AUTHENTICATED_APP_ARCHITECTURE.md's fail-closed rule forbids.
 */
.senviq-app-shell:not([hidden]) {
  display: grid;
  grid-template-columns: var(--senviq-sidebar-width) 1fr;
  grid-template-rows: var(--senviq-topbar-height) 1fr;
  grid-template-areas:
    'sidebar topbar'
    'sidebar main';
  min-height: 100vh;
  background: var(--senviq-bg);
}

.senviq-app-shell[data-sidebar-collapsed='true'] {
  grid-template-columns: var(--senviq-sidebar-width-collapsed) 1fr;
}

.senviq-app-shell__sidebar {
  grid-area: sidebar;
  background: var(--senviq-white);
  border-right: 1px solid var(--senviq-border);
  display: flex;
  flex-direction: column;
  padding: var(--senviq-space-5) var(--senviq-space-4);
  overflow-y: auto;
}

.senviq-app-shell__brand {
  display: flex;
  flex-direction: column;
  padding: 0 var(--senviq-space-2) var(--senviq-space-6);
}
.senviq-app-shell__brand-wordmark {
  font-size: 1.25rem;
  font-weight: var(--senviq-fw-bold);
  color: var(--senviq-navy);
  letter-spacing: 0.02em;
}
.senviq-app-shell__brand-endorsement {
  font-size: var(--senviq-fs-caption);
  color: var(--senviq-muted);
}

.senviq-app-shell__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--senviq-space-1);
}
.senviq-app-shell__nav-group-label {
  font-size: var(--senviq-fs-caption);
  font-weight: var(--senviq-fw-semibold);
  letter-spacing: var(--senviq-ls-caption);
  text-transform: uppercase;
  color: var(--senviq-muted);
  padding: var(--senviq-space-4) var(--senviq-space-3) var(--senviq-space-2);
}

.senviq-app-shell__nav-item {
  display: flex;
  align-items: center;
  gap: var(--senviq-space-3);
  padding: var(--senviq-space-2) var(--senviq-space-3);
  border-radius: var(--senviq-radius-md);
  color: var(--senviq-muted);
  text-decoration: none;
  font-size: var(--senviq-fs-body);
  font-weight: var(--senviq-fw-medium);
  border-left: 3px solid transparent;
}
.senviq-app-shell__nav-item:hover {
  background: var(--senviq-bg);
  color: var(--senviq-navy);
}
.senviq-app-shell__nav-item[aria-current='page'] {
  background: var(--senviq-blue-tint);
  color: var(--senviq-blue);
  border-left-color: var(--senviq-blue);
  font-weight: var(--senviq-fw-semibold);
}
.senviq-app-shell__nav-item-badge {
  margin-left: auto;
}

.senviq-app-shell__sidebar-footer {
  margin-top: auto;
  padding-top: var(--senviq-space-4);
}

.senviq-app-shell__topbar {
  grid-area: topbar;
  background: var(--senviq-white);
  border-bottom: 1px solid var(--senviq-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--senviq-space-4);
  padding: 0 var(--senviq-space-6);
}
.senviq-app-shell__topbar-search {
  flex: 1;
  max-width: 480px;
}
.senviq-app-shell__topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--senviq-space-3);
}
.senviq-app-shell__user {
  display: flex;
  align-items: center;
  gap: var(--senviq-space-2);
  cursor: pointer;
  padding: var(--senviq-space-1) var(--senviq-space-2);
  border-radius: var(--senviq-radius-md);
  border: none;
  background: none;
}
.senviq-app-shell__user:hover {
  background: var(--senviq-bg);
}
.senviq-app-shell__user-name {
  font-size: var(--senviq-fs-small);
  font-weight: var(--senviq-fw-semibold);
  color: var(--senviq-navy);
  line-height: 1.2;
}
.senviq-app-shell__user-org {
  font-size: var(--senviq-fs-caption);
  color: var(--senviq-muted);
  line-height: 1.2;
}

.senviq-app-shell__main {
  grid-area: main;
  padding: var(--senviq-space-8);
  max-width: var(--senviq-content-max-width);
  width: 100%;
  overflow-y: auto;
}

/** Hidden by default (desktop) — the topbar's own hamburger toggle only has a job once the sidebar goes off-canvas below. */
.senviq-app-shell__menu-toggle {
  display: none;
}

.senviq-app-shell__sidebar-backdrop {
  display: none;
}

/**
 * Mobile: the sidebar becomes an off-canvas drawer (reuses
 * .senviq-drawer's transform pattern from overlays.css via a shared
 * `data-open` attribute — see behaviors.js), and the topbar gains a
 * menu-toggle IconButton. This is a LAYOUT rule set, not a new
 * component — the same sidebar markup just changes position.
 */
@media (max-width: 1024px) {
  /*
   * Prompt 46 — real bug found via an actual Dashboard screenshot at a
   * 375px viewport: the base rule above is `.senviq-app-shell:not([hidden])`
   * (specificity 0,2,0 — `:not()` carries its argument's own
   * specificity), which beats this plain `.senviq-app-shell` rule
   * (0,1,0) regardless of media-query/source order. The desktop
   * two-column grid-template-columns therefore never actually got
   * overridden on mobile — the sidebar's own `position:fixed`
   * off-canvas transform still worked (so `data-open` toggling looked
   * fine in a functional test), but the GRID ITSELF kept reserving the
   * full desktop sidebar-width column, squeezing all real content into
   * the remaining sliver. Matching the base rule's own selector shape
   * here is what actually wins the cascade.
   */
  .senviq-app-shell:not([hidden]) {
    grid-template-columns: 1fr;
    grid-template-areas:
      'topbar'
      'main';
  }
  .senviq-app-shell__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 85vw);
    z-index: var(--senviq-z-drawer);
    transform: translateX(-100%);
    transition: transform var(--senviq-duration-base) var(--senviq-easing-emphasized);
    box-shadow: var(--senviq-shadow-lg);
  }
  .senviq-app-shell__sidebar[data-open='true'] {
    transform: translateX(0);
  }
  .senviq-app-shell__main {
    padding: var(--senviq-space-4);
  }
  .senviq-app-shell__menu-toggle {
    display: inline-flex;
  }
  .senviq-app-shell__sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 33, 61, 0.45);
    z-index: calc(var(--senviq-z-drawer) - 1);
  }
  .senviq-app-shell__sidebar-backdrop:not([hidden]) {
    display: block;
  }
}

@media (max-width: 640px) {
  .senviq-app-shell__topbar-search {
    display: none; /* a mobile topbar makes room for the primary actions first; search moves to its own affordance rather than fighting for width — a future prompt's concern, not this one's to solve fully */
  }
  .senviq-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ================= Portal Shell (anonymous recipient experience) ================= */

.senviq-portal-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--senviq-bg);
}

.senviq-portal-shell__topbar {
  padding: var(--senviq-space-4) var(--senviq-space-6);
  background: var(--senviq-white);
  border-bottom: 1px solid var(--senviq-border);
}
.senviq-portal-shell__brand {
  font-size: 1.1rem;
  font-weight: var(--senviq-fw-bold);
  color: var(--senviq-navy);
}

.senviq-portal-shell__main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--senviq-space-8) var(--senviq-space-4);
}

/**
 * ONE PRIMARY TASK PER SCREEN (Prompt 43's own Portal principle) — a
 * single centered card, never a multi-column layout, never competing
 * navigation. Reuses .senviq-card for the surface itself.
 */
.senviq-portal-shell__card {
  width: 100%;
  max-width: var(--senviq-portal-max-width);
}

.senviq-portal-shell__footer {
  padding: var(--senviq-space-4) var(--senviq-space-6);
  text-align: center;
  font-size: var(--senviq-fs-caption);
  color: var(--senviq-muted);
}

@media (max-width: 640px) {
  .senviq-portal-shell__main {
    padding: var(--senviq-space-4);
  }
}