/* ============================================
   V2 APP FRAME STYLES
   Uses design tokens from colors.css
   ============================================ */

/* Mobile Desktop Banner */
.mobile-desktop-banner {
  display: none;
  background: var(--gradient);
  color: white;
  text-align: center;
  padding: 12px 40px 12px 16px;
  font-size: 14px;
  font-weight: 500;
  position: relative;
}
.mobile-desktop-banner button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
@media (max-width: 768px) {
  .mobile-desktop-banner {
    display: block;
  }
}

/* Utility */
.hidden {
  display: none !important;
}

/* ============================================
   APP LAYOUT SHELL
   ============================================ */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  margin-left: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


/* ============================================
   PAGE CONTENT
   ============================================ */
.page-content {
  flex: 1;
  width: 100%;
  padding: var(--space-3xl);
  background: var(--white);
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .page-content { padding: var(--space-xl); }
}

/* v1.0 (May 2026): unify the gutter on admin-style surfaces — Platform
   Admin (.admin-container), My Programs / My Team (.user-admin--fullbleed),
   Boostd (.boostd-shell), and My Account (.acct-wrap) — so they all line
   up at 80px from the top and 48px from the sides on desktop. The inner
   wrappers are zeroed out below so this shell rule is the single source
   of truth. Scoped via :has() so other pages keep their existing padding. */
.page-content:has(> .admin-container--platform),
.page-content:has(> .user-admin--fullbleed),
.page-content:has(> .boostd-shell),
.page-content:has(> .acct-wrap) {
  padding: 80px 48px;
}
@media (max-width: 768px) {
  .page-content:has(> .admin-container--platform),
  .page-content:has(> .user-admin--fullbleed),
  .page-content:has(> .boostd-shell),
  .page-content:has(> .acct-wrap) {
    padding: var(--space-xl);
  }
}

/* Legacy in-app page heading style (22px bold). The `:not(.section-title)`
   guard is critical: /free + /explore h1s carry both `section-title` and
   `page-title`, and once app.css is injected by SPA navigation it stays
   loaded across all routes. Without the guard, this rule's `font-bold`
   (700) overrode `.section-title`'s `--font-weight-semibold` (600) by
   source order on those public pages — making "Explore our products"
   render heavier than /work's "My Work" (which only carries
   `section-title`). The guard keeps this rule for legitimate in-app
   `.page-title` usages (e.g. `.account-header .page-title`) while letting
   `.section-title` win wherever both classes appear. */
.page-title:not(.section-title) {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2xl);
}

/* ============================================
   PAGE CONTENT CONTAINERS
   ============================================ */
.marketplace-container,
.activity-container,
.studio-container,
.library-container,
.favorites-container,
.account-container {
  max-width: 1425px;
  margin: 0 auto;
  padding-left: 100px;
  padding-right: 100px;
}

.activity-container,
.studio-container,
.library-container,
.favorites-container,
.account-container {
  max-width: 1000px;
}

/* ============================================
   MARKETPLACE PAGE
   ============================================ */
.marketplace-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.marketplace-search,
.library-search {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--gray-background);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  min-width: 280px;
}
.marketplace-search svg,
.library-search svg {
  color: var(--gray-mid);
  flex-shrink: 0;
}
.marketplace-search input,
.library-search input {
  border: none;
  background: none;
  font-size: var(--text-sm);
  color: var(--navy);
  outline: none;
  width: 100%;
  font-family: inherit;
}
.marketplace-search input::placeholder,
.library-search input::placeholder {
  color: var(--gray-mid);
}

.library-search {
  margin-bottom: var(--space-2xl);
  max-width: 400px;
  min-width: auto;
}

/* Activity Stats Bar */
.activity-stats-bar {
  display: flex;
  gap: var(--space-3xl);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--gray-light);
}

/* Shared Tab Styles */
.marketplace-tabs,
.activity-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--gray-light);
  padding-bottom: var(--space-sm);
}

.marketplace-tab,
.activity-tab {
  padding: var(--space-md) var(--space-xl);
  border: none;
  background: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--ink-2);
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: all var(--transition-fast);
  position: relative;
}
.marketplace-tab:hover,
.activity-tab:hover {
  color: var(--navy);
}
.marketplace-tab.active,
.activity-tab.active {
  color: var(--navy);
}
.marketplace-tab.active::after,
.activity-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pink);
}

/* Product/Framework Cards Grid */
.marketplace-grid,
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-2xl);
}

.library-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.framework-card {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-fast);
  cursor: pointer;
}
.framework-card:hover {
  border-color: var(--gray-mid);
  box-shadow: var(--shadow-md);
}

.framework-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-sm);
  color: var(--navy);
}

.framework-description {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

.framework-card {
  padding: var(--space-xl);
}

.framework-description {
  margin-bottom: var(--space-lg);
}

.framework-tag {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: var(--gray-background);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--gray-mid);
}

/* ============================================
   EMPTY STATES
   ============================================ */
.activity-empty,
.favorites-empty,
.studio-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4xl) var(--space-xl);
  text-align: center;
  color: var(--gray-mid);
}
.activity-empty svg,
.favorites-empty svg {
  margin-bottom: var(--space-xl);
  opacity: 0.5;
}
.activity-empty h3,
.favorites-empty h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--navy);
  margin-bottom: var(--space-sm);
}
.activity-empty p,
.favorites-empty p {
  font-size: var(--text-sm);
  margin-bottom: var(--space-xl);
}

.studio-empty {
  background: var(--gray-background);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  font-size: var(--text-sm);
}

.activity-cta,
.favorites-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.activity-cta:hover,
.favorites-cta:hover {
  background: var(--bg-hover-dark);
}

/* ============================================
   CREATOR STUDIO
   ============================================ */
.studio-intro,
.library-intro {
  margin-bottom: var(--space-2xl);
  color: var(--ink-2);
}

.library-intro {
  margin-bottom: var(--space-xl);
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-4xl);
}

.studio-card {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  transition: all var(--transition-fast);
}
.studio-card:hover {
  border-color: var(--gray-mid);
  box-shadow: var(--shadow-md);
}

.studio-card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-lg);
  color: var(--pink);
}
.studio-card-icon svg {
  width: 100%;
  height: 100%;
}

.studio-card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-sm);
}

.studio-card-description {
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin-bottom: var(--space-xl);
}

.studio-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.studio-card-cta:hover {
  background: var(--bg-hover-dark);
}

.studio-section {
  margin-top: var(--space-4xl);
}

.studio-section-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-xl);
}

/* ============================================
   ACCOUNT PAGE
   ============================================ */
.account-container {
  max-width: 640px;
  margin: 0 auto;
}

.account-header {
  margin-bottom: var(--space-2xl);
}

.account-header .page-title {
  margin-bottom: var(--space-sm);
}

.page-subtitle {
  color: var(--ink-2);
  font-size: var(--text-md);
}

.account-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--gray-mid);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

.account-section {
  margin-bottom: var(--space-2xl);
}

.account-activity {
  margin-bottom: var(--space-2xl);
}

.activity-stats {
  display: flex;
  gap: var(--space-3xl);
}

.activity-stat {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--navy);
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--gray-mid);
}

.account-card {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--gray-light);
}

.account-row:last-child {
  border-bottom: none;
}

.account-row-content {
  flex: 1;
}

.account-row-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--navy);
}

.account-row-value {
  font-size: var(--text-sm);
  color: var(--navy);
}

.account-row-value.secondary {
  color: var(--ink-2);
  font-size: var(--text-xs);
}

.account-row-action {
  background: none;
  border: none;
  color: var(--ink-2);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
}

.account-row-action:hover {
  color: var(--navy);
}

.account-edit-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--navy);
  background: var(--white);
  margin-bottom: var(--space-sm);
}

.account-edit-input:focus {
  outline: none;
  border-color: var(--pink);
}

.account-edit-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.account-save-btn {
  padding: 6px 16px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
}

.account-cancel-btn {
  padding: 6px 16px;
  background: none;
  color: var(--ink-2);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
}

.account-verified-badge {
  color: var(--pink);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.google-account-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.google-icon {
  flex-shrink: 0;
}

.subscription-card {
  padding: var(--space-xl);
}

.subscription-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-xl);
}

