/**
 * Apple / HIG UI layer — поверх styles.css.
 * SF-типографика, filled-кнопки, inset-группы, segmented controls, sheet-модалки.
 */

/* ── Apple component tokens (все темы) ── */
html {
  --apple-blue: #0a84ff;
  --apple-fill: rgba(120, 120, 128, 0.32);
  --apple-fill-hover: rgba(120, 120, 128, 0.44);
  --apple-separator: rgba(84, 84, 88, 0.65);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-pill: 980px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 4px rgba(10, 132, 255, 0.38);
  --transition: 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --ff: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;
  --ff-heading: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --shell-gap: 0.75rem;
  --shell-text: 0.9375rem;
  --shell-line: 1.47;
}

/* ── Apple surfaces: graphite (основная тёмная) ── */
html[data-console-theme="graphite"] {
  --bg: #000000;
  --bg-card: #1c1c1e;
  --bg-elevated: #2c2c2e;
  --bg-hover: #3a3a3c;
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.14);
  --text: #f5f5f7;
  --text-strong: #ffffff;
  --text-muted: rgba(235, 235, 245, 0.62);
  --text-dim: rgba(235, 235, 245, 0.42);
  --lime: #c8f542;
  --lime-hover: #d6ff52;
  --lime-dim: rgba(200, 245, 66, 0.16);
  --lime-glow: rgba(200, 245, 66, 0.12);
  --accent-contrast: #0a0a0a;
}

/* ── Apple surfaces: blue (тоже iOS dark, акцент cyan) ── */
html[data-console-theme="blue"] {
  --bg: #000000;
  --bg-card: #1c1c1e;
  --bg-elevated: #2c2c2e;
  --bg-hover: #3a3a3c;
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.14);
  --text: #f5f5f7;
  --text-strong: #ffffff;
  --text-muted: rgba(235, 235, 245, 0.62);
  --text-dim: rgba(235, 235, 245, 0.42);
  --lime: #64d2ff;
  --lime-hover: #7ddcff;
  --lime-dim: rgba(100, 210, 255, 0.16);
  --lime-glow: rgba(100, 210, 255, 0.12);
  --accent-contrast: #0a0a0a;
}

html[data-console-theme="light"] {
  --apple-fill: rgba(120, 120, 128, 0.16);
  --apple-fill-hover: rgba(120, 120, 128, 0.24);
  --apple-separator: rgba(60, 60, 67, 0.18);
  --shadow-focus: 0 0 0 4px rgba(0, 122, 255, 0.28);
  --bg: #f2f2f7;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-hover: #e5e5ea;
  --border: rgba(60, 60, 67, 0.12);
  --border-light: rgba(60, 60, 67, 0.18);
  --text: #1c1c1e;
  --text-strong: #000000;
  --text-muted: rgba(60, 60, 67, 0.68);
  --text-dim: rgba(60, 60, 67, 0.48);
  --lime: #248a3d;
  --lime-hover: #1f7434;
  --lime-dim: rgba(36, 138, 61, 0.12);
  --accent-contrast: #ffffff;
  --apple-fill: rgba(120, 120, 128, 0.16);
  --apple-fill-hover: rgba(120, 120, 128, 0.24);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 4px rgba(0, 122, 255, 0.28);
}

html[data-console-theme="windows"] {
  --bg: #f2f2f7;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-hover: #e5e5ea;
  --border: rgba(60, 60, 67, 0.12);
  --border-light: rgba(60, 60, 67, 0.18);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --apple-fill: rgba(120, 120, 128, 0.16);
  --apple-fill-hover: rgba(120, 120, 128, 0.24);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  font-family: var(--ff);
  font-size: var(--shell-text);
  line-height: var(--shell-line);
  letter-spacing: -0.011em;
}

