/*
 * Aska — platform design system ported to Heera ASP.NET.
 * Source of truth: aska-platform/web/src/styles/index.css
 *
 * Loaded site-wide by _AskaLayout.cshtml. Contains:
 *   - CSS custom properties (color/radius/shadow tokens)
 *   - Component classes (.btn-*, .card, .pill, .chip, .diamond-*, etc.)
 *   - Animations + reveal-on-scroll + thinking shimmer
 *   - prefers-reduced-motion overrides
 *
 * Tailwind CDN is also loaded by the layout for utility-class layout
 * (flex / grid / spacing). The custom classes below are the platform-
 * specific component primitives Tailwind doesn't ship.
 */

/* ─── Design tokens ────────────────────────────────────────────── */

:root {
  --aska-primary: #1a4f8c;
  --aska-primary-hover: #163f73;
  --aska-primary-active: #11335f;
  --aska-navy: #0c1f3a;
  --aska-page: #f5f8fd;           /* nudged 2pt bluer than #f7f9fc */
  --aska-page-tint: #eaf1fb;      /* secondary blue wash for stat tiles + banners */
  --aska-border: #dce5f2;         /* bluer border (was #e8edf5) */
  --aska-muted: #4a6584;          /* more blue, less grey */
  --aska-soft: #6c83a0;           /* same */
  --aska-success: #15803d;
  --aska-danger: #b91c1c;
  --aska-warn: #a16207;
  --aska-accent: #2563eb;         /* brighter blue for AI / accent gradients (replaces indigo #6366f1) */
  --aska-accent-cyan: #0ea5e9;    /* cool secondary for gradients (replaces cyan #06b6d4) */
  --aska-shadow-card: 0 1px 2px rgba(26, 79, 140, 0.05), 0 4px 12px rgba(26, 79, 140, 0.06);
  --aska-shadow-soft: 0 4px 24px rgba(26, 79, 140, 0.08);
}

/* ─── Reset + base ─────────────────────────────────────────────── */

html, body {
  font-family: "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01", "cv11";
  color: var(--aska-navy);
  background-color: var(--aska-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

* { box-sizing: border-box; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

button { font-family: inherit; }

/* Common Heera-side classes that fight us — disarm them */
.btn { all: unset; }   /* Bootstrap reset */
.form-control:focus { box-shadow: none; }

/* ─── Buttons ──────────────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1.5rem;
  border-radius: 9999px;
  background-color: var(--aska-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: var(--aska-shadow-card);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color 200ms ease;
  text-decoration: none;
}
.btn-primary:hover { background-color: var(--aska-primary-hover); color: #fff; }
.btn-primary:active { background-color: var(--aska-primary-active); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.18) 55%, transparent 100%);
  transform: translateX(-120%);
  transition: transform 600ms ease;
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1.5rem;
  border-radius: 9999px;
  background-color: #fff;
  color: var(--aska-primary);
  font-weight: 600;
  font-size: 0.875rem;
  border: 1px solid rgba(26, 79, 140, 0.2);
  cursor: pointer;
  transition: background-color 200ms ease;
  text-decoration: none;
}
.btn-secondary:hover { background-color: rgba(26, 79, 140, 0.05); color: var(--aska-primary); }
.btn-secondary:active { background-color: rgba(26, 79, 140, 0.1); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 9999px;
  background-color: transparent;
  color: var(--aska-soft);
  border: none;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 200ms ease, background-color 200ms ease;
  text-decoration: none;
}
.btn-ghost:hover { color: var(--aska-navy); background-color: var(--aska-page); }
.btn-ghost.is-active { color: var(--aska-navy); background-color: var(--aska-page); }

/* ─── Form inputs ──────────────────────────────────────────────── */

.input {
  height: 3rem;
  width: 100%;
  border-radius: 9999px;
  border: 1px solid var(--aska-border);
  background-color: #fff;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  color: var(--aska-navy);
  transition: border-color 200ms ease;
}
.input::placeholder { color: var(--aska-soft); }
.input:focus { outline: none; border-color: rgba(26, 79, 140, 0.6); }

.input-area {
  min-height: 88px;
  width: 100%;
  border-radius: 1rem;
  border: 1px solid var(--aska-border);
  background-color: #fff;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--aska-navy);
  resize: vertical;
  transition: border-color 200ms ease;
}
.input-area::placeholder { color: var(--aska-soft); }
.input-area:focus { outline: none; border-color: rgba(26, 79, 140, 0.6); }

/* ─── Cards / Pills / Chips ────────────────────────────────────── */

.card {
  border-radius: 0.875rem;
  background-color: #fff;
  box-shadow: var(--aska-shadow-card);
  border: 1px solid rgba(232, 237, 245, 0.6);
  padding: 1rem;
}

.card-hover {
  border-radius: 0.875rem;
  background-color: #fff;
  box-shadow: var(--aska-shadow-card);
  border: 1px solid rgba(232, 237, 245, 0.6);
  padding: 1rem;
  transition: transform 300ms ease, box-shadow 300ms ease;
  cursor: pointer;
}
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--aska-shadow-soft); }

/* 2026-05-12 — Cart sold-out grace styles.
 *
 * Triggered when AdminController.CartStockList returns SoldOut=true for
 * a cart row. The row stays visible (24h grace) but renders struck-through
 * with a red "Sold out" pill so the buyer immediately sees the stone was
 * taken by another buyer. After 24h, the server-side deletes the row on
 * the next list call. */
.cart-row--sold-out {
  text-decoration: line-through;
  opacity: 0.55;
  position: relative;
}
.cart-row--sold-out:hover { transform: none; box-shadow: var(--aska-shadow-card); cursor: default; }
.sold-out-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(185, 28, 28, 0.10);
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, 0.20);
  border-radius: 9999px;
  padding: 2px 10px;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none; /* don't strike the pill itself */
  white-space: nowrap;
  vertical-align: middle;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  background-color: #fff;
  border: 1px solid var(--aska-border);
  padding: 0 0.75rem;
  height: 2rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--aska-navy);
  cursor: pointer;
  transition: background-color 200ms ease;
  text-decoration: none;
}
.pill:hover { background-color: var(--aska-page); color: var(--aska-navy); }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 2.25rem;
  height: 2rem;
  border-radius: 9999px;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--aska-border);
  background-color: #fff;
  color: var(--aska-navy);
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.chip:hover { border-color: rgba(26, 79, 140, 0.35); transform: translateY(-1px); }
.chip.active, .chip[aria-pressed="true"] {
  background-color: var(--aska-primary);
  color: #fff;
  border-color: var(--aska-primary);
  box-shadow: 0 2px 8px rgba(26, 79, 140, 0.18);
}

/* ── Fancy color chips — pastel, professional ─────────────────
   Each chip is a soft tinted pill with a small saturated dot at
   the left. Active state lifts the tint to a richer hue (still
   pastel — never the saturated CSS-named yellow/orange/etc the
   legacy site used) and bumps the dot's ring + scale. */