.plan-name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-md);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan-features li {
  font-size: var(--text-sm);
  color: var(--ink-2);
  padding: var(--space-xs) 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.plan-features li::before {
  content: "✓";
  color: var(--navy);
}

.subscription-price {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}

.subscription-actions {
  display: flex;
  gap: var(--space-md);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  
  .marketplace-header {
    flex-direction: column;
    align-items: stretch;
  }
  .marketplace-search {
    min-width: auto;
  }
  .marketplace-tabs,
  .activity-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   PLATFORM ADMIN
   ============================================ */
.platform-admin-link {
  background: var(--gray-background);
  font-weight: var(--font-semibold) !important;
  border-radius: var(--radius-sm);
}

.admin-container {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
}
/* v1.0 (May 2026, Task #97): Platform Admin opts into the unified
   shell gutter (80px/48px owned by .page-content). Zero the wrapper's
   own padding so the outer shell is the single source of truth.
   Partner admin (.admin-container without the modifier) intentionally
   keeps the legacy 24px L/R gutter. */
.admin-container--platform {
  padding: 0;
}

.admin-header {
  margin-bottom: var(--space-lg);
}

.admin-tabs {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--gray-light);
}

.admin-tab {
  padding: var(--space-md) var(--space-lg);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition-fast);
}

.admin-tab:hover {
  color: var(--navy);
}

.admin-tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

.tab-count {
  color: var(--gray-mid);
  font-weight: var(--font-normal);
  margin-left: -2px;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.admin-stat-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-xl-soft);
}

.admin-stat-card .stat-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--navy);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
  text-transform: none;
}

.admin-stat-card .stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--navy);
  margin-bottom: var(--space-sm);
}

.stat-change {
  font-size: var(--text-xs);
  color: var(--gray-mid);
}

.stat-change.positive {
  color: var(--positive);
}

.stat-change.negative {
  color: var(--negative);
}

.admin-panels {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.admin-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-xl-soft);
}

.admin-panel.full-width {
  grid-column: 1 / -1;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
}

.panel-header h3 {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
}

.panel-link {
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-decoration: none;
}

.panel-link:hover {
  color: var(--navy);
}

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 0;
}

.activity-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-icon svg {
  color: var(--gray-mid);
  width: 14px;
  height: 14px;
}

.activity-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.activity-text {
  font-size: 14px;
  font-weight: 300;
  color: var(--navy);
}

.activity-time {
  font-size: 14px;
  font-weight: 300;
  color: var(--gray-mid);
  white-space: nowrap;
  text-align: right;
}

.quick-stats {
  display: flex;
  flex-direction: column;
}

.quick-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-light);
}

.quick-stat-row:last-child {
  border-bottom: none;
}

.quick-stat-label {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-2);
}

.quick-stat-value {
  font-size: 14px;
  font-weight: 300;
  color: var(--navy);
}

/* Admin Toolbar */
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.toolbar-filters {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.search-input {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
}

.search-input input {
  border: none;
  background: none;
  outline: none;
  font-size: var(--text-sm);
  min-width: 150px;
}

.filter-select {
  padding: var(--space-sm) var(--space-md);
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.filter-select:focus {
  outline: none;
  border-color: var(--navy);
}

.filter-select-sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.results-count {
  font-size: var(--text-sm);
  color: var(--gray-mid);
}

.btn-primary {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: var(--font-medium);
  font-family: inherit;
  background: var(--navy);
  color: var(--white);
  border: 1px solid var(--navy);
  border-radius: var(--radius-full, 30px);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.btn-primary:hover {
  opacity: 0.85;
}
.btn-secondary {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: var(--font-medium);
  font-family: inherit;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-full, 30px);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.btn-secondary:hover {
  border-color: var(--navy);
}

.btn-secondary-sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-xs);
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Admin Table */
.admin-table-container {
  overflow-x: auto;
  margin-bottom: var(--space-xl);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  table-layout: auto;
}

.admin-table td:last-child,
.admin-table th:last-child {
  width: 44px;
  text-align: center;
}

.admin-table th {
  text-align: left;
  padding: var(--space-md) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--gray-mid);
  letter-spacing: 0.05em;
  border-bottom: 1.5px solid var(--navy);
  white-space: nowrap;
}

.admin-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.admin-table th.sortable:hover {
  color: var(--navy);
}

.sort-icon {
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.25;
}

.admin-table th.sortable:hover .sort-icon {
  opacity: 0.5;
}

.admin-table th.sortable.sort-asc .sort-icon .sort-up,
.admin-table th.sortable.sort-desc .sort-icon .sort-down {
  fill: var(--navy);
  opacity: 1;
}

.admin-table th.sortable.sort-asc .sort-icon,
.admin-table th.sortable.sort-desc .sort-icon {
  opacity: 1;
}

.admin-table td {
  padding: var(--space-md) var(--space-sm);
  border-bottom: 1px solid var(--gray-light);
  vertical-align: middle;
}

.admin-table .text-center {
  text-align: center;
}

.user-cell {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.user-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--white);
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--font-semibold);
  color: var(--navy);
  flex-shrink: 0;
}

.user-cell .user-name {
  font-weight: var(--font-medium);
  color: var(--navy);
}

.status-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.status-badge.active,
.status-badge.completed {
  color: var(--positive);
}

.status-badge.pending,
.status-badge.in_progress {
  color: var(--neutral);
}

.status-badge.failed,
.status-badge.inactive {
  color: var(--negative);
}

.status-badge.paid {
  color: var(--positive);
}

/* T3-E (May 2026): visible focus rings on the admin table's
   interactive cells. The previous default outline was suppressed by
   the browser's :focus-visible reset on dark backgrounds — this puts
   it back so keyboard users can see where they are. */
.admin-table th.sortable:focus-visible,
.admin-table .kebab-btn:focus-visible,
.admin-table .btn-icon:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}
.admin-table th.sortable {
  cursor: pointer;
}

/* T3-A (May 2026): bulk-select column visual treatment. The disabled
   row checkboxes (owner / self) get a muted look so admins know why
   they can't tick them. */
.admin-table .bulk-col {
  width: 36px;
  vertical-align: middle;
}
.admin-table .row-select { cursor: pointer; }
.admin-table .row-select:disabled { cursor: not-allowed; opacity: 0.4; }
.admin-table .row-open-link:hover { text-decoration: underline; }
.admin-table .row-open-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 3px;
}

/* T3-F (May 2026): responsive Members table. Below 900 px we hide
   non-essential columns; below 600 px each row collapses to a stacked
   card so the table still fits on a phone. The sticky bulk bar stays
   functional throughout. Column class names map to the data cells in
   templates/pages/app/admin/team.html. */
@media (max-width: 900px) {
  .admin-table .col-country,
  .admin-table .col-joined,
  .admin-table .col-allocation { display: none; }
}
@media (max-width: 600px) {
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr.team-row {
    border: 1px solid var(--gray-light);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--white);
  }
  .admin-table tr.team-row td { border: none; padding: 4px 0; text-align: left; }
  .admin-table tr.team-row td.bulk-col { position: absolute; right: 12px; padding-left: 0; }
  .admin-table .col-reports::before { content: "Reports: "; color: var(--gray-mid); font-size: 11px; }
  .admin-table .col-usage::before   { content: "Usage: ";   color: var(--gray-mid); font-size: 11px; }
  .admin-table .col-lastactive::before { content: "Last active: "; color: var(--gray-mid); font-size: 11px; }
  .admin-table .col-role::before { content: "Role: "; color: var(--gray-mid); font-size: 11px; }
}

/* T3-G (May 2026): undo toast layout. display:inline-flex is set in
   showUndoToast() rather than the stylesheet so the default hidden
   state can use display:none without a specificity fight. */
#undoToast button:hover { background: rgba(255,255,255,0.1); }
#undoToast button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* Bulk bar focus rings on dark background. */
#bulkBar select:focus,
#bulkBar button:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Tier 2-D (May 2026): "Invited" pill — visually distinct from the
   active/pending/inactive trio so the pending-invites section reads
   as a separate group of "people not yet in the team". Amber tone
   matches the section's #fffbeb header band. */
.status-badge.invited {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.action-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  color: var(--gray-mid);
}

.table-action {
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--text-xs);
  margin-right: var(--space-sm);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.table-action:hover {
  color: var(--navy);
}

.activity-actions {
  white-space: nowrap;
}

.action-retry {
  color: var(--primary);
}

.action-retry:hover {
  color: var(--primary-dark, var(--primary));
}

.action-delete {
  color: var(--error);
}

.action-delete:hover {
  color: var(--error-dark);
}

.status-badge.processing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--gray-light);
  border-top-color: var(--ink-2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.processing-hint {
  font-size: var(--text-xs);
  color: var(--gray-mid);
  font-weight: 300;
}

.action-log {
  color: var(--ink-2);
}

.error-log-row td {
  padding-top: 0 !important;
  padding-bottom: var(--space-md) !important;
  border-bottom: none !important;
}

.error-log {
  background: var(--gray-bg);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-md);
  margin-left: 0;
}

.error-log-header {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--ink-2);
  margin-bottom: var(--space-sm);
}

.retry-count {
  color: var(--gray-mid);
  font-weight: 300;
}

.error-log-body {
  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}

