/* ============================================================
   MODS — Component styles
   Class-based so components get real :hover / :focus / :active
   states. JSX components attach these classes. Tokens only.
   ============================================================ */

/* ---------------------------------------------------------- BUTTON */
.mods-btn {
  --_h: 40px; --_px: 16px; --_fs: var(--fs-body);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  height: var(--_h); padding: 0 var(--_px);
  font-family: var(--font-sans); font-size: var(--_fs);
  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug);
  line-height: 1; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; user-select: none;
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-out);
}
.mods-btn:active { transform: translateY(0.5px) scale(0.985); }
.mods-btn:disabled, .mods-btn.is-loading { opacity: 0.5; pointer-events: none; }
.mods-btn.is-block { display: flex; width: 100%; }
.mods-btn.is-sm { --_h: 32px; --_px: 12px; --_fs: var(--fs-sm); gap: var(--space-1-5); border-radius: var(--radius-sm); }
.mods-btn.is-lg { --_h: 48px; --_px: 22px; --_fs: var(--fs-body-lg); }
.mods-btn > svg { width: 1.15em; height: 1.15em; flex: none; }

.mods-btn.is-primary { background: var(--brand-600); color: #fff; }
.mods-btn.is-primary:hover { background: var(--brand-700); box-shadow: var(--shadow-flame); }
.mods-btn.is-primary:active { background: var(--brand-800); box-shadow: none; }

.mods-btn.is-secondary { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.mods-btn.is-secondary:hover { background: var(--surface-hover); border-color: var(--gray-300); }
.mods-btn.is-secondary:active { background: var(--surface-active); }

.mods-btn.is-ghost { background: transparent; color: var(--text-secondary); }
.mods-btn.is-ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.mods-btn.is-ghost:active { background: var(--surface-active); }

.mods-btn.is-subtle { background: var(--brand-soft); color: var(--text-brand); }
.mods-btn.is-subtle:hover { background: color-mix(in srgb, var(--brand-500) 18%, var(--surface-card)); }

.mods-btn.is-danger { background: var(--danger); color: #fff; }
.mods-btn.is-danger:hover { filter: brightness(0.93); }

.mods-spinner { width: 1.05em; height: 1.05em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mods-spin 0.6s linear infinite; opacity: 0.9; }
@keyframes mods-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------- ICON BUTTON */
.mods-iconbtn {
  --_s: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--_s); height: var(--_s); flex: none;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--icon-default);
  cursor: pointer; transition: var(--transition-colors), transform var(--dur-fast) var(--ease-out);
}
.mods-iconbtn:active { transform: scale(0.92); }
.mods-iconbtn:disabled { opacity: 0.4; pointer-events: none; }
.mods-iconbtn.is-sm { --_s: 32px; border-radius: var(--radius-sm); }
.mods-iconbtn.is-lg { --_s: 48px; }
.mods-iconbtn > svg { width: 19px; height: 19px; }
.mods-iconbtn.is-ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.mods-iconbtn.is-secondary { border-color: var(--border-strong); background: var(--surface-card); box-shadow: var(--shadow-xs); }
.mods-iconbtn.is-secondary:hover { background: var(--surface-hover); }
.mods-iconbtn.is-primary { background: var(--brand-600); color: #fff; }
.mods-iconbtn.is-primary:hover { background: var(--brand-700); }
.mods-iconbtn.is-active { background: var(--brand-soft); color: var(--text-brand); }

/* ---------------------------------------------------------- BADGE */
.mods-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 22px; padding: 0 var(--space-2);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  line-height: 1; border-radius: var(--radius-sm);
  background: var(--surface-active); color: var(--text-secondary);
}
.mods-badge.is-pill { border-radius: var(--radius-pill); padding: 0 var(--space-2-5); }
.mods-badge > svg { width: 13px; height: 13px; }
.mods-badge.is-neutral  { background: var(--surface-active); color: var(--text-secondary); }
.mods-badge.is-brand    { background: var(--brand-soft); color: var(--text-brand); }
.mods-badge.is-info     { background: var(--info-soft); color: var(--info); }
.mods-badge.is-success  { background: var(--success-soft); color: var(--success); }
.mods-badge.is-warning  { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 78%, #000); }
.mods-badge.is-danger   { background: var(--danger-soft); color: var(--danger); }
.mods-badge.is-solid    { background: var(--brand-600); color: #fff; }
.mods-badge.is-count    { min-width: 20px; height: 20px; padding: 0 6px; justify-content: center; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- TAG */
.mods-tag {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: 26px; padding: 0 var(--space-2-5);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--text-secondary); background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  transition: var(--transition-colors);
}
.mods-tag > svg { width: 14px; height: 14px; color: var(--icon-muted); }
.mods-tag .mods-tag__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.mods-tag .mods-tag__x { display: inline-flex; margin-right: -4px; padding: 2px; border-radius: 50%; cursor: pointer; color: var(--icon-muted); }
.mods-tag .mods-tag__x:hover { background: var(--surface-active); color: var(--text-primary); }

/* ---------------------------------------------------------- AVATAR */
.mods-avatar {
  --_s: 36px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--_s); height: var(--_s); flex: none;
  border-radius: var(--radius-pill); overflow: hidden;
  background: var(--brand-gradient); color: #fff;
  font-size: calc(var(--_s) * 0.38); font-weight: var(--fw-bold);
  letter-spacing: 0; user-select: none;
}
.mods-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mods-avatar.is-xs { --_s: 24px; }
.mods-avatar.is-sm { --_s: 30px; }
.mods-avatar.is-lg { --_s: 44px; }
.mods-avatar.is-xl { --_s: 56px; }
.mods-avatar.is-square { border-radius: var(--radius-md); }
.mods-avatar .mods-avatar__ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--surface-card); }
.mods-avatar-stack { display: inline-flex; }
.mods-avatar-stack > .mods-avatar { box-shadow: 0 0 0 2px var(--surface-card); margin-left: -10px; }
.mods-avatar-stack > .mods-avatar:first-child { margin-left: 0; }

