/* @cascade-order: 1 — do not reorder. Split 2/10 of the former
   monolithic style.css (see docs/ui-pattern-audit.md and ADR-0095-style-css-split-into-ten-contiguous-files).
   Originally a contiguous slice of style.css in @cascade-order. That
   ordering is still enforced (tests/unit/css-split-structure.test.js);
   byte-for-byte reconstruction is NOT enforced and must not be relied on
   — the split files have been edited independently since. In this file
   specifically, the form control family was consolidated into v3.css on
   2026-09-08 (see the FORMS block there). Earlier headers cited
   tests/unit/css-split-equality.test.js, which does not exist.
   Contains: Forms, multi-select, color palette, check-in suggestions, the account add/edit layout, pass bundles, activity log, and the start of Settings + Square tab styles.
   Original line range: 2144-4036. */
/* ==========================================================================
   FORMS
   ========================================================================== */

.form-row-divider {
  border-top: 1px solid var(--color-border);
  margin: var(--space-3) 0;
}

.form-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ==========================================================================
   MULTI-SELECT DROPDOWN ; chips inside the field, click to open menu.
   Used by Edit Discipline (access categories) and Edit Schedule Entry (coaches).
   ========================================================================== */
.multi-select { position: relative; }

.multi-select-control {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-height: 38px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.multi-select.is-open .multi-select-control,
.multi-select-control:focus {
  outline: none;
  border-color: var(--color-accent);
}

.multi-select-chips {
  display: contents; /* chips flow inline with placeholder + caret */
}

.multi-select-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.2;
}

.multi-select-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1.1429rem;
  line-height: 1;
}
.multi-select-chip-x:hover {
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
  color: var(--color-danger);
}

.multi-select-placeholder {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

/* SUMMARY mode — one line of text instead of chips, for a field that sits in a
   row of other controls and must not grow as picks are added. One line, so it
   ellipsizes rather than wraps; when nothing is picked the line IS the
   placeholder, and it says so in the danger tone because an empty pick-several
   is usually a dead end for whatever acts on it (no schedule, no PDF). */
.multi-select-summary {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multi-select.is-summary .multi-select-control {
  flex-wrap: nowrap;
  justify-content: space-between;
}
.multi-select.is-summary.is-empty .multi-select-summary {
  color: var(--color-danger);
}

.multi-select-caret {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.8571rem;
  transition: transform 0.15s ease;
}
.multi-select.is-open .multi-select-caret { transform: rotate(180deg); }

.multi-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-anchored, 1000);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}

.multi-select-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.multi-select-option:hover:not(.is-disabled) {
  background: var(--color-bg-subtle);
}
.multi-select-option.is-selected {
  color: var(--color-accent);
  font-weight: var(--font-medium);
}
.multi-select-option.is-disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

.multi-select-option-check {
  display: inline-flex;
  width: 16px;
  justify-content: center;
  font-size: 0.9286rem;
}

/* ==========================================================================
   COLOR PALETTE ; pre-populated swatches in the discipline modal,
   shown above the hex input. Click to fill, greyed = used by another item.
   ========================================================================== */
.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.color-palette-swatch {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  position: relative;
  background-clip: padding-box;
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.color-palette-swatch:hover:not(.is-disabled) {
  transform: scale(1.08);
}
.color-palette-swatch.is-selected {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-bg);
}
.color-palette-swatch.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.color-palette-swatch.is-disabled::after {
  content: '';
  position: absolute;
  inset: 50% 0;
  height: 1px;
  background: var(--color-text);
  transform: rotate(-45deg);
  transform-origin: center;
}

/* `.checkbox-label` was here and is DELETED (ADR-0129) — `.form-checkbox`
   with a different font size and `align-items: center`. Its two emitters (the
   price-list B&W toggle, the static add-membership modal) are on the owner. */

/* ==========================================================================
   DAILY CHECK-INS
   ========================================================================== */