.activity-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity-user-name {
  color: var(--navy);
  text-decoration: none;
}

.activity-user-name:hover {
  text-decoration: underline;
}

.activity-user-email {
  color: var(--gray-mid);
}

.activity-detail-text {
  vertical-align: middle;
}

/*
  Activity table column layout — 11 columns:
  1 Time | 2 User | 3 Email | 4 Country | 5 Tier | 6 Event | 7 Detail | 8 IP | 9 Device | 10 Status | 11 Actions
  Switched from `table-layout: fixed` to `auto` because the legacy fixed
  layout only declared widths for cols 1–7 (designed for the old 7-col
  table), which left cols 8–11 to be squashed by the browser to single-
  character width. Column 6 (Event) and 7 (Detail) were also receiving
  widths that were intended for unrelated columns. Auto layout lets each
  cell size to its content; the per-cell rules below set sensible upper
  bounds where needed.
*/
.activity-table {
  table-layout: auto;
  width: 100%;
}

/* Activity log panel inside /platform/reports — controls row.
   Mirrors the look/feel of .factory-search-bar so the admin Tools
   read as a single design system, not a bag of native widgets. */
.activity-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.activity-select,
.activity-search {
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--navy);
  background: var(--white);
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  transition: border-color .12s, box-shadow .12s;
}

.activity-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b7280' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.activity-search {
  flex: 1;
  min-width: 240px;
}

.activity-select:focus,
.activity-search:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.activity-count {
  margin-left: auto;
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}

/* Pills + action emphasis inside the activity table. */
.activity-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.activity-pill-amber { background: #fef3c7; color: #92400e; }
.activity-pill-green { background: #dcfce7; color: #166534; }

.activity-action-danger  { color: #b91c1c; font-weight: 600; }
.activity-action-success { color: #166534; font-weight: 600; }

/* Activity table cells (used by the /platform/reports inline panel —
   distinct from the standalone /platform/activity table styled above). */
#activityTable { border-collapse: collapse; width: 100%; font-size: 13px; }
#activityTable thead th {
  text-align: left;
  font-weight: 600;
  color: #374151;
  background: var(--surface-cool-strong);
  border-bottom: 1px solid var(--gray-light);
  padding: 10px 8px;
}
#activityTable tbody tr { border-bottom: 1px solid var(--gray-white); }
#activityTable tbody tr:hover { background: var(--off-white); }
#activityTable tbody td { padding: 10px 8px; vertical-align: top; }
#activityTable .activity-when  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
#activityTable .activity-actor { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
#activityTable .activity-num   { text-align: center; color: #6b7280; }
#activityTable .activity-detail { color: var(--navy); word-break: break-word; }
#activityTable .activity-product {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--navy);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#activityTable .activity-lang {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.activity-table th:nth-child(1),
.activity-table td:nth-child(1) { width: 140px; white-space: nowrap; padding-right: var(--space-xl); }

.activity-table th:nth-child(2),
.activity-table td:nth-child(2) { white-space: nowrap; }

.activity-table th:nth-child(3),
.activity-table td:nth-child(3) { white-space: nowrap; }

.activity-table th:nth-child(4),
.activity-table td:nth-child(4) { width: 60px; text-align: center; }

.activity-table th:nth-child(5),
.activity-table td:nth-child(5) { width: 90px; }

.activity-table th:nth-child(6),
.activity-table td:nth-child(6) { white-space: nowrap; }

.activity-table th:nth-child(7),
.activity-table td:nth-child(7) { min-width: 220px; max-width: 320px; }

.activity-table th:nth-child(8),
.activity-table td:nth-child(8) { width: 110px; }

.activity-table th:nth-child(9),
.activity-table td:nth-child(9) { width: 110px; }

.activity-table th:nth-child(10),
.activity-table td:nth-child(10) { width: 80px; }

.activity-table th:nth-child(11),
.activity-table td:nth-child(11) { width: 40px; text-align: right; vertical-align: middle; }

.activity-email-cell {
  color: var(--gray-mid);
}

.activity-table td {
  font-size: 14px;
  font-weight: 300;
  vertical-align: middle;
  border-bottom: none;
  padding: 6px var(--space-lg);
}

.activity-table th {
  font-size: 14px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: normal;
  padding: 6px var(--space-lg);
}

.case-row {
  cursor: pointer;
}

.case-row:hover td {
  background: var(--gray-bg);
}

.support-case-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-2xl);
}

.case-header {
  margin-bottom: var(--space-2xl);
}

.case-back {
  font-size: 13px;
  font-weight: 400;
  color: var(--gray-mid);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}

.case-back:hover {
  color: var(--navy);
}

.case-title {
  font-size: 24px;
  font-weight: var(--font-semibold);
  margin: var(--space-md) 0 var(--space-xs);
  letter-spacing: -0.01em;
}

.case-meta {
  font-size: 13px;
  font-weight: 300;
  color: var(--gray-mid);
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.case-section-label {
  font-size: var(--text-xs, 11px);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-mid);
  margin-bottom: var(--space-md);
}

.case-report-info {
  background: var(--gray-bg);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.case-report-detail {
  font-size: 14px;
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.case-report-title {
  color: var(--gray-mid);
}

.case-timeline {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-xl);
}

.timeline-entries {
  margin-bottom: var(--space-lg);
}

.timeline-entry {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  position: relative;
}

.timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-mid);
  flex-shrink: 0;
  margin-top: 6px;
}

.action-status_change .timeline-dot,
.action-assignment .timeline-dot {
  background: var(--primary);
}

.action-pickup .timeline-dot {
  background: var(--navy);
}

.action-action .timeline-dot {
  background: var(--primary);
}

.timeline-content {
  flex: 1;
}

.timeline-header {
  font-size: 14px;
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.timeline-author {
  font-weight: var(--font-medium);
}

.timeline-action {
  font-size: 11px;
  color: var(--gray-mid);
  background: var(--gray-bg);
  padding: 1px 6px;
  border-radius: 3px;
}

.timeline-time {
  color: var(--gray-mid);
  margin-left: auto;
}

.timeline-text {
  font-size: 14px;
  font-weight: 300;
  margin-top: 2px;
  line-height: 1.5;
}

.note-form {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-light);
}

.note-textarea {
  width: 100%;
  font-size: 14px;
  font-weight: 300;
  font-family: inherit;
  color: var(--navy);
  background: var(--off-white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.note-textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--white);
}

.note-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-sm);
}

.support-case-sidebar {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-xl);
  height: fit-content;
  position: sticky;
  top: var(--space-xl);
}

.sidebar-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--gray-light);
}

.sidebar-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.sidebar-section .filter-select {
  width: 100%;
}

.sidebar-user {
  font-size: 14px;
  font-weight: 300;
}

.sidebar-user-name {
  color: var(--navy);
  text-decoration: none;
  font-weight: var(--font-medium);
}

.sidebar-user-name:hover {
  text-decoration: underline;
}

.sidebar-user-email {
  color: var(--gray-mid);
  margin-top: 2px;
}

.sidebar-user-tier {
  color: var(--gray-mid);
  margin-top: 2px;
}

.support-table {
  table-layout: fixed;
  width: 100%;
}

.support-table td,
.support-table th {
  font-size: 14px;
  font-weight: 300;
  vertical-align: middle;
  padding: var(--space-md) var(--space-lg);
}

.support-table td {
  border-bottom: 1px solid var(--gray-light);
}

.support-table th {
  text-transform: none;
  letter-spacing: normal;
  border-bottom: 1.5px solid var(--navy);
}

.support-table th:nth-child(1),
.support-table td:nth-child(1) { width: 60px; }

.support-table th:nth-child(2),
.support-table td:nth-child(2) { width: 12%; }

.support-table th:nth-child(3),
.support-table td:nth-child(3) { }

.support-table th:nth-child(4),
.support-table td:nth-child(4) { }

.support-table th:nth-child(5),
.support-table td:nth-child(5) { width: 12%; }

.support-table th:nth-child(6),
.support-table td:nth-child(6) { width: 120px; }

.support-table th:nth-child(7),
.support-table td:nth-child(7) { width: 130px; white-space: nowrap; }

.support-table th:nth-child(8),
.support-table td:nth-child(8) { width: 50px; text-align: center; }

.support-table th:nth-child(9),
.support-table td:nth-child(9) { width: 40px; text-align: center; }

.support-email-cell {
  color: var(--gray-mid);
}

.products-table {
  table-layout: auto;
  width: 100%;
  min-width: 900px;
}

.products-table td,
.products-table th {
  font-size: 14px;
  font-weight: 300;
  vertical-align: middle;
  padding: var(--space-md) var(--space-lg);
  overflow: hidden;
  text-overflow: ellipsis;
}

