/* =============================================================
   Malina — Supplement
   All variables use tokens from tokens.css.
   NO references to: --bg-card, --bg-surface, --bg-elevated,
   --bg-hover, --text-primary, --text-secondary, --text-muted,
   --gold, --gold-dim, --gold-light, --border-gold, --rose,
   --teal, --teal-dim, --mint, --shadow-card, --dur-med,
   --border-gold-mid, --border-subtle, --rose-dim, --shadow-gold.
   ============================================================= */

/* ── Appointment overlay (enhanced modal) ── */
.appt-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px); z-index: var(--z-modal);
  display: none; align-items: flex-start; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.appt-overlay.open { display: flex; }
.appt-modal {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); width: 100%; max-width: 940px;
  box-shadow: var(--shadow-lg); overflow: hidden; margin: auto; flex-shrink: 0;
}
/* ── Appointment status bar ──────────────────────────────────────────────
   Every button carries its own colour via --st, resolved from the shared
   --status-* tokens (tokens.css) by the [data-status] rules below. The dot
   shows the colour at rest; the active button fills with it. Adding a status
   = one APPT_STATUSES entry + one token + one [data-status] line here. */
.appt-status-bar { display: flex; background: var(--bg-elev-2); border-bottom: 1px solid var(--border); }
.appt-status-btn {
  flex: 1; padding: 9px 6px; text-align: center; font-size: 11px; font-weight: 600;
  cursor: pointer; border: none; background: none; color: var(--fg-dim);
  transition: all 0.15s; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-bottom: 2px solid transparent;
}
.appt-status-btn[data-status="new"]         { --st: var(--status-new); }
.appt-status-btn[data-status="confirmed"]   { --st: var(--status-confirmed); }
.appt-status-btn[data-status="arrived"]     { --st: var(--status-arrived); }
.appt-status-btn[data-status="completed"]   { --st: var(--status-completed); }
.appt-status-btn[data-status="cancelled"]   { --st: var(--status-cancelled); }
.appt-status-btn[data-status="not_arrived"] { --st: var(--status-not_arrived); }
.appt-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: var(--st, var(--fg-dim));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--st, transparent) 22%, transparent);
  transition: background 0.15s, box-shadow 0.15s;
}
.appt-status-btn:hover { color: var(--fg); background: var(--bg-elev-3); border-bottom-color: var(--st); }
.appt-status-btn.active {
  background: var(--st); color: var(--status-ink);
  border-bottom-color: var(--st);
}
.appt-status-btn.active .appt-status-dot { background: var(--status-ink); box-shadow: none; }

/* ── Schedule top-bar status legend (live counts for the visible period) ──
   Never wraps — the topbar is a single row. Chips are dot + count by default
   and only spell out their label once the viewport can spare the width. */
.status-legend { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.status-legend-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--st) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--st) 34%, transparent);
  font-size: 10.5px; font-weight: 600; color: var(--fg-muted);
  white-space: nowrap; user-select: none; cursor: default;
}
.status-legend-item .sl-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--st);
}
.status-legend-item .sl-label { display: none; }
.status-legend-item .sl-count {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg);
}
.status-legend-item[data-count="0"] { opacity: 0.40; }
@media (min-width: 1800px) {
  .status-legend-item .sl-label { display: inline; }
}
/* Phones/tablets: the topbar scrolls horizontally and is already dense */
@media (max-width: 1024px) { .status-legend { display: none; } }

.appt-tabs {
  display: flex; border-bottom: 1px solid var(--border); padding: 0 16px;
  background: var(--bg-elev-1); overflow-x: auto; gap: 0;
}
.appt-tab {
  padding: 10px 14px; font-size: 11px; font-weight: 600; cursor: pointer;
  color: var(--fg-dim); border-bottom: 2px solid transparent;
  white-space: nowrap; transition: all 0.15s; user-select: none;
  background: none; border-top: none; border-left: none; border-right: none;
}
.appt-tab:hover { color: var(--fg-muted); }
.appt-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.appt-tab-panel { display: none; }
.appt-tab-panel.active { display: block; }
.appt-tab-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }

/* 3-column layout */
.appt-3col {
  display: grid; grid-template-columns: 230px 1fr 215px;
  border-bottom: 1px solid var(--border);
}
.appt-col-left {
  padding: 15px 16px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 11px;
}
.appt-col-mid {
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; max-height: 460px;
}
.appt-col-right {
  padding: 15px 16px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 11px;
}
@media (max-width: 700px) {
  .appt-3col { grid-template-columns: 1fr; }
  .appt-col-left, .appt-col-right { border: none; border-bottom: 1px solid var(--border); }
  .appt-col-mid { max-height: none; }

  .time-selection-group {
    gap: 8px;
  }

  .time-stepper {
    padding: 10px 12px;
    gap: 10px;
  }
}

