/* ----------------------------------------------------------------
   Mou Stock — custom overlay on top of Tailwind Play CDN
   Keep this small. Anything Tailwind can express belongs in markup.
---------------------------------------------------------------- */

:root {
  color-scheme: light dark;
}

[x-cloak] { display: none !important; }

html, body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Tabular numbers helper for tables */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ---- Sidebar nav links ---- */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: rgb(82 82 91);                 /* zinc-500 */
  font-weight: 500;
  transition: background-color .15s, color .15s;
}
.nav-link:hover {
  background-color: rgb(244 244 245);   /* zinc-100 */
  color: rgb(24 24 27);                 /* zinc-900 */
}
.dark .nav-link {
  color: rgb(161 161 170);              /* zinc-400 */
}
.dark .nav-link:hover {
  background-color: rgb(39 39 42);      /* zinc-800 */
  color: rgb(244 244 245);              /* zinc-100 */
}
.nav-link-active {
  background-color: rgb(238 242 255);   /* brand-50 */
  color: rgb(67 56 202);                /* brand-700 */
}
.nav-link-active:hover {
  background-color: rgb(224 231 255);   /* brand-100 */
  color: rgb(67 56 202);
}
.dark .nav-link-active {
  background-color: rgb(49 46 129 / 0.4);   /* brand-900/40 */
  color: rgb(165 180 252);                  /* brand-300 */
}
.dark .nav-link-active:hover {
  background-color: rgb(49 46 129 / 0.6);
  color: rgb(199 210 254);
}

/* ---- Status badges ---- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
}
.status-badge::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.85;
}
.status-in {
  background: rgb(236 253 245);    /* emerald-50 */
  color: rgb(4 120 87);            /* emerald-700 */
  box-shadow: inset 0 0 0 1px rgb(167 243 208 / .6);
}
.dark .status-in {
  background: rgb(6 78 59 / .35);
  color: rgb(110 231 183);
  box-shadow: inset 0 0 0 1px rgb(6 95 70 / .6);
}
.status-out {
  background: rgb(255 241 242);    /* rose-50 */
  color: rgb(190 18 60);           /* rose-700 */
  box-shadow: inset 0 0 0 1px rgb(254 205 211 / .6);
}
.dark .status-out {
  background: rgb(136 19 55 / .35);
  color: rgb(253 164 175);
  box-shadow: inset 0 0 0 1px rgb(159 18 57 / .6);
}
.status-removed {
  background: rgb(244 244 245);    /* zinc-100 */
  color: rgb(82 82 91);            /* zinc-500 */
  box-shadow: inset 0 0 0 1px rgb(228 228 231 / .8);
}
.dark .status-removed {
  background: rgb(39 39 42 / .8);
  color: rgb(161 161 170);
  box-shadow: inset 0 0 0 1px rgb(63 63 70 / .8);
}

/* ---- Tabs (dashboard chart panel) ---- */
.tab {
  position: relative;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(113 113 122);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.tab:hover { color: rgb(39 39 42); }
.dark .tab { color: rgb(161 161 170); }
.dark .tab:hover { color: rgb(244 244 245); }
.tab-active {
  color: rgb(79 70 229);
  border-bottom-color: rgb(79 70 229);
}
.dark .tab-active {
  color: rgb(165 180 252);
  border-bottom-color: rgb(129 140 248);
}

/* ---- Forms ---- */
.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(63 63 70);
  margin-bottom: 0.375rem;
}
.dark .form-label { color: rgb(212 212 216); }

.form-input {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0.5rem;
  background: white;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  color: rgb(24 24 27);
  box-shadow: inset 0 0 0 1px rgb(212 212 216);   /* zinc-300 */
  transition: box-shadow .15s;
}
.form-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgb(79 70 229);     /* brand-600 */
}
.form-input::placeholder { color: rgb(161 161 170); }
.dark .form-input {
  background: rgb(9 9 11);
  color: rgb(244 244 245);
  box-shadow: inset 0 0 0 1px rgb(63 63 70);      /* zinc-700 */
}
.dark .form-input:focus {
  box-shadow: inset 0 0 0 2px rgb(129 140 248);   /* brand-400 */
}

.form-error {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: rgb(225 29 72);
}

