/*
  Capital Clarity Workspace Shell
  ---------------------------------------------------------------------------
  Persistent SaaS-style frame for advisor-facing pages. This stylesheet owns
  only the outer app layout: left sidebar, top header, and workspace surface.
  Existing page-local card and section styles remain intact during rollout.
*/

.ibc-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  background: var(--ibc-shell-bg, #f5f6f8);
  color: var(--ibc-color-ink-600, #374151);
  font-family: var(--ibc-font-family-base, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/*
  Sidebar
  Holds global product navigation. Household-aware links are enabled only when
  a household_id is present in the current URL.
*/
.ibc-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--ibc-color-ink-900, #0f2044);
  /* Not var(--ibc-color-surface-0) -- this background is always dark (ink-900 stays dark in
     both the light and .cc-theme token sets), but surface-0 flips: white in light mode
     (coincidentally fine) and dark navy in .cc-theme -- dark-on-dark. brand-northstar.css only
     overrides specific sidebar sub-elements (.ibc-sidebar-brand/-title/-nav a/etc.), not this
     base color, so any sidebar text not wrapped in one of those had no fallback. #fff is
     correct in both themes since the background never goes light. */
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.08);
  padding: var(--ibc-space-4, 16px) var(--ibc-space-3, 12px);
}

.ibc-sidebar-header {
  padding: 0 var(--ibc-space-2, 8px) var(--ibc-space-4, 16px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: var(--ibc-space-3, 12px);
}

.ibc-sidebar-brand {
  color: var(--ibc-color-accent-gold, #c9a84c);
  font-size: var(--ibc-font-size-xs, .72rem);
  font-weight: var(--ibc-font-weight-bold, 800);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ibc-sidebar-title {
  margin-top: var(--ibc-space-1, 4px);
  color: #fff;
  font-size: var(--ibc-font-size-lg, 1.08rem);
  font-weight: var(--ibc-font-weight-bold, 800);
  line-height: var(--ibc-line-height-tight, 1.2);
}

.ibc-sidebar-nav {
  display: flex;
  flex-direction: column;
  /* P10.1: more separation between the five lifecycle/operational groups. */
  gap: var(--ibc-space-4, 18px);
}

/*
  Phase A1 — fail-closed navigation states.

  While the role is unknown the nav element is EMPTY, not hidden: there is no privileged
  link in the DOM to click, focus or copy. These rules only supply a neutral placeholder so
  the sidebar reads as loading rather than broken. They are cosmetic — deleting them would
  not weaken the guarantee, because the guarantee is the absence of the nodes.
*/
.ibc-sidebar-nav[data-nav-state="initializing"]::after {
  content: "";
  display: block;
  height: 96px;
  border-radius: var(--ibc-radius-sm, 6px);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, .05) 30%,
    rgba(255, 255, 255, .11) 50%,
    rgba(255, 255, 255, .05) 70%
  );
  background-size: 200% 100%;
  animation: ibc-sidebar-nav-shimmer 1.4s ease-in-out infinite;
}

/* The role could not be established. Say so quietly; never fall back to a full menu. */
.ibc-sidebar-nav[data-nav-state="unavailable"]::after {
  content: "Navigation unavailable";
  display: block;
  padding: var(--ibc-space-2, 8px);
  color: rgba(255, 255, 255, .55);
  font-size: var(--ibc-font-size-xs, .72rem);
}

@keyframes ibc-sidebar-nav-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ibc-sidebar-nav[data-nav-state="initializing"]::after { animation: none; }
}

.ibc-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--ibc-space-1, 4px);
}

.ibc-sidebar-section-secondary {
  padding-top: var(--ibc-space-3, 12px);
  border-top: 1px solid rgba(255,255,255,.1);
}

.ibc-sidebar-section-secondary .ibc-sidebar-section-label {
  color: rgba(255,255,255,.4);
}

.ibc-sidebar-section-secondary .ibc-sidebar-link {
  min-height: 30px;
  color: rgba(255,255,255,.62);
  font-size: var(--ibc-font-size-xs, .76rem);
}