/* ---------------------------------------------------------- CARD */
.mods-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-colors), transform var(--dur-base) var(--ease-out);
}
.mods-card.is-flat { box-shadow: none; }
.mods-card.is-raised { box-shadow: var(--shadow-md); border-color: transparent; }
.mods-card.is-interactive { cursor: pointer; }
.mods-card.is-interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); transform: translateY(-2px); }
.mods-card__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.mods-card__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); }
.mods-card__body { padding: var(--space-5); }
.mods-card__footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); }

/* ---------------------------------------------------------- FIELD (text / textarea / select) */
.mods-field { display: flex; flex-direction: column; gap: var(--space-1-5); }
.mods-field__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.mods-field__label .mods-field__req { color: var(--danger); margin-left: 2px; }
.mods-field__hint { font-size: var(--fs-caption); color: var(--text-tertiary); }
.mods-field__hint.is-error { color: var(--danger); }

.mods-inputwrap { position: relative; display: flex; align-items: center; }
.mods-inputwrap > .mods-affix { position: absolute; display: inline-flex; align-items: center; color: var(--icon-muted); pointer-events: none; }
.mods-inputwrap > .mods-affix.is-left { left: 12px; }
.mods-inputwrap > .mods-affix.is-right { right: 12px; }
.mods-inputwrap > .mods-affix > svg { width: 17px; height: 17px; }

.mods-input, .mods-textarea, .mods-select {
  width: 100%; height: 40px; padding: 0 var(--space-3);
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  transition: var(--transition-colors);
}
.mods-input::placeholder, .mods-textarea::placeholder { color: var(--text-muted); }
.mods-input:hover, .mods-textarea:hover, .mods-select:hover { border-color: var(--gray-300); }
.mods-input:focus, .mods-textarea:focus, .mods-select:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--ring-brand); }
.mods-input:disabled, .mods-textarea:disabled, .mods-select:disabled { background: var(--surface-sunken); color: var(--text-muted); cursor: not-allowed; }
.mods-inputwrap.has-left .mods-input { padding-left: 38px; }
.mods-inputwrap.has-right .mods-input { padding-right: 38px; }
.mods-input.is-sm { height: 32px; font-size: var(--fs-sm); }
.mods-input.is-lg { height: 48px; font-size: var(--fs-body-lg); }
.mods-input.is-mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.mods-field.is-invalid .mods-input, .mods-field.is-invalid .mods-textarea, .mods-field.is-invalid .mods-select { border-color: var(--danger); }
.mods-field.is-invalid .mods-input:focus { box-shadow: var(--ring-danger); }

.mods-textarea { height: auto; min-height: 88px; padding: var(--space-2-5) var(--space-3); line-height: var(--lh-normal); resize: vertical; }

.mods-select { appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C7480' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* ---------------------------------------------------------- CHECKBOX */
.mods-checkbox { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: var(--fs-body); color: var(--text-primary); }
.mods-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.mods-checkbox__box { width: 18px; height: 18px; flex: none; margin-top: 1px; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface-card); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: var(--transition-colors); }
.mods-checkbox__box > svg { width: 13px; height: 13px; opacity: 0; transform: scale(0.6); transition: all var(--dur-fast) var(--ease-out); }
.mods-checkbox input:checked + .mods-checkbox__box { background: var(--brand-600); border-color: var(--brand-600); }
.mods-checkbox input:checked + .mods-checkbox__box > svg { opacity: 1; transform: scale(1); }
.mods-checkbox input:focus-visible + .mods-checkbox__box { box-shadow: var(--ring-brand); }
.mods-checkbox:hover .mods-checkbox__box { border-color: var(--brand-400); }

/* ---------------------------------------------------------- SWITCH */
.mods-switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.mods-switch input { position: absolute; opacity: 0; pointer-events: none; }
.mods-switch__track { position: relative; width: 40px; height: 23px; flex: none; border-radius: var(--radius-pill); background: var(--gray-300); transition: background var(--dur-base) var(--ease-out); }
.mods-switch__thumb { position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out); }
.mods-switch input:checked + .mods-switch__track { background: var(--brand-600); }
.mods-switch input:checked + .mods-switch__track .mods-switch__thumb { transform: translateX(17px); }
.mods-switch input:focus-visible + .mods-switch__track { box-shadow: var(--ring-brand); }
.mods-switch.is-sm .mods-switch__track { width: 32px; height: 19px; }
.mods-switch.is-sm .mods-switch__thumb { width: 14px; height: 14px; }
.mods-switch.is-sm input:checked + .mods-switch__track .mods-switch__thumb { transform: translateX(13px); }