/* Client autocomplete (appointment modal) */
.appt-col-right .form-group { position: relative; }
.client-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  margin-top: 4px; background: var(--bg-elev-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(30,26,21,0.14);
  max-height: 224px; overflow-y: auto;
}
.client-suggest-item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 10px; cursor: pointer;
}
.client-suggest-item:hover, .client-suggest-item.active { background: var(--bg-elev-3); }
.client-suggest-name { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.client-suggest-detail { font-size: 11px; color: var(--fg-dim); }
.client-suggest-new { padding: 8px 10px; font-size: 11px; font-style: italic; color: var(--fg-dim); }

/* Add break button */
.add-break-btn {
  display: flex; align-items: center; gap: 6px; background: none;
  border: 1px dashed rgba(255,255,255,0.12); border-radius: var(--radius-sm);
  color: var(--fg-dim); font-size: 11px; font-weight: 500;
  cursor: pointer; padding: 7px 10px; width: 100%; transition: all 0.15s;
}
.add-break-btn:hover { border-color: var(--accent-border); color: var(--accent); }
.break-field { display: flex; gap: 8px; }
.break-field .form-input { flex: 1; }

/* Inner service / product tabs */
.inner-tabs-row {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-elev-2);
}
.inner-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--fg-dim);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.inner-tab-btn:hover:not(.active) {
  color: var(--fg);
  background: var(--bg-elev-3);
}
.inner-tab-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
.inner-tab-btn + .inner-tab-btn { border-left: 1px solid var(--border-strong); }
.inner-tab-btn.active {
  background: var(--accent-tint-2);
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Service search */
.svc-search {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--fg);
  font-size: 12px; padding: 8px 10px; outline: none; width: 100%; flex-shrink: 0;
  transition: border-color 0.15s;
}
.svc-search:focus { border-color: var(--accent-border); }
.svc-search::placeholder { color: var(--fg-dim); }

/* Service list */
.svc-list { display: flex; flex-direction: column; gap: 6px; }
.svc-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: var(--radius-sm); background: var(--bg-elev-2); border: 1px solid var(--border);
}
.svc-row-name { flex: 1; font-size: 12px; color: var(--fg); min-width: 0; }
.svc-row-dur { font-size: 10px; color: var(--fg-dim); white-space: nowrap; }
.svc-remove {
  width: 20px; height: 20px; border-radius: 50%; background: none;
  border: 1px solid var(--border); color: var(--fg-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all 0.15s; flex-shrink: 0; line-height: 1;
}
.svc-remove:hover { border-color: var(--danger); color: var(--danger); }
.add-svc-row { display: flex; gap: 8px; }
.svc-expand-link {
  font-size: 11px; color: var(--accent); cursor: pointer;
  text-align: center; padding: 6px 0; display: flex; align-items: center;
  justify-content: center; gap: 4px; flex-shrink: 0;
}
.svc-expand-link:hover { opacity: 0.75; }

/* Phone row */
.phone-input-row { display: flex; gap: 5px; }
.phone-code-sel {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--fg);
  font-size: 12px; padding: 9px 6px; outline: none; cursor: pointer; width: 68px;
  flex-shrink: 0; transition: border-color 0.15s;
}
.phone-code-sel:focus { border-color: var(--accent-border); }

/* Guest row */
.appt-guest-row { display: flex; align-items: flex-start; gap: 8px; padding-top: 2px; }
.appt-guest-row input[type=checkbox] { accent-color: var(--accent); cursor: pointer; width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; }
.appt-guest-row label { font-size: 11px; color: var(--fg-muted); cursor: pointer; line-height: 1.4; }

/* Pricing table */
.price-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.price-table th {
  text-align: left; padding: 5px 6px; color: var(--fg-dim); font-size: 10px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border);
}
.price-table td { padding: 7px 6px; border-bottom: 1px solid var(--border); color: var(--fg-muted); vertical-align: middle; }
.price-table td:first-child { color: var(--fg); }
.price-input {
  width: 58px; background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 4px; color: var(--fg); font-size: 12px;
  padding: 3px 6px; outline: none;
}
.price-input:focus { border-color: var(--accent-border); }
.dur-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; font-size: 12px; color: var(--fg-muted); border-top: 1px solid var(--border);
}

/* Payment */
.pay-total-label { font-size: 11px; color: var(--fg-dim); }
.pay-total-amount { font-size: 22px; font-weight: 700; color: var(--accent); margin: 4px 0 14px; }
.pay-methods { display: flex; flex-direction: column; gap: 8px; }
.pay-btn {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-radius: var(--radius-md); cursor: pointer; font-size: 13px; font-weight: 600;
  transition: all 0.2s; border: 1px solid var(--border);
  background: var(--bg-elev-2); color: var(--fg-muted); width: 100%; text-align: left;
}
.pay-btn:hover { border-color: var(--accent-border); color: var(--fg); background: var(--bg-elev-3); }
.pay-btn.primary { background: var(--info-tint); border-color: var(--info); color: var(--info); }
.pay-btn.primary:hover { background: var(--info); color: var(--accent-ink); }
.pay-icon {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07); flex-shrink: 0; font-size: 15px;
}
.pay-cur-btn {
  padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: var(--radius-sm);
  border: 1px solid var(--border-dim); background: var(--bg-elev-2);
  color: var(--fg-muted); cursor: pointer; transition: all .15s;
}
.pay-cur-btn:hover { border-color: var(--accent-border); color: var(--fg); }
.pay-cur-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Context menu */
.ctx-menu {
  position: fixed; z-index: var(--z-popover); background: var(--bg-elev-2);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 6px; min-width: 180px; box-shadow: var(--shadow-lg);
  display: none;
}
.ctx-menu.open { display: block; }
.ctx-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-sm); font-size: 13px; cursor: pointer;
  color: var(--fg-muted); transition: all 0.15s;
}
.ctx-item:hover { background: var(--bg-elev-3); color: var(--fg); }
.ctx-item svg { flex-shrink: 0; }
.ctx-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* Employee context menu */
.emp-ctx-menu {
  position: fixed; z-index: var(--z-popover); background: var(--bg-elev-2);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 6px; min-width: 150px; box-shadow: var(--shadow-lg);
  display: none;
}
.emp-ctx-menu.open { display: block; }
.emp-ctx-item {
  padding: 10px 12px; font-size: 13px; cursor: pointer;
  color: var(--fg-muted); border-radius: var(--radius-sm); transition: all 0.15s;
}
.emp-ctx-item:hover { background: var(--bg-elev-3); color: var(--fg); }
.emp-ctx-item.danger { color: var(--danger); }
.emp-ctx-item.danger:hover { background: var(--danger-tint); }