.products-table td {
  border-bottom: 1px solid var(--gray-light);
}

.products-table th {
  text-transform: none;
  letter-spacing: normal;
  border-bottom: 1.5px solid var(--navy);
}

.products-table td,
.products-table th {
  white-space: nowrap;
}

.product-type-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-mid);
}

.product-detail-section {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.product-detail-section:last-child {
  margin-bottom: 0;
}

.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.product-detail-field {
  margin-bottom: var(--space-md);
}

.product-detail-field label {
  display: block;
  font-size: var(--text-xs, 11px);
  font-weight: var(--font-semibold);
  color: var(--gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.product-detail-value {
  font-size: 14px;
  font-weight: 300;
  color: var(--navy);
  line-height: 1.5;
}

.product-expect-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-expect-list li {
  font-size: 14px;
  font-weight: 300;
  color: var(--navy);
  padding: 4px 0;
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}

.product-expect-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--gray-mid);
  font-weight: bold;
}

.product-fields-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-field-item {
  display: flex;
  gap: var(--space-lg);
  font-size: 14px;
  font-weight: 300;
  padding: 4px 0;
}

.product-field-key {
  font-family: monospace;
  font-size: 13px;
  color: var(--gray-mid);
  min-width: 180px;
}

.product-field-label {
  color: var(--navy);
}

.product-edit-input,
.product-edit-textarea {
  width: 100%;
  font-size: 14px;
  font-weight: 300;
  font-family: inherit;
  color: var(--navy);
  background: var(--off-white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
  line-height: 1.5;
  transition: border-color 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
}

.product-edit-input:focus,
.product-edit-textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--white);
}

.product-edit-textarea {
  resize: vertical;
  min-height: 70px;
}

.product-save-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: var(--font-medium);
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-full, 30px);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.product-save-btn:hover {
  opacity: 0.85;
}

.product-save-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.action-pickup-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-family: inherit;
  font-weight: 300;
}

.action-pickup-btn:hover {
  color: var(--navy);
}

.action-pickup-btn svg {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

.case-status-icon {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  vertical-align: middle;
}

.case-status-icon svg {
  vertical-align: middle;
}

.case-status-icon.case-active {
  color: var(--yellow);
}

.case-status-icon.case-active:hover {
  color: var(--navy);
}

.case-status-icon.case-resolved {
  color: var(--success);
}

.case-status-icon.case-resolved:hover {
  color: var(--navy);
}

.event-name {
  font-weight: var(--font-medium);
}

.event-detail {
  font-size: var(--text-xs);
  color: var(--gray-mid);
}

.empty-state {
  text-align: center;
  padding: var(--space-3xl) !important;
  color: var(--gray-mid);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
}

.page-btn {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}

.page-btn.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-dots {
  color: var(--gray-mid);
}

/* Billing Panels */
.billing-panels {
  grid-template-columns: 1fr 1fr;
}

.simple-table {
  width: 100%;
  font-size: var(--text-sm);
}

.simple-table th {
  text-align: left;
  padding: var(--space-sm) 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--gray-mid);
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--gray-light);
}

.simple-table td {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--gray-light);
}

.simple-table tr:last-child td {
  border-bottom: none;
}

.panel-filters {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

/* Settings */
.settings-section {
  margin-bottom: var(--space-2xl);
}

.settings-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--gray-mid);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

.settings-card {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--gray-light);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row-content {
  flex: 1;
}

.settings-row-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--navy);
}

.settings-row-desc {
  font-size: var(--text-xs);
  color: var(--gray-mid);
}

.settings-input {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  min-width: 200px;
  text-align: right;
}

.settings-input-sm {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  width: 60px;
  text-align: center;
}

.api-key-display {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.api-key-masked {
  font-family: monospace;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
}

.api-status {
  font-size: var(--text-xs);
}

.api-status.active {
  color: var(--positive);
}

/* Admin Modal chrome (.admin-modal*) was deleted May 9 2026 — those
   modals now wear canonical Tier B chrome from work.css
   (.mw-modal-overlay > .mw-modal-card). The generic .modal-close
   helper below is kept; it is still referenced by other surfaces. */
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--ink-2);
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: var(--navy);
}


.form-group {
  margin-bottom: var(--space-md);
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--ink-2);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.form-input,
.form-select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  transition: border-color 0.15s;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--pink);
}

.form-input.readonly {
  background: var(--gray-background);
  color: var(--ink-2);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--pink);
}

.checkbox-text {
  font-weight: 500;
}

.form-help {
  font-size: var(--text-xs);
  color: var(--gray-mid);
  margin-top: var(--space-xs);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s;
}

.btn-icon:hover {
  background: var(--gray-background);
}

.btn-icon-danger:hover {
  background: var(--negative-light);
  color: var(--negative);
}

.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tier badges */
.tier-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
}

.tier-badge.tier-free {
  background: var(--gray-light);
  color: #374151;
}

.tier-badge.tier-individual {
  background: #dbeafe;
  color: #1D4ED8;
}

.tier-badge.tier-professional {
  background: #f3e8ff;
  color: #7C3AED;
}

.tier-badge.tier-unlimited {
  background: #FEF3C7;
  color: var(--neutral);
}

/* Admin badge */
.admin-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #FEE2E2;
  color: var(--negative);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}

.admin-badge.inactive {
  background: transparent;
  color: var(--gray-mid);
}

/* Admin Responsive */
@media (max-width: 1024px) {
  .admin-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .admin-panels {
    grid-template-columns: 1fr;
  }
  .billing-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .toolbar-filters {
    flex-direction: column;
  }
  .admin-tabs {
    overflow-x: auto;
  }
}

/* ============================================
   USER ADMIN STYLES
   Organization management interface
   ============================================ */

.user-admin {
  /* v1.3 (May 2026, Christine): match Platform Admin's full-width
     container — prior `margin: 0 500px` squeezed these pages into a
     narrow column on wide viewports. Edge-to-edge behaviour (zero
     side gutter on desktop + matching .page-content override) is
     opt-in via the .user-admin--fullbleed modifier below, so call
     sites that still want a 24px breathing-room gutter (marketing)
     keep it. */
  padding: 50px 24px;
  margin: 0;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

/* v1.4 (May 2026, Christine): full-bleed modifier for My Team /
   My Programs / their workspace siblings. Drops the wrapper's own
   24px side gutter on desktop; the paired .page-content:has()
   rule below also drops the global 48px shell gutter so the page
   truly hugs the viewport edge, matching Platform Admin's look.
   Mobile keeps the .user-admin var(--space-lg) thumb gutter via
   the @media block further down (edge-to-edge feels cramped on
   phones). Marketing intentionally NOT migrated — it still uses
   the base .user-admin rule with the 24px breathing-room gutter. */
.user-admin--fullbleed {
  /* v1.5 (May 2026): zero all padding — the unified
     .page-content:has(> .user-admin--fullbleed) shell rule near the
     top of this file now owns the 80px/48px gutter. Base .user-admin
     (marketing) is intentionally untouched. */
  padding: 0;
}

.user-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-xl);
}

.user-admin-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px 0;
}

.user-admin-subtitle {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
}

/* Workspace admin tabs — mirrors the /work mega-trigger styling
   (work.css L791-813) so the workspace inner-nav reads like a
   listing-page filter bar rather than a second navbar. */
.user-admin-tabs {
  display: flex;
  gap: 28px;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 0;
}

/* Match the /work FILES/PROJECTS tab look (work.css L791-813) so the
   workspace tab strip is visually consistent with the rest of the app:
   small caps, gap 28px, weight 500 (700 active), 0.06em letter-spacing,
   inactive in --text-secondary, active gets a 2px underline. */
.user-admin-tab {
  position: relative;
  padding: 10px 0;
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  border: 0;
  transition: color 0.15s ease;
}

.user-admin-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: transparent;
}

.user-admin-tab:hover {
  color: var(--text-primary);
}

.user-admin-tab.active {
  color: var(--text-primary);
  font-weight: 700;
}

.user-admin-tab.active::after {
  background: var(--text-primary);
}

.tab-count {
  background: var(--gray-background);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  margin-left: 4px;
}

/* Start Page */
.user-admin-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

.start-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 8px 0;
}

.start-subtitle {
  font-size: 18px;
  color: var(--ink-2);
  margin: 0 0 40px 0;
}

.start-form {
  width: 100%;
  max-width: 480px;
}

.start-input, .start-select {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--gray-light);
  border-radius: 40px;
  font-size: 16px;
  margin-bottom: 12px;
  background: white;
}

.start-form-row {
  display: flex;
  gap: 12px;
}

.start-form-row .start-select {
  flex: 1;
}

