/* ==========================================================================
   App Premium – site-wide design system for the authenticated app
   Scoped to body.app-premium so marketing/auth pages are unaffected.
   ========================================================================== */

/* --- Design tokens --- */
body.app-premium {
  /* Surfaces */
  --surface-app: #eef1f7;
  --surface-canvas: #ffffff;
  --surface-card: #ffffff;
  --surface-sidebar: #213973;
  --surface-sidebar-dark: #0b1929;
  --surface-muted: #f4f6fb;
  --surface-hover: #e8f0fd;

  /* Text */
  --text-primary: #0f1c2e;
  --text-secondary: #4a5d74;
  --text-muted: #7288a2;
  --text-inverse: #ffffff;

  /* Borders */
  --border-subtle: #dde3ed;
  --border-strong: #bcc8db;
  --border-inverse: rgba(255, 255, 255, 0.1);

  /* Brand */
  --brand-500: #2563eb;
  --brand-600: #1d4ed8;
  --brand-700: #1a44c2;

  /* Status */
  --success-500: #16a34a;
  --warning-500: #d97706;
  --danger-500: #dc2626;
  --info-500: #0284c7;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(10, 20, 40, 0.07), 0 1px 8px rgba(10, 20, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 20, 40, 0.08), 0 16px 40px rgba(10, 20, 40, 0.1);
  --shadow-lg: 0 8px 24px rgba(10, 20, 40, 0.1), 0 32px 64px rgba(10, 20, 40, 0.12);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Backward-compatible aliases */
  --app-bg: var(--surface-app);
  --surface: var(--surface-card);
  --surface-tint: var(--surface-muted);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --border: var(--border-subtle);
  --border-light: #e8ecf3;
  --accent-blue: var(--brand-500);
  --accent-green: var(--success-500);
  --accent-slate: #64748b;
  --accent-amber: var(--warning-500);
  --accent-purple: #7c3aed;
  --accent-teal: #0d9488;
  --accent-red: var(--danger-500);
  --navy-dark: #0f1c2e;
  --navy-mid: #1e3a5f;
  --navy-light: #2d5490;
}

/* --- Global typography --- */
body.app-premium {
  font-size: 1rem;               /* 16px base */
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--surface-app);
  font-family: var(--font-sans);
}

body.app-premium h1,
body.app-premium h2,
body.app-premium h3,
body.app-premium h4,
body.app-premium h5,
body.app-premium h6 {
  color: var(--text-primary);
  line-height: 1.3;
}

/* Bootstrap .hN utility classes */
body.app-premium .h3 { font-size: 1.5rem; }
body.app-premium .h4 { font-size: 1.25rem; }
body.app-premium .h5 { font-size: 1.1rem; }

body.app-premium .text-secondary {
  color: var(--text-secondary) !important;
}
body.app-premium .text-muted {
  color: var(--muted) !important;
}

body.app-premium small,
body.app-premium .small {
  font-size: 0.875rem;
}

body.app-premium .small a i {
  font-size: .7rem;
  margin-left: .35rem;
  opacity: .6;
}

/* ===================================================================
   APP SHELL (GLOBAL SIDEBAR + CONTEXT SIDEBAR + MAIN PANEL)
   =================================================================== */
body.app-premium.app-shell-enabled {
  margin: 0;
}
body.app-premium.app-shell-enabled .app-shell-layout {
  display: grid;
  grid-template-columns: 60px 240px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--surface-app);
}

/* Legacy global icon-rail sidebar (older variant) — hidden. */
body.app-premium.app-shell-enabled .app-shell-global {
  display: none !important;
}

/* ===================================================================
   GLOBAL RAIL (far-left icon-only navigation)
   ===================================================================
   App-level destinations + account/logout. Icon-only with hover
   tooltips so the rail stays narrow and the inner corp sidebar gets
   the bulk of the chrome budget for the active corporation. */
body.app-premium.app-shell-enabled .app-shell-global-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) 0 var(--space-2);
  background: #08759e;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