/* KPI grid & card */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px; flex-shrink: 0;
}
.kpi-card {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.kpi-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.kpi-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.kpi-label {
  /* 1.7: was --fg-dim (~2.7:1, fails WCAG AA in both themes). --fg-muted clears AA. */
  font-size: 11px; font-weight: 600; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.kpi-value {
  font-size: 26px; font-weight: 700; color: var(--fg);
  font-family: var(--font-display); line-height: 1;
  font-feature-settings: 'tnum' 1;
}
.kpi-sub { font-size: 12px; color: var(--fg-dim); line-height: 1.4; }

/* Notification items in panel */
.notif-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.12s;
}
.notif-item:hover { background: var(--bg-elev-2); }
.notif-item:last-child { border-bottom: none; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 4px; }
.notif-text { font-size: 12px; color: var(--fg-muted); line-height: 1.5; flex: 1; }
.notif-time { font-size: 10px; color: var(--fg-dim); margin-top: 3px; }
.notif-item.read .notif-dot { opacity: 0.25; }
.notif-item.read .notif-text { opacity: 0.6; }
.notif-content { min-width: 0; }

/* Notification rules (settings) */
.notif-rules-grid { display: flex; flex-direction: column; gap: 8px; }
.notif-rule-card {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 18px;
  display: flex; align-items: center; gap: 16px; transition: border-color 0.15s;
}
.notif-rule-card:hover { border-color: var(--accent-border); }
.notif-rule-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-rule-info { flex: 1; min-width: 0; }
.notif-rule-name { font-size: 13px; font-weight: 600; color: var(--fg); }
.notif-rule-desc { font-size: 11px; color: var(--fg-dim); margin-top: 2px; }
.notif-channels { display: flex; gap: 6px; }
.notif-channel-tag { font-size: 10px; padding: 2px 8px; border-radius: 8px; border: 1px solid var(--border); color: var(--fg-dim); cursor: pointer; }
.notif-channel-tag.active { background: var(--info-tint); color: var(--info); border-color: var(--info); }

/* Integrations (supplement, distinct from settings integ-card) */
.integ-section { margin-bottom: 24px; }
.integ-section-title { font-size: 13px; font-weight: 700; color: var(--fg); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.integ-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.integ-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.integ-desc { font-size: 11px; color: var(--fg-dim); line-height: 1.4; }
.integ-price { font-size: 11px; color: var(--accent); font-weight: 600; }
.integ-connect-btn {
  font-size: 11px; padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent-border); color: var(--accent); background: none; cursor: pointer;
  transition: all 0.15s;
}
.integ-connect-btn:hover, .integ-connect-btn.connected { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Working hours table */
.work-hours-table { width: 100%; border-collapse: collapse; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.work-hours-table th { background: var(--bg-elev-2); padding: 10px 14px; font-size: 11px; color: var(--fg-dim); text-transform: uppercase; font-weight: 600; }
.work-hours-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--fg-muted); text-align: center; }
.work-hours-table tr:last-child td { border-bottom: none; }
.work-hours-input { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; color: var(--fg); font-size: 11px; width: 60px; text-align: center; }
.work-day-toggle { width: 20px; height: 20px; border-radius: 4px; border: 2px solid var(--border); cursor: pointer; transition: all 0.15s; display: inline-block; position: relative; }
.work-day-toggle.on { background: var(--info); border-color: var(--info); }
.work-day-toggle.on::after { content: '✔'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--accent-ink); font-size: 11px; font-weight: 700; }

/* Services layout */
.services-layout { display: flex; gap: 16px; flex: 1; min-height: 0; }
.services-cats { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.services-cat-item { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; color: var(--fg-muted); cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: all 0.15s; }
.services-cat-item:hover, .services-cat-item.active { background: var(--bg-elev-2); color: var(--fg); }
.services-cat-item.active { color: var(--accent); }
.services-cat-count { font-size: 10px; color: var(--fg-dim); background: var(--bg-elev-2); padding: 1px 6px; border-radius: 8px; }
.services-list-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* Status badges */
.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.status-badge.active, .status-badge.paid { background: var(--info-tint); color: var(--info); }
.status-badge.inactive, .status-badge.overdue { background: var(--danger-tint); color: var(--danger); }
.status-badge.pending, .status-badge.partial { background: var(--accent-tint); color: var(--accent); }
.td-primary { color: var(--fg) !important; font-weight: 500; }

/* Color chip */
.color-chip {
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: all 0.15s;
}
.color-chip.selected { border-color: white; transform: scale(1.15); }

/* Payroll status */
.payroll-status { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.payroll-status.paid { background: var(--info-tint); color: var(--info); }
.payroll-status.pending { background: var(--accent-tint); color: var(--accent); }

/* Row action buttons */
.row-action-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: none; color: var(--fg-dim); cursor: pointer; transition: all 0.15s; }
.row-action-btn:hover { border-color: var(--accent-border); color: var(--accent); }

/* Notif badge */
.notif-badge {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
  display: none;
}
.notif-badge.show { display: block; }

/* Settings sections (extra) */
.settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.settings-toggle-row:last-of-type { border-bottom: none; }
.settings-hint { font-size: 10px; color: var(--fg-dim); margin-top: 2px; }

/* License / balance */
.license-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; background: var(--info-tint); color: var(--info); padding: 3px 10px; border-radius: 10px; }
.feature-list { display: flex; flex-direction: column; gap: 8px; }
.feature-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); }
.feature-check { color: var(--info); font-weight: 700; }