.chip-fancy {
  padding: 0 0.625rem 0 0.5rem;
  background-color: #fff;
  color: var(--aska-navy);
  border-color: var(--aska-border);
}
.chip-fancy__dot {
  width: 10px; height: 10px;
  border-radius: 9999px;
  background-color: var(--chip-fancy-dot, var(--aska-primary));
  box-shadow: 0 0 0 2px var(--chip-fancy-ring, rgba(0,0,0,0.06));
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.chip-fancy:hover { background-color: var(--chip-fancy-tint, var(--aska-page)); border-color: rgba(26,79,140,0.25); }
.chip-fancy.active, .chip-fancy[aria-pressed="true"] {
  background-color: var(--chip-fancy-tint, rgba(26, 79, 140, 0.08));
  border-color: var(--chip-fancy-dot, var(--aska-primary));
  color: var(--aska-navy);
  box-shadow: 0 2px 8px var(--chip-fancy-shadow, rgba(26, 79, 140, 0.12));
}
.chip-fancy.active .chip-fancy__dot,
.chip-fancy[aria-pressed="true"] .chip-fancy__dot {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px var(--chip-fancy-ring, rgba(0,0,0,0.08));
}

/* Per-color pastel tokens. Pairs a saturated dot (-dot) with a soft
   background tint (-tint), so the chip reads as "this is yellow"
   without slapping a fluorescent rectangle in the user's face. */
.chip-fancy--yellow { --chip-fancy-dot: #f5b800; --chip-fancy-tint: #fff8db; --chip-fancy-ring: rgba(245,184,0,0.18); --chip-fancy-shadow: rgba(245,184,0,0.18); }
.chip-fancy--orange { --chip-fancy-dot: #ed7a3a; --chip-fancy-tint: #fdecdf; --chip-fancy-ring: rgba(237,122,58,0.18); --chip-fancy-shadow: rgba(237,122,58,0.18); }
.chip-fancy--pink   { --chip-fancy-dot: #e36a9c; --chip-fancy-tint: #fde6ee; --chip-fancy-ring: rgba(227,106,156,0.18); --chip-fancy-shadow: rgba(227,106,156,0.18); }
.chip-fancy--blue   { --chip-fancy-dot: #4a78c8; --chip-fancy-tint: #e3ecf9; --chip-fancy-ring: rgba(74,120,200,0.18); --chip-fancy-shadow: rgba(74,120,200,0.18); }
.chip-fancy--green  { --chip-fancy-dot: #5ba37a; --chip-fancy-tint: #e3f1e9; --chip-fancy-ring: rgba(91,163,122,0.18); --chip-fancy-shadow: rgba(91,163,122,0.18); }
.chip-fancy--brown  { --chip-fancy-dot: #8a6244; --chip-fancy-tint: #efe6dd; --chip-fancy-ring: rgba(138,98,68,0.18); --chip-fancy-shadow: rgba(138,98,68,0.18); }
.chip-fancy--red    { --chip-fancy-dot: #c84b4b; --chip-fancy-tint: #fbe1e1; --chip-fancy-ring: rgba(200,75,75,0.18); --chip-fancy-shadow: rgba(200,75,75,0.18); }
.chip-fancy--violet { --chip-fancy-dot: #9070c8; --chip-fancy-tint: #ece4f8; --chip-fancy-ring: rgba(144,112,200,0.18); --chip-fancy-shadow: rgba(144,112,200,0.18); }
.chip-fancy--purple { --chip-fancy-dot: #6e4ba8; --chip-fancy-tint: #eae0f6; --chip-fancy-ring: rgba(110,75,168,0.18); --chip-fancy-shadow: rgba(110,75,168,0.18); }
.chip-fancy--gray   { --chip-fancy-dot: #7d8794; --chip-fancy-tint: #ecedef; --chip-fancy-ring: rgba(125,135,148,0.18); --chip-fancy-shadow: rgba(125,135,148,0.18); }
.chip-fancy--olive  { --chip-fancy-dot: #8a8a3d; --chip-fancy-tint: #efefd9; --chip-fancy-ring: rgba(138,138,61,0.18); --chip-fancy-shadow: rgba(138,138,61,0.18); }
.chip-fancy--black  { --chip-fancy-dot: #2f3640; --chip-fancy-tint: #e6e8eb; --chip-fancy-ring: rgba(47,54,64,0.18); --chip-fancy-shadow: rgba(47,54,64,0.18); }

/* White / Fancy tab toggle inside the Color filter group */
.aska-color-tabs {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  padding: 2px;
  border-radius: 9999px;
  background-color: var(--aska-page);
  border: 1px solid var(--aska-border);
}
.aska-color-tabs__knob {
  position: absolute;
  top: 2px; bottom: 2px; left: 2px;
  width: calc(50% - 2px);
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(12, 31, 58, 0.08);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.aska-color-tabs[data-mode="fancy"] .aska-color-tabs__knob { transform: translateX(100%); }
.aska-color-tabs > button {
  position: relative; z-index: 1;
  border: none; background: transparent; cursor: pointer;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aska-soft);
  padding: 0 0.625rem; height: 22px; min-width: 46px;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.aska-color-tabs > button.is-active { color: var(--aska-primary); }

[data-aska-color-pane].is-hidden { display: none; }

/* ─── Diamond card (vertical grid) ─────────────────────────────── */

.diamond-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border-radius: 0.875rem;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid rgba(232, 237, 245, 0.6);
  box-shadow: var(--aska-shadow-card);
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
  text-decoration: none;
  color: var(--aska-navy);
}
.diamond-card:hover { box-shadow: var(--aska-shadow-soft); transform: translateY(-2px); }
.diamond-card:active { transform: scale(0.99); }

.diamond-card__image {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  background: linear-gradient(to bottom right, #eef3fa, #dde6f3);
}
.diamond-card__image img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.diamond-card__badge {
  position: absolute; top: 0.5rem; left: 0.5rem;
  border-radius: 0.375rem;
  background: linear-gradient(to right, var(--aska-primary), #2a6cb8);
  padding: 0.125rem 0.5rem;
  font-size: 10px; font-weight: 700; color: #fff;
}
.diamond-card__360 {
  position: absolute; bottom: 0.5rem; right: 0.5rem;
  display: inline-flex; align-items: center; gap: 0.25rem;
  border-radius: 9999px;
  background-color: rgba(255,255,255,0.95);
  padding: 0.25rem 0.5rem;
  font-size: 10px; font-weight: 700; color: var(--aska-navy);
  backdrop-filter: blur(4px);
}
.diamond-card__content { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; }
.diamond-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.diamond-card__id { font-size: 0.875rem; font-weight: 600; color: var(--aska-navy); }
.diamond-card__lab {
  flex-shrink: 0;
  border-radius: 0.25rem; border: 1px solid var(--aska-border);
  background-color: var(--aska-page);
  padding: 0 0.375rem;
  font-size: 9px; font-weight: 600; color: var(--aska-primary);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.diamond-card__specs { font-size: 0.75rem; color: var(--aska-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diamond-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.375rem; }
.diamond-card__price-primary { font-size: 1rem; font-weight: 700; color: var(--aska-navy); line-height: 1; }
.diamond-card__price-secondary { font-size: 10px; color: var(--aska-soft); }
.diamond-card__add-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 9999px;
  border: none;
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  background-color: var(--aska-primary);
  color: #fff;
  transition: background-color 200ms ease;
}
.diamond-card__add-btn:hover { background-color: var(--aska-primary-hover); }
.diamond-card__add-btn.in-cart { background-color: rgba(21, 128, 61, 0.1); color: var(--aska-success); }

/* ─── Diamond row (compact) ────────────────────────────────────── */

.diamond-row {
  display: flex; align-items: center; gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--aska-border);
  background-color: #fff;
  padding: 0.625rem;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 200ms ease;
}
.diamond-row:hover { box-shadow: var(--aska-shadow-card); }
.diamond-row__image {
  position: relative; width: 3rem; height: 3rem; flex-shrink: 0;
  overflow: hidden; border-radius: 0.375rem;
  background: linear-gradient(to bottom right, #eef3fa, #dde6f3);
}
.diamond-row__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.diamond-row__content { flex: 1; min-width: 0; }
.diamond-row__id { font-size: 13px; font-weight: 600; color: var(--aska-navy); line-height: 1.2; }
.diamond-row__specs { font-size: 11.5px; color: var(--aska-muted); line-height: 1.2; }
.diamond-row__price { flex-shrink: 0; text-align: right; font-size: 14px; font-weight: 700; color: var(--aska-navy); line-height: 1.2; }

/* ─── About page: photo strip + Mumbai / NY split ─────────────── */

.aska-about-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
}
.aska-about-strip figure {
  position: relative;
  margin: 0;
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(180deg, #eef3fa, #dde6f3);
  aspect-ratio: 4 / 3;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: var(--aska-shadow-card);
}
.aska-about-strip figure:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(12, 31, 58, 0.10);
}
.aska-about-strip img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.aska-about-strip figcaption {
  position: absolute;
  left: 0.75rem; bottom: 0.75rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(12, 31, 58, 0.55);
  backdrop-filter: blur(6px);
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
}
@media (max-width: 640px) {
  .aska-about-strip { grid-template-columns: 1fr; gap: 0.75rem; }
  .aska-about-strip figure { aspect-ratio: 16 / 10; }
}

.aska-about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.aska-about-split__cell {
  background: #fff;
  border: 1px solid var(--aska-border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--aska-shadow-card);
  display: flex;
  flex-direction: column;
}
.aska-about-split__photo {
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #eef3fa, #dde6f3);
  overflow: hidden;
}
.aska-about-split__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 6s cubic-bezier(0.22, 1, 0.36, 1);
}
.aska-about-split__cell:hover .aska-about-split__photo img {
  transform: scale(1.04);
}
.aska-about-split__text {
  padding: 1.125rem 1.25rem 1.25rem;
}
.aska-about-split__text h3 {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--aska-navy);
}
.aska-about-split__text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--aska-muted);
}
@media (max-width: 640px) {
  .aska-about-split { grid-template-columns: 1fr; gap: 1rem; }
}

/* ─── Vertical animated timeline (Sell onboarding) ─────────────── */

.aska-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  /* The rail lives in the negative-pseudo-element of the list itself so
     it threads behind every marker. Its fill (--aska-timeline-progress)
     is updated from JS as the user scrolls past the list. */
}
.aska-timeline::before,
.aska-timeline::after {
  content: '';
  position: absolute;
  left: 23px; /* marker is 48px wide → centerline at 24, less 1px for rail */
  top: 0; bottom: 0;
  width: 2px;
  border-radius: 1px;
}
.aska-timeline::before { background-color: var(--aska-border); }
.aska-timeline::after {
  background: linear-gradient(180deg, var(--aska-primary), #2a6cb8);
  height: var(--aska-timeline-progress, 0%);
  transition: height 220ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 0 1px rgba(26, 79, 140, 0.18);
}
.aska-timeline__step {
  position: relative;
  padding-left: 4.25rem;
  min-height: 96px;
  margin-bottom: 2.5rem;
}
.aska-timeline__step:last-child { margin-bottom: 0; }
.aska-timeline__marker {
  position: absolute;
  left: 0; top: 0;
  width: 48px; height: 48px;
  border-radius: 9999px;
  background: #fff;
  border: 2px solid var(--aska-border);
  color: var(--aska-soft);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  transition:
    background-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.aska-timeline__step.is-active .aska-timeline__marker {
  background-color: var(--aska-primary);
  border-color: var(--aska-primary);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(26, 79, 140, 0.10);
}
.aska-timeline__step.is-active .aska-timeline__marker--gradient {
  background: linear-gradient(135deg, var(--aska-primary), #2a6cb8);
  border-color: transparent;
}
.aska-timeline__card {
  background: #fff;
  border: 1px solid var(--aska-border);
  border-radius: 0.875rem;
  padding: 1.125rem 1.25rem;
  box-shadow: var(--aska-shadow-card);
  transition: box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.aska-timeline__step.is-active .aska-timeline__card {
  transform: translateX(2px);
  box-shadow: 0 12px 32px rgba(12, 31, 58, 0.08), 0 2px 6px rgba(12, 31, 58, 0.04);
}
.aska-timeline__card--highlight {
  border-color: rgba(26, 79, 140, 0.28);
  box-shadow: 0 4px 24px rgba(26, 79, 140, 0.08);
  background: linear-gradient(180deg, #fff, rgba(247, 249, 252, 0.6));
}
.aska-timeline__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aska-soft);
}
.aska-timeline__title {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--aska-navy);
  line-height: 1.2;
}
.aska-timeline__body {
  margin: 0 0 0.5rem;
  font-size: 14px;
  line-height: 1.55;
  color: var(--aska-muted);
}
.aska-timeline__footnote {
  margin: 0;
  font-size: 12px;
  color: var(--aska-soft);
}
.aska-timeline__list {
  list-style: none;
  margin: 0.75rem 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.aska-timeline__list li {
  font-size: 13px;
  color: var(--aska-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.aska-pill-mini {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--aska-primary);
  background: rgba(26, 79, 140, 0.08);
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  white-space: nowrap;
}
.aska-timeline__ai-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: linear-gradient(120deg, rgba(26, 79, 140, 0.05), rgba(42, 108, 184, 0.07));
  font-size: 12px;
  color: var(--aska-primary);
  line-height: 1.45;
}
.aska-timeline__ai-note svg { flex-shrink: 0; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) {
  .aska-timeline::after,
  .aska-timeline__marker,
  .aska-timeline__card { transition: none; }
}
@media (max-width: 640px) {
  .aska-timeline::before, .aska-timeline::after { left: 19px; }
  .aska-timeline__step { padding-left: 3.5rem; }
  .aska-timeline__marker { width: 40px; height: 40px; }
}

/* ─── Search view shell — keeps Cards + Table same width ───────── */

/* The results column is a CSS Grid item. Without min-width:0 a
   grid item will grow to fit its intrinsic content, so the table
   (min-width:1100px) would push the column from 940px → 1100px and
   the cards grid would re-flow each time the user toggled views.
   Pinning both the section AND the stage to min-width:0 means the
   column stays at its allocated fr-share and the table's own
   .diamond-table-wrap handles horizontal scroll internally. */
[data-aska-search-results] { min-width: 0; }

/* Single container both views render INTO. Crossfade is achieved
   by overlaying both children inside this stage and toggling
   opacity/pointer-events; widths stay matched to the column. */
.aska-search-stage {
  position: relative;
  width: 100%;
  min-width: 0;
}
.aska-search-stage > [data-aska-cards],
.aska-search-stage > [data-aska-table] {
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
  max-width: 100%;
}
.aska-search-stage > [data-aska-cards].is-hidden,
.aska-search-stage > [data-aska-table].is-hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .aska-search-stage > [data-aska-cards],
  .aska-search-stage > [data-aska-table] { transition: none; }
}

/* ─── Pagination toolbar (P2 #107, 2026-05-20) ───────────────────
   Server-side pagination on /Admin/MyStock. Renders below the
   cards/table stage. Hidden via `hidden` attribute when total
   records fit in a single page. Mobile collapses the Prev/Next
   button labels (icons only) and stacks the rows. */
.aska-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid var(--aska-border);
  border-radius: 12px;
  background-color: var(--aska-page);
  font-size: 13px;
  color: var(--aska-soft, #475569);
}
.aska-pager[hidden] { display: none; }
.aska-pager__range {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  color: var(--aska-soft, #475569);
}
.aska-pager__nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aska-pager__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1px solid var(--aska-border);
  background-color: #fff;
  color: var(--aska-navy, #0f172a);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.aska-pager__btn:hover:not(:disabled) {
  background-color: var(--aska-primary-soft, rgba(15, 23, 42, 0.04));
  border-color: var(--aska-primary, #0f172a);
}
.aska-pager__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.aska-pager__counter {
  display: inline-block;
  padding: 0 10px;
  font-weight: 600;
  color: var(--aska-navy, #0f172a);
  white-space: nowrap;
}
.aska-pager__sizer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.aska-pager__sizer-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--aska-soft, #475569);
}
.aska-pager__select {
  height: 32px;
  padding: 0 28px 0 10px;
  border-radius: 9999px;
  border: 1px solid var(--aska-border);
  background-color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--aska-navy, #0f172a);
  cursor: pointer;
}
@media (max-width: 640px) {
  .aska-pager {
    padding: 8px 10px;
    gap: 8px;
    font-size: 12px;
  }
  .aska-pager__range {
    flex: 1 1 100%;
    order: -1;
    text-align: center;
  }
  .aska-pager__btn-label { display: none; }
  .aska-pager__btn { padding: 0 10px; }
  .aska-pager__counter {
    font-size: 12.5px;
    padding: 0 6px;
  }
  .aska-pager__sizer-label { display: none; }
}

/* ─── Segmented Cards / Table toggle ──────────────────────────── */

.aska-view-toggle {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  border-radius: 9999px;
  border: 1px solid var(--aska-border);
  background-color: var(--aska-page);
}
.aska-view-toggle__knob {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(12, 31, 58, 0.10), 0 1px 2px rgba(12, 31, 58, 0.04);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.aska-view-toggle[data-mode="table"] .aska-view-toggle__knob {
  transform: translateX(100%);
}
.aska-view-toggle > button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0 0.875rem;
  height: 32px;
  min-width: 84px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--aska-soft);
  cursor: pointer;
  transition: color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.aska-view-toggle > button.is-active {
  color: var(--aska-primary);
}
.aska-view-toggle > button:hover:not(.is-active) {
  color: var(--aska-navy);
}
.aska-view-toggle svg {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.aska-view-toggle > button.is-active svg {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .aska-view-toggle__knob,
  .aska-view-toggle > button,
  .aska-view-toggle svg { transition: none; }
}

/* ─── Diamond table (dense) ────────────────────────────────────── */

.diamond-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  border-radius: 0.875rem;
  border: 1px solid var(--aska-border);
  background-color: #fff;
  box-shadow: var(--aska-shadow-card);
}
.diamond-table {
  /* 2026-05-13 — table now sizes to its NATURAL width and the wrapper
     scrolls horizontally when the viewport's too narrow. Previous
     `width:100%` was forcing the columns to compress into a single
     viewport-width row; with 15 buyer columns (or 19 admin columns
     once you add REF + Cost + IN/US/World + Mode) the last column —
     the "+" Add-to-cart button — was getting visually cut at common
     laptop widths because the compression couldn't make the table
     any narrower than its content's hard minimum and `overflow-x:auto`
     never kicked in. min-width:max-content + width:max-content lets
     the wrapper scroll horizontally instead. */
  width: max-content;
  min-width: 100%;
  font-size: 12px; color: var(--aska-navy);
  border-collapse: collapse;
  table-layout: auto;
}
.diamond-table thead {
  background-color: var(--aska-page);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--aska-muted);
}
.diamond-table th { padding: 0.45rem 0.35rem; text-align: left; border: none; white-space: nowrap; }
.diamond-table th.sticky { position: sticky; left: 0; z-index: 10; background-color: var(--aska-page); }
.diamond-table tbody tr { border-top: 1px solid var(--aska-border); cursor: pointer; transition: background-color 200ms ease; }
.diamond-table tbody tr:hover { background-color: rgba(247, 249, 252, 0.6); }
.diamond-table td { padding: 0.4rem 0.35rem; white-space: nowrap; }
.diamond-table td.sticky { position: sticky; left: 0; z-index: 10; background-color: #fff; }
.diamond-table .tabular-nums { font-variant-numeric: tabular-nums; }
.diamond-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.diamond-table .center { text-align: center; }

/* Center meta columns (Color / Clarity / Cut / Pol / Sym / Fluo / Lab)
   are 1–4 char codes — collapse their padding so they don't bloat the
   row. Headers get the same treatment so cells align. */
.diamond-table th.center,
.diamond-table td.center { padding-left: 0.25rem; padding-right: 0.25rem; }

/* # column — small ordinal, no need to be wide. */
.diamond-table thead th.sticky,
.diamond-table tbody td.sticky { padding-left: 0.6rem; padding-right: 0.35rem; }

/* "Add" column — the last column. Icon-only chip; give it enough
   room for the 1.75rem round button + a hair of padding either side
   so it never crops on narrow viewports. The TH has aria-label="Add"
   and is empty visually. */
.diamond-table th:last-child,
.diamond-table td:last-child { padding-right: 0.6rem; padding-left: 0.4rem; min-width: 2.5rem; text-align: right; }

/* Stock Id + Shape are the only text-heavy meta cols — give them
   slightly more room. */
.diamond-table th:nth-child(3),
.diamond-table td:nth-child(3) { padding-right: 0.75rem; }
.diamond-table th:nth-child(4),
.diamond-table td:nth-child(4) { padding-right: 0.75rem; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }

/* ─── Hero gem (animated centerpiece) ──────────────────────────── */

.hero-gem {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  height: 360px;
  pointer-events: none;
  z-index: 0;
  color: var(--aska-primary);
  filter: drop-shadow(0 18px 60px rgba(26, 79, 140, 0.20));
  animation: hero-gem-rotate 36s linear infinite;
}
.hero-gem::before {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(closest-side at 50% 38%, rgba(26, 79, 140, 0.18), transparent 70%),
    radial-gradient(closest-side at 30% 70%, rgba(60, 124, 200, 0.10), transparent 70%);
  z-index: -1;
  pointer-events: none;
  animation: hero-gem-halo 36s linear infinite reverse;
  filter: blur(8px);
}
@media (min-width: 640px) { .hero-gem { width: 520px; height: 520px; top: 4%; } }
@media (min-width: 1024px) { .hero-gem { width: 640px; height: 640px; top: 2%; } }

/* ─── Wordmark glow ────────────────────────────────────────────── */

.wordmark-glow {
  background: linear-gradient(120deg, #0c1f3a 0%, #1a4f8c 35%, #2a6cb8 50%, #1a4f8c 65%, #0c1f3a 100%);
  background-size: 250% 250%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: wordmark-drift 8s ease-in-out infinite;
}

/* ─── Thinking shimmer + glow (chat) ──────────────────────────────
   Used on the assistant bubble while the server is still composing the
   response. Two layers: (1) shimmering gradient text and (2) a soft
   ambient glow halo behind the bubble. ChatGPT/Claude-grade alive feel
   without going overboard. */

.thinking-shimmer {
  background: linear-gradient(90deg, var(--aska-accent, #2563eb) 0%, var(--aska-primary, #1a4f8c) 40%, var(--aska-accent-cyan, #0ea5e9) 70%, var(--aska-accent, #2563eb) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 2.2s linear infinite;
  position: relative;
}
.thinking-shimmer::after {
  content: '';
  position: absolute;
  inset: -6px -10px;
  border-radius: 12px;
  background: radial-gradient(closest-side, rgba(99,102,241,0.20), rgba(26,79,140,0.12) 50%, transparent 70%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
  animation: thinking-glow 2.4s ease-in-out infinite;
}

/* Typewriter caret — pulsing block at the end of an assistant bubble
   while streamed tokens are still arriving. Removed on stream complete. */
.is-typing::after {
  content: '▍';
  display: inline-block;
  margin-left: 2px;
  font-weight: 400;
  color: var(--aska-primary, #1a4f8c);
  animation: typewriter-caret 1s steps(1) infinite;
  transform: translateY(-1px);
}

/* ─── Scroll-reveal ────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal[data-reveal-delay="1"] { transition-delay: 80ms; }
.reveal[data-reveal-delay="2"] { transition-delay: 160ms; }
.reveal[data-reveal-delay="3"] { transition-delay: 240ms; }

/* ─── Keyframes ────────────────────────────────────────────────── */

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes thinking-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
@keyframes typewriter-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes wordmark-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes hero-gem-rotate {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}
@keyframes hero-gem-halo {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── prefers-reduced-motion ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .thinking-shimmer, .wordmark-glow {
    animation: none;
    color: var(--aska-primary);
    background: none;
    -webkit-background-clip: initial; background-clip: initial;
  }
  .hero-gem, .hero-gem::before { animation: none; }
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .btn-primary::after { display: none; }
}

/* ─── Header / nav ─────────────────────────────────────────────── */

.aska-header {
  position: sticky; top: 0; z-index: 40;
  width: 100%;
  border-bottom: 1px solid rgba(232, 237, 245, 0.6);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.aska-header__inner { max-width: 1440px; margin: 0 auto; height: 4rem; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
@media (min-width: 768px) { .aska-header__inner { padding: 0 1.25rem; } }
.aska-wordmark { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--aska-navy); }

/* Brand lockup — production askaLogoBlue.png cropped to just the
   triangular "A" gem mark (top ~70% of the asset, since the source
   is the full stacked logo with "ASKA" type baked into the bottom),
   paired with the redesign-era "Aska" wordmark typeset beside it.
   .aska-brand__mark is a fixed-size clipping window; the <img>
   inside is over-sized vertically so the bottom-third "ASKA" text
   is clipped out. object-position:top anchors the visible portion
   to the gem. */
.aska-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--aska-navy);
}
.aska-brand__mark {
  display: inline-flex;
  width: 32px;
  height: 32px;
  overflow: hidden;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
}
.aska-brand__mark img {
  width: 100%;
  /* Stretch height so the gem mark fills 32px and the wordmark
     portion of the asset is pushed below the overflow clip. The
     asset is ~317×346 (gem ~210px tall + ASKA wordmark ~136px tall
     including padding); 150% pushes the wordmark well clear. */
  height: 150%;
  object-fit: contain;
  object-position: center top;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  display: block;
}
.aska-brand:hover .aska-brand__mark img { transform: translateY(-2px) scale(1.03); }
.aska-brand:active .aska-brand__mark img { transform: translateY(0) scale(1); }

.aska-brand__wordmark {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--aska-navy);
  line-height: 1;
  transition: color 240ms ease;
}
.aska-brand:hover .aska-brand__wordmark { color: var(--aska-primary); }

@media (max-width: 480px) {
  .aska-brand { gap: 0.375rem; }
  .aska-brand__mark { width: 26px; height: 26px; }
  .aska-brand__wordmark { font-size: 1.25rem; }
}
.aska-nav { display: none; align-items: center; gap: 0.125rem; flex-wrap: nowrap; min-width: 0; }
/* Show the inline nav only on real desktops (>= lg). On tablet
   the hamburger drawer carries the full nav so the top strip
   doesn't wrap the long admin labels onto two lines. */
@media (min-width: 1024px) { .aska-nav { display: flex; } }
.aska-nav a, .aska-nav button { color: var(--aska-soft); font-weight: 500; }
.aska-nav a:hover, .aska-nav button:hover { color: var(--aska-navy); }
.aska-nav a.is-active { color: var(--aska-navy); background-color: var(--aska-page); }
/* Admin nav dropdowns — native <details>/<summary> for zero JS. The
   summary mimics the .btn-ghost trigger; on toggle the panel pops below.
   Hover-open is intentionally disabled — keyboard / click only so the
   menu doesn't flash open on cursor-grazing. */
.aska-nav-menu { position: relative; }
.aska-nav-menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center;
}
.aska-nav-menu > summary::-webkit-details-marker { display: none; }
.aska-nav-menu > summary::marker { content: ""; }
.aska-nav-menu[open] > summary { color: var(--aska-navy); background-color: var(--aska-page); }
.aska-nav-menu__panel {
  position: absolute; top: calc(100% + 0.35rem); left: 0;
  min-width: 14rem;
  background: #fff;
  border: 1px solid var(--aska-border);
  border-radius: 0.625rem;
  box-shadow: 0 10px 28px rgba(12, 31, 58, 0.14);
  padding: 0.35rem;
  z-index: 50;
}
.aska-nav-menu__item {
  display: block; padding: 0.5rem 0.75rem;
  font-size: 0.875rem; color: var(--aska-navy);
  border-radius: 0.375rem;
  text-decoration: none;
}
.aska-nav-menu__item:hover { background: var(--aska-page); color: var(--aska-navy); }
.aska-nav-menu__sep {
  height: 1px; background: var(--aska-border);
  margin: 0.35rem 0.25rem;
}

.aska-search-pill {
  display: none; align-items: center; gap: 0.5rem; height: 2.25rem;
  border-radius: 9999px; border: 1px solid var(--aska-border);
  background-color: #fff;
  padding: 0 0.5rem 0 0.875rem;
  font-size: 0.8125rem; color: var(--aska-soft);
  cursor: pointer;
  transition: border-color 200ms ease;
  white-space: nowrap;
}
.aska-search-pill:hover { border-color: rgba(26, 79, 140, 0.3); }
/* The inline nav lands ~10 items on the desktop strip. The search
   pill (~150px) only fits cleanly at xl widths; below that it
   crashes into "Settings" / "User List". ⌘K shortcut still works
   from anywhere — the icon-only spotlight button (in the same
   right cluster, just an icon-btn) gives mouse users the trigger. */
@media (min-width: 1536px) { .aska-search-pill { display: inline-flex; } }
.aska-search-pill__kbd {
  display: inline-flex; align-items: center; height: 1.5rem;
  border-radius: 0.375rem; background-color: var(--aska-page);
  padding: 0 0.375rem;
  font-size: 10px; font-weight: 600; color: var(--aska-soft);
}

.aska-icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  color: var(--aska-navy);
  background: transparent; border: none; cursor: pointer;
  transition: background-color 200ms ease;
}
.aska-icon-btn:hover { background-color: var(--aska-page); }
.aska-badge-dot {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 0.25rem;
  border-radius: 9999px;
  background-color: var(--aska-primary);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.aska-badge-dot--danger { background-color: var(--aska-danger); }

/* ─── Account menu (header avatar dropdown) ───────────────────── */

.aska-account { position: relative; }
.aska-account__trigger {
  /* Sits inside .aska-icon-btn so it inherits the circle hover; we
     only override the inner content with the initials chip. */
  padding: 0;
}
.aska-account__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.875rem; height: 1.875rem; border-radius: 9999px;
  background-color: var(--aska-primary);
  color: #fff;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.02em;
  user-select: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.aska-account.is-open .aska-account__avatar,
.aska-icon-btn:hover .aska-account__avatar {
  transform: scale(1.04);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85) inset,
              0 2px 8px rgba(12, 31, 58, 0.18);
}

.aska-account__menu {
  position: absolute; top: calc(100% + 0.5rem); right: 0;
  min-width: 240px; max-width: 280px;
  background-color: #fff;
  border: 1px solid var(--aska-border);
  border-radius: 0.75rem;
  box-shadow: 0 12px 36px rgba(12, 31, 58, 0.12),
              0 2px 8px rgba(12, 31, 58, 0.06);
  padding: 0.45rem;
  z-index: 80;
  animation: aska-account-pop 140ms ease;
  transform-origin: top right;
}
.aska-account__menu[hidden] { display: none; }
@keyframes aska-account-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ─── Save / submit button states ─────────────────────────────────
   Used by Profile.cshtml + anywhere a form submit wants a friendlier
   confirmation than a static banner. .aska-btn--saved morphs the
   button to a green check + pulse; .aska-btn--error nudges it side-
   to-side once. Respects prefers-reduced-motion. */
.aska-btn--saved {
  background-color: #15803d !important;
  border-color: #15803d !important;
  animation: aska-btn-pulse 480ms cubic-bezier(0.22, 1.2, 0.36, 1);
}
.aska-btn--error {
  animation: aska-btn-shake 480ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes aska-btn-pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.4); }
  40%  { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(21, 128, 61, 0); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}
@keyframes aska-btn-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .aska-btn--saved, .aska-btn--error { animation: none; }
}

/* ─── Diamond-shape media loader (modal) ────────────────────────────
   While the modal's <img>/<video> is fetching, a pulsing tinted SVG
   silhouette sits centred in the media bay. As soon as the media
   reports onload / onloadeddata, the bay gets .is-ready and the
   loader fades out. Reduced-motion gets a static silhouette. */
.aska-media-modal__bay [data-aska-media-loader] {
  opacity: 1;
}
.aska-media-modal__bay.is-ready [data-aska-media-loader] {
  opacity: 0;
}
@keyframes aska-diamond-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.55; filter: drop-shadow(0 0 18px rgba(110, 175, 255, 0.0)); }
  50%      { transform: scale(1);    opacity: 1;   filter: drop-shadow(0 0 22px rgba(110, 175, 255, 0.45)); }
}
@media (prefers-reduced-motion: reduce) {
  .aska-media-modal__bay [data-aska-media-loader] > div { animation: none; }
}

/* ⌘K spotlight "Searching for stones…" dot indicator */
@keyframes aska-spot-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40%           { opacity: 1;    }
}
[data-spotlight-row]:hover,
[data-spotlight-row]:focus-visible { background:#f0f5fb; outline:none; }
[data-spotlight-row][data-aska-spotlight-stone] { font-family: inherit; }

/* Cart badge bump — fires every time refreshCartBadge sees a count
   change after AddToCart, so the user can see the icon react. */
.aska-badge-dot.is-bumped {
  animation: aska-cart-bump 420ms cubic-bezier(0.22, 1.4, 0.36, 1);
}
@keyframes aska-cart-bump {
  0%   { transform: scale(1);   }
  35%  { transform: scale(1.45); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1);   }
}
@media (prefers-reduced-motion: reduce) {
  .aska-badge-dot.is-bumped { animation: none; }
}

.aska-account__head {
  padding: 0.6rem 0.75rem 0.45rem;
}
.aska-account__name {
  font-size: 13px; font-weight: 600; color: var(--aska-navy);
  margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aska-account__email {
  font-size: 11px; color: var(--aska-soft);
  margin: 0.1rem 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aska-account__role {
  margin: 0.4rem 0 0;
  font-size: 10px; font-weight: 700;
  color: var(--aska-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.aska-account__sep {
  height: 1px;
  background-color: var(--aska-border);
  margin: 0.4rem 0;
}
.aska-account__sectionhdr {
  margin: 0;
  padding: 6px 14px 2px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aska-soft);
  font-weight: 600;
}
.aska-account__item {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 13px; color: var(--aska-navy);
  text-decoration: none;
  transition: background-color 130ms ease, color 130ms ease;
}
.aska-account__item svg { color: var(--aska-soft); flex-shrink: 0; }
.aska-account__item:hover {
  background-color: var(--aska-page);
}
.aska-account__item:hover svg { color: var(--aska-navy); }
.aska-account__item--danger { color: var(--aska-danger); }
.aska-account__item--danger svg { color: var(--aska-danger); }
.aska-account__item--danger:hover {
  background-color: rgba(185, 28, 28, 0.06);
}

/* On phones the menu spans wider so initials are easy to tap. */
@media (max-width: 480px) {
  .aska-account__menu {
    right: -0.25rem;
    min-width: 220px;
  }
}

/* ─── Mobile drawer ────────────────────────────────────────────── */

.aska-drawer-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background-color: rgba(12, 31, 58, 0.5);
  backdrop-filter: blur(2px);
  display: none;
}
.aska-drawer-backdrop.is-open { display: block; }
.aska-drawer {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 70;
  width: 78%; max-width: 320px;
  background-color: #fff;
  display: flex; flex-direction: column;
  box-shadow: var(--aska-shadow-card);
  transform: translateX(-100%);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.aska-drawer.is-open { transform: translateX(0); }
.aska-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  height: 4rem; padding: 0 1rem;
  border-bottom: 1px solid rgba(232, 237, 245, 0.6);
}
.aska-drawer__nav { flex: 1; overflow-y: auto; padding: 0.5rem 0; }
.aska-drawer__group-label {
  padding: 0.5rem 1rem 0.25rem;
  font-size: 11px; font-weight: 600; color: var(--aska-soft);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.aska-drawer__link {
  display: block; width: 100%; text-align: left;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem; margin: 0 0.5rem;
  font-size: 1rem; color: var(--aska-navy);
  background: transparent; border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  text-decoration: none;
}
.aska-drawer__link:hover, .aska-drawer__link:active { background-color: var(--aska-page); }
.aska-drawer__divider { height: 1px; background-color: rgba(232, 237, 245, 0.6); margin: 0.5rem 1rem; }
.aska-drawer__foot { border-top: 1px solid rgba(232, 237, 245, 0.6); padding: 1rem; }

/* ─── Footer ───────────────────────────────────────────────────── */

.aska-footer {
  border-top: 1px solid rgba(232, 237, 245, 0.6);
  background-color: #fff;
}
.aska-footer__inner {
  max-width: 1152px; margin: 0 auto;
  padding: 2.5rem 1.5rem;
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  align-items: center;
}
/* Four columns once the links nav is in play: brand · links · badges · tagline */
@media (min-width: 768px) { .aska-footer__inner { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; } }

.aska-footer__links {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  font-size: 12.5px;
}
.aska-footer__link {
  color: var(--aska-soft);
  font-weight: 500;
  text-decoration: none;
  transition: color 130ms ease;
}
.aska-footer__link:hover { color: var(--aska-navy); }
.aska-footer__sep { color: var(--aska-border); font-size: 11px; }
@media (max-width: 767px) {
  .aska-footer__links { justify-content: center; }
}

.aska-app-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.625rem;
  border-radius: 0.625rem;
  background-color: var(--aska-navy); color: #fff;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--aska-border);
  cursor: pointer;
  transition: background-color 200ms ease;
  text-decoration: none;
  min-height: 56px;
}
.aska-app-badge:hover { background-color: #0a1a30; color: #fff; }
.aska-app-badge svg { width: 28px; height: 28px; flex-shrink: 0; }
.aska-app-badge__lines { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.aska-app-badge__lines small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.aska-app-badge__lines strong { font-size: 1.0625rem; font-weight: 600; line-height: 1.15; margin-top: 1px; }
.aska-app-badge__soon {
  position: absolute; top: -6px; right: -6px;
  border-radius: 9999px;
  background-color: var(--aska-warn); color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 8px;
  box-shadow: 0 1px 3px rgba(12, 31, 58, 0.18);
}

/* ─── Spotlight (⌘K) ───────────────────────────────────────────── */

.aska-spotlight-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background-color: rgba(12, 31, 58, 0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.aska-spotlight-backdrop.is-open { display: flex; }
.aska-spotlight {
  width: 92%; max-width: 600px;
  background-color: #fff;
  border-radius: 1rem;
  border: 1px solid var(--aska-border);
  box-shadow: var(--aska-shadow-soft);
  overflow: hidden;
}
.aska-spotlight input {
  width: 100%; height: 3.5rem;
  border: none; border-bottom: 1px solid var(--aska-border);
  padding: 0 1.5rem;
  font-size: 1rem; color: var(--aska-navy);
  outline: none;
}
.aska-spotlight__results { max-height: 60vh; overflow-y: auto; padding: 0.5rem 0; }

/* ─── Chat-specific ────────────────────────────────────────────── */

.aska-chat-bubble-user {
  align-self: flex-end; max-width: 85%;
  border-radius: 1rem 1rem 0.375rem 1rem;
  background-color: var(--aska-primary); color: #fff;
  padding: 0.625rem 1rem;
  font-size: 15px;
}
.aska-chat-bubble-assistant {
  max-width: 92%;
  font-size: 15px; line-height: 1.6; color: var(--aska-navy);
  white-space: pre-wrap;
}
.aska-chat-bubble-system {
  text-align: center;
  font-size: 12px; font-style: italic; color: var(--aska-soft);
}

/* "See all in diamond search ↗" CTA — sits directly under the result
   grid in an assistant bubble. Visually a quiet pill, but tappable
   enough to feel like a primary action since it's the chat→full-search
   handoff most users want once they see top-3. */
.aska-chat-see-all {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  margin-top: 0.125rem;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  border: 1px solid rgba(26, 79, 140, 0.25);
  background: rgba(26, 79, 140, 0.06);
  color: var(--aska-primary);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, transform 100ms ease;
}
.aska-chat-see-all:hover {
  background: rgba(26, 79, 140, 0.12);
  border-color: rgba(26, 79, 140, 0.4);
}
.aska-chat-see-all:active { transform: scale(0.97); }
.aska-chat-see-all svg { opacity: 0.85; }

/* ─── Misc helpers (Heera-friendly) ────────────────────────────── */

.aska-page-shell { min-height: 100vh; display: flex; flex-direction: column; }
.aska-main { flex: 1; }
.aska-section { max-width: 1152px; margin: 0 auto; padding: 4rem 1.5rem; }
.aska-section--narrow { max-width: 768px; }
.aska-eyebrow {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--aska-primary);
}
.aska-h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--aska-navy);
}
.aska-h2 {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--aska-navy);
}
.aska-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--aska-muted);
}
.aska-trust-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.75rem 2.5rem;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--aska-soft);
}
.aska-trust-strip span.dot::before { content: "·"; margin-right: 0.5rem; }

/* ─── Page transition (premium catalog enter) ──────────────────── */

.aska-page-transition {
  /* Cover the content area only, not the global header. The header
     stays anchored at the top while the overlay paints the chrome
     below it — keeps the user oriented and never reads as a full
     reload. ~4.5rem matches the redesign header height. */
  position: fixed; top: 4.5rem; left: 0; right: 0; bottom: 0;
  z-index: 40; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.96) 0%, rgba(247,249,252,0.99) 45%, rgba(238,243,250,1) 100%);
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.aska-page-transition.is-active { pointer-events: auto; opacity: 1; }
.aska-page-transition__gem {
  width: 220px; height: 220px;
  color: var(--aska-primary);
  filter: drop-shadow(0 18px 60px rgba(26, 79, 140, 0.18));
  opacity: 0;
  transform: scale(0.55) rotate(0deg);
}
.aska-page-transition.is-active .aska-page-transition__gem {
  animation: aska-page-transition-gem 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes aska-page-transition-gem {
  0%   { transform: scale(0.55) rotate(0deg);  opacity: 0; }
  25%  { opacity: 1; }
  60%  { transform: scale(1.08) rotate(180deg); opacity: 1; }
  100% { transform: scale(1.4)  rotate(360deg); opacity: 0; }
}
.aska-page-transition__label {
  margin-top: 1.25rem;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--aska-soft); opacity: 0;
}
.aska-page-transition.is-active .aska-page-transition__label {
  animation: aska-page-transition-label 700ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards;
}
@keyframes aska-page-transition-label {
  0%   { opacity: 0; transform: translateY(6px); }
  40%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
@media (max-width: 640px) {
  .aska-page-transition__gem { width: 160px; height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .aska-page-transition,
  .aska-page-transition.is-active { transition: none; opacity: 0; }
  .aska-page-transition__gem,
  .aska-page-transition__label { animation: none; opacity: 0; }
}

/* ─── Mobile optimizations for redesigned views ────────────────── */

/* Hero typography clamps so 320px-wide phones don't break the wordmark */
@media (max-width: 640px) {
  h1.aska-hero-title,
  .aska-hero-title h1,
  .wordmark-glow {
    font-size: clamp(1.65rem, 7.5vw, 2.5rem) !important;
    line-height: 1.18 !important;
  }
  /* Long whitespace-nowrap headings on Landing get to wrap on phones */
  section .whitespace-nowrap { white-space: normal !important; }
}

/* Header search pill takes too much room on phones */
@media (max-width: 480px) {
  .aska-search-pill { display: none !important; }
}

/* Filter sidebar → bottom-up sheet on phones */
/* Backdrop is hidden + display:none at desktop so even if it ends up
   as a grid sibling of the sidebar it doesn't claim a grid cell. */
.aska-filter-sidebar__backdrop { display: none; }

.aska-filter-mobile-toggle {
  display: none;
  align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: 0.75rem 1rem;
  background: #fff; border: 1px solid var(--aska-border);
  border-radius: 0.75rem;
  font-size: 14px; font-weight: 600; color: var(--aska-navy);
  margin-bottom: 1rem;
  box-shadow: var(--aska-shadow-card);
}
.aska-filter-mobile-toggle svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
  .aska-filter-mobile-toggle { display: inline-flex; }
  .aska-filter-sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    max-height: 80vh;
    transform: translateY(100%);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    background: #fff;
    border-top: 1px solid var(--aska-border);
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -12px 40px rgba(12, 31, 58, 0.16);
    z-index: 60;
    overflow-y: auto;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }
  .aska-filter-sidebar.is-open { transform: translateY(0); }
  .aska-filter-sidebar__backdrop {
    display: block;
    position: fixed; inset: 0; background: rgba(12, 31, 58, 0.45);
    backdrop-filter: blur(2px); z-index: 55;
    opacity: 0; pointer-events: none; transition: opacity 200ms;
  }
  .aska-filter-sidebar__backdrop.is-open { opacity: 1; pointer-events: auto; }
  .aska-filter-sidebar__handle {
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--aska-border);
    margin: 0 auto 0.75rem;
  }
}

/* Diamond result density on phones */
@media (max-width: 640px) {
  .diamond-table { font-size: 12px; }
  .diamond-table th, .diamond-table td { padding: 0.45rem 0.5rem; }
  [data-aska-cards] { grid-template-columns: 1fr !important; gap: 0.875rem !important; }
  .diamond-card { border-radius: 0.75rem; }
}

/* Footer stacks cleanly on phones */
@media (max-width: 640px) {
  .aska-footer__inner { padding: 1.25rem 1rem; gap: 1.25rem; }
  .aska-footer__inner > div { text-align: left; }
}

/* Drawer respects iOS safe areas */
.aska-drawer {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

/* Composer + chips wrap cleanly on phones */
@media (max-width: 480px) {
  [data-aska-composer-input] { font-size: 16px !important; /* prevent iOS auto-zoom */ }
}

/* ── Legacy Bootstrap 4 compatibility layer ─────────────────────────
   _AskaLayout doesn't pull in Bootstrap 4 globally, but a chunk of
   the master-inherited admin views (DashboardAdmin, DashboardSupplier,
   MyStock, SalesList, UserApi, PickupStones, AdminCart, MyCart,
   Profile, etc.) still rely on master's `.container-fluid / .row /
   .col-md-* / .counter-box / .card / .float-right / .animated
   fadeInUpShort` idioms in their body markup.

   This block backfills *just enough* of those primitives so master's
   body markup renders correctly inside the redesign chrome — without
   importing all of Bootstrap. As each page is rewritten in Tailwind
   the matching declarations here can be dropped.

   Tej direction (2026-05-12): admin/supplier is a UI rehaul + bug
   fixes + API upgrades — NOT a structural rewrite. Keeping master's
   markup intact and shimming the missing CSS is the right primitive. */
.container-fluid { width: 100%; padding-right: 1rem; padding-left: 1rem; margin-right: auto; margin-left: auto; }
.row { display: flex; flex-wrap: wrap; margin-right: -.5rem; margin-left: -.5rem; }
.row > [class*="col-"] { padding: .5rem; box-sizing: border-box; }
.col-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.col-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3  { flex: 0 0 25%;     max-width: 25%; }
.col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.col-6  { flex: 0 0 50%;     max-width: 50%; }
.col-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9  { flex: 0 0 75%;     max-width: 75%; }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-12 { flex: 0 0 100%;    max-width: 100%; }
.col-md-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.col-md-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.col-md-3  { flex: 0 0 25%;     max-width: 25%; }
.col-md-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-md-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.col-md-6  { flex: 0 0 50%;     max-width: 50%; }
.col-md-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.col-md-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.col-md-9  { flex: 0 0 75%;     max-width: 75%; }
.col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-md-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-md-12 { flex: 0 0 100%;    max-width: 100%; }
@media (max-width: 768px) {
  .row > [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; }
}

/* Cards: master used .card / .card-body / .card-header. The redesign
   has its own `.aska-card` token tree which we keep as-is — these
   rules only fire where a view literally uses Bootstrap's `.card`. */
.card { background: #fff; border: 1px solid var(--aska-border, #e8edf5); border-radius: 0.875rem; box-shadow: 0 1px 2px rgba(12, 31, 58, 0.04), 0 4px 12px rgba(12, 31, 58, 0.04); margin-bottom: 1rem; }
.card.no-r { border-radius: 0.5rem; }
.card.no-b { border: 0; box-shadow: none; }
.card.my-0 { margin-top: 0; margin-bottom: 0; }
.card-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--aska-border, #e8edf5); background: #f7f9fc; font-weight: 600; color: #0c1f3a; }
.card-body { padding: 1rem; }
.card-body.p-3 { padding: 1rem; }
.card-body.p-2 { padding: 0.5rem; }
.card-body.text-left { text-align: left; }
.card-body.text-right { text-align: right; }
.card-body.text-center { text-align: center; }

/* Counter-box: master's KPI tile on every dashboard. The progress
   strip at the bottom is a master idiom; we keep it but recolor. */
.counter-box { background: #fff; border: 1px solid var(--aska-border, #e8edf5); border-radius: 0.875rem; overflow: hidden; box-shadow: 0 1px 2px rgba(12, 31, 58, 0.04), 0 4px 12px rgba(12, 31, 58, 0.04); }
.counter-box.white { background: #fff; }
.counter-box.r-5 { border-radius: 0.875rem; }
.counter-box .p-4 { padding: 1.25rem; }
.counter-box .counter-title { font-size: 0.8125rem; color: #5a6d83; font-weight: 500; letter-spacing: 0.01em; }
.counter-box .counter-title.font-weight-bold { font-weight: 600; }
.counter-box h5 { font-size: 1.75rem; font-weight: 700; color: #0c1f3a; margin: 0.5rem 0 0; line-height: 1.1; }
.counter-box .mt-3 { margin-top: 0.75rem; }
.counter-box .progress { height: 4px; background: #e8edf5; border-radius: 0; overflow: hidden; }
.counter-box .progress.progress-xs { height: 4px; }
.counter-box .progress.r-0 { border-radius: 0; }
.counter-box .progress-bar { background: linear-gradient(90deg, #1a4f8c, #6a8dd1); height: 100%; transition: width 0.4s ease; }
.counter-box .float-right { float: right; }
.counter-box .icon { color: #1a4f8c; }
.counter-box .icon.s-48 { font-size: 2.5rem; line-height: 1; }

/* Master's reveal-on-load animation. Avoid the `animatedParent
   animateOnce` orchestration JS by just running the fade on every
   matching node — same visual result. */
.animatedParent .animated.fadeInUpShort,
.animated.fadeInUpShort { animation: askaFadeInUpShort 0.4s ease-out both; }
.animated.fadeInUpShort.go { animation-play-state: running; }
@keyframes askaFadeInUpShort {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tiny utilities master sprinkles everywhere. */
.float-left  { float: left; }
.float-right { float: right; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-light-blue { color: #1a4f8c; }
.text-yellow     { color: #a16207; }
.text-red        { color: #b91c1c; }
.text-blue       { color: #1a4f8c; }
.text-body       { color: #0c1f3a; }
.purple-text { color: #6d28d9; }
.blue-text   { color: #1a4f8c; }
.red-text    { color: #b91c1c; }
.brown-text  { color: #92400e; }
.orange-text { color: #c2410c; }
.green-text  { color: #15803d; }
.no-r { border-radius: 0; }
.no-b { border: 0; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed    { position: fixed; }
.position-static   { position: static; }
.position-sticky   { position: sticky; }
.pb-3 { padding-bottom: 0.75rem; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.mt-3 { margin-top: 0.75rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-5 { margin-right: 1.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.p-3  { padding: 1rem; }
.p-4  { padding: 1.25rem; }
.w-100 { width: 100%; }
.s-18 { font-size: 1.125rem; }
.s-48 { font-size: 3rem; line-height: 1; }
.font-weight-bold { font-weight: 700; }
.cursor-pointer { cursor: pointer; }
.displaynone { display: none; }

/* Master's "treeview" sidebar pattern. The new top-nav handles
   navigation, so when a legacy view still emits .main-sidebar /
   .treeview markup we just hide it to prevent the chrome conflict. */
.main-sidebar { display: none; }
.topheader.has-sidebar-left { padding-left: 0; }

/* Master's tab-content / tab-pane. Used by DashboardAdmin et al. */
.tab-content { width: 100%; }
.tab-pane:not(.active):not(.show) { display: none; }
.tab-pane.active, .tab-pane.show { display: block; }

/* Master's .btn-* primitives. The redesign has `.btn-primary` /
   `.btn-secondary` but legacy admin views use a wider set. */
.btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4rem 0.85rem; border: 1px solid transparent; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8125rem; }
.btn.btn-lg { padding: 0.55rem 1.1rem; font-size: 0.9375rem; }
.btn.btn-primary { background: #1a4f8c; color: #fff; border-color: #1a4f8c; }
.btn.btn-primary:hover { background: #163f70; border-color: #163f70; color: #fff; }
.btn.btn-primary.blue { background: #1a4f8c; }
.btn.btn-secondary { background: #fff; color: #0c1f3a; border-color: #e8edf5; }
.btn.btn-secondary:hover { background: #f7f9fc; border-color: #d4dbeb; }
.btn.btn-success { background: #15803d; color: #fff; border-color: #15803d; }
.btn.btn-success:hover { background: #126631; border-color: #126631; color: #fff; }
.btn.btn-warning { background: #fde68a; color: #0c1f3a; border-color: #fcd34d; }
.btn.btn-warning.text-black { color: #0c1f3a; }
.btn.btn-danger  { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.btn.btn-danger:hover  { background: #9c1818; border-color: #9c1818; color: #fff; }
.btn.btn-outline-primary { background: transparent; color: #1a4f8c; border-color: #1a4f8c; }
.btn.btn-outline-primary:hover { background: #1a4f8c; color: #fff; }

/* Master's form-control. Buttons + inputs sit next to each other in
   admin forms; need consistent height. */
.form-control { display: block; width: 100%; padding: 0.4rem 0.75rem; font-size: 0.875rem; line-height: 1.5; color: #0c1f3a; background: #fff; border: 1px solid #e8edf5; border-radius: 0.5rem; }
.form-control:focus { outline: 0; border-color: #1a4f8c; box-shadow: 0 0 0 3px rgba(26, 79, 140, 0.12); }
.form-control:disabled { background: #f7f9fc; cursor: not-allowed; }
.form-group { margin-bottom: 1rem; }
.form-group label, .form-label { display: block; margin-bottom: 0.35rem; font-size: 0.8125rem; font-weight: 500; color: #0c1f3a; }
.input-group { display: flex; align-items: stretch; }
.input-group .form-control { flex: 1 1 auto; }
.input-group-text { display: flex; align-items: center; padding: 0.4rem 0.75rem; font-size: 0.875rem; background: #f7f9fc; border: 1px solid #e8edf5; border-radius: 0 0.5rem 0.5rem 0; }

/* Master's .table primitive — used widely in admin lists. */
.table { width: 100%; border-collapse: collapse; }
.table thead th { background: #f7f9fc; font-weight: 600; font-size: 0.8125rem; color: #0c1f3a; text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid #e8edf5; }
.table tbody td { padding: 0.55rem 0.75rem; font-size: 0.875rem; color: #0c1f3a; border-bottom: 1px solid #f0f3f9; }
.table.table-bordered { border: 1px solid #e8edf5; border-radius: 0.5rem; overflow: hidden; }
.table.table-hover tbody tr:hover { background: #f7f9fc; }

/* Bootstrap 4 modal layout primitives. The `.modal('show')` shim in
   aska.js handles toggling .show + the backdrop; this CSS handles
   positioning, dimensions, and the in-out fade. Master's modals all
   render at the page root with `class="modal fade" id="…"` and an
   inner .modal-dialog → .modal-content tree. */
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1050; display: none; overflow-x: hidden; overflow-y: auto; outline: 0; }
.modal.show { display: block; }
.modal.fade .modal-dialog { transition: transform 0.2s ease-out; transform: translateY(-12px); }
.modal.show .modal-dialog { transform: none; }
.modal-dialog { position: relative; max-width: 500px; margin: 1.75rem auto; pointer-events: none; }
.modal-dialog.modal-sm { max-width: 300px; }
.modal-dialog.modal-md { max-width: 500px; }
.modal-dialog.modal-lg { max-width: 800px; }
.modal-dialog.modal-xl { max-width: 1140px; }
.modal-dialog.mdel-custom { max-width: 95% !important; }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 0; border-radius: 0.875rem; outline: 0; box-shadow: 0 12px 48px rgba(12, 31, 58, 0.18); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #e8edf5; border-top-left-radius: 0.875rem; border-top-right-radius: 0.875rem; }
.modal-header .close { padding: 0; background: transparent; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #5a6d83; }
.modal-header .close:hover { color: #0c1f3a; }
.modal-title { margin: 0; font-size: 1.125rem; font-weight: 600; color: #0c1f3a; line-height: 1.4; }
.modal-body { position: relative; flex: 1 1 auto; padding: 1rem 1.25rem; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid #e8edf5; border-bottom-left-radius: 0.875rem; border-bottom-right-radius: 0.875rem; }
body.modal-open { overflow: hidden; }

/* ── Pickup-stones table (expandable rows) ────────────────────────
   Each <details> represents one stone. Summary row = compact table
   row; opening reveals the full spec grid. CSS-only — no JS toggle
   needed since <details> is native. */
/* ── Aska card primitive ───────────────────────────────────────────
   The token most rewritten views reach for. Distinct from Bootstrap's
   `.card` (which is part of the legacy compat layer above) — same
   visual treatment but lives in the redesign namespace so it's clear
   which views are on the new layer. */
.aska-card {
  background: #fff;
  border: 1px solid var(--aska-border, #e8edf5);
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(12, 31, 58, 0.04), 0 4px 12px rgba(12, 31, 58, 0.04);
}
.aska-card__body { padding: 1rem 1.25rem; }
.aska-card__title { font-size: 0.875rem; font-weight: 600; color: var(--aska-navy); margin: 0 0 0.25rem; }
.aska-card__subtitle { font-size: 0.75rem; color: var(--aska-soft); margin: 0; }
a.aska-card, a.aska-card:hover { text-decoration: none; color: inherit; }
a.aska-card { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
a.aska-card:hover {
  transform: translateY(-2px);
  border-color: rgba(26, 79, 140, 0.25);
  box-shadow: 0 4px 12px rgba(12, 31, 58, 0.06), 0 12px 28px rgba(12, 31, 58, 0.06);
}

.aska-pickup-table { display: block; }
.aska-pickup-row {
  display: grid;
  grid-template-columns:
    /* toggle  sku      carat  shape  color clarity cut    lab+cert  $/ct  amount  action */
       28px    1.4fr   58px   72px   52px  60px    52px   1.4fr     78px  90px    96px;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.875rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--aska-border);
}
.aska-pickup-row--head {
  background: var(--aska-page);
  color: var(--aska-soft);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0.875rem 0.875rem 0 0;
  position: sticky; top: 64px; z-index: 5;
}
.aska-pickup-row--body {
  list-style: none;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.aska-pickup-row--body::-webkit-details-marker { display: none; }
.aska-pickup-row--body::marker { content: ''; }
.aska-pickup-row--body:hover { background: rgba(26, 79, 140, 0.025); }
.aska-pickup-details[open] > .aska-pickup-row--body { background: rgba(26, 79, 140, 0.04); }
.aska-pickup-details:last-child > .aska-pickup-row--body,
.aska-pickup-details:last-child > .aska-pickup-expand { border-bottom: 0; }
.aska-pickup-details:last-child > .aska-pickup-row--body { border-radius: 0 0 0.875rem 0.875rem; }
.aska-pickup-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aska-pickup-cell--actions { text-align: right; white-space: nowrap; overflow: visible; }
.aska-pickup-cell--amount  { text-align: right; }
.aska-pickup-cell--toggle  { display: inline-flex; align-items: center; justify-content: center; color: var(--aska-soft); }
.aska-pickup-chevron { transition: transform 0.18s ease; }
.aska-pickup-details[open] .aska-pickup-chevron { transform: rotate(180deg); }
.aska-pickup-expand {
  padding: 1rem 1.25rem 1.25rem;
  background: #fafbfd;
  border-bottom: 1px solid var(--aska-border);
  animation: askaPickupSlide 0.2s ease-out;
}
@keyframes askaPickupSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* On phones drop the grid to a stacked label-value pair so the
   row still reads. Admin's on a laptop typically — the desktop
   grid is the primary form factor. */
@media (max-width: 768px) {
  .aska-pickup-row { grid-template-columns: 24px 1fr auto; gap: 0.5rem 0.75rem; }
  .aska-pickup-row--head { display: none; }
  .aska-pickup-cell:not(.aska-pickup-cell--toggle):not(.aska-pickup-cell--sku):not(.aska-pickup-cell--actions) { display: none; }
}

/* End legacy BS4 compat layer. */

/* ─── 2026-05-12 Fresh design language ─────────────────────────────
   Promoted from inline <style> blocks (MyStock / UserApi) so every
   admin + supplier surface can adopt the same chrome. Polish-only:
   class-name tokens, no behavioral changes. */

/* H3 — mid-page section title (smaller than aska-h2). */
.aska-h3 {
  font-size: clamp(1.125rem, 0.9vw + 0.85rem, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--aska-navy);
  margin: 0;
}

/* Sub-tabs / pill tabs used by MyStock & co. */
.aska-tabs { display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--aska-border); background: #fff; border-radius: 10px; width: fit-content; max-width: 100%; overflow-x: auto; }
.aska-tab { padding: 0.55rem 0.95rem; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--aska-soft); text-decoration: none; white-space: nowrap; transition: all 0.15s ease; background: transparent; border: 0; cursor: pointer; }
.aska-tab:hover { color: var(--aska-navy); background: #f6f6f8; }
.aska-tab.is-active { background: var(--aska-primary); color: #fff; }
.aska-tab.is-active:hover { background: var(--aska-primary); color: #fff; }

/* Status pills — count chips that show filter state. */
.aska-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--aska-navy); background: #fff; border: 1px solid var(--aska-border); border-radius: 999px; text-decoration: none; transition: all 0.15s ease; cursor: pointer; }
.aska-status-pill:hover { border-color: var(--aska-primary); color: var(--aska-primary); }
.aska-status-pill b { font-weight: 700; color: var(--aska-soft); font-size: 11px; }
.aska-status-pill.aska-pill-active { background: var(--aska-primary); color: #fff; border-color: var(--aska-primary); }
.aska-status-pill.aska-pill-active b { color: rgba(255, 255, 255, 0.8); }

/* Loading + empty-state shell. */
.aska-search-state { display: none; }
.aska-search-state[style*="display: block"],
.aska-search-state[style*="display:block"],
.aska-search-state.is-loading,
.aska-search-state.is-empty,
.aska-search-state.is-error { display: block; }
.aska-search-state .aska-search-loader { display: none; }
.aska-search-state.is-loading .aska-search-loader { display: flex; }
.aska-search-state.is-loading .aska-search-state__msg { display: none; }
.aska-search-state__msg:empty { display: none; }
.aska-search-state__msg { margin: 0; padding: 3rem 1.5rem; text-align: center; border-radius: 14px; border: 1px solid var(--aska-border); background: #fff; color: var(--aska-muted); font-size: 14px; }
.aska-search-loader { flex-direction: column; align-items: center; justify-content: center; padding: 88px 24px 96px; gap: 22px; position: relative; min-height: 280px; }
.aska-search-loader__halo,
.aska-search-loader__gem { position: absolute; }
.aska-search-loader__halo {
  width: 156px; height: 156px; top: 64px; left: 50%; transform: translateX(-50%);
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(26, 79, 140, 0.35), rgba(26, 79, 140, 0.05) 65%, transparent),
              radial-gradient(closest-side, rgba(167, 139, 250, 0.22), transparent 60%);
  filter: blur(22px); animation: aska-loader-halo 2.4s ease-in-out infinite;
}
.aska-search-loader__gem {
  width: 96px; height: 96px; top: 92px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: radial-gradient(120% 80% at 30% 25%, rgba(255, 255, 255, 0.55), transparent 55%),
              linear-gradient(140deg, #2a6cb8 0%, #1a4f8c 60%, #0c1f3a 100%);
  box-shadow: 0 12px 32px rgba(26, 79, 140, 0.32), 0 1px 2px rgba(255, 255, 255, 0.5) inset, 0 -8px 14px rgba(12, 31, 58, 0.4) inset;
  color: #fff; animation: aska-loader-gem 2.4s ease-in-out infinite;
}
.aska-search-loader__gem svg { width: 44px; height: 44px; animation: aska-loader-spin 4s linear infinite; transform-origin: 50% 50%; }
.aska-search-loader__caption { position: relative; margin: 220px 0 0; font-size: 13.5px; font-weight: 500; color: var(--aska-muted); letter-spacing: 0.01em; }
@keyframes aska-loader-halo { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(0.94); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } }
@keyframes aska-loader-gem  { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
@keyframes aska-loader-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .aska-search-loader__halo,
  .aska-search-loader__gem,
  .aska-search-loader__gem svg { animation: none; }
}

/* Hint banner — pale-blue gradient with leading icon + CTA on the right.
   Repurposable for any "did-you-know" / "automate this" / "next step" callout. */
.aska-hint {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  border-radius: 14px;
  border: 1px solid #e0e7f4;
  background: linear-gradient(135deg, #f4f8ff 0%, #f9fafe 100%);
  box-shadow: 0 1px 0 rgba(12, 31, 58, 0.02);
}
.aska-hint__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: #ffffff;
  color: var(--aska-primary);
  border: 1px solid #dde6f3;
}
.aska-hint__body  { flex: 1; min-width: 0; }
.aska-hint__title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--aska-navy); }
.aska-hint__text  { margin: 2px 0 0; font-size: 12.5px; color: var(--aska-muted); line-height: 1.45; }
.aska-hint__cta {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--aska-navy);
  color: #fff;
  font-size: 12.5px; font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.aska-hint__cta:hover { background: #0a1830; color: #fff; transform: translateY(-1px); }
@media (max-width: 640px) {
  .aska-hint { flex-wrap: wrap; }
  .aska-hint__cta { width: 100%; justify-content: center; }
}

/* Page header chrome — eyebrow + title + subhead pattern. */
.aska-page-head {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 1.25rem;
}
.aska-page-head__row {
  display: flex; flex-direction: column; gap: 1rem;
  align-items: flex-start; justify-content: space-between;
}
@media (min-width: 768px) {
  .aska-page-head__row { flex-direction: row; align-items: flex-end; }
}
.aska-page-head__subhead {
  margin: 4px 0 0;
  font-size: 0.875rem; line-height: 1.55;
  color: var(--aska-muted);
}

/* Toolbar bar — search box + filter selects + right-side actions. */
.aska-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px solid var(--aska-border);
  background: #fff;
}
.aska-toolbar__lead { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; }
.aska-toolbar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aska-toolbar input[type="text"],
.aska-toolbar input[type="search"],
.aska-toolbar select {
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--aska-border);
  background: #fff;
  font-size: 13px; color: var(--aska-navy);
  outline: none;
}
.aska-toolbar input[type="text"]:focus,
.aska-toolbar input[type="search"]:focus,
.aska-toolbar select:focus { border-color: var(--aska-primary); box-shadow: 0 0 0 3px rgba(26, 79, 140, 0.08); }

/* Stage pills — narrate lifecycle state on order/queue rows. */
.aska-stage-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}
.aska-stage-pill--neutral   { background: #f4f6fb; color: #4a5876; border: 1px solid #e2e7f0; }
.aska-stage-pill--warn      { background: #fff7ea; color: #a05a09; border: 1px solid #f4dfb6; }
.aska-stage-pill--info      { background: #eef4ff; color: #1d4ed8; border: 1px solid #cdddff; }
.aska-stage-pill--success   { background: #ecfdf3; color: #027a48; border: 1px solid #b6e9cf; }
.aska-stage-pill--danger    { background: #fef2f2; color: #b91c1c; border: 1px solid #fbcaca; }
.aska-stage-pill--accent    { background: linear-gradient(135deg, #eef0fe, #f4f4ff); color: #4338ca; border: 1px solid #d4d8fd; }

/* ─── Phase 5 (2026-05-13): mailto helper pills ─────────────────────────
   Rendered by _MailtoHelpers.cshtml partial. Inline layout on the Sales
   List row; stacked (full-width) layout on the MyOrder "Quick actions"
   card. Pills are real <a href="mailto:…"> launchers — no JS. */
.aska-mailto-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.aska-mailto-row--stacked {
  flex-direction: column; align-items: stretch;
}
.aska-mailto-row--stacked .aska-mailto-pill {
  justify-content: center;
  padding: 8px 14px;
  font-size: 12.5px;
  height: 36px;
}
.aska-mailto-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, opacity 0.14s ease;
  cursor: pointer;
  min-height: 26px;
}
.aska-mailto-pill svg { flex: none; }
.aska-mailto-pill--supplier {
  background: #f4f6fb; color: var(--aska-navy, #0c1f3a);
  border-color: #e2e7f0;
}
.aska-mailto-pill--supplier:hover {
  background: #e9eef7; border-color: #cdd6e3;
}
.aska-mailto-pill--buyer {
  background: #eef4ff; color: #1d4ed8;
  border-color: #cdddff;
}
.aska-mailto-pill--buyer:hover {
  background: #dde7fb; border-color: #b8caf6;
}
.aska-mailto-pill--admin {
  background: #fff7ea; color: #a05a09;
  border-color: #f4dfb6;
}
.aska-mailto-pill--admin:hover {
  background: #fcefd2; border-color: #ecd095;
}
.aska-mailto-pill--disabled {
  background: #f7f7f7; color: #9aa3b4;
  border-color: #ececec;
  cursor: not-allowed;
  opacity: 0.85;
}

/* Segmented control — used for client-side group-by toggles on
   table-style admin pages (e.g. /Admin/OrderList: Order | Supplier). */
.aska-segmented {
  display: inline-flex;
  border: 1px solid var(--aska-border);
  border-radius: 9px;
  background: #f4f6fb;
  padding: 2px;
  height: 36px;
}
.aska-segmented__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  font-size: 12px; font-weight: 600;
  color: var(--aska-muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.aska-segmented__btn:hover { color: var(--aska-navy); }
.aska-segmented__btn.is-active {
  background: #fff;
  color: var(--aska-primary);
  box-shadow: 0 1px 2px rgba(12, 31, 58, 0.08);
}

/* Group-banner row — injected between rows in grouped table views to
   visually separate clusters (supplier name, buyer name, etc). */
.aska-group-row td {
  background: var(--aska-page-tint, #f7f9fc);
  border-top: 1px solid var(--aska-border);
  border-bottom: 1px solid var(--aska-border);
}
.aska-group-row a { color: var(--aska-primary); text-decoration: none; }
.aska-group-row a:hover { text-decoration: underline; }

/* Click-through table rows — admin order list rows nav to the order
   lifecycle view when clicked outside any interactive element. */
.aska-order-row { transition: background-color 100ms ease; }
.aska-order-row:hover { background: rgba(26, 79, 140, 0.04); }

/* Empty-state card. */
.aska-empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
  border-radius: 14px;
  border: 1px dashed var(--aska-border);
  background: #fafbfd;
  color: var(--aska-muted);
}
.aska-empty__title { font-size: 15px; font-weight: 600; color: var(--aska-navy); margin: 0 0 0.25rem; }
.aska-empty__text  { font-size: 13px; color: var(--aska-muted); margin: 0; }

/* ──────────────────────────────────────────────────────────────────
   Cart-lock TTL UI (migration 035, 2026-05-18)
   ────────────────────────────────────────────────────────────────── */
.aska-cart-ttl-banner {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  margin: 0.75rem 0 1rem;
  border-radius: 0.5rem;
  background: #eff6ff;
  border: 1px solid rgba(56,103,162,0.20);
  color: #1d4ed8;
  font-size: 13px; line-height: 1.4;
}
.aska-cart-ttl-banner svg { flex: none; }
.aska-cart-ttl-banner strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.aska-cart-ttl-banner.cart-ttl-banner--warn {
  background: #fffbeb; border-color: rgba(146,64,14,0.25); color: #92400e;
}
.aska-cart-ttl-banner.cart-ttl-banner--danger {
  background: #fef2f2; border-color: rgba(159,18,18,0.25); color: #9f1212;
}

.aska-cart-ttl-pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  margin-top: 0.25rem;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(56,103,162,0.10);
  color: #1d4ed8;
  font-size: 10px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cart-ttl--warn .aska-cart-ttl-pill {
  background: rgba(146,64,14,0.12); color: #92400e;
}
.cart-ttl--danger .aska-cart-ttl-pill {
  background: rgba(159,18,18,0.12); color: #9f1212;
  animation: aska-ttl-pulse 1s ease-in-out infinite;
}
.cart-ttl--expired .aska-cart-ttl-pill {
  background: rgba(159,18,18,0.18); color: #7f1212;
  text-decoration: line-through;
}
@keyframes aska-ttl-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* End fresh design language. */