h1, h2, h3, h4, .page-title {
  font-family: var(--ff-heading);
  font-weight: 600;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.page-title {
  font-size: clamp(1.375rem, 1.15rem + 0.5vw, 1.75rem);
  font-weight: 700;
}

.hint,
.card-meta,
.page-subtitle {
  text-wrap: pretty;
}

.main-content {
  margin-left: 260px;
  width: calc(100% - 260px);
  padding: 1.25rem clamp(1rem, 2vw, 2rem) 2rem;
}

/* ── Sidebar: Settings-style inset groups ── */
.sidebar {
  width: 260px;
  background: var(--bg-card);
  border-right: 1px solid var(--apple-separator);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sidebar__nav {
  padding: 0.85rem 0.65rem 1.25rem;
  gap: 0.65rem;
}

.sidebar__group,
.sidebar__group--primary,
.sidebar__group--finance,
.sidebar__group--team,
.sidebar__group--studio,
.sidebar__group--system {
  margin: 0;
  padding: 0.2rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  box-shadow: none;
}

.sidebar__group--primary {
  background: var(--bg-elevated);
  border: none;
}

.sidebar__group-label {
  padding: 0.45rem 0.75rem 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.sidebar__group--primary .sidebar__group-label {
  color: var(--text-muted);
  opacity: 1;
}

.sidebar__btn {
  min-height: 2.75rem;
  padding: 0.45rem 0.65rem;
  gap: 0.65rem;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  transition-property: background-color, color, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.sidebar__btn:hover,
.sidebar__btn:active {
  transform: none;
  background: var(--bg-hover);
}

.sidebar__btn > svg,
.sidebar__btn > .ui-icon:not(.ui-icon--tile) {
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0.72;
  stroke-width: 1.75;
  flex-shrink: 0;
}

.sidebar__btn > .ui-icon--tile {
  width: 1.875rem;
  height: 1.875rem;
  opacity: 1;
  flex-shrink: 0;
}

.sidebar__btn > .ui-icon--sprite {
  width: 2rem;
  height: 2rem;
  opacity: 1;
  flex-shrink: 0;
  border-radius: 22%;
}

.sidebar__btn:hover > svg,
.sidebar__btn:hover > .ui-icon:not(.ui-icon--tile) {
  opacity: 1;
  background: transparent;
  border: none;
}

.sidebar__btn:hover > .ui-icon--tile {
  filter: brightness(1.08);
}

.sidebar__btn.active > svg,
.sidebar__btn.active > .ui-icon:not(.ui-icon--tile) {
  opacity: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--lime);
}

.sidebar__btn.active > .ui-icon--tile {
  opacity: 1;
  color: #ffffff !important;
  box-shadow:
    0 0 0 2px var(--lime),
    0 4px 14px rgba(0, 0, 0, 0.34) !important;
  filter: none;
  transform: scale(1.04);
}

.sidebar__btn.active,
.sidebar__group--primary .sidebar__btn.active {
  background: var(--lime-dim) !important;
  border: none !important;
  color: var(--lime) !important;
  box-shadow: none !important;
  font-weight: 600;
}

.sidebar__badge {
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--apple-fill);
}

/* ── Buttons: Apple filled / tinted ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.05rem;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--ff);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  background: var(--apple-fill);
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition-property: transform, background-color, opacity, filter;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.btn:hover {
  transform: none;
  background: var(--apple-fill-hover);
  box-shadow: none;
}

.btn:active {
  transform: scale(0.97);
  opacity: 0.88;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn--primary {
  background: var(--lime);
  color: var(--accent-contrast);
  font-weight: 600;
}

.btn--primary:hover {
  background: var(--lime-hover);
  filter: brightness(1.04);
}

.btn--danger {
  background: rgba(255, 69, 58, 0.18);
  color: #ff453a;
  border: none;
}

.btn--danger:hover {
  background: rgba(255, 69, 58, 0.28);
}

.btn--sm {
  min-height: 2.125rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-xs);
}

.btn--xs {
  min-height: 1.875rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  border-radius: 7px;
}

.btn--icon {
  min-width: 2.75rem;
  padding: 0.45rem;
}

.btn svg {
  width: 1rem;
  height: 1rem;
}

.btn-group {
  gap: 0.5rem;
}

/* ── Inputs: inset grouped fields ── */
.input,
input[type="text"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="tel"],
input[type="search"],
select,
textarea,
.filters select,
.filters input[type="date"],
.filters input[type="month"],
.modal-content input,
.modal-content select,
.modal-content textarea {
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  font-family: var(--ff);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: none;
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1px var(--border-light);
  transition-property: box-shadow, background-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

textarea {
  min-height: 5rem;
  line-height: 1.45;
}

.input:focus,
input:focus,
select:focus,
textarea:focus,
.filters select:focus,
.filters input:focus,
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--apple-blue);
  border: none;
}

.input-sm,
select.input-sm,
input.input-sm,
textarea.input-sm {
  min-height: 2rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.8125rem;
}

/* ── Cards & panels ── */
.card,
.today-panel,
.motivation-hero,
.admin-admin-card {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: var(--shell-gap);
  box-shadow: var(--shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition-property: background-color, box-shadow;
  transition-duration: 150ms;
}

.card:hover,
.today-panel:hover {
  transform: none;
  border: none;
  box-shadow: var(--shadow);
}

.card-header h4,
.today-panel__title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ── Segmented controls (tabs) ── */
.bk-cat-tabs,
.pe-cat-tabs,
.motivation-toolbar {
  gap: 0.25rem;
  padding: 0.2rem;
  background: var(--bg-elevated);
  border: none;
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1px var(--border);
}

.bk-cat-tab,
.pe-cat-tab {
  border: none;
  border-radius: 7px;
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.45rem 0.7rem;
  color: var(--text-muted);
  background: transparent;
  transition-property: background-color, color, box-shadow;
  transition-duration: 150ms;
}

.bk-cat-tab:hover,
.pe-cat-tab:hover {
  color: var(--text);
}

.bk-cat-tab--active,
.pe-cat-tab--active,
.bk-cat-tab--active.bk-cat-tab--online,
.bk-cat-tab--active.bk-cat-tab--wash,
.bk-cat-tab--active.bk-cat-tab--detailing,
.bk-cat-tab--active.bk-cat-tab--commerce,
.pe-cat-tab--active.pe-cat-tab--wash,
.pe-cat-tab--active.pe-cat-tab--detailing {
  background: var(--bg-hover) !important;
  color: var(--text-strong) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), inset 0 0 0 0.5px var(--border-light) !important;
  font-weight: 600;
}

/* ── Status badges: capsule pills ── */
.status,
.today-payment-reminder__badge,
.clients-chip,
.bk-cat-tab__count,
.pe-cat-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
}

