/*
  IBC Platform Component Classes
  ---------------------------------------------------------------------------
  Reusable, opt-in classes for future UI modernization phases. The existing
  static pages keep their current inline CSS for now; these classes are
  available without changing current page behavior.
*/

/*
  App shell and page layout
  Use .ibc-app-shell on body or a page wrapper, then place content inside
  .ibc-page-container. .ibc-page-container--narrow is for focused forms.
*/
.ibc-app-shell {
  min-height: 100vh;
  background: var(--ibc-shell-bg);
  color: var(--ibc-color-ink-600);
  font-family: var(--ibc-font-family-base);
}

.ibc-page-container {
  width: min(100% - calc(var(--ibc-container-padding) * 2), var(--ibc-container-max));
  margin: 0 auto;
}

.ibc-page-container--narrow {
  max-width: var(--ibc-container-narrow);
}

.ibc-page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ibc-space-4);
}

/*
  Navigation and shell chrome
  Designed for compact advisor navigation across Households, Household Home,
  Circles, and Strategy.
*/
.ibc-topbar {
  background: var(--ibc-shell-header-bg);
  /* Not var(--ibc-color-surface-0) -- --ibc-shell-header-bg is always dark (ink-900 in light
     mode, near-black in .cc-theme), so this bar's background never flips light. surface-0 does
     flip, though: white in light mode (fine, coincidentally) but dark navy in .cc-theme, same as
     the background -- dark-on-dark. brand-northstar.css only patches .ibc-topbar-title/button
     text inside this bar, not the bar's own color, so any text sitting directly in .ibc-topbar
     had no fallback. #fff is correct in both themes since the background is always dark. */
  color: #fff;
  padding: var(--ibc-space-5) var(--ibc-container-padding);
}

.ibc-nav {
  position: sticky;
  top: var(--ibc-sticky-top);
  z-index: 20;
  display: flex;
  gap: var(--ibc-space-2);
  align-items: center;
  min-height: var(--ibc-nav-height-compact);
  overflow-x: auto;
  padding: var(--ibc-space-2);
  border: 1px solid var(--ibc-color-border-soft);
  border-radius: var(--ibc-radius-md);
  background: rgba(249, 250, 251, .94);
  box-shadow: var(--ibc-shadow-xs);
}

.ibc-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: var(--ibc-space-2) var(--ibc-space-3);
  border: 1px solid var(--ibc-color-border-soft);
  border-radius: var(--ibc-radius-md);
  background: var(--ibc-color-surface-0);
  color: var(--ibc-color-ink-900);
  font-size: var(--ibc-font-size-sm);
  font-weight: var(--ibc-font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

.ibc-nav__link[aria-current="page"],
.ibc-nav__link.is-active {
  background: var(--ibc-color-ink-900);
  border-color: var(--ibc-color-ink-900);
  color: var(--ibc-color-surface-0);
}

/*
  Cards and sections
  Use cards for individual records, forms, and framed tools. Page sections
  should stay unframed unless the content benefits from a contained surface.
*/
.ibc-card {
  background: var(--ibc-color-surface-0);
  border: 1px solid var(--ibc-color-border-soft);
  border-radius: var(--ibc-radius-md);
  box-shadow: var(--ibc-shadow-sm);
  padding: var(--ibc-space-5);
}

.ibc-card--compact {
  padding: var(--ibc-space-4);
}

.ibc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ibc-space-3);
  margin-bottom: var(--ibc-space-3);
}

.ibc-section-title {
  margin: 0;
  color: var(--ibc-color-text-strong);
  font-size: var(--ibc-font-size-lg);
  font-weight: var(--ibc-font-weight-bold);
  line-height: var(--ibc-line-height-tight);
}

