/**
 * RubusCRM — Respond.io visual language (app-wide, complete)
 * Source tokens: design-tokens/respond-io-inbox.json
 *
 * Rules:
 * - Tokens on body.respond-ui so dialogs/overlays outside #appShell inherit
 * - Shell chrome under body.respond-ui #appShell
 * - Remaps --ds-* / local *-modern vars; no layout rewrites; no !important
 * - Inbox column chrome stays in social-inbox-respond-theme.css
 */

body.respond-ui {
  --rio-neutral-50: #edf6ff;
  --rio-neutral-100: #e2ecf9;
  --rio-neutral-200: #d4dfed;
  --rio-neutral-300: #bcc9d8;
  --rio-neutral-400: #9facbc;
  --rio-neutral-500: #7d8b9b;
  --rio-neutral-600: #5e6a79;
  --rio-neutral-700: #444e5b;
  --rio-neutral-800: #2b343e;
  --rio-neutral-900: #141b24;
  --rio-primary: #1a6eff;
  --rio-primary-hover: #0058f0;
  --rio-primary-soft: #f0f5ff;
  --rio-nav: #f0f5ff;
  --rio-gray-hover: #f2f2f3;
  --rio-surface: #ffffff;
  --rio-canvas: #f7f8fa;
  --rio-line: rgba(53, 62, 71, 0.16);
  --rio-radius-sm: 4px;
  --rio-radius-md: 8px;
  --rio-radius-lg: 12px;

  --bg: var(--rio-canvas);
  --surface: var(--rio-surface);
  --surface-raised: var(--rio-surface);
  --surface-muted: var(--rio-primary-soft);
  --ink: var(--rio-neutral-900);
  --muted: var(--rio-neutral-500);
  --line: var(--rio-line);
  --accent: var(--rio-primary);
  --accent-strong: var(--rio-primary-hover);
  --accent-soft: var(--rio-primary-soft);
  --blue: var(--rio-primary);
  --blue-soft: var(--rio-primary-soft);
  --shadow: 0 1px 2px rgba(20, 27, 36, 0.04);
  --shadow-soft: 0 1px 2px rgba(20, 27, 36, 0.04);
  --radius: var(--rio-radius-lg);
  --radius-card: var(--rio-radius-lg);
  --btn-radius: var(--rio-radius-md);

  --ds-color-bg: var(--rio-canvas);
  --ds-color-surface: var(--rio-surface);
  --ds-color-surface-muted: var(--rio-canvas);
  --ds-color-line: var(--rio-line);
  --ds-color-ink: var(--rio-neutral-900);
  --ds-color-muted: var(--rio-neutral-500);
  --ds-color-accent: var(--rio-primary);
  --ds-color-accent-strong: var(--rio-primary-hover);
  --ds-color-accent-soft: var(--rio-primary-soft);
  --ds-radius-md: var(--rio-radius-md);
  --ds-radius-lg: var(--rio-radius-lg);
  --ds-type-xs: 12px;
  --ds-type-sm: 13px;
  --ds-type-md: 14px;
  --ds-type-lg: 16px;

  background: var(--rio-canvas);
  color: var(--rio-neutral-900);
}

/* ——— Shell: sidebar / nav / topbar ——— */
body.respond-ui #appShell .sidebar {
  background: var(--rio-surface);
  border-right: 1px solid var(--rio-line);
  gap: 14px;
  padding: 14px 10px;
}

body.respond-ui #appShell .sidebar-brand-logo {
  width: 52px;
  height: 52px;
  border-radius: var(--rio-radius-lg);
  border-color: var(--rio-line);
  box-shadow: none;
  background: var(--rio-surface);
}

body.respond-ui #appShell .sidebar-brand-mark {
  color: var(--rio-primary-hover);
  background: var(--rio-primary-soft);
}

body.respond-ui #appShell .sidebar-brand-name {
  letter-spacing: 0.04em;
  color: var(--rio-neutral-800);
}

body.respond-ui #appShell .nav-group__label {
  color: var(--rio-neutral-400);
}

body.respond-ui #appShell .nav-item {
  border-radius: var(--rio-radius-md);
  border-left-width: 0;
  color: var(--rio-neutral-600);
  min-height: 36px;
  padding: 0 10px;
  font-size: 13px;
}

body.respond-ui #appShell .nav-item__icon {
  color: var(--rio-neutral-500);
}

