/*
  Fast Repair CRM — UI Components

  Reusable component classes built on top of the token + base styles.
  Keep selectors simple and predictable.
*/

/* ---------------------------
   Buttons
--------------------------- */
.fr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.fr-btn:hover {
  border-color: rgba(var(--text-rgb), 0.35);
}
.fr-btn:active {
  transform: translateY(0.5px);
}
.fr-btn:disabled,
.fr-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.fr-btn--sm {
  padding: 8px 10px;
  font-size: 13px;
}
.fr-btn--md {
  padding: 10px 14px;
  font-size: 14px;
}

.fr-btn--primary {
  background: rgba(var(--primary-rgb), 0.16);
  border-color: rgba(var(--primary-rgb), 0.42);
}
.fr-btn--primary:hover {
  background: rgba(var(--primary-rgb), 0.22);
  border-color: rgba(var(--primary-rgb), 0.62);
}

.fr-btn--secondary {
  background: transparent;
}

.fr-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.fr-btn--ghost:hover {
  color: var(--text);
  background: rgba(var(--text-rgb), 0.08);
  border-color: rgba(var(--text-rgb), 0.12);
}

/* Apply to existing CRM buttons (exclude kiosk + print). */
body:not(.kiosk-body):not(.print-body) :where(a.btn, button.btn, input.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
body:not(.kiosk-body):not(.print-body) :where(a.btn, button.btn, input.btn):hover {
  border-color: rgba(var(--text-rgb), 0.35);
}
body:not(.kiosk-body):not(.print-body) :where(a.btn, button.btn, input.btn):active {
  transform: translateY(0.5px);
}
body:not(.kiosk-body):not(.print-body) :where(a.btn, button.btn, input.btn):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
body:not(.kiosk-body):not(.print-body) :where(a.btn.btn-small, button.btn.btn-small, input.btn.btn-small) {
  padding: 8px 10px;
  font-size: 13px;
}
body:not(.kiosk-body):not(.print-body) :where(.btn.btn-secondary) {
  background: transparent;
}
body:not(.kiosk-body):not(.print-body) :where(.btn.btn-primary) {
  background: rgba(var(--primary-rgb), 0.16);
  border-color: rgba(var(--primary-rgb), 0.42);
}
body:not(.kiosk-body):not(.print-body) :where(.btn.btn-primary):hover {
  background: rgba(var(--primary-rgb), 0.22);
  border-color: rgba(var(--primary-rgb), 0.62);
}
body:not(.kiosk-body):not(.print-body) :where(.btn.btn-danger) {
  background: rgba(var(--danger-rgb), 0.16);
  border-color: rgba(var(--danger-rgb), 0.42);
}
body:not(.kiosk-body):not(.print-body) :where(.btn.btn-danger):hover {
  background: rgba(var(--danger-rgb), 0.22);
  border-color: rgba(var(--danger-rgb), 0.62);
}

/* ---------------------------
   Inputs + form meta
--------------------------- */
.fr-label {
  display: block;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.fr-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text);
  outline: none;
}

.fr-help {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 12px;
}

.fr-error {
  margin-top: var(--space-2);
  color: rgba(var(--danger-rgb), 0.95);
  font-size: 12px;
  min-height: 14px;
}

/* Keep existing forms consistent without template rewrites (exclude kiosk + print). */
body:not(.kiosk-body):not(.print-body) :where(label) {
  display: block;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
/* Only style text-like inputs here; checkbox/radio sizing breaks flex/grid layouts in Safari/WebView. */
body:not(.kiosk-body):not(.print-body) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
  select,
  textarea
) {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text);
  outline: none;
}
body:not(.kiosk-body):not(.print-body) :where(textarea) {
  resize: vertical;
}
body:not(.kiosk-body):not(.print-body) :where(.field-error) {
  margin-top: var(--space-2);
}