.ibc-sidebar-section-utility {
  margin-top: var(--ibc-space-2, 8px);
}

.ibc-sidebar-section-label {
  padding: 0 var(--ibc-space-2, 8px);
  margin-bottom: var(--ibc-space-1, 4px);
  color: rgba(255,255,255,.52);
  font-size: var(--ibc-font-size-xs, .72rem);
  font-weight: var(--ibc-font-weight-bold, 800);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.ibc-sidebar-link {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px var(--ibc-space-2, 8px);
  border-radius: var(--ibc-radius-md, 8px);
  color: rgba(255,255,255,.78);
  font-size: var(--ibc-font-size-sm, .82rem);
  font-weight: var(--ibc-font-weight-semibold, 700);
  text-decoration: none;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.ibc-sidebar-link:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.ibc-sidebar-link-active,
.ibc-sidebar-link[aria-current="page"] {
  background: rgba(201,168,76,.16);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--ibc-color-accent-gold, #c9a84c);
}

.ibc-sidebar-link:focus-visible {
  outline: 3px solid rgba(201,168,76,.34);
  outline-offset: 2px;
}

.ibc-sidebar-link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .48;
}

/*
  Main frame
  Topbar stays above the workspace. Page-local sticky nav can remain inside the
  workspace until future phases consolidate navigation.
*/
.ibc-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ibc-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ibc-space-4, 16px);
  min-height: 56px;
  padding: 10px var(--ibc-space-6, 24px);
  border-bottom: 1px solid var(--ibc-color-border-soft, #e5e7eb);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  box-shadow: var(--ibc-shadow-xs, 0 1px 2px rgba(15,32,68,.06));
}