body.respond-ui #appShell .nav-item:hover {
  background: var(--rio-gray-hover);
  border-color: transparent;
  color: var(--rio-neutral-800);
  box-shadow: none;
  transform: none;
}

body.respond-ui #appShell .nav-item.active {
  background: var(--rio-nav);
  border-color: transparent;
  color: var(--rio-primary-hover);
  box-shadow: none;
  font-weight: 650;
}

body.respond-ui #appShell .nav-item:hover .nav-item__icon,
body.respond-ui #appShell .nav-item.active .nav-item__icon {
  color: var(--rio-primary);
}

body.respond-ui #appShell .nav-group--divided {
  border-top-color: var(--rio-line);
}

body.respond-ui #appShell .sidebar-footer {
  color: var(--rio-neutral-500);
  font-size: 12px;
}

body.respond-ui #appShell .workspace {
  background: var(--rio-canvas);
}

body.respond-ui #appShell .topbar {
  background: var(--rio-surface);
  border-bottom: 1px solid var(--rio-line);
  box-shadow: none;
}

body.respond-ui #appShell .topbar-title h1 {
  color: var(--rio-neutral-900);
  letter-spacing: -0.02em;
  font-weight: 650;
}

/* ——— Shared chrome ——— */
body.respond-ui .primary-button {
  background: var(--rio-primary);
  border-color: var(--rio-primary);
  border-radius: var(--rio-radius-md);
}

body.respond-ui .primary-button:hover:not(:disabled) {
  background: var(--rio-primary-hover);
  border-color: var(--rio-primary-hover);
}

body.respond-ui .ghost-button,
body.respond-ui .btn-compact,
body.respond-ui .small-button,
body.respond-ui .icon-button {
  border-radius: var(--rio-radius-md);
}

body.respond-ui .ghost-button:hover:not(:disabled),
body.respond-ui .btn-compact:hover:not(:disabled) {
  background: var(--rio-gray-hover);
}

body.respond-ui .panel {
  background: var(--rio-surface);
  border: 1px solid var(--rio-line);
  border-radius: var(--rio-radius-lg);
  box-shadow: none;
}

body.respond-ui input:not([type="checkbox"]):not([type="radio"]),
body.respond-ui select,
body.respond-ui textarea {
  border-radius: var(--rio-radius-md);
}

body.respond-ui input:not([type="checkbox"]):not([type="radio"]):focus,
body.respond-ui select:focus,
body.respond-ui textarea:focus {
  border-color: color-mix(in srgb, var(--rio-primary) 55%, var(--rio-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rio-primary) 16%, transparent);
  outline: none;
}

/* ——— Page headers ——— */
body.respond-ui .dashboard-overview-header__title,
body.respond-ui .tasks-page-header__title,
body.respond-ui .offers-page-header__title,
body.respond-ui .customers-page-header__title,
body.respond-ui .opportunities-page-header__title,
body.respond-ui .reports-page-header__title,
body.respond-ui .products-page-header__title,
body.respond-ui .sc-header__title,
body.respond-ui .ops-page-header__title,
body.respond-ui .ait-page-header__title {
  color: var(--rio-neutral-900);
  letter-spacing: -0.02em;
  font-weight: 650;
}

body.respond-ui .dashboard-overview-header__sub,
body.respond-ui .tasks-page-header__sub,
body.respond-ui .offers-page-header__sub,
body.respond-ui .customers-page-header__sub,
body.respond-ui .opportunities-page-header__sub {
  color: var(--rio-neutral-500);
}

body.respond-ui .dashboard-overview-header__eyebrow {
  color: var(--rio-primary);
  letter-spacing: 0.06em;
}

/* ——— Dashboard ——— */
body.respond-ui #dashboardView.dashboard-overview-modern {
  --dash-ink: var(--rio-neutral-900);
  --dash-muted: var(--rio-neutral-500);
  --dash-line: var(--rio-line);
  --dash-surface: var(--rio-surface);
  --dash-surface-quiet: var(--rio-canvas);
  --dash-accent: var(--rio-primary);
  --dash-accent-soft: var(--rio-primary-soft);
  --dash-radius: var(--rio-radius-md);
}

body.respond-ui #dashboardView.dashboard-overview-modern .panel {
  border-radius: var(--rio-radius-lg);
  box-shadow: none;
  border: 1px solid var(--rio-line);
}