/* ---------------------------
   Cards
--------------------------- */
.fr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.fr-card--compact { border-radius: var(--r-sm); }
.fr-card--clip { overflow: hidden; }
.fr-card__header {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--divider);
}
.fr-card__header--tight {
  padding: var(--space-3) var(--space-4);
}
.fr-card__body {
  padding: var(--space-4);
}
.fr-card__body--flush {
  padding: 0;
}
.fr-card__body--compact {
  padding: var(--space-3) var(--space-4);
}

/* Apply to existing CRM cards (exclude kiosk + print). */
body:not(.kiosk-body):not(.print-body) .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  margin: 14px 0;
  box-shadow: var(--shadow-1);
}

/* ---------------------------
   Badges (status pills)
--------------------------- */
.fr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(var(--slate-rgb), 0.12);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.fr-badge--muted {
  background: rgba(var(--slate-rgb), 0.12);
  border-color: rgba(var(--slate-rgb), 0.28);
}
.fr-badge--success {
  background: rgba(var(--success-rgb), 0.15);
  border-color: rgba(var(--success-rgb), 0.42);
}
.fr-badge--warning {
  background: rgba(var(--warning-rgb), 0.16);
  border-color: rgba(var(--warning-rgb), 0.44);
}
.fr-badge--danger {
  background: rgba(var(--danger-rgb), 0.16);
  border-color: rgba(var(--danger-rgb), 0.42);
}
.fr-badge--info {
  background: rgba(var(--primary-rgb), 0.16);
  border-color: rgba(var(--primary-rgb), 0.44);
}

/* Apply to existing CRM badges + map ticket statuses (exclude kiosk + print). */
body:not(.kiosk-body):not(.print-body) .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--success-rgb), 0.35);
  background: rgba(var(--success-rgb), 0.15);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
body:not(.kiosk-body):not(.print-body) .badge-danger {
  background: rgba(var(--danger-rgb), 0.16);
  border-color: rgba(var(--danger-rgb), 0.42);
}
body:not(.kiosk-body):not(.print-body) .badge-warning {
  background: rgba(var(--warning-rgb), 0.16);
  border-color: rgba(var(--warning-rgb), 0.44);
}

/* Ticket status mapping (requested) */
body:not(.kiosk-body):not(.print-body) .badge.ticket-status { /* default = muted */
  background: rgba(var(--slate-rgb), 0.12);
  border-color: rgba(var(--slate-rgb), 0.28);
}
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-checked-in {
  background: rgba(var(--primary-rgb), 0.16);
  border-color: rgba(var(--primary-rgb), 0.44);
}
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-qc,
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-waiting-customer-approval {
  background: rgba(var(--primary-rgb), 0.16);
  border-color: rgba(var(--primary-rgb), 0.44);
}
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-diagnosing {
  background: rgba(var(--violet-rgb), 0.16);
  border-color: rgba(var(--violet-rgb), 0.44);
}
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-repairing {
  background: rgba(var(--danger-rgb), 0.16);
  border-color: rgba(var(--danger-rgb), 0.42);
}
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-waiting-parts {
  background: rgba(var(--warning-rgb), 0.16);
  border-color: rgba(var(--warning-rgb), 0.44);
}
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-ready,
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-ready-for-pickup,
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-customer-approved {
  background: rgba(var(--success-rgb), 0.15);
  border-color: rgba(var(--success-rgb), 0.42);
}
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-customer-declined,
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-not-repairable {
  background: rgba(var(--danger-rgb), 0.16);
  border-color: rgba(var(--danger-rgb), 0.42);
}
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-customer-canceled,
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-customer-cancelled {
  background: rgba(var(--warning-rgb), 0.16);
  border-color: rgba(var(--warning-rgb), 0.44);
}
body:not(.kiosk-body):not(.print-body) .badge.ticket-status.status-closed {
  background: rgba(var(--slate-rgb), 0.12);
  border-color: rgba(var(--slate-rgb), 0.28);
}

/* ---------------------------
   Tabs
--------------------------- */
.fr-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.fr-tabs--spaced {
  margin: var(--space-3) 0 var(--space-4);
}
.fr-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}
.fr-tab:hover {
  color: var(--text);
  border-color: rgba(var(--text-rgb), 0.22);
}
.fr-tab[aria-selected="true"],
.fr-tab.is-active {
  color: var(--text);
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.60);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.20);
}