.ibc-section-kicker {
  color: var(--ibc-color-ink-500);
  font-size: var(--ibc-font-size-xs);
  font-weight: var(--ibc-font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ibc-section-subtitle {
  color: var(--ibc-color-ink-500);
  font-size: var(--ibc-font-size-sm);
  line-height: var(--ibc-line-height-base);
}

/*
  Buttons
  Use anchors for navigation and buttons for actions. Keep labels compact:
  "Open Household", "Strategy", "Save", "Cancel".
*/
.ibc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: var(--ibc-space-2) var(--ibc-space-4);
  border: 1px solid transparent;
  border-radius: var(--ibc-radius-md);
  font: inherit;
  font-size: var(--ibc-font-size-sm);
  font-weight: var(--ibc-font-weight-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ibc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: var(--ibc-space-2) var(--ibc-space-4);
  border: 1px solid transparent;
  border-radius: var(--ibc-radius-md);
  font: inherit;
  font-size: var(--ibc-font-size-sm);
  font-weight: var(--ibc-font-weight-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ibc-btn:focus-visible {
  outline: 3px solid var(--ibc-color-focus);
  outline-offset: 2px;
}

.ibc-button:focus-visible {
  outline: 3px solid var(--ibc-color-focus);
  outline-offset: 2px;
}

.ibc-btn:disabled,
.ibc-btn[aria-disabled="true"],
.ibc-button:disabled,
.ibc-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
}

.ibc-btn--primary,
.ibc-button--primary {
  background: var(--ibc-color-ink-900);
  border-color: var(--ibc-color-ink-900);
  color: var(--ibc-color-surface-0);
}

.ibc-btn--primary:hover,
.ibc-button--primary:hover {
  background: var(--ibc-color-ink-800);
  border-color: var(--ibc-color-ink-800);
  box-shadow: var(--ibc-shadow-xs);
}

.ibc-btn--secondary,
.ibc-button--secondary {
  background: var(--ibc-color-surface-0);
  border-color: rgba(15, 32, 68, .28);
  color: var(--ibc-color-ink-900);
}

.ibc-btn--secondary:hover,
.ibc-button--secondary:hover {
  background: var(--ibc-color-surface-50);
  border-color: rgba(15, 32, 68, .42);
}

.ibc-btn--ghost,
.ibc-button--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ibc-color-ink-900);
}

.ibc-btn--ghost:hover,
.ibc-button--ghost:hover {
  background: var(--ibc-color-surface-200);
}

/*
  Badges
  Status badges are intentionally subtle and consistent across household status,
  workflow stage, decision status, task priority, appointments, and circles.
*/
.ibc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ibc-space-1);
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: var(--ibc-radius-pill);
  font-size: var(--ibc-font-size-xs);
  font-weight: var(--ibc-font-weight-bold);
  line-height: 1;
  white-space: nowrap;
}

.ibc-badge--success {
  background: var(--ibc-color-success-bg);
  border-color: var(--ibc-color-success-border);
  color: var(--ibc-color-success);
}

.ibc-badge--warning {
  background: var(--ibc-color-warning-bg);
  border-color: var(--ibc-color-warning-border);
  color: var(--ibc-color-warning);
}

.ibc-badge--danger {
  background: var(--ibc-color-danger-bg);
  border-color: var(--ibc-color-danger-border);
  color: var(--ibc-color-danger);
}

.ibc-badge--info {
  background: var(--ibc-color-info-bg);
  border-color: var(--ibc-color-info-border);
  color: var(--ibc-color-info);
}

.ibc-badge--purple {
  background: var(--ibc-color-purple-bg);
  border-color: var(--ibc-color-purple-border);
  color: var(--ibc-color-purple);
}

.ibc-badge--neutral {
  background: var(--ibc-color-neutral-bg);
  border-color: var(--ibc-color-neutral-border);
  color: var(--ibc-color-neutral);
}

.ibc-badge--muted,
.ibc-badge--status {
  background: var(--ibc-color-neutral-bg);
  border-color: var(--ibc-color-neutral-border);
  color: var(--ibc-color-neutral);
}

.ibc-badge--workflow,
.ibc-badge--opportunity,
.ibc-badge--ode {
  background: var(--ibc-color-info-bg);
  border-color: var(--ibc-color-info-border);
  color: var(--ibc-color-info);
}

/*
  Tables
  Use for dense directory and pipeline views. Wrap in .ibc-table-wrap on mobile
  to allow horizontal scrolling without compressing important labels.
*/
.ibc-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ibc-color-border-soft);
  border-radius: var(--ibc-radius-md);
  background: var(--ibc-color-surface-0);
}

.ibc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ibc-font-size-sm);
}

.ibc-table th,
.ibc-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ibc-color-border-soft);
  text-align: left;
  vertical-align: top;
}