/* ---- Buttons ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: rgb(79 70 229);
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  transition: background-color .15s, transform .05s;
}
.btn-primary:hover { background: rgb(67 56 202); }
.btn-primary:active { background: rgb(55 48 163); transform: translateY(1px); }
.btn-primary:focus-visible {
  outline: 2px solid rgb(79 70 229);
  outline-offset: 2px;
}

.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(63 63 70);
  background: transparent;
  transition: background-color .15s;
}
.btn-ghost-sm:hover { background: rgb(244 244 245); }
.dark .btn-ghost-sm { color: rgb(212 212 216); }
.dark .btn-ghost-sm:hover { background: rgb(39 39 42); }

/* ---- Loader (HTMX indicator spinner) ---- */
.htmx-indicator {
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request {
  opacity: 1;
  pointer-events: auto;
}

.loader {
  width: 28px;
  height: 28px;
  border: 2.5px solid rgb(228 228 231);
  border-top-color: rgb(79 70 229);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.dark .loader {
  border-color: rgb(63 63 70);
  border-top-color: rgb(129 140 248);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Scrollbar polish ---- */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb {
    background: rgb(212 212 216);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgb(161 161 170); background-clip: padding-box; border: 2px solid transparent; }
  .dark ::-webkit-scrollbar-thumb { background: rgb(63 63 70); background-clip: padding-box; border: 2px solid transparent; }
  .dark ::-webkit-scrollbar-thumb:hover { background: rgb(82 82 91); background-clip: padding-box; border: 2px solid transparent; }
}

/* ---- Print ---- */
@media print {
  aside, header, footer, .htmx-indicator { display: none !important; }
  main { padding: 0 !important; }
}

/* ----------------------------------------------------------------
   Wave 4 — region pills, mini-grid dots, asymmetric matrix tint
---------------------------------------------------------------- */

/* Region pill colour scheme — one class per region, used app-wide */
.region-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.region-pill-us {
  background: rgb(238 242 255);   /* indigo-50 */
  color: rgb(67 56 202);          /* indigo-700 */
  box-shadow: inset 0 0 0 1px rgb(199 210 254 / .6);
}
.dark .region-pill-us {
  background: rgb(49 46 129 / .35);
  color: rgb(165 180 252);
  box-shadow: inset 0 0 0 1px rgb(67 56 202 / .55);
}
.region-pill-uk {
  background: rgb(236 253 245);   /* emerald-50 */
  color: rgb(4 120 87);           /* emerald-700 */
  box-shadow: inset 0 0 0 1px rgb(167 243 208 / .6);
}
.dark .region-pill-uk {
  background: rgb(6 78 59 / .35);
  color: rgb(110 231 183);
  box-shadow: inset 0 0 0 1px rgb(6 95 70 / .55);
}
.region-pill-it {
  background: rgb(255 241 242);   /* rose-50 */
  color: rgb(190 18 60);          /* rose-700 */
  box-shadow: inset 0 0 0 1px rgb(254 205 211 / .6);
}
.dark .region-pill-it {
  background: rgb(136 19 55 / .35);
  color: rgb(253 164 175);
  box-shadow: inset 0 0 0 1px rgb(159 18 57 / .55);
}
.region-pill-ot {
  background: rgb(255 251 235);   /* amber-50 */
  color: rgb(180 83 9);           /* amber-700 */
  box-shadow: inset 0 0 0 1px rgb(253 230 138 / .6);
}
.dark .region-pill-ot {
  background: rgb(120 53 15 / .35);
  color: rgb(252 211 77);
  box-shadow: inset 0 0 0 1px rgb(146 64 14 / .55);
}

/* Region mini-grid dots (F4) */
.region-dot {
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 9999px;
  position: relative;
}
.region-dot-in    { background: rgb(16 185 129); }   /* emerald-500 */
.region-dot-out   { background: rgb(244 63 94); }    /* rose-500 */
.region-dot-none  {
  background: rgb(228 228 231);                      /* zinc-200 */
  box-shadow: inset 0 0 0 1px rgb(212 212 216);
  position: relative;
  overflow: hidden;
}
.dark .region-dot-none {
  background: rgb(63 63 70);
  box-shadow: inset 0 0 0 1px rgb(82 82 91);
}
.region-dot-none::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent 45%,
    rgb(113 113 122) 45%,
    rgb(113 113 122) 55%,
    transparent 55%
  );
}
.dark .region-dot-none::after {
  background: linear-gradient(
    to top right,
    transparent 45%,
    rgb(161 161 170) 45%,
    rgb(161 161 170) 55%,
    transparent 55%
  );
}

/* Region dot highlighted (the currently selected region) */
.region-dot-highlight {
  outline: 2px solid rgb(79 70 229);    /* brand-600 */
  outline-offset: 1px;
}
.dark .region-dot-highlight {
  outline-color: rgb(129 140 248);      /* brand-400 */
}

/* Asymmetric matrix-row amber tint (F1) */
.matrix-row-asymmetric {
  background-color: rgb(255 251 235 / .55);  /* amber-50/55 */
}
.dark .matrix-row-asymmetric {
  background-color: rgb(120 53 15 / .18);
}
.matrix-row-asymmetric:hover {
  background-color: rgb(254 243 199 / .65); /* amber-100/65 */
}
.dark .matrix-row-asymmetric:hover {
  background-color: rgb(120 53 15 / .28);
}

/* Freshness pill — region scoreboard (F7) */
.freshness-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1rem;
  white-space: nowrap;
}
.freshness-fresh {
  background: rgb(236 253 245);
  color: rgb(4 120 87);
  box-shadow: inset 0 0 0 1px rgb(167 243 208 / .6);
}
.dark .freshness-fresh {
  background: rgb(6 78 59 / .35);
  color: rgb(110 231 183);
}
.freshness-warn {
  background: rgb(255 251 235);
  color: rgb(180 83 9);
  box-shadow: inset 0 0 0 1px rgb(253 230 138 / .6);
}
.dark .freshness-warn {
  background: rgb(120 53 15 / .35);
  color: rgb(252 211 77);
}
.freshness-stale {
  background: rgb(255 241 242);
  color: rgb(190 18 60);
  box-shadow: inset 0 0 0 1px rgb(254 205 211 / .6);
}
.dark .freshness-stale {
  background: rgb(136 19 55 / .35);
  color: rgb(253 164 175);
}

/* Inline price-delta indicator (F9) */
.price-delta {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  padding: 0 0.3125rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  background: rgb(244 244 245);
  color: rgb(82 82 91);
  cursor: help;
}
.dark .price-delta {
  background: rgb(39 39 42);
  color: rgb(212 212 216);
}