/* GENERATED by `npm run sync:design` from design-system/. Do not edit here. */
/* ==========================================================
   FleetFixer design system, COMPONENTS
   Source of truth: design-system/ff-components.css (synced).
   Token-driven glass primitives + shared components. Class names
   match the vocabulary already used across platforms (.card,
   .btn, .field, .modal, .badge, table) so adopting this file
   re-skins existing markup. Link AFTER ff-tokens.css + ff-base.css.
   ========================================================== */

/* ---------- Buttons ---------- */
.btn,.ff-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:14px; line-height:1;
  padding:11px 18px; border-radius:var(--radius-pill);
  border:1px solid var(--stroke); background:var(--panel); color:var(--text);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
             background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn:hover,.ff-btn:hover{ border-color:var(--stroke-strong); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn:active,.ff-btn:active{ transform:translateY(0); }
.btn:disabled,.ff-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-primary,.ff-btn.primary{
  background:var(--accent); color:var(--accent-contrast); border-color:transparent;
}
.btn-primary:hover,.ff-btn.primary:hover{ background:var(--accent-strong); box-shadow:0 8px 22px rgba(15,77,58,.28); }

.btn-citrus{ background:var(--highlight); color:var(--highlight-ink); border-color:transparent; }
.btn-citrus:hover{ background:var(--highlight-strong); box-shadow:0 8px 22px rgba(156,184,31,.30); }

.btn-ghost,.ff-btn.ghost{ background:transparent; border-color:var(--stroke); }
.btn-ghost:hover{ background:var(--surface-2); }

.btn-sm{ padding:7px 12px; font-size:12.5px; }
.btn-lg{ padding:14px 24px; font-size:15px; }

/* ---------- Cards + panels (tokened surfaces, no per-card blur) ---------- */
.card,.panel{
  background:var(--panel); border:1px solid var(--stroke);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xs);
  padding:var(--space-6); color:var(--text);
}
a.card,button.card,.card.is-interactive{
  transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  cursor:pointer; text-decoration:none;
}
a.card:hover,button.card:hover,.card.is-interactive:hover{
  transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--stroke-strong);
}

/* A glass panel variant for hero/feature surfaces over the backdrop wash */
.glass-card{
  border-radius:var(--radius-lg); padding:var(--space-6); color:var(--text);
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-card{ background:var(--panel); }
}

/* ---------- Form fields ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label,.ff-label{ font-size:12.5px; font-weight:700; color:var(--muted); }
.input,.field input,.field select,.field textarea,
input[type=text],input[type=email],input[type=search],input[type=password],
input[type=number],input[type=date],input[type=tel],input[type=url],select,textarea{
  width:100%; padding:10px 13px; border-radius:var(--radius-sm);
  border:1px solid var(--stroke); background:var(--panel-2); color:var(--text);
  font-family:var(--font-body); font-size:14px;
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
input::placeholder,textarea::placeholder{ color:var(--muted-2); }
.input:focus,.field input:focus,.field select:focus,.field textarea:focus,
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent); background:var(--panel); box-shadow:var(--focus-ring);
}

/* ---------- Badges + pills ---------- */
.badge,.pill,.chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:800; letter-spacing:.2px;
  padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--surface-2); color:var(--muted);
}
.badge-accent{ background:var(--accent-soft); color:var(--accent); }
.badge-citrus{ background:var(--citrus-100); color:var(--citrus-800); }
.badge-success,.badge.granted{ background:var(--success-soft); color:var(--success); }
.badge-warning,.badge.pending{ background:var(--warning-soft); color:var(--warning); }
.badge-danger,.badge.revoked{ background:var(--danger-soft); color:var(--danger); }
.badge-info{ background:var(--info-soft); color:var(--info); }

/* ---------- Tables ---------- */
table.data,.ff-table{ width:100%; border-collapse:collapse; font-size:14px; }
table.data th,.ff-table th{
  text-align:left; padding:11px 12px; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
  border-bottom:1px solid var(--stroke-strong);
}
table.data td,.ff-table td{ padding:12px; border-bottom:1px solid var(--stroke); }
table.data tbody tr,.ff-table tbody tr{ transition:background-color var(--dur-1) var(--ease); }
table.data tbody tr:hover,.ff-table tbody tr:hover{ background:var(--surface-2); }

/* ---------- Modal + glass scrim ---------- */
.modal-overlay,.modal-backdrop,.ff-modal-scrim{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center; padding:20px;
  background:color-mix(in srgb, var(--bark-950) 52%, transparent);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.modal-overlay.open,.modal-overlay.visible,.modal-backdrop.open,.ff-modal-scrim.open{ display:flex; }
.modal,.modal-content,.modal-card,.ff-modal{
  background:var(--panel); border:1px solid var(--stroke);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  max-width:480px; width:100%; max-height:90vh; overflow-y:auto; padding:var(--space-6);
  color:var(--text); animation:ffModalIn var(--dur-2) var(--ease-out);
}
@keyframes ffModalIn{ from{ opacity:0; transform:translateY(8px) scale(.985); } to{ opacity:1; transform:none; } }

/* ---------- Theme toggle control (mounted by ff-theme.js) ---------- */
.ff-theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--radius-pill);
  border:1px solid var(--stroke); background:var(--panel); color:var(--text);
  cursor:pointer; flex-shrink:0;
  transition:background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.ff-theme-toggle:hover{ border-color:var(--stroke-strong); background:var(--surface-2); transform:translateY(-1px); }
.ff-theme-toggle .ff-ico-sun{ display:none; }
.ff-theme-toggle .ff-ico-moon{ display:inline; }
[data-theme="dark"] .ff-theme-toggle .ff-ico-sun{ display:inline; }
[data-theme="dark"] .ff-theme-toggle .ff-ico-moon{ display:none; }

/* Floating fallback placement when no host container is given */
.ff-theme-toggle.ff-floating{
  position:fixed; right:18px; bottom:18px; z-index:120;
  width:44px; height:44px; box-shadow:var(--shadow);
}

/* ---------- Brand mark + wordmark (injected by ff-marks.js) ---------- */
.ff-logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text-strong); }
.ff-logo-mark{ width:34px; height:34px; flex-shrink:0; border-radius:10px; display:block; }
.ff-logo-word{ font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.02em; color:inherit; }
.ff-logo-word .ff-word-fixer{ color:var(--accent); }