.ibc-table th {
  background: var(--ibc-color-surface-50);
  color: var(--ibc-color-ink-500);
  font-size: var(--ibc-font-size-xs);
  font-weight: var(--ibc-font-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ibc-table tr:last-child td {
  border-bottom: 0;
}

/*
  Tabs and workspace grids
  Use these when a page has a central workspace plus an action/planning rail.
*/
.ibc-tab-list {
  display: flex;
  gap: var(--ibc-space-2);
  overflow-x: auto;
  padding: var(--ibc-space-2);
  border-bottom: 1px solid var(--ibc-color-border-soft);
  background: var(--ibc-color-surface-50);
}

.ibc-tab {
  min-height: var(--ibc-control-height-sm);
  padding: var(--ibc-space-2) var(--ibc-space-3);
  border: 1px solid transparent;
  border-radius: var(--ibc-radius-pill);
  background: transparent;
  color: var(--ibc-color-text-muted);
  font: inherit;
  font-size: var(--ibc-font-size-sm);
  font-weight: var(--ibc-font-weight-bold);
  white-space: nowrap;
  cursor: pointer;
}

.ibc-tab:hover {
  background: var(--ibc-color-surface-200);
  color: var(--ibc-color-text-strong);
}

.ibc-tab[aria-selected="true"],
.ibc-tab.is-active {
  background: var(--ibc-color-ink-900);
  border-color: var(--ibc-color-ink-900);
  color: var(--ibc-color-surface-0);
}

.ibc-tab:focus-visible {
  outline: 3px solid var(--ibc-color-focus);
  outline-offset: 2px;
}

.ibc-tab-panel {
  display: grid;
  gap: var(--ibc-space-4);
  padding: var(--ibc-space-4);
}

.ibc-action-rail {
  position: sticky;
  top: var(--ibc-rail-sticky-top);
  display: grid;
  gap: var(--ibc-space-4);
  align-self: start;
}

.ibc-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--ibc-space-3);
}

.ibc-summary-card {
  min-width: 0;
  padding: var(--ibc-space-4);
  border: 1px solid var(--ibc-color-border-soft);
  border-radius: var(--ibc-radius-md);
  background: var(--ibc-color-surface-raised);
  box-shadow: var(--ibc-shadow-xs);
}

/*
  Household progress bar
  Shows where a household sits in the standardized advisor journey. Use the
  full variant near the Household Command Center summary and the compact
  variant inside directory cards.
*/
.ibc-progress {
  display: grid;
  gap: var(--ibc-space-3);
  min-width: 0;
  padding: var(--ibc-space-4);
  border: 1px solid var(--ibc-color-border-soft);
  border-radius: var(--ibc-radius-md);
  background: var(--ibc-color-surface-raised);
  box-shadow: var(--ibc-shadow-card);
}

.ibc-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ibc-space-3);
}

.ibc-progress__eyebrow {
  color: var(--ibc-color-text-muted);
  font-size: var(--ibc-font-size-xs);
  font-weight: var(--ibc-font-weight-bold);
  letter-spacing: .055em;
  text-transform: uppercase;
}

.ibc-progress__current {
  color: var(--ibc-color-text-strong);
  font-size: var(--ibc-font-size-sm);
  font-weight: var(--ibc-font-weight-bold);
  text-align: right;
}

.ibc-progress__track {
  --ibc-progress-line: var(--ibc-color-border-soft);
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ibc-progress__track::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 9px;
  height: 2px;
  background: var(--ibc-progress-line);
}

.ibc-progress__step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--ibc-space-2);
  min-width: 0;
  color: var(--ibc-color-text-muted);
  font-size: .66rem;
  font-weight: var(--ibc-font-weight-bold);
  line-height: 1.2;
  text-align: center;
}

.ibc-progress__dot {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ibc-color-border);
  border-radius: var(--ibc-radius-pill);
  background: var(--ibc-color-surface-0);
  box-shadow: 0 0 0 3px var(--ibc-color-surface-raised);
}

.ibc-progress__step--complete .ibc-progress__dot {
  border-color: var(--ibc-color-success);
  background: var(--ibc-color-success);
}

.ibc-progress__step--current {
  color: var(--ibc-color-text-strong);
}