.checkin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.date-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.date-input {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  min-width: 160px;
  text-align: center;
}

.date-display {
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  min-width: 160px;
  text-align: center;
}

/* ==========================================================================
   SUGGESTIONS / UPCOMING CHECK-INS
   ========================================================================== */
.upcoming-classes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.upcoming-class-chip {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  min-width: 150px;
}

.upcoming-class-chip.classes {
  border-color: var(--color-classes);
}

.upcoming-class-chip.opengym {
  border-color: var(--color-opengym);
}

.upcoming-class-chip.athletic {
  border-color: var(--color-athletic);
}

.upcoming-class-chip .class-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.upcoming-class-chip .class-time {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.suggestion-list {
  display: flex;
  flex-direction: column;
}

.suggestion-row:last-child {
  border-bottom: none;
}

.suggestion-row:hover {
  background: var(--hover-row);
}

/* ==========================================================================
   ACCOUNT LAYOUT (ADD/EDIT)
   ========================================================================== */
/* The account-tier SLOT in the Edit Account header. It owns only where the
   chip sits; what the chip LOOKS like is `.state-chip` (ADR-0127). The three
   `.account-tier-badge.tier-*` rules that used to live here were a
   second-by-one-percent copy of that component's on / off / hold tones
   (12% / 14% / 14% of the same three hues), which is exactly the
   neighbouring-states-differ-in-weight defect D2 opened on. */
#edit-account-tier {
  align-self: flex-start;
  margin-top: 2px;
}

/* `.empty-state` is owned by v3.css — the flex block that used to sit here
   moved there so the component has one declaration. */

.membership-header .pass-badge {
  flex-shrink: 0;
}

/* The row's flexible middle: what the record's dates say, and underneath (or
   beside, with room) where it came from. Same two-line meta stack the balance
   ledger row uses — see `.balance-row-what` in v3.css. */
.membership-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.membership-dates {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* When a record was added, and where it came from (ADR-0146).
   A SIBLING of .membership-dates, never a child: updateMembershipCardHeader
   and updatePassBundleDates rewrite that span's textContent live as the form
   is edited, so anything nested inside it is erased on the first keystroke. */
.record-provenance {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* On a phone the two facts stack instead of competing for one line. The added
   date is NOT hidden here — an invisible added date is the whole complaint
   this exists to answer, and a phone is where staff read these rows most. */
@media (max-width: 600px) {
  .membership-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
}

.membership-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}

.membership-expand-icon {
  color: var(--color-text-muted);
  transition: transform 0.2s;
  font-size: var(--text-xs);
}

.membership-card.expanded .membership-expand-icon {
  transform: rotate(180deg);
}

/* Card Body (edit form) */
.membership-body {
  display: none;
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.membership-card.expanded .membership-body {
  display: block;
}

.membership-card.new-membership .membership-body {
  display: block;
}

/* The row of controls (feature/record-row-controls.js), and Quick add: every control in
   one row is the height of the row's TALLEST control, the small date field (28px), so
   pickers, buttons and inputs line up edge to edge. The sizes are the form's own
   (.btn-sm, .form-input-sm, the native .btn-group-toggle); the band height
   (--toolbar-control-h, ADR-0205) is for controls beside a search field, never a form row. */
.row-ctl, .quick-add { --row-ctl-h: 28px; }
:is(.row-ctl, .quick-add) .btn-group-toggle { height: var(--row-ctl-h); box-sizing: border-box; }
:is(.row-ctl, .quick-add) .btn-toggle { display: inline-flex; align-items: center; }
.row-ctl :is(.btn, .form-input) { height: var(--row-ctl-h); box-sizing: border-box; }
.row-ctl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-5); }
.rc-group { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.rc-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .5px; }
.rc-inline { display: flex; align-items: center; gap: var(--space-2); }
.row-ctl .btn-toggle:disabled { opacity: .45; pointer-events: none; }
.row-ctl .rc-date { width: 150px; }
.row-ctl .rc-num { width: 96px; }
.rc-unit { color: var(--color-text-muted); font-size: var(--text-sm); }
.rc-static { display: inline-flex; align-items: center; height: var(--row-ctl-h); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .row-ctl { flex-direction: column; align-items: stretch; } }