/* ---------------------------------------------------------- TABS */
.mods-tabs { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px; background: var(--surface-sunken); border-radius: var(--radius-md); }
.mods-tab { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 32px; padding: 0 var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-tertiary); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-colors); }
.mods-tab > svg { width: 15px; height: 15px; }
.mods-tab:hover { color: var(--text-primary); }
.mods-tab.is-active { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-xs); }
/* Underline variant */
.mods-tabs.is-underline { background: transparent; padding: 0; gap: var(--space-5); border-bottom: 1px solid var(--border-subtle); border-radius: 0; }
.mods-tabs.is-underline .mods-tab { height: 42px; padding: 0 2px; border-radius: 0; box-shadow: none; border-bottom: 2px solid transparent; }
.mods-tabs.is-underline .mods-tab.is-active { background: transparent; color: var(--text-brand); border-bottom-color: var(--brand-600); }

/* ---------------------------------------------------------- STATUS BADGE (domain) */
.mods-status {
  --_c: var(--status-booked); --_bg: var(--status-booked-soft);
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: 24px; padding: 0 var(--space-2-5);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1;
  white-space: nowrap;
  color: color-mix(in srgb, var(--_c) 82%, var(--text-primary));
  background: var(--_bg); border-radius: var(--radius-pill);
}
.mods-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--_c); flex: none; }
.mods-status.is-booked    { --_c: var(--status-booked);    --_bg: var(--status-booked-soft); }
.mods-status.is-onsite    { --_c: var(--status-onsite);    --_bg: var(--status-onsite-soft); }
.mods-status.is-waiting   { --_c: var(--status-waiting);   --_bg: var(--status-waiting-soft); }
.mods-status.is-progress  { --_c: var(--status-progress);  --_bg: var(--status-progress-soft); }
.mods-status.is-ready     { --_c: var(--status-ready);     --_bg: var(--status-ready-soft); }
.mods-status.is-delivered { --_c: var(--status-delivered); --_bg: var(--status-delivered-soft); }
.mods-status.is-noshow    { --_c: var(--status-noshow);    --_bg: var(--status-noshow-soft); }
/* solid variant for dense boards */
.mods-status.is-solid { color: #fff; background: var(--_c); }
.mods-status.is-solid .mods-status__dot { background: rgba(255,255,255,0.85); }
.mods-status.is-dot-only { padding: 0; width: 10px; height: 10px; background: transparent; }
.mods-status.is-dot-only .mods-status__dot { width: 10px; height: 10px; }

/* ---------------------------------------------------------- WORK TYPE TAG (domain) */
.mods-wt {
  --_c: var(--wt-repair);
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: 26px; padding: 0 var(--space-2-5) 0 var(--space-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1;
  white-space: nowrap;
  color: var(--text-secondary);
  background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
}
.mods-wt__icon { display: inline-flex; width: 16px; height: 16px; color: var(--_c); }
.mods-wt__icon > svg { width: 16px; height: 16px; }
.mods-wt.is-repair  { --_c: var(--wt-repair); }
.mods-wt.is-diag    { --_c: var(--wt-diag); }
.mods-wt.is-complex { --_c: var(--wt-complex); }
.mods-wt.is-service { --_c: var(--wt-service); }
/* tinted variant */
.mods-wt.is-tinted { background: color-mix(in srgb, var(--_c) 10%, var(--surface-card)); border-color: color-mix(in srgb, var(--_c) 22%, transparent); color: color-mix(in srgb, var(--_c) 70%, var(--text-primary)); }
/* ТО sub-phase pill (Pre / ТО / Post) */
.mods-wt__phase { margin-left: 2px; padding: 1px 6px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--_c) 16%, var(--surface-card)); color: var(--_c); }

/* ---------------------------------------------------------- PLATE (domain) */
.mods-plate {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: 30px; padding: 0 var(--space-2-5);
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-body);
  letter-spacing: 0.06em; color: var(--text-primary);
  white-space: nowrap;
  background: var(--surface-card);
  border: 1.5px solid var(--gray-800); border-radius: var(--radius-sm);
}
.mods-plate__flag { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--text-tertiary); padding-left: 6px; border-left: 1px solid var(--border-default); letter-spacing: var(--tracking-caps); }

/* ---------------------------------------------------------- MONEY (domain) */
.mods-money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--text-primary); white-space: nowrap; }
.mods-money__cur { color: var(--text-tertiary); font-weight: var(--fw-medium); }
.mods-money.is-pos { color: var(--success); }
.mods-money.is-neg { color: var(--danger); }
.mods-money.is-lg { font-size: var(--fs-h2); letter-spacing: var(--tracking-snug); }