/* ============================================================
   WatFill — Component library
   Every component is token-driven: restyle the whole product
   by editing tokens.css, never by touching this file.
   ============================================================ */

/* ============================================================
   0. ICON DEFAULT
   Zero-specificity fallback: any icon dropped into generic
   markup gets a sane size. Every rule below overrides it,
   because :where() contributes no specificity.
   ============================================================ */
:where(svg) { inline-size: 20px; block-size: 20px; flex: none; }

/* Charts and decorative art opt out explicitly. */
.chart, .wf-metric__spark, .auth__rings { inline-size: 100%; block-size: auto; }
.wf-metric__spark { block-size: 46px; }
.auth__rings { inline-size: 520px; block-size: 520px; }

/* ============================================================
   1. BUTTONS  (MD3: filled / tonal / outlined / text / elevated)
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--wf-2);
  block-size: 40px;
  padding-inline: var(--wf-5);
  border-radius: var(--wf-r-full);
  font-size: 14px; font-weight: 600; line-height: 1;
  white-space: nowrap; user-select: none;
  transition: background-color var(--wf-dur-short) var(--wf-ease-standard),
              box-shadow var(--wf-dur-short) var(--wf-ease-standard),
              color var(--wf-dur-short) var(--wf-ease-standard),
              transform var(--wf-dur-short) var(--wf-ease-standard);
}
.btn svg { inline-size: 18px; block-size: 18px; flex: none; }
.btn::after {                       /* MD3 state layer */
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; background: currentColor;
  opacity: 0; transition: opacity var(--wf-dur-short) var(--wf-ease-standard);
  pointer-events: none;
}
.btn:hover::after  { opacity: var(--wf-state-hover); }
.btn:active::after { opacity: var(--wf-state-press); }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn.is-disabled {
  pointer-events: none; opacity: .38; box-shadow: none;
}

.btn--filled   { background: var(--wf-primary); color: var(--wf-on-primary); box-shadow: var(--wf-e1); }
.btn--filled:hover { box-shadow: var(--wf-e2); }
.btn--tonal    { background: var(--wf-primary-container); color: var(--wf-on-primary-container); }
.btn--outlined { border: 1px solid var(--wf-outline-variant); color: var(--wf-primary); background: var(--wf-surface-container-lowest); }
.btn--outlined:hover { border-color: var(--wf-primary); }
.btn--text     { color: var(--wf-primary); padding-inline: var(--wf-3); }
.btn--elevated { background: var(--wf-surface-container-lowest); color: var(--wf-primary); box-shadow: var(--wf-e2); }
.btn--elevated:hover { box-shadow: var(--wf-e3); }
.btn--danger   { background: var(--wf-error); color: var(--wf-on-error); box-shadow: var(--wf-e1); }
.btn--danger-text { color: var(--wf-error); }
.btn--success  { background: var(--wf-success); color: var(--wf-on-success); }
.btn--neutral  { background: var(--wf-surface-container-high); color: var(--wf-on-surface); }

.btn--sm  { block-size: 34px; padding-inline: var(--wf-4); font-size: 13px; }
.btn--sm svg { inline-size: 16px; block-size: 16px; }
.btn--lg  { block-size: 48px; padding-inline: var(--wf-7); font-size: 15px; }
.btn--block { inline-size: 100%; }

/* Icon button */
.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  inline-size: 40px; block-size: 40px; flex: none;
  border-radius: var(--wf-r-full);
  color: var(--wf-on-surface-variant);
  transition: color var(--wf-dur-short) var(--wf-ease-standard);
}
.icon-btn svg { inline-size: 20px; block-size: 20px; }
.icon-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0;
  transition: opacity var(--wf-dur-short) var(--wf-ease-standard);
}
.icon-btn:hover::after  { opacity: var(--wf-state-hover); }
.icon-btn:active::after { opacity: var(--wf-state-press); }
.icon-btn:not([class*="icon-btn--c-"]):hover { color: var(--wf-on-surface); }
/* Semantic action colours (table row actions): each action reads at a glance. */
.icon-btn--c-primary { color: var(--wf-primary); }
.icon-btn--c-ok      { color: var(--wf-success); }
.icon-btn--c-warn    { color: var(--wf-warning); }
.icon-btn--c-err     { color: var(--wf-error); }
.icon-btn--c-qr      { color: var(--wf-tertiary); }
.icon-btn--c-muted   { color: var(--wf-on-surface-variant); }
.icon-btn[disabled]  { opacity: .38; cursor: not-allowed; }
/* "has something" marker (e.g. an order that already carries a driver note) */
.icon-btn--dot::before {
  content: ""; position: absolute; inset-block-start: 3px; inset-inline-end: 3px; z-index: 1;
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--wf-warning); box-shadow: 0 0 0 2px var(--wf-surface-container-lowest);
}
.icon-btn--sm { inline-size: 32px; block-size: 32px; }
.icon-btn--sm svg { inline-size: 18px; block-size: 18px; }
.icon-btn--filled { background: var(--wf-primary); color: var(--wf-on-primary); }
.icon-btn--tonal  { background: var(--wf-surface-container-high); color: var(--wf-on-surface-variant); }
.icon-btn--danger:hover { color: var(--wf-error); }