/* ——— Tasks ——— */
body.respond-ui #tasksView.tasks-modern {
  --tasks-ink: var(--rio-neutral-900);
  --tasks-muted: var(--rio-neutral-500);
  --tasks-line: var(--rio-line);
  --tasks-surface: var(--rio-surface);
  --tasks-surface-quiet: var(--rio-canvas);
  --tasks-radius: var(--rio-radius-md);
  --tasks-complete: var(--rio-primary);
}

body.respond-ui #tasksView.tasks-modern .task-bulk-toolbar,
body.respond-ui #tasksView.tasks-modern .task-card,
body.respond-ui #tasksView.tasks-modern .panel {
  border-color: var(--rio-line);
  border-radius: var(--rio-radius-lg);
  box-shadow: none;
}

body.respond-ui #tasksView.tasks-modern .task-select-control input {
  accent-color: var(--rio-primary);
}

/* ——— Offers ——— */
body.respond-ui #offersView.offers-modern {
  --offers-radius: var(--rio-radius-md);
}

body.respond-ui #offersView.offers-modern .offers-toolbar,
body.respond-ui #offersView.offers-modern .offers-table-wrap,
body.respond-ui #offersView.offers-modern .panel {
  border-color: var(--rio-line);
  border-radius: var(--rio-radius-lg);
  box-shadow: none;
  background: var(--rio-surface);
}

body.respond-ui #offersView.offers-modern .offers-icon {
  color: var(--rio-neutral-500);
}

/* ——— Customers ——— */
body.respond-ui #customersView.customers-modern {
  --customers-radius: var(--rio-radius-md);
}

body.respond-ui #customersView.customers-modern .customers-toolbar,
body.respond-ui #customersView.customers-modern .panel,
body.respond-ui #customersView.customers-modern .table-wrap {
  border-color: var(--rio-line);
  border-radius: var(--rio-radius-lg);
  box-shadow: none;
}

/* ——— Opportunities list + kanban ——— */
body.respond-ui #pipelineView.is-list-layout .opportunities-page-header__title {
  color: var(--rio-neutral-900);
}

body.respond-ui #pipelineView .opportunities-list-modern,
body.respond-ui #pipelineList.opportunities-list-modern {
  --ds-color-line: var(--rio-line);
  --ds-color-ink: var(--rio-neutral-900);
  --ds-color-muted: var(--rio-neutral-500);
  --ds-color-accent: var(--rio-primary);
}

body.respond-ui #pipelineBoard.opportunities-kanban-modern {
  gap: 10px;
}

body.respond-ui #pipelineBoard.opportunities-kanban-modern .opportunities-stage-column,
body.respond-ui #pipelineBoard.opportunities-kanban-modern .stage-column {
  border-radius: var(--rio-radius-lg);
  box-shadow: none;
}

body.respond-ui #pipelineBoard.opportunities-kanban-modern .opportunities-deal-card,
body.respond-ui #pipelineBoard.opportunities-kanban-modern .deal-card {
  border-radius: var(--rio-radius-md);
  box-shadow: none;
}

body.respond-ui #pipelineBoard.opportunities-kanban-modern .deal-card:hover {
  border-color: inherit;
  box-shadow: none;
}

/* ——— Opportunity create / detail dialogs ——— */
body.respond-ui #dealDialog.is-opportunity-create,
body.respond-ui #dealDetailDialog.is-opportunity-detail {
  --ds-color-line: var(--rio-line);
  --ds-color-ink: var(--rio-neutral-900);
  --ds-color-muted: var(--rio-neutral-500);
  --ds-color-accent: var(--rio-primary);
  --ds-color-accent-soft: var(--rio-primary-soft);
  border-radius: var(--rio-radius-lg);
  border-color: var(--rio-line);
}

body.respond-ui #dealDialog,
body.respond-ui #dealDetailDialog {
  border-radius: var(--rio-radius-lg);
  border-color: var(--rio-line);
}

/* ——— Products ——— */
body.respond-ui #productsView.products-list-modern {
  --pl-line: var(--rio-line);
  --pl-ink: var(--rio-neutral-900);
  --pl-muted: var(--rio-neutral-500);
  --pl-surface: var(--rio-surface);
  --pl-soft: var(--rio-primary-soft);
  --pl-accent: var(--rio-primary);
  --pl-radius: var(--rio-radius-md);
}