body.app-premium.app-shell-enabled .app-shell-global-rail__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  text-decoration: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
}
body.app-premium.app-shell-enabled .app-shell-global-rail__brand-mark {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
body.app-premium.app-shell-enabled .app-shell-global-rail__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 auto;
  width: 100%;
}
body.app-premium.app-shell-enabled .app-shell-global-rail__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
}
body.app-premium.app-shell-enabled .app-shell-global-rail__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
body.app-premium.app-shell-enabled .app-shell-global-rail__link i {
  font-size: 1.05rem;
  line-height: 1;
}
body.app-premium.app-shell-enabled .app-shell-global-rail__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
body.app-premium.app-shell-enabled .app-shell-global-rail__link.is-active {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 3px 0 0 #60a5fa;
}
body.app-premium.app-shell-enabled .app-shell-global-rail__link--btn {
  background: transparent;
  cursor: pointer;
  padding: 0;
}
body.app-premium.app-shell-enabled .app-shell-global-rail__link--lang {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Account button can render either the user's profile photo or the
   bi-person-circle fallback. The photo variant shrinks the inner ring
   slightly and uses object-fit so non-square uploads still look right. */
body.app-premium.app-shell-enabled .app-shell-global-rail__link--avatar {
  padding: 2px;
}
body.app-premium.app-shell-enabled .app-shell-global-rail__avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

body.app-premium.app-shell-enabled .app-shell-corp-sidebar {
  width: 240px;
  border-right: 1px solid rgba(0, 0, 0, 0.18);
  /* Override Bootstrap offcanvas-lg's --bs-offcanvas-bg variable */
  --bs-offcanvas-bg: #033356;
  background: #033356 !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.12);
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar .offcanvas-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__inner {
  min-height: 0;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__header {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__header .small {
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: .06em;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__corp {
  font-size: 0.96rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: var(--space-1);
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__nav {
  padding: var(--space-3) var(--space-3) var(--space-4);
  overflow-y: auto;
  min-height: 0;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__group {
  display: grid;
  gap: .15rem;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__link.is-active {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  font-weight: 600;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 3px 0 0 #60a5fa;
}
/* Form-button variant of `__link` (used by the mobile global-bridge log
   out and language toggle, which need POST form submission). Strips
   native button chrome but leaves color + font-size to come from the
   sibling `.app-shell-corp-sidebar__link` rule — using `color: inherit`
   here makes the button inherit from <form> (no color set) instead of
   matching its neighbouring <a> links. */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__link--btn {
  width: 100%;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

/* Two-letter language code badge on the right side of the language
   toggle (e.g., "EN" / "FR"). Makes the language row instantly
   recognizable instead of blending in with the surrounding nav items. */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__lang-code {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-left: auto;
}

/* Mobile-only global bridge appended to the bottom of the drawer. Hidden
   on desktop because the far-left icon rail covers the same destinations
   there. Separator + extra top padding keeps it visually distinct from
   the corp-scoped sections above. */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__global-bridge {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
@media (min-width: 992px) {
  body.app-premium.app-shell-enabled .app-shell-corp-sidebar__global-bridge {
    display: none;
  }
}

/* Locked menu items: muted but still clickable. Click leads to the
   feature-teaser /upgrade page rather than the live route. */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__link--locked {
  opacity: 0.62;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__link--locked:hover {
  opacity: 0.95;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__link--locked .bi-lock-fill {
  font-size: 0.78rem;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__details {
  margin-top: var(--space-2);
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__details summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.35);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s ease;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__details summary:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__details summary::-webkit-details-marker {
  display: none;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__details summary::after {
  content: '\F282';
  font-family: 'bootstrap-icons';
  font-size: .65rem;
  transition: transform .15s ease;
  opacity: 0.5;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__details[open] summary::after {
  transform: rotate(180deg);
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__details .app-shell-corp-sidebar__link {
  margin-left: var(--space-2);
}

/* Icon elements inside corp sidebar links */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__link i {
  opacity: 0.8;
  font-size: 0.9rem;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__link.is-active i {
  opacity: 1;
}

/* Lock-icon spans for gated features */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar .text-secondary {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* "Archived" status badge in header */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__header .badge {
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Custom scrollbar for dark sidebar */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__nav::-webkit-scrollbar {
  width: 4px;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__nav::-webkit-scrollbar-track {
  background: transparent;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Mobile offcanvas header on dark sidebar. The header shows the active
   corporation name (set in app_shell.php) so the user keeps context when
   the drawer covers the rest of the page. */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar .offcanvas-header {
  background: #213973;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0.85rem 1rem;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__drawer-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 2.5rem);
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.7;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar .btn-close:hover {
  opacity: 1;
}

/* --- Brand area at top of sidebar --- */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  text-decoration: none;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__brand-logo {
  max-height: 26px;
  width: auto;
  flex-shrink: 0;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__brand-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

/* --- Corporation header with initials avatar --- */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__corp-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  text-transform: uppercase;
  overflow: hidden;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__corp-meta {
  min-width: 0;
  flex: 1 1 auto;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__corp-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__corp-status {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 1px;
}

/* --- Section labels (flat, non-collapsible) ---
   Generous top padding (var(--space-5)) creates whitespace between
   groups so the eye chunks the sidebar by section without needing
   per-section background fills. Slightly larger and higher-contrast
   than the prior values so the labels do real wayfinding work. */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__section-label {
  display: block;
  padding: var(--space-5) var(--space-3) var(--space-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Section icon tints ---
   Subtle hue per section (not background fill — see UX rationale in
   the partial). Tailwind 300-range hues, calibrated to read on the
   dark navy sidebar without competing with the active-state highlight
   or the lock-icon affordance. The link's parent group carries the
   `data-section` attribute. */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__group[data-section="governance"]  .app-shell-corp-sidebar__link i { color: #cbd5e1; }
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__group[data-section="records"]     .app-shell-corp-sidebar__link i { color: #a5b4fc; }
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__group[data-section="equity"]      .app-shell-corp-sidebar__link i { color: #86efac; }
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__group[data-section="financing"]   .app-shell-corp-sidebar__link i { color: #fcd34d; }
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__group[data-section="compliance"]  .app-shell-corp-sidebar__link i { color: #fda4af; }
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__group[data-section="operations"]  .app-shell-corp-sidebar__link i { color: #7dd3fc; }
/* Lock icons should stay neutral — they're an affordance, not a
   section signal — so override the colored-icon tint specifically
   for them. */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__group[data-section] .app-shell-corp-sidebar__link .bi-lock-fill {
  color: rgba(255, 255, 255, 0.3);
}

/* --- Sidebar divider --- */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: var(--space-2) var(--space-3);
}

/* --- Footer area (global nav items) --- */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__footer {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
  flex-shrink: 0;
}

/* Button-style link (Log Out) */
body.app-premium.app-shell-enabled .app-shell-corp-sidebar__link--btn {
  border: none;
  cursor: pointer;
  background: transparent;
}
body.app-premium.app-shell-enabled .app-shell-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-canvas);
}
body.app-premium.app-shell-enabled .app-shell-main .app-shell-content {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--surface-canvas);
}
body.app-premium.app-shell-enabled .app-shell-content-inner {
  --app-shell-content-block: clamp(var(--space-4), 1.7vw, var(--space-5));
  --app-shell-content-inline: clamp(var(--space-5), 2.2vw, var(--space-6));
  padding: var(--app-shell-content-block) var(--app-shell-content-inline) clamp(var(--space-6), 2.6vw, var(--space-7));
  background: var(--surface-canvas);
}
body.app-premium.app-shell-enabled .app-shell-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: 56px;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 0 rgba(10, 20, 40, 0.06);
  background: var(--surface-canvas);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}
body.app-premium.app-shell-enabled .app-shell-topbar__left,
body.app-premium.app-shell-enabled .app-shell-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
body.app-premium.app-shell-enabled .app-shell-topbar__corp-switcher {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}
body.app-premium.app-shell-enabled .app-shell-topbar__corp-switcher:hover,
body.app-premium.app-shell-enabled .app-shell-topbar__corp-switcher:focus {
  background: var(--surface-muted);
  border-color: var(--border-subtle);
}
body.app-premium.app-shell-enabled .app-shell-topbar__corp-switcher .badge {
  font-size: .72rem;
}
body.app-premium.app-shell-enabled .app-shell-topbar__corp-name {
  font-weight: 700;
  color: var(--text-primary);
}
body.app-premium.app-shell-enabled .app-shell-topbar__corp-menu {
  min-width: 300px;
  max-width: min(92vw, 380px);
}
body.app-premium.app-shell-enabled .app-shell-topbar__corp-form {
  margin: 0;
}
body.app-premium.app-shell-enabled .app-shell-topbar__menu-toggle {
  border-color: var(--border);
  color: var(--text-secondary);
  background: var(--surface-card);
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.app-premium.app-shell-enabled .app-shell-topbar__menu-toggle i {
  font-size: 1.15rem;
}

/* Global-context topbar: rendered on All Corporations / People Directory
   so mobile keeps a hamburger to open the nav drawer. On desktop the
   sidebar is permanent, so this bar collapses out of the layout. */
body.app-premium.app-shell-enabled .app-shell-topbar--global {
  min-height: 52px;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  background: var(--surface-canvas);
}
@media (min-width: 992px) {
  body.app-premium.app-shell-enabled .app-shell-topbar--global {
    display: none;
  }
}
body.app-premium.app-shell-enabled .app-shell-topbar__stub {
  border-color: var(--border);
  color: var(--text-secondary);
}
body.app-premium.app-shell-enabled .app-shell-topbar__stub:hover {
  background: var(--surface-muted);
  color: var(--text-primary);
}

/* --- Feature-level sidebars (Minute Book / My Profile) --- */
body.app-premium .feature-layout {
  display: grid;
  grid-template-columns: clamp(200px, 20vw, 240px) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
body.app-premium .feature-layout__sidebar {
  min-width: 0;
  padding-right: var(--space-5);
  border-right: 1px solid var(--border-subtle);
}
body.app-premium .feature-layout__content {
  min-width: 0;
  padding-left: var(--space-5);
}
body.app-premium .feature-sidebar {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  position: sticky;
  top: calc(56px + var(--space-4));
}
body.app-premium .feature-sidebar__title {
  margin: 0;
  padding: var(--space-2) var(--space-2) var(--space-1);
  font-size: .73rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
body.app-premium .feature-sidebar__nav {
  display: grid;
  gap: 2px;
}
body.app-premium .feature-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: .93rem;
  font-weight: 500;
  text-decoration: none;
}
body.app-premium .feature-sidebar__link i {
  font-size: .95rem;
  opacity: .86;
}
body.app-premium .feature-sidebar__link:hover,
body.app-premium .feature-sidebar__link:focus {
  background: var(--surface-hover);
  border-color: #bfdbfe;
  color: var(--text-primary);
}
body.app-premium .feature-sidebar__link.is-active {
  background: #dbeafe;
  border-color: #bfdbfe;
  color: #1d4ed8;
  font-weight: 600;
}
body.app-premium .feature-layout--minute-book .feature-layout__content .detail-section {
  margin-bottom: 0;
}

body.app-premium.app-shell-enabled .app-shell-content-inner .corp-hero--full-bleed,
body.app-premium.app-shell-enabled .app-shell-content-inner .corp-hero--compact,
body.app-premium.app-shell-enabled .app-shell-content-inner .pl-hero--full-bleed {
  margin-left: calc(var(--app-shell-content-inline) * -1);
  margin-right: calc(var(--app-shell-content-inline) * -1);
  margin-top: calc(var(--app-shell-content-block) * -1);
  border-radius: 0;
}
body.app-premium.app-shell-enabled .app-shell-content-inner .corp-hero--full-bleed .corp-hero__inner,
body.app-premium.app-shell-enabled .app-shell-content-inner .corp-hero--compact > * {
  max-width: none;
  padding-left: var(--app-shell-content-inline);
  padding-right: var(--app-shell-content-inline);
}
@media (max-width: 991.98px) {
  body.app-premium.app-shell-enabled .app-shell-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  body.app-premium.app-shell-enabled .app-shell-global-rail {
    display: none;
  }
  body.app-premium.app-shell-enabled .app-shell-corp-sidebar {
    display: none;
  }
  /* Was `display: block` — but that overrides Bootstrap's offcanvas-lg
     `display: flex` and collapses the height chain, so the inner nav
     can't scroll. Keep flex column so the body can flex-grow into the
     remaining vertical space and the nav inherits a bounded height. */
  body.app-premium.app-shell-enabled .app-shell-corp-sidebar.show,
  body.app-premium.app-shell-enabled .app-shell-corp-sidebar.showing,
  body.app-premium.app-shell-enabled .app-shell-corp-sidebar.hiding {
    display: flex;
    flex-direction: column;
  }
  body.app-premium.app-shell-enabled .app-shell-corp-sidebar {
    height: 100dvh;
    max-height: 100dvh;
  }
  body.app-premium.app-shell-enabled .app-shell-corp-sidebar .offcanvas-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.app-premium.app-shell-enabled .app-shell-corp-sidebar__inner {
    flex: 1 1 auto;
    min-height: 0;
  }
  body.app-premium.app-shell-enabled .app-shell-corp-sidebar__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.app-premium.app-shell-enabled .app-shell-content-inner {
    --app-shell-content-block: 1rem;
    --app-shell-content-inline: var(--space-4);
  }
  body.app-premium .feature-layout {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  body.app-premium .feature-layout__sidebar {
    border-right: 0;
    padding-right: 0;
  }
  body.app-premium .feature-layout__content {
    padding-left: 0;
  }
  body.app-premium .feature-sidebar {
    position: static;
    top: auto;
  }
  body.app-premium .feature-sidebar__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  body.app-premium .feature-layout--minute-book .feature-sidebar__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  body.app-premium .feature-sidebar__nav,
  body.app-premium .feature-layout--minute-book .feature-sidebar__nav {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 992px) {
  body.app-premium.app-shell-enabled .app-shell-corp-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    transform: none !important;
    visibility: visible !important;
  }
}

/* --- Page header pattern --- */
.ui-pagehead {
  margin-bottom: var(--space-5);
}
.ui-pagehead-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.15rem;
  line-height: 1.3;
}
.ui-pagehead-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 0;
}

/* --- Cards (enhance existing Bootstrap .card) --- */
body.app-premium .card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
body.app-premium .card > .card-header:first-child {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
body.app-premium .card-header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-3) var(--space-5);
  font-weight: 500;
  color: var(--text-primary);
}
body.app-premium .card-body {
  padding: var(--space-5);
}

/* Remove extra shadow-sm from cards (our base card already has shadow) */
body.app-premium .card.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

/* Accent-top cards */
body.app-premium .ui-card-accent-blue  { border-top: 3px solid var(--accent-blue); }
body.app-premium .ui-card-accent-green { border-top: 3px solid var(--accent-green); }
body.app-premium .ui-card-accent-slate { border-top: 3px solid var(--accent-slate); }

/* --- Stat cards --- */
body.app-premium .stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
body.app-premium .stat-card--green { border-top-color: var(--accent-green); }
body.app-premium .stat-card--slate { border-top-color: var(--accent-slate); }
body.app-premium .stat-card .h4 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
}

/* --- Tables (enhance existing Bootstrap .table) --- */
body.app-premium .table {
  font-size: 1rem;
  color: var(--text-primary);
  --bs-table-color: var(--text-primary);
  --bs-table-bg: var(--surface-card);
}
body.app-premium .table > thead > tr > th {
  font-size: 0.785rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0.75rem;
  background: transparent;
}
body.app-premium .table > thead.table-light > tr > th {
  background: var(--surface-muted);
}
body.app-premium .table > tbody > tr > td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
body.app-premium .table > tbody > tr:last-child > td {
  border-bottom: 0;
}

/* Hover state for table-hover */
body.app-premium .table-hover > tbody > tr:hover > td {
  background-color: rgba(37, 99, 235, 0.04);
}

/* Table inside card: flush edges */
body.app-premium .card > .table-responsive:first-child .table,
body.app-premium .card > .table-responsive:first-child,
body.app-premium .card-body > .table-responsive .table {
  margin-bottom: 0;
}
body.app-premium .table-responsive {
  background: var(--surface-card);
}

/* --- Forms (enhance existing Bootstrap form controls) --- */
body.app-premium .form-control,
body.app-premium .form-select,
body.app-premium textarea.form-control {
  background: var(--surface-canvas);
  border-color: var(--border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  min-height: 42px;
}
body.app-premium .form-control:focus,
body.app-premium .form-select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
body.app-premium .form-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}
body.app-premium .form-label.fw-semibold {
  color: var(--text-primary);
  font-weight: 500 !important;
}
body.app-premium .form-text,
body.app-premium .form-control::placeholder {
  color: var(--muted);
}

/* --- Buttons (subtle polish) --- */
body.app-premium .btn {
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  transition: all .15s ease-in-out;
}
body.app-premium .btn-sm {
  font-size: 0.875rem;
  padding: var(--space-1) var(--space-3);
}
body.app-premium .btn-lg {
  font-size: 1.1rem;
  padding: var(--space-3) var(--space-5);
}
body.app-premium .btn-primary {
  background-color: var(--brand-500);
  border-color: var(--brand-500);
  color: var(--text-inverse);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3), 0 1px 2px rgba(37, 99, 235, 0.15);
}
body.app-premium .btn-primary:hover {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  color: var(--text-inverse);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}
body.app-premium .btn-primary:active,
body.app-premium .btn-primary:focus {
  background-color: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--text-inverse);
}
body.app-premium .btn-outline-secondary {
  border-color: var(--border);
  color: var(--text-secondary);
  background-color: var(--surface-card);
}
body.app-premium .btn-outline-secondary:hover {
  background-color: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-primary);
}
body.app-premium .btn-outline-success,
body.app-premium a.btn-outline-success {
  color: var(--success-500);
  border-color: var(--success-500);
}
body.app-premium .btn-outline-success:hover,
body.app-premium .btn-outline-success:focus,
body.app-premium .btn-outline-success:active,
body.app-premium a.btn-outline-success:hover,
body.app-premium a.btn-outline-success:focus,
body.app-premium a.btn-outline-success:active {
  background-color: var(--success-500);
  border-color: var(--success-500);
  color: #fff !important;
}
body.app-premium .btn-secondary {
  background: var(--surface-muted);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}
body.app-premium .btn-secondary:hover {
  background: #e9edf5;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
body.app-premium .btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
body.app-premium .btn-ghost:hover {
  background: var(--surface-muted);
  color: var(--text-primary);
}

/* Soft button variant */
body.app-premium .btn-soft {
  background-color: rgba(37, 99, 235, 0.08);
  color: var(--brand-500);
  border: none;
}
body.app-premium .btn-soft:hover {
  background-color: rgba(37, 99, 235, 0.14);
  color: var(--brand-600);
}

/* --- Alerts (lighter, softer) --- */
body.app-premium .alert {
  border-radius: var(--radius-md);
  font-size: 1rem;
}

/* --- Badges --- */
body.app-premium .badge {
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  border-radius: 999px;
}
body.app-premium .badge.text-bg-success,
body.app-premium .badge.bg-success {
  background-color: var(--success-500) !important;
}
body.app-premium .badge.text-bg-warning,
body.app-premium .badge.bg-warning {
  background-color: var(--warning-500) !important;
}
body.app-premium .badge.text-bg-danger,
body.app-premium .badge.bg-danger {
  background-color: var(--danger-500) !important;
}
body.app-premium .badge.text-bg-info,
body.app-premium .badge.bg-info {
  background-color: var(--info-500) !important;
  color: #fff !important;
}
body.app-premium .badge.badge-managed-corp {
  background-color: var(--info-500) !important;
  color: #fff !important;
}
body.app-premium .badge.text-bg-primary,
body.app-premium .badge.bg-primary {
  background-color: var(--brand-500) !important;
}

/* --- List groups --- */
body.app-premium .list-group-item {
  border-color: var(--border-light);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-4);
  font-size: 1rem;
  background: var(--surface-card);
}
body.app-premium .list-group-item.active {
  background-color: var(--brand-500);
  border-color: var(--brand-500);
}
body.app-premium .list-group-item a {
  color: var(--brand-600);
}

/* --- Dropdown menus --- */
body.app-premium .dropdown-menu {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
}
body.app-premium .dropdown-header {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
body.app-premium .dropdown-item {
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
body.app-premium .dropdown-item:hover,
body.app-premium .dropdown-item:focus,
body.app-premium .dropdown-item.active {
  background: var(--surface-hover);
  color: #1f4f88;
}
body.app-premium .dropdown-divider {
  border-top-color: var(--border-subtle);
}

/* --- Links --- */
body.app-premium a {
  color: var(--brand-600);
}
body.app-premium a:hover {
  color: var(--brand-700);
}
body.app-premium td a {
  color: var(--brand-600);
}

/* --- Dark top navbar --- */
body.app-premium .app-topbar {
  background: var(--surface-sidebar-dark);
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
body.app-premium .app-topbar .nav-link {
  color: rgba(255,255,255,.7);
  font-weight: 500;
}
body.app-premium .app-topbar .nav-link:hover,
body.app-premium .app-topbar .nav-link:focus {
  color: #fff;
}
body.app-premium .app-topbar .nav-item form {
  display: flex;
  align-items: center;
  margin: 0;
}
body.app-premium .app-topbar .app-topbar-logout {
  background: none;
  border: none;
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  font-size: inherit;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  line-height: 1.5;
  box-shadow: none;
  border-radius: 0;
  text-decoration: none;
}
body.app-premium .app-topbar .app-topbar-logout:hover,
body.app-premium .app-topbar .app-topbar-logout:focus {
  color: #fff;
  background: none;
  box-shadow: none;
}

/* --- Light subnav (context bar) --- */
body.app-premium .app-subnav {
  background: var(--surface-sidebar);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-5);
}
body.app-premium .app-subnav .context-link {
  color: var(--navy-dark);
  font-weight: 600;
}
body.app-premium .app-subnav .context-link:hover {
  color: var(--text-primary);
}
/* Corp nav links inside subnav */
body.app-premium .app-subnav .corp-nav .nav-link {
  color: var(--text-secondary);
}
body.app-premium .app-subnav .corp-nav .nav-link:hover {
  color: var(--text);
}
body.app-premium .app-subnav .corp-nav .nav-link.active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent-blue);
}
/* Dropdown menus in subnav */
body.app-premium .app-subnav .corp-nav .dropdown-menu {
  background: var(--surface);
  border-color: var(--border);
}
body.app-premium .app-subnav .corp-nav .dropdown-item {
  color: var(--text);
}
body.app-premium .app-subnav .corp-nav .dropdown-item:hover,
body.app-premium .app-subnav .corp-nav .dropdown-item.active {
  background: rgba(99,163,254,.08);
  color: var(--brand-600);
}

/* --- Corp nav base styles --- */
body.app-premium .corp-nav {
  align-items: center;
  gap: 0.9rem;
}
body.app-premium .corp-nav .nav-link {
  padding: 0.15rem 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
}
body.app-premium .corp-nav .dropdown-toggle::after {
  margin-left: 0.35rem;
}
body.app-premium .corp-nav .dropdown-menu {
  margin-top: 0.5rem;
}
body.app-premium .ms-6 {
  margin-left: 2rem !important;
}
/* --- Main container --- */
body.app-premium main.container {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

/* --- Folder cards (existing component) --- */
body.app-premium .folder-card {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
body.app-premium .folder-card--nested {
  border-left: 3px solid var(--border);
  box-shadow: none;
}

/* --- Template cards --- */
body.app-premium .template-card {
  transition: box-shadow .2s, transform .2s;
}
body.app-premium .template-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* --- Modals --- */
body.app-premium .modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
}

/* --- Description lists (corporation overview) --- */
body.app-premium dl.row dt {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}
body.app-premium dl.row dd {
  font-size: 1rem;
  color: var(--text);
}

/* --- Dividers and horizontal rules --- */
body.app-premium hr {
  border-color: var(--border-light);
  opacity: 1;
}

/* --- White-text overrides for dark-background sections (specificity fix) --- */
body.app-premium .pl-hero h1,
body.app-premium .pl-hero h2,
body.app-premium .pl-hero .pl-subhead {
  color: #fff;
}
body.app-premium .pl-bottom-cta h2 {
  color: #fff;
}
body.app-premium .corp-hero h1,
body.app-premium .corp-hero h3 {
  color: #fff;
}

/* ===================================================================
   CORPORATION HERO BANNER
   =================================================================== */
body.app-premium .corp-hero {
  background: linear-gradient(135deg, #1d5175 0%, #2159a2 55%, #0f7d8f 100%);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem 1.75rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(9, 22, 40, .4), 0 1px 4px rgba(9, 22, 40, .2);
}
/* Subtle radial glow for depth */
body.app-premium .corp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 80% -10%, rgba(59, 130, 246, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at -5% 100%, rgba(37, 99, 235, 0.15) 0%, transparent 55%);
  pointer-events: none;
}
body.app-premium .corp-hero::after {
  content: none;
  display: none;
}
/* No longer strip background-image — gradients are intentional */
body.app-premium .corp-hero--full-bleed {
  margin-left: calc((100vw - 100%) / -2);
  margin-right: calc((100vw - 100%) / -2);
  margin-top: -1.5rem;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
body.app-premium .corp-hero--full-bleed .corp-hero__inner {
  width: 100%;
  max-width: 100%;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}
/* ::before and ::after are used for the hero gradient glow — no suppression */
body.app-premium .corp-hero__name {
  font-size: 1.85rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.35rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
body.app-premium .corp-hero__subtitle {
  color: rgba(255,255,255,.55);
  font-size: 0.95rem;
  margin-bottom: 0;
}
body.app-premium .corp-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
body.app-premium .corp-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.88);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
}
body.app-premium .corp-hero__pill i {
  font-size: 0.85rem;
  opacity: 0.7;
}
body.app-premium .corp-hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}
body.app-premium .corp-hero__status--active {
  background: rgba(34, 197, 94, .18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, .25);
}
body.app-premium .corp-hero__status--archived {
  background: rgba(251, 191, 36, .18);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, .25);
}
body.app-premium .corp-hero__actions {
  display: flex;
  gap: 0.5rem;
}
body.app-premium .corp-hero__actions .btn {
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
  font-size: 0.8rem;
}
body.app-premium .corp-hero__actions .btn:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
/* Compact hero for inner pages */
body.app-premium .corp-hero--compact {
  margin-left: calc((100vw - 100%) / -2);
  margin-right: calc((100vw - 100%) / -2);
  margin-top: -1.5rem;
  border-radius: 0;
  padding: 1.5rem 1.75rem 1.25rem;
  padding-left: 0;
  padding-right: 0;
}
body.app-premium .corp-hero--compact > * {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}
@media (min-width: 576px) {
  body.app-premium .corp-hero--full-bleed .corp-hero__inner,
  body.app-premium .corp-hero--compact > * {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  body.app-premium .corp-hero--full-bleed .corp-hero__inner,
  body.app-premium .corp-hero--compact > * {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  body.app-premium .corp-hero--full-bleed .corp-hero__inner,
  body.app-premium .corp-hero--compact > * {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  body.app-premium .corp-hero--full-bleed .corp-hero__inner,
  body.app-premium .corp-hero--compact > * {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  body.app-premium .corp-hero--full-bleed .corp-hero__inner,
  body.app-premium .corp-hero--compact > * {
    max-width: 1320px;
  }
}
body.app-premium .corp-hero--compact .corp-hero__name {
  font-size: 1.4rem;
}
/* ===================================================================
   RICH STAT CARDS
   =================================================================== */
body.app-premium .stat-rich {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  border-left-width: 3px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
body.app-premium .stat-rich > div:last-child {
  min-width: 0;
  flex: 1 1 auto;
}
body.app-premium .stat-rich--auto {
  display: inline-flex;
  flex: 0 0 auto;
  padding-right: 1.75rem;
}
body.app-premium .stat-rich--auto > div:last-child {
  flex: 0 0 auto;
}
body.app-premium .stat-rich--class-kpi {
  border-left-width: 1px;
  border-left-color: var(--border-subtle);
}
body.app-premium .stat-rich--class-kpi > div:last-child {
  min-width: 7rem;
  max-width: 11rem;
}
body.app-premium .stat-rich__label--truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.app-premium .stat-rich:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
body.app-premium .stat-rich__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
body.app-premium .stat-rich__label {
  font-size: 0.775rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.app-premium .stat-rich__value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Color variants */
body.app-premium .stat-rich--blue {
  background: var(--surface-card);
  border-left-color: #2563eb;
}
body.app-premium .stat-rich--blue .stat-rich__icon {
  background: #eff6ff;
  color: #2563eb;
}
body.app-premium .stat-rich--green {
  background: var(--surface-card);
  border-left-color: #16a34a;
}
body.app-premium .stat-rich--green .stat-rich__icon {
  background: #f0fdf4;
  color: #16a34a;
}
body.app-premium .stat-rich--amber {
  background: var(--surface-card);
  border-left-color: #d97706;
}
body.app-premium .stat-rich--amber .stat-rich__icon {
  background: #fffbeb;
  color: #d97706;
}
body.app-premium .stat-rich--purple {
  background: var(--surface-card);
  border-left-color: #7c3aed;
}
body.app-premium .stat-rich--purple .stat-rich__icon {
  background: #f5f3ff;
  color: #7c3aed;
}
body.app-premium .stat-rich--teal {
  background: var(--surface-card);
  border-left-color: #0d9488;
}
body.app-premium .stat-rich--teal .stat-rich__icon {
  background: #f0fdfa;
  color: #0d9488;
}
body.app-premium .stat-rich--slate {
  background: var(--surface-card);
  border-left-color: #475569;
}
body.app-premium .stat-rich--slate .stat-rich__icon {
  background: #f1f5f9;
  color: #475569;
}

/* Keep neutral surfaces for utility backgrounds in authenticated pages */
body.app-premium .bg-light {
  background-color: var(--surface-card) !important;
}
body.app-premium .table td.bg-light,
body.app-premium .table th.bg-light {
  background-color: var(--surface-muted) !important;
}

/* ===================================================================
   DETAIL SECTION CARDS
   =================================================================== */
body.app-premium .detail-section {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
body.app-premium .detail-section__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-muted);
}
body.app-premium .detail-section__header i {
  font-size: 1.05rem;
  color: var(--brand-500);
}
body.app-premium .detail-section__header h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
body.app-premium .detail-section__body {
  padding: 1.25rem;
}
/* Viewer mode rows */
body.app-premium .detail-row {
  display: flex;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-light);
}
body.app-premium .detail-row:last-child {
  border-bottom: 0;
}
body.app-premium .detail-row__label {
  width: 40%;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  flex-shrink: 0;
}
body.app-premium .detail-row__value {
  font-size: 0.95rem;
  color: var(--text);
}

/* ===================================================================
   DANGER ZONE
   =================================================================== */
body.app-premium .danger-zone {
  background: var(--surface);
  border: 1px solid rgba(232, 84, 84, .25);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
body.app-premium .danger-zone__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(232, 84, 84, .15);
  background: rgba(232, 84, 84, .03);
}
body.app-premium .danger-zone__header i {
  color: var(--accent-red);
}
body.app-premium .danger-zone__header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-red);
  margin: 0;
}
body.app-premium .danger-zone__body {
  padding: 1.25rem;
}
body.app-premium .danger-zone__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-light);
  gap: 1rem;
}
body.app-premium .danger-zone__action:last-child {
  border-bottom: 0;
}
body.app-premium .danger-zone__action-info p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
body.app-premium .danger-zone__action-info strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 0.15rem;
}

/* --- Responsive adjustments --- */
@media (max-width: 991.98px) {
  body.app-premium {
    font-size: 0.95rem;
  }
  body.app-premium .h3 {
    font-size: 1.35rem;
  }
  body.app-premium .card-body {
    padding: 1rem;
  }
}
@media (max-width: 767.98px) {
  body.app-premium .corp-hero {
    padding: 1.5rem 1.25rem 1.25rem;
  }
  body.app-premium .corp-hero--compact {
    margin-top: -1rem;
  }
  body.app-premium .corp-hero--full-bleed {
    margin-top: -1rem;
  }
  body.app-premium .corp-hero__name {
    font-size: 1.35rem;
  }
  body.app-premium .stat-rich {
    padding: 0.85rem 1rem;
  }
  body.app-premium .stat-rich__icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  body.app-premium .danger-zone__action {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===================================================================
   PAGINATION
   =================================================================== */
body.app-premium .pagination {
  gap: 0.3rem;
}
body.app-premium .pagination .page-link {
  border-radius: var(--radius-md);
  border-color: var(--border);
  color: var(--text-secondary);
  font-size: 0.875rem;
  padding: 0.4rem 0.75rem;
  min-width: 2.2rem;
  text-align: center;
}
body.app-premium .pagination .page-item.active .page-link {
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
  box-shadow: 0 1px 3px rgba(99, 163, 254, .25);
}
body.app-premium .pagination .page-link:hover {
  background-color: var(--surface-tint);
  border-color: var(--border);
  color: var(--text);
}
body.app-premium .pagination .page-item.disabled .page-link {
  color: var(--muted);
  background: transparent;
}

/* ===================================================================
   GOVERNANCE / REGISTER PAGES – COMPREHENSIVE REDESIGN
   =================================================================== */

/* ------------------------------------------------------------------
   1. FORM-CONTAINING DETAIL SECTIONS
      Targets any .detail-section that holds a <form> — add-director,
      add-officer, add-share-class, etc.
   ------------------------------------------------------------------ */
body.app-premium .detail-section:has(form) {
  border-left: 3px solid var(--brand-500);
  background: #fcfeff;
}
body.app-premium .detail-section:has(form) .detail-section__header {
  background: linear-gradient(90deg, rgba(37,99,235,0.06) 0%, var(--surface-muted) 100%);
  border-bottom-color: rgba(37,99,235,0.1);
}
body.app-premium .detail-section:has(form) .detail-section__header i {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37,99,235,0.1);
  color: var(--brand-500);
  border-radius: 7px;
  flex-shrink: 0;
}
body.app-premium .detail-section:has(form) .detail-section__header h3 {
  color: var(--brand-600);
}

/* Secondary fields row (cert prefix/suffix/numbering in share classes) */
body.app-premium .detail-section:has(form) .detail-section__body .row + .row {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-subtle);
}

/* People directory autocomplete — primary search input */
body.app-premium .people-autocomplete {
  background: #fff;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  padding: 0.6rem 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.app-premium .people-autocomplete:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  outline: none;
}
body.app-premium .people-autocomplete-results.list-group {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 1050;
}

/* "Or leave blank..." hint beneath autocomplete */
body.app-premium .people-autocomplete-wrap + small.text-muted {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding-left: 0.1rem;
}

/* Visual divider between search field and manual entry fields */
body.app-premium .detail-section:has(form) .col-12:has(.people-autocomplete-wrap) {
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--border-subtle);
  margin-bottom: 0.25rem;
}

/* ------------------------------------------------------------------
   2. REGISTER TABLE SECTIONS
      The .detail-section that wraps the table (no <form> inside).
   ------------------------------------------------------------------ */
body.app-premium .detail-section:not(:has(form)) .detail-section__header {
  background: var(--surface-muted);
}
body.app-premium .detail-section:not(:has(form)) .detail-section__header i {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37,99,235,0.08);
  color: var(--brand-500);
  border-radius: 7px;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------
   3. TABLE HEADERS — tighter, uppercase micro-labels
   ------------------------------------------------------------------ */
body.app-premium .detail-section .table > thead > tr > th {
  background: #f4f7fb;
  font-size: 0.685rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-top: none;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   4. TABLE ROWS — hover with blue left-bar indicator
   ------------------------------------------------------------------ */
body.app-premium .detail-section .table > tbody > tr > td {
  border-bottom: 1px solid #f0f3f8;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
  transition: background-color 0.1s ease;
}
body.app-premium .detail-section .table > tbody > tr:last-child > td {
  border-bottom: none;
}
body.app-premium .detail-section .table-hover > tbody > tr:hover > td {
  background-color: #f0f6ff !important;
  --bs-table-bg: #f0f6ff;
}
body.app-premium .detail-section .table-hover > tbody > tr:hover > td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-500);
}

/* ------------------------------------------------------------------
   5. TABLE CELL TYPOGRAPHY
   ------------------------------------------------------------------ */
/* First column / explicitly semibold names */
body.app-premium .detail-section .table tbody td.fw-semibold,
body.app-premium .detail-section .table tbody td:first-child:not(.text-center):not(.text-muted) {
  font-weight: 600;
  color: var(--text-primary);
}
/* Muted secondary info in cells */
body.app-premium .detail-section .table tbody td .text-muted,
body.app-premium .detail-section .table tbody td small {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------
   6. ACTION BUTTONS — ghost until hover
   ------------------------------------------------------------------ */
body.app-premium .detail-section .table tbody tr .btn-outline-secondary.btn-sm,
body.app-premium .detail-section .table tbody tr .btn-outline-danger.btn-sm {
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
  padding: 0.22rem 0.55rem;
  font-size: 0.78rem;
  border-radius: var(--radius-sm);
}
body.app-premium .detail-section .table tbody tr:hover .btn-outline-secondary.btn-sm,
body.app-premium .detail-section .table tbody tr:hover .btn-outline-danger.btn-sm {
  opacity: 1;
  transform: translateX(0);
}
/* Empty state — always show disabled buttons */
body.app-premium .detail-section .table tbody tr .btn[disabled] {
  opacity: 0.35;
  transform: none;
}
/* Corporate Records doc table: action buttons always visible (not ghost-until-hover) */
body.app-premium .detail-section .table.mb-doc-table tbody tr .btn-outline-secondary.btn-sm,
body.app-premium .detail-section .table.mb-doc-table tbody tr .btn-outline-danger.btn-sm,
body.app-premium .detail-section .table.mb-doc-table tbody tr .btn-outline-primary.btn-sm {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------
   7. STATUS BADGES — light pill style (scoped to tables)
   ------------------------------------------------------------------ */
body.app-premium .detail-section .table .badge.text-bg-success {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
}
body.app-premium .detail-section .table .badge.text-bg-danger {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
}
body.app-premium .detail-section .table .badge.text-bg-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
}

/* Position/role tags (Officers table) */
body.app-premium .detail-section .table .badge.text-bg-light {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.3rem 0.6rem;
}

/* ------------------------------------------------------------------
   8. CERT FORMAT — monospace code badge (Share Classes)
   ------------------------------------------------------------------ */
body.app-premium .detail-section .table td a {
  font-family: ui-monospace, 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.78rem;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 0.18rem 0.45rem;
  border-radius: 5px;
  text-decoration: none;
  border: 1px solid #bfdbfe;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
body.app-premium .detail-section .table td a:hover {
  background: #dbeafe;
  color: #1a44c2;
  border-color: #93c5fd;
}

/* ------------------------------------------------------------------
   9. PROGRESS BARS (Share Classes — Used column)
   ------------------------------------------------------------------ */
body.app-premium .detail-section .progress {
  height: 5px;
  border-radius: 999px;
  background: #e2e8f0;
  min-width: 60px;
}
body.app-premium .detail-section .progress .progress-bar {
  border-radius: 999px;
}

/* ------------------------------------------------------------------
   10. INLINE EDIT / DESCRIPTION EXPAND ROWS (Share Classes)
   ------------------------------------------------------------------ */
body.app-premium .detail-section .table tr.collapse.show > td,
body.app-premium .detail-section .table tr.collapsing > td {
  background: #f7f9ff !important;
  border-bottom: 2px solid var(--border-subtle);
  padding: 1.1rem 1.25rem;
}
body.app-premium .detail-section .table tr.collapse.show .form-control-sm,
body.app-premium .detail-section .table tr.collapse.show .form-select-sm {
  background: #fff;
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
}
body.app-premium .detail-section .table tr.collapse.show .form-control-sm:focus,
body.app-premium .detail-section .table tr.collapse.show .form-select-sm:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* ------------------------------------------------------------------
   11. EMPTY STATE ROWS
   ------------------------------------------------------------------ */
body.app-premium .detail-section .table tbody td.text-center.py-4 {
  color: var(--text-muted);
  background: var(--surface-muted);
  font-size: 0.9rem;
  padding: 2.5rem 1rem !important;
}
body.app-premium .detail-section .table tbody td.text-center.py-4 i {
  font-size: 1.75rem;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.3;
}

/* ------------------------------------------------------------------
   12. HERO COMPACT — tighten for inner pages
   ------------------------------------------------------------------ */
body.app-premium .corp-hero--compact .corp-hero__name {
  font-size: 1.55rem;
  letter-spacing: -0.025em;
}
body.app-premium .corp-hero--compact .corp-hero__subtitle {
  font-size: 0.875rem;
}
body.app-premium .corp-hero--compact .corp-hero__pill {
  font-size: 0.76rem;
  padding: 0.25rem 0.65rem;
}

/* ------------------------------------------------------------------
   13. STAT CARDS ON INNER PAGES — slightly more compact
   ------------------------------------------------------------------ */
body.app-premium .stat-rich + .stat-rich {
  /* sibling spacing handled by row gap */
}
/* When only 2-3 cards show (inner pages), cap the value font size */
body.app-premium .col-sm-6.col-lg-4 .stat-rich__value,
body.app-premium .col-sm-6.col-lg-3 .stat-rich__value {
  font-size: 1.5rem;
}

/* ------------------------------------------------------------------
   14. PAGE SECTION SPACING
   ------------------------------------------------------------------ */
/* Visual divider between stats and content below */
body.app-premium .app-shell-content-inner > .row.g-3:first-of-type {
  padding-top: 0.25rem;
}

/* ===================================================================
   SHARE CLASSES PAGE — SPLIT LAYOUT
   =================================================================== */

/* Left panel: sticky so form stays in view while scrolling register */
body.app-premium .classes-form-panel {
  position: sticky;
  top: calc(56px + 1.25rem);
}

/* Count badge in register header */
body.app-premium .classes-count-badge {
  background: var(--surface-app);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}

/* Certificate numbering — collapsible <details> */
body.app-premium .classes-cert-details {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  overflow: hidden;
}
body.app-premium .classes-cert-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
body.app-premium .classes-cert-summary::-webkit-details-marker { display: none; }
body.app-premium .classes-cert-summary:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
body.app-premium .classes-cert-summary i:first-child {
  font-size: 0.85rem;
  opacity: 0.7;
}
body.app-premium .classes-cert-summary__caret {
  margin-left: auto;
  font-size: 0.68rem;
  opacity: 0.5;
  transition: transform 0.18s ease;
}
body.app-premium .classes-cert-details[open] .classes-cert-summary__caret {
  transform: rotate(180deg);
}
body.app-premium .classes-cert-body {
  padding: 0.75rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-canvas);
}

/* On small screens, un-stick the form and go full-width */
@media (max-width: 991.98px) {
  body.app-premium .classes-form-panel {
    position: static;
    top: auto;
  }
}

/* ===================================================================
   SHARE CLASSES — DISTRIBUTION CHART
   =================================================================== */
body.app-premium .classes-chart-layout {
  display: flex;
  align-items: center;
  gap: 2rem;
}
body.app-premium .classes-chart-layout--stacked {
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
body.app-premium .classes-chart-canvas-wrap {
  flex-shrink: 0;
}
body.app-premium .classes-chart-canvas-wrap canvas {
  display: block;
}
body.app-premium .classes-chart-legend {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
body.app-premium .classes-chart-legend__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
body.app-premium .classes-chart-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 3px currentColor;
}
body.app-premium .classes-chart-legend__info {
  min-width: 0;
}
body.app-premium .classes-chart-legend__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.app-premium .classes-chart-legend__meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.05rem;
}

@media (max-width: 575.98px) {
  body.app-premium .classes-chart-layout {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

/* ===================================================================
   DIRECTOR / BOARD MEMBER CARDS
   =================================================================== */
body.app-premium .director-form-panel {
  position: sticky;
  top: calc(56px + 1.25rem);
}
@media (max-width: 991.98px) {
  body.app-premium .director-form-panel { position: static; }
}

/* Card shell */
body.app-premium .director-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.15rem 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: box-shadow 0.18s ease, transform 0.15s ease;
}
body.app-premium .director-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
body.app-premium .director-card--ended {
  opacity: 0.72;
}

/* Header row: status badge + 3-dot menu */
body.app-premium .director-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.app-premium .director-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}
body.app-premium .director-card__status i { font-size: 0.45rem; }
body.app-premium .director-card__status--active {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
body.app-premium .director-card__status--ended {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
body.app-premium .director-card__status--gold {
  background: #fef3c7;
  color: #a16207;
  border: 1px solid #fde68a;
}
body.app-premium .director-card__status--placeholder {
  visibility: hidden;
  border: 1px solid transparent;
  padding: 0.22rem 0.6rem;
  font-size: 0.67rem;
  line-height: 1;
}
body.app-premium .director-card__status--placeholder::before { content: "\00a0"; }

/* 3-dot menu — floats in top-right corner, out of flex flow */
body.app-premium .director-card__menu {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  z-index: 10;
}

/* 3-dot menu button */
body.app-premium .director-card__menu-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  font-size: 0.95rem;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
body.app-premium .director-card__menu-btn:hover,
body.app-premium .director-card__menu-btn:focus,
body.app-premium .director-card__menu-btn[aria-expanded="true"] {
  background: var(--surface-muted);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

/* Avatar + name */
body.app-premium .director-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 0.25rem 0;
}
body.app-premium .director-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
body.app-premium .director-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

/* Date footer */
body.app-premium .director-card__footer {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-light);
}
body.app-premium .director-card__date {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
body.app-premium .director-card__date i {
  font-size: 0.8rem;
  opacity: 0.65;
}
body.app-premium .director-card__date--ended { color: var(--text-muted); }

/* Empty state */
body.app-premium .director-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
  text-align: center;
  background: var(--surface-muted);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
}
body.app-premium .director-empty-state i {
  font-size: 2.5rem;
  opacity: 0.3;
  margin-bottom: 0.75rem;
}
body.app-premium .director-empty-state p { margin: 0; font-size: 0.9rem; }

/* =========================================================
   PEOPLE DIRECTORY — PHOTO UPLOAD WIDGET
   ========================================================= */

/* Circular preview thumbnail shown while picking a photo */
body.app-premium .people-photo-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 1.6rem;
}
body.app-premium .people-photo-preview--placeholder {
  border-style: dashed;
}
body.app-premium .people-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   PEOPLE SHOW PAGE — PHOTO / AVATAR
   ========================================================= */

/* Full photo when one has been uploaded */
body.app-premium .people-show-photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 3px solid var(--border-subtle);
}

/* Initials avatar fallback (mirrors governance card avatar) */
body.app-premium .people-show-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

/* People directory list — inline photo / avatar */
body.app-premium .people-list-photo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-subtle);
}
body.app-premium .people-list-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

/* People directory — name / photo links: strip the generic td a badge style */
body.app-premium .detail-section .table td a.people-name-link {
  font-family: inherit;
  font-size: inherit;
  background: none;
  color: var(--brand-600);
  padding: 0;
  border-radius: 0;
  border: none;
  letter-spacing: inherit;
  white-space: normal;
  text-decoration: none;
}
body.app-premium .detail-section .table td a.people-name-link:hover {
  background: none;
  border: none;
  color: var(--brand-700);
  text-decoration: underline;
}

/* Director / Officer / Board card — real photo replaces initials avatar */
body.app-premium .director-card__avatar--photo {
  object-fit: cover;
  /*border: 3px solid rgba(255,255,255,0.85);*/
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* =========================================================
   PEOPLE — SHOW PAGE (Profile card + Roles card)
   ========================================================= */

/* ── Profile card (left column) ── */
body.app-premium .person-profile-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
body.app-premium .person-profile-card__photo-wrap {
  display: flex;
  justify-content: center;
  padding: 2rem 1.5rem 1rem;
  background: linear-gradient(160deg, #f0f6ff 0%, #eef1f7 100%);
}
body.app-premium .person-profile-card__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,.18);
}
body.app-premium .person-profile-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
body.app-premium .person-profile-card__identity {
  text-align: center;
  padding: 0.75rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}
body.app-premium .person-profile-card__name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}
body.app-premium .person-profile-card__email {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
body.app-premium .person-profile-card__details {
  padding: 1rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
body.app-premium .person-profile-card__detail-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
body.app-premium .person-profile-card__detail-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.app-premium .person-profile-card__detail-value {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Roles card (right column) ── */
body.app-premium .person-roles-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
body.app-premium .person-roles-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: #f8fafc;
  border-bottom: 1px solid var(--border-subtle);
}
body.app-premium .person-roles-card__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--text-muted);
  gap: 0.4rem;
}
body.app-premium .person-roles-card__empty i {
  font-size: 2rem;
  opacity: 0.25;
  margin-bottom: 0.5rem;
}
body.app-premium .person-roles-card__corp-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 0 1.5rem;
}
body.app-premium .person-roles-card__corp-name {
  padding: 1rem 1.5rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
body.app-premium .person-roles-card__role-list {
  padding: 0.25rem 0 0.75rem;
}

/* ── Individual role row ── */
body.app-premium .person-role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1.5rem;
  transition: background 0.1s;
}
body.app-premium .person-role-row:hover {
  background: #f8fafc;
}
body.app-premium .person-role-row__left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 140px;
}
body.app-premium .person-role-row__icon {
  font-size: 0.9rem;
  color: var(--brand-500);
  opacity: 0.7;
  flex-shrink: 0;
}
body.app-premium .person-role-row__label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}
body.app-premium .person-role-row__right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
body.app-premium .person-role-row__meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}
body.app-premium .person-role-row__meta--ceased {
  color: #dc2626;
  opacity: 0.75;
}

/* Shareholder share pill */
body.app-premium .person-role-row__share-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
}
body.app-premium .person-role-row__share-class {
  font-weight: 400;
  color: var(--text-muted);
}

/* =========================================================
   SHAREHOLDERS — CARD REGISTER
   ========================================================= */

/* Sticky add form (mirrors directors pattern) */
body.app-premium .sh-sticky-form {
  position: sticky;
  top: calc(56px + 1.25rem);
}

/* Share holdings inside each card */
body.app-premium .sh-card__holdings {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 1rem 0.75rem;
  border-top: 1px solid var(--border-subtle);
  background: #f8fafc;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
body.app-premium .sh-card__holding-row {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
body.app-premium .sh-card__share-count {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-600);
  letter-spacing: -0.01em;
}
body.app-premium .sh-card__share-class {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Inline edit form inside the card */
body.app-premium .sh-card__edit-form {
  border-top: 1px solid var(--border-subtle);
  padding: 0.75rem 1rem;
  background: #f8fafc;
}

/* ── Certificate Registry: holder avatar chip ──────────────────────────────── */
body.app-premium .cert-holder-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
}

/* ── Certificate registry action buttons — force white icons ── */
body.app-premium .cert-action-btn,
body.app-premium .cert-action-btn i {
  color: #fff !important;
}
body.app-premium a.cert-action-btn,
body.app-premium a.cert-action-btn i {
  color: #fff !important;
}


/* ══════════════════════════════════════════════════════════════════════
   Compliance Reminders — composer form
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .reminder-composer {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

body.app-premium .reminder-composer__header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-muted);
}

body.app-premium .reminder-composer__header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: var(--brand-50, #eff6ff);
  color: var(--brand-600, #2563eb);
  font-size: 1.1rem;
  border: 1px solid var(--brand-100, #dbeafe);
}

body.app-premium .reminder-composer__header-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}

body.app-premium .reminder-composer__header-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

body.app-premium .reminder-composer__body {
  padding: 1.5rem;
}

body.app-premium .reminder-composer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--surface-muted);
  border-top: 1px solid var(--border-light);
  gap: 1rem;
}

body.app-premium .reminder-composer__queue-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Shared label style for composer fields */
body.app-premium .reminder-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}

/* Advanced overrides toggle */
body.app-premium .reminder-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}
body.app-premium .reminder-advanced-toggle:hover {
  color: var(--brand-600, #2563eb);
}
body.app-premium .reminder-advanced-toggle__chevron {
  transition: transform 0.2s ease;
}
body.app-premium .reminder-advanced-toggle__chevron--open {
  transform: rotate(180deg);
}

body.app-premium .reminder-advanced-panel {
  padding: 1.125rem;
  background: var(--surface-muted);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   Compliance Reminders — schedule cards
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .reminder-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.15s ease;
  height: 100%;
}
body.app-premium .reminder-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
body.app-premium .reminder-card--disabled {
  opacity: 0.72;
}

/* Card header: name + status badge */
body.app-premium .reminder-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
body.app-premium .reminder-card__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

/* Status badge with colored dot */
body.app-premium .reminder-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
body.app-premium .reminder-card__badge--on {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
body.app-premium .reminder-card__badge--off {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
body.app-premium .reminder-card__badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

/* Meta rows: due date, timezone */
body.app-premium .reminder-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
body.app-premium .reminder-card__meta-icon {
  font-size: 0.78rem;
  opacity: 0.6;
  flex-shrink: 0;
}
body.app-premium .reminder-card__meta--tz {
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Offset chips */
body.app-premium .reminder-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.1rem 0;
}
body.app-premium .reminder-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  background: var(--brand-50, #eff6ff);
  color: var(--brand-700, #1d4ed8);
  border: 1px solid var(--brand-100, #dbeafe);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
}

/* Action buttons row */
body.app-premium .reminder-card__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--border-light);
  margin-top: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   Compliance Reminders — empty state
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .reminder-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  background: var(--surface-card);
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  text-align: center;
  margin-bottom: 1.5rem;
}
body.app-premium .reminder-empty-state__icon {
  font-size: 2rem;
  color: var(--text-muted);
  opacity: 0.4;
  margin-bottom: 0.75rem;
  line-height: 1;
}
body.app-premium .reminder-empty-state__title {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}
body.app-premium .reminder-empty-state__sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}


/* ══════════════════════════════════════════════════════════════════════
   Tasks — stat cards
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .task-stat {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
}
body.app-premium .task-stat:hover {
  box-shadow: var(--shadow-md);
}
body.app-premium .task-stat--alert {
  border-color: #fde68a;
  background: #fffbeb;
}
body.app-premium .task-stat--danger {
  border-color: #fecaca;
  background: #fff5f5;
}

body.app-premium .task-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  font-size: 1.05rem;
}
body.app-premium .task-stat__icon--blue  { background: #eff6ff; color: #2563eb; }
body.app-premium .task-stat__icon--green { background: #f0fdf4; color: #16a34a; }
body.app-premium .task-stat__icon--amber { background: #fffbeb; color: #d97706; }
body.app-premium .task-stat__icon--red   { background: #fff5f5; color: #dc2626; }

body.app-premium .task-stat__value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
}
body.app-premium .task-stat__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════════════
   Tasks — filter tabs
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .task-filter-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
}
body.app-premium .task-filter-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  background: var(--surface-muted);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 3px;
}
body.app-premium .task-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.375rem 0.875rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
body.app-premium .task-filter-tab:hover {
  background: var(--surface-card);
  color: var(--text-primary);
}
body.app-premium .task-filter-tab--active {
  background: var(--surface-card);
  color: var(--brand-600, #2563eb);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
body.app-premium .task-filter-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--brand-600, #2563eb);
  color: #fff;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════
   Tasks — task list rows
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .task-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

body.app-premium .task-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.12s ease;
  min-height: 60px;
}
body.app-premium .task-row:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
body.app-premium .task-row--overdue {
  border-color: #fecaca;
}

/* Priority left bar */
body.app-premium .task-row__bar {
  width: 4px;
  align-self: stretch;
  flex-shrink: 0;
  background: #e2e8f0; /* default: normal */
}
body.app-premium .task-row--high   .task-row__bar { background: #ef4444; }
body.app-premium .task-row--normal .task-row__bar { background: #94a3b8; }
body.app-premium .task-row--low    .task-row__bar { background: #cbd5e1; }

/* Content: title + description */
body.app-premium .task-row__content {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 0;
}
body.app-premium .task-row__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.app-premium .task-row__desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta chips group */
body.app-premium .task-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.5rem 0;
}

/* Individual chips */
body.app-premium .task-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* Date chip */
body.app-premium .task-chip--date {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}
/* Overdue date */
body.app-premium .task-chip--overdue {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
  font-weight: 600;
}
body.app-premium .task-chip__overdue-label {
  background: #ef4444;
  color: #fff;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-left: 2px;
}
/* Priority chips */
body.app-premium .task-chip--priority-high   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
body.app-premium .task-chip--priority-normal { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
body.app-premium .task-chip--priority-low    { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; }
/* Type chips */
body.app-premium .task-chip--type-system     { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
body.app-premium .task-chip--type-compliance { background: #fffbeb; color: #92400e; border-color: #fde68a; }
body.app-premium .task-chip--type-manual     { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
/* Assignee chip */
body.app-premium .task-chip--assignee {
  background: #f5f3ff;
  color: #5b21b6;
  border-color: #ddd6fe;
}
/* Done chip */
body.app-premium .task-chip--done {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

/* Assignee avatar circle */
body.app-premium .task-assignee-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #7c3aed;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
}

/* Action buttons */
body.app-premium .task-row__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-right: 0.875rem;
  flex-shrink: 0;
}
body.app-premium .task-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
body.app-premium .task-action-btn--complete:hover {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #86efac;
}
body.app-premium .task-action-btn--dismiss:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* ══════════════════════════════════════════════════════════════════════
   Tasks — empty state
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .task-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem;
  background: var(--surface-card);
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  text-align: center;
  margin-bottom: 1.5rem;
}
body.app-premium .task-empty-state__icon {
  font-size: 2.25rem;
  color: var(--text-muted);
  opacity: 0.35;
  margin-bottom: 0.875rem;
  line-height: 1;
}
body.app-premium .task-empty-state__title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-secondary);
}
body.app-premium .task-empty-state__sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Tasks — create modal icon
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .task-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--brand-50, #eff6ff);
  color: var(--brand-600, #2563eb);
  font-size: 1rem;
  border: 1px solid var(--brand-100, #dbeafe);
}


/* ══════════════════════════════════════════════════════════════════════
   Document Templates — section headers
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .tmpl-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
body.app-premium .tmpl-section__header-left {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}
body.app-premium .tmpl-section__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  font-size: 1.1rem;
  margin-top: 2px;
}
body.app-premium .tmpl-section__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
body.app-premium .tmpl-section__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
body.app-premium .tmpl-section__count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Document Templates — cards
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .tmpl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.15s ease, border-color 0.18s ease;
}
body.app-premium .tmpl-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tmpl-accent, #2563eb);
  opacity: 0;
  transition: opacity 0.18s ease;
}
body.app-premium .tmpl-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tmpl-accent, #2563eb) 30%, transparent);
}
body.app-premium .tmpl-card:hover::before {
  opacity: 1;
}

/* Icon */
body.app-premium .tmpl-card__top {
  margin-bottom: 0.875rem;
}
body.app-premium .tmpl-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 1.1rem;
  background: var(--tmpl-icon-bg, #eff6ff);
  color: var(--tmpl-icon-color, #2563eb);
  transition: transform 0.15s ease;
}
body.app-premium .tmpl-card:hover .tmpl-card__icon {
  transform: scale(1.08);
}

/* Title + description */
body.app-premium .tmpl-card__body {
  flex: 1;
  margin-bottom: 1rem;
}
body.app-premium .tmpl-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
body.app-premium .tmpl-card__desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* CTA link */
body.app-premium .tmpl-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tmpl-accent, #2563eb);
  text-decoration: none;
  transition: gap 0.15s ease, opacity 0.12s ease;
}
body.app-premium .tmpl-card__cta:hover {
  gap: 0.55rem;
  opacity: 0.85;
  color: var(--tmpl-accent, #2563eb);
}
/* stretched-link override: keep CTA color */
body.app-premium a.tmpl-card__cta.stretched-link {
  color: var(--tmpl-accent, #2563eb) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   Minute Book — shared section label
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .mb-subnav-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════
   Minute Book — overview workflow cards
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .mb-workflow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 100%;
  padding: 1.5rem;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.15s ease;
}
body.app-premium .mb-workflow-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
body.app-premium .mb-workflow-card--muted {
  background: var(--surface-muted);
}

body.app-premium .mb-workflow-card__step {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-muted);
  border: 1px solid var(--border-light);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.app-premium .mb-workflow-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
body.app-premium .mb-workflow-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
body.app-premium .mb-workflow-card__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
}
body.app-premium .mb-workflow-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-600, #2563eb);
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.15s ease;
}
body.app-premium .mb-workflow-card__cta:hover {
  gap: 0.55rem;
  color: var(--brand-700, #1d4ed8);
}
body.app-premium .mb-workflow-card__cta--passive {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.78rem;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════
   Minute Book — my structures cards
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .mb-struct-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.125rem 1.25rem;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.15s ease, border-color 0.18s ease;
}
body.app-premium .mb-struct-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tmpl-accent, #2563eb);
  opacity: 0;
  transition: opacity 0.18s ease;
}
body.app-premium .mb-struct-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
body.app-premium .mb-struct-card:hover::before { opacity: 1; }

body.app-premium .mb-struct-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
body.app-premium .mb-struct-card__body { flex: 1; }
body.app-premium .mb-struct-card__delete {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  z-index: 10;
  position: relative;
}
body.app-premium .mb-struct-card__delete:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

/* ══════════════════════════════════════════════════════════════════════
   Minute Book — global template cards
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .mb-global-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 100%;
  padding: 1.5rem;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.15s ease;
}
body.app-premium .mb-global-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
body.app-premium .mb-global-card--featured {
  border-color: #bfdbfe;
  background: linear-gradient(135deg, #fff 80%, #eff6ff 100%);
}
body.app-premium .mb-global-card--featured::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
}

body.app-premium .mb-global-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  width: fit-content;
  margin-bottom: 0.25rem;
}
body.app-premium .mb-global-card__badge--recommended {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
body.app-premium .mb-global-card__badge--essential {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

body.app-premium .mb-global-card__icon {
  font-size: 1.5rem;
  color: var(--text-muted);
  opacity: 0.4;
  margin-bottom: 0.25rem;
}
body.app-premium .mb-global-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
}
body.app-premium .mb-global-card__summary {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
body.app-premium .mb-global-card__bestfor {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

body.app-premium .mb-global-card__sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}
body.app-premium .mb-global-card__section-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
}

body.app-premium .mb-global-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-600, #2563eb);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
  transition: gap 0.15s ease;
}
body.app-premium .mb-global-card__cta:hover {
  gap: 0.55rem;
  color: var(--brand-600, #2563eb);
}

/* ══════════════════════════════════════════════════════════════════════
   Minute Book — folder tree card
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .mb-tree-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
body.app-premium .mb-tree-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-light);
}
body.app-premium .mb-tree-card__header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.95rem;
}
body.app-premium .mb-tree-card__header-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
}
body.app-premium .mb-tree-card__body {
  padding: 1rem 1.25rem;
}

/* ── Tree nodes ── */
body.app-premium .mb-tree-group {
  display: flex;
  flex-direction: column;
}
body.app-premium .mb-tree-node {
  border-bottom: 1px solid var(--border-light);
}
body.app-premium .mb-tree-node:last-child { border-bottom: none; }

body.app-premium .mb-tree-node__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  gap: 0.75rem;
}
body.app-premium .mb-tree-node__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
body.app-premium .mb-tree-node__folder-icon {
  color: #d97706; /* amber folder */
  font-size: 0.95rem;
  flex-shrink: 0;
}
body.app-premium .mb-tree-node__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}
body.app-premium .mb-tree-node__child-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--surface-muted);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
}

/* Action buttons — visible on row hover */
body.app-premium .mb-tree-node__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}
body.app-premium .mb-tree-node__row:hover .mb-tree-node__actions {
  opacity: 1;
}
body.app-premium .mb-tree-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
body.app-premium .mb-tree-action-btn--add:hover    { background: #f0fdf4; color: #16a34a; border-color: #86efac; }
body.app-premium .mb-tree-action-btn--edit:hover   { background: #eff6ff; color: #2563eb; border-color: #93c5fd; }
body.app-premium .mb-tree-action-btn--delete:hover { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }

/* Inline add/rename forms */
body.app-premium .mb-tree-inline-form {
  padding: 0.5rem 0 0.75rem 1.75rem;
}
body.app-premium .mb-tree-form-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
body.app-premium .mb-tree-form-btn {
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
body.app-premium .mb-tree-form-btn--save {
  background: var(--brand-600, #2563eb);
  color: #fff;
  border-color: var(--brand-600, #2563eb);
}
body.app-premium .mb-tree-form-btn--save:hover {
  background: var(--brand-700, #1d4ed8);
  border-color: var(--brand-700, #1d4ed8);
}
body.app-premium .mb-tree-form-btn--cancel {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-subtle);
}
body.app-premium .mb-tree-form-btn--cancel:hover {
  background: var(--surface-muted);
  color: var(--text-secondary);
}

/* Rename bar */
body.app-premium .mb-rename-bar {
  padding: 0.75rem 1rem;
  background: var(--surface-muted);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
}

/* Indented child groups */
body.app-premium .mb-tree-group.ms-4 {
  padding-left: 1.5rem;
  border-left: 2px solid var(--border-light);
  margin-left: 0.75rem;
}


/* ══════════════════════════════════════════════════════════════════════
   Account — profile card + avatar uploader
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .profile-card {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 1.5rem;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

body.app-premium .profile-card__avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Avatar circle */
body.app-premium .profile-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--surface-card), 0 0 0 4px var(--border-subtle);
  transition: box-shadow 0.18s ease;
  flex-shrink: 0;
}
body.app-premium .profile-avatar:hover {
  box-shadow: 0 0 0 3px var(--surface-card), 0 0 0 4px var(--brand-400, #60a5fa);
}

body.app-premium .profile-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.app-premium .profile-avatar__initials {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--brand-500, #3b82f6), var(--brand-700, #1d4ed8));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  user-select: none;
}

/* Camera overlay on hover */
body.app-premium .profile-avatar__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.18s ease;
}
body.app-premium .profile-avatar__overlay i {
  font-size: 1.35rem;
}
body.app-premium .profile-avatar:hover .profile-avatar__overlay {
  opacity: 1;
}

/* Save bar that appears after selecting a photo */
body.app-premium .profile-avatar__savebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--surface-muted);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  width: max-content;
  max-width: 220px;
}

/* Identity summary next to avatar */
body.app-premium .profile-card__identity {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
body.app-premium .profile-card__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}
body.app-premium .profile-card__email {
  font-size: 0.875rem;
  color: var(--text-secondary);
}
body.app-premium .profile-card__tz {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}


/* ══════════════════════════════════════════════════════════════════════
   Topbar — corporation logo
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium.app-shell-enabled .app-shell-topbar__corp-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
body.app-premium.app-shell-enabled .app-shell-topbar__corp-logo {
  max-height: 70px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* When a logo is present, move the switcher to the right */
body.app-premium.app-shell-enabled .app-shell-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   Corporation overview — logo upload zone
   ══════════════════════════════════════════════════════════════════════ */

body.app-premium .corp-logo-preview-thumb {
  max-height: 36px;
  max-width: 140px;
  object-fit: contain;
  border-radius: 4px;
}

body.app-premium .corp-logo-upload-zone {
  border: 2px dashed var(--border-subtle);
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  background: var(--surface-muted);
  position: relative;
  user-select: none;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.app-premium .corp-logo-upload-zone:hover,
body.app-premium .corp-logo-upload-zone--drag {
  border-color: var(--brand-400, #60a5fa);
  background: #eff6ff;
}
body.app-premium .corp-logo-upload-zone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-height: 80px;
  justify-content: center;
}

body.app-premium .corp-logo-upload-zone__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
body.app-premium .corp-logo-upload-zone__icon {
  font-size: 1.75rem;
  color: var(--text-muted);
  opacity: 0.5;
}
body.app-premium .corp-logo-upload-zone__text {
  font-size: 0.875rem;
  color: var(--text-secondary);
}
body.app-premium .corp-logo-upload-zone__hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

body.app-premium .corp-logo-upload-zone__preview {
  max-height: 80px;
  max-width: 280px;
  object-fit: contain;
  border-radius: 6px;
}
body.app-premium .corp-logo-upload-zone__change-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}
body.app-premium .corp-logo-upload-zone--tall {
  min-height: 180px;
  flex-direction: column;
}
body.app-premium .corp-logo-upload-zone--tall .corp-logo-upload-zone__preview {
  max-height: 120px;
  max-width: 100%;
}

/* ── Compact inline logo widget (Overview page) ── */
body.app-premium .corp-logo-inline {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  transition: border-color .15s ease;
}
body.app-premium .corp-logo-inline:hover {
  border-color: var(--color-primary);
}
body.app-premium .corp-logo-inline__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
body.app-premium .corp-logo-inline__placeholder {
  font-size: 1.4rem;
  opacity: 0.4;
}
body.app-premium .corp-logo-inline__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity .15s ease;
}
body.app-premium .corp-logo-inline:hover .corp-logo-inline__overlay {
  opacity: 1;
}


/* ===================================================================
   VISUAL REFRESH — Clean aesthetic
   Grey page canvas · White cards · Flat page headers
   All overrides grouped here for clarity
   =================================================================== */

/* ── 1. Grey content canvas (topbar stays white) ── */
body.app-premium.app-shell-enabled .app-shell-main {
  background: var(--surface-app);
}
body.app-premium.app-shell-enabled .app-shell-main .app-shell-content,
body.app-premium.app-shell-enabled .app-shell-content-inner {
  background: var(--surface-app);
}
/* Topbar explicitly white */
body.app-premium.app-shell-enabled .app-shell-topbar {
  background: var(--surface-canvas);
}

/* ── 2. Corp hero — flat, transparent; no gradient ── */
body.app-premium .corp-hero {
  background: transparent;
  border-radius: 0;
  padding: 0 0 1.5rem;
  margin-bottom: 0;
  box-shadow: none;
  overflow: visible;
  position: static;
}
body.app-premium .corp-hero::before,
body.app-premium .corp-hero::after {
  display: none;
}

/* Remove bleed negative margins — no longer needed without gradient */
body.app-premium .corp-hero--full-bleed,
body.app-premium .corp-hero--compact {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}
body.app-premium.app-shell-enabled .app-shell-content-inner .corp-hero--full-bleed,
body.app-premium.app-shell-enabled .app-shell-content-inner .corp-hero--compact,
body.app-premium.app-shell-enabled .app-shell-content-inner .pl-hero--full-bleed {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
}
body.app-premium.app-shell-enabled .app-shell-content-inner .corp-hero--full-bleed .corp-hero__inner,
body.app-premium.app-shell-enabled .app-shell-content-inner .corp-hero--compact > * {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
body.app-premium .corp-hero--full-bleed .corp-hero__inner,
body.app-premium .corp-hero--compact > * {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* Hero typography — dark text on light background */
body.app-premium .corp-hero h1,
body.app-premium .corp-hero h3,
body.app-premium .corp-hero__name {
  color: var(--text-primary);
  font-size: 1.65rem;
  letter-spacing: -0.025em;
}
body.app-premium .corp-hero--compact .corp-hero__name {
  font-size: 1.65rem;
}
body.app-premium .corp-hero__subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Pills — adapt for light background */
body.app-premium .corp-hero__pill {
  background: var(--surface-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  backdrop-filter: none;
}
body.app-premium .corp-hero__pill i {
  opacity: 0.55;
}

/* Status badges — adapt for light background */
body.app-premium .corp-hero__status--active {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
body.app-premium .corp-hero__status--archived {
  background: #fefce8;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Action buttons — match EV ev-page-btn sizing and style */
body.app-premium .corp-hero__actions .btn,
body.app-premium .corp-hero__actions .btn-outline-light {
  background: #f8fafc;
  border: 1px solid #94a3b8;
  color: #374151;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  line-height: 1.5;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
body.app-premium .corp-hero__actions .btn:hover,
body.app-premium .corp-hero__actions .btn-outline-light:hover {
  background: #f1f5f9;
  border-color: #64748b;
  color: #1e293b;
}
/* Hide icons inside hero action buttons — clean text-only style */
body.app-premium .corp-hero__actions .btn i,
body.app-premium .corp-hero__actions .btn .bi {
  display: none !important;
}

/* Detail-section header action buttons (e.g. Active/All filter, "Manage Signatories") */
body.app-premium .detail-section__header .btn,
body.app-premium .detail-section__header a.btn {
  background: var(--surface-app);
  border-color: var(--border-subtle);
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
}
body.app-premium .detail-section__header .btn:hover,
body.app-premium .detail-section__header a.btn:hover {
  background: var(--surface-muted);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
/* Restore btn-primary and active-state colours within detail-section headers */
body.app-premium .detail-section__header .btn.btn-primary,
body.app-premium .detail-section__header .btn.btn-primary.active {
  background: var(--brand-500, #2563eb);
  border-color: var(--brand-600, #1d4ed8);
  color: #fff;
}
body.app-premium .detail-section__header .btn.btn-primary:hover,
body.app-premium .detail-section__header .btn.btn-primary.active:hover {
  background: var(--brand-600, #1d4ed8);
  border-color: var(--brand-700, #1e40af);
  color: #fff;
}
body.app-premium .detail-section__header .btn i,
body.app-premium .detail-section__header a.btn i,
body.app-premium .detail-section__header .btn .bi,
body.app-premium .detail-section__header a.btn .bi {
  display: none !important;
}

/* Mobile: undo the separate compact/full-bleed padding tweaks */
@media (max-width: 767.98px) {
  body.app-premium .corp-hero {
    padding: 0 0 1.25rem;
  }
  body.app-premium .corp-hero--compact,
  body.app-premium .corp-hero--full-bleed {
    margin-top: 0;
  }
}

/* ── 3. Stat-rich cards — remove accent left-border stripe ── */
body.app-premium .stat-rich {
  border-left-width: 1px;
}

/* ── 4. Detail-section header — white bg inside white card ── */
body.app-premium .detail-section__header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-light);
}


/* ── 5. Stat-rich KPI cards — neutralise all coloured left-border variants ── */
body.app-premium .stat-rich--blue,
body.app-premium .stat-rich--green,
body.app-premium .stat-rich--amber,
body.app-premium .stat-rich--purple,
body.app-premium .stat-rich--teal,
body.app-premium .stat-rich--slate {
  border-left-color: var(--border-subtle);
  border-left-width: 1px;
}

/* ── 6. Detail-section header — white bg, no grey tint ── */
body.app-premium .detail-section__header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-light);
}

/* ── 7. Neutralise :has(form) and :not(:has(form)) header treatments ─────
   These selectors have specificity (0,2,1) so we must match them exactly.   ──────────────────────────────────────────────────────────────────────── */

/* Form-containing cards (Add Share Class, Add Director, etc.) */
body.app-premium .detail-section:has(form) {
  border-left: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
body.app-premium .detail-section:has(form) .detail-section__header {
  background: var(--surface-card);
  border-bottom-color: var(--border-light);
}
body.app-premium .detail-section:has(form) .detail-section__header h3 {
  color: var(--text-primary);
}

/* Table/register cards (Share Classes Register, Shareholders Register, etc.) */
body.app-premium .detail-section:not(:has(form)) .detail-section__header {
  background: var(--surface-card);
}

/* Utility: allow flex children to shrink past their intrinsic content width */
body.app-premium .min-w-0 {
  min-width: 0;
}

/* ===================================================================
   EV-STYLE SECTION LABEL — small uppercase label above card grids
   =================================================================== */
body.app-premium .ev-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding-left: 0.1rem;
}

/* ===================================================================
   EV BADGE SYSTEM — soft colour pills for status/action labels
   =================================================================== */
body.app-premium .badge.ev-badge-active {
  background: rgba(34, 168, 90, .12);
  color: #1a7a44;
  border: 1px solid rgba(34, 168, 90, .2);
  font-weight: 600;
}
body.app-premium .badge.ev-badge-archived {
  background: rgba(148, 163, 184, .12);
  color: #5a6b7f;
  border: 1px solid rgba(148, 163, 184, .2);
  font-weight: 600;
}

/* ===================================================================
   EV EMPTY STATE — used on the corporations list when a section is empty
   =================================================================== */
body.app-premium .ev-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.25rem 1.5rem;
  color: var(--text-secondary);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
body.app-premium .ev-empty__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.35rem;
  color: var(--text-muted);
}
body.app-premium .ev-empty__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}
body.app-premium .ev-empty__body {
  font-size: 0.875rem;
  color: var(--text-secondary);
  max-width: 340px;
  margin: 0 auto 1rem;
  line-height: 1.5;
}

/* ===================================================================
   CORP CARD — used on corporations list / dashboard
   Layout primitives are shared between the card-grid and row views;
   .corp-list--cards / --rows tweak spacing and structure on top.
   =================================================================== */
body.app-premium .corp-card {
  position: relative;
  display: grid;
  grid-template-columns: 4px 38px minmax(0, 1fr) auto auto;
  grid-template-areas: "strip avatar body deadline arrow";
  align-items: center;
  column-gap: 0.9rem;
  padding: 0.85rem 1.1rem 0.85rem 0.75rem;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  text-decoration: none;
  color: var(--text-primary);
  transition: box-shadow .15s ease, border-color .15s ease;
  height: 100%;
  overflow: hidden;
}
body.app-premium .corp-card:hover {
  border-color: var(--brand-500);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .12);
  color: var(--text-primary);
}

/* Status strip on the leading edge. Hidden (transparent) for "ready" rows. */
body.app-premium .corp-card__strip {
  grid-area: strip;
  align-self: stretch;
  width: 4px;
  border-radius: 2px;
  background: transparent;
}
body.app-premium .corp-card__strip[data-severity="soon"]    { background: #f59e0b; }
body.app-premium .corp-card__strip[data-severity="overdue"] { background: #dc2626; }

body.app-premium .corp-card__avatar {
  grid-area: avatar;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(37, 99, 235, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-700);
  flex-shrink: 0;
  letter-spacing: -.02em;
}

body.app-premium .corp-card__body {
  grid-area: body;
  min-width: 0;
}

body.app-premium .corp-card__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
body.app-premium .corp-card__name {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
body.app-premium .corp-card__chip {
  background: var(--surface-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: .01em;
}
body.app-premium .corp-card__meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  min-width: 0;
}
body.app-premium .corp-card__meta-item {
  display: inline;
}
body.app-premium .corp-card__number {
  font-variant-numeric: tabular-nums;
}

body.app-premium .corp-card__deadline {
  grid-area: deadline;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
body.app-premium .corp-card__deadline[data-severity="soon"] {
  color: #92400e;
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .22);
}
body.app-premium .corp-card__deadline[data-severity="overdue"] {
  color: #991b1b;
  background: rgba(220, 38, 38, .1);
  border-color: rgba(220, 38, 38, .22);
}

body.app-premium .corp-card__arrow {
  grid-area: arrow;
  color: var(--text-muted);
  font-size: 0.9rem;
  flex-shrink: 0;
  opacity: .55;
  justify-self: end;
  transition: opacity .15s ease, transform .15s ease, color .15s ease;
}
body.app-premium .corp-card:hover .corp-card__arrow {
  opacity: 1;
  color: var(--brand-600, var(--brand-500));
  transform: translateX(2px);
}

/* Default-corporation star: rendered as a sibling form positioned over
   the card's top-right corner, since the card itself is an <a>. Clicking
   the star submits a POST to /corporations/:id/set-default and toggles
   the user's default_corp_public_id. */
body.app-premium .corp-card-wrap {
  position: relative;
  height: 100%;
}
body.app-premium .corp-card-wrap--default .corp-card {
  border-color: rgba(245, 158, 11, .35);
  box-shadow: 0 1px 4px rgba(245, 158, 11, .12);
}
body.app-premium .corp-card__default-form {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  margin: 0;
  z-index: 2;
}
body.app-premium .corp-card__default-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
body.app-premium .corp-card-wrap:hover .corp-card__default-btn,
body.app-premium .corp-card__default-btn:focus-visible,
body.app-premium .corp-card__default-btn.is-default {
  opacity: 1;
}
body.app-premium .corp-card__default-btn:hover {
  background: rgba(245, 158, 11, .12);
  color: #b45309;
  border-color: rgba(245, 158, 11, .25);
}
body.app-premium .corp-card__default-btn.is-default {
  color: #d97706;
}
body.app-premium .corp-card__default-btn.is-default:hover {
  color: #b45309;
}
body.app-premium .corp-card__default-btn i { font-size: 0.9rem; }

/* Default-corporation chip alongside the active/entity-type badges. */
body.app-premium .corp-card__chip--default {
  background: rgba(245, 158, 11, .12);
  color: #b45309;
  border-color: rgba(245, 158, 11, .25);
}

/* Mobile-only "kebab" action button on /corporations. Replaces the
   "Import CSV" + "New Corporation" buttons on small screens so the
   list (the primary task) stays above the fold. */
body.app-premium .corp-hero__actions-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.app-premium .corp-hero__actions-toggle::after { display: none; }
body.app-premium .corp-hero__actions-toggle i { font-size: 1.1rem; }

/* Selection banner shown to users with 2+ corps and no default. */
body.app-premium .corp-select-banner {
  background: rgba(37, 99, 235, .06);
  border: 1px solid rgba(37, 99, 235, .18);
  color: var(--text-primary);
}
body.app-premium .corp-select-banner i {
  color: var(--brand-600, var(--brand-500));
}

/* CARD MODE — let the body stack onto a second line below the heading
   when the row gets crowded, and let the deadline pill drop below too. */
body.app-premium .corp-list--cards .corp-card {
  grid-template-columns: 4px 38px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "strip avatar body     arrow"
    "strip avatar deadline arrow";
  row-gap: 0.4rem;
  align-items: start;
  padding: 0.95rem 1.1rem 0.95rem 0.75rem;
}
body.app-premium .corp-list--cards .corp-card__deadline {
  justify-self: start;
}
body.app-premium .corp-list--cards .corp-card__avatar {
  align-self: start;
  margin-top: 0.1rem;
}
body.app-premium .corp-list--cards .corp-card__arrow {
  align-self: start;
  margin-top: 0.4rem;
}
body.app-premium .corp-list--cards .corp-card__meta {
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
body.app-premium .corp-list--cards .corp-card__meta-item {
  display: block;
  line-height: 1.35;
}

/* ROW MODE — one tight line; cards flatten into a single panel-style list.
   The .corp-list--rows container provides the outer panel; individual cards
   shed their own borders/shadows and stack with a 1px separator. */
body.app-premium .corp-list--rows .corp-card {
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
  padding: 0.65rem 1rem 0.65rem 0.5rem;
  height: auto;
}
/* `.corp-card` is now wrapped in `.corp-card-wrap` (which also holds the
   inline "set default" star form). So target the last wrap, not the last
   card — every card is its wrap's only child. */
body.app-premium .corp-list--rows .corp-card-wrap:last-child .corp-card {
  border-bottom: none;
}
body.app-premium .corp-list--rows .corp-card:hover {
  background: var(--surface-muted);
  box-shadow: none;
  border-color: var(--border-subtle);
  border-bottom-color: var(--border-subtle);
}
body.app-premium .corp-list--rows .corp-card__avatar {
  width: 32px;
  height: 32px;
  font-size: 0.78rem;
}
body.app-premium .corp-list--rows .corp-card__name {
  font-size: 0.9rem;
}
body.app-premium .corp-list--rows .corp-card__meta {
  margin-top: 0;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Inline meta with a `·` separator between adjacent items in row mode. */
body.app-premium .corp-list--rows .corp-card__meta-item + .corp-card__meta-item::before {
  content: '·';
  margin: 0 0.45rem;
  color: var(--text-muted);
  opacity: .55;
}
body.app-premium .corp-list--rows .corp-card__deadline {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
}

/* ===================================================================
   CORPORATIONS LIST — tabs, toolbar, dual-mode list (cards / rows)
   =================================================================== */
body.app-premium .corp-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1.25rem;
}
body.app-premium .corp-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color .12s ease, border-color .12s ease;
}
body.app-premium .corp-tab:hover {
  color: var(--text-primary);
}
body.app-premium .corp-tab--active {
  color: var(--brand-700);
  border-bottom-color: var(--brand-500);
}
body.app-premium .corp-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-muted);
  line-height: 1;
}
body.app-premium .corp-tab--active .corp-tab__count {
  background: rgba(37, 99, 235, .12);
  color: var(--brand-700);
}

/* Toolbar above each list (search / sort / country / view toggle) */
body.app-premium .corp-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
body.app-premium .corp-toolbar__search {
  position: relative;
  flex: 1 1 280px;
  max-width: 420px;
}
body.app-premium .corp-toolbar__search > i {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.85rem;
  pointer-events: none;
}
body.app-premium .corp-toolbar__search input {
  padding-left: 2rem;
}
body.app-premium .corp-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}
/* Bootstrap's .form-select is `width: 100%` by default; that collides with
   flex-wrap and forces each filter onto its own line. Pin to auto width
   with a sensible minimum so they sit in a row. */
body.app-premium .corp-toolbar__sort,
body.app-premium .corp-toolbar__country,
body.app-premium .corp-toolbar__entity,
body.app-premium .corp-toolbar__status,
body.app-premium .corp-toolbar__role,
body.app-premium .corp-toolbar__corp {
  width: auto;
  min-width: 150px;
  flex: 0 0 auto;
}
body.app-premium .corp-toolbar__view .btn {
  padding: 0.3rem 0.6rem;
}
body.app-premium .corp-toolbar__view .btn.active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}

/* Card-grid view — the original layout. */
body.app-premium .corp-list--cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.75rem;
}

/* Row view — collapses cards into a dense list inside a single panel. */
body.app-premium .corp-list--rows {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  overflow: hidden;
}
/* People directory — avatar inside corp-card layout. Carries the palette
   background from inline style; image inside takes full square cleanly. */
body.app-premium .people-card .corp-card__avatar.people-card__avatar {
  color: #fff;
  overflow: hidden;
  padding: 0;
}
body.app-premium .people-card .corp-card__avatar.people-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pagination footer — page numbers + "Showing X–Y of Z" indicator */
body.app-premium .corp-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
body.app-premium .corp-pager__info {
  font-size: 0.8rem;
  color: var(--text-muted);
}
body.app-premium .corp-pager .pagination {
  margin: 0;
}
body.app-premium .corp-pager .page-link {
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  background: var(--surface-card);
}
body.app-premium .corp-pager .page-link:hover {
  background: var(--surface-muted);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
body.app-premium .corp-pager .page-item.active .page-link {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}
body.app-premium .corp-pager .page-item.disabled .page-link {
  color: var(--text-muted);
  background: var(--surface-card);
  opacity: .55;
}

/* "No matches" placeholder for the active search/filter */
body.app-premium .corp-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  background: var(--surface-card);
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
}
body.app-premium .corp-list__empty i {
  font-size: 1.3rem;
  opacity: .6;
}

@media (max-width: 575.98px) {
  body.app-premium .corp-toolbar__filters {
    margin-left: 0;
    width: 100%;
  }
  body.app-premium .corp-toolbar__search {
    flex-basis: 100%;
    max-width: none;
  }
  body.app-premium .corp-toolbar__sort,
  body.app-premium .corp-toolbar__country,
  body.app-premium .corp-toolbar__entity,
  body.app-premium .corp-toolbar__status,
  body.app-premium .corp-toolbar__role,
  body.app-premium .corp-toolbar__corp {
    flex: 1 1 140px;
    min-width: 0;
  }
}