/* Segmented control */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--wf-surface-container-high);
  border-radius: var(--wf-r-full);
}
.segmented button {
  padding: 7px var(--wf-4); border-radius: var(--wf-r-full);
  font-size: 13px; font-weight: 600; color: var(--wf-on-surface-variant);
  white-space: nowrap;
  transition: all var(--wf-dur-short) var(--wf-ease-standard);
}
.segmented button:hover { color: var(--wf-on-surface); }
.segmented button[aria-pressed="true"] {
  background: var(--wf-surface-container-lowest);
  color: var(--wf-primary); box-shadow: var(--wf-e1);
}

/* FAB — mobile primary action */
.wf-fab {
  position: fixed; inset-block-end: var(--wf-6); inset-inline-end: var(--wf-6);
  display: none; align-items: center; gap: var(--wf-2);
  block-size: 56px; padding-inline: var(--wf-5);
  border-radius: var(--wf-r-lg);
  background: var(--wf-primary); color: var(--wf-on-primary);
  box-shadow: var(--wf-e4); font-weight: 700; z-index: 40;
}
.wf-fab svg { inline-size: 22px; block-size: 22px; }
@media (max-width: 860px) { .wf-fab { display: inline-flex; } }

/* ============================================================
   2. CARDS
   ============================================================ */
.wf-card {
  background: var(--wf-surface-container-lowest);
  border: 1px solid var(--wf-outline-variant);
  border-radius: var(--wf-r-lg);
  box-shadow: var(--wf-e1);
  overflow: hidden;
  transition: box-shadow var(--wf-dur-med) var(--wf-ease-standard),
              border-color var(--wf-dur-med) var(--wf-ease-standard),
              transform var(--wf-dur-med) var(--wf-ease-standard);
}
.wf-card--flat  { box-shadow: none; }
.wf-card--pad   { padding: var(--wf-5); }
.wf-card--hover:hover { box-shadow: var(--wf-e3); transform: translateY(-2px); border-color: transparent; }
.wf-card--accent { border-inline-start: 3px solid var(--wf-primary); }

.wf-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wf-4); padding: var(--wf-5) var(--wf-5) var(--wf-4);
  border-block-end: 1px solid var(--wf-outline-variant);
}
.wf-card__head--plain { border-block-end: 0; padding-block-end: 0; }
.wf-card__body { padding: var(--wf-5); }
.wf-card__body--tight { padding: var(--wf-4); }
.wf-card__foot {
  padding: var(--wf-4) var(--wf-5);
  border-block-start: 1px solid var(--wf-outline-variant);
  background: var(--wf-surface-container-low);
  display: flex; align-items: center; justify-content: space-between; gap: var(--wf-3);
}

/* ---------- Metric / KPI card ---------- */
.wf-metric { position: relative; padding: var(--wf-5); overflow: hidden; }
.wf-metric__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wf-3); }
.wf-metric__label { color: var(--wf-on-surface-variant); font-size: 13px; font-weight: 600; }
.wf-metric__value {
  font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.5px;
  margin-block-start: var(--wf-3);
}
.wf-metric__value small { font-size: 15px; font-weight: 600; color: var(--wf-on-surface-variant); margin-inline-start: 4px; }
.wf-metric__icon {
  display: grid; place-items: center; inline-size: 42px; block-size: 42px;
  border-radius: var(--wf-r-md); flex: none;
  background: var(--wf-primary-container); color: var(--wf-on-primary-container);
}
.wf-metric__icon svg { inline-size: 21px; block-size: 21px; }
.wf-metric__icon--teal   { background: var(--wf-tertiary-container); color: var(--wf-on-tertiary-container); }
.wf-metric__icon--amber  { background: var(--wf-warning-container);  color: var(--wf-on-warning-container); }
.wf-metric__icon--green  { background: var(--wf-success-container);  color: var(--wf-on-success-container); }
.wf-metric__icon--red    { background: var(--wf-error-container);    color: var(--wf-on-error-container); }
.wf-metric__foot { display: flex; align-items: center; gap: var(--wf-2); margin-block-start: var(--wf-3); flex-wrap: wrap; }
.wf-metric__spark { position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 46px; opacity: .5; pointer-events: none; }

.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; }
.delta svg { inline-size: 14px; block-size: 14px; }
.delta--up   { color: var(--wf-success); }
.delta--down { color: var(--wf-error); }
.delta--flat { color: var(--wf-on-surface-variant); }

/* ============================================================
   3. CHIPS / BADGES / STATUS
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: var(--wf-2);
  block-size: 32px; padding-inline: var(--wf-3);
  border-radius: var(--wf-r-sm);
  border: 1px solid var(--wf-outline-variant);
  background: var(--wf-surface-container-lowest);
  font-size: 13px; font-weight: 600; color: var(--wf-on-surface-variant);
  transition: all var(--wf-dur-short) var(--wf-ease-standard);
}
.chip svg { inline-size: 16px; block-size: 16px; }
.chip--select { cursor: pointer; }
.chip--select:hover { background: var(--wf-surface-container); }
.chip[aria-pressed="true"], .chip--active {
  background: var(--wf-primary-container); color: var(--wf-on-primary-container);
  border-color: transparent;
}
.chip--input { border-radius: var(--wf-r-full); }
.chip__x { display: grid; place-items: center; inline-size: 18px; block-size: 18px; border-radius: 50%; opacity: .7; }
.chip__x:hover { background: rgb(0 0 0 / .08); opacity: 1; }
.chip__count {
  min-inline-size: 20px; block-size: 20px; padding-inline: 5px;
  display: grid; place-items: center; border-radius: var(--wf-r-full);
  background: var(--wf-primary); color: var(--wf-on-primary); font-size: 11px;
}

/* Status pill — the workhorse of the tables */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  block-size: 26px; padding-inline: 10px;
  border-radius: var(--wf-r-full);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.status::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status--new       { background: var(--wf-info-container);      color: var(--wf-on-info-container); }
