/* FreshTag component library (Components/FreshTag/Ft*) + MudBlazor overrides scoped to .ft-root.
   Ft classes are global so they also work on static SSR pages outside MainLayout. Colours come only from tokens.css. */

/* =========================================================================================
   Base
   ========================================================================================= */
.ft-root {
  min-height: 100vh;
  background: var(--ft-bg);
  color: var(--ft-text);
  font-family: var(--ft-font-family);
  font-size: var(--ft-text-md);
  font-weight: var(--ft-weight-medium);
  -webkit-font-smoothing: antialiased;
}

.ft-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* :is() (not :where()) so resets elsewhere cannot zero the ring; the second group gives any interactive
   element inside FreshTag surfaces and Mud dialogs a visible ring too. */
:is(.ft-btn, .ft-nav-item, .ft-tabs__tab, .ft-list-row--action, .ft-card--link, .ft-stat--link,
    .ft-page-header__back, .ft-upload__zone, .ft-link, .ft-input):focus-visible,
:is(.ft-root, .mud-dialog-container, .mud-popover)
  :is(a, button, [role="button"], [role="tab"], [role="menuitem"], summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--ft-focus-width) solid var(--ft-focus);
  outline-offset: var(--ft-focus-offset);
}

.ft-link {
  color: var(--ft-accent-text);
  font-weight: var(--ft-weight-bold);
  text-decoration: none;
  border-radius: 4px;
}

.ft-link:hover {
  text-decoration: underline;
}

.ft-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: var(--ft-weight-bold);
  letter-spacing: var(--ft-tracking-wide);
  text-transform: uppercase;
  color: var(--ft-text-muted);
}

.ft-muted {
  color: var(--ft-text-muted);
}

/* Layout helpers so pages need no MudGrid/MudStack scaffolding */
.ft-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ft-gap, var(--ft-space-4));
  min-width: 0;
}

.ft-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ft-gap, var(--ft-space-2));
}

.ft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--ft-grid-min, 260px), 100%), 1fr));
  gap: var(--ft-gap, var(--ft-space-4));
}

.ft-form-grid {
  display: grid;
  grid-template-columns: repeat(var(--ft-form-cols, 2), minmax(0, 1fr));
  gap: var(--ft-space-4);
}

.ft-form-grid > .ft-span-all {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .ft-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tone roles: --_tbg/--_tfg soft surface, --_tsolid dot/ring, --_bbg/--_bfg solid badge */
.ft-tone--neutral { --_tbg: var(--ft-surface-3); --_tfg: var(--ft-text); --_tsolid: var(--ft-text-subtle); --_bbg: var(--ft-surface-3); --_bfg: var(--ft-text); }
.ft-tone--accent { --_tbg: var(--ft-accent-soft); --_tfg: var(--ft-accent-text); --_tsolid: var(--ft-accent); --_bbg: var(--ft-accent); --_bfg: var(--ft-accent-ink); }
.ft-tone--info { --_tbg: var(--ft-info-bg); --_tfg: var(--ft-info-fg); --_tsolid: var(--ft-info-solid); --_bbg: var(--ft-accent); --_bfg: var(--ft-accent-ink); }
.ft-tone--success { --_tbg: var(--ft-success-bg); --_tfg: var(--ft-success-fg); --_tsolid: var(--ft-success-solid); --_bbg: var(--ft-success-bg); --_bfg: var(--ft-success-fg); }
.ft-tone--warning { --_tbg: var(--ft-warning-bg); --_tfg: var(--ft-warning-fg); --_tsolid: var(--ft-warning-solid); --_bbg: var(--ft-warning-bg); --_bfg: var(--ft-warning-fg); }
.ft-tone--danger { --_tbg: var(--ft-danger-bg); --_tfg: var(--ft-danger-fg); --_tsolid: var(--ft-danger-solid); --_bbg: var(--ft-danger-solid); --_bfg: var(--ft-inverse-fg); }
.ft-tone--amber { --_tbg: var(--ft-tone-amber); --_tfg: var(--ft-tone-amber-fg); --_tsolid: var(--ft-tone-amber); --_bbg: var(--ft-tone-amber); --_bfg: var(--ft-tone-amber-fg); }
.ft-tone--green { --_tbg: var(--ft-tone-green); --_tfg: var(--ft-tone-green-fg); --_tsolid: var(--ft-tone-green); --_bbg: var(--ft-tone-green); --_bfg: var(--ft-tone-green-fg); }
.ft-tone--navy { --_tbg: var(--ft-tone-navy); --_tfg: var(--ft-tone-navy-fg); --_tsolid: var(--ft-tone-navy); --_bbg: var(--ft-tone-navy); --_bfg: var(--ft-tone-navy-fg); }
.ft-tone--red { --_tbg: var(--ft-tone-red); --_tfg: var(--ft-tone-red-fg); --_tsolid: var(--ft-tone-red); --_bbg: var(--ft-tone-red); --_bfg: var(--ft-tone-red-fg); }

/* Icon tile: round toned icon holder */
.ft-icon-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ft-radius-pill);
  background: var(--_tbg, var(--ft-surface-3));
  color: var(--_tfg, var(--ft-text));
}

.ft-icon-tile .mud-icon-root { font-size: 20px; }
.ft-icon-tile--lg { width: 48px; height: 48px; }
.ft-icon-tile--lg .mud-icon-root { font-size: 24px; }
.ft-icon-tile--xl { width: 64px; height: 64px; }
.ft-icon-tile--xl .mud-icon-root { font-size: 30px; }

/* =========================================================================================
   FtButton
   ========================================================================================= */