.start-button {
  padding: 16px 32px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.start-footer {
  margin-top: 32px;
  font-size: 14px;
  color: var(--ink-2);
}

.start-link {
  color: var(--pink);
  text-decoration: none;
}

.enterprise-info {
  margin: 32px 0;
  padding: 24px 32px;
  background: var(--background-secondary);
  border-radius: 12px;
  text-align: left;
  max-width: 480px;
}

.enterprise-info p {
  margin: 0 0 16px 0;
  color: var(--ink-2);
}

.enterprise-features {
  margin: 0;
  padding-left: 20px;
  color: var(--navy);
}

.enterprise-features li {
  margin-bottom: 8px;
}

.white-label-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  text-align: center;
  color: var(--ink-2);
}

.white-label-locked svg {
  margin-bottom: 16px;
  color: var(--gray-mid);
}

.white-label-locked p {
  margin: 0 0 8px 0;
}

.white-label-locked .hint {
  font-size: 14px;
  color: var(--gray-mid);
}

.white-label-locked a {
  color: var(--pink);
}

/* Stats Row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.stat-card {
  background: white;
  border: none;
  border-radius: 12px;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--navy);
}

.stat-change {
  font-size: 12px;
  margin-top: 8px;
}

.stat-change.positive { color: var(--positive); }
.stat-change.negative { color: var(--negative); }

.stat-subtext {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 4px;
}

/* Dashboard Panels */
.dashboard-panels {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-xl);
}

.activity-panel, .status-panel {
  background: white;
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  padding: var(--space-xl);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.panel-header h3, .panel-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.view-all-link {
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}


/* Status Panel */
.status-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.status-label {
  color: var(--ink-2);
}

.status-value {
  font-weight: 500;
  color: var(--navy);
}

.status-value.green { color: var(--positive); }
.status-value.orange { color: var(--neutral); }

/* Team Avatars */
.team-avatars {
  display: flex;
  align-items: center;
  gap: -8px;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.team-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gray-background);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  margin-right: -8px;
  border: 2px solid white;
}

.team-avatar.more {
  background: var(--navy);
  color: white;
}

.manage-team-link {
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  margin-left: 16px;
}

/* Team Page */
.team-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.seats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl);
  background: var(--gray-background);
  border-radius: 12px;
}

.seats-info {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.seats-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.5px;
}

.seats-value {
  font-size: 24px;
  font-weight: 700;
}

.seats-percent {
  font-size: 13px;
  color: var(--ink-2);
}

.seats-progress {
  width: 120px;
  height: 6px;
  background: var(--gray-light);
  border-radius: 3px;
  overflow: hidden;
}

.seats-progress-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 3px;
}

.team-filters {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  flex: 1;
  max-width: 300px;
}

.search-box svg {
  width: 16px;
  height: 16px;
  color: var(--ink-2);
}

.search-box input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

.team-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-2);
}

/* Team Table */
.team-table {
  background: white;
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  overflow: hidden;
}

.team-table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 48px;
  padding: var(--space-md) var(--space-lg);
  background: var(--gray-background);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.5px;
}

.team-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 48px;
  padding: var(--space-lg);
  align-items: center;
  border-top: 1px solid var(--gray-light);
}

.team-row:first-child {
  border-top: none;
}

/* v1.3 (May 2026, Christine): the team page was rebuilt as a real
   <table> for proper column alignment, but the rows still need the
   .team-row class so admin-team.js's filterTeam() can find them. The
   legacy grid rules above only apply to the old div-based layout —
   when the row is an actual <tr>, restore native table-row behaviour
   so the colgroup widths in templates/pages/app/admin/team.html win
   over the grid template. The matching media-query reset for narrow
   viewports lives near the bottom of this file. */
tr.team-row {
  display: table-row;
  grid-template-columns: none;
  padding: 0;
  align-items: initial;
}

.col-member {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

.member-avatar.small {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.member-info {
  display: flex;
  flex-direction: column;
}

.member-name {
  font-size: 14px;
  font-weight: 500;
}

.member-email {
  font-size: 12px;
  color: var(--ink-2);
}

.action-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  background: var(--gray-background);
}

.action-btn svg {
  width: 20px;
  height: 20px;
  color: var(--ink-2);
}

/* Team Pagination */
.team-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-info {
  font-size: 13px;
  color: var(--ink-2);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--gray-light);
  border-radius: 6px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--navy);
}

.pagination-current {
  width: 32px;
  height: 32px;
  background: var(--navy);
  color: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
}

/* ── Projects Admin Tab ───────────────────────── */
.projects-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.projects-count {
  font-size: var(--font-size-sm);
  color: var(--gray-mid);
  margin: 0;
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.projects-empty {
  text-align: center;
  padding: var(--space-12) 0;
  color: var(--gray-mid);
  font-size: var(--font-size-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.project-card {
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: visible;
}

.project-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  transition: background 0.15s;
  overflow: visible;
}

.project-card-header:hover {
  background: var(--gray-background);
}

.project-card-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--navy);
  margin-bottom: 4px;
}

.project-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--gray-mid);
}

.project-badge {
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--gray-background);
  color: var(--ink-2);
}

.project-chevron {
  color: var(--gray-mid);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.project-card-body {
  border-top: 1px solid var(--gray-light);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.project-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.project-section-header {
  display: flex;
  align-items: center;
}

.project-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--navy);
  flex: 1;
}

.project-section-desc {
  font-size: var(--font-size-xs);
  color: var(--gray-mid);
  margin: 0;
  line-height: 1.6;
}

.project-members-list {
  display: flex;
  flex-direction: column;
}

.project-member-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--gray-light);
}

.project-member-row:last-child {
  border-bottom: none;
}

.project-member-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--gray-background);
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.project-member-info {
  flex: 1;
  min-width: 0;
}

.project-member-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--navy);
}

.project-member-email {
  font-size: var(--font-size-xs);
  color: var(--gray-mid);
}

.project-member-role-badge {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--gray-background);
  color: var(--gray-mid);
  flex-shrink: 0;
}

.project-member-role-badge.admin,
.project-member-role-badge.owner {
  background: rgba(255, 0, 170, 0.08);
  color: var(--pink);
}

.project-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-mid);
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  transition: color 0.15s;
  flex-shrink: 0;
}

.project-remove-btn:hover {
  color: var(--negative);
}

.project-add-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.project-member-select {
  flex: 1;
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--navy);
  background: var(--white);
  outline: none;
  transition: border-color 0.15s;
}

.project-member-select:focus {
  border-color: var(--pink);
}

.project-add-btn {
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.project-add-btn:hover {
  opacity: 0.8;
}

.project-add-note {
  font-size: var(--font-size-xs);
  color: var(--gray-mid);
  margin: 0;
  line-height: 1.5;
}

.project-add-error {
  font-size: var(--font-size-xs);
  color: var(--negative);
  white-space: nowrap;
}

.project-docs-list {
  display: flex;
  flex-direction: column;
}

.project-doc-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--gray-light);
  font-size: var(--font-size-sm);
  color: var(--ink-2);
}

.project-doc-row:last-child {
  border-bottom: none;
}

.project-doc-name {
  flex: 1;
  color: var(--navy);
  font-size: var(--font-size-sm);
}

.project-doc-date {
  font-size: var(--font-size-xs);
  color: var(--gray-mid);
  white-space: nowrap;
}

.project-doc-input {
  display: none;
}

.project-upload-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--ink-2);
  border: 1px dashed var(--gray-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  align-self: flex-start;
  margin-top: var(--space-1);
}

.project-upload-trigger:hover {
  border-color: var(--pink);
  color: var(--pink);
}

.project-upload-status {
  font-size: var(--font-size-xs);
  min-height: 16px;
  margin-top: var(--space-1);
}

.project-empty-note {
  font-size: var(--font-size-sm);
  color: var(--gray-mid);
  margin: var(--space-2) 0;
}

.admin-cancel-btn {
  background: none;
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s;
}

.admin-cancel-btn:hover {
  background: var(--gray-background);
}

.project-action-btn {
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.project-action-btn:hover {
  opacity: 0.8;
}

.project-action-btn.danger {
  background: var(--negative);
}

.project-cancel-btn {
  background: none;
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s;
}

.project-cancel-btn:hover {
  background: var(--gray-background);
}

.project-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-mid);
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.project-modal-close:hover {
  color: var(--navy);
}

.project-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.project-form-group:last-child {
  margin-bottom: 0;
}

.project-form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--navy);
}

.project-form-input {
  width: 100%;
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--navy);
  background: var(--white);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.project-form-input:focus {
  border-color: var(--pink);
}

.project-kebab-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-mid);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}

.project-kebab-btn:hover {
  color: var(--navy);
  background: var(--gray-background);
}

.project-card-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.project-card-actions {
  position: relative;
  margin-right: var(--space-2);
}