.status--assigned  { background: var(--wf-secondary-container); color: var(--wf-on-secondary-container); }
.status--ontheway  { background: var(--wf-warning-container);   color: var(--wf-on-warning-container); }
.status--delivered { background: var(--wf-success-container);   color: var(--wf-on-success-container); }
.status--cancelled { background: var(--wf-error-container);     color: var(--wf-on-error-container); }
.status--paid      { background: var(--wf-success-container);   color: var(--wf-on-success-container); }
.status--partial   { background: var(--wf-warning-container);   color: var(--wf-on-warning-container); }
.status--debt      { background: var(--wf-error-container);     color: var(--wf-on-error-container); }
.status--neutral   { background: var(--wf-surface-container-high); color: var(--wf-on-surface-variant); }

.status--live::before { animation: pulse 1.6s var(--wf-ease-standard) infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(1.5); }
}

.badge {
  min-inline-size: 18px; block-size: 18px; padding-inline: 5px;
  display: inline-grid; place-items: center;
  border-radius: var(--wf-r-full);
  background: var(--wf-error); color: var(--wf-on-error);
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* ---------- Avatars ---------- */
.avatar {
  display: grid; place-items: center; flex: none;
  inline-size: 40px; block-size: 40px; border-radius: var(--wf-r-full);
  background: var(--wf-secondary-container); color: var(--wf-on-secondary-container);
  font-weight: 700; font-size: 14px; letter-spacing: -.3px;
  overflow: hidden; user-select: none;
}
.avatar--sm { inline-size: 32px; block-size: 32px; font-size: 12px; }
.avatar--lg { inline-size: 64px; block-size: 64px; font-size: 22px; }
.avatar--xl { inline-size: 84px; block-size: 84px; font-size: 28px; }
.avatar--sq { border-radius: var(--wf-r-md); }
.avatar--primary { background: var(--wf-primary-container); color: var(--wf-on-primary-container); }
.avatar--teal    { background: var(--wf-tertiary-container); color: var(--wf-on-tertiary-container); }
.avatar--amber   { background: var(--wf-warning-container); color: var(--wf-on-warning-container); }

.avatar-stack { display: flex; }
.avatar-stack .avatar { border: 2px solid var(--wf-surface-container-lowest); }
.avatar-stack .avatar + .avatar { margin-inline-start: -10px; }

.presence {
  position: relative;
}
.presence::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-end: 0;
  inline-size: 11px; block-size: 11px; border-radius: 50%;
  border: 2px solid var(--wf-surface-container-lowest);
  background: var(--wf-outline);
}
.presence--on::after   { background: var(--wf-success); }
.presence--busy::after { background: var(--wf-warning); }

/* ============================================================
   4. FORMS  (MD3 outlined fields)
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.field__label { font-size: 13px; font-weight: 600; color: var(--wf-on-surface-variant); }
.field__label .req { color: var(--wf-error); margin-inline-start: 2px; }
.field__hint { font-size: 12px; color: var(--wf-on-surface-variant); }
.field__error { font-size: 12px; color: var(--wf-error); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.field__error svg { inline-size: 14px; block-size: 14px; }

.input, .select, .textarea {
  inline-size: 100%; block-size: 44px;
  padding-inline: var(--wf-4);
  background: var(--wf-surface-container-lowest);
  border: 1px solid var(--wf-outline-variant);
  border-radius: var(--wf-r-md);
  color: var(--wf-on-surface); font-size: 14px;
  transition: border-color var(--wf-dur-short) var(--wf-ease-standard),
              box-shadow var(--wf-dur-short) var(--wf-ease-standard),
              background-color var(--wf-dur-short) var(--wf-ease-standard);
}
.textarea { block-size: auto; min-block-size: 104px; padding-block: var(--wf-3); resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--wf-outline); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--wf-outline); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--wf-primary); box-shadow: var(--wf-ring);
}
.input[disabled], .select[disabled] {
  background: var(--wf-surface-container); color: var(--wf-on-surface-variant);
  cursor: not-allowed; opacity: .7;
}
.input.is-error, .select.is-error { border-color: var(--wf-error); }
.input.is-error:focus { box-shadow: 0 0 0 4px rgb(186 26 26 / .14); }

.select {
  appearance: none;
  padding-inline-end: var(--wf-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2373777F'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: left var(--wf-3) center;
  cursor: pointer;
}
[dir="ltr"] .select { background-position: right var(--wf-3) center; }

/* Input with leading icon / affix */
.field--icon { position: relative; }
.field--icon .input { padding-inline-start: var(--wf-9); }
.field__icon {
  position: absolute; inset-inline-start: var(--wf-3); inset-block-end: 12px;
  color: var(--wf-outline); pointer-events: none;
}
.field__icon svg { inline-size: 20px; block-size: 20px; }
.field__affix {
  position: absolute; inset-inline-end: var(--wf-3); inset-block-end: 11px;
  font-size: 13px; font-weight: 600; color: var(--wf-on-surface-variant);
}

