/* Organization owner shell tokens */

/* The --owner-* names are the owner shell's public token vocabulary, but
   several component classes that use them (.owner-btn-*, .owner-card-action,
   .owner-tile-accent) are unscoped and render inside shared partials on every
   surface. Defining the aliases at :root rather than on .owner-shell is what
   stops those resolving to nothing off the owner dashboard. */
:root {
  /* The --owner-* names are the owner shell's public token vocabulary, and 474
     call sites consume them. They alias the shared tokens rather than defining
     a second palette.

     They are defined at :root, not on .owner-shell, because 52 unscoped
     component classes use them (.owner-btn-*, .owner-card-action,
     .owner-tile-accent) and those render inside shared partials on every
     surface. Scoped to .owner-shell they resolved to nothing off the owner
     dashboard. */
  --owner-bg: var(--fc-bg);
  --owner-surface: var(--fc-surface);
  --owner-surface-muted: var(--fc-surface-muted);
  --owner-surface-subtle: var(--fc-surface-subtle);
  --owner-border: var(--fc-border);
  --owner-border-strong: var(--fc-border-strong);
  --owner-text: var(--fc-text);
  --owner-text-muted: var(--fc-text-muted);
  --owner-text-soft: var(--fc-text-soft);
  --owner-accent: var(--fc-accent-fill);
  --owner-accent-strong: var(--fc-accent-hover);
  --owner-accent-rgb: var(--fc-accent-rgb);
  --owner-accent-soft: var(--fc-accent-soft);
  --owner-accent-subtle: var(--fc-accent-subtle);
  --owner-accent-faint: color-mix(in srgb, var(--fc-accent-fill) 4%, transparent);
  --owner-success: var(--fc-success);
  --owner-warning: var(--fc-warning);
  --owner-error: var(--fc-error);
  --owner-error-on: var(--fc-error-on);
  --owner-sync: var(--fc-info);
  --owner-shadow: var(--fc-shadow-lg);
}

/* The aliases must be redeclared inside the dark scope. A custom property is
   resolved where it is declared: --owner-surface: var(--fc-surface) at :root
   computes against the LIGHT --fc-surface and then inherits that frozen colour,
   so every --owner-* consumer stayed light in dark mode while direct --fc-*
   consumers switched correctly. Redeclaring here re-resolves them. */
[data-theme="dark"],
.fc-theme-dark,
.owner-shell.owner-theme-dark {
  --owner-bg: var(--fc-bg);
  --owner-surface: var(--fc-surface);
  --owner-surface-muted: var(--fc-surface-muted);
  --owner-surface-subtle: var(--fc-surface-subtle);
  --owner-border: var(--fc-border);
  --owner-border-strong: var(--fc-border-strong);
  --owner-text: var(--fc-text);
  --owner-text-muted: var(--fc-text-muted);
  --owner-text-soft: var(--fc-text-soft);
  --owner-accent: var(--fc-accent-fill);
  --owner-accent-strong: var(--fc-accent-hover);
  --owner-accent-rgb: var(--fc-accent-rgb);
  --owner-accent-soft: var(--fc-accent-soft);
  --owner-accent-subtle: var(--fc-accent-subtle);
  --owner-accent-faint: color-mix(in srgb, var(--fc-accent-fill) 4%, transparent);
  --owner-success: var(--fc-success);
  --owner-warning: var(--fc-warning);
  --owner-error: var(--fc-error);
  --owner-error-on: var(--fc-error-on);
  --owner-sync: var(--fc-info);
  --owner-shadow: var(--fc-shadow-lg);
}

.owner-shell {
  background: var(--owner-bg);
  color: var(--owner-text);
}


.owner-shell.owner-theme-dark {
  /* tokens.css targets this selector and re-points every --fc-* value to the
     dark palette; the aliases above then resolve to it. Nothing to restate. */
  color-scheme: dark;
}

.owner-shell-main {
  background:
    linear-gradient(180deg, rgba(12, 122, 120, 0.035), transparent 18rem),
    var(--owner-bg);
}

.owner-shell-topbar,
.owner-shell-footer {
  background: color-mix(in srgb, var(--owner-surface) 94%, transparent);
  border-color: var(--owner-border);
  color: var(--owner-text);
}

.owner-shell-brand {
  color: var(--owner-accent);
}

.owner-shell-icon-button {
  color: var(--owner-text-muted);
}

.owner-shell-icon-button:hover {
  background: var(--owner-accent-subtle);
  color: var(--owner-accent);
}

.owner-shell-muted {
  color: var(--owner-text-muted);
}

.owner-shell :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]) {
  background-color: var(--owner-surface);
  border-color: var(--owner-border);
  color: var(--owner-text);
}

.owner-shell :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"])::placeholder {
  color: var(--owner-text-soft);
}