.ft-btn {
  --_bg: var(--ft-accent-strong);
  --_fg: var(--ft-accent-strong-fg);
  --_bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ft-space-2);
  height: var(--ft-control-md);
  padding: 0 18px;
  border: 1px solid var(--_bd);
  border-radius: var(--ft-radius-md);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--ft-font-family);
  font-size: var(--ft-text-md);
  font-weight: var(--ft-weight-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ft-duration-fast) var(--ft-ease), border-color var(--ft-duration-fast) var(--ft-ease),
              transform var(--ft-duration-fast) var(--ft-ease);
}

.ft-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--_bg) 88%, var(--ft-text)); }
.ft-btn:active:not(:disabled) { transform: translateY(1px); }
.ft-btn:visited { color: var(--_fg); }
.ft-btn .mud-icon-root { font-size: 18px; flex: none; }

.ft-btn--secondary { --_bg: var(--ft-surface); --_fg: var(--ft-text); --_bd: var(--ft-border-strong); }
.ft-btn--secondary:hover:not(:disabled) { background: var(--ft-surface-2); }
.ft-btn--ghost { --_bg: transparent; --_fg: var(--ft-text); }
.ft-btn--ghost:hover:not(:disabled) { background: var(--ft-hover); }
.ft-btn--danger { --_bg: var(--ft-danger-solid); --_fg: var(--ft-inverse-fg); }
.ft-btn--inverse { --_bg: var(--ft-inverse); --_fg: var(--ft-inverse-fg); }
.ft-btn--inverse:hover:not(:disabled) { background: color-mix(in srgb, var(--ft-inverse) 82%, var(--ft-inverse-fg)); }

.ft-btn--sm { height: var(--ft-control-sm); padding: 0 14px; font-size: var(--ft-text-sm); border-radius: 10px; }
.ft-btn--sm .mud-icon-root { font-size: 16px; }
.ft-btn--lg { height: var(--ft-control-lg); padding: 0 24px; font-size: 15px; }
.ft-btn--icon { width: var(--ft-control-md); padding: 0; }
.ft-btn--icon.ft-btn--sm { width: var(--ft-control-sm); }
.ft-btn--icon.ft-btn--lg { width: var(--ft-control-lg); }
.ft-btn--block { display: flex; width: 100%; }

/* Touch: small buttons keep their look but grow to a 44px target on phones */
@media (max-width: 600px) {
  .ft-btn--sm { height: var(--ft-control-md); }
  .ft-btn--icon.ft-btn--sm { width: var(--ft-control-md); }
}

.ft-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ft-btn.is-loading { cursor: progress; opacity: 0.85; }

.ft-btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ft-spin 0.7s linear infinite;
}

@keyframes ft-spin { to { transform: rotate(360deg); } }

/* =========================================================================================
   FtField + native .ft-input
   ========================================================================================= */
.ft-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ft-field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ft-space-3);
}

.ft-field__label {
  font-size: var(--ft-text-sm);
  font-weight: var(--ft-weight-bold);
  color: var(--ft-text);
}

/* 44px hit area without moving the label line: padding grows the box, negative margin gives the space back */
.ft-field__label-action :where(a, button) {
  display: inline-flex;
  align-items: center;
  min-height: var(--ft-control-md);
  margin: -12px -10px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--ft-radius-sm);
  background: none;
  color: var(--ft-accent-text);
  font: inherit;
  font-size: var(--ft-text-sm);
  font-weight: var(--ft-weight-bold);
  text-decoration: none;
  cursor: pointer;
}

.ft-field__label-action :where(a, button):hover { text-decoration: underline; }

.ft-field__control { position: relative; min-width: 0; }

.ft-field__leading {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  font-size: 18px !important;
  color: var(--ft-text-subtle);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Currency (or unit) prefix: the control sets --ft-field-prefix-chars so longer codes such as "CHF" get room */
.ft-field__prefix {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  color: var(--ft-text);
  font-family: var(--ft-font-family);
  font-size: var(--ft-text-lg);
  font-weight: var(--ft-weight-extrabold);
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

/* One prefix size for native and Mud fields; padding is in px so it does not follow the input's own font size */
.ft-field__control--prefix {
  --_prefix-pad: calc(14px + (var(--ft-field-prefix-chars, 1) * 11px) + 8px);
}

.ft-field__control--prefix .ft-input,
.ft-root .ft-field__control--prefix .mud-input.mud-input-outlined .mud-input-slot { padding-left: var(--_prefix-pad); }

/* Trailing controls fill the field height so "Show"-style buttons are a full 44px target */
.ft-field__trailing {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: inline-flex;
  align-items: stretch;
}

.ft-field__trailing .ft-btn {
  height: auto;
  min-width: var(--ft-control-md);
  min-height: var(--ft-control-md);
  border-radius: 0 var(--ft-radius-md) var(--ft-radius-md) 0;
}

.ft-field__control--leading .ft-input { padding-left: 42px; }
.ft-field__control--trailing .ft-input { padding-right: 76px; }

/* Number inputs: no spinners (money and counts are typed; arrow keys still step) */
.ft-input[type="number"],
.ft-root input[type="number"],
.mud-dialog-container input[type="number"] { appearance: textfield; -moz-appearance: textfield; }

.ft-input[type="number"]::-webkit-inner-spin-button,
.ft-input[type="number"]::-webkit-outer-spin-button,
.ft-root input[type="number"]::-webkit-inner-spin-button,
.ft-root input[type="number"]::-webkit-outer-spin-button,
.mud-dialog-container input[type="number"]::-webkit-inner-spin-button,
.mud-dialog-container input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

.ft-root .mud-input-numeric-spin { display: none; }

/* Large money/hero value field (mockup 3 price) */
.ft-input--lg,
.ft-root .ft-field--lg .mud-input.mud-input-outlined { min-height: var(--ft-control-lg); font-size: var(--ft-text-xl); font-weight: var(--ft-weight-extrabold); }
.ft-input--lg { height: var(--ft-control-lg); }

.ft-field__hint,
.ft-field__error {
  margin: 0;
  font-size: var(--ft-text-xs);
  line-height: var(--ft-leading-snug);
}

.ft-field__hint { color: var(--ft-text-muted); }
.ft-field__error { color: var(--ft-danger-fg); font-weight: var(--ft-weight-semibold); }
.ft-field--invalid .ft-input { border-color: var(--ft-danger-solid); }

.ft-input {
  display: block;
  width: 100%;
  height: var(--ft-control-md);
  padding: 0 14px;
  border: 1px solid var(--ft-field-border);
  border-radius: var(--ft-radius-md);
  background: var(--ft-field-bg);
  color: var(--ft-text);
  font-family: var(--ft-font-family);
  font-size: var(--ft-text-md);
  font-weight: var(--ft-weight-medium);
  transition: border-color var(--ft-duration-fast) var(--ft-ease), box-shadow var(--ft-duration-fast) var(--ft-ease);
}

.ft-input::placeholder { color: var(--ft-text-subtle); opacity: 1; }
.ft-input:hover:not(:disabled) { border-color: var(--ft-text-subtle); }

.ft-input:focus {
  border-color: var(--ft-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ft-focus) 28%, transparent);
  outline: none;
}

.ft-input:disabled { opacity: 0.6; cursor: not-allowed; }
textarea.ft-input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: var(--ft-leading-normal); }