/* Switch */
.switch { display: inline-flex; align-items: center; gap: var(--wf-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
  position: relative; inline-size: 50px; block-size: 30px; flex: none;
  background: var(--wf-surface-container-highest);
  border: 2px solid var(--wf-outline);
  border-radius: var(--wf-r-full);
  transition: all var(--wf-dur-med) var(--wf-ease-emphasized);
}
.switch__thumb {
  position: absolute; inset-block-start: 50%; inset-inline-start: 5px;
  inline-size: 16px; block-size: 16px; border-radius: 50%;
  background: var(--wf-outline); transform: translateY(-50%);
  transition: all var(--wf-dur-med) var(--wf-ease-emphasized);
}
.switch input:checked + .switch__track { background: var(--wf-primary); border-color: var(--wf-primary); }
.switch input:checked + .switch__track .switch__thumb {
  inline-size: 22px; block-size: 22px; background: var(--wf-on-primary);
  inset-inline-start: calc(100% - 27px);
}
.switch input:focus-visible + .switch__track { box-shadow: var(--wf-ring); }

/* Checkbox */
.check { display: inline-flex; align-items: center; gap: var(--wf-3); cursor: pointer; user-select: none; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box {
  display: grid; place-items: center; flex: none;
  inline-size: 20px; block-size: 20px; border-radius: 6px;
  border: 2px solid var(--wf-outline); color: transparent;
  transition: all var(--wf-dur-short) var(--wf-ease-standard);
}
.check__box svg { inline-size: 14px; block-size: 14px; }
.check input:checked + .check__box {
  background: var(--wf-primary); border-color: var(--wf-primary); color: var(--wf-on-primary);
}
.check input:focus-visible + .check__box { box-shadow: var(--wf-ring); }

/* Radio card — used in settings & order forms */
.radio-card {
  display: flex; align-items: flex-start; gap: var(--wf-3);
  padding: var(--wf-4); cursor: pointer;
  border: 1px solid var(--wf-outline-variant); border-radius: var(--wf-r-md);
  background: var(--wf-surface-container-lowest);
  transition: all var(--wf-dur-short) var(--wf-ease-standard);
}
.radio-card:hover { border-color: var(--wf-outline); background: var(--wf-surface-container-low); }
.radio-card input { position: absolute; opacity: 0; }
.radio-card__dot {
  inline-size: 20px; block-size: 20px; border-radius: 50%; flex: none;
  border: 2px solid var(--wf-outline); margin-block-start: 2px;
  display: grid; place-items: center;
  transition: all var(--wf-dur-short) var(--wf-ease-standard);
}
.radio-card__dot::after {
  content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: var(--wf-primary); transform: scale(0);
  transition: transform var(--wf-dur-short) var(--wf-ease-emphasized);
}
.radio-card input:checked ~ .radio-card__dot { border-color: var(--wf-primary); }
.radio-card input:checked ~ .radio-card__dot::after { transform: scale(1); }
.radio-card:has(input:checked) {
  border-color: var(--wf-primary); background: var(--wf-primary-container);
  box-shadow: var(--wf-ring);
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--wf-5); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.divider { block-size: 1px; background: var(--wf-outline-variant); border: 0; }
.divider--v { inline-size: 1px; block-size: 24px; background: var(--wf-outline-variant); }

/* ============================================================
   5. SEARCH
   ============================================================ */
.wf-search { position: relative; inline-size: 100%; max-inline-size: 480px; }
.wf-search__input {
  inline-size: 100%; block-size: 44px;
  padding-inline: var(--wf-9) var(--wf-8);
  background: var(--wf-surface-container);
  border: 1px solid transparent; border-radius: var(--wf-r-full);
  font-size: 14px;
  transition: all var(--wf-dur-med) var(--wf-ease-standard);
}
.wf-search__input::placeholder { color: var(--wf-on-surface-variant); }
.wf-search__input:hover { background: var(--wf-surface-container-high); }
.wf-search__input:focus {
  outline: none; background: var(--wf-surface-container-lowest);
  border-color: var(--wf-primary); box-shadow: var(--wf-ring);
}
.wf-search__icon {
  position: absolute; inset-inline-start: var(--wf-4); inset-block-start: 50%;
  transform: translateY(-50%); color: var(--wf-on-surface-variant); pointer-events: none;
}
.wf-search__icon svg { inline-size: 20px; block-size: 20px; }
.wf-search__kbd {
  position: absolute; inset-inline-end: var(--wf-3); inset-block-start: 50%;
  transform: translateY(-50%); display: flex; gap: 3px;
}
kbd {
  display: inline-grid; place-items: center;
  min-inline-size: 22px; block-size: 22px; padding-inline: 5px;
  border-radius: 6px; background: var(--wf-surface-container-lowest);
  border: 1px solid var(--wf-outline-variant); border-block-end-width: 2px;
  font-size: 11px; font-weight: 700; color: var(--wf-on-surface-variant);
  font-family: var(--wf-font-num);
}

/* Command palette results */
.wf-search__panel {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline: 0;
  background: var(--wf-surface-container-lowest);
  border: 1px solid var(--wf-outline-variant);
  border-radius: var(--wf-r-lg); box-shadow: var(--wf-e4);
  padding: var(--wf-2); z-index: 60; max-block-size: 60vh; overflow-y: auto;
  animation: popIn var(--wf-dur-med) var(--wf-ease-decel);
}
@keyframes popIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.wf-search__group { padding: var(--wf-2) var(--wf-3) 4px; }
.wf-search__res {
  display: flex; align-items: center; gap: var(--wf-3);
  padding: var(--wf-2) var(--wf-3); border-radius: var(--wf-r-sm); cursor: pointer;
}
.wf-search__res:hover, .wf-search__res.is-active { background: var(--wf-surface-container); }
.wf-search__res svg { inline-size: 18px; block-size: 18px; color: var(--wf-on-surface-variant); }

/* ============================================================
   6. TABLES
   ============================================================ */
.wf-table-wrap { inline-size: 100%; overflow-x: auto; }
.wf-table { inline-size: 100%; min-inline-size: 720px; font-size: 14px; }

.wf-table thead th {
  position: sticky; inset-block-start: 0; z-index: 2;
  background: var(--wf-surface-container-low);
  padding: var(--wf-3) var(--wf-4);
  text-align: start; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .2px;
  color: var(--wf-on-surface-variant);
  border-block-end: 1px solid var(--wf-outline-variant);
}
.wf-table thead th.sortable { cursor: pointer; user-select: none; }
.wf-table thead th.sortable:hover { color: var(--wf-on-surface); background: var(--wf-surface-container); }
.wf-table thead th .th-in { display: inline-flex; align-items: center; gap: 4px; }
.wf-table thead th svg { inline-size: 15px; block-size: 15px; opacity: .45; }
.wf-table thead th[aria-sort] svg { opacity: 1; color: var(--wf-primary); }

.wf-table tbody td {
  padding: var(--wf-3) var(--wf-4);
  border-block-end: 1px solid var(--wf-outline-variant);
  vertical-align: middle;
}
.wf-table tbody tr { transition: background-color var(--wf-dur-short) var(--wf-ease-standard); }
.wf-table tbody tr:hover { background: var(--wf-surface-container-low); }
.wf-table tbody tr.is-selected { background: var(--wf-primary-container); }
.wf-table tbody tr:last-child td { border-block-end: 0; }
.wf-table--clickable tbody tr { cursor: pointer; }
.wf-table .col-actions { inline-size: 1%; white-space: nowrap; }
.wf-table .col-check   { inline-size: 1%; padding-inline-end: 0; }
.wf-table td.num, .wf-table th.num { text-align: end; }

/* Cell composites */
.cell-user { display: flex; align-items: center; gap: var(--wf-3); min-inline-size: 0; }
.cell-user__meta { min-inline-size: 0; }
.cell-user__name { font-weight: 600; }
.cell-user__sub  { font-size: 12px; color: var(--wf-on-surface-variant); }
.cell-actions { display: flex; gap: 2px; justify-content: flex-end; opacity: 0; transition: opacity var(--wf-dur-short); }
tr:hover .cell-actions, tr:focus-within .cell-actions { opacity: 1; }
@media (hover: none) { .cell-actions { opacity: 1; } }

/* Bulk selection bar */
.bulk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wf-4);
  padding: var(--wf-3) var(--wf-5);
  background: var(--wf-primary-container); color: var(--wf-on-primary-container);
  border-block-end: 1px solid var(--wf-outline-variant);
  animation: slideDown var(--wf-dur-med) var(--wf-ease-decel);
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Pagination */
.wf-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wf-4); flex-wrap: wrap;
  padding: var(--wf-3) var(--wf-5);
  border-block-start: 1px solid var(--wf-outline-variant);
  background: var(--wf-surface-container-low);
}
.wf-pagination__pages { display: flex; align-items: center; gap: 2px; }
.page-btn {
  min-inline-size: 34px; block-size: 34px; padding-inline: 8px;
  display: grid; place-items: center; border-radius: var(--wf-r-sm);
  font-size: 13px; font-weight: 600; color: var(--wf-on-surface-variant);
  transition: all var(--wf-dur-short) var(--wf-ease-standard);
}
.page-btn:hover { background: var(--wf-surface-container-high); color: var(--wf-on-surface); }
.page-btn[aria-current="page"] { background: var(--wf-primary); color: var(--wf-on-primary); }
.page-btn[disabled] { opacity: .35; pointer-events: none; }
.page-btn svg { inline-size: 18px; block-size: 18px; }
[dir="rtl"] .page-btn svg.dir { transform: scaleX(-1); }

