/* Shopfloor AI component styles. Loaded after tokens.css. */

.sf-focusable:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.sf-on-brand:focus-visible,
.sf-on-accent:focus-visible {
  outline-color: var(--focus-ring-inverse);
}

/* ---------------------------------------------------------------- Button */

.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  text-decoration: none;
  background: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.sf-btn--sm { font-size: 12px; line-height: 16px; font-weight: 600; padding: var(--space-2) var(--space-4); }
.sf-btn--lg { font-size: 16px; line-height: 24px; padding: var(--space-4) var(--space-6); }
.sf-btn--pill { border-radius: var(--radius-pill); }
.sf-btn--block { display: flex; width: 100%; }

.sf-btn--primary { background-color: var(--surface-brand); color: var(--ink-on-brand); }
.sf-btn--primary:hover { background-color: var(--teal-mid); }
.sf-btn--primary:active { background-color: var(--teal-deep); }

.sf-btn--secondary { background-color: transparent; color: var(--ink); border-color: var(--border-strong); }
.sf-btn--secondary:hover { background-color: var(--surface-subtle); }
.sf-btn--secondary:active { border-color: var(--ink-brand); }

.sf-btn--accent { background-color: var(--surface-accent); color: var(--ink-on-accent); }
.sf-btn--accent:hover { background-color: #d16724; }
.sf-btn--accent:active { background-color: #bd5c1f; }

.sf-btn--ghost { background-color: transparent; color: var(--ink-brand); }
.sf-btn--ghost:hover { background-color: var(--surface-subtle); }

.sf-btn[disabled], .sf-btn[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.sf-btn--loading, .sf-btn--loading[disabled] { opacity: 1; cursor: progress; }
.sf-btn__label { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Loading: a ring in currentColor before the label; the label stays so the width holds. */
.sf-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: sf-spin 700ms linear infinite;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sf-spinner { animation-duration: 1500ms; } }
.sf-btn[disabled]:hover { background-color: inherit; }
.sf-btn--primary[disabled]:hover { background-color: var(--surface-brand); }
.sf-btn--accent[disabled]:hover { background-color: var(--surface-accent); }
.sf-btn--secondary[disabled]:hover,
.sf-btn--ghost[disabled]:hover { background-color: transparent; }

/* ------------------------------------------------------------ IconButton */

.sf-iconbtn { padding: 0; flex: none; }
.sf-iconbtn--sm { width: 32px; height: 32px; }
.sf-iconbtn--md { width: 40px; height: 40px; }
.sf-iconbtn--lg { width: 48px; height: 48px; }
.sf-iconbtn__glyph { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.sf-iconbtn--sm .sf-iconbtn__glyph { width: 16px; height: 16px; }
.sf-iconbtn--lg .sf-iconbtn__glyph { width: 24px; height: 24px; }
.sf-iconbtn__glyph > * { width: 100%; height: 100%; }
.sf-iconbtn--pressed.sf-btn--ghost,
.sf-iconbtn--pressed.sf-btn--secondary { background-color: var(--surface-subtle); color: var(--ink-brand); }

/* ------------------------------------------------------------------ Card */

.sf-card {
  display: block;
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-family: var(--font-sans);
  color: var(--ink);
}
.sf-card--muted { background-color: var(--surface-muted); }
.sf-card--outlined { background-color: var(--surface); border: 1px solid var(--border-strong); }
.sf-card--subtle { background-color: var(--surface-subtle); }
.sf-card--brand { background-color: var(--surface-brand); color: var(--ink-on-brand); }
.sf-card--compact { padding: var(--space-5); }

/* Interactive: the whole card is one target. Hover and press read by border and tint,
   never by a shadow; the focus ring comes from .sf-focusable. */
.sf-card--interactive { cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: border-color 120ms ease, background-color 120ms ease; }
.sf-card--interactive.sf-card--outlined { border-color: var(--border-strong); }
.sf-card--interactive:hover { border-color: var(--ink-brand); }
.sf-card--interactive.sf-card--muted:hover, .sf-card--interactive.sf-card--outlined:hover { background-color: var(--surface-subtle); }
.sf-card--interactive.sf-card--brand:hover { background-color: var(--teal-mid); border-color: transparent; }
.sf-card--interactive:active { border-color: var(--ink-brand); }
.sf-card--interactive.sf-card--brand:active { background-color: var(--teal-deep); }

.sf-card__eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2) 0;
}
.sf-card--brand .sf-card__eyebrow { color: var(--ink-on-brand); opacity: 0.85; }
.sf-card__title { font-size: 20px; line-height: 1.35; font-weight: 600; margin: 0; }
.sf-card__body { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ink-muted); margin: var(--space-2) 0 0 0; }
.sf-card--brand .sf-card__body { color: var(--ink-on-brand); }
.sf-card__footer { margin-top: var(--space-5); display: flex; gap: var(--space-2); }

/* ----------------------------------------------------------------- Badge */

.sf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.sf-badge--pill { border-radius: var(--radius-pill); padding-left: var(--space-3); padding-right: var(--space-3); }
.sf-badge--neutral { background-color: var(--surface-muted); color: var(--ink); border-color: var(--border); }
.sf-badge--brand { background-color: var(--surface-brand); color: var(--ink-on-brand); }
.sf-badge--accent { background-color: var(--surface-accent); color: var(--ink-on-accent); }
.sf-badge--success { background-color: transparent; color: var(--status-success); border-color: var(--status-success); }
.sf-badge--warning { background-color: transparent; color: var(--status-warning); border-color: var(--status-warning); }
.sf-badge--danger { background-color: transparent; color: var(--status-danger); border-color: var(--status-danger); }
.sf-badge--info { background-color: transparent; color: var(--status-info); border-color: var(--status-info); }

/* ----------------------------------------------------------------- Input */

.sf-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); }
.sf-field__label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.sf-field__optional { color: var(--ink-muted); font-weight: 400; }
.sf-input {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  box-sizing: border-box;
}
.sf-input::placeholder { color: var(--ink-muted); }
.sf-input:hover { border-color: var(--ink-brand); }
.sf-input[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.sf-input--invalid { border-color: var(--status-danger); }
.sf-field__hint { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.sf-field__error { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--status-danger); display: flex; gap: var(--space-1); }
.sf-field__below { display: flex; justify-content: space-between; gap: var(--space-4); }
.sf-field__count { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-muted); margin-left: auto; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- Textarea */

.sf-textarea { resize: vertical; min-height: 88px; line-height: 22px; }

/* --------------------------------------------------- Checkbox and Radio */

.sf-choice { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); position: relative; }
.sf-choice__input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.sf-choice__label { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.sf-choice--disabled .sf-choice__label { opacity: var(--opacity-disabled); cursor: not-allowed; }
.sf-choice__box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0;
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.sf-choice--radio .sf-choice__box { border-radius: var(--radius-pill); }
.sf-choice__mark { display: none; }
.sf-choice__input:checked + .sf-choice__label .sf-choice__box { background-color: var(--surface-brand); border-color: var(--surface-brand); }
.sf-choice__input:checked + .sf-choice__label .sf-choice__mark {
  display: block;
  width: 6px;
  height: 10px;
  margin-top: -2px;
  border-right: 2px solid var(--ink-on-brand);
  border-bottom: 2px solid var(--ink-on-brand);
  transform: rotate(45deg);
}
.sf-choice--radio .sf-choice__input:checked + .sf-choice__label .sf-choice__mark {
  width: 8px; height: 8px; margin: 0; border: none; border-radius: var(--radius-pill); background-color: var(--ink-on-brand); transform: none;
}
.sf-choice__input:indeterminate + .sf-choice__label .sf-choice__box { background-color: var(--surface-brand); border-color: var(--surface-brand); }
.sf-choice__input:indeterminate + .sf-choice__label .sf-choice__mark {
  display: block; width: 10px; height: 2px; margin: 0; border: none; background-color: var(--ink-on-brand); transform: none;
}
.sf-choice__label:hover .sf-choice__box { border-color: var(--ink-brand); }
.sf-choice--invalid .sf-choice__box { border-color: var(--status-danger); }
.sf-choice__input:focus-visible + .sf-choice__label .sf-choice__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sf-choice__text { display: flex; flex-direction: column; gap: 2px; }
.sf-choice__name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.sf-choice__description { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.sf-choice__error { margin-left: calc(20px + var(--space-3)); }

.sf-radiogroup { border: none; padding: 0; margin: 0; min-width: 0; }
.sf-radiogroup legend { padding: 0; margin-bottom: var(--space-2); }
.sf-radiogroup__options { display: flex; flex-direction: column; gap: var(--space-3); }
.sf-radiogroup--inline .sf-radiogroup__options { flex-direction: row; flex-wrap: wrap; gap: var(--space-6); }

/* ------------------------------------------------------------------ Stat */

.sf-stat {
  display: block;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-family: var(--font-sans);
  color: var(--ink);
}
.sf-stat--muted { background-color: var(--surface-muted); }
.sf-stat--outlined { background-color: var(--surface); border: 1px solid var(--border-strong); }
.sf-stat--brand { background-color: var(--surface-brand); color: var(--ink-on-brand); }

.sf-stat__label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0;
}
.sf-stat--brand .sf-stat__label { color: var(--ink-on-brand); opacity: 0.85; }
.sf-stat__value { font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; margin: var(--space-2) 0 0 0; }
.sf-stat__unit { font-size: 16px; line-height: 24px; font-weight: 500; margin-left: var(--space-1); }
.sf-stat__trend { display: flex; gap: var(--space-1); font-size: 14px; line-height: 20px; font-weight: 500; margin: var(--space-1) 0 0 0; color: var(--ink-muted); }
.sf-stat--brand .sf-stat__trend { color: var(--ink-on-brand); }
.sf-stat__trend--success { color: var(--status-success); }
.sf-stat__trend--warning { color: var(--status-warning); }
.sf-stat__trend--danger { color: var(--status-danger); }
.sf-stat__footnote { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-muted); margin: var(--space-2) 0 0 0; }
.sf-stat--brand .sf-stat__footnote { color: var(--ink-on-brand); opacity: 0.85; }