select.ft-input {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ft-text-muted) 50%),
                    linear-gradient(135deg, var(--ft-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* =========================================================================================
   FtPageHeader
   ========================================================================================= */
.ft-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--ft-space-4);
  margin-bottom: var(--ft-space-6);
}

.ft-page-header__back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--ft-space-2);
  min-height: 32px;
  color: var(--ft-text);
  font-size: var(--ft-text-md);
  font-weight: var(--ft-weight-bold);
  text-decoration: none;
  border-radius: var(--ft-radius-sm);
}

.ft-page-header__back:hover { color: var(--ft-accent-text); }
.ft-page-header__back .mud-icon-root { font-size: 18px; }

.ft-page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ft-space-4);
}

.ft-page-header__titles { min-width: 0; }

.ft-page-header__title {
  margin: 0;
  font-size: var(--ft-text-display);
  font-weight: var(--ft-weight-extrabold);
  line-height: var(--ft-leading-tight);
  letter-spacing: var(--ft-tracking-tighter);
  color: var(--ft-text);
  overflow-wrap: anywhere;
}

/* Blazor's FocusOnNavigate focuses the h1 programmatically; it is not a keyboard target, so no ring. */
.ft-page-header__title:focus { outline: none; }

.ft-page-header__subtitle {
  margin: 6px 0 0;
  font-size: var(--ft-text-md);
  color: var(--ft-text-muted);
}

.ft-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--ft-space-2); }
.ft-page-header__tabs { min-width: 0; }

@media (max-width: 600px) {
  .ft-page-header__title { font-size: var(--ft-text-3xl); }
  .ft-page-header__actions { width: 100%; }
}

/* =========================================================================================
   FtCard
   ========================================================================================= */
.ft-card {
  display: block;
  min-width: 0;
  padding: var(--ft-space-6);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
  color: var(--ft-text);
}

.ft-card--flush { padding: 0; overflow: hidden; }
.ft-card--lg { padding: var(--ft-space-8); }

.ft-card--link {
  text-decoration: none;
  transition: border-color var(--ft-duration-fast) var(--ft-ease), background-color var(--ft-duration-fast) var(--ft-ease);
}

.ft-card--link:hover { border-color: var(--ft-border-strong); background: color-mix(in srgb, var(--ft-surface) 92%, var(--ft-text)); }

.ft-card__header {
  display: flex;
  align-items: center;
  gap: var(--ft-space-3);
}

.ft-card__header:not(:last-child) { margin-bottom: var(--ft-space-5); }
.ft-card--flush .ft-card__header { padding: var(--ft-space-5) var(--ft-space-6) 0; }

.ft-card__step {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ft-radius-pill);
  background: var(--ft-tone-navy);
  color: var(--ft-avatar-fg);
  font-size: var(--ft-text-sm);
  font-weight: var(--ft-weight-extrabold);
}

.ft-card__titles { flex: 1; min-width: 0; }

.ft-card__title {
  margin: 0;
  font-size: var(--ft-text-xl);
  font-weight: var(--ft-weight-extrabold);
  line-height: var(--ft-leading-snug);
  letter-spacing: var(--ft-tracking-tight);
}

.ft-card__subtitle { margin: 2px 0 0; font-size: var(--ft-text-sm); color: var(--ft-text-muted); }
.ft-card__actions { display: flex; flex-wrap: wrap; gap: var(--ft-space-2); }

@media (max-width: 600px) {
  .ft-card { padding: var(--ft-space-4); }
  .ft-card--flush { padding: 0; }
  .ft-card--flush .ft-card__header { padding: var(--ft-space-4) var(--ft-space-4) 0; }
  .ft-card__header { flex-wrap: wrap; }
}

/* =========================================================================================
   FtStatCard
   ========================================================================================= */
.ft-stat {
  display: flex;
  flex-direction: column;
  gap: var(--ft-space-4);
  min-width: 0;
  padding: var(--ft-space-4) var(--ft-space-5);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
  color: var(--ft-text);
  text-decoration: none;
}

.ft-stat--link:hover { border-color: var(--ft-border-strong); }
.ft-stat__text { display: flex; flex: 1; flex-direction: column-reverse; min-width: 0; } /* label first in the DOM, value shown on top */