/* ---------------------------
   Tables
--------------------------- */
.fr-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fr-table--in-card {
  border: 0;
  border-radius: 0;
}
.fr-table th,
.fr-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}
.fr-table thead th {
  background: rgba(var(--elevated-rgb), 0.55);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fr-table tbody tr:hover {
  background: rgba(var(--text-rgb), 0.05);
}
.fr-table--zebra tbody tr:nth-child(2n) {
  background: rgba(var(--text-rgb), 0.03);
}
.fr-table--zebra tbody tr:nth-child(2n):hover {
  background: rgba(var(--text-rgb), 0.06);
}
.fr-table--sticky thead th {
  position: sticky;
  top: var(--fr-table-sticky-top, 0px);
  z-index: 1;
}

.fr-table-wrap {
  width: 100%;
  overflow: auto;
}

/* Upgrade legacy `.table` incrementally (admin/public). */
body:not(.kiosk-body):not(.print-body) .table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
}
body:not(.kiosk-body):not(.print-body) .table th,
body:not(.kiosk-body):not(.print-body) .table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}
body:not(.kiosk-body):not(.print-body) .table thead th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(var(--elevated-rgb), 0.35);
}
body:not(.kiosk-body):not(.print-body) .table tbody tr:hover {
  background: rgba(var(--text-rgb), 0.04);
}
body:not(.kiosk-body):not(.print-body) .table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------------------------
   Dashboard color polish (admin landing)
--------------------------- */
body.fr-dashboard-body {
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(var(--primary-rgb), 0.14), rgba(var(--bg-rgb), 0) 55%),
    radial-gradient(900px 520px at 85% -20%, rgba(var(--violet-rgb), 0.12), rgba(var(--bg-rgb), 0) 55%),
    var(--bg);
}
body.fr-dashboard-body :where(.fr-card, .card) {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(var(--text-rgb), 0.05), rgba(var(--surface-rgb), 0) 55%),
    linear-gradient(180deg, rgba(var(--elevated-rgb), 0.55), rgba(var(--surface-rgb), 1) 45%),
    var(--surface);
}
body.fr-dashboard-body .fr-stat {
  background: linear-gradient(180deg, rgba(var(--elevated-rgb), 0.62), rgba(var(--surface-rgb), 1) 55%);
}

/* ---------------------------
   Page header pattern
--------------------------- */
.fr-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-3);
}
.fr-page-title {
  margin: 0;
}
.fr-page-subtitle {
  margin-top: var(--space-1);
}
.fr-page-head__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fr-page-note {
  margin: var(--space-2) 0 var(--space-4);
}
.fr-section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

@media (max-width: 760px) {
  .fr-page-head {
    flex-direction: column;
    align-items: stretch;
  }
  .fr-page-head__actions {
    justify-content: flex-start;
  }
}

/* ---------------------------
   Inline form helpers
--------------------------- */
.fr-inline-form {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.fr-inline-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: min(520px, 100%);
  flex: 1;
}
.fr-inline-label {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.fr-input--sm {
  padding: 8px 10px;
  font-size: 13px;
  border-radius: var(--r-sm);
}

/* Compact filter bars (search/filters) */
.fr-filters {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.fr-filters__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.fr-filters__item--grow {
  flex: 1 1 520px;
  min-width: min(520px, 100%);
}
.fr-filters__item--sm {
  flex: 0 0 auto;
  min-width: 180px;
}
.fr-filter-meta {
  margin-top: var(--space-2);
}
.fr-subline {
  margin-top: var(--space-1);
}

.fr-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--divider);
}
.fr-pagination__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------------------------
   Stat cards (Dashboard KPI)
--------------------------- */
.fr-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-2);
}
.fr-stat {
  position: relative;
  padding: var(--space-4);
  min-height: 96px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.fr-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(var(--fr-stat-rgb, var(--slate-rgb)), 0.85);
}
.fr-stat::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -200px;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    circle at 30% 35%,
    rgba(var(--fr-stat-rgb, var(--slate-rgb)), 0.18),
    rgba(var(--fr-stat-rgb, var(--slate-rgb)), 0) 65%
  );
  pointer-events: none;
}
.fr-stat > * { position: relative; }
.fr-stat__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fr-stat__value {
  margin-top: var(--space-2);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}