/* ---------------------------------------------------------------- Select */

.sf-select__wrap { position: relative; display: block; }
.sf-select { appearance: none; padding-right: var(--space-10); background-image: none; }
.sf-select__chevron {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

/* ---------------------------------------------------------------- Toggle */

.sf-toggle { display: flex; font-family: var(--font-sans); }
.sf-toggle__input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.sf-toggle__label { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.sf-toggle--disabled .sf-toggle__label { opacity: var(--opacity-disabled); cursor: not-allowed; }
.sf-toggle__track {
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: var(--radius-pill);
  background-color: var(--surface-muted);
  border: 1px solid var(--border-strong);
  position: relative;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.sf-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background-color: var(--border-strong);
  transition: transform 120ms ease, background-color 120ms ease;
}
.sf-toggle__input:checked + .sf-toggle__label .sf-toggle__track { background-color: var(--surface-brand); border-color: var(--surface-brand); }
.sf-toggle__input:checked + .sf-toggle__label .sf-toggle__knob { transform: translateX(16px); background-color: var(--ink-on-brand); }
.sf-toggle__input:focus-visible + .sf-toggle__label .sf-toggle__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sf-toggle__text { display: flex; flex-direction: column; gap: 2px; }
.sf-toggle__name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.sf-toggle__description { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }

/* ------------------------------------------------------------------ Tabs */

.sf-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); font-family: var(--font-sans); }
.sf-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  margin-bottom: -1px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
}
.sf-tab:hover { color: var(--ink); }
.sf-tab--selected { color: var(--ink-brand); border-bottom-color: var(--ink-brand); font-weight: 600; }
.sf-tab[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.sf-tab__count {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--surface-muted);
  color: var(--ink);
}