.status.pending { background: rgba(255, 159, 10, 0.18); color: #ff9f0a; }
.status.confirmed,
.status.new { background: rgba(10, 132, 255, 0.18); color: #0a84ff; }
.status.in_progress,
.status.reviewed { background: var(--lime-dim); color: var(--lime); }
.status.completed,
.status.accepted,
.status.done { background: rgba(48, 209, 88, 0.18); color: #30d158; }
.status.cancelled,
.status.rejected { background: rgba(255, 69, 58, 0.18); color: #ff453a; }
.status.approaching { background: rgba(255, 159, 10, 0.24); color: #ffb340; }

/* ── Modals: sheet style ── */
.modal {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  animation: apple-fade-in 180ms ease-out;
}

.modal-content {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  animation: apple-sheet-in 220ms cubic-bezier(0.25, 0.1, 0.25, 1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.modal-content h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

@keyframes apple-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes apple-sheet-in {
  from {
    opacity: 0.92;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Toasts & reminders ── */
.admin-booking-toast,
.unpaid-works-toast,
.today-payment-reminder {
  background: var(--bg-card) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}

.today-payment-reminder__title {
  color: #ff9f0a;
  font-weight: 600;
}

.today-payment-reminder__row {
  border: none;
  border-radius: var(--radius-xs);
  background: var(--bg-elevated);
}

/* ── Today screen ── */
.today-kpi {
  gap: 0.65rem;
}

.today-kpi > * {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 0.85rem 1rem;
}

.today-header {
  margin-bottom: 1rem;
}

.today-greeting {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ── Tables ── */
table,
.table,
.data-table {
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

table th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--apple-separator);
}

table td {
  border-bottom: 1px solid var(--border);
}

/* ── Filters ── */
.filters {
  gap: var(--shell-gap);
  margin-bottom: 1.15rem;
}

/* ── Work editor ── */
.we-service-card {
  border: none;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px var(--border);
}

.work-editor-modal.modal-content--works {
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}

.we-summary-bar {
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ── Mobile topbar ── */
html.mobile-console .mobile-topbar {
  background: rgba(28, 28, 30, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--apple-separator);
}

html.mobile-console .mobile-topbar__toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: none;
  border-radius: var(--radius-xs);
  background: var(--apple-fill);
}

html.mobile-console .mobile-topbar__title {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Auth gate ── */
.console-auth-gate {
  background: #08090c;
}

.console-auth-gate__card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  background: #111318;
  box-shadow: none;
}

/* ── Screen transitions ── */
.screen.screen--enter {
  animation: apple-fade-in 140ms ease-out both;
  filter: none;
  transform: none;
}

/* ── Scrollbars (WebKit) ── */
.sidebar__nav::-webkit-scrollbar,
.today-payment-reminder__list::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.sidebar__nav::-webkit-scrollbar-thumb,
.today-payment-reminder__list::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

html[data-console-theme="light"] .sidebar__nav::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .screen.screen--enter,
  .modal,
  .modal-content,
  .admin-booking-toast,
  .admin-booking-alert__panel {
    animation: none;
  }
  .btn:active,
  .sidebar__btn:active {
    transform: none;
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: min(19rem, 88vw);
  }
  .main-content {
    margin-left: 0;
    width: 100%;
  }
}

html.mobile-console .main-content {
  padding: 0.85rem 0.85rem 1.5rem;
}

/* ── Win over «visual calm» block in styles.css ── */
.status,
.clients-chip,
.clients-chip--points,
.clients-chip--vip,
.today-payment-reminder__badge,
.bk-cat-tab__count,
.pe-cat-badge,
.pe-prompt-chip,
.tg-pref-btn {
  border-radius: var(--radius-pill) !important;
}

.admin-booking-toast,
.today-payment-reminder {
  border: none !important;
  box-shadow: var(--shadow-soft) !important;
}

.bk-cat-tab--active,
.bk-cat-tab--active.bk-cat-tab--online,
.bk-cat-tab--active.bk-cat-tab--wash,
.bk-cat-tab--active.bk-cat-tab--detailing,
.bk-cat-tab--active.bk-cat-tab--commerce,
.pe-cat-tab--active,
.pe-cat-tab--active.pe-cat-tab--wash,
.pe-cat-tab--active.pe-cat-tab--detailing {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), inset 0 0 0 0.5px var(--border-light) !important;
}

/* ── List cards ── */
.client-card,
.clients-card,
.booking-card,
.tasks-task-card,
.candidate-card,
.car-folder-card {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition-property: background-color, transform;
  transition-duration: 150ms;
}

.client-card:hover,
.clients-card:hover,
.booking-card:hover,
.tasks-task-card:hover {
  transform: none;
  box-shadow: var(--shadow);
  border: none;
}

.booking-card--wash,
.booking-card--detailing,
.booking-card--commerce,
.booking-card--online {
  border-left: 3px solid transparent !important;
}

.booking-card--wash { border-left-color: var(--blue) !important; }
.booking-card--detailing { border-left-color: var(--lime) !important; }
.booking-card--commerce { border-left-color: var(--orange) !important; }
.booking-card--online { border-left-color: #bf5af2 !important; }

/* ── Links & accents ── */
a,
.card-meta a {
  color: var(--apple-blue);
}

.card-meta a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Commerce & certificates modules ── */
.commerce-tabs {
  gap: 0.25rem;
  padding: 0.2rem;
  background: var(--bg-elevated);
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1px var(--border);
}

.commerce-tab {
  border: none;
  background: transparent;
  border-radius: 7px;
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--text-muted);
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.commerce-tab--active {
  background: var(--bg-hover) !important;
  color: var(--text-strong) !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  font-weight: 600;
}

.commerce-editor__backdrop {
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.commerce-editor__panel {
  border-left: none;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.35);
}

.commerce-photo .btn {
  border-radius: var(--radius-xs);
}

/* ── Lucide / Higgsfield icons — iOS colored tiles ── */
html {
  --icon-tone-orange: #ff9500;
  --icon-tone-blue: #007aff;
  --icon-tone-indigo: #5856d6;
  --icon-tone-cyan: #32ade6;
  --icon-tone-pink: #ff2d55;
  --icon-tone-red: #ff3b30;
  --icon-tone-green: #34c759;
  --icon-tone-purple: #af52de;
  --icon-tone-teal: #5ac8fa;
  --icon-tone-yellow: #ffd60a;
  --icon-tone-gray: #8e8e93;
  --icon-tone-mint: #00c7be;
  --icon-tone-brown: #ac8e68;
}

.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
  line-height: 0;
}

.ui-icon--tile {
  position: relative;
  isolation: isolate;
  border-radius: 8px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--icon-tone, var(--icon-tone-gray)) 72%, #ffffff 28%) 0%,
      var(--icon-tone, var(--icon-tone-gray)) 46%,
      color-mix(in srgb, var(--icon-tone, var(--icon-tone-gray)) 68%, #000000 32%) 100%
    );
  color: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34) inset,
    0 -1px 0 rgba(0, 0, 0, 0.22) inset,
    0 4px 12px rgba(0, 0, 0, 0.32);
  transition: filter 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
  overflow: hidden;
}

.ui-icon--tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.1) 34%,
    transparent 58%
  );
  pointer-events: none;
  z-index: 1;
}

.ui-icon--tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.24);
  pointer-events: none;
  z-index: 2;
}