body.respond-ui #productsView.products-form-modern,
body.respond-ui #productsView .products-form-modern {
  --pf-line: var(--rio-line);
  --pf-ink: var(--rio-neutral-900);
  --pf-muted: var(--rio-neutral-500);
  --pf-surface: var(--rio-surface);
  --pf-bg: var(--rio-canvas);
  --pf-accent: var(--rio-primary);
  --pf-soft: var(--rio-primary-soft);
  --pf-radius: var(--rio-radius-md);
}

body.respond-ui #productsView .panel,
body.respond-ui #productsView .table-wrap {
  border-radius: var(--rio-radius-lg);
  box-shadow: none;
  border-color: var(--rio-line);
}

/* ——— LED calculator ——— */
body.respond-ui #ledCalculatorView.led-calculator-modern {
  --lcd-line: var(--rio-line);
  --lcd-ink: var(--rio-neutral-900);
  --lcd-muted: var(--rio-neutral-500);
  --lcd-surface: var(--rio-surface);
  --lcd-bg: var(--rio-canvas);
  --lcd-accent: var(--rio-primary);
  --lcd-soft: var(--rio-primary-soft);
  --lcd-radius: var(--rio-radius-md);
}

body.respond-ui #ledCalculatorView .panel {
  border-radius: var(--rio-radius-lg);
  box-shadow: none;
}

/* ——— Reports ——— */
body.respond-ui #reportsView.reports-modern {
  --reports-ink: var(--rio-neutral-900);
  --reports-muted: var(--rio-neutral-500);
  --reports-line: var(--rio-line);
  --reports-surface: var(--rio-surface);
  --reports-surface-quiet: var(--rio-canvas);
  --reports-accent: var(--rio-primary);
  --reports-accent-soft: var(--rio-primary-soft);
  --reports-radius: var(--rio-radius-md);
}

body.respond-ui #reportsView .panel {
  border-radius: var(--rio-radius-lg);
  box-shadow: none;
}

/* ——— Automation ——— */
body.respond-ui #automationView.automation-rules-modern {
  --auto-ink: var(--rio-neutral-900);
  --auto-muted: var(--rio-neutral-500);
  --auto-line: var(--rio-line);
  --auto-surface: var(--rio-surface);
  --auto-surface-quiet: var(--rio-canvas);
  --auto-accent: var(--rio-primary);
  --auto-radius: var(--rio-radius-md);
}

body.respond-ui #automationView .panel {
  border-radius: var(--rio-radius-lg);
  box-shadow: none;
}

/* ——— Sales Center (all tabs) ——— */
body.respond-ui #dashboardsView.sales-center-modern {
  --sc-ink: var(--rio-neutral-900);
  --sc-muted: var(--rio-neutral-500);
  --sc-line: var(--rio-line);
  --sc-surface: var(--rio-surface);
  --sc-surface-quiet: var(--rio-canvas);
  --sc-accent: var(--rio-primary);
  --sc-radius: var(--rio-radius-md);
}

body.respond-ui #dashboardsView .sales-center-overview-modern,
body.respond-ui #dashboardsView [data-sc-panel="overview"] {
  --sc-ink: var(--rio-neutral-900);
  --sc-muted: var(--rio-neutral-500);
  --sc-line: var(--rio-line);
  --sc-surface: var(--rio-surface);
  --sc-surface-quiet: var(--rio-canvas);
  --sc-accent: var(--rio-primary);
}

body.respond-ui #dashboardsView .sales-center-sales-performance-modern,
body.respond-ui #dashboardsView [data-sc-panel="sales"] {
  --sc-sales-ink: var(--rio-neutral-900);
  --sc-sales-muted: var(--rio-neutral-500);
  --sc-sales-line: var(--rio-line);
  --sc-sales-surface: var(--rio-surface);
  --sc-sales-quiet: var(--rio-canvas);
  --sc-sales-accent: var(--rio-primary);
  --sc-sales-radius: var(--rio-radius-md);
}

body.respond-ui #dashboardsView .sales-center-conversion-modern,
body.respond-ui #dashboardsView [data-sc-panel="conversion"] {
  --sc-conv-ink: var(--rio-neutral-900);
  --sc-conv-muted: var(--rio-neutral-500);
  --sc-conv-line: var(--rio-line);
  --sc-conv-surface: var(--rio-surface);
  --sc-conv-quiet: var(--rio-canvas);
  --sc-conv-accent: var(--rio-primary);
  --sc-conv-radius: var(--rio-radius-md);
}