/* Ensure form-row works */
.form-row { display: grid; gap: 12px; }
.form-row .form-group { min-width: 0; }

/* Badge variants */
.badge-vip { background: var(--accent-tint); color: var(--accent); }
.badge-new { background: var(--info-tint); color: var(--info); }
.badge-muted { background: var(--bg-elev-2); color: var(--fg-dim); }

/* Amount colors */
.amount-positive { color: var(--info); font-weight: 600; }
.amount-negative { color: var(--danger); font-weight: 600; }

/* Employee nav inside sidebar sub */
.emp-nav-item { display: flex; align-items: center; gap: 7px; }
.emp-nav-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.emp-nav-role { font-size: 9px; color: var(--fg-dim); margin-left: auto; white-space: nowrap; }

/* Quick panel tiles */
.qp-tiles { display: none; padding: 8px 10px; gap: 4px; grid-template-columns: repeat(3, 1fr); }
.qp-tiles.show { display: grid; }
.qp-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--bg-elev-2); border: 1px solid var(--border); transition: all 0.15s;
}
.qp-tile:hover { border-color: var(--accent-border); background: var(--accent-tint); transform: scale(1.03); }
.qp-tile-icon { font-size: 18px; }
.qp-tile-label { font-size: 9px; font-weight: 600; color: var(--fg-dim); text-align: center; line-height: 1.2; }
.qp-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; cursor: pointer; border-top: 1px solid var(--border);
  transition: background 0.15s;
}
.qp-toggle-row:hover { background: var(--bg-elev-2); }
.qp-toggle-label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-dim); }

/* Sidebar hamburger */
.sidebar-hamburger {
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  margin-left: auto; flex-shrink: 0;
}
.sidebar-hamburger span { display: block; width: 18px; height: 2px; background: var(--fg-muted); border-radius: 2px; transition: all 0.2s; }
.sidebar-hamburger:hover span { background: var(--accent); }

/* Sidebar glass effect */
.sidebar { box-shadow: 2px 0 20px rgba(0,0,0,0.3); }