.ft-stat__value {
  font-size: var(--ft-text-2xl);
  font-weight: var(--ft-weight-extrabold);
  line-height: var(--ft-leading-tight);
  letter-spacing: var(--ft-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.ft-stat__label { font-size: var(--ft-text-sm); color: var(--ft-text-muted); }
.ft-stat__chevron { color: var(--ft-text-subtle); font-size: 20px !important; }
.ft-stat__main { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* Ring variant: conic track in the tone colour, number in the middle */
.ft-stat--ring { padding: var(--ft-space-5); }
.ft-stat--ring .ft-stat__value { font-size: var(--ft-text-3xl); }

.ft-stat__ring {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: var(--ft-radius-pill);
  background: conic-gradient(var(--_tsolid) calc(var(--ft-ring-value, 0) * 1%), var(--ft-surface-3) 0);
}

.ft-stat__ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: var(--ft-surface);
}

.ft-stat__ring-text {
  position: relative;
  color: var(--ft-text);
  font-size: var(--ft-text-md);
  font-weight: var(--ft-weight-extrabold);
  font-variant-numeric: tabular-nums;
}

/* Large ring: the ring is the focal point; the label reads as the title and the value drops to a quiet caption */
.ft-stat--ring-lg .ft-stat__main { gap: var(--ft-space-5); }
.ft-stat--ring-lg .ft-stat__ring { width: 110px; height: 110px; }
.ft-stat--ring-lg .ft-stat__ring::before { inset: 11px; }
.ft-stat--ring-lg .ft-stat__ring-text { font-size: var(--ft-text-2xl); letter-spacing: var(--ft-tracking-tight); }
.ft-stat--ring-lg .ft-stat__text { flex-direction: column; gap: 2px; }
.ft-stat--ring-lg .ft-stat__label { color: var(--ft-text); font-size: var(--ft-text-lg); font-weight: var(--ft-weight-extrabold); }
.ft-stat--ring-lg .ft-stat__value { color: var(--ft-text-muted); font-size: var(--ft-text-sm); font-weight: var(--ft-weight-medium); letter-spacing: 0; }

.ft-stat__count { color: var(--ft-text); font-weight: var(--ft-weight-extrabold); font-variant-numeric: tabular-nums; }
.ft-stat__legend li:has(.ft-stat__count) { color: var(--ft-text-muted); }
.ft-stat__count + span { margin-left: calc(var(--ft-space-1) - var(--ft-space-2)); }

.ft-stat__legend {
  display: flex;
  flex-direction: column;
  gap: var(--ft-space-2);
  margin: 0;
  padding: var(--ft-space-4) 0 0;
  border-top: 1px solid var(--ft-border);
  list-style: none;
}

.ft-stat__legend li {
  display: flex;
  align-items: center;
  gap: var(--ft-space-2);
  color: var(--ft-text);
  font-size: var(--ft-text-sm);
  font-weight: var(--ft-weight-semibold);
}

.ft-stat__dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: var(--ft-radius-pill);
  background: var(--_tsolid);
}

/* =========================================================================================
   FtHeroCard
   ========================================================================================= */
.ft-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ft-space-6);
  min-height: 210px;
  padding: var(--ft-space-8);
  overflow: hidden;
  border-radius: var(--ft-radius-xl);
  background: var(--ft-accent);
  color: var(--ft-accent-ink);
}

.ft-hero :focus-visible { outline-color: var(--ft-accent-ink); }
.ft-hero__content { position: relative; z-index: 1; min-width: 0; }

.ft-hero__value {
  margin: 0;
  font-size: var(--ft-text-hero);
  font-weight: var(--ft-weight-extrabold);
  line-height: 1;
  letter-spacing: var(--ft-tracking-tighter);
  font-variant-numeric: tabular-nums;
}

.ft-hero__caption {
  margin: 6px 0 0;
  font-size: var(--ft-text-xl);
  font-weight: var(--ft-weight-semibold);
}

.ft-hero__action { margin-top: var(--ft-space-6); }
.ft-hero__art { position: relative; display: flex; flex: none; align-items: center; justify-content: center; }

@media (max-width: 600px) {
  .ft-hero { flex-direction: column; align-items: stretch; padding: var(--ft-space-6); }
  .ft-hero__value { font-size: 48px; }

  /* Phones: keep one small tag tucked into the trailing corner; the rest of the art is dropped */
  .ft-hero__art {
    position: absolute;
    top: var(--ft-space-5);
    right: var(--ft-space-4);
    z-index: 0;
    display: block;
    transform: scale(0.72);
    transform-origin: top right;
  }

  .ft-hero__art .ft-shelf-tag ~ .ft-shelf-tag { display: none; }
}

/* =========================================================================================
   FtListRow (+ .ft-list container)
   ========================================================================================= */
.ft-list {
  overflow: hidden;
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
}

.ft-list-row {
  display: flex;
  align-items: center;
  gap: var(--ft-space-3);
  width: 100%;
  min-height: 60px;
  padding: var(--ft-space-3) var(--ft-space-4);
  border: 0;
  border-bottom: 1px solid var(--ft-border);
  background: transparent;
  color: var(--ft-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
}

.ft-list-row:last-child { border-bottom: 0; }
.ft-list-row--action { cursor: pointer; transition: background-color var(--ft-duration-fast) var(--ft-ease); }
.ft-list-row--action:hover { background: var(--ft-hover); }
.ft-list-row--action:focus-visible { outline-offset: -2px; }
.ft-list-row__leading { display: inline-flex; flex: none; }
.ft-list-row__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }

.ft-list-row__title,
.ft-list-row__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ft-list-row__title { font-size: var(--ft-text-md); font-weight: var(--ft-weight-bold); }
.ft-list-row__meta { font-size: var(--ft-text-xs); color: var(--ft-text-muted); }
.ft-list-row__trailing { display: inline-flex; flex: none; align-items: center; gap: var(--ft-space-2); }
.ft-list-row__chevron { flex: none; color: var(--ft-text-subtle); font-size: 20px !important; }

/* =========================================================================================
   FtTabs (segmented)
   ========================================================================================= */
.ft-tabs {
  display: inline-flex;
  gap: var(--ft-space-1);
  max-width: 100%;
  padding: var(--ft-space-1);
  overflow-x: auto;
  border: 1px solid var(--ft-border);
  border-radius: 14px;
  background: var(--ft-segment-bg);
  scrollbar-width: none;
}