.ibc-progress__step--current .ibc-progress__dot {
  border-color: var(--ibc-color-border);
  background: var(--ibc-color-accent-gold);
}

.ibc-progress__label {
  max-width: 94px;
  overflow-wrap: anywhere;
}

.ibc-progress--compact {
  gap: var(--ibc-space-2);
  padding: 10px;
  box-shadow: none;
  background: var(--ibc-color-surface-muted);
}

.ibc-progress--compact .ibc-progress__header {
  align-items: baseline;
}

.ibc-progress--compact .ibc-progress__eyebrow {
  font-size: .62rem;
}

.ibc-progress--compact .ibc-progress__current {
  font-size: .74rem;
}

.ibc-progress--compact .ibc-progress__dot {
  width: 12px;
  height: 12px;
  border-width: 2px;
  box-shadow: 0 0 0 2px var(--ibc-color-surface-muted);
}

.ibc-progress--compact .ibc-progress__track::before {
  top: 5px;
}

/*
  Empty and loading states
  Use these for optional household sections so missing data feels intentional,
  not broken.

  Phase 2 (2026-08-19 screen cleanup): this is now the one shared "nothing
  here yet" treatment for the whole app -- icon + title + one line of body
  copy + an optional CTA. It replaces the half-dozen near-identical local
  versions each page had reinvented (directory-empty-illustration, no-icon/
  no-opps, empty-box, focus-empty, etc.). Markup:

    <div class="ibc-empty-state">
      <div class="ibc-empty-state__icon" aria-hidden="true">🔍</div>
      <h2 class="ibc-empty-state__title">No households found</h2>
      <p class="ibc-empty-state__body">Try a different search, or clear your filters.</p>
      <div class="ibc-empty-state__actions">
        <button type="button" class="btn btn-primary">Clear filters</button>
      </div>
    </div>

  Icon and actions are both optional -- omit either div when there's nothing
  to show there (e.g. no CTA makes sense) or use ibc-empty-state--compact for
  a single-line inline variant (a list with zero rows, a sidebar panel).
*/
.ibc-empty-state,
.ibc-loading-state {
  padding: var(--ibc-space-6) var(--ibc-space-5);
  border: 1px solid var(--ibc-color-border-soft);
  border-radius: var(--ibc-radius-lg);
  background: var(--ibc-color-surface-50);
  color: var(--ibc-color-text-muted);
  text-align: center;
}

.ibc-empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto var(--ibc-space-3);
  border-radius: var(--ibc-radius-md);
  background: linear-gradient(135deg, var(--ibc-color-accent-gold-soft), var(--ibc-color-surface-200));
  font-size: 1.3rem;
  line-height: 1;
}

.ibc-empty-state__title,
.ibc-loading-state__title {
  margin: 0 0 var(--ibc-space-1);
  color: var(--ibc-color-text-strong);
  font-size: var(--ibc-font-size-md);
  font-weight: var(--ibc-font-weight-bold);
}

.ibc-empty-state__body {
  margin: 0 auto;
  max-width: 440px;
  color: var(--ibc-color-text-muted);
  font-size: var(--ibc-font-size-sm);
  line-height: 1.5;
}

.ibc-empty-state__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ibc-space-2);
  margin-top: var(--ibc-space-4);
}

/* Single-line inline variant -- a zero-row list or a small sidebar panel,
   where a full icon+title+body card would be more chrome than content. */
.ibc-empty-state--compact {
  padding: var(--ibc-space-3) var(--ibc-space-4);
  text-align: left;
  font-size: var(--ibc-font-size-sm);
}
.ibc-empty-state--compact .ibc-empty-state__icon { display: none; }

