:root {
  --bg-0: #0a0e15;
  --bg-1: #11161f;
  --bg-2: #1a212d;
  --bg-3: #232b3a;
  --fg:   #e8edf5;
  --fg-2: #aab2c2;
  --fg-3: #6f7891;
  --line: #232b3a;
  --line-soft: #1d2533;

  --accent:    #5a8dff;
  --accent-2:  #4070e8;
  --bad:       #ff6b6b;
  --bad-bg:    rgba(255, 107, 107, 0.10);
  --bad-line:  rgba(255, 107, 107, 0.30);
  --warn:      #ffb84d;
  --warn-bg:   rgba(255, 184, 77, 0.10);
  --warn-line: rgba(255, 184, 77, 0.30);
  --ok:        #5cd29a;
  --ok-bg:     rgba(92, 210, 154, 0.10);

  --r: 14px;
  --pad: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background:
    radial-gradient(1000px 500px at 50% -200px, rgba(90, 141, 255, 0.10), transparent 60%),
    var(--bg-0);
  color: var(--fg);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
button { font: inherit; }

/* ---------------- App bar ---------------- */
.app-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 14px) var(--pad) 12px;
  background: rgba(10, 14, 21, 0.85);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: 0.2px; font-size: 16px;
}
.brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #9bc0ff);
  box-shadow: 0 0 12px rgba(90, 141, 255, 0.55);
}
.ghost-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  color: var(--fg-2); border: 1px solid var(--line);
  background: var(--bg-1);
}
.ghost-btn:active { background: var(--bg-2); }

/* ---------------- Container ---------------- */
.container {
  padding: var(--pad);
  padding-bottom: calc(env(safe-area-inset-bottom) + 32px);
  display: grid; gap: 14px;
  max-width: 720px; margin: 0 auto;
}

/* ---------------- Card ---------------- */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.card-warn { border-color: var(--warn-line); }

.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
}
.card-head h2 {
  margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  flex: 1;
}
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg-2); color: var(--fg-2);
  border: 1px solid var(--line);
}
.card-action {
  font-size: 13px; color: var(--accent); font-weight: 500; padding: 4px 0;
}
.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line-soft);
  background: rgba(0,0,0,0.18);
}

.muted { color: var(--fg-2); }
.small { font-size: 12px; }

/* ---------------- Sales metric layout ---------------- */
.metric-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 4px 16px 18px;
}
.metric {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.metric-label {
  font-size: 11px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600;
}
.metric-value {
  font-size: 24px; font-weight: 700; line-height: 1.15;
  margin-top: 4px; letter-spacing: -0.3px;
  font-feature-settings: "tnum" 1;
}
.metric-sub {
  font-size: 12px; color: var(--fg-2); margin-top: 4px;
  font-feature-settings: "tnum" 1;
}

/* ---------------- Count pill ---------------- */
.count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px;
  padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  font-feature-settings: "tnum" 1;
}
.pill-bad  { background: var(--bad-bg);  color: var(--bad);  border: 1px solid var(--bad-line); }
.pill-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }
.pill-ok   { background: var(--ok-bg);   color: var(--ok);   border: 1px solid rgba(92,210,154,0.3); }

/* ---------------- Empty state ---------------- */
.empty-state {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 16px 16px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--fg-2);
  font-size: 14px;
}
.empty-state .check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok);
  font-size: 13px; font-weight: 700;
}

/* ---------------- Row list ---------------- */
.row-list {
  list-style: none; padding: 0; margin: 0;
}
.row-list li + li { border-top: 1px solid var(--line-soft); }
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  color: var(--fg);
  min-height: 56px; /* tap target */
}
.row:active { background: var(--bg-2); }
.row-dot {
  flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 2px;
  align-self: flex-start; transform: translateY(8px);
}
.dot-bad  { background: var(--bad);  box-shadow: 0 0 8px rgba(255,107,107,0.55); }
.dot-warn { background: var(--warn); box-shadow: 0 0 8px rgba(255,184,77,0.55); }
.dot-ok   { background: var(--ok); }

.row-main { flex: 1 1 auto; min-width: 0; }
.row-title {
  font-size: 14px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-sub {
  font-size: 12px; color: var(--fg-2); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-feature-settings: "tnum" 1;
}
.row-chevron {
  flex: 0 0 auto;
  color: var(--fg-3); font-size: 22px; line-height: 1;
}

/* ---------------- Status badges ---------------- */
.badge {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 7px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-right: 6px;
  font-feature-settings: "tnum" 1;
}
.badge-bad  { background: var(--bad-bg);  color: var(--bad);  border: 1px solid var(--bad-line); }
.badge-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }
.badge-ok   { background: var(--ok-bg);   color: var(--ok);   border: 1px solid rgba(92,210,154,0.3); }

