/* ══════════════════════════════════════════════════════════════════════════
   FABRIC MERCHANT PRO — global design pass
   Loaded after the compiled bundle stylesheet and after app-overrides.css.

   One elevation scale, one focus ring, one radius, one motion curve, applied to
   the component classes the bundle already uses (.panel, .btn, .field, .badge,
   .tab, .nav-btn, .qa-btn, .inv-card). Everything resolves through the app's
   own theme variables, so the theme picker and dark mode keep working without a
   second set of rules.

   Deliberately restrained: this is an operational tool people read all day, so
   the polish is in hierarchy, spacing and feedback rather than decoration.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --fm-r-sm: 9px;
  --fm-r-md: 12px;
  --fm-r-lg: 16px;
  --fm-ease: cubic-bezier(.2, .8, .2, 1);
  --fm-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 26%, transparent);
  --fm-lift-1: 0 1px 2px rgba(0, 0, 0, .04);
  --fm-lift-2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -14px color-mix(in srgb, var(--text) 30%, transparent);
  --fm-lift-3: 0 2px 4px rgba(0, 0, 0, .05), 0 16px 36px -18px color-mix(in srgb, var(--text) 38%, transparent);
}

/* ── Keyboard focus ────────────────────────────────────────────────────────
   A single visible ring on every interactive element. The bundle ships almost
   no focus styling, which leaves the app close to unusable by keyboard and
   fails the most basic accessibility check. */
.btn:focus-visible,
.nav-btn:focus-visible,
.tab:focus-visible,
.qa-btn:focus-visible,
.theme-btn:focus-visible,
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--fm-r-sm);
}

/* ── Panels ────────────────────────────────────────────────────────────────*/
.panel {
  border-radius: var(--fm-r-lg);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: var(--fm-lift-2);
}
.panel > h2,
.panel > h3 {
  letter-spacing: -.012em;
  font-weight: 700;
}

/* ── Tables outside the customers view ─────────────────────────────────────
   Reports, Users and the dashboard render plain tables. They get the same
   header rail and row rhythm as .cust-table so the app reads as one product
   rather than several. */
table:not(.cust-table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
table:not(.cust-table) thead th {
  padding: .7rem .85rem;
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primary) 60%, var(--text2));
  white-space: nowrap;
}
table:not(.cust-table) tbody td {
  padding: .62rem .85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  transition: background-color .16s ease;
}
table:not(.cust-table) tbody tr:last-child td { border-bottom: 0; }
table:not(.cust-table) tbody tr:hover td {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

/* ── Buttons ───────────────────────────────────────────────────────────────
   Same radius and motion across every variant, so the primary action in a view
   is findable at a glance. */
.btn {
  border-radius: var(--fm-r-sm);
  font-weight: 600;
  letter-spacing: -.005em;
  transition: transform .12s var(--fm-ease), box-shadow .18s var(--fm-ease),
              background-color .18s ease, opacity .18s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { box-shadow: var(--fm-lift-1); }
.btn-primary:hover:not(:disabled) { box-shadow: var(--fm-lift-2); }
.btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.btn-danger:hover:not(:disabled) { box-shadow: 0 6px 18px -8px rgba(239, 68, 68, .55); }

/* ── Form fields ───────────────────────────────────────────────────────────
   A calm resting state and an unmistakable focused one. */
.field,
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="tel"], input[type="date"],
input[type="search"], select, textarea {
  border-radius: var(--fm-r-sm);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.field:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--fm-ring);
}
::placeholder { color: color-mix(in srgb, var(--text2) 70%, transparent); }

/* ── Badges ────────────────────────────────────────────────────────────────
   Shape and rhythm only. The colour carries meaning and is set inline by the
   bundle, so it is left alone. */
.badge, .inv-chip, .formula-badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
}

/* ── Tabs ──────────────────────────────────────────────────────────────────*/
.tab {
  border-radius: var(--fm-r-sm);
  font-weight: 600;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.tab:hover { background: color-mix(in srgb, var(--primary) 9%, transparent); }

/* ── Sidebar ───────────────────────────────────────────────────────────────*/
.nav-btn {
  border-radius: var(--fm-r-md);
  transition: background-color .18s ease, box-shadow .18s ease;
}

/* ── Quick actions ─────────────────────────────────────────────────────────*/
.qa-btn {
  border-radius: var(--fm-r-md);
  transition: transform .16s var(--fm-ease), box-shadow .2s var(--fm-ease),
              border-color .2s ease, background-color .2s ease;
}
.qa-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--fm-lift-2);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

/* ── Inventory cards ───────────────────────────────────────────────────────*/
.inv-card, .low-card {
  border-radius: var(--fm-r-lg);
  box-shadow: var(--fm-lift-1);
  transition: transform .18s var(--fm-ease), box-shadow .22s var(--fm-ease), border-color .2s ease;
}
.inv-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fm-lift-3);
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}
/* Row actions recede until the card is engaged, as on the customers table. */
.inv-card-acts { transition: opacity .18s ease; }
.inv-card:not(:hover):not(:focus-within) .inv-card-acts { opacity: .62; }

/* ── Scrollbars ────────────────────────────────────────────────────────────*/
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text2) 40%, transparent) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text2) 32%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text2) 55%, transparent);
  background-clip: content-box;
}

/* ── Print ─────────────────────────────────────────────────────────────────
   Screen chrome does not belong on a printed page. */
@media print {
  .nav-btn, .qa-grid, .tab-row { display: none !important; }
  .panel { box-shadow: none !important; border-color: #ccc !important; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .qa-btn, .inv-card, .low-card, .nav-btn, .panel, .tab {
    transition: none !important;
  }
  .btn:hover, .qa-btn:hover, .inv-card:hover { transform: none !important; }
}

/* Glue-injected controls should never appear on a printout. */
@media print {
  #fm-sync-pill, #fm-nav-preorder { display: none !important; }
}