.project-kebab-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-width: 160px;
  z-index: 300;
  overflow: visible;
}

.project-kebab-menu.open {
  display: block;
}

.project-kebab-option {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  text-align: left;
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s;
}

.project-kebab-option:hover {
  background: var(--gray-background);
}

.project-kebab-option.delete {
  color: var(--negative);
}

.project-kebab-option.delete:hover {
  background: var(--negative-bg);
}

.project-confirm-text {
  font-size: var(--font-size-sm);
  color: var(--navy);
  margin: 0 0 var(--space-2) 0;
}

.project-confirm-sub {
  font-size: var(--font-size-xs);
  color: var(--gray-mid);
  margin: 0;
  line-height: 1.6;
}

.project-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  z-index: 2000;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Usage & Billing */
.billing-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.current-plan-section h3,
.usage-section h3,
.billing-section h3,
.payment-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 var(--space-lg) 0;
}

.plan-card {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-xl);
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  background: white;
}

.plan-badge {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.plan-badge.free { background: var(--gray-background); color: #374151; }
.plan-badge.individual { background: #dbeafe; color: #1D4ED8; }
.plan-badge.professional { background: #FFE4F4; color: var(--cyan); }
.plan-badge.unlimited { background: var(--navy); color: white; }

.plan-details {
  flex: 1;
}

.plan-name {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.plan-features {
  font-size: 13px;
  color: var(--ink-2);
}

.plan-price {
  text-align: right;
}

.price-amount {
  font-size: 28px;
  font-weight: 700;
}

.price-period {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
}

/* Section Header */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.section-header h3 {
  margin: 0;
}

/* Usage Table */
.usage-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.usage-period {
  font-size: 14px;
  color: var(--ink-2);
}

.usage-tab-group {
  display: flex;
  gap: 4px;
}

.usage-tab {
  padding: 6px 12px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 6px;
}

.usage-tab.active {
  background: var(--gray-background);
  color: var(--navy);
  font-weight: 500;
}

.usage-table {
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  overflow: hidden;
}

.usage-table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 1fr;
  padding: var(--space-md) var(--space-lg);
  background: var(--gray-background);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.5px;
}

.usage-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 1fr;
  padding: var(--space-lg);
  align-items: center;
  border-top: 1px solid var(--gray-light);
}

.product-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--gray-background);
  border-radius: 12px;
  font-size: 12px;
}

/* Billing — 3-tile variant for /admin/usage Tier-1 redesign. The
   default .stats-row is a 4-col grid; admins now see Plan / Credits-
   used / Top-ups so we explicitly pin to 3 columns when the row uses
   this modifier. Tokens come from the design-system block; never
   hardcode. */
.stats-row.stats-row-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .stats-row.stats-row-3 { grid-template-columns: 1fr; }
}

/* Cost-attribution breakdown panel — used on /admin/usage. Each row
   is a 3-col grid (label / people / credits); subrows indent and
   drop to a muted weight; total row gets a top divider. All colours
   pull from the design-system tokens defined in
   static/css/tokens/colors.css. */
.breakdown-panel {
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}

.breakdown-row {
  display: grid;
  grid-template-columns: 1fr 100px 140px;
  gap: var(--space-md);
  padding: 14px var(--space-lg);
  align-items: center;
  border-top: 1px solid var(--gray-light);
  font-size: 14px;
}
.breakdown-row:first-child { border-top: none; }

.breakdown-head {
  background: var(--gray-background);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.breakdown-row .bd-people,
.breakdown-row .bd-credits {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.breakdown-row .bd-sub {
  display: block;
  font-size: 12px;
  color: var(--gray-mid);
  font-weight: 400;
  margin-top: 2px;
}

.breakdown-row .bd-role {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 11px;
  background: var(--gray-background);
  color: var(--ink-2);
  border-radius: 10px;
}

.breakdown-subrow {
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--off-white);
  font-size: 13px;
  color: var(--ink-2);
  border-top: 1px dashed var(--gray-light);
}

.breakdown-more {
  font-style: italic;
  color: var(--gray-mid);
}

.breakdown-empty,
.breakdown-empty-state {
  color: var(--gray-mid);
  font-style: italic;
}

.breakdown-empty-state {
  display: block;
  padding: var(--space-xl);
  text-align: center;
}

.breakdown-total {
  background: var(--gray-background);
  font-size: 15px;
}

/* Spend-over-time chart (Tier 2). Pure SVG bars, scale via the
   `vector-effect:non-scaling-stroke`-friendly viewBox and
   preserveAspectRatio=none so a single 1000-unit-wide drawing fills
   any container width. Tooltips use the native <title> tag (no JS). */
.spend-chart-wrap {
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  background: var(--white);
  padding: var(--space-lg);
}

.spend-chart {
  display: block;
  width: 100%;
  height: 220px;
}

.spend-chart rect {
  transition: opacity .15s ease;
}
.spend-chart rect:hover {
  opacity: 0.78;
  cursor: default;
}

.spend-chart-empty {
  padding: var(--space-xl);
  text-align: center;
  color: var(--gray-mid);
  font-style: italic;
  font-size: 14px;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--gray-light);
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
}

.chart-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.chart-meta {
  font-size: 13px;
  color: var(--gray-mid);
  font-variant-numeric: tabular-nums;
}

/* Inline invoice list (Tier 3). 5-col grid: date · number · amount ·
   status · actions. Status colors reuse the existing billing-status
   tokens to stay visually consistent with everything else on the
   page. */
.invoice-list {
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}

.invoice-row {
  display: grid;
  grid-template-columns: 130px 1fr 120px 110px 160px;
  gap: var(--space-md);
  padding: 12px var(--space-lg);
  align-items: center;
  border-top: 1px solid var(--gray-light);
  font-size: 14px;
}
.invoice-row:first-child { border-top: none; }

.invoice-head {
  background: var(--gray-background);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.inv-amount { font-variant-numeric: tabular-nums; }
.inv-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.inv-actions .btn-sm {
  padding: 4px 12px;
  font-size: 12px;
}

.invoice-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}
.invoice-status-paid {
  background: var(--positive-bg);
  color: var(--positive);
}
.invoice-status-open,
.invoice-status-draft {
  background: var(--off-white);
  color: var(--navy);
}
.invoice-status-uncollectible,
.invoice-status-void {
  background: var(--gray-white);
  color: var(--gray-mid);
}
.invoice-status-deleted,
.invoice-status-unknown {
  background: var(--gray-background);
  color: var(--ink-2);
}

.invoice-empty {
  padding: var(--space-xl);
  text-align: center;
  border: 1px dashed var(--gray-light);
  border-radius: 12px;
  font-size: 14px;
}

.usage-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.usage-pager-label {
  font-size: 13px;
  color: var(--ink-2);
}
.usage-pager .btn.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Billing Table */
.billing-table {
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  overflow: hidden;
}

.billing-row {
  display: grid;
  grid-template-columns: 120px 2fr 100px 80px 48px;
  padding: var(--space-lg);
  align-items: center;
  border-top: 1px solid var(--gray-light);
}

.billing-row:first-child {
  border-top: none;
}

.billing-date {
  font-size: 14px;
  color: var(--ink-2);
}

.billing-desc {
  font-size: 14px;
}

.billing-amount {
  font-size: 14px;
  font-weight: 500;
}

.billing-status {
  font-size: 12px;
}

.billing-status.paid { color: var(--positive); }
.billing-status.pending { color: var(--neutral); }
.billing-status.failed { color: var(--negative); }

/* Payment Method */
.payment-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--gray-light);
  border-radius: 12px;
}