.owner-shell :is(input, select, textarea):not([type="submit"]):not([type="button"]):not([type="reset"]):focus {
  border-color: var(--owner-accent) !important;
  box-shadow: 0 0 0 3px var(--owner-accent-soft) !important;
  outline: none;
}

.owner-shell .btn-premium-coral {
  box-shadow: 0 8px 18px rgb(var(--owner-accent-rgb) / 0.22);
}

.owner-shell .btn-premium-coral:hover {
  box-shadow: 0 10px 24px rgb(var(--owner-accent-rgb) / 0.28);
}

.owner-shell .stat-card-premium::before {
  background: linear-gradient(90deg, var(--owner-accent), var(--owner-sync));
}

.owner-shell .stat-card-premium:hover,
.owner-shell .card-dashboard-interactive:hover {
  border-color: var(--owner-accent-soft);
  box-shadow: 0 10px 22px rgb(var(--owner-accent-rgb) / 0.08);
}

.settings-nav {
  background: color-mix(in srgb, var(--owner-surface) 96%, transparent);
  border: 1px solid var(--owner-border);
  border-radius: 0.625rem;
  overflow-x: auto;
  padding: 0.25rem;
}

.settings-nav-list {
  display: flex;
  gap: 0.25rem;
  min-width: max-content;
}