.ibc-skeleton {
  display: block;
  min-height: 12px;
  border-radius: var(--ibc-radius-pill);
  background: linear-gradient(90deg, #eef1f5 25%, #f7f8fa 38%, #eef1f5 63%);
  background-size: 400% 100%;
  animation: ibc-skeleton-shimmer 1.35s ease infinite;
}

@keyframes ibc-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/*
  Forms
  Shared form controls for future profile, task, appointment, and circle edits.
*/
.ibc-field {
  display: flex;
  flex-direction: column;
  gap: var(--ibc-space-1);
}

.ibc-label {
  color: var(--ibc-color-ink-500);
  font-size: var(--ibc-font-size-xs);
  font-weight: var(--ibc-font-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ibc-input,
.ibc-select,
.ibc-textarea {
  width: 100%;
  border: 1px solid var(--ibc-color-border);
  border-radius: var(--ibc-radius-md);
  background: var(--ibc-color-surface-0);
  color: var(--ibc-color-ink-600);
  font: inherit;
  font-size: var(--ibc-font-size-sm);
  line-height: var(--ibc-line-height-base);
}

.ibc-input,
.ibc-select {
  min-height: var(--ibc-control-height);
  padding: 8px 10px;
}

.ibc-textarea {
  min-height: 96px;
  padding: 10px;
  resize: vertical;
}

.ibc-input:focus,
.ibc-select:focus,
.ibc-textarea:focus {
  outline: none;
  border-color: var(--ibc-color-link);
  box-shadow: 0 0 0 3px var(--ibc-color-focus);
}

/*
  Compact metadata rows
  Use for CRM records where advisors need quick facts without full metric cards.
*/
.ibc-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--ibc-space-3);
}

.ibc-meta-item {
  min-width: 0;
}

.ibc-meta-label {
  display: block;
  color: var(--ibc-color-ink-500);
  font-size: var(--ibc-font-size-xs);
  font-weight: var(--ibc-font-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ibc-meta-value {
  display: block;
  margin-top: 2px;
  color: var(--ibc-color-text-strong);
  font-size: var(--ibc-font-size-sm);
  font-weight: var(--ibc-font-weight-bold);
  overflow-wrap: anywhere;
}

/*
  Presentation-only simplification utilities
  Use these to reduce visual weight without changing rendering contracts.
*/
.ibc-meta-compact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ibc-space-1) var(--ibc-space-3);
  color: var(--ibc-color-text-muted);
  font-size: var(--ibc-font-size-xs);
  line-height: var(--ibc-line-height-base);
}

.ibc-badge--quiet {
  min-height: 20px;
  padding: 2px 7px;
  border-color: transparent;
  background: var(--ibc-color-surface-100);
  color: var(--ibc-color-text-muted);
  font-weight: var(--ibc-font-weight-semibold);
}

.ibc-empty-section[hidden],
.ibc-hide-when-empty:empty {
  display: none !important;
}

.ibc-disclosure > summary {
  color: var(--ibc-color-text-muted);
  font-size: var(--ibc-font-size-sm);
  font-weight: var(--ibc-font-weight-bold);
  cursor: pointer;
}

/*
  Legacy page compatibility polish
  These selectors normalize the static pages while they are progressively moved
  to explicit ibc-* component classes. They avoid changing behavior or markup.
*/
:where(.card, .state-card, .household-card, .directory-result-card, .summary-card, .strategy-summary-card, .metric-card, .overview-card, .item-card, .task-card, .appointment-card, .circle-card) {
  border-radius: var(--ibc-radius-md);
}

:where(.btn, .tab-button, .strategy-tab-button, .filter-select, .directory-search-input, input, select, textarea):focus-visible {
  outline: 3px solid var(--ibc-color-focus);
  outline-offset: 2px;
}

:where(.pipeline-badge, .status-badge, .chip, .tag, .task-badges span, .appointment-badges span) {
  border-radius: var(--ibc-radius-pill);
  letter-spacing: 0;
}

:where(.tab-button, .strategy-tab-button) {
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

:where(.compare-table, .year-table, .households-table) th {
  letter-spacing: .055em;
}

@media (max-width: 640px) {
  .ibc-page-container {
    width: min(100% - 32px, var(--ibc-container-max));
  }

  .ibc-card {
    padding: var(--ibc-space-4);
  }

  .ibc-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ibc-action-rail {
    position: static;
  }

  .ibc-tab-panel {
    padding: var(--ibc-space-3);
  }

  .ibc-progress {
    padding: var(--ibc-space-3);
  }

  .ibc-progress__header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--ibc-space-1);
  }

  .ibc-progress__current {
    text-align: left;
  }

  .ibc-progress--full .ibc-progress__track {
    display: flex;
    overflow-x: auto;
    padding-bottom: var(--ibc-space-2);
  }

  .ibc-progress--full .ibc-progress__step {
    flex: 0 0 104px;
  }
}