/* ---------------- Footer line ---------------- */
.foot-meta {
  text-align: center; margin: 4px 0 0; color: var(--fg-3);
}

/* ---------------- Login (kept, lightly polished) ---------------- */
body.centered {
  display: flex; align-items: center; justify-content: center; padding: var(--pad);
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px;
}
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card label {
  display: block; font-size: 12px; color: var(--fg-3); margin-top: 14px;
  text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600;
}
.login-card input {
  display: block; width: 100%; margin-top: 6px;
  padding: 12px 14px; font-size: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg); border-radius: 10px; outline: none;
}
.login-card input:focus { border-color: var(--accent); }
.login-card button {
  display: block; width: 100%; margin-top: 22px; padding: 14px;
  font-size: 16px; font-weight: 600;
  background: var(--accent); color: white;
  border: 0; border-radius: 10px; cursor: pointer;
}
.login-card button:hover { background: var(--accent-2); }
.login-card button:disabled { opacity: 0.6; cursor: wait; }

.alert {
  margin-top: 12px; padding: 10px 12px;
  background: var(--bad-bg);
  border: 1px solid var(--bad-line);
  color: #ffb3b3; border-radius: 10px; font-size: 14px;
}
.footnote { margin-top: 16px; font-size: 12px; color: var(--fg-3); }

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; padding: 1px 5px;
  background: var(--bg-2); border-radius: 4px;
}

/* ---------------- Bottom tab nav ---------------- */
.has-bottom-nav { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

.tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(10, 14, 21, 0.92);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 4px; min-height: 56px;
  color: var(--fg-3); font-size: 11px; font-weight: 500;
}
.tab.active { color: var(--accent); }
.tab svg { display: block; }
.tab.active svg { stroke-width: 2.2; }

.app-bar-title {
  flex: 1; text-align: center;
  font-size: 16px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-bar-right { min-width: 36px; display: flex; justify-content: flex-end; }
.app-bar > .brand + .app-bar-title { text-align: left; padding-left: 12px; }
.app-bar > .ghost-btn + .app-bar-title { text-align: left; padding-left: 12px; }

.flash {
  margin: 10px var(--pad) 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}
.flash-ok  { background: var(--ok-bg);  color: var(--ok);  border: 1px solid rgba(92,210,154,0.3); }
.flash-err { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-line); }

.search-bar {
  position: relative;
  display: flex; align-items: center;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  margin-bottom: 12px;
}
.search-bar .search-icon { color: var(--fg-3); flex: 0 0 auto; }
.search-bar input {
  flex: 1 1 auto;
  background: transparent; border: 0; outline: none;
  color: var(--fg); font-size: 16px;
  padding: 12px 8px;
  min-width: 0;
}
.search-bar input::placeholder { color: var(--fg-3); }
.search-bar .search-clear {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-3); color: var(--fg-2);
  font-size: 16px; line-height: 1;
}
.search-bar-prominent { padding: 4px 12px; }
.hint { padding: 0 var(--pad); }
.result-count { padding: 0 var(--pad) 8px; }

.filter-pills {
  display: flex; gap: 8px;
  margin: 0 calc(-1 * var(--pad)) 12px;
  padding: 0 var(--pad) 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.filter-pills::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
}
.pill.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.status-tag {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
}
.tag-bad     { background: var(--bad-bg);  color: var(--bad);  border: 1px solid var(--bad-line); }
.tag-warn    { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }
.tag-ok      { background: var(--ok-bg);   color: var(--ok);   border: 1px solid rgba(92,210,154,0.3); }
.tag-neutral { background: var(--bg-2);    color: var(--fg-2); border: 1px solid var(--line); }
.big-tag { height: 26px; padding: 0 12px; font-size: 13px; }

.order-summary { padding: 16px; }
.order-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.uppercase { text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; }
.big-number {
  font-size: 26px; font-weight: 700; letter-spacing: -0.3px;
  font-feature-settings: "tnum" 1;
}

.kv-grid {
  display: grid; grid-template-columns: minmax(110px, max-content) 1fr;
  row-gap: 8px; column-gap: 14px; margin: 0;
  font-size: 14px;
}
.kv-grid dt { color: var(--fg-3); }
.kv-grid dd { margin: 0; color: var(--fg); font-feature-settings: "tnum" 1; }
.kv-grid dt.strong, .kv-grid dd.strong { color: var(--fg); font-weight: 600; }
.text-warn { color: var(--warn); }
.totals-grid {
  border-top: 1px solid var(--line-soft);
  padding: 12px 16px 14px;
  margin: 8px -16px -14px;
}

.customer-block { padding: 0 16px 16px; }
.customer-name { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.customer-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 16px;
  color: var(--accent);
  font-size: 14px;
  padding: 8px 0;
}