body.respond-ui #dashboardsView .sales-center-products-modern,
body.respond-ui #dashboardsView [data-sc-panel="products"] {
  --sc-prod-ink: var(--rio-neutral-900);
  --sc-prod-muted: var(--rio-neutral-500);
  --sc-prod-line: var(--rio-line);
  --sc-prod-surface: var(--rio-surface);
  --sc-prod-quiet: var(--rio-canvas);
  --sc-prod-accent: var(--rio-primary);
  --sc-prod-radius: var(--rio-radius-md);
}

body.respond-ui #dashboardsView .sales-center-agents-modern,
body.respond-ui #dashboardsView [data-sc-panel="agents"] {
  --sc-agent-ink: var(--rio-neutral-900);
  --sc-agent-muted: var(--rio-neutral-500);
  --sc-agent-line: var(--rio-line);
  --sc-agent-surface: var(--rio-surface);
  --sc-agent-quiet: var(--rio-canvas);
  --sc-agent-accent: var(--rio-primary);
  --sc-agent-radius: var(--rio-radius-md);
}

body.respond-ui #dashboardsView .panel,
body.respond-ui #dashboardsView .sc-card,
body.respond-ui #dashboardsView .sc-tab {
  border-radius: var(--rio-radius-md);
}

body.respond-ui #dashboardsView .sc-tab.is-active,
body.respond-ui #dashboardsView .sc-tabs button.active,
body.respond-ui #dashboardsView [role="tab"][aria-selected="true"] {
  color: var(--rio-primary-hover);
  background: var(--rio-nav);
}

/* ——— Operations Center ——— */
body.respond-ui .operations-center-page.operations-center-main-modern {
  --ops-ink: var(--rio-neutral-900);
  --ops-muted: var(--rio-neutral-500);
  --ops-line: var(--rio-line);
  --ops-surface: var(--rio-surface);
  --ops-surface-quiet: var(--rio-canvas);
  --ops-accent: var(--rio-primary);
  --ops-radius: var(--rio-radius-md);
}

body.respond-ui .operations-center-page.operations-center-main-modern .panel,
body.respond-ui .operations-center-page.operations-center-main-modern .ops-kpi,
body.respond-ui .operations-center-page.operations-center-main-modern .ops-card {
  border-radius: var(--rio-radius-lg);
  box-shadow: none;
  border-color: var(--rio-line);
}

body.respond-ui #operationsDetailModal.operations-detail-modern {
  --od-ink: var(--rio-neutral-900);
  --od-muted: var(--rio-neutral-500);
  --od-line: var(--rio-line);
  --od-surface: var(--rio-surface);
  --od-quiet: var(--rio-canvas);
  --od-accent: var(--rio-primary);
  --od-radius: var(--rio-radius-md);
}

body.respond-ui #operationsHandoffDrawer.operations-overlay-modern,
body.respond-ui #operationsWorkOrderCreateDrawer.operations-overlay-modern,
body.respond-ui #operationsWorkOrderUpdateDrawer.operations-overlay-modern,
body.respond-ui #operationsSupportDrawer.operations-overlay-modern,
body.respond-ui #operationsRevisionDiffDrawer.operations-overlay-modern {
  --oo-ink: var(--rio-neutral-900);
  --oo-muted: var(--rio-neutral-500);
  --oo-line: var(--rio-line);
  --oo-surface: var(--rio-surface);
  --oo-quiet: var(--rio-canvas);
  --oo-accent: var(--rio-primary);
  --oo-radius: var(--rio-radius-lg);
}

/* ——— AI Training + Flow Editor ——— */
body.respond-ui #aiTrainingView.ai-training-modern {
  --ait-ink: var(--rio-neutral-900);
  --ait-muted: var(--rio-neutral-500);
  --ait-line: var(--rio-line);
  --ait-surface: var(--rio-surface);
  --ait-surface-quiet: var(--rio-canvas);
  --ait-accent: var(--rio-primary);
  --ait-radius: var(--rio-radius-md);
}

body.respond-ui #aiTrainingView .panel {
  border-radius: var(--rio-radius-lg);
  box-shadow: none;
}

