/* RimBeautyStudio neutral surface palette — 2026-10-14.
   Decorative light surfaces only. Branding --accent and --accent2 remain dynamic. */
:root {
  --paper: #f8f9fc;
  --panel: #ffffff;
  --line: #e4e8ef;
  --surface-border: #e4e8ef;
  --surface-divider: #edf0f4;
  --surface-header: #f5f7fa;
  --surface-shadow: 0 5px 20px rgba(31, 41, 55, .035);
}
body:not(.verification-page),
.has-app-shell { background: #f8f9fc; }
/* The navigation and account controls keep the studio's configured branding accent. */
.has-app-shell .app-topbar,
.topbar { background: #ffffff; border-bottom-color: var(--surface-border); }
.has-app-shell .app-sidebar { background: #ffffff; border-color: var(--surface-border); }
.card, .auth-card, .stat, .filterbar,
.service-card, .services-summary > div, .services-empty-state,
.report-kpi, .report-method-card, .report-ageing,
.has-app-shell .client-list-toolbar {
  background: #ffffff;
  border-color: var(--surface-border);
  box-shadow: var(--surface-shadow);
}
/* Existing semantic alerts, warning/danger zones, focus and selection states are intentionally excluded. */
.card, .auth-card, .stat, .filterbar { box-shadow: var(--surface-shadow); }
th, td { border-bottom-color: var(--surface-divider); }
tfoot th, tfoot td { border-top-color: var(--surface-border); }
.tablewrap { background: #ffffff; }
.tablewrap table { background: #ffffff; }
.tablewrap thead, .provider-table thead { background: var(--surface-header); }
.tablewrap th, .provider-table th { background: transparent; }
.tablewrap tbody tr:not([hidden]):hover { background: #fafbfd; }
.record, .metricrow, .payment-reversal-row { border-bottom-color: var(--surface-divider); }
.payment-reversal-row { border-top-color: var(--surface-divider); }
input:not([type="checkbox"]):not([type="radio"]),
select, textarea { border-color: #d8dee7; background-color: #ffffff; }
/* Retain branded focus ring and selected-state controls from the original theme. */
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
/* Neutral borders for structural subsections, never status/danger badges. */
.service-price-row, .service-meta-row, .service-history-body,
.service-status-form { border-color: var(--surface-divider); }
.service-card.is-inactive { background: #fbfcfd; }
.service-current-pricing { background: #ffffff; }
.report-tabs { background: var(--surface-header); border-color: var(--surface-border); }
.report-method-card { background: #ffffff; }
.report-summary-list > div { border-bottom-color: var(--surface-divider); }
/* Existing mobile card transformation stays intact; improve just its surface/edge. */
@media (max-width: 760px) {
  table.portrait-card-ready tbody tr:not([hidden]) {
    background: #ffffff;
    border-color: var(--surface-border);
    box-shadow: var(--surface-shadow);
  }
}

/* Shared interactive states. Neutral section and table borders are deliberately excluded. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--control-hover-border,var(--accent));
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline-color: var(--control-focus-ring,var(--accent2));
}
/* Keyboard-accessible navigation and discrete actions; semantic danger controls keep their own colors. */
.app-menu-button:focus-visible,
.sidebar-link:focus-visible,
.app-signout:focus-visible,
.date-shortcut:focus-visible,
.pagination-icon:focus-visible,
.pagination-page:focus-visible,
.report-page-button:focus-visible,
.report-export-trigger:focus-visible,
.settings-history > summary:focus-visible,
.tax-card-header:focus-visible,
.guardian-record > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Native selection controls and ordinary keyboard-focused actions follow Branding. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
button:not(.danger):not(.danger-outline):not(.button-danger):not(.destructive):focus-visible,
a.button:not(.danger):not(.danger-outline):focus-visible,
.icon-button:not(.danger):not(.danger-outline):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}