.settings-nav-link {
  border-radius: 0.5rem;
  color: var(--owner-text-muted);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1;
  padding: 0.625rem 0.875rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.settings-nav-link:hover {
  background: var(--owner-accent-subtle);
  color: var(--owner-accent);
}

.settings-nav-link.active {
  background: var(--owner-accent);
  color: var(--fc-accent-on);
  box-shadow: 0 6px 14px rgb(var(--owner-accent-rgb) / 0.18);
}

/* Status panels: setup completeness + tenant health */

.owner-status-panel {
  background: var(--owner-surface);
  border: 1px solid var(--owner-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.owner-status-panel-header {
  align-items: center;
  border-bottom: 1px solid var(--owner-border);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.875rem 1rem;
}

.owner-status-panel-title {
  color: var(--owner-text);
  font-size: 0.875rem;
  font-weight: 700;
}

.owner-status-panel-meta {
  color: var(--owner-text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.owner-status-row {
  align-items: center;
  color: var(--owner-text);
  display: flex;
  font-size: 0.875rem;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
}

.owner-status-row + .owner-status-row {
  border-top: 1px solid var(--owner-border);
}

a.owner-status-row:hover {
  background: var(--owner-accent-faint);
}

.owner-status-row-label {
  font-weight: 600;
}

.owner-status-row-detail {
  color: var(--owner-text-muted);
  font-size: 0.8125rem;
}

.owner-status-row-action {
  color: var(--owner-accent);
  font-size: 0.8125rem;
  font-weight: 650;
  margin-left: auto;
  white-space: nowrap;
}

.owner-status-dot {
  border-radius: 9999px;
  flex-shrink: 0;
  height: 0.5rem;
  width: 0.5rem;
}

.owner-status-dot--success { background: var(--owner-success); }
.owner-status-dot--warning { background: var(--owner-warning); }
.owner-status-dot--error { background: var(--owner-error); }
.owner-status-dot--sync { background: var(--owner-sync); }
.owner-status-dot--muted { background: var(--owner-border-strong); }

.owner-status-count {
  background: var(--owner-surface-muted);
  border-radius: 9999px;
  color: var(--owner-text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}

.owner-status-count--error {
  background: color-mix(in srgb, var(--owner-error) 14%, transparent);
  color: var(--owner-error);
}

.owner-status-count--warning {
  background: color-mix(in srgb, var(--owner-warning) 16%, transparent);
  color: var(--owner-warning);
}

.owner-status-count--sync {
  background: color-mix(in srgb, var(--owner-sync) 14%, transparent);
  color: var(--owner-sync);
}

.owner-setup-progress {
  background: var(--owner-surface-muted);
  border-radius: 9999px;
  height: 0.375rem;
  overflow: hidden;
  width: 6rem;
}

.owner-setup-progress-bar {
  background: var(--owner-accent);
  border-radius: 9999px;
  height: 100%;
  transition: width 0.4s ease;
}

/* Settings hub setup cards */

.owner-setup-cards {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .owner-setup-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .owner-setup-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.owner-setup-card {
  align-items: flex-start;
  background: var(--owner-surface);
  border: 1px solid var(--owner-border);
  border-radius: 0.625rem;
  display: flex;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.owner-setup-card:hover {
  border-color: var(--owner-accent-soft);
  box-shadow: 0 8px 18px rgb(var(--owner-accent-rgb) / 0.08);
}

.owner-setup-card .owner-status-dot {
  margin-top: 0.4375rem;
}

.owner-setup-card-title {
  color: var(--owner-text);
  font-size: 0.875rem;
  font-weight: 650;
}

.owner-setup-card-description {
  color: var(--owner-text-muted);
  font-size: 0.8125rem;
  margin-top: 0.125rem;
}

/* Settings audit note (last changed by / at) */

.owner-audit-note {
  align-items: center;
  color: var(--owner-text-soft);
  display: inline-flex;
  font-size: 0.75rem;
  gap: 0.375rem;
}

/* Canonical owner buttons (normalization target for btn-premium-*) */

.owner-btn-primary {
  align-items: center;
  background: var(--owner-accent, #0C7A78);
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: var(--fc-accent-on);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 650;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.owner-btn-primary:hover {
  background: var(--owner-accent-strong, #095F5D);
  box-shadow: 0 6px 14px rgb(var(--owner-accent-rgb, 12 122 120) / 0.22);
}

.owner-btn-primary:focus-visible {
  outline: 2px solid var(--owner-accent, #0C7A78);
  outline-offset: 2px;
}

.owner-btn-secondary {
  align-items: center;
  background: var(--owner-surface, #ffffff);
  border: 1px solid var(--owner-border-strong, #cbd5e1);
  border-radius: 0.5rem;
  color: var(--owner-text, #0f172a);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.owner-btn-secondary:hover {
  background: var(--owner-accent-subtle, rgba(12, 122, 120, 0.09));
  border-color: var(--owner-accent, #0C7A78);
  color: var(--owner-accent, #0C7A78);
}

.owner-btn-secondary:focus-visible {
  outline: 2px solid var(--owner-accent, #0C7A78);
  outline-offset: 2px;
}

/* Token icon tiles (replaces coral/mint gradient tiles) */

.owner-tile-accent {
  align-items: center;
  background: var(--owner-accent-soft, #D6F1EF);
  border-radius: 0.5rem;
  color: var(--owner-accent, #0C7A78);
  display: flex;
  justify-content: center;
}

/* Card header action link */

.owner-card-action {
  align-items: center;
  border-radius: 0.5rem;
  color: var(--owner-text-muted, #64748b);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.owner-card-action:hover {
  background: var(--owner-accent-subtle, rgba(12, 122, 120, 0.09));
  color: var(--owner-accent, #0C7A78);
}

/* The legacy palette override block that used to live here is gone.
   It force-repainted every fitcloud-coral/mint utility to the blue
   --owner-accent with 53 !important declarations, which is why the brand
   palette never reached the screen. --owner-* now aliases the shared tokens
   in tokens.css, where the action accent is teal and coral is reserved for
   brand surfaces, so there is nothing left to override. */

.owner-btn-danger {
  align-items: center;
  background: var(--owner-error, #dc2626);
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: var(--owner-error-on, #ffffff);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 650;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.owner-btn-danger:hover {
  filter: brightness(0.92);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--owner-error, #dc2626) 24%, transparent);
}

.owner-btn-danger:focus-visible {
  outline: 2px solid var(--owner-error, #dc2626);
  outline-offset: 2px;
}

.owner-btn-danger-soft {
  align-items: center;
  background: color-mix(in srgb, var(--owner-error, #dc2626) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--owner-error, #dc2626) 28%, transparent);
  border-radius: 0.5rem;
  color: var(--owner-error, #dc2626);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  transition: background-color 0.2s ease;
}

.owner-btn-danger-soft:hover {
  background: color-mix(in srgb, var(--owner-error, #dc2626) 14%, transparent);
}

.owner-btn-success {
  align-items: center;
  background: var(--owner-success, #16a34a);
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 650;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.owner-btn-success:hover {
  filter: brightness(0.92);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--owner-success, #16a34a) 24%, transparent);
}

.owner-btn-success:focus-visible {
  outline: 2px solid var(--owner-success, #16a34a);
  outline-offset: 2px;
}

/* Token text utilities (normalization target for text-fitcloud-coral) */

.owner-text-accent {
  color: var(--owner-accent, #0C7A78);
}

.owner-hover-text-accent:hover {
  color: var(--owner-accent-strong, #095F5D);
}

.group:hover .owner-group-text-accent {
  color: var(--owner-accent, #0C7A78);
}

/* Owner tab navigation (single state class toggled by JS) */

.owner-tab {
  align-items: center;
  border-bottom: 2px solid transparent;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  color: var(--owner-text-muted, #64748b);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.owner-tab:hover {
  border-bottom-color: var(--owner-accent-soft, #D6F1EF);
  color: var(--owner-accent, #0C7A78);
}

.owner-tab--active {
  background: var(--owner-surface, #ffffff);
  border-bottom-color: var(--owner-accent, #0C7A78);
  color: var(--owner-accent, #0C7A78);
}