.card-brand {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.card-brand.visa { background: #1A1F71; }
.card-brand.mastercard { background: #EB001B; }
.card-brand.amex { background: #006FCF; }

.card-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-number {
  font-size: 14px;
  font-weight: 500;
}

.card-expiry {
  font-size: 12px;
  color: var(--ink-2);
}

.no-payment {
  font-size: 14px;
  color: var(--ink-2);
  padding: var(--space-lg);
  border: 1px dashed var(--gray-light);
  border-radius: 12px;
}

.no-payment a {
  color: var(--pink);
}

/* Mini Progress */
.mini-progress {
  height: 4px;
  background: var(--gray-light);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.mini-progress-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 2px;
}

/* Branding Page */
.branding-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.branding-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.5px;
  margin: 0;
}

.branding-card {
  padding: var(--space-xl);
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  background: white;
}

.branding-row {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--gray-light);
}

.branding-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.branding-row:first-child {
  padding-top: 0;
}

.branding-field {
  flex: 1;
}

.field-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.field-hint {
  font-size: 12px;
  color: var(--ink-2);
}

.logo-upload {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.logo-preview {
  height: 40px;
  max-width: 160px;
  object-fit: contain;
}

.logo-placeholder {
  padding: 10px 20px;
  background: var(--gray-background);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
}

.logo-size {
  font-size: 11px;
  color: var(--ink-2);
}

.branding-input, .branding-select {
  width: 280px;
  padding: 10px 14px;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  font-size: 14px;
}

/* Color Picker */
.color-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-picker input[type="color"] {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}

.color-hex {
  width: 90px;
  padding: 8px 12px;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  font-size: 13px;
  font-family: monospace;
}

/* Gradient Row */
.gradient-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.gradient-inputs {
  display: flex;
  gap: var(--space-xl);
}

.gradient-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gradient-input-group label {
  font-size: 12px;
  color: var(--ink-2);
}

/* Preview Row */
.preview-row {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.cover-previews {
  display: flex;
  gap: var(--space-lg);
}

.cover-preview {
  width: 200px;
  height: 260px;
  border-radius: 12px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  color: white;
}

.preview-logo {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: auto;
}

.preview-logo img {
  height: 24px;
  filter: brightness(0) invert(1);
}

.preview-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.preview-subtitle, .preview-date, .preview-meta {
  font-size: 11px;
  opacity: 0.8;
}

/* Toggle Rows */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--gray-light);
}

.toggle-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.toggle-row:first-child {
  padding-top: 0;
}

.toggle-field {
  flex: 1;
}

/* App Preview */
.app-preview-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.preview-tab {
  padding: 8px 16px;
  border: 1px solid var(--gray-light);
  background: white;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.preview-tab.active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

.app-preview {
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  overflow: hidden;
}

.browser-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--gray-background);
  border-bottom: 1px solid var(--gray-light);
}

.browser-dots {
  display: flex;
  gap: 6px;
}

.browser-dots span {
  width: 10px;
  height: 10px;
  background: var(--gray-light);
  border-radius: 50%;
}

.browser-url {
  flex: 1;
  padding: 6px 12px;
  background: white;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-2);
}

.preview-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: white;
}

.preview-nav-logo {
  height: 28px;
}

.preview-nav-logo-text {
  font-size: 18px;
  font-weight: 700;
}

.preview-cta {
  padding: 8px 20px;
  border: none;
  border-radius: 20px;
  color: white;
  font-size: 13px;
  font-weight: 500;
}

/* Settings Page */
.settings-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.settings-card {
  padding: var(--space-xl);
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  background: white;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--gray-light);
}

.settings-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-row:first-child {
  padding-top: 0;
}

.settings-field {
  flex: 1;
}

.settings-input, .settings-select {
  width: 280px;
  padding: 10px 14px;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  font-size: 14px;
}

/* Admin Rows */
.admin-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--gray-light);
}

.admin-row:last-child {
  border-bottom: none;
}

.admin-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.admin-info {
  flex: 1;
}

.admin-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.admin-email {
  font-size: 12px;
  color: var(--ink-2);
}

.admin-badges {
  display: flex;
  gap: 8px;
}

.admin-badge {
  padding: 4px 10px;
  background: var(--gray-background);
  border-radius: 12px;
  font-size: 12px;
}

.admin-badge.owner {
  background: #FFE4F4;
  color: var(--pink);
}

.add-admin-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: var(--space-lg);
  border: 1px dashed var(--gray-light);
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  margin-top: var(--space-lg);
}

.add-admin-btn:hover {
  background: var(--gray-background);
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
}

/* ============================================
   Settings — Tier 1 polish (May 2026)
   Sub-nav rail, auto-save toast, workspace-ID
   copy button, avatar tone palette, inactive
   admin treatment.
   ============================================ */

/* Two-column shell: vertical sub-nav rail + content. */
.settings-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: var(--space-xl);
}

.settings-nav-item {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s;
}

.settings-nav-item:hover {
  background: var(--gray-background);
  color: var(--navy);
}

.settings-nav-item.active {
  background: var(--gray-background);
  color: var(--navy);
  font-weight: 600;
  border-left-color: var(--pink);
}

.settings-intro {
  font-size: 13px;
  color: var(--gray-mid);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
}

/* Workspace-ID field: input + copy button sit on one line. */
.workspace-id-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

.workspace-id-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--gray-background);
  color: var(--ink-2);
}

.copy-btn {
  padding: 8px 14px;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  background: white;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.copy-btn:hover { background: var(--gray-background); color: var(--navy); }
.copy-btn--copied {
  background: var(--pink);
  color: white;
  border-color: var(--pink);
}

/* Auto-save toast — same visual language as the Members undo
   toast for consistency. Hidden by default; .settings-toast--visible
   slides it in. */
.settings-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--navy);
  color: white;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 9999;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.settings-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.settings-toast--error {
  background: #b91c1c;
}

/* Avatar tone palette — replaces the four inline hex literals
   (#FFB6C1, #ADD8E6, #90EE90, #DDA0DD) that violated the
   brand-token convention. Soft pastels keyed off the brand
   pinks/blues so they coexist with --pink. */
.avatar-tone-1 { background: #fce7f3; color: #9d174d; }  /* soft pink */
.avatar-tone-2 { background: #dbeafe; color: #1e3a8a; }  /* soft blue */
.avatar-tone-3 { background: #dcfce7; color: #14532d; }  /* soft green */
.avatar-tone-4 { background: #ede9fe; color: #4c1d95; }  /* soft violet */

/* Inactive admin row — muted, with an explicit badge. */
.admin-row--inactive {
  opacity: 0.65;
}

.admin-badge.inactive {
  background: var(--gray-background);
  color: var(--gray-mid);
}

.manage-admins-link {
  display: inline-block;
  margin-top: var(--space-lg);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--pink);
  text-decoration: none;
  border-radius: 8px;
  border: 1px dashed var(--gray-light);
  transition: background 0.15s;
}

.manage-admins-link:hover {
  background: var(--gray-background);
}

/* ─── Tier 2 (May 2026) — Branding · Policy · Notifications · Audit · Cmd-K ─── */

/* Logo uploader — square preview tile + actions stacked to the right. */
.logo-uploader {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.logo-preview {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: var(--gray-background);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--gray-light);
}
.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
}
.logo-preview--empty { background: var(--gray-background); }
.logo-preview-placeholder {
  font-size: 28px;
  font-weight: 600;
  color: var(--gray-mid);
}
.logo-actions {
  display: flex;
  gap: 8px;
}
/* The <label> we use as an upload trigger inherits .copy-btn
   visuals; force pointer so it doesn't read as a static label. */
.logo-actions label.copy-btn { cursor: pointer; }

.color-input {
  width: 64px;
  height: 36px;
  padding: 2px;
  cursor: pointer;
}

/* Pool-low % control sits the toggle next to a tiny number input. */
.pool-low-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-input-sm {
  width: 64px;
  text-align: right;
}
.pool-low-pct-suffix {
  color: var(--gray-mid);
  font-size: 13px;
}

.coming-soon-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--gray-background);
  color: var(--gray-mid);
  border-radius: 999px;
  vertical-align: middle;
}

.settings-empty {
  color: var(--gray-mid);
  font-size: 13px;
  padding: var(--space-lg);
  text-align: center;
}