/* Quick add (feature/quick-add.js): one press per membership or bundle the gym sells. */
.quick-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.qa-group { display: flex; align-items: center; gap: var(--space-2); }
.qa-name { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-secondary); }
.qa-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* Shared with: what a bundle paid for when others used it (feature/pass-bundle-ui.js). */
.pass-uses { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.pass-use { display: flex; align-items: center; gap: var(--space-3); min-height: 30px; font-size: var(--text-md); }
.pass-use .pu-when { width: 130px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pass-use .pu-who { font-weight: var(--font-medium); }
.pass-use .pu-where { color: var(--color-text-secondary); }
.pass-use .btn { margin-left: auto; }

/* Each membership and each pass bundle is its OWN card with a gap between them,
   not a row inside one shared box (owner, 2026-10-16). State is a background
   tint on a full border, never a one-sided stripe. v3.css draws the shared box
   (`.membership-form-list`); on the account page the list is just the gap. */
#tab-edit .membership-form-list { gap: var(--space-3); border: 0; border-radius: 0; overflow: visible; background: none; }
#tab-edit .membership-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
#tab-edit .membership-card:last-child { border-bottom: 1px solid var(--color-border); }
#tab-edit .membership-card.new-membership { border-style: dashed; border-color: var(--color-accent); }

/* A card entering or leaving moves like an attendance row does. list-reconciler.js owns the
   classes and measures --row-h and --row-gap (the list's gap, which the card takes with it so
   nothing below steps). Leaving is the SAME keyframes as a row's (slideOutAndCollapse); entering
   is its mirror for a card of any height. None under reduced motion: the card simply appears or goes. */
.membership-card.adding { animation: recordCardIn 0.3s ease; overflow: hidden; }
.membership-card.removing { animation: slideOutAndCollapse 0.3s ease forwards; overflow: hidden; }
@keyframes recordCardIn {
  from { opacity: 0; transform: translateX(-20px); max-height: 0; min-height: 0; margin-bottom: calc(-1 * var(--row-gap, 0px)); border-top-width: 0; border-bottom-width: 0; }
  to { opacity: 1; transform: translateX(0); max-height: var(--row-h, 400px); margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .membership-card.adding { animation: none; }
  .membership-card.removing { animation: none; display: none; }
}

.membership-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.membership-footer-left {
  display: flex;
  gap: var(--space-2);
}

.btn-pause {
  background: var(--color-warning);
  color: white;
  border: none;
}

.btn-pause:hover {
  background: color-mix(in srgb, var(--color-warning) 85%, black);
}

.btn-close-mem {
  background: var(--color-text-muted);
  color: white;
}

@media not all and (hover: none) {
  .btn-close-mem:hover {
    background: var(--color-danger);
  }
}

.btn-delete-mem {
  background: transparent;
  color: var(--color-danger);
}

@media not all and (hover: none) {
  .btn-delete-mem:hover {
    background: var(--color-danger);
  }
}

.btn-delete-mem:hover {
  color: white;
}

/* Legacy membership list styles (for read-only views) */
.membership-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.membership-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

/* Passes Grid */
.passes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.pass-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pass-input-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.pass-input-row .form-input {
  width: 80px;
  text-align: center;
}

/* Pass Edit Grid (Edit Account) */
.passes-edit-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pass-edit-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  transition: background 0.2s;
}

.pass-edit-item.has-passes {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
}

.pass-edit-badge {
  min-width: 140px;
}

/* `.pass-edit-controls` was here and is DELETED (ADR-0124): declared, never
   emitted — grep-confirmed zero occurrences in markup, script or any other
   stylesheet. */

.pass-count-input {
  width: 70px;
  text-align: center;
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  -moz-appearance: textfield;
}

.pass-count-input::-webkit-outer-spin-button,
.pass-count-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ==========================================================================
   PASS BUNDLES (uses membership-card styles)
   ========================================================================== */

/* `.add-pass-controls` + its `.form-select` were here and are DELETED
   (ADR-0124), same reason: a toolbar-shaped family with no emitter. */

/* Read-only form values (used in pass bundle cards) */
.form-value {
  padding: var(--space-2) 0;
  font-weight: var(--font-medium);
}

/* ==========================================================================
   ACTIVITY LOG
   ========================================================================== */
.log-filters .filter-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
}

.filter-presets {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filter-actions {
  display: flex;
  gap: var(--space-2);
}

.log-info {
  padding: 0 var(--space-1);
}

.log-list {
  display: flex;
  flex-direction: column;
}

.log-row {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.log-row:last-child {
  border-bottom: none;
}

.log-row:hover {
  background: var(--hover-row);
}

.log-time {
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  min-width: 70px;
}

.log-date {
  color: var(--color-text-muted);
  min-width: 60px;
}

.log-action {
  flex: 1;
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.log-type {
  font-size: var(--text-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
}

.log-type.checkin {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}

.log-type.pass {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
}

.log-type.account {
  background: color-mix(in srgb, var(--color-staff) 15%, transparent);
  color: var(--color-staff);
}

.log-type.membership {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
}

.log-user {
  color: var(--color-text-muted);
  min-width: 60px;
  text-align: right;
}

@media (max-width: 600px) {
  .settings-subnav.tray {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 600px) {
  .settings-subnav.tray .settings-subnav-item {
    flex: 0 0 auto;
  }
}

/* Settings Sub-Tab Content */
.settings-subtab {
  animation: fadeIn 0.15s ease;
}

.settings-subtab.hidden {
  display: none;
}

/* Override: gated subtab panels need block layout, not the global perm-visible flex. */
.settings-subtab[data-role].perm-visible {
  display: block !important;
}

.settings-subtab[data-role].perm-visible.hidden {
  display: none !important;
}

/* Role-gated section blocks inside a settings subtab (the admin-only Weekly
   Schedule in the Classes tab). Without this, the global [data-role].perm-visible
   flex rule would squash the section into a horizontal row. */
.schedule-section[data-role].perm-visible {
  display: block !important;
}

/* Staff Custom Permissions - Removed, not needed for read-only matrix */
.staff-custom-permissions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.staff-custom-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 12px 16px;
}

.staff-custom-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.staff-custom-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.permission-chip {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* Staff Select Modal */
.staff-select-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.staff-select-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.staff-select-item:hover {
  background: var(--hover-row);
  border-color: var(--color-accent);
}

.staff-select-item strong {
  flex: 0 0 auto;
}

.staff-select-item .text-muted {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Custom Permissions Grid */
.custom-permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}

.permission-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: all 0.15s ease;
}

.permission-checkbox:hover {
  background: var(--hover-row);
}

.permission-checkbox:has(input:checked) {
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
}

.permission-checkbox input {
  accent-color: var(--color-accent);
}

.order-item-variation {
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-weight: var(--font-medium);
}

/* Mapping list - compact grouped layout */
.mapping-section {
  margin-bottom: var(--space-3);
}

.mapping-section-header {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-1);
}

/* Tiny button variant for inline actions */
/* Legacy classes - keep for backward compatibility */

/* Account result items (for order matching) */
.account-result-item {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: all 0.15s ease;
}

.account-result-item:hover {
  background: var(--hover-row);
  border-color: var(--color-accent);
}

.account-result-item.selected {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-color: var(--color-accent);
}

.account-result-name {
  font-weight: var(--font-medium);
}

.account-result-email {
  font-size: var(--text-sm);
}

@media (max-width: 1080px) {
  

  .schedule-sidebar {
  min-width: 180px;
}
}