/* AppInspector — "Base" theme.
   Loaded AFTER style.css; restyles AppInspector to match base.appinspector.ru (CRM):
   flat light grey-green background, white panels with thin borders, teal accent,
   Space Grotesk headings, Inter text, JetBrains Mono numbers, 8–12px radii, light shadows. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --bg: #F2F4F3;
  --bg-gradient-start: #F2F4F3;
  --bg-gradient-end: #F2F4F3;
  --bg-radial: transparent;
  --panel: #FFFFFF;
  --panel-strong: #FFFFFF;
  --panel-soft: #F7F9F8;
  --text: #171C22;
  --muted: #6B7480;
  --line: #E1E5E3;
  --glass-border: #E1E5E3;
  --accent: #0E6E5C;
  --accent-dark: #0B5A4B;
  --accent-soft: #E1F0EC;
  --success: #DEF3E4;
  --error: #F8E3DE;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-pop: 0 6px 20px rgba(0, 0, 0, 0.12);
  --radius-xl: 12px;
  --radius-lg: 10px;
  --radius-md: 8px;
  --base-hover: #F7FAF9;
  --base-ios: #3A6EA5;
  --base-android: #4C8C3B;
}

:root[data-theme="dark"] {
  --bg: #111615;
  --bg-gradient-start: #111615;
  --bg-gradient-end: #111615;
  --bg-radial: transparent;
  --panel: #181F1D;
  --panel-strong: #1B2321;
  --panel-soft: #1F2826;
  --text: #E8EDEB;
  --muted: #8E9A96;
  --line: #2A3431;
  --glass-border: #2A3431;
  --accent: #3FB59C;
  --accent-dark: #5CC7AF;
  --accent-soft: rgba(63, 181, 156, 0.14);
  --success: rgba(57, 123, 83, 0.3);
  --error: rgba(176, 58, 58, 0.28);
  --shadow: none;
  --shadow-soft: none;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45);
  --base-hover: #1D2624;
}

/* Typography */
body {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  background: var(--bg);
}
h1, h2, h3, .dialog-head h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
}
h1 { font-size: 26px !important; line-height: 1.1 !important; margin-bottom: 6px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
.prompt-output, code, kbd { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Panels: flat white cards with a thin border, no glass blur */
.auth-card, .hero, .panel, .status-card, .app-card, .inspector-row, .empty-state,
.users-create-panel, .users-summary-card, .user-card {
  background: var(--panel) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.inspector-row:hover { border-color: #C8CFCB !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07) !important; }
:root[data-theme="dark"] .inspector-row:hover { border-color: #3A4642 !important; }
.user-card::before, .users-hero::after { display: none !important; }
.meta-pill { background: var(--panel-soft) !important; border-radius: 8px !important; }

/* Buttons: 8px radius, solid teal primary, bordered ghost */
button, .solid-link, .ghost-button, .danger-button, .bulk-apply-button {
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  transition: filter .15s, border-color .15s, color .15s, background-color .15s;
}
/* :where() keeps specificity at zero so any component rule below (switchers, selects, ghost/danger) wins. */
:where(button, .solid-link, .bulk-apply-button) {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
:where(button, .solid-link, .bulk-apply-button):hover { filter: brightness(1.1); transform: none !important; }
.ghost-button {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}
.ghost-button:hover { border-color: var(--accent) !important; color: var(--accent) !important; filter: none; }
.danger-button {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #B03A3A !important;
  box-shadow: none !important;
}
.danger-button:hover { border-color: #E7C4C4 !important; background: #FBF0F0 !important; }
:root[data-theme="dark"] .danger-button { color: #E07A7A !important; }
:root[data-theme="dark"] .danger-button:hover { background: rgba(176, 58, 58, 0.15) !important; border-color: transparent !important; }

/* Segmented switchers (theme / platform / view) — like Base .tabs */
.theme-switcher, .platform-switcher, .view-switcher {
  background: #E7EAE8 !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 3px !important;
  box-shadow: none !important;
  gap: 4px;
}
:root[data-theme="dark"] .theme-switcher,
:root[data-theme="dark"] .platform-switcher,
:root[data-theme="dark"] .view-switcher { background: #222B29 !important; }
.theme-switcher > *, .platform-switcher > *, .view-switcher > * {
  background: transparent !important;
  border: none !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: var(--muted) !important;
}
.theme-switcher .is-active, .platform-switcher .is-active, .view-switcher .is-active,
.theme-switcher [aria-pressed="true"], .platform-switcher [aria-current], .view-switcher [aria-current] {
  background: var(--panel) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* Inputs and selects */
input[type="text"], input[type="search"], input[type="password"], input:not([type]), textarea, select,
.custom-select-trigger, .workspace-search-input, .dashboard-toolbar select, .bulk-actions-form select {
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background-color: var(--panel) !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text);
}
select, .dashboard-toolbar select, .bulk-actions-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.25 1.5 6 6.25 10.75 1.5' stroke='%236B7480' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 11px 8px !important;
}
.custom-select-trigger { background-image: none !important; font-weight: 500; color: var(--text) !important; filter: none !important; }
.custom-select-trigger:hover { border-color: var(--accent) !important; }
.custom-select-menu {
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: var(--panel) !important;
  box-shadow: var(--shadow-pop) !important;
  backdrop-filter: none !important;
  padding: 6px !important;
}
.custom-select-option {
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
.custom-select-option:hover { background: var(--base-hover) !important; filter: none !important; }
.custom-select-option.is-selected, .custom-select-option[aria-selected="true"] {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}
input:focus, textarea:focus, select:focus, .custom-select-trigger:focus { outline: none; border-color: var(--accent) !important; }
:root[data-theme="dark"] .custom-select-trigger { background: var(--panel) !important; }

/* Chips and pills: small, flat, like Base .tag / .chip */
.status-chip, .row-chip, .badge-row span, .bundle-line-inline, .users-inline-chip,
.history-card-meta span, .history-card-changes span, .history-diff-pill,
.workspace-folder-count, .bulk-actions-title {
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 600;
}
.row-chip, .badge-row span { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: transparent !important; }
.workspace-folder-pill {
  border-radius: 8px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  font-size: 13px;
}
.workspace-folder-pill.is-active {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
.listing-indicator { box-shadow: none !important; }

/* Numbers in mono, like Base money/metrics */
.workspace-folder-count, .history-diff-pill, .meta-pill strong, .stat b { font-family: 'JetBrains Mono', monospace; }

/* Checkboxes */
.bulk-row-checkbox { border-radius: 5px !important; box-shadow: none !important; background: var(--panel) !important; border: 1px solid #C8CFCB !important; }
.bulk-row-checkbox:checked { background: var(--accent) !important; border-color: var(--accent) !important; box-shadow: none !important; }

/* Flash messages and dialogs */
.flash { border-radius: 8px !important; box-shadow: var(--shadow-pop) !important; font-size: 13px; }
.flash-error { color: #B03A3A; }
.flash-success { color: #1D6B34; }
.app-dialog-card { border-radius: 14px !important; border: 1px solid var(--line); box-shadow: var(--shadow-pop) !important; background: var(--panel) !important; }
.app-dialog::backdrop { background: rgba(20, 25, 23, 0.5); }

/* Tone down entrance animations to match Base's calmer feel */
.inspector-row, .panel, .hero { transition: border-color .12s, box-shadow .12s !important; }

/* ---- Replace hardcoded warm/orange colors from style.css ---- */
.custom-select-trigger::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.25 1.5 6 6.25 10.75 1.5' stroke='%236B7480' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
select:hover, .custom-select-trigger:hover, .custom-select.is-open .custom-select-trigger,
.workspace-folder-pill:hover, .workspace-member-folder:hover, .bulk-row-checkbox:hover {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
select:focus, .custom-select-trigger:focus-visible, .bulk-row-checkbox:focus-visible,
button:focus-visible, .solid-link:focus-visible, .ghost-button:focus-visible, .danger-button:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}
.custom-select.is-open .custom-select-trigger { box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.workspace-member-folder, .workspace-folder-row, .users-panel-note, .users-summary-card { border-color: var(--line) !important; box-shadow: none !important; }
.list-header, .listing-indicator, .user-card-avatar, .user-card:hover .user-card-avatar { box-shadow: none !important; }
.inspector-row.is-latest,
.dashboard[data-view-mode="mini"] .inspector-row.is-latest .mini-row-layout {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.users-inline-chip-accent { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: transparent !important; }
:root[data-theme="dark"] .badge-row span, :root[data-theme="dark"] .row-chip { background: var(--accent-soft) !important; color: var(--accent) !important; }
:root[data-theme="dark"] .custom-select-option:hover { background: var(--base-hover) !important; }
:root[data-theme="dark"] .custom-select-option.is-selected { background: var(--accent-soft) !important; }
.theme-switcher-button.is-active, .theme-switcher-button[aria-pressed="true"],
.view-switcher .ghost-button.is-active, .platform-switcher .ghost-button.is-active {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: transparent !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* Dark theme: light-teal primary needs dark text for contrast */
/* Zero specificity (all inside :where) so ghost buttons, selects and switchers keep their own text color. */
:where(:root[data-theme="dark"]) :where(button, .solid-link, .bulk-apply-button) { color: #0B1A17 !important; }

/* Sticky catalog bar: solid like Base panels (no see-through blur) */
.list-header { background: var(--panel-soft) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important; }
:root[data-theme="dark"] .list-header { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important; }

/* Storefront switcher (US / GB ...) in stitch dialog and cards: show the active storefront */
.storefront-switcher .ghost-button.is-active {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}