.ft-tabs::-webkit-scrollbar { display: none; }

.ft-tabs__tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 var(--ft-space-4);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ft-text-muted);
  font-family: var(--ft-font-family);
  font-size: var(--ft-text-sm);
  font-weight: var(--ft-weight-bold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ft-duration-fast) var(--ft-ease), color var(--ft-duration-fast) var(--ft-ease);
}

/* Phones: 44px tabs on one scrolling row. When the row overflows, a scroll-driven mask fades the edge that has more
   tabs behind it (right at the start, left at the end, both in between); a row that fits has no timeline, so no fade. */
@property --_ft-tabs-fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --_ft-tabs-fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }

@media (max-width: 600px) {
  .ft-tabs {
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--ft-space-6);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--_ft-tabs-fade-start),
                                        black calc(100% - var(--_ft-tabs-fade-end)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black var(--_ft-tabs-fade-start),
                                black calc(100% - var(--_ft-tabs-fade-end)), transparent 100%);
  }

  .ft-tabs__tab { height: var(--ft-control-md); scroll-snap-align: start; }

  @supports (animation-timeline: scroll()) {
    .ft-tabs { animation: ft-tabs-fade linear both; animation-timeline: scroll(self inline); }
  }

  /* No scroll timelines (e.g. Firefox): show a thin scrollbar as the affordance instead */
  @supports not (animation-timeline: scroll()) {
    .ft-tabs { scrollbar-width: thin; }
  }
}

@keyframes ft-tabs-fade {
  0% { --_ft-tabs-fade-start: 0px; --_ft-tabs-fade-end: 40px; }
  10%, 90% { --_ft-tabs-fade-start: 40px; --_ft-tabs-fade-end: 40px; }
  100% { --_ft-tabs-fade-start: 40px; --_ft-tabs-fade-end: 0px; }
}

.ft-tabs__tab:hover { color: var(--ft-text); }
.ft-tabs__tab:focus-visible { outline-offset: -2px; }

.ft-tabs__tab.is-active {
  background: var(--ft-segment-active);
  color: var(--ft-text);
  box-shadow: var(--ft-elevation-1);
}

.ft-tabs__badge {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--ft-radius-pill);
  background: var(--ft-surface-3);
  color: var(--ft-text);
  font-size: 11px;
  font-weight: var(--ft-weight-extrabold);
  text-align: center;
}

/* =========================================================================================
   FtEmptyState
   ========================================================================================= */
.ft-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ft-space-3);
  padding: var(--ft-space-12) var(--ft-space-6);
  text-align: center;
}

.ft-empty__title { margin: var(--ft-space-2) 0 0; font-size: var(--ft-text-xl); font-weight: var(--ft-weight-extrabold); letter-spacing: var(--ft-tracking-tight); }
.ft-empty__text { max-width: 420px; margin: 0; color: var(--ft-text-muted); }
.ft-empty__action { margin-top: var(--ft-space-2); }

/* =========================================================================================
   FtStatusChip, FtBadge
   ========================================================================================= */
.ft-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--ft-radius-pill);
  background: var(--_tbg);
  color: var(--_tfg);
  font-size: var(--ft-text-xs);
  font-weight: var(--ft-weight-bold);
  line-height: 1;
  white-space: nowrap;
}

.ft-chip__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--_tsolid); }
.ft-chip__icon { font-size: 14px !important; }

.ft-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--ft-radius-pill);
  background: var(--_bbg);
  color: var(--_bfg);
  font-size: 11px;
  font-weight: var(--ft-weight-extrabold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================================
   FtAvatar
   ========================================================================================= */
.ft-avatar {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ft-tone-navy);
  color: var(--ft-avatar-fg);
  font-weight: var(--ft-weight-extrabold);
  letter-spacing: 0.02em;
}

.ft-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.ft-avatar--md { width: 40px; height: 40px; font-size: 14px; }
.ft-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.ft-avatar__img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================================
   FtNavItem
   ========================================================================================= */
.ft-nav-item {
  display: flex;
  align-items: center;
  gap: var(--ft-space-3);
  min-height: var(--ft-control-md);
  padding: 0 var(--ft-space-2);
  border-radius: var(--ft-radius-md);
  color: var(--ft-text-muted);
  font-size: var(--ft-text-md);
  font-weight: var(--ft-weight-bold);
  text-decoration: none;
  transition: background-color var(--ft-duration-fast) var(--ft-ease), color var(--ft-duration-fast) var(--ft-ease);
}

.ft-nav-item:hover { background: var(--ft-hover); color: var(--ft-text); }

.ft-nav-item__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--ft-radius-sm);
  background: var(--ft-surface-2);
  color: var(--ft-text-muted);
}

.ft-nav-item__icon .mud-icon-root { font-size: 18px; }
.ft-nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-nav-item__badge { margin-inline-start: auto; }
.ft-nav-item.is-active { background: var(--ft-nav-active); color: var(--ft-text); }
.ft-nav-item.is-active .ft-nav-item__icon { background: var(--ft-accent); color: var(--ft-accent-ink); }

/* =========================================================================================
   FtShelfTag (decorative art, not a label preview)
   ========================================================================================= */
.ft-shelf-tag {
  --ft-shelf-tag-tilt: 0deg;
  display: inline-flex;
  flex-direction: column;
  min-width: 160px;
  overflow: hidden;
  border: 5px solid var(--ft-paper-frame);
  border-radius: 12px;
  background: var(--ft-paper);
  color: var(--ft-paper-ink);
  box-shadow: var(--ft-elevation-2);
  font-family: var(--ft-font-family);
  transform: rotate(var(--ft-shelf-tag-tilt));
}

.ft-shelf-tag--navy { border-color: var(--ft-paper-frame-navy); }