.ui-icon--sprite {
  width: 2rem;
  height: 2rem;
  border-radius: 22%;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
  box-shadow: none;
}

.ui-icon--sprite .ui-icon__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.sidebar__btn > .ui-icon--sprite {
  width: 2rem;
  height: 2rem;
  opacity: 1;
  flex-shrink: 0;
  border-radius: 22%;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.sidebar__btn:hover > .ui-icon--sprite {
  transform: scale(1.05);
}

.sidebar__btn.active > .ui-icon--sprite {
  opacity: 1;
  box-shadow:
    0 0 0 2px var(--lime),
    0 0 16px rgba(200, 245, 66, 0.22) !important;
  transform: scale(1.06);
  filter: none;
}

.ui-icon__svg--rich .ui-icon__layer--shine {
  pointer-events: none;
}

.ui-icon__svg--rich .ui-icon__layer--depth {
  color: rgba(0, 0, 0, 0.85);
}

.sidebar__btn > .ui-icon--tile {
  width: 1.875rem;
  height: 1.875rem;
  opacity: 1;
}

.sidebar__btn > .ui-icon--tile .ui-icon__svg,
.sidebar__btn > .ui-icon--tile .ui-icon__svg--rich {
  width: 1.125rem;
  height: 1.125rem;
  position: relative;
  z-index: 3;
}

.ui-icon--tone-orange { --icon-tone: var(--icon-tone-orange); }
.ui-icon--tone-blue { --icon-tone: var(--icon-tone-blue); }
.ui-icon--tone-indigo { --icon-tone: var(--icon-tone-indigo); }
.ui-icon--tone-cyan { --icon-tone: var(--icon-tone-cyan); }
.ui-icon--tone-pink { --icon-tone: var(--icon-tone-pink); }
.ui-icon--tone-red { --icon-tone: var(--icon-tone-red); }
.ui-icon--tone-green { --icon-tone: var(--icon-tone-green); }
.ui-icon--tone-purple { --icon-tone: var(--icon-tone-purple); }
.ui-icon--tone-teal { --icon-tone: var(--icon-tone-teal); }
.ui-icon--tone-yellow { --icon-tone: var(--icon-tone-yellow); }
.ui-icon--tone-gray { --icon-tone: var(--icon-tone-gray); }
.ui-icon--tone-mint { --icon-tone: var(--icon-tone-mint); }
.ui-icon--tone-brown { --icon-tone: var(--icon-tone-brown); }

.ui-icon--tile .ui-icon__svg,
.ui-icon--tile .ui-icon__svg--rich {
  width: 1.125rem;
  height: 1.125rem;
  position: relative;
  z-index: 3;
}

.ui-icon__svg {
  display: block;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-icon--sm .ui-icon__svg,
.ui-icon[data-icon-size="16"] .ui-icon__svg {
  width: 16px;
  height: 16px;
}

.ui-icon--md .ui-icon__svg,
.ui-icon[data-icon-size="20"] .ui-icon__svg {
  width: 20px;
  height: 20px;
}

.ui-icon--lg .ui-icon__svg,
.ui-icon[data-icon-size="40"] .ui-icon__svg {
  width: 40px;
  height: 40px;
}

.btn .ui-icon {
  margin-inline-end: 0.1rem;
}

.empty-state .ui-icon--tile {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 0.65rem;
  opacity: 1;
  border-radius: 12px;
}

.empty-state .ui-icon--tile .ui-icon__svg {
  width: 1.35rem;
  height: 1.35rem;
}

.empty-state .ui-icon:not(.ui-icon--tile) {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 0.65rem;
  opacity: 0.55;
  color: var(--text-muted);
}

.today-payment-reminder__toggle .ui-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.today-payment-reminder--collapsed .today-payment-reminder__toggle .ui-icon__svg {
  transform: rotate(-90deg);
  transition: transform 150ms ease-out;
}

.mobile-topbar__toggle .ui-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.pub-service-card__icon {
  padding: 0;
  background: transparent !important;
}

.pub-service-card__icon .ui-icon--tile {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.pub-service-card__icon .ui-icon--tile .ui-icon__svg,
.pub-service-card__icon .ui-icon--tile .ui-icon__svg--rich {
  width: 1.35rem;
  height: 1.35rem;
}

.clients-search .ui-icon--tile,
.clients-toolbar .ui-icon--tile {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 7px;
}

.booking-client__avatar-btn .ui-icon--tile {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

.booking-client__avatar-btn .ui-icon--tile .ui-icon__svg {
  width: 1rem;
  height: 1rem;
}

/* Legacy inline SVG → iOS-like stroke until replaced by Lucide */
.sidebar svg:not(.ui-icon__svg),
.btn svg:not(.ui-icon__svg),
.modal-content svg:not(.ui-icon__svg) {
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}