body.respond-ui .sales-flow-editor.sales-flow-editor-modern {
  --sfe-ink: var(--rio-neutral-900);
  --sfe-muted: var(--rio-neutral-500);
  --sfe-line: var(--rio-line);
  --sfe-surface: var(--rio-surface);
  --sfe-surface-quiet: var(--rio-canvas);
  --sfe-accent: var(--rio-primary);
  --sfe-publish: var(--rio-primary);
  --sfe-radius: var(--rio-radius-md);
}

/* ——— Settings (all panels) ——— */
body.respond-ui #settingsView.settings-company-system-modern,
body.respond-ui #settingsView {
  --scs-ink: var(--rio-neutral-900);
  --scs-muted: var(--rio-neutral-500);
  --scs-line: var(--rio-line);
  --scs-surface: var(--rio-surface);
  --scs-surface-quiet: var(--rio-canvas);
  --scs-accent: var(--rio-primary);
  --scs-radius: var(--rio-radius-md);
}

body.respond-ui #settingsView .settings-users-modern,
body.respond-ui #settingsView [data-settings-panel="users"] {
  --su-ink: var(--rio-neutral-900);
  --su-muted: var(--rio-neutral-500);
  --su-line: var(--rio-line);
  --su-surface: var(--rio-surface);
  --su-surface-quiet: var(--rio-canvas);
  --su-accent: var(--rio-primary);
  --su-radius: var(--rio-radius-md);
}

body.respond-ui #settingsView .settings-meta-sheets-modern {
  --sms-ink: var(--rio-neutral-900);
  --sms-muted: var(--rio-neutral-500);
  --sms-line: var(--rio-line);
  --sms-surface: var(--rio-surface);
  --sms-surface-quiet: var(--rio-canvas);
  --sms-accent: var(--rio-primary);
  --sms-ok: var(--rio-primary);
  --sms-radius: var(--rio-radius-md);
}

body.respond-ui #settingsView .settings-pipeline-installments-modern {
  --spi-ink: var(--rio-neutral-900);
  --spi-muted: var(--rio-neutral-500);
  --spi-line: var(--rio-line);
  --spi-surface: var(--rio-surface);
  --spi-surface-quiet: var(--rio-canvas);
  --spi-accent: var(--rio-primary);
  --spi-radius: var(--rio-radius-md);
}

body.respond-ui #settingsView .settings-proposal-engine-v2-modern {
  --pe2m-ink: var(--rio-neutral-900);
  --pe2m-muted: var(--rio-neutral-500);
  --pe2m-line: var(--rio-line);
  --pe2m-surface: var(--rio-surface);
  --pe2m-surface-quiet: var(--rio-canvas);
  --pe2m-accent: var(--rio-primary);
  --pe2m-radius: var(--rio-radius-md);
}

body.respond-ui #settingsView .settings-v2-panel,
body.respond-ui #settingsView .panel,
body.respond-ui #settingsView .settings-card {
  border-radius: var(--rio-radius-lg);
  box-shadow: none;
  border-color: var(--rio-line);
}

body.respond-ui #settingsView .settings-nav-item.active,
body.respond-ui #settingsView .settings-v2-nav button.active,
body.respond-ui #settingsView [data-settings-nav].is-active {
  background: var(--rio-nav);
  color: var(--rio-primary-hover);
}

/* ——— Auth overlays (login / password) ——— */
body.respond-ui #loginScreen.auth-overlay-modern,
body.respond-ui #passwordChangeScreen.auth-overlay-modern,
body.respond-ui #forgotPasswordScreen.auth-overlay-modern,
body.respond-ui #resetPasswordScreen.auth-overlay-modern {
  --ao-ink: var(--rio-neutral-900);
  --ao-muted: var(--rio-neutral-500);
  --ao-line: var(--rio-line);
  --ao-surface: var(--rio-surface);
  --ao-accent: var(--rio-primary);
  --ao-accent-strong: var(--rio-primary-hover);
  --ao-accent-soft: var(--rio-primary-soft);
  --ao-radius: var(--rio-radius-lg);
}

body.respond-ui #loginScreen.auth-overlay-modern .sidebar-brand-mark,
body.respond-ui .login-brand-mark {
  color: var(--rio-primary-hover);
  background: var(--rio-primary-soft);
}

/* ——— Tabs / chips / tables shared ——— */
body.respond-ui .view-toggle button.active,
body.respond-ui .segmented-control button.active,
body.respond-ui .filter-chip.is-active,
body.respond-ui .chip.is-active {
  background: var(--rio-nav);
  color: var(--rio-primary-hover);
  border-color: transparent;
}