/* Mobile: tables become stacked record cards */
@media (max-width: 860px) {
  .wf-table--responsive { min-inline-size: 0; }
  .wf-table--responsive thead { display: none; }
  .wf-table--responsive tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--wf-2);
    padding: var(--wf-4); margin-block-end: var(--wf-3);
    border: 1px solid var(--wf-outline-variant); border-radius: var(--wf-r-md);
    background: var(--wf-surface-container-lowest); box-shadow: var(--wf-e1);
  }
  .wf-table--responsive tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: var(--wf-2);
    padding: 0; border: 0; min-block-size: 26px;
  }
  .wf-table--responsive tbody td::before {
    content: attr(data-label);
    font-size: 12px; font-weight: 600; color: var(--wf-on-surface-variant);
  }
  .wf-table--responsive tbody td[data-span="2"] { grid-column: 1 / -1; }
  .wf-table--responsive tbody td.col-actions { grid-column: 1 / -1; justify-content: flex-end; inline-size: auto; white-space: normal; }
  .wf-table--responsive .cell-actions { opacity: 1; flex-wrap: wrap; }
  .wf-pagination { justify-content: center; }
}

/* ============================================================
   7. FILTER BAR
   ============================================================ */
.wf-filters {
  display: flex; align-items: center; gap: var(--wf-2); flex-wrap: wrap;
  padding: var(--wf-4) var(--wf-5);
  border-block-end: 1px solid var(--wf-outline-variant);
}
.wf-filters .wf-search { max-inline-size: 320px; flex: 1 1 220px; }
.wf-filters__spacer { flex: 1 1 auto; }
.filter-applied {
  display: flex; align-items: center; gap: var(--wf-2); flex-wrap: wrap;
  padding: var(--wf-3) var(--wf-5); background: var(--wf-surface-container-low);
  border-block-end: 1px solid var(--wf-outline-variant);
}