/* Rev rate section */
.rev-rate-row {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.rev-rate-row .rev-rate-dot { margin-left: 0; }
.rev-rate-text { font-size: 10px; color: var(--fg-dim); flex: 1; }

/* Add Employee Modal */
.add-emp-box { background: var(--bg-elev-2); border-radius: var(--radius-lg); width: 600px; max-width: 96vw; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.add-emp-check { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--fg); }
.add-emp-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.add-emp-err { font-size: 11px; color: var(--danger); margin-top: 3px; display: none; }
.add-emp-err.show { display: block; }
.add-emp-hint { font-size: 11px; color: var(--fg-dim); margin-top: 4px; }

/* Creatable select — the inline "add a new one" row revealed under a <select>
   when its "+ Create new…" option is chosen (see populateSpecialityDropdown in
   public/js/app.js). `hidden` does the hiding, so this only lays out the row
   when it is shown; the [hidden] rule is needed because `display:flex` would
   otherwise beat the UA's `display:none`. */
.creatable-new-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.creatable-new-row[hidden] { display: none; }
.creatable-new-row .form-input { flex: 1; min-width: 0; }
.creatable-new-row .btn { flex-shrink: 0; }
@media (max-width: 480px) {
  /* Stack so the name field keeps a usable width on a phone. */
  .creatable-new-row { flex-wrap: wrap; }
  .creatable-new-row .form-input { flex-basis: 100%; }
}

/* Glass cards */
.glass-card {
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
}

/* Enhanced appointment blocks */
.appt-block {
  border-radius: 7px;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.appt-block:hover {
  transform: translateX(2px) translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  filter: brightness(1.15);
  z-index: 20;
}
.appt-block:active { cursor: grabbing; }

/* Enhanced modal backdrop */
.modal-overlay.open {
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
}

/* Smooth page transitions */
.crm-section.active {
  animation: sectionIn 0.22s var(--ease-out) both;
}
@keyframes sectionIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Enhanced table hover */
.crm-table tbody tr:hover td { background: var(--bg-elev-2) !important; }

/* Gold shimmer on primary button */
.btn-primary {
  box-shadow: 0 2px 14px rgba(201,168,76,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover {
  box-shadow: 0 6px 22px rgba(201,168,76,0.42), inset 0 1px 0 rgba(255,255,255,0.16);
  transform: translateY(-1.5px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 8px rgba(201,168,76,0.2);
}
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Gold now-line */
.now-line {
  background: var(--accent) !important;
  box-shadow: 0 0 8px rgba(201,168,76,0.5), 0 0 18px rgba(201,168,76,0.2) !important;
}
.now-line::before {
  background: var(--accent) !important;
  box-shadow: 0 0 8px rgba(201,168,76,0.6) !important;
}

/* Enhanced nav item active state */
.nav-item.active {
  background: linear-gradient(135deg, rgba(201,168,76,0.14), rgba(201,168,76,0.04)) !important;
  border-left-color: var(--accent) !important;
}

/* Employee filter bar */
.emp-filter-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 20px;
  border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
}
.emp-notice {
  display: flex; align-items: center; gap: 8px; padding: 8px 20px;
  background: var(--info-tint); border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--fg-muted); flex-shrink: 0;
}
.emp-table { flex: 1; overflow-y: auto; }
.emp-table-head {
  display: flex;
  background: var(--bg-elev-2); border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 700; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.06em;
}
.emp-table-head > div { padding: 10px 14px; white-space: nowrap; }
.emp-table-head > div:nth-child(1) { flex: 0 0 280px; }
.emp-table-head > div:nth-child(2) { flex: 1; }
.emp-table-head > div:nth-child(3) { flex: 0 0 130px; }
.emp-found { font-size: 12px; color: var(--fg-dim); margin-left: 8px; }

/* Enhanced breadcrumb */
.emp-breadcrumb {
  display: flex; align-items: center; gap: 6px; padding: 10px 20px;
  font-size: 12px; color: var(--fg-dim); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.emp-breadcrumb span { cursor: pointer; }
.emp-breadcrumb span:hover { color: var(--accent); }

/* Breadcrumb nav (employee profile) */
.breadcrumb-nav { padding: 10px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.breadcrumb-nav ol { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumb-nav li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-dim); }
.breadcrumb-nav li::before { content: '›'; color: var(--fg-dim); }
.breadcrumb-nav li:first-child::before { display: none; }
.breadcrumb-nav li button { background: none; border: none; cursor: pointer; color: var(--fg-muted); font-size: 12px; padding: 0; transition: color 0.15s; }
.breadcrumb-nav li button:hover { color: var(--accent); }
.breadcrumb-nav li span { color: var(--fg); font-weight: 500; }

/* Employee profile header */
.emp-profile-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.emp-profile-left { display: flex; align-items: center; gap: 14px; }
.emp-profile-avatar {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0;
}
.emp-profile-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--fg); }
.emp-profile-sub { font-size: 12px; color: var(--fg-dim); margin-top: 3px; }

/* Employee tabs */
.emp-tabs {
  display: flex; border-bottom: 1px solid var(--border); padding: 0 16px;
  background: var(--bg-elev-1); overflow-x: auto; flex-shrink: 0;
}
.emp-tab {
  padding: 10px 14px; font-size: 11px; font-weight: 600; cursor: pointer;
  color: var(--fg-dim); border-bottom: 2px solid transparent;
  white-space: nowrap; transition: all 0.15s; background: none;
  border-top: none; border-left: none; border-right: none;
}
.emp-tab:hover { color: var(--fg-muted); }
.emp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.emp-tab-num { font-size: 10px; margin-left: 4px; opacity: 0.7; }
.emp-profile-body { flex: 1; overflow-y: auto; }

/* Segment tabs */
.seg-tabs {
  display: flex; gap: 2px; padding: 8px 20px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.seg-tab {
  padding: 5px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;
  cursor: pointer; color: var(--fg-dim); background: none;
  border: 1px solid transparent; transition: all 0.15s;
  display: flex; align-items: center; gap: 5px;
}
.seg-tab:hover { color: var(--fg-muted); background: var(--bg-elev-2); }
.seg-tab.active { background: var(--accent-tint); color: var(--accent); border-color: var(--accent-border); }
.seg-count { font-size: 10px; background: var(--bg-elev-2); padding: 1px 6px; border-radius: 8px; }
.seg-tab.active .seg-count { background: var(--accent-tint-2); }

/* Enhanced filter bar */
.filter-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 20px;
  border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
}
/* ── Mobile filter-sheet scaffolding (desktop baseline) ──────────────────
   These classes exist at every width so the markup is stable; the behaviour
   that matters lives in mobile.css under the 768px breakpoint.
   - .period-scroller  one flex row of period pills. Phones turn it into a
     horizontally scrollable strip rather than letting it wrap two-deep.
   - .mfilter-bar      the compact "search + Filters (n)" line. Inert above
     the breakpoint, where the full filter bar is used instead.
   The gap lives in a modifier because the two pill families differ: the
   Transactions/Expenses period buttons are a joined segmented control, the
   Records range pills are separated capsules. Both used to carry the value
   as an INLINE style, which outranks every stylesheet and was the reason the
   phone "don't wrap" rule silently lost on Records. */
.period-scroller { display: flex; min-width: 0; }
.period-scroller.seg-joined { gap: 0; }
.period-scroller.pill-row { gap: 4px; }
.records-search-wrap { position: relative; flex: 1 1 240px; max-width: 320px; }
.mfilter-bar { display: none; }

/* ── Transactions filter bar ─────────────────────────────────────────── */
.tx-filters {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.tx-filters-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* Search box */
.tx-search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elev-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 0 12px; height: 34px;
  flex: 1; min-width: 200px; max-width: 300px;
  transition: border-color .15s, box-shadow .15s;
}
.tx-search-box:focus-within {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px rgba(201,168,76,.08);
}
.tx-search-icon { color: var(--fg-dim); flex-shrink: 0; }
.tx-search-input {
  background: none; border: none; outline: none;
  color: var(--fg); font-size: 13px; width: 100%;
}
.tx-search-input::placeholder { color: var(--fg-dim); }

/* Date range — styled as one unit */
.tx-date-range {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-elev-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 0 10px; height: 34px;
  transition: border-color .15s, box-shadow .15s;
}
.tx-date-range:focus-within {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px rgba(201,168,76,.08);
}
.tx-date-cal { color: var(--fg-dim); flex-shrink: 0; }
.tx-date-input {
  background: none; border: none; outline: none;
  color: var(--fg); font-size: 12px; width: 90px;
}
.tx-date-text { cursor: text; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tx-date-text::placeholder { color: var(--fg-dim); }
.tx-date-sep { color: var(--fg-dim); font-size: 13px; }

/* Date range picker */
.tx-cal-popup {
  position: fixed; z-index: var(--z-popover);
  background: var(--bg-elev-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0,0,0,.45);
  padding: 10px; width: 260px; user-select: none;
}
.txcal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.txcal-title {
  font-size: 13px; font-weight: 600; color: var(--fg);
}
.txcal-nav {
  background: none; border: none; cursor: pointer;
  color: var(--fg-muted); font-size: 18px; line-height: 1;
  padding: 2px 6px; border-radius: var(--radius-sm);
  transition: background .12s, color .12s;
}
.txcal-nav:hover { background: var(--bg-elev-3); color: var(--fg); }
.txcal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.txcal-dow {
  font-size: 10px; font-weight: 600; color: var(--fg-dim);
  text-align: center; padding: 3px 0;
}
.txcal-cell {
  font-size: 12px; text-align: center; padding: 5px 2px;
  border-radius: var(--radius-sm); cursor: pointer; color: var(--fg);
  transition: background .1s, color .1s;
}
.txcal-cell.empty { cursor: default; }
.txcal-cell:not(.empty):hover { background: var(--bg-elev-3); }
.txcal-cell.wknd { color: var(--fg-muted); }
.txcal-cell.today { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.txcal-cell.sel { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.txcal-cell.sel:hover { background: var(--accent); }

/* Period pill group */
.tx-period-group {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden; flex-shrink: 0;
}
.tx-period-btn {
  padding: 0 13px; height: 34px; font-size: 12px; font-weight: 500;
  background: var(--bg-elev-2); color: var(--fg-muted);
  border: none; border-right: 1px solid var(--border-strong);
  cursor: pointer; transition: background .15s, color .15s; white-space: nowrap;
}
.tx-period-btn:last-child { border-right: none; }
.tx-period-btn:hover { background: var(--bg-elev-3); color: var(--fg); }
.tx-period-btn.active { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* Row-2 filter selects */
.tx-filter-select {
  height: 34px; padding: 0 10px;
  background: var(--bg-elev-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); color: var(--fg); font-size: 12px;
  cursor: pointer; color-scheme: light;
  transition: border-color .15s, box-shadow .15s;
  min-width: 130px;
}
.tx-filter-select:focus {
  outline: none; border-color: var(--accent-border);
  box-shadow: 0 0 0 3px rgba(201,168,76,.08);
}
.tx-filter-select option { background: var(--bg-elev-2); }
.tx-filter-spacer { flex: 1; }
.tx-results-label { font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.tx-clear-btn {
  display: flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 14px; font-size: 12px; font-weight: 500;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); color: var(--fg-muted); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s; white-space: nowrap;
}
.tx-clear-btn:hover { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,.06); }
/* Payment status edit modal */
.tx-status-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.tx-status-opt:hover { border-color: var(--accent-border); background: var(--bg-elev-2); }
.tx-status-opt:has(input:checked) { border-color: var(--accent-border); background: var(--bg-elev-2); }
.tx-status-badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
}
.tx-status-badge.completed { background: rgba(107,191,181,0.15); color: var(--accent-alt, #6BBFB5); }
.tx-status-badge.refunded  { background: rgba(239,68,68,0.13);   color: var(--danger, #ef4444); }
.search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 7px 12px; flex: 1; min-width: 180px;
  transition: border-color 0.15s;
}
.search-wrap:focus-within {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.08);
}
.search-input {
  background: none; border: none; color: var(--fg);
  font-size: 12px; outline: none; flex: 1;
}
.search-input::placeholder { color: var(--fg-dim); }
.filter-sel { max-width: 160px; }

/* Table wrap — overflow-x:auto at ALL widths (not just the ≤768 block in
   mobile.css) so tablet widths (e.g. 834px) scroll dense tables horizontally
   instead of table-layout:fixed crushing the flexible % columns to 0. */
.table-wrap { flex: 1; overflow-y: auto; overflow-x: auto; padding: 0 20px 16px; }
.table-card-wrap { flex: 1; overflow-y: auto; overflow-x: auto; padding: 0 20px 16px; }
.table-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; font-size: 12px; color: var(--fg-dim);
  background: var(--bg-elev-2); border-top: 1px solid var(--border);
}
.pagination { display: flex; gap: 4px; align-items: center; }
.page-btn {
  border-radius: var(--radius-sm); transition: all var(--dur-fast) ease;
  font-feature-settings: 'tnum' 1;
  padding: 3px 8px; font-size: 12px; color: var(--fg-muted);
  border: 1px solid var(--border); background: var(--bg-elev-2); cursor: pointer;
}
.page-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.page-btn:hover:not(.active) { border-color: var(--accent-border); color: var(--accent); }

/* Enhanced table styling */
/* table-layout: fixed forces thead + tbody columns to share widths driven by the
   first row, instead of `auto` distributing leftover horizontal slack onto empty
   header cells (which made the Clients thead's first column balloon to ~800px). */
.crm-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.crm-table td, .crm-table th { overflow: hidden; text-overflow: ellipsis; }
/* Suppress ellipsis "..." dots on cells that hold only controls/chips/icons —
   the truncation algorithm fires on these even though there's no real text to
   clip, leaving stray dots next to checkboxes, category badges and row actions. */
.crm-table td:has(> input[type="checkbox"]:only-child),
.crm-table th:has(> input[type="checkbox"]:only-child),
.crm-table td:has(> button:only-child),
.crm-table td:has(> .category-chip:only-child) {
  overflow: visible;
  text-overflow: clip;
  padding-left: 8px;
  padding-right: 8px;
}
/* Action cells holding SEVERAL buttons (e.g. Edit + Delete in Positions &
   Specialities) escaped the :only-child exception above: overflow:hidden +
   table-layout:fixed wrapped/clipped the second button so most of its box
   didn't receive clicks. Keep all-button cells unclipped and on one line. */
.crm-table td:has(> button):not(:has(> :not(button))) {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.crm-table thead tr { border-bottom: 2px solid var(--border); }
.crm-table th {
  padding: 10px 14px; text-align: left; font-size: 10px; font-weight: 700;
  color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.07em;
  white-space: nowrap; background: var(--bg-elev-2);
}
.crm-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; }
.crm-table td { padding: 11px 14px; color: var(--fg-muted); vertical-align: middle; }
.crm-table tbody tr:last-child { border-bottom: none; }
.crm-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.012); }

/* Data-dense tables (Clients, Finance → Transactions) — at tablet widths
   (e.g. 834px) the .table-wrap content box is narrower than these tables'
   columns need, and table-layout:fixed crushes the flexible % columns
   (Name/Phone/Email etc.) toward 0. Give them a floor width so columns
   stay legible and .table-wrap (overflow-x:auto, above) scrolls instead.
   Scoped to >768px: below that, mobile.css/responsive.css already switch
   these tables to table-layout:auto with their own min-width, and this
   rule's #id specificity would otherwise win over those and override them
   regardless of stylesheet order.
   Clients needs a wider floor than Transactions: its Client/Phone/Email
   columns hold longer free-text content (names, +country-code numbers,
   full email addresses) than Transactions' shorter Client/Service/Staff
   strings, so 900px alone still wrapped Client/Phone across 3-4 lines. */
@media (min-width: 769px) {
  #sec-clients .table-wrap .crm-table {
    min-width: 1040px;
  }
  #sec-finance-transactions .table-wrap .crm-table {
    min-width: 900px;
  }
  /* .crm-table td already declares overflow:hidden + text-overflow:ellipsis
     (above) but never white-space:nowrap, so text-overflow was a no-op —
     free-text cells (Client name, Phone, Email, Service, Staff) wrapped
     across multiple lines instead of truncating, ballooning row height
     (measured ~98px vs. the normal ~45px single-line row). Force one line
     so the existing ellipsis rule actually fires; overflow content is
     still reachable via the horizontal scroll enabled above. */
  #sec-clients .table-wrap .crm-table td,
  #sec-finance-transactions .table-wrap .crm-table td {
    white-space: nowrap;
  }
  /* Clients' Client-name cell nests avatar + name in a flex wrapper div
     (public/js/app.js renderClientTable(), ~line 1226), so the ellipsis
     declared on the <td> above never visually applies — the overflow
     happens on the inner name div, not the td itself. Repeat the
     truncation trio on that div directly. */
  #sec-clients .table-wrap .crm-table td > div > div:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}

/* Numbers right-aligned */
.td-num { text-align: right !important; font-feature-settings: 'tnum' 1 !important; }

/* Empty state row */
.empty-row td { text-align: center !important; padding: 40px 16px !important; color: var(--fg-dim) !important; font-style: italic; }

/* Employee profile tabs body */
.emp-stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 20px; }
.emp-stat-card {
  background: var(--bg-elev-2); border-radius: var(--radius-md); padding: 14px;
  text-align: center; border: 1px solid var(--border); transition: transform 0.15s, box-shadow 0.15s;
}
.emp-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.emp-stat-val { font-size: 18px; font-weight: 800; color: var(--info); }
.emp-stat-lbl { font-size: 11px; color: var(--fg-dim); margin-top: 3px; }
.emp-body-section { margin-bottom: 24px; }
.emp-body-section-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--fg); margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.emp-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.emp-field-block { display: flex; flex-direction: column; gap: 4px; }
.emp-field-lbl { font-size: 11px; font-weight: 600; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.emp-field-val { font-size: 13px; color: var(--fg); }
.emp-setting-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.emp-setting-item:last-child { border-bottom: none; }
.emp-setting-text { flex: 1; }
.emp-setting-title { font-size: 13px; font-weight: 500; color: var(--fg); }
.emp-setting-hint { font-size: 11px; color: var(--fg-dim); margin-top: 3px; }
.emp-toggle-wrap { flex-shrink: 0; padding-top: 2px; }

/* Loading Spinner */
.loading-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Chart canvas sizing */
canvas { max-height: 240px; }

/* Recurrence options row */
#repeatOptionsRow { margin-top: 8px; }

/* Sell Product Modal */
#sellProductModal.open { display: flex !important; align-items: center; justify-content: center; }

/* New Payment / Edit Employee / Goods modals */
#newPaymentModal, #editEmpModal, #addGoodsModal { display: none; }
#newPaymentModal.open, #editEmpModal.open, #addGoodsModal.open { display: flex; align-items: center; justify-content: center; }

/* Client labels grid */
#clientLabelsGrid { min-height: 60px; }

/* Empty state */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 48px 24px; text-align: center; color: var(--fg-dim);
}
.empty-state-icon {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  background: var(--bg-elev-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-dim); margin-bottom: 4px;
}
.empty-state-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--fg-muted); }
.empty-state-body { font-size: 13px; line-height: 1.55; max-width: 280px; }