.ibc-topbar-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ibc-topbar-context {
  color: var(--ibc-color-muted, #6b7280);
  font-size: var(--ibc-font-size-xs, .72rem);
  font-weight: var(--ibc-font-weight-bold, 800);
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ibc-topbar-title {
  min-width: 0;
  margin: 0;
  color: var(--ibc-color-ink-900, #0f2044);
  font-size: 1rem;
  font-weight: var(--ibc-font-weight-bold, 800);
  line-height: var(--ibc-line-height-tight, 1.2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ibc-topbar-description {
  max-width: 760px;
  margin: 1px 0 0;
  color: var(--ibc-color-muted, #6b7280);
  font-size: var(--ibc-font-size-xs, .72rem);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ibc-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ibc-space-2, 8px);
  flex: 0 0 auto;
}

.ibc-search-trigger,
.ibc-search-close,
.ibc-notification-trigger,
.ibc-notification-close {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--ibc-color-border-soft, #d1d5db);
  border-radius: var(--ibc-radius-md, 8px);
  background: #fff;
  color: var(--ibc-color-ink-900, #0f2044);
  font: inherit;
  font-size: var(--ibc-font-size-sm, .82rem);
  font-weight: var(--ibc-font-weight-semibold, 700);
  cursor: pointer;
}

.ibc-search-trigger:hover,
.ibc-search-close:hover,
.ibc-notification-trigger:hover,
.ibc-notification-close:hover {
  border-color: var(--ibc-color-ink-900, #0f2044);
}

/*
  Top-bar actions and shell selects
  ---------------------------------------------------------------------------
  These class names were referenced by app-shell.js (Sign out, organization
  switcher) and workspace-scope.js (the "Show" work-scope control) but had no
  rule anywhere, so browsers fell back to native chrome — a square OS select
  and a default grey button sitting beside the styled Search/Notifications
  triggers. They share the trigger geometry above so the whole top bar reads as
  one control strip.
*/
.ibc-topbar-action,
.ibc-org-select,
.workspace-scope-select {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--ibc-color-border-soft, #d1d5db);
  border-radius: var(--ibc-radius-md, 8px);
  background: #fff;
  color: var(--ibc-color-ink-900, #0f2044);
  font: inherit;
  font-size: var(--ibc-font-size-sm, .82rem);
  font-weight: var(--ibc-font-weight-semibold, 700);
  cursor: pointer;
}

.ibc-topbar-action:hover:not(:disabled),
.ibc-org-select:hover,
.workspace-scope-select:hover {
  border-color: var(--ibc-color-ink-900, #0f2044);
}

.ibc-topbar-action:disabled {
  opacity: .6;
  cursor: default;
}

/* Sign out failed: say so on the control rather than leaving it looking normal. */
.ibc-sign-out[data-signout-error="true"] {
  border-color: var(--ibc-color-danger, #b91c1c);
  color: var(--ibc-color-danger, #b91c1c);
}

/*
  Native selects keep their OS appearance (square corners on Windows) unless
  appearance is reset, so the border-radius above is otherwise ignored. The
  chevron is an inline SVG data URI — no extra request, and it inherits nothing
  from the OS.
*/
.ibc-org-select,
.workspace-scope-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px 8px;
  text-overflow: ellipsis;
}

.ibc-org-select { max-width: 220px; }

.ibc-topbar-action:focus-visible,
.ibc-org-select:focus-visible,
.workspace-scope-select:focus-visible {
  outline: none;
  border-color: var(--ibc-color-link, #244a94);
  box-shadow: 0 0 0 3px var(--ibc-color-focus, rgba(36,74,148,.22));
}

/* The switcher hides itself when there is only one organization — see app-shell.js. */
.ibc-org-switcher {
  display: flex;
  align-items: center;
  gap: var(--ibc-space-2, 8px);
}

.ibc-org-switcher[hidden] { display: none; }

.ibc-org-switcher-label,
.workspace-scope-label {
  color: var(--ibc-color-text-muted, #6b7280);
  font-size: var(--ibc-font-size-xs, .72rem);
  font-weight: var(--ibc-font-weight-bold, 800);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* workspace-scope.js nests the select INSIDE its label, so the label is a flex row. */
.workspace-scope { display: flex; align-items: center; }

.workspace-scope-label {
  display: inline-flex;
  align-items: center;
  gap: var(--ibc-space-2, 8px);
}

.ibc-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: min(12vh, 96px) 20px 20px;
  background: rgba(15,32,68,.48);
}

.ibc-notification-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 72px 24px 24px;
  background: rgba(15,32,68,.3);
}

.ibc-notification-overlay[hidden] {
  display: none;
}

.ibc-notification-panel {
  width: min(420px, 100%);
  max-height: min(76vh, 760px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--ibc-color-border-soft, #e5e7eb);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15,32,68,.28);
}

.ibc-notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ibc-notification-title {
  color: var(--ibc-color-ink-900, #0f2044);
  font-size: 1rem;
  font-weight: var(--ibc-font-weight-bold, 800);
}

.ibc-notification-context,
.ibc-notification-state {
  margin-top: 8px;
  color: var(--ibc-color-muted, #6b7280);
  font-size: var(--ibc-font-size-xs, .72rem);
}

.ibc-notification-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.ibc-notification-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--ibc-color-border-soft, #e5e7eb);
  border-radius: var(--ibc-radius-md, 8px);
  color: inherit;
  text-decoration: none;
}

.ibc-notification-item:hover {
  border-color: var(--ibc-color-accent-gold, #c9a84c);
  background: #fffbeb;
}

.ibc-notification-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ibc-notification-label {
  color: var(--ibc-color-ink-900, #0f2044);
  font-size: var(--ibc-font-size-sm, .82rem);
  font-weight: var(--ibc-font-weight-bold, 800);
}

.ibc-notification-category {
  color: var(--ibc-color-muted, #6b7280);
  font-size: var(--ibc-font-size-xs, .72rem);
  text-transform: capitalize;
}

.ibc-notification-count {
  min-width: 28px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: var(--ibc-font-size-xs, .72rem);
  font-weight: var(--ibc-font-weight-bold, 800);
  text-align: center;
}

.ibc-search-overlay[hidden] {
  display: none;
}

.ibc-search-panel {
  width: min(680px, 100%);
  max-height: min(72vh, 720px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--ibc-color-border-soft, #e5e7eb);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15,32,68,.28);
}

.ibc-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.ibc-search-title {
  color: var(--ibc-color-ink-900, #0f2044);
  font-size: 1rem;
  font-weight: var(--ibc-font-weight-bold, 800);
}

.ibc-search-input {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--ibc-color-border-soft, #d1d5db);
  border-radius: var(--ibc-radius-md, 8px);
  color: var(--ibc-color-ink-900, #0f2044);
  font: inherit;
}

.ibc-search-input:focus {
  border-color: var(--ibc-color-accent-gold, #c9a84c);
  outline: 3px solid rgba(201,168,76,.18);
}

.ibc-search-context,
.ibc-search-hint,
.ibc-search-error {
  margin-top: 8px;
  color: var(--ibc-color-muted, #6b7280);
  font-size: var(--ibc-font-size-xs, .72rem);
}

.ibc-search-error {
  color: #991b1b;
}

.ibc-search-results {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.ibc-search-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ibc-search-section-title {
  color: var(--ibc-color-muted, #6b7280);
  font-size: var(--ibc-font-size-xs, .72rem);
  font-weight: var(--ibc-font-weight-bold, 800);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ibc-search-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--ibc-color-border-soft, #e5e7eb);
  border-radius: var(--ibc-radius-md, 8px);
  color: inherit;
  text-decoration: none;
}

.ibc-search-result:hover {
  border-color: var(--ibc-color-accent-gold, #c9a84c);
  background: #fffbeb;
}

.ibc-search-result-label {
  color: var(--ibc-color-ink-900, #0f2044);
  font-size: var(--ibc-font-size-sm, .82rem);
  font-weight: var(--ibc-font-weight-bold, 800);
}

.ibc-search-result-description {
  color: var(--ibc-color-muted, #6b7280);
  font-size: var(--ibc-font-size-xs, .72rem);
  line-height: 1.35;
}

.ibc-workspace {
  min-width: 0;
  width: 100%;
  padding-bottom: var(--ibc-space-8, 32px);
}

/*
  Legacy page headers remain in the wrapped HTML during rollout. The app shell
  topbar now owns the global title area, so suppress the old dark header inside
  the workspace without touching page behavior.
*/
.ibc-workspace > header {
  display: none;
}

/*
  Responsive behavior
  On smaller screens the sidebar becomes a horizontally scrolling top rail so
  existing page content remains usable without a mobile drawer dependency.
*/
@media (max-width: 900px) {
  .ibc-app {
    display: block;
  }

  .ibc-sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: auto;
    overflow-x: auto;
    overflow-y: visible;
    padding: var(--ibc-space-3, 12px);
  }

  .ibc-sidebar-header {
    display: none;
  }

  .ibc-sidebar-nav {
    flex-direction: row;
    gap: var(--ibc-space-2, 8px);
  }

  .ibc-sidebar-section {
    flex: 0 0 auto;
    flex-direction: row;
    gap: var(--ibc-space-2, 8px);
  }

  .ibc-sidebar-section-utility {
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--ibc-space-2, 8px);
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,.12);
  }

  .ibc-sidebar-section-secondary {
    padding-top: 0;
    padding-left: var(--ibc-space-2, 8px);
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,.12);
  }

  .ibc-sidebar-section-label {
    display: none;
  }

  .ibc-sidebar-link {
    white-space: nowrap;
    background: rgba(255,255,255,.06);
  }

  .ibc-topbar {
    top: 60px;
    min-height: 52px;
    padding: 10px var(--ibc-space-4, 16px);
  }
}

@media (max-width: 560px) {
  .ibc-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--ibc-space-2, 8px);
  }

  .ibc-topbar-heading {
    width: 100%;
  }

  .ibc-topbar-description {
    white-space: normal;
  }

  .ibc-topbar-actions {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }
}