.addr-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 0 16px 16px;
}
@media (max-width: 480px) {
  .addr-grid { grid-template-columns: 1fr; }
}
.addr-col {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}
.addr-label {
  font-size: 11px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
  margin-bottom: 6px;
}
.addr-block { font-size: 14px; line-height: 1.5; }

.row-amount {
  margin-left: 12px;
  font-size: 14px; font-weight: 600;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.action-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 14px 0 4px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 18px;
  border-radius: 12px;
  font-size: 15px; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
}
.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-primary:active { background: var(--accent-2); }
.btn-warn    { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.btn-danger  { background: var(--bad);  color: white; border-color: var(--bad); }
.btn-danger:active { filter: brightness(0.92); }
.btn-ghost   { background: var(--bg-1); color: var(--fg-2); border-color: var(--line); }
.btn-ghost:active { background: var(--bg-2); }
.btn-ghost.disabled { opacity: 0.4; pointer-events: none; }

.open-admin-link {
  display: block; text-align: center; padding: 14px;
  margin-top: 8px;
  color: var(--fg-3); font-size: 13px;
}

.form { display: grid; gap: 14px; }
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 0 16px 16px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-field.span-full { grid-column: 1 / -1; }
.form-label {
  font-size: 11px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.form-input {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
  width: 100%;
}
.form-input:focus { border-color: var(--accent); }

.input-prefix { position: relative; }
.input-prefix .prefix {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--fg-3); font-size: 16px; pointer-events: none;
}
.input-prefix .form-input { padding-left: 26px; }

.checkbox-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px; line-height: 1.4;
  cursor: pointer;
}
.checkbox-row input[type=checkbox] {
  margin-top: 3px; flex: 0 0 auto;
  width: 18px; height: 18px;
  accent-color: var(--accent);
}

.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 0 4px;
}

.flat-card { padding: 0; overflow: hidden; }
.full-empty { margin: 24px 0; padding: 24px; text-align: center; justify-content: center; }

/* --- 8-tab bottom nav (was 6; +Support +Records) --- */
.tab-bar { grid-template-columns: repeat(8, 1fr); }
.tab { padding: 8px 2px; font-size: 10px; }
.tab span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Search results header --- */
.search-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
}
.search-back {
  font-size: 13px;
  color: var(--accent);
  white-space: nowrap;
}

/* --- Sort row (inventory) --- */
.sort-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  padding: 0 4px;
}
.sort-label {
  font-size: 11px; color: var(--fg-3); text-transform: uppercase;
  letter-spacing: 0.6px; font-weight: 600;
}
.sort-select {
  flex: 1 1 auto;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
}

/* --- Inventory product card (collapsible) --- */
.prod-card {
  padding: 0;
}
.prod-card > summary {
  list-style: none;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.prod-card > summary::-webkit-details-marker { display: none; }
.prod-card[open] > summary {
  border-bottom: 1px solid var(--line-soft);
}
.prod-summary-main {
  flex: 1 1 auto; min-width: 0;
}
.prod-title {
  font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-sub { margin-top: 2px; }
.prod-stock {
  text-align: right;
  font-size: 22px; font-weight: 700;
  font-feature-settings: "tnum" 1;
  line-height: 1;
}
.prod-stock.oos { color: var(--bad); }
.prod-stock-label {
  display: block; font-size: 10px;
  color: var(--fg-3); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-top: 2px;
}
.disclosure-arrow {
  color: var(--fg-3); font-size: 22px;
  margin-left: 4px;
  transition: transform 0.15s ease-out;
}
.prod-card[open] .disclosure-arrow { transform: rotate(90deg); }

/* --- Variant rows --- */
.variant-list {
  list-style: none; padding: 0; margin: 0;
}
.variant-list li + li {
  border-top: 1px solid var(--line-soft);
}
.variant-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
}
.variant-info { flex: 1 1 auto; min-width: 0; }
.variant-title {
  font-size: 14px; font-weight: 600;
}
.variant-sub {
  font-size: 13px; color: var(--fg-2); margin-top: 2px;
  font-feature-settings: "tnum" 1;
}
.variant-stock-block {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
}
.variant-stock-num {
  font-size: 18px; font-weight: 700;
  font-feature-settings: "tnum" 1;
  min-width: 36px; text-align: right;
}
.variant-stock-num.oos {
  color: var(--bad); font-size: 12px; font-weight: 700;
}
.po-line {
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent);
  font-feature-settings: "tnum" 1;
}

/* --- Mini button for in-row edit --- */
.btn-tiny {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 12px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--fg-2);
  border: 1px solid var(--line);
  font-size: 13px; font-weight: 500;
}
.btn-tiny:active { background: var(--bg-3); }

/* --- Misc helpers --- */
.strike { text-decoration: line-through; }
.badge-info {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 7px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase;
  background: rgba(90, 141, 255, 0.10);
  color: var(--accent);
  border: 1px solid rgba(90, 141, 255, 0.30);
}
.form-hint {
  font-size: 12px; color: var(--fg-3); margin-top: 4px;
}