body.respond-ui table thead th {
  color: var(--rio-neutral-500);
  border-bottom-color: var(--rio-line);
}

body.respond-ui .status-dot {
  background: var(--rio-primary);
}

/* Mobile: keep shell readable; layout stays in mobile.css */
@media screen and (max-width: 980px) {
  body.respond-ui #appShell .sidebar {
    background: var(--rio-surface);
  }
}


/* ——— Settings horizontal top nav (Respond) ———
 * Desktop: move inner settings menu above content as horizontal tabs.
 * Mobile (<=1024): leave visual-recovery / mobile.css picker behavior alone.
 */
@media (min-width: 1025px) {
  body.respond-ui #settingsView.settings-company-system-modern .settings-v2-page-head {
    margin-bottom: 10px;
  }

  body.respond-ui #settingsView.settings-company-system-modern .settings-v2-shell,
  #settingsView.settings-company-system-modern .settings-v2-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-template-columns: none;
    align-items: stretch;
  }

  body.respond-ui #settingsView.settings-company-system-modern .settings-v2-nav,
  #settingsView.settings-company-system-modern .settings-v2-nav {
    position: static;
    top: auto;
    order: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 8px 10px;
    max-height: none;
    overflow: visible;
    border: 1px solid var(--rio-line, var(--line));
    border-radius: var(--rio-radius-lg, 12px);
    background: var(--rio-surface, #fff);
    box-shadow: none;
  }

  body.respond-ui #settingsView.settings-company-system-modern .settings-v2-nav-group,
  #settingsView.settings-company-system-modern .settings-v2-nav-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    border-bottom: none;
  }

  body.respond-ui #settingsView.settings-company-system-modern .settings-v2-nav-group + .settings-v2-nav-group,
  #settingsView.settings-company-system-modern .settings-v2-nav-group + .settings-v2-nav-group {
    padding-left: 8px;
    margin-left: 4px;
    border-left: 1px solid var(--rio-line, var(--line));
  }

  body.respond-ui #settingsView.settings-company-system-modern .settings-v2-nav-section-title,
  #settingsView.settings-company-system-modern .settings-v2-nav-section-title {
    display: none;
  }

  body.respond-ui #settingsView.settings-company-system-modern .settings-v2-nav [data-settings-nav],
  #settingsView.settings-company-system-modern .settings-v2-nav [data-settings-nav] {
    display: inline-flex;
    width: auto;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: var(--rio-radius-md, 8px);
    color: var(--rio-neutral-600, var(--muted));
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
  }

  body.respond-ui #settingsView.settings-company-system-modern .settings-v2-nav [data-settings-nav]:hover,
  #settingsView.settings-company-system-modern .settings-v2-nav [data-settings-nav]:hover {
    background: var(--rio-gray-hover, #f2f2f3);
    color: var(--rio-neutral-800, var(--ink));
  }

  body.respond-ui #settingsView.settings-company-system-modern .settings-v2-nav [data-settings-nav].is-active,
  body.respond-ui #settingsView.settings-company-system-modern .settings-v2-nav [data-settings-nav][aria-current="page"],
  #settingsView.settings-company-system-modern .settings-v2-nav [data-settings-nav].is-active,
  #settingsView.settings-company-system-modern .settings-v2-nav [data-settings-nav][aria-current="page"] {
    background: var(--rio-nav, #f0f5ff);
    color: var(--rio-primary-hover, #0058f0);
    font-weight: 650;
    position: static;
  }

  body.respond-ui #settingsView.settings-company-system-modern .settings-v2-nav [data-settings-nav].is-active::before,
  #settingsView.settings-company-system-modern .settings-v2-nav [data-settings-nav].is-active::before {
    display: none;
    content: none;
  }

  body.respond-ui #settingsView.settings-company-system-modern .settings-v2-nav-icon,
  #settingsView.settings-company-system-modern .settings-v2-nav-icon {
    width: 16px;
    height: 16px;
  }

  body.respond-ui #settingsView.settings-company-system-modern .settings-v2-main,
  #settingsView.settings-company-system-modern .settings-v2-main {
    min-width: 0;
    width: 100%;
  }

  /* Settings focus mode no longer depends on collapsed main sidebar */
  .app.is-settings-focus .settings-v2-shell {
    grid-template-columns: none;
  }

  .app.is-settings-focus .settings-v2-nav {
    max-height: none;
  }
}