/* ----------------------------------------------------------------- Table */

.sf-table__scroll { overflow-x: auto; }
.sf-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  color: var(--ink);
}
.sf-table__caption {
  caption-side: top;
  text-align: left;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ink-muted);
  padding-bottom: var(--space-2);
}
.sf-table th {
  text-align: left;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.sf-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: top; }
.sf-table tbody tr:last-child td { border-bottom: none; }
.sf-table--dense th, .sf-table--dense td { padding: var(--space-2) var(--space-3); }
.sf-table__empty { color: var(--ink-muted); text-align: center; padding: var(--space-8) var(--space-4); }

/* ----------------------------------------------------------------- Alert */

.sf-alert {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-sans);
  border: 1px solid;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background-color: var(--surface-muted);
}
.sf-alert--success { border-color: var(--status-success); }
.sf-alert--warning { border-color: var(--status-warning); }
.sf-alert--danger { border-color: var(--status-danger); }
.sf-alert--info { border-color: var(--status-info); }

.sf-alert__mark { font-size: 14px; line-height: 20px; font-weight: 800; flex: none; }
.sf-alert--success .sf-alert__mark { color: var(--status-success); }
.sf-alert--warning .sf-alert__mark { color: var(--status-warning); }
.sf-alert--danger .sf-alert__mark { color: var(--status-danger); }
.sf-alert--info .sf-alert__mark { color: var(--status-info); }