/* Danger button small */
.btn-danger-sm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600;
  background: var(--danger-tint); border: 1px solid rgba(216,117,117,0.32);
  color: var(--danger); cursor: pointer; transition: all 0.15s;
}
.btn-danger-sm:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Form input focus glow */
.form-input:focus, .form-select:focus {
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.1) !important;
}

/* Toast — canonical position: bottom-right */
.toast-msg {
  position: fixed !important;
  bottom: 28px !important; right: 28px !important;
  left: auto !important; transform: none !important;
  background: var(--bg-elev-2) !important;
  border: 1px solid var(--accent-border) !important;
  color: var(--accent) !important;
  border-radius: var(--radius-md) !important;
  padding: 13px 22px !important;
  font-size: 13px !important; font-weight: 500 !important;
  z-index: var(--z-toast) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: opacity 0.25s var(--ease-out),
              transform 0.25s var(--ease-out) !important;
}
.toast-msg.show { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; }
.toast-msg.toast-error, .toast-msg.error { border-color: var(--danger) !important; color: var(--danger) !important; }
.toast-msg.toast-success, .toast-msg.success { border-color: var(--success) !important; color: var(--success) !important; }
.toast-msg.toast-warning, .toast-msg.warning { border-color: var(--warning) !important; color: var(--warning) !important; }