/* Dropdown menu */
.menu-wrap { position: relative; }
.menu {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0;
  min-inline-size: 220px; padding: var(--wf-2);
  background: var(--wf-surface-container-lowest);
  border: 1px solid var(--wf-outline-variant);
  border-radius: var(--wf-r-md); box-shadow: var(--wf-e4);
  z-index: 70; animation: popIn var(--wf-dur-short) var(--wf-ease-decel);
}
.menu__item {
  display: flex; align-items: center; gap: var(--wf-3);
  inline-size: 100%; padding: var(--wf-2) var(--wf-3);
  border-radius: var(--wf-r-sm); font-size: 14px; text-align: start;
  color: var(--wf-on-surface);
  transition: background-color var(--wf-dur-short) var(--wf-ease-standard);
}
.menu__item:hover { background: var(--wf-surface-container); }
.menu__item svg { inline-size: 18px; block-size: 18px; color: var(--wf-on-surface-variant); flex: none; }
.menu__item--danger { color: var(--wf-error); }
.menu__item--danger svg { color: var(--wf-error); }
.menu__label { padding: var(--wf-2) var(--wf-3) 4px; font-size: 11px; font-weight: 700; color: var(--wf-outline); letter-spacing: .3px; }
.menu__sep { block-size: 1px; background: var(--wf-outline-variant); margin: var(--wf-2) 0; }

/* ============================================================
   8. TABS
   ============================================================ */