.sf-alert__content { display: flex; flex-direction: column; gap: var(--space-1); }
.sf-alert__title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); margin: 0; }
.sf-alert__body { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ink-muted); margin: 0; }

/* ----------------------------------------------------------------- Toast */

.sf-toasts {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(400px, calc(100vw - 2 * var(--space-4)));
  pointer-events: none;
}
.sf-toasts > * { pointer-events: auto; }
.sf-toasts--bottom-right { right: var(--space-4); bottom: var(--space-4); }
.sf-toasts--bottom-left { left: var(--space-4); bottom: var(--space-4); }
.sf-toasts--top-right { right: var(--space-4); top: var(--space-4); }
.sf-toasts--top-left { left: var(--space-4); top: var(--space-4); }

.sf-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-sans);
  background-color: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
}
.sf-toast--neutral { border-left-color: var(--border-strong); }
.sf-toast--success { border-left-color: var(--status-success); }
.sf-toast--warning { border-left-color: var(--status-warning); }
.sf-toast--danger { border-left-color: var(--status-danger); }
.sf-toast--info { border-left-color: var(--status-info); }
.sf-toast__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-toast__title { font-size: 14px; line-height: 20px; font-weight: 600; margin: 0; }
.sf-toast__body { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ink-muted); margin: 0; }
.sf-toast__action { flex: none; align-self: center; }
.sf-toast__close {
  flex: none;
  width: 32px;
  height: 32px;
  margin: -4px -4px -4px 0;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.sf-toast__close:hover { color: var(--ink); background-color: var(--surface-muted); }

/* ----------------------------------------------------------------- Modal */

.sf-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: var(--space-4); font-family: var(--font-sans); }
.sf-modal__scrim { position: absolute; inset: 0; background-color: var(--teal-deepest); opacity: var(--opacity-scrim); }
.sf-modal__dialog {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 2 * var(--space-4));
  overflow: auto;
  background-color: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  outline: none;
}
.sf-modal__dialog--sm { max-width: 400px; }
.sf-modal__dialog--md { max-width: 560px; }
.sf-modal__dialog--lg { max-width: 800px; }
.sf-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.sf-modal__title { font-size: 20px; line-height: 1.35; font-weight: 600; margin: 0; }
.sf-modal__close {
  flex: none;
  width: 40px;
  height: 40px;
  margin: -8px -8px -8px 0;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.sf-modal__close:hover { color: var(--ink); background-color: var(--surface-muted); }
.sf-modal__description { font-size: 14px; line-height: 22px; color: var(--ink-muted); margin: 0; }
.sf-modal__body { font-size: 14px; line-height: 22px; }
.sf-modal__footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
@media (max-width: 480px) { .sf-modal { align-items: flex-end; padding: 0; } .sf-modal__dialog { border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 90vh; } }