/* === Click / press feedback layer (added 2026-06-18) ============= */
/* Instant press feedback on every control (:active + JS .is-pressed),
   per-element navigation "loading" state (.is-loading), and a global
   top progress bar (#dash-progress). Honors prefers-reduced-motion. */
:root {
  --fb-teal:      #268A8E;
  --fb-teal-deep: #0E5067;
  --fb-gold:      #C9A227;
  --fb-press:     0.97;
}

a[href], button, .btn, .tab, .pill, .row, .ghost-btn, .btn-tiny,
.card-action, .customer-link, .search-clear, .open-admin-link,
.prod-card > summary, [role="button"], input[type="submit"] {
  transition: transform 130ms cubic-bezier(.2,.7,.3,1),
              background-color 120ms ease, color 120ms ease,
              box-shadow 120ms ease, filter 120ms ease;
  touch-action: manipulation;
}

/* Pressed: scale down + a teal-tinted inset overlay (works on any bg). */
a[href]:active, button:active, .btn:active, .tab:active, .pill:active,
.row:active, .ghost-btn:active, .btn-tiny:active, .card-action:active,
.customer-link:active, .search-clear:active, .open-admin-link:active,
.prod-card > summary:active, [role="button"]:active, input[type="submit"]:active,
.is-pressed {
  transform: scale(var(--fb-press));
  box-shadow: inset 0 0 0 999px rgba(38, 138, 142, 0.12);
}

/* Plain link-style controls also shift toward teal on press. */
a[href]:not(.btn):not(.row):not(.tab):active,
a[href]:not(.btn):not(.row):not(.tab).is-pressed { color: var(--fb-teal); }

/* Navigation / submit pending state: dim the control + inline spinner,
   held until the next page renders (cleared on pageshow). */
.is-loading { position: relative; opacity: 0.72; pointer-events: none; }
.is-loading::after {
  content: ""; position: absolute; top: 50%; right: 12px;
  width: 14px; height: 14px; margin-top: -7px;
  border: 2px solid rgba(255, 255, 255, 0.30);
  border-top-color: var(--fb-teal);
  border-radius: 50%;
  animation: dash-spin 0.6s linear infinite;
}
.tab.is-loading::after { right: 50%; top: 7px; margin-top: 0; margin-right: -7px; }
@keyframes dash-spin { to { transform: rotate(360deg); } }

/* Global top progress bar shown during navigation. */
#dash-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999;
  background: linear-gradient(90deg, var(--fb-teal-deep), var(--fb-teal) 55%, var(--fb-gold));
  box-shadow: 0 0 10px rgba(38, 138, 142, 0.70);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: width 200ms ease, opacity 250ms ease;
  pointer-events: none;
}
#dash-progress.active { opacity: 1; }

/* Accessibility: reduced motion drops the scale + spinner; keeps dim,
   tint and the (fading) top bar so feedback is still present. */
@media (prefers-reduced-motion: reduce) {
  a[href]:active, button:active, .btn:active, .tab:active, .pill:active,
  .row:active, .ghost-btn:active, .btn-tiny:active, .card-action:active,
  .customer-link:active, .search-clear:active, .open-admin-link:active,
  .prod-card > summary:active, [role="button"]:active,
  input[type="submit"]:active, .is-pressed { transform: none; }
  .is-loading::after { display: none; }
  #dash-progress { transition: opacity 250ms ease; }
}
/* === end click / press feedback layer ============================ */

/* --- Bottom-nav tabs: clear press + loading feedback (added 2026-06-18b) --- */
/* Nav tabs are small and dim by default, so the generic dim + small-spinner
   cue read as "no feedback". On navigation the tapped tab now lights up teal,
   stays at full opacity, gets a teal wash, and swaps its icon for a spinner. */
.tab.is-loading {
  opacity: 1;
  color: var(--fb-teal);
  background: rgba(38, 138, 142, 0.12);
}
.tab.is-loading svg { opacity: 0; }
.tab.is-loading::after {
  top: 8px; left: 50%; right: auto;
  margin-left: -9px; margin-top: 0; margin-right: 0;
  width: 18px; height: 18px;
  border-color: rgba(38, 138, 142, 0.30);
  border-top-color: var(--fb-teal);
}
/* Make the instant press on a nav tab unmistakable too. */
.tab:active, .tab.is-pressed {
  color: var(--fb-teal);
  background: rgba(38, 138, 142, 0.16);
}
@media (prefers-reduced-motion: reduce) {
  /* No spinner under reduced motion: keep the icon + the teal highlight. */
  .tab.is-loading svg { opacity: 1; }
}
/* --- end bottom-nav tab feedback --- */