/* Audit log table. Monospace for the field-key column for scannability. */
.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.audit-table th,
.audit-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-light);
  vertical-align: top;
}
.audit-table th {
  font-weight: 600;
  color: var(--gray-mid);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.audit-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--gray-background);
  padding: 1px 6px;
  border-radius: 4px;
}
.audit-change { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.audit-old { color: var(--gray-mid); text-decoration: line-through; }
.audit-arrow { color: var(--gray-mid); }
.audit-new { color: var(--navy); font-weight: 500; }

/* R4 domain-list confirmation modal. Same visual language as the
   Members-tab typed-confirm. */
.settings-confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.settings-confirm-modal[hidden] { display: none; }
.settings-confirm-modal-card {
  background: white;
  border-radius: 14px;
  padding: var(--space-xl);
  max-width: 460px;
  width: calc(100% - 32px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.domain-confirm-list {
  list-style: none;
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: var(--gray-background);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  max-height: 160px;
  overflow-y: auto;
}
.domain-confirm-list li { padding: 2px 0; color: var(--navy); }
.settings-confirm-warn {
  color: #b45309;
  font-size: 12px;
  margin-top: var(--space-sm);
}
.settings-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: var(--space-md);
}

/* Cmd-K search overlay. Centered modal-ish card; results list
   below input; arrow-key nav highlights .active. */
.settings-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 10000;
}
.settings-search-overlay[hidden] { display: none; }
.settings-search-card {
  background: white;
  border-radius: 14px;
  width: min(560px, calc(100% - 32px));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.settings-search-input {
  width: 100%;
  border: none;
  padding: 16px 18px;
  font-size: 16px;
  outline: none;
  border-bottom: 1px solid var(--gray-light);
}
.settings-search-results {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 50vh;
  overflow-y: auto;
}
.settings-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 10px 18px;
  cursor: pointer;
  font-size: 14px;
}
.settings-search-result:hover,
.settings-search-result.active {
  background: var(--gray-background);
}
.settings-search-section {
  font-size: 12px;
  color: var(--gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings-search-empty {
  padding: 16px 18px;
  color: var(--gray-mid);
  font-size: 13px;
}
/* When a search hit jumps to a field, briefly highlight the input. */
.settings-flash {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
  transition: outline-color 0.4s ease-out;
}

/* Collapse the sub-nav rail under the content on narrow screens —
   keep it as a horizontal pill row so it's still a one-tap reach. */
@media (max-width: 768px) {
  .settings-shell {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .settings-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
  }
  .settings-nav-item {
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }
  .settings-nav-item.active {
    border-left: none;
    border-bottom-color: var(--pink);
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dashboard-panels {
    grid-template-columns: 1fr;
  }
  
  .billing-row {
    grid-template-columns: 1fr 2fr 80px 60px 36px;
  }
}

@media (max-width: 768px) {
  .user-admin:not(.user-admin--fullbleed) {
    /* Re-add a 16px thumb gutter on phones — edge-to-edge looks
       cramped on narrow viewports where every pixel reads as chrome.
       v1.1 (May 2026): excluded .user-admin--fullbleed so the unified
       .page-content shell rule remains the single source of mobile
       gutter on admin surfaces (Task #97). Marketing variants using
       the base .user-admin keep their phone thumb-gutter. */
    padding: var(--space-lg);
  }
  
  .stats-row {
    grid-template-columns: 1fr;
  }
  
  .user-admin-tabs {
    overflow-x: auto;
    gap: var(--space-lg);
  }
  
  .team-table-header,
  .team-row {
    grid-template-columns: 2fr 1fr 1fr;
  }

  /* See note above: <tr.team-row> must stay a table row even on
     narrow viewports — otherwise the responsive grid override would
     re-collapse the new table layout. */
  tr.team-row {
    display: table-row;
    grid-template-columns: none;
  }

  .col-reports, .col-active, .col-actions {
    display: none;
  }
  
  .branding-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  
  .settings-input, .settings-select,
  .branding-input, .branding-select {
    width: 100%;
  }
}


/* Programme preview floating cards */
#preview-program-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#preview-workshop-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.preview-floating-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
  padding: var(--space-5) var(--space-6);
}

.preview-card-label {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-mid);
  margin-bottom: var(--space-3);
}

.preview-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--navy);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.preview-card-summary {
  font-size: var(--font-size-sm);
  color: var(--ink-2);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preview-overall-progress-track {
  height: 12px;
  background: var(--gray-background);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.preview-overall-progress-fill {
  height: 100%;
  background: var(--gradient-horizontal);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.preview-overall-progress-pct {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--navy);
}

.preview-workshop-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--gray-light);
}

.preview-workshop-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.preview-workshop-row-name {
  font-size: var(--font-size-sm);
  color: var(--navy);
  flex: 0 0 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-workshop-row-track {
  flex: 1;
  height: 12px;
  background: var(--gray-background);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.preview-workshop-row-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pink) 0%, rgba(255, 126, 126, 0.8) 50%, rgba(255, 200, 114, 0.8) 100%);
  border-radius: var(--radius-full);
  min-height: 8px;
}

.preview-workshop-row-fill.upcoming {
  background: var(--gray-light);
  width: 0% !important;
}

.preview-workshop-row-action {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--pink);
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 24px;
  text-align: right;
}

.preview-workshop-row-action.done {
  color: var(--gray-mid);
}

.preview-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-6);
}

.preview-details-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.preview-details-key {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-mid);
}

.preview-details-val {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--navy);
}

.preview-ws-meta {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gray-light);
  font-size: var(--font-size-xs);
  color: var(--gray-mid);
}

.preview-ws-meta span strong {
  color: var(--navy);
  font-weight: var(--font-weight-semibold);
}

.preview-ws-product-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--gray-light);
  font-size: var(--font-size-sm);
}

.preview-ws-product-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.preview-ws-product-name {
  flex: 1;
  color: var(--navy);
}

.preview-ws-product-status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}

/* ── Activity Preview: Report Table of Contents (Style A) ── */
.activity-toc { display: flex; flex-direction: column; gap: 0; }
.activity-toc-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--gray-light);
}

.activity-toc-item:last-child {
  border-bottom: none;
}

.activity-toc-num {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  color: var(--gray-light);
  width: 18px;
  flex-shrink: 0;
}

.activity-toc-item:first-child .activity-toc-num {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--pink);
}

.activity-toc-name {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--ink-2);
  font-weight: var(--font-weight-medium);
  flex: 1;
}

.activity-toc-item:first-child .activity-toc-name {
  color: var(--navy);
  font-weight: var(--font-weight-semibold);
}

.activity-toc-bar {
  height: 12px;
  width: 48px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  background: var(--gradient-horizontal);
}

.activity-toc-name-skeleton {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-sm);
  background: var(--gray-background);
}



/* ============================================================
   Settings polish (May 10 2026) — fill the CSS gaps that left
   the Security sub-tab visually blank, the Danger-zone buttons
   on browser-default fonts, and the Audit toolbar's <select> /
   <input type=date> rendering as bare native controls.

   Strict brand-token usage; no new hex literals. Coral tokens
   own the danger surface (B91C1C is WCAG AA on coral-10/white,
   per tokens/colors.css).
   ============================================================ */

/* Force the brand font onto every form control inside the
   Settings shell. Native <button>/<select>/<input> do NOT
   inherit font-family by default — that's the root cause of
   the "wrong font" reports on Danger zone + Audit toolbar. */
.settings-shell button,
.settings-shell select,
.settings-shell input,
.settings-shell textarea,
.settings-shell label {
  font-family: var(--font-family);
}

/* ── Generic .btn base + danger variant ──────────────────────
   `.btn` was being used as a base class on the Danger zone
   buttons (`class="btn btn-danger"`) but never defined, so
   only the modifier rules applied (and `.btn-danger` itself
   didn't exist either). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: var(--font-medium);
  line-height: 1.2;
  border-radius: var(--radius-full, 30px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-danger {
  background: var(--negative);
  color: var(--white);
  border-color: var(--negative);
}
.btn-danger:hover:not(:disabled) {
  opacity: 0.9;
}

/* ── Settings card variants used by Security + Danger ──────── */
.settings-card-muted {
  background: var(--gray-background);
  color: var(--gray-mid);
}
.settings-card-danger {
  border-color: var(--negative);
}
.settings-card-danger .settings-section-heading {
  color: var(--negative);
}

/* ── Settings section headings used by Security + Danger ───── */
.settings-section-heading {
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--navy);
  margin: 0 0 4px;
}
.settings-section-hint {
  font-family: var(--font-family);
  font-size: 13px;
  color: var(--gray-mid);
  line-height: 1.5;
  margin: 0 0 var(--space-md);
}

/* ── iOS-style toggle used by Security password-policy rows ── */
.settings-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.settings-toggle input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.settings-toggle .toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--gray-light);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.2s ease;
}
.settings-toggle .toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--white);
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.settings-toggle input[type="checkbox"]:checked + .toggle-slider {
  background: var(--navy);
}
.settings-toggle input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(18px);
}
.settings-toggle input[type="checkbox"]:focus-visible + .toggle-slider {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* ── Audit toolbar (filters row above the table) ──────────── */
.audit-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--gray-light);
}
.audit-filter {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-family);
}
.audit-filter > span {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--gray-mid);
  letter-spacing: 0.02em;
}
.audit-filter select,
.audit-filter input[type="date"] {
  font-family: var(--font-family);
  font-size: 13px;
  color: var(--navy);
  background: var(--white);
  padding: 6px 10px;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  min-height: 34px;
  line-height: 1.2;
}
.audit-filter select:focus,
.audit-filter input[type="date"]:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(255, 85, 164, 0.15);
}
#auditExportBtn {
  align-self: flex-end;
}

/* ── Audit table accents (badge / pagination / loading) ───── */
.audit-type-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  font-family: var(--font-family);
  background: var(--gray-background);
  color: var(--ink-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.audit-type-badge.audit-type-danger_action {
  background: var(--negative-bg);
  color: var(--negative);
}
.audit-summary {
  font-family: var(--font-family);
  color: var(--navy);
}
.audit-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  margin-top: var(--space-lg);
  border-top: 1px solid var(--gray-light);
}
.audit-loading-msg {
  font-family: var(--font-family);
  font-size: var(--text-xs);
  color: var(--gray-mid);
}