.ft-shelf-tag__banner {
  padding: 4px 10px;
  background: var(--ft-paper-banner);
  color: var(--ft-paper-banner-fg);
  font-size: 11px;
  font-weight: var(--ft-weight-extrabold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ft-shelf-tag__body { padding: 10px 14px 12px; }
.ft-shelf-tag__name { font-size: var(--ft-text-sm); font-weight: var(--ft-weight-bold); }

.ft-shelf-tag__price {
  font-size: 32px;
  font-weight: var(--ft-weight-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ft-tracking-tighter);
  font-variant-numeric: tabular-nums;
}

.ft-shelf-tag--sm { min-width: 128px; border-width: 4px; }
.ft-shelf-tag--sm .ft-shelf-tag__price { font-size: 24px; }
.ft-shelf-tag--lg { min-width: 200px; border-width: 6px; }
.ft-shelf-tag--lg .ft-shelf-tag__price { font-size: 40px; }

/* =========================================================================================
   FtLabelPreview (the real label: panel aspect ratio, native-size content scaled to fit)
   Sizes come from inline vars set by the component: --lp-w/--lp-h native px, --lp-s scale,
   --lp-bw/--lp-bh box; the "-c" set applies on phones. The bezel is a box-shadow so it never
   takes room from the label. The label is paper, so it stays light in dark mode.
   ========================================================================================= */
.ft-label-preview {
  position: relative;
  display: block;
  flex: none;
  box-sizing: content-box;
  width: var(--lp-bw);
  height: var(--lp-bh);
  overflow: hidden;
  border-radius: 3px;
  background: var(--ft-paper);
  color: var(--ft-paper-ink);
  box-shadow: 0 0 0 3px var(--ft-paper-frame), var(--ft-elevation-2);
}

.ft-label-preview__frame {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--lp-w);
  height: var(--lp-h);
  border: 0;
  transform: scale(var(--lp-s));
  transform-origin: 0 0;
  pointer-events: none;
}

.ft-label-preview__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Shrunk below real size, crisp sampling drops strokes; smooth scaling keeps thin lines and small text readable. */
.ft-label-preview--downscaled .ft-label-preview__img { image-rendering: auto; }

.ft-label-preview--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--ft-border-strong);
  outline: 1px dashed var(--ft-paper-frame);
  outline-offset: -6px;
}

.ft-label-preview__empty {
  padding: var(--ft-space-1);
  font-family: var(--ft-font-family);
  font-size: var(--ft-text-xs);
  font-weight: var(--ft-weight-bold);
  text-align: center;
}

@media (max-width: 599.98px) {
  .ft-label-preview { width: var(--lp-bw-c); height: var(--lp-bh-c); }
  .ft-label-preview__frame { transform: scale(var(--lp-s-c)); }
}

/* Image previews never overflow a narrow container: the width gives way and the height follows the panel ratio. */
.ft-label-preview.ft-label-preview--fluid {
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--lp-ratio);
}

/* =========================================================================================
   FtToggleRow
   ========================================================================================= */
.ft-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ft-space-4);
  padding: var(--ft-space-4) 0;
}

.ft-toggle-row + .ft-toggle-row { border-top: 1px solid var(--ft-border); }
.ft-toggle-row:first-child { padding-top: 0; }
.ft-toggle-row:last-child { padding-bottom: 0; }
.ft-toggle-row__text { min-width: 0; }
.ft-toggle-row__title { font-size: var(--ft-text-md); font-weight: var(--ft-weight-bold); }
.ft-toggle-row__desc { margin-top: 2px; font-size: var(--ft-text-xs); color: var(--ft-text-muted); }
.ft-toggle-row__trailing { display: inline-flex; flex: none; align-items: center; gap: var(--ft-space-2); }

@media (max-width: 480px) {
  .ft-toggle-row { flex-wrap: wrap; }
}

/* =========================================================================================
   FtUpload
   ========================================================================================= */
.ft-upload { display: inline-flex; max-width: 100%; }
.ft-upload--zone { display: flex; width: 100%; }

.ft-upload__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ft-space-2);
  width: 100%;
  padding: var(--ft-space-7) var(--ft-space-5);
  border: 1.5px dashed var(--ft-border-strong);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-field-bg);
  color: var(--ft-text);
  font-family: var(--ft-font-family);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ft-duration-fast) var(--ft-ease), background-color var(--ft-duration-fast) var(--ft-ease);
}

.ft-upload__zone:hover,
.ft-upload__zone.is-dragging { border-color: var(--ft-accent); background: var(--ft-accent-soft); }
.ft-upload__title { font-size: var(--ft-text-md); font-weight: var(--ft-weight-bold); }
.ft-upload__hint { font-size: var(--ft-text-xs); color: var(--ft-text-muted); }

/* =========================================================================================
   MudBlazor overrides (inside MainLayout's .ft-root only)
   ========================================================================================= */

/* Inputs, selects, pickers. MudBlazor 9 removed the global ShrinkLabel default, so labels would float inside empty
   inputs. Inside .ft-root every Mud input label is drawn ABOVE the field, matching FtField. */
.ft-root .mud-input-control > .mud-input-control-input-container {
  display: flex;
  flex-direction: column;
}

.ft-root .mud-input-control > .mud-input-control-input-container > label.mud-input-label {
  position: static;
  order: -1;
  max-width: 100%;
  margin-bottom: 6px;
  padding: 0 !important;
  transform: none !important;
  color: var(--ft-text);
  font-size: var(--ft-text-sm);
  font-weight: var(--ft-weight-bold);
  line-height: var(--ft-leading-snug);
  white-space: normal;
  pointer-events: auto;
}

.ft-root .mud-input-control.mud-input-error > .mud-input-control-input-container > label.mud-input-label { color: var(--ft-danger-fg); }
.ft-root .mud-input.mud-input-outlined .mud-input-outlined-border legend { display: none; }