.wf-tabs {
  display: flex; gap: var(--wf-1); overflow-x: auto;
  border-block-end: 1px solid var(--wf-outline-variant);
  scrollbar-width: none;
}
.wf-tabs::-webkit-scrollbar { display: none; }
.wf-tab {
  position: relative; padding: var(--wf-3) var(--wf-4) var(--wf-4);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  color: var(--wf-on-surface-variant);
  display: inline-flex; align-items: center; gap: var(--wf-2);
  transition: color var(--wf-dur-short) var(--wf-ease-standard);
}
.wf-tab svg { inline-size: 18px; block-size: 18px; }
.wf-tab:hover { color: var(--wf-on-surface); }
.wf-tab[aria-selected="true"] { color: var(--wf-primary); }
.wf-tab[aria-selected="true"]::after {
  content: ""; position: absolute; inset-block-end: -1px; inset-inline: var(--wf-2);
  block-size: 3px; border-radius: 3px 3px 0 0; background: var(--wf-primary);
  animation: tabIn var(--wf-dur-med) var(--wf-ease-emphasized);
}
@keyframes tabIn { from { transform: scaleX(.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================
   9. DIALOGS / SHEETS / TOASTS
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(var(--wf-scrim) / .48);
  backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--wf-5);
  animation: fade var(--wf-dur-med) var(--wf-ease-standard);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.dialog {
  inline-size: 100%; max-inline-size: 520px; max-block-size: 88vh;
  display: flex; flex-direction: column;
  background: var(--wf-surface-container-lowest);
  border-radius: var(--wf-r-2xl);
  box-shadow: var(--wf-e5);
  overflow: hidden;
  animation: dialogIn var(--wf-dur-long) var(--wf-ease-emphasized);
}
@keyframes dialogIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.dialog--lg { max-inline-size: 760px; }
.dialog--sm { max-inline-size: 420px; }
.dialog__head { padding: var(--wf-6) var(--wf-6) var(--wf-4); display: flex; gap: var(--wf-4); align-items: flex-start; }
.dialog__icon {
  display: grid; place-items: center; inline-size: 48px; block-size: 48px; flex: none;
  border-radius: var(--wf-r-full); background: var(--wf-primary-container); color: var(--wf-on-primary-container);
}
.dialog__icon svg { inline-size: 24px; block-size: 24px; }
.dialog__icon--danger { background: var(--wf-error-container); color: var(--wf-on-error-container); }
.dialog__icon--warn   { background: var(--wf-warning-container); color: var(--wf-on-warning-container); }
.dialog__body { padding: 0 var(--wf-6) var(--wf-5); overflow-y: auto; flex: 1; }
.dialog__foot {
  display: flex; justify-content: flex-end; gap: var(--wf-2);
  padding: var(--wf-4) var(--wf-6) var(--wf-6);
}
@media (max-width: 600px) {
  .scrim { padding: 0; align-items: flex-end; }
  .dialog { max-inline-size: none; border-radius: var(--wf-r-2xl) var(--wf-r-2xl) 0 0; max-block-size: 92vh; }
  .dialog__foot { flex-direction: column-reverse; }
  .dialog__foot .btn { inline-size: 100%; }
  @keyframes dialogIn { from { transform: translateY(100%); } to { transform: none; } }
}

/* Drag handle for mobile sheets */
.sheet-handle {
  inline-size: 36px; block-size: 4px; border-radius: 2px;
  background: var(--wf-outline-variant); margin: var(--wf-3) auto 0;
}

/* Toast */
.toast-stack {
  position: fixed; inset-block-end: var(--wf-6); inset-inline-start: var(--wf-6);
  display: flex; flex-direction: column; gap: var(--wf-3); z-index: 120;
}
.toast {
  display: flex; align-items: center; gap: var(--wf-3);
  min-inline-size: 300px; max-inline-size: 420px;
  padding: var(--wf-3) var(--wf-4);
  background: var(--wf-inverse-surface); color: var(--wf-inverse-on-surface);
  border-radius: var(--wf-r-md); box-shadow: var(--wf-e4);
  animation: toastIn var(--wf-dur-long) var(--wf-ease-decel);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.toast svg { inline-size: 20px; block-size: 20px; flex: none; }
.toast--ok svg  { color: #7EDB98; }
.toast--err svg { color: #FFB4AB; }
.toast__action { color: var(--wf-inverse-primary); font-weight: 700; font-size: 13px; padding: 4px 8px; border-radius: var(--wf-r-sm); }
@media (max-width: 600px) {
  .toast-stack { inset-inline: var(--wf-4); inset-block-end: var(--wf-4); }
  .toast { min-inline-size: 0; }
}

/* Banner / inline alert */
.alert {
  display: flex; align-items: flex-start; gap: var(--wf-3);
  padding: var(--wf-4); border-radius: var(--wf-r-md);
  border: 1px solid transparent;
}
.alert svg { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 1px; }
.alert--info { background: var(--wf-info-container); color: var(--wf-on-info-container); }
.alert--warn { background: var(--wf-warning-container); color: var(--wf-on-warning-container); }
.alert--err  { background: var(--wf-error-container); color: var(--wf-on-error-container); }
.alert--ok   { background: var(--wf-success-container); color: var(--wf-on-success-container); }

/* Tooltip — a card that follows the theme: dark text on a light card in the light theme,
   light text on a dark card in the dark theme. Icon buttons already use ::after for their
   hover layer (inset:0, round, currentColor), so the tooltip resets every box property it
   could inherit from that rule, and those buttons take their hover layer as a background. */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute; inset: auto; inset-block-end: calc(100% + 8px); inset-inline-start: 50%;
  inline-size: max-content; max-inline-size: 260px; block-size: auto;
  transform: translateX(50%) translateY(4px);
  padding: 6px 10px; border-radius: var(--wf-r-sm);
  background: var(--wf-surface-container-lowest); color: var(--wf-on-surface);
  border: 1px solid var(--wf-outline-variant); box-shadow: var(--wf-e2);
  font-size: 12px; font-weight: 600; line-height: 1.4; white-space: normal; text-align: center;
  opacity: 0; pointer-events: none; z-index: 90;
  transition: opacity var(--wf-dur-short) var(--wf-ease-standard), transform var(--wf-dur-short) var(--wf-ease-standard);
}
.icon-btn.tip { transition: color var(--wf-dur-short) var(--wf-ease-standard), background-color var(--wf-dur-short) var(--wf-ease-standard); }
.icon-btn.tip:hover  { background-color: color-mix(in srgb, currentColor 8%, transparent); }
.icon-btn.tip:active { background-color: color-mix(in srgb, currentColor 12%, transparent); }
[dir="ltr"] .tip::after { transform: translateX(-50%) translateY(4px); }
.tip:hover::after { opacity: 1; transform: translateX(50%) translateY(0); }
[dir="ltr"] .tip:hover::after { transform: translateX(-50%) translateY(0); }

/* ============================================================
   10. EMPTY STATES / LOADING / ERROR
   ============================================================ */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--wf-10) var(--wf-6); gap: var(--wf-4);
}
.empty__art {
  display: grid; place-items: center; inline-size: 96px; block-size: 96px;
  border-radius: var(--wf-r-2xl);
  background: var(--wf-primary-container); color: var(--wf-primary);
  position: relative;
}
.empty__art::before {
  content: ""; position: absolute; inset: -12px; border-radius: inherit;
  border: 1px dashed var(--wf-outline-variant);
}
.empty__art svg { inline-size: 44px; block-size: 44px; }
.empty__art--neutral { background: var(--wf-surface-container-high); color: var(--wf-on-surface-variant); }
.empty p { max-inline-size: 420px; color: var(--wf-on-surface-variant); }

/* Skeleton loading */
.sk {
  background: linear-gradient(90deg,
    var(--wf-surface-container) 25%,
    var(--wf-surface-container-high) 50%,
    var(--wf-surface-container) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--wf-r-sm);
}
@keyframes shimmer { from { background-position: 0 0; } to { background-position: -300% 0; } }
.sk--text { block-size: 12px; }
.sk--title { block-size: 20px; border-radius: 6px; }
.sk--circle { border-radius: 50%; }
.sk--btn { block-size: 40px; border-radius: var(--wf-r-full); }

/* Spinner */
.spinner {
  inline-size: 20px; block-size: 20px; flex: none;
  border: 2.5px solid var(--wf-primary-container);
  border-block-start-color: var(--wf-primary);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner--lg { inline-size: 40px; block-size: 40px; border-width: 4px; }

/* Determinate + indeterminate progress */
.progress {
  block-size: 6px; inline-size: 100%; overflow: hidden;
  background: var(--wf-surface-container-high); border-radius: var(--wf-r-full);
}
.progress__bar { block-size: 100%; background: var(--wf-primary); border-radius: inherit;
  transition: inline-size var(--wf-dur-long) var(--wf-ease-standard); }
.progress--indet .progress__bar { inline-size: 40%; animation: indet 1.3s var(--wf-ease-standard) infinite; }
@keyframes indet { from { transform: translateX(-160%); } to { transform: translateX(160%); } }
[dir="rtl"] .progress--indet .progress__bar { animation-name: indetRtl; }
@keyframes indetRtl { from { transform: translateX(160%); } to { transform: translateX(-160%); } }

/* Full-page splash */
.splash {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; gap: var(--wf-5);
  background: var(--wf-background);
}
.splash__inner { display: flex; flex-direction: column; align-items: center; gap: var(--wf-5); }

/* Error page */
.errpage {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--wf-5); padding: var(--wf-10) var(--wf-5);
  min-block-size: 70vh; justify-content: center;
}
.errpage__code {
  font-size: 92px; font-weight: 800; line-height: 1; letter-spacing: -3px;
  background: linear-gradient(135deg, var(--wf-primary), var(--wf-tertiary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-family: var(--wf-font-num);
}

/* ============================================================
   11. MISC PATTERNS
   ============================================================ */
/* Definition list used across detail pages */
.dl { display: grid; grid-template-columns: 140px 1fr; gap: var(--wf-3) var(--wf-4); }
.dl dt { color: var(--wf-on-surface-variant); font-size: 13px; font-weight: 600; }
.dl dd { font-weight: 600; }
@media (max-width: 600px) { .dl { grid-template-columns: 110px 1fr; } }

/* Timeline */
.timeline { display: flex; flex-direction: column; }
.timeline__item { display: flex; gap: var(--wf-4); padding-block-end: var(--wf-5); position: relative; }
.timeline__item:last-child { padding-block-end: 0; }
.timeline__rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.timeline__dot {
  inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wf-surface-container-high); color: var(--wf-on-surface-variant); flex: none;
  border: 2px solid var(--wf-surface-container-lowest);
}
.timeline__dot svg { inline-size: 16px; block-size: 16px; }
.timeline__dot--done { background: var(--wf-success-container); color: var(--wf-on-success-container); }
.timeline__dot--active { background: var(--wf-primary); color: var(--wf-on-primary); box-shadow: var(--wf-ring); }
.timeline__line { inline-size: 2px; flex: 1; background: var(--wf-outline-variant); margin-block: 4px; min-block-size: 16px; }
.timeline__item:last-child .timeline__line { display: none; }
.timeline__body { padding-block-start: 5px; min-inline-size: 0; }

/* Stat row inside cards */
.stat-row { display: flex; align-items: center; justify-content: space-between; padding-block: var(--wf-3); }
.stat-row + .stat-row { border-block-start: 1px solid var(--wf-outline-variant); }

/* Meter bar for reports */
.meter { block-size: 8px; border-radius: var(--wf-r-full); background: var(--wf-surface-container-high); overflow: hidden; }
.meter__fill { block-size: 100%; border-radius: inherit; background: var(--wf-primary); }

/* Map placeholder (live tracking) */
.mapbox {
  position: relative; block-size: 100%; min-block-size: 300px;
  background:
    radial-gradient(circle at 30% 40%, rgb(37 99 235 / .10), transparent 45%),
    radial-gradient(circle at 70% 65%, rgb(14 140 140 / .10), transparent 45%),
    var(--wf-surface-container);
  overflow: hidden;
}
.mapbox::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--wf-outline-variant) 1px, transparent 1px),
    linear-gradient(90deg, var(--wf-outline-variant) 1px, transparent 1px);
  background-size: 46px 46px; opacity: .35;
}
.map-pin {
  position: absolute; transform: translate(50%, -50%);
  display: grid; place-items: center;
  inline-size: 34px; block-size: 34px; border-radius: 50% 50% 50% 4px;
  rotate: 45deg; box-shadow: var(--wf-e3);
  background: var(--wf-primary); color: var(--wf-on-primary);
}
.map-pin svg { inline-size: 17px; block-size: 17px; rotate: -45deg; }
.map-pin--teal { background: var(--wf-tertiary); color: var(--wf-on-tertiary); }
.map-pin--amber{ background: var(--wf-warning); color: var(--wf-on-warning); }

/* Charts */
.chart { inline-size: 100%; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--wf-outline-variant); stroke-width: 1; }
.chart .axis-txt { fill: var(--wf-on-surface-variant); font-size: 11px; font-family: var(--wf-font-num); }
.chart .bar { transition: opacity var(--wf-dur-short); }
.chart .bar:hover { opacity: .78; }
.legend { display: flex; flex-wrap: wrap; gap: var(--wf-4); }
.legend__item { display: inline-flex; align-items: center; gap: var(--wf-2); font-size: 13px; color: var(--wf-on-surface-variant); }
.legend__swatch { inline-size: 10px; block-size: 10px; border-radius: 3px; flex: none; }

/* Utility bg tints */
.tint-primary { background: var(--wf-primary-container); color: var(--wf-on-primary-container); }
.tint-teal    { background: var(--wf-tertiary-container); color: var(--wf-on-tertiary-container); }
.tint-warn    { background: var(--wf-warning-container); color: var(--wf-on-warning-container); }
.tint-err     { background: var(--wf-error-container); color: var(--wf-on-error-container); }
.tint-ok      { background: var(--wf-success-container); color: var(--wf-on-success-container); }
.tint-surface { background: var(--wf-surface-container-low); }