/* Sticky (error/warning) toasts persist until dismissed via the close button */
.toast-msg { display: flex !important; align-items: center !important; gap: 10px !important; max-width: min(420px, calc(100vw - 56px)) !important; }
.toast-close {
  background: none; border: none; cursor: pointer;
  color: inherit; font-size: 16px; line-height: 1;
  padding: 2px 4px; margin-left: 4px; border-radius: 4px;
  flex: 0 0 auto;
}
.toast-close:hover { background: rgba(255,255,255,0.08); }
.toast-close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* Screen-reader-only utility (used by the assertive toast announcer) */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  overflow: hidden !important; white-space: nowrap !important;
}

/* Form input / select canonical */
.form-input, .form-select, .form-textarea {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  color: var(--fg);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  line-height: 1.5;
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
  outline: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--fg-dim); }
.form-label {
  font-size: 11px; font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 5px; display: block;
}
.form-hint { font-size: 11px; color: var(--fg-dim); line-height: 1.4; margin-top: 4px; }
.form-error { font-size: 11px; color: var(--danger); line-height: 1.4; margin-top: 4px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-input:disabled, .form-select:disabled { opacity: 0.45; cursor: not-allowed; }

/* Responsive */
@media (max-width: 900px) {
  .zoom-pill { display: none; }
}
@media (max-width: 768px) {
  .sidebar {
    /* Must sit ABOVE .sidebar-backdrop (z-index 299, see responsive.css) so nav
       taps land on nav items instead of being swallowed by the backdrop. */
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 320;
    transform: translateX(-100%); transition: transform 0.25s ease !important;
    width: var(--sidebar-w) !important;
  }
  /* Drawer open state — `.open` is the class toggled by openMobileSidebar(). */
  .sidebar.open { transform: translateX(0); }
  .appt-3col { grid-template-columns: 1fr !important; }
  .appt-col-left, .appt-col-right { border: none !important; border-bottom: 1px solid var(--border) !important; }
}

/* ============================================================
   MSG-BODY-WRAP — broadcast message section wrapper
   ============================================================ */
.msg-body-wrap { position: relative; flex: 1; min-height: 0; }

/* ============================================================
   REV-CHEVRON — revenue badge chevron icon
   ============================================================ */
.rev-chevron { transition: transform 0.2s ease; flex-shrink: 0; }

/* ============================================================
   LAYOUT-HUB — modifier on settings-screen for hub mode
   (no additional layout needed beyond settings-screen defaults)
   ============================================================ */
.settings-screen.layout-hub .settings-body { overflow-y: auto; }

/* ============================================================
   TOG-SW — inline toggle switch (used in appointment modal)
   ============================================================ */
.tog-sw {
  display: inline-block;
  width: 36px; height: 20px;
  border-radius: var(--radius-pill);
  background: var(--bg-elev-3);
  border: 1.5px solid var(--border-strong);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tog-sw::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--fg-muted);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.tog-sw.on { background: var(--info); border-color: var(--info); }
.tog-sw.on::after { transform: translateX(16px); background: #fff; }

/* ============================================================
   ANALYTICS GRID — used by analytics sections
   ============================================================ */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ============================================================
   SEC-CHART-GRID — chart layout grids in analytics sections
   ============================================================ */
.sec-chart-grid {
  display: grid;
  gap: 16px;
}
.sec-chart-grid.grid-2-1 {
  grid-template-columns: 2fr 1fr;
}
.sec-chart-grid.grid-1-1 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
  .sec-chart-grid.grid-2-1,
  .sec-chart-grid.grid-1-1 {
    grid-template-columns: 1fr;
  }
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TIME CHIPS GRID — quick duration selection
   ============================================================ */
.time-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* ============================================================
   APPT MODAL FOOTER — improved button layout and responsiveness
   ============================================================ */
.appt-modal-footer {
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-elev-2);
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.modal-footer-spacer {
  flex: 1;
  min-width: 0;
}

.appt-modal-footer .btn {
  min-width: auto;
  white-space: nowrap;
}

.appt-modal-footer .btn-primary,
.appt-modal-footer .btn-secondary,
.appt-modal-footer .btn-danger-outline {
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all 0.15s;
}

/* Delete button alignment */
.appt-modal-footer #apptDeleteBtn {
  margin-right: auto;
  order: -1;
}

@media (max-width: 600px) {
  .appt-modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
    padding: 14px 16px;
  }

  .appt-modal-footer .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
  }

  .appt-modal-footer #apptDeleteBtn {
    margin-right: 0;
    order: 0;
  }

  .modal-footer-spacer {
    display: none;
  }
}

/* ============================================================
   APPT COMPACT MODIFIERS — applied by schedule.js on narrow blocks
   ============================================================ */
.appt.appt-narrow .a-svc { display: none; }
.appt.appt-micro .a-svc,
.appt.appt-micro .a-time { display: none; }
.appt.appt-micro .a-name { font-size: 10px; }
/* Micro lanes: shrink the "new client" pill instead of dropping it — the
   tooltip carries the full label */
.appt.appt-micro .appt-new-badge { font-size: 8px; padding: 0 4px; margin-right: 4px; }
/* Card padding lives on .appt-content (schedule.css height tiers own it) */
.appt.appt-micro .appt-content { padding: 3px 5px 3px 8px; }
.appt.appt-pill .a-svc,
.appt.appt-pill .a-time { display: none; }
.appt.appt-pill { padding: 2px 4px !important; border-radius: 4px; }