.ft-root .mud-input.mud-input-outlined {
  min-height: var(--ft-control-md);
  border-radius: var(--ft-radius-md);
  background: var(--ft-field-bg);
  color: var(--ft-text);
  font-size: var(--ft-text-md);
}

.ft-root .mud-input.mud-input-outlined .mud-input-outlined-border {
  border-color: var(--ft-field-border);
  border-radius: var(--ft-radius-md);
}

.ft-root .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
  border-width: 1px;
  border-color: var(--ft-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ft-focus) 28%, transparent);
}

.ft-root .mud-input.mud-input-outlined:not(.mud-input-multiline) .mud-input-slot {
  height: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Helper text sits flush left under the field, 6px below it, exactly like FtField hints */
/* Mud puts a px-* spacing utility (!important) on the outlined helper container, so only !important can zero it */
.ft-root .mud-input-control .mud-input-control-helper-container { margin: 6px 0 0; padding: 0 !important; }

.ft-root .mud-input-helper-text,
.ft-root .mud-input-helper-text.mud-input-helper-text-contained {
  margin: 0;
  padding: 0;
  color: var(--ft-text-muted);
  font-family: var(--ft-font-family);
  font-size: var(--ft-text-xs);
  font-weight: var(--ft-weight-medium);
  line-height: var(--ft-leading-snug);
  letter-spacing: 0;
}

/* Placeholders: same subtle ink as .ft-input (>= 4.5:1), Mud's default opacity removed */
.ft-root .mud-input input::placeholder,
.ft-root .mud-input textarea::placeholder { color: var(--ft-text-subtle); opacity: 1; }

/* Dialogs. Scoped to the dialog container (not .ft-root) so every MudDialog gets the look wherever the provider renders;
   tokens still follow the theme because the provider sits inside .ft-root[data-ft-theme]. Mud wraps a plain string
   title in an h6 typography element, so the title rules reach into it too. */
.mud-dialog-container .mud-dialog {
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-xl);
  background: var(--ft-surface);
  color: var(--ft-text);
  font-family: var(--ft-font-family);
  box-shadow: var(--ft-elevation-3);
}

.mud-dialog-container .mud-dialog .mud-dialog-title {
  padding: var(--ft-space-6) var(--ft-space-6) var(--ft-space-2);
  color: var(--ft-text);
}

.mud-dialog-container .mud-dialog .mud-dialog-title,
.mud-dialog-container .mud-dialog .mud-dialog-title > .mud-typography,
.ft-dialog__title {
  margin: 0;
  font-family: var(--ft-font-family);
  font-size: var(--ft-text-2xl);
  font-weight: var(--ft-weight-extrabold);
  line-height: var(--ft-leading-snug);
  letter-spacing: var(--ft-tracking-tight);
}

.mud-dialog-container .mud-dialog .mud-dialog-content {
  padding: var(--ft-space-2) var(--ft-space-6);
  color: var(--ft-text-muted);
  font-size: var(--ft-text-md);
  line-height: var(--ft-leading-normal);
}

.mud-dialog-container .mud-dialog .mud-dialog-actions {
  flex-wrap: wrap;
  gap: var(--ft-space-2);
  padding: var(--ft-space-5) var(--ft-space-6) var(--ft-space-6);
}

.mud-overlay-dialog .mud-overlay-scrim { background-color: var(--ft-scrim); }
.ft-dialog__text { margin: 0; }

@media (max-width: 600px) {
  .mud-dialog-container .mud-dialog .mud-dialog-actions { flex-direction: column-reverse; align-items: stretch; }
  .mud-dialog-container .mud-dialog .mud-dialog-actions .ft-btn { width: 100%; }
}

/* Phones: wide dialogs (product editor, search, ...) open full screen; the action bar stays at the bottom, clear of the home bar. */
@media (max-width: 767.98px) {
  .mud-dialog-container .mud-dialog:is(.mud-dialog-width-md, .mud-dialog-width-lg, .mud-dialog-width-xl, .mud-dialog-width-xxl) {
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .mud-dialog-container .mud-dialog:is(.mud-dialog-width-md, .mud-dialog-width-lg, .mud-dialog-width-xl, .mud-dialog-width-xxl) .mud-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* One compact row: buttons share the width side by side (primary last), 44px targets. */
  .mud-dialog-container .mud-dialog:is(.mud-dialog-width-md, .mud-dialog-width-lg, .mud-dialog-width-xl, .mud-dialog-width-xxl) .mud-dialog-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--ft-space-2);
    padding: var(--ft-space-2) var(--ft-space-4) calc(var(--ft-space-2) + env(safe-area-inset-bottom, 0px));
  }

  .mud-dialog-container .mud-dialog:is(.mud-dialog-width-md, .mud-dialog-width-lg, .mud-dialog-width-xl, .mud-dialog-width-xxl) .mud-dialog-actions .ft-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding-inline: var(--ft-space-2);
    white-space: nowrap;
  }

  .mud-dialog-container .mud-dialog:is(.mud-dialog-width-md, .mud-dialog-width-lg, .mud-dialog-width-xl, .mud-dialog-width-xxl) .mud-dialog-actions .ft-btn__icon { display: none; }

  .mud-dialog-container .mud-dialog:is(.mud-dialog-width-md, .mud-dialog-width-lg, .mud-dialog-width-xl, .mud-dialog-width-xxl) .mud-dialog-actions {
    position: sticky;
    bottom: 0;
    flex: none;
    border-top: 1px solid var(--ft-border);
    background: var(--ft-surface);
  }
}

/* Snackbars. Mud paints toasts with its filled alert classes (.mud-alert-filled-*), which out-rank a plain
   .mud-snackbar rule, so the doubled class wins without !important and is not tied to .ft-root. FreshTag toast:
   surface card, hairline border, body ink; severity shows in the tinted icon (the message text carries the meaning). */