.fr-stat--blue { --fr-stat-rgb: var(--primary-rgb); }
.fr-stat--violet { --fr-stat-rgb: var(--violet-rgb); }
.fr-stat--amber { --fr-stat-rgb: var(--warning-rgb); }
.fr-stat--green { --fr-stat-rgb: var(--success-rgb); }

/* ---------------------------
   Empty states
--------------------------- */
.fr-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.fr-empty--boxed {
  background: rgba(var(--text-rgb), 0.02);
  border-top: 1px solid var(--divider);
}
.fr-empty--inline {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border: 1px dashed rgba(var(--text-rgb), 0.14);
  border-radius: var(--r-md);
  background: rgba(var(--text-rgb), 0.02);
}

/* ---------------------------
   Toast / notice styles (flash messages)
--------------------------- */
body:not(.kiosk-body):not(.print-body) .alert {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--danger-rgb), 0.35);
  background: rgba(var(--danger-rgb), 0.12);
  box-shadow: var(--shadow-1);
}
body:not(.kiosk-body):not(.print-body) .alert::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 5px;
  background: rgba(var(--danger-rgb), 0.95);
  flex: 0 0 auto;
}
body:not(.kiosk-body):not(.print-body) .alert-ok {
  border-color: rgba(var(--success-rgb), 0.35);
  background: rgba(var(--success-rgb), 0.12);
}
body:not(.kiosk-body):not(.print-body) .alert-ok::before {
  background: rgba(var(--success-rgb), 0.95);
}

/* ---------------------------
   Skeleton loading utilities
--------------------------- */
@keyframes fr-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}
.fr-skeleton {
  background: linear-gradient(
    90deg,
    rgba(var(--text-rgb), 0.06) 25%,
    rgba(var(--text-rgb), 0.12) 37%,
    rgba(var(--text-rgb), 0.06) 63%
  );
  background-size: 400% 100%;
  animation: fr-shimmer 1.2s ease-in-out infinite;
}
.fr-skeleton-line {
  height: 12px;
  border-radius: 999px;
}
.fr-skeleton-line--sm { height: 10px; }
.fr-skeleton-line--lg { height: 16px; border-radius: var(--r-sm); }
.fr-skeleton-block { border-radius: var(--r-md); }

@media (prefers-reduced-motion: reduce) {
  .fr-skeleton { animation: none; }
}

/* ---------------------------
   Hover-revealed row actions (opt-in via markup)
--------------------------- */
.fr-row-actions {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
}
.fr-cell-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
@media (hover: hover) {
  .fr-cell-actions .fr-row-actions {
    opacity: 0;
    transform: translateX(-4px);
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
  }
  .fr-table tbody tr:hover .fr-cell-actions .fr-row-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ---------------------------
   Top navigation polish
--------------------------- */
body:not(.kiosk-body):not(.print-body) .topbar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider);
  background: rgba(var(--elevated-rgb), 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body:not(.kiosk-body):not(.print-body) .brand {
  font-size: 15px;
  letter-spacing: -0.01em;
}
body:not(.kiosk-body):not(.print-body) .topnav {
  gap: 10px;
  margin-left: 14px;
}
body:not(.kiosk-body):not(.print-body) .topnav-group {
  gap: 8px;
}
body:not(.kiosk-body):not(.print-body) .topnav-divider {
  background: rgba(var(--text-rgb), 0.12);
}
body:not(.kiosk-body):not(.print-body) .topnav a {
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 9px;
  font-weight: 800;
}
body:not(.kiosk-body):not(.print-body) .topnav-dropdown summary {
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 9px;
}
body:not(.kiosk-body):not(.print-body) .topnav-dropdown-menu {
  border-color: var(--border);
  background: rgba(var(--elevated-rgb), 0.98);
  box-shadow: var(--shadow-2);
}