.mud-snackbar.mud-snackbar {
  gap: var(--ft-space-1);
  min-height: var(--ft-control-lg);
  padding: var(--ft-space-2) var(--ft-space-4);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
  color: var(--ft-text);
  font-family: var(--ft-font-family);
  font-size: var(--ft-text-md);
  font-weight: var(--ft-weight-semibold);
  box-shadow: var(--ft-elevation-3);
}

.mud-snackbar.mud-snackbar .mud-snackbar-icon { opacity: 1; color: var(--ft-text-muted); }
.mud-snackbar.mud-alert-filled-success .mud-snackbar-icon,
.mud-snackbar.mud-alert-text-success .mud-snackbar-icon { color: var(--ft-success-fg); }
.mud-snackbar.mud-alert-filled-info .mud-snackbar-icon,
.mud-snackbar.mud-alert-text-info .mud-snackbar-icon { color: var(--ft-info-fg); }
.mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon,
.mud-snackbar.mud-alert-text-warning .mud-snackbar-icon { color: var(--ft-warning-fg); }
.mud-snackbar.mud-alert-filled-error .mud-snackbar-icon,
.mud-snackbar.mud-alert-text-error .mud-snackbar-icon { color: var(--ft-danger-fg); }
.mud-snackbar.mud-snackbar .mud-snackbar-content-action > button { color: var(--ft-text-muted); }

@media (max-width: 600px) {
  .mud-snackbar.mud-snackbar { min-width: 0; max-width: calc(100vw - 32px); }
}

/* Tables and data grids: hairline rows, quiet header */
.ft-root .mud-table {
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
  box-shadow: none;
}

.ft-root .mud-table-head .mud-table-cell,
.ft-root .mud-simple-table table thead th {
  background: transparent;
  color: var(--ft-text-muted);
  font-size: var(--ft-text-xs);
  font-weight: var(--ft-weight-bold);
}

.ft-root .mud-table-cell,
.ft-root .mud-simple-table table td,
.ft-root .mud-simple-table table th { border-bottom: 1px solid var(--ft-border); }
.ft-root .mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: 0; }

/* Switches: brand accent track, white thumb */
.ft-root .mud-switch .mud-switch-base.mud-checked + .mud-switch-track,
.ft-root .mud-switch .mud-checked .mud-switch-track {
  background-color: var(--ft-accent);
  opacity: 1;
}

/* Menus and popovers */
.ft-root .mud-popover {
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-md);
  background: var(--ft-surface);
  box-shadow: var(--ft-elevation-3);
}

.ft-root .mud-popover .mud-list { padding: 6px; }
.ft-root .mud-popover .mud-list-item { min-height: 40px; border-radius: var(--ft-radius-sm); }

@media (prefers-reduced-motion: reduce) {
  .ft-btn, .ft-input, .ft-nav-item, .ft-tabs__tab, .ft-card--link, .ft-list-row--action, .ft-upload__zone { transition: none; }
  .ft-btn__spinner { animation-duration: 2s; }
}

/* =========================================================================================
   Design system gallery (/admin/design-system)
   ========================================================================================= */
.ft-ds { max-width: var(--ft-content-max); margin: 0 auto; padding-bottom: var(--ft-space-12); }
.ft-ds__h2 { margin: 0; font-size: var(--ft-text-2xl); font-weight: var(--ft-weight-extrabold); letter-spacing: var(--ft-tracking-tight); }
.ft-ds__h3 { margin: var(--ft-space-4) 0 var(--ft-space-1); font-size: var(--ft-text-lg); font-weight: var(--ft-weight-extrabold); }
.ft-ds__p { margin: 0 0 var(--ft-space-3); }
.ft-ds__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ft-space-4); align-items: start; }
.ft-ds__hero-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--ft-space-4); }
.ft-ds__tags { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.ft-ds__tag-offset { margin: -10px 0 0 30px; }
.ft-ds__sidebar { display: flex; flex-direction: column; gap: var(--ft-space-1); padding: var(--ft-space-3); border: 1px solid var(--ft-border); border-radius: var(--ft-radius-lg); background: var(--ft-surface); }
.ft-ds__swatch { display: flex; align-items: center; gap: var(--ft-space-3); min-width: 0; font-size: var(--ft-text-xs); }
.ft-ds__swatch code { overflow: hidden; text-overflow: ellipsis; }
.ft-ds__chip { width: 36px; height: 36px; flex: none; border: 1px solid var(--ft-border); border-radius: var(--ft-radius-sm); }
.ft-ds__type-row { display: flex; align-items: baseline; gap: var(--ft-space-4); min-width: 0; }
.ft-ds__type-row code { flex: none; width: 140px; color: var(--ft-text-muted); font-size: var(--ft-text-xs); }
.ft-ds__type-row span { min-width: 0; overflow-wrap: anywhere; line-height: var(--ft-leading-tight); }
.ft-ds__shape { display: flex; align-items: flex-end; width: 140px; height: 96px; padding: var(--ft-space-2); border: 1px solid var(--ft-border); background: var(--ft-surface); font-size: 11px; }
.ft-ds__table { margin-top: var(--ft-space-4); }
.ft-ds__table .mud-table { border: 0; border-radius: 0; }

@media (max-width: 600px) {
  .ft-ds { padding-right: var(--ft-space-4); }
}

@media (max-width: 900px) {
  .ft-ds__two, .ft-ds__hero-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- FtPager: one pager for every customer list ---- */
.ft-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ft-space-3);
  margin-top: var(--ft-space-4);
}
.ft-pager__range { color: var(--ft-text-muted); font-size: var(--ft-text-sm); }
.ft-pager__nav { display: flex; align-items: center; gap: var(--ft-space-3); font-weight: var(--ft-weight-semibold); }
@media (max-width: 600px) {
  .ft-pager__range { display: none; }
  .ft-pager__nav { width: 100%; justify-content: space-between; }
}