/* ============================================================
 * Qordy Admin Component Layer — "Warm Ember Ops"
 * Centralized, self-contained design-system classes.
 * Consumes public/assets/css/tokens.css variables ONLY.
 * Framework-agnostic (NOT dependent on compiled Tailwind),
 * so new pages render correctly without a tailwind rebuild.
 *
 * Naming convention: BEM-ish, all prefixed `q-`.
 *   Block:    .q-card
 *   Element:  .q-card__title
 *   Modifier: .q-btn--primary  /  .q-badge--success
 * ============================================================ */

/* ---------- Page shell & layout ---------- */
.q-page {
  background: var(--color-canvas);
  min-height: 100%;
  padding: var(--space-4);
  font-family: var(--font-body);
  color: var(--color-text-primary);
}
@media (min-width: 768px) { .q-page { padding: var(--space-6); } }
.q-container { width: 100%; max-width: var(--max-w, 1280px); margin-inline: auto; }
.q-stack > * + * { margin-top: var(--space-4); }
.q-stack--md > * + * { margin-top: var(--space-3); }
.q-stack--lg > * + * { margin-top: var(--space-6); }

.q-grid { display: grid; gap: var(--space-4); }
.q-grid--sidebar { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .q-grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); } }
.q-grid--2 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.q-grid--3 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.q-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px) { .q-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 768px) {
  .q-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .q-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1024px) { .q-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ---------- Page header (eyebrow + title + actions) ---------- */
.q-page-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-5);
}
.q-page-header__eyebrow {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand-accent-hover);
}
.q-page-header__title {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl); font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight); letter-spacing: -0.02em; color: var(--color-ink);
  margin: 2px 0 0;
}
@media (min-width: 768px){ .q-page-header__title { font-size: var(--font-size-3xl);} }
.q-page-header__subtitle { font-size: var(--font-size-base); color: var(--color-text-secondary); margin-top: 4px; }
.q-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Card ---------- */
.q-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.q-card--pad { padding: var(--space-5); }
.q-card--hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.q-card__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-1);
}
.q-card__title {
  font-family: var(--font-display); font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold); color: var(--color-ink); margin: 0;
}
.q-card__body { padding: var(--space-5); }

/* ---------- Stat card ---------- */
.q-stat {
  position: relative; overflow: hidden;
  background: var(--color-surface-1); border: 1px solid var(--color-border-1);
  border-radius: var(--radius-card); padding: var(--space-4); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.q-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.q-stat__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.q-stat__icon {
  width: 38px; height: 38px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-amber-soft); color: var(--color-brand-accent-hover);
}
.q-stat__label {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary);
}
.q-stat__value {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl); font-weight: var(--font-weight-black);
  line-height: 1.1; letter-spacing: -0.02em; color: var(--color-ink); margin-top: 2px;
}
.q-stat__delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.q-stat__delta--up { color: var(--color-status-success); }
.q-stat__delta--down { color: var(--color-status-danger); }
.q-stat__delta--flat { color: var(--color-text-muted); }

/* ---------- Buttons ---------- */
.q-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body); font-size: var(--font-size-base); font-weight: var(--font-weight-bold);
  line-height: 1; padding: 10px 16px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast), border-color var(--transition-base);
  white-space: nowrap; user-select: none;
}
.q-btn:active { transform: translateY(1px); }
.q-btn--sm { padding: 7px 12px; font-size: var(--font-size-sm); }
.q-btn--lg { padding: 13px 22px; font-size: var(--font-size-md); }
.q-btn--primary { background: var(--color-brand-accent); color: #fff; box-shadow: 0 6px 16px -6px var(--color-amber-ring); }
.q-btn--primary:hover { background: var(--color-brand-accent-hover); box-shadow: 0 10px 22px -8px var(--color-amber-ring); }
.q-btn--soft { background: var(--color-amber-soft); color: var(--color-brand-accent-hover); }
.q-btn--soft:hover { background: #fde68a; }
.q-btn--ghost { background: var(--color-surface-1); color: var(--color-text-primary); border-color: var(--color-border-1); }
.q-btn--ghost:hover { background: var(--color-surface-2); border-color: var(--color-border-2); }
.q-btn--secondary { background: var(--color-surface-1); color: var(--color-text-primary); border-color: var(--color-border-1); }
.q-btn--secondary:hover { background: var(--color-surface-2); border-color: var(--color-border-2); }
.q-btn--block { width: 100%; }
.q-btn--danger { background: var(--color-status-danger); color: #fff; }
.q-btn--danger:hover { background: #b91c1c; }
.q-btn--ink { background: var(--color-ink); color: #fff; }
.q-btn--ink:hover { background: var(--color-ink-2); }

/* ---------- Badges / pills ---------- */
.q-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  padding: 3px 10px; border-radius: var(--radius-full); border: 1px solid transparent; line-height: 1.4;
}
.q-badge--success { color: var(--color-status-success); background: var(--color-status-success-bg); }
.q-badge--warning { color: var(--color-status-warning); background: var(--color-status-warning-bg); }
.q-badge--danger  { color: var(--color-status-danger);  background: var(--color-status-danger-bg); }
.q-badge--info    { color: var(--color-status-info);    background: var(--color-status-info-bg); }
.q-badge--neutral { color: var(--color-status-neutral); background: var(--color-status-neutral-bg); }
.q-badge--live    { color: #4d7c0f; background: var(--color-lime-soft); border-color: #bef264; }
.q-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Table ---------- */
.q-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); }
.q-table thead th {
  text-align: left; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary);
  padding: 10px var(--space-4); border-bottom: 1px solid var(--color-border-1); background: var(--color-surface-2);
}
.q-table tbody td { padding: 12px var(--space-4); border-bottom: 1px solid var(--color-border-1); color: var(--color-text-primary); }
.q-table tbody tr:last-child td { border-bottom: 0; }
.q-table tbody tr { transition: background var(--transition-fast); }
.q-table tbody tr:hover { background: var(--color-surface-2); }

/* ---------- Pagination ---------- */
.q-pagination { display: flex; align-items: center; gap: 4px; }
.q-pagination__btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); border: 1px solid transparent;
  background: transparent; color: var(--color-text-secondary);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.q-pagination__btn:hover:not(:disabled):not(.active) { background: var(--color-surface-2); color: var(--color-text-primary); }
.q-pagination__btn.active { background: var(--color-brand-accent); color: #fff; box-shadow: 0 4px 12px -4px var(--color-amber-ring); }
.q-pagination__btn:disabled, .q-pagination__btn.is-disabled { color: var(--color-text-muted); cursor: not-allowed; opacity: 0.5; }
.q-pagination__ellipsis { min-width: 32px; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---------- Empty state ---------- */
.q-empty { text-align: center; padding: var(--space-12) var(--space-6); color: var(--color-text-secondary); }
.q-empty__icon { width: 56px; height: 56px; margin: 0 auto var(--space-3); color: var(--color-text-muted); }
.q-empty__title { font-family: var(--font-display); font-weight: var(--font-weight-bold); color: var(--color-ink); font-size: var(--font-size-md); }

/* ---------- Section title ---------- */
.q-section-title {
  font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold);
  color: var(--color-ink); letter-spacing: -0.01em; margin: 0 0 var(--space-3);
  display: flex; align-items: center; gap: var(--space-2);
}

/* ---------- Hero (page banner) ---------- */
.q-hero {
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 45%, #fff7ed 100%);
  border: 1px solid #fcd9a8; box-shadow: var(--shadow-sm); padding: var(--space-5);
}
.q-hero__glow { position: absolute; inset: 0; pointer-events: none; }
.q-hero__glow::before { content:""; position:absolute; top:-64px; right:-64px; width:240px; height:240px; border-radius:50%; background: rgba(245,158,11,0.18); filter: blur(48px); }
.q-hero__glow::after  { content:""; position:absolute; bottom:-40px; left:-40px; width:180px; height:180px; border-radius:50%; background: rgba(132,204,22,0.16); filter: blur(48px); }
.q-hero__title { font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: var(--font-weight-black); color: var(--color-ink); letter-spacing: -0.02em; margin: 0; position: relative; }

/* ---------- Accessibility & motion ---------- */
.q-btn:focus-visible, a.q-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.q-card:focus-within { box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) {
  .q-card, .q-stat, .q-btn, .q-table tbody tr { transition: none !important; }
}
.q-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Form controls ---------- */
.q-field { margin-bottom: var(--space-4); }
.q-field:last-child { margin-bottom: 0; }
.q-label {
  display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); margin-bottom: 6px;
}
.q-input, .q-select, .q-textarea {
  width: 100%; font-family: var(--font-body); color: var(--color-text-primary);
  background: var(--color-surface-1); border: 1px solid var(--color-border-1);
  border-radius: var(--radius-md); padding: 11px 14px; line-height: 1.4;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.q-input::placeholder, .q-textarea::placeholder { color: var(--color-text-muted); }
.q-input:focus, .q-select:focus, .q-textarea:focus {
  outline: none; border-color: var(--color-brand-accent); box-shadow: var(--shadow-focus);
}
.q-input:disabled, .q-input[readonly] {
  background: var(--color-surface-3); color: var(--color-text-secondary); cursor: not-allowed;
}
.q-input--error { border-color: var(--color-status-danger); }
.q-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 5px; }
.q-hint--error { color: var(--color-status-danger); }

/* ---------- Compact stat / pulse strip ---------- */
.q-stat--compact { padding: var(--space-3); }
.q-stat--compact .q-stat__value { font-size: var(--font-size-lg); }
.q-pulse-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 640px) { .q-pulse-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- Loading / skeleton ---------- */
.q-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--color-border-1);
  border-top-color: var(--color-brand-accent);
  animation: q-spin 0.7s linear infinite;
}
.q-spinner--lg { width: 28px; height: 28px; }
@keyframes q-spin { to { transform: rotate(360deg); } }
.q-loading-inline {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-8) var(--space-3); gap: var(--space-2);
}
.q-loading-toast {
  position: fixed; top: var(--space-4); right: var(--space-4); z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--space-2);
  box-shadow: var(--shadow-xl);
}
.q-loading-toast[hidden], .q-hidden, .hidden { display: none !important; }

/* ---------- Chart surface ---------- */
.q-chart-wrap { position: relative; min-height: 176px; }
.q-chart-wrap--sm { min-height: 140px; }
.q-chart-wrap--lg { min-height: 256px; }
@media (min-width: 640px) { .q-chart-wrap--lg { min-height: 320px; } }
.q-chart-wrap [data-chart-placeholder] {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; pointer-events: none;
}

/* ---------- Toolbar / filters ---------- */
.q-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.q-toolbar--between { justify-content: space-between; }
.q-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.q-filter-group__label {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted);
  margin-right: var(--space-1);
}
.q-filter-divider {
  width: 1px; height: 20px; background: var(--color-border-1); margin-inline: var(--space-1);
  display: none;
}
@media (min-width: 640px) { .q-filter-divider { display: block; } }
.filter-chip.q-btn--ghost.active,
.filter-chip.q-btn--ghost.q-btn--ink.active,
.period-chip.q-btn--ghost.active {
  background: var(--color-amber-soft); color: var(--color-brand-accent-hover);
  border-color: var(--color-brand-accent);
}
.lang-tab-btn {
  padding: 6px 12px; border-radius: var(--radius-md); border: 1px solid transparent;
  background: transparent; color: var(--color-text-secondary);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.lang-tab-btn:hover:not(.active) { background: var(--color-surface-2); color: var(--color-text-primary); }
.lang-tab-btn.active { background: var(--color-brand-accent); color: #fff; }
.q-tab-row--card {
  display: flex; flex-wrap: nowrap; gap: var(--space-1); overflow-x: auto;
  padding: var(--space-1); background: var(--color-surface-1);
  border: 1px solid var(--color-border-1); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.q-input-icon-wrap { position: relative; flex: 1 1 240px; min-width: 0; }
.q-input-icon-wrap .q-input { padding-left: 38px; }
.q-input-icon-wrap__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--color-text-muted); pointer-events: none;
}
.q-date-panel {
  margin-top: var(--space-3); padding: var(--space-3);
  background: var(--color-surface-2); border: 1px solid var(--color-border-1);
  border-radius: var(--radius-md);
}

/* ---------- Icon button ---------- */
.q-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: none; border-radius: var(--radius-md);
  background: transparent; color: var(--color-text-muted); cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.q-icon-btn:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.q-icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---------- Modal (admin pages) ---------- */
.q-modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
}
.q-modal-backdrop[hidden], .q-modal-backdrop.hidden { display: none !important; }
.q-modal-backdrop__scrim {
  position: absolute; inset: 0; background: rgb(26 26 46 / 0.35); backdrop-filter: blur(2px);
}
.q-modal {
  position: relative; width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto;
  background: var(--color-surface-1); border: 1px solid var(--color-border-1);
  border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-xl);
}
.q-modal--wide { max-width: 48rem; }
.q-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.q-modal__title {
  font-family: var(--font-display); font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold); color: var(--color-ink); margin: 0;
}

/* ---------- Legend swatches (heatmap etc.) ---------- */
.q-legend { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.q-legend__swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: var(--radius-sm);
}
.q-legend__swatch--low { background: var(--color-amber-soft); }
.q-legend__swatch--high { background: var(--color-brand-accent); }
.q-legend--desktop { display: none; }
@media (min-width: 640px) { .q-legend--desktop { display: inline-flex; } }

/* ---------- AI category tabs (dashboard) ---------- */
.q-tab-row { display: flex; align-items: center; gap: var(--space-1); overflow-x: auto; padding-bottom: var(--space-1); }
.q-tab {
  padding: 6px 10px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm); border: 1px solid var(--color-border-1);
  background: var(--color-surface-2); color: var(--color-text-secondary);
  cursor: pointer; white-space: nowrap; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.q-tab:hover { background: var(--color-surface-1); border-color: var(--color-border-2); }
.q-tab[aria-selected="true"], .q-tab.selected {
  background: var(--color-amber-soft); color: var(--color-brand-accent-hover); border-color: var(--color-brand-accent);
}

.stock-cat-filter {
  display: inline-flex; align-items: center; justify-content: flex-start; min-width: 0;
  min-height: 2.5rem; padding: 0 12px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border-1); background: var(--color-surface-1);
  color: var(--color-text-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0; max-width: min(100%, 14rem);
}
.stock-cat-filter.is-all { justify-content: center; max-width: none; padding: 0 16px; }
.stock-cat-filter.active.is-all {
  background: var(--color-brand-accent); color: #fff; border-color: var(--color-brand-accent);
  box-shadow: 0 4px 12px -4px var(--color-amber-ring);
}
.stock-cat-filter.active:not(.is-all) {
  background: var(--color-amber-soft); color: var(--color-brand-accent-hover); border-color: var(--color-brand-accent);
}
.stock-cat-filter:not(.active):hover { background: var(--color-surface-2); border-color: var(--color-border-2); }

/* ---------- Date range filter (dashboard header) ---------- */
.q-range-filter {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  padding: var(--space-1); background: var(--color-surface-2);
  border: 1px solid var(--color-border-1); border-radius: var(--radius-lg);
}
.q-range-filter .q-btn svg { width: 14px; height: 14px; margin-right: 4px; flex-shrink: 0; }

/* ---------- AI insights mini stats ---------- */
.q-insights-body { min-height: 72px; margin-top: var(--space-3); }
.q-insights-loading { display: flex; align-items: center; gap: var(--space-2); }
.q-mini-stat-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2);
  margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-1);
}
.q-mini-stat {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2); background: var(--color-surface-2);
  border: 1px solid var(--color-border-1); border-radius: var(--radius-md);
}
.q-mini-stat__icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-brand-accent); margin-top: 2px; }
.q-mini-stat__value { font-family: var(--font-display); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-ink); line-height: 1.2; }
.q-mini-stat__label { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }

/* ---------- Empty inline (list placeholders) ---------- */
.q-empty--inline { padding: var(--space-8) var(--space-4); }
.q-empty--inline .q-empty__icon { width: 48px; height: 48px; }

/* ---------- Settings vertical nav (admin/settings.php) ---------- */
.q-settings-layout { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }
@media (min-width: 1024px) {
  .q-settings-layout { flex-direction: row; gap: var(--space-6); }
  .q-settings-nav { width: 14rem; flex-shrink: 0; }
}
.q-settings-nav {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-2); background: var(--color-surface-1);
  border: 1px solid var(--color-border-1); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.q-settings-nav__btn {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  text-align: left; padding: 10px 14px; border-radius: var(--radius-md);
  border: 1px solid transparent; background: transparent;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary); cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.q-settings-nav__btn:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.q-settings-nav__btn.selected,
.q-settings-nav__btn[aria-selected="true"] {
  background: var(--color-amber-soft); color: var(--color-brand-accent-hover);
  border-color: var(--color-brand-accent);
}
.q-settings-nav__btn--danger { color: var(--color-status-danger); }
.q-settings-nav__btn--danger:hover { background: var(--color-status-danger-bg); }
.q-settings-nav__btn--danger.selected,
.q-settings-nav__btn--danger[aria-selected="true"] {
  background: var(--color-status-danger-bg); color: var(--color-status-danger);
  border-color: color-mix(in srgb, var(--color-status-danger) 35%, transparent);
}
.q-callout {
  padding: var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-border-1); background: var(--color-amber-soft);
  font-size: var(--font-size-sm); color: var(--color-text-primary); line-height: 1.55;
}
.q-callout strong { color: var(--color-ink); }
.q-callout a { color: var(--color-brand-accent-hover); font-weight: var(--font-weight-bold); text-decoration: underline; text-underline-offset: 2px; }
.q-upload-zone {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--color-surface-2); border: 2px dashed var(--color-border-2);
  border-radius: var(--radius-lg);
}
.q-permission-banner {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-status-warning-bg); border: 1px solid color-mix(in srgb, var(--color-status-warning) 35%, transparent);
  color: var(--color-status-warning); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
}
.q-toggle-row {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface-2); border: 1px solid var(--color-border-1);
  cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast);
}
.q-toggle-row:hover { background: var(--color-surface-3); border-color: var(--color-border-2); }
.q-toggle-row__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.q-toggle-row__hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }
.q-stat-mini {
  padding: var(--space-3); background: var(--color-surface-2);
  border: 1px solid var(--color-border-1); border-radius: var(--radius-md); text-align: center;
}
.q-stat-mini__label { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
.q-stat-mini__value { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-ink); margin-top: var(--space-1); }
.q-stat-mini__pct { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 2px; }

/* Legacy Tailwind color utilities scoped to settings migration */
#admin-settings-root .text-slate-900 { color: var(--color-text-primary); }
#admin-settings-root .text-slate-800 { color: var(--color-text-primary); }
#admin-settings-root .text-slate-700,
#admin-settings-root .text-slate-600 { color: var(--color-text-secondary); }
#admin-settings-root .text-slate-500 { color: var(--color-text-secondary); }
#admin-settings-root .text-slate-400 { color: var(--color-text-muted); }
#admin-settings-root .hover\:text-slate-600:hover { color: var(--color-text-secondary); }
#admin-settings-root .bg-slate-50 { background: var(--color-surface-2); }
#admin-settings-root .bg-slate-100 { background: var(--color-surface-3); }
#admin-settings-root .hover\:bg-slate-100:hover { background: var(--color-surface-3); }
#admin-settings-root .border-slate-100,
#admin-settings-root .border-slate-200,
#admin-settings-root .border-slate-300 { border-color: var(--color-border-1); }
#admin-settings-root .text-orange-500,
#admin-settings-root .text-orange-600,
#admin-settings-root .hover\:text-orange-600:hover { color: var(--color-brand-accent-hover); }
#admin-settings-root .text-indigo-600,
#admin-settings-root .text-indigo-700,
#admin-settings-root .text-indigo-900 { color: var(--color-brand-accent-hover); }
#admin-settings-root .bg-indigo-50,
#admin-settings-root .bg-indigo-100 { background: var(--color-amber-soft); }
#admin-settings-root .bg-indigo-600,
#admin-settings-root .hover\:bg-indigo-700:hover { background: var(--color-brand-accent); }
#admin-settings-root .border-indigo-100,
#admin-settings-root .border-indigo-200 { border-color: color-mix(in srgb, var(--color-brand-accent) 25%, transparent); }
#admin-settings-root .text-purple-600,
#admin-settings-root .text-purple-700 { color: var(--color-brand-accent-hover); }
#admin-settings-root .bg-purple-50 { background: var(--color-amber-soft); }

/* ---------- Reports page (admin/reports.php) ---------- */
.reports-tab-btn { transition: all var(--transition-fast); border-bottom: 2px solid transparent; }
.reports-tab-btn.active { color: var(--color-brand-accent-hover); border-bottom-color: var(--color-brand-accent); }
.reports-tab-btn:not(.active) { color: var(--color-text-muted); }
.reports-fade-in { animation: reportsFadeIn 0.3s ease; }
@keyframes reportsFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.reports-drop-in { animation: reportsDropIn 0.15s ease; }
@keyframes reportsDropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.reports-emp-bar { background: var(--color-brand-accent); }
.q-export-menu a {
  display: block; padding: var(--space-2) var(--space-4); font-size: var(--font-size-xs);
  color: var(--color-text-muted); transition: background var(--transition-fast), color var(--transition-fast);
}
.q-export-menu a:hover { background: var(--color-amber-soft); color: var(--color-text-primary); }
.q-fin-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3); border-radius: var(--radius-lg); }
.q-fin-row--margin { background: var(--color-brand-accent); color: #fff; }
.q-zone-card {
  border: 1px solid var(--color-border-1); border-radius: var(--radius-lg); overflow: hidden;
}
.q-zone-card__header {
  padding: var(--space-3); cursor: pointer; transition: background var(--transition-fast);
}
.q-zone-card__header:hover { background: var(--color-surface-2); }
.q-table-mini {
  padding: var(--space-2); border-radius: var(--radius-md);
  border: 1px solid var(--color-border-1); background: var(--color-surface-1);
}
.q-emp-row {
  border: 1px solid var(--color-border-1); border-radius: var(--radius-lg);
  padding: var(--space-4); transition: box-shadow var(--transition-fast);
}
.q-rank-badge {
  width: 2rem; height: 2rem; border-radius: var(--radius-md);
  border: 1px solid var(--color-border-1); display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); flex-shrink: 0;
}
.q-rank-badge--1 { background: var(--color-amber-soft); color: var(--color-brand-accent-hover); border-color: var(--color-brand-accent); }
.q-rank-badge--2 { background: var(--color-surface-2); color: var(--color-text-secondary); }
.q-rank-badge--3 { background: var(--color-status-warning-bg); color: var(--color-status-warning); }
.q-progress-track {
  width: 100%; height: 6px; border-radius: var(--radius-full);
  background: var(--color-surface-3); overflow: hidden;
}
#reports-page-root .text-slate-900 { color: var(--color-text-primary); }
#reports-page-root .text-slate-600,
#reports-page-root .text-slate-500 { color: var(--color-text-secondary); }
#reports-page-root .text-slate-400 { color: var(--color-text-muted); }
#reports-page-root .hover\:text-slate-600:hover { color: var(--color-text-secondary); }
#reports-page-root .bg-slate-50,
#reports-page-root .bg-slate-100 { background: var(--color-surface-2); }
#reports-page-root .border-slate-100,
#reports-page-root .border-slate-200,
#reports-page-root .border-slate-200\/60 { border-color: var(--color-border-1); }
#reports-page-root .divide-slate-50 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-border-1); }
#reports-page-root .bg-emerald-50 { background: var(--color-status-success-bg); }
#reports-page-root .text-emerald-600 { color: var(--color-status-success); }

/* ---------- Queue admin (admin/queue/index.php) ---------- */
#queue-admin-root .text-slate-900,
#queue-admin-root .text-slate-800,
#queue-admin-root .text-slate-700 { color: var(--color-text-primary); }
#queue-admin-root .text-slate-600,
#queue-admin-root .text-slate-500 { color: var(--color-text-secondary); }
#queue-admin-root .text-slate-400 { color: var(--color-text-muted); }
#queue-admin-root .hover\:text-slate-600:hover,
#queue-admin-root .hover\:text-slate-700:hover { color: var(--color-text-secondary); }
#queue-admin-root .bg-slate-50,
#queue-admin-root .bg-slate-100 { background: var(--color-surface-2); }
#queue-admin-root .hover\:bg-slate-200:hover,
#queue-admin-root .hover\:bg-white:hover { background: var(--color-surface-1); }
#queue-admin-root .border-slate-100,
#queue-admin-root .border-slate-200 { border-color: var(--color-border-1); }
#queue-admin-root .text-orange-600,
#queue-admin-root .hover\:text-orange-700:hover { color: var(--color-brand-accent-hover); }
#queue-admin-root .text-amber-600,
#queue-admin-root .text-amber-800,
#queue-admin-root .text-amber-900 { color: var(--color-brand-accent-hover); }
#queue-admin-root .bg-amber-50 { background: var(--color-amber-soft); }
#queue-admin-root .border-amber-200 { border-color: color-mix(in srgb, var(--color-brand-accent) 25%, transparent); }
#queue-admin-root .bg-slate-900\/70 { background: color-mix(in srgb, var(--color-ink) 70%, transparent); }

/* Stock + Shifts admin scoped legacy remap */
#stock-admin-root .text-slate-900,
#stock-admin-root .text-slate-800,
#stock-admin-root .text-slate-700,
#shifts-admin-root .text-slate-900 { color: var(--color-text-primary); }
#stock-admin-root .text-slate-600,
#stock-admin-root .text-slate-500,
#shifts-admin-root .text-slate-600,
#shifts-admin-root .text-slate-700 { color: var(--color-text-secondary); }
#stock-admin-root .text-slate-400,
#stock-admin-root .text-slate-300,
#shifts-admin-root .text-slate-400 { color: var(--color-text-muted); }
#stock-admin-root .bg-slate-50,
#stock-admin-root .bg-slate-50\/80,
#stock-admin-root .bg-slate-100,
#shifts-admin-root .bg-slate-50,
#shifts-admin-root .bg-slate-100,
#shifts-admin-root .bg-slate-200 { background: var(--color-surface-2); }
#stock-admin-root .border-slate-100,
#stock-admin-root .border-slate-200,
#stock-admin-root .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
#shifts-admin-root .border-slate-200 { border-color: var(--color-border-1); }
#stock-admin-root .text-orange-600,
#stock-admin-root .hover\:text-orange-700:hover { color: var(--color-brand-accent-hover); }
#stock-admin-root .bg-orange-50,
#stock-admin-root .text-orange-900 { background: var(--color-amber-soft); color: var(--color-brand-accent-hover); }
#stock-admin-root .border-orange-100,
#stock-admin-root .border-orange-200 { border-color: color-mix(in srgb, var(--color-brand-accent) 25%, transparent); }
#stock-admin-root .hover\:bg-orange-50\/20:hover { background: color-mix(in srgb, var(--color-amber-soft) 40%, transparent); }
#shifts-admin-root .hover\:text-slate-600:hover { color: var(--color-text-secondary); }
#shifts-admin-root .hover\:bg-slate-300:hover { background: var(--color-surface-3); }

/* ============================================================
 * PHASE 1 — MODERN DASHBOARD UTILITIES (2026 Design Trends)
 * Glassmorphism, gradients, hover-lift, stagger animations
 * ============================================================ */

/* ---- Glassmorphism cards ---- */
.q-card--glass {
 background: rgba(255, 255, 255, 0.8);
 backdrop-filter: blur(20px) saturate(180%);
 -webkit-backdrop-filter: blur(20px) saturate(180%);
 border: 1px solid rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .q-card--glass {
 background: rgba(30, 41, 59, 0.7);
 border-color: rgba(255, 255, 255, 0.08);
}

/* ---- Elevated card (hover-lift) ---- */
.q-card--elevated {
 transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.q-card--elevated:hover {
 transform: translateY(-6px);
 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(245, 158, 11, 0.08);
}

/* ---- Stat card gradient variant ---- */
.q-stat--gradient {
 background: linear-gradient(135deg, var(--color-amber-soft) 0%, var(--color-surface-1) 60%);
 border-color: rgba(245, 158, 11, 0.2);
}

/* ---- Table row amber hover ---- */
.q-table-row-hover-amber tbody tr { transition: background var(--transition-fast); }
.q-table-row-hover-amber tbody tr:hover { background: var(--color-amber-soft); }

/* ---- Toggle switch (BEM) ---- */
.q-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.q-toggle input, .q-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; clip: rect(0,0,0,0); border: 0; }
.q-toggle__slider, .q-toggle__track {
 position: relative; width: 44px; height: 24px;
 background: var(--color-border-2); border-radius: 24px;
 transition: background var(--transition-base); flex-shrink: 0;
}
.q-toggle__slider::before, .q-toggle__track::after {
 content: ""; position: absolute; top: 2px; left: 2px;
 width: 20px; height: 20px; background: #fff;
 border-radius: 50%; transition: transform var(--transition-base);
 box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.q-toggle input:checked + .q-toggle__slider,
.q-toggle__input:checked + .q-toggle__track { background: var(--color-brand-accent); }
.q-toggle input:checked + .q-toggle__slider::before,
.q-toggle__input:checked + .q-toggle__track::after { transform: translateX(20px); }
.q-toggle--sm .q-toggle__slider, .q-toggle--sm .q-toggle__track { width: 36px; height: 20px; }
.q-toggle--sm .q-toggle__slider::before, .q-toggle--sm .q-toggle__track::after { width: 16px; height: 16px; }
.q-toggle--sm .q-toggle input:checked + .q-toggle__slider::before,
.q-toggle--sm .q-toggle__input:checked + .q-toggle__track::after { transform: translateX(16px); }

/* ---- Progress bar gradient ---- */
.q-progress-bar {
 height: 6px; background: var(--color-surface-3);
 border-radius: 3px; overflow: hidden; margin-top: var(--space-3);
}
.q-progress-bar__fill {
 height: 100%; border-radius: 3px;
 background: linear-gradient(90deg, var(--color-brand-accent) 0%, var(--color-brand-lime) 100%);
 transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Stagger animation ---- */
.stagger-item {
 opacity: 0;
 animation: stagger-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes stagger-in {
 from { opacity: 0; transform: translateY(16px); }
 to { opacity: 1; transform: translateY(0); }
}

/* ---- Hero glow ---- */
.q-hero-glow { position: relative; overflow: hidden; }
.q-hero-glow::before {
 content: ""; position: absolute; inset: 0; pointer-events: none;
 background:
 radial-gradient(ellipse at top right, rgba(245, 158, 11, 0.08) 0%, transparent 60%),
 radial-gradient(ellipse at bottom left, rgba(132, 204, 22, 0.06) 0%, transparent 50%);
}

/* ---- Warm card (operations/stats accent) ---- */
.q-card--warm {
 background: linear-gradient(135deg, #fffdf7 0%, #fff7ed 50%, #fef3c7 100%);
 border-color: rgba(245, 158, 11, 0.15);
}

/* ---- Quick action card (replaces bg-slate-50) ---- */
.q-quick-action {
 display: flex; flex-direction: column; align-items: center; justify-content: center;
 padding: var(--space-4); background: var(--color-surface-1);
 border: 1px solid var(--color-border-1); border-radius: var(--radius-lg);
 text-decoration: none; color: var(--color-text-primary);
 transition: all var(--transition-base); gap: var(--space-2);
 text-align: center;
}
.q-quick-action:hover {
 background: var(--color-amber-soft);
 border-color: var(--color-brand-accent);
 transform: translateY(-2px);
 box-shadow: 0 10px 20px -10px rgba(245, 158, 11, 0.3);
}
.q-quick-action__icon {
 width: 48px; height: 48px; border-radius: var(--radius-md);
 display: inline-flex; align-items: center; justify-content: center;
 background: var(--color-amber-soft); color: var(--color-brand-accent-hover);
 transition: transform var(--transition-base);
}
.q-quick-action:hover .q-quick-action__icon { transform: scale(1.1); }
.q-quick-action__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.q-quick-action__desc { font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; }

/* ---- Order status pill (replaces Tailwind bg-green-100 etc.) ---- */
.q-status-pill {
 display: inline-flex; align-items: center; gap: 4px;
 padding: 3px 10px; border-radius: var(--radius-full);
 font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
 background: var(--color-surface-2); color: var(--color-text-secondary);
}
.q-status-pill--success { background: var(--color-status-success-bg); color: var(--color-status-success); }
.q-status-pill--warning { background: var(--color-status-warning-bg); color: var(--color-status-warning); }
.q-status-pill--danger { background: var(--color-status-danger-bg); color: var(--color-status-danger); }
.q-status-pill--info { background: var(--color-status-info-bg); color: var(--color-status-info); }
.q-status-pill--pending { background: var(--color-status-pending-bg); color: var(--color-status-pending); }

/* ---- Input focus amber (replaces focus:border-orange-200) ---- */
.q-input--focus-amber:focus {
 outline: none; border-color: var(--color-brand-accent);
 box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

/* ---- Hero badge (eyebrow) ---- */
.q-page-header__eyebrow--accent {
 display: inline-flex; align-items: center; gap: var(--space-1);
 padding: 4px 12px; background: var(--color-amber-soft);
 border: 1px solid var(--color-brand-accent); border-radius: var(--radius-full);
 font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
 letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand-accent-hover);
}

/* ---- Title gradient variant ---- */
.q-page-header__title--gradient {
 background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-brand-accent-hover) 100%);
 -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
 color: transparent;
}

/* ---- Motion respect ---- */
@media (prefers-reduced-motion: reduce) {
 .q-card--elevated, .q-card--glass, .q-card--warm,
 .q-quick-action, .stagger-item, .q-progress-bar__fill {
 transition: none !important; animation: none !important; transform: none !important;
 }
 .stagger-item { opacity: 1; }
}

/* ---- Extra components used in views ---- */
.q-card--gradient {
 background: linear-gradient(135deg, var(--color-surface-1) 0%, var(--color-amber-soft) 100%);
 border-color: var(--color-brand-accent-hover);
}
.q-card__logo {
 width: 42px; height: 42px; border-radius: var(--radius-md);
 display: inline-flex; align-items: center; justify-content: center;
 background: var(--color-amber-soft); color: var(--color-brand-accent-hover);
 font-size: 20px; flex-shrink: 0;
}
.q-tab-content { display: none; }
.q-tab-content[hidden] { display: none; }
.q-status-pill {
 display: inline-flex; align-items: center; padding: 2px 10px;
 border-radius: 9999px; font-size: var(--font-size-xs); font-weight: 500;
}
.q-status-pill--info { background: var(--color-status-info-bg); color: var(--color-status-info); }
.q-status-pill--success { background: var(--color-status-success-bg); color: var(--color-status-success); }
.q-status-pill--danger { background: var(--color-status-danger-bg); color: var(--color-status-danger); }
.q-status-pill--warning { background: var(--color-status-warning-bg); color: var(--color-status-warning); }
.q-status-pill--pending { background: var(--color-status-neutral-bg); color: var(--color-status-neutral); }
.q-status-pill--neutral { background: var(--color-surface-2); color: var(--color-text-secondary); }
.q-badge {
 display: inline-flex; align-items: center; padding: 2px 8px;
 border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
}
.q-badge--success { background: var(--color-status-success-bg); color: var(--color-status-success); }
.q-badge--danger { background: var(--color-status-danger-bg); color: var(--color-status-danger); }
.q-badge--info { background: var(--color-status-info-bg); color: var(--color-status-info); }
.q-badge--warning { background: var(--color-status-warning-bg); color: var(--color-status-warning); }
.q-badge--neutral { background: var(--color-surface-2); color: var(--color-text-secondary); }
.q-badge--live { animation: q-pulse 2s infinite; }
.q-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; }
.q-rank-badge {
 width: 28px; height: 28px; border-radius: 50%;
 display: inline-flex; align-items: center; justify-content: center;
 font-size: var(--font-size-xs); font-weight: var(--font-weight-black);
}
.q-rank-badge--1 { background: #fbbf24; color: #78350f; }
.q-rank-badge--2 { background: #94a3b8; color: #1e293b; }
.q-rank-badge--3 { background: #d97706; color: #fff; }
.q-text-metric {
 font-family: var(--font-display);
 font-size: var(--font-size-2xl); font-weight: var(--font-weight-black);
 letter-spacing: -0.02em; color: var(--color-ink);
}
.q-text-label {
 font-size: var(--font-size-sm); color: var(--color-text-secondary);
 font-weight: var(--font-weight-medium);
}
.q-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.q-legend--desktop { display: none; }
@media (min-width: 768px) { .q-legend--desktop { display: flex; } }
.q-legend__swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.q-legend__swatch--high { background: var(--color-brand-accent-hover); }
.q-legend__swatch--low { background: var(--color-lime-soft); }
.q-input-icon-wrap { position: relative; }
.q-input-icon-wrap__icon {
 position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
 color: var(--color-text-tertiary); pointer-events: none;
}
.q-pulse-grid { display: grid; gap: var(--space-4); }
.q-insights-body { padding: var(--space-4); }
.q-insights-loading { display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.q-zone-card { background: var(--color-surface-1); border: 1px solid var(--color-border-1); border-radius: var(--radius-card); }
.q-zone-card__header { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-1); display: flex; align-items: center; justify-content: space-between; }
.q-emp-row, .q-fin-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-2); }
.q-fin-row--margin { margin-top: var(--space-3); }
.q-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.q-filter-divider { width: 1px; height: 24px; background: var(--color-border-2); margin: 0 var(--space-1); }
.q-filter-group__label { font-size: var(--font-size-xs); color: var(--color-text-secondary); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; }
.q-date-panel { background: var(--color-surface-1); border: 1px solid var(--color-border-1); border-radius: var(--radius-card); padding: var(--space-4); }
.q-range-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.q-loading-inline { display: inline-flex; align-items: center; gap: var(--space-2); }
.q-loading-toast { position: fixed; bottom: var(--space-4); right: var(--space-4); background: var(--color-ink); color: var(--color-surface-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 9999; }
.q-textarea { width: 100%; padding: var(--space-3); border: 1px solid var(--color-border-1); border-radius: var(--radius-md); background: var(--color-surface-1); color: var(--color-text-primary); font-family: inherit; font-size: var(--font-size-sm); resize: vertical; }
.q-textarea:focus { outline: none; border-color: var(--color-brand-accent); box-shadow: 0 0 0 3px var(--color-brand-accent-muted); }
.q-mini-stat { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; }
.q-mini-stat__icon { width: 28px; height: 28px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.q-mini-stat__label { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.q-mini-stat__value { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-ink); }
.q-mini-stat__pct { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.q-mini-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); }
.q-table-mini { width: 100%; font-size: var(--font-size-sm); }
.q-table-mini th { text-align: left; padding: var(--space-2) var(--space-3); font-weight: var(--font-weight-bold); color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-1); }
.q-table-mini td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-2); }
.q-hidden { display: none !important; }
.q-sr-only {
 position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
 overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* Skip link: visually hidden until keyboard focus — never a flex column */
.q-skip-link,
.skip-link {
 position: fixed !important;
 top: 0.5rem;
 left: 0.5rem;
 z-index: 100000;
 width: auto !important;
 max-width: calc(100vw - 1rem);
 height: auto !important;
 margin: 0 !important;
 padding: 0.625rem 1rem;
 border-radius: 0.5rem;
 background: #6366f1;
 color: #fff;
 font-size: 0.8125rem;
 font-weight: 600;
 line-height: 1.25;
 text-decoration: none;
 white-space: nowrap;
 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 overflow: hidden;
 flex: none !important;
 align-self: auto !important;
}
.q-skip-link:focus,
.q-skip-link:focus-visible,
.skip-link:focus,
.skip-link:focus-visible {
 clip: auto;
 clip-path: none;
 overflow: visible;
 outline: 2px solid #4f46e5;
 outline-offset: 2px;
}
.q-spinner {
 display: inline-block; width: 24px; height: 24px;
 border: 2px solid var(--color-border-2); border-top-color: var(--color-brand-accent);
 border-radius: 50%; animation: q-spin 0.6s linear infinite;
}
.q-spinner--lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes q-spin { to { transform: rotate(360deg); } }
.q-hidden { display: none !important; }

/* ---------- Brand gradient utilities (replace 6+ inline gradients) ---------- */
.q-gradient-brand {
  background: linear-gradient(135deg, var(--color-brand-primary, #6366f1) 0%, var(--color-brand-secondary, #8b5cf6) 100%);
}
.q-gradient-brand-text {
  background: linear-gradient(135deg, var(--color-brand-primary, #6366f1) 0%, var(--color-brand-secondary, #8b5cf6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.q-text-brand { color: var(--color-brand-accent, #f59e0b); }
.q-bg-brand-soft { background: var(--color-amber-soft, #fef3c7); }

/* ---------- Page bg tokens (consolidate 4 hardcoded values) ---------- */
.q-page-canvas { background: var(--color-canvas, #f8fafc); }

/* ---------- Reservation page (replaces inline 200-line <style>) ---------- */
.reservation-card {
 background: var(--color-surface-1, #fff);
 border-radius: 20px;
 box-shadow: 0 4px 20px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.05);
 border: 1px solid rgba(0,0,0,0.04);
 transition: all 0.3s ease;
 padding: var(--space-4, 16px);
}
.reservation-card:hover {
 box-shadow: 0 8px 30px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
}
.info-box {
 background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
 border-radius: 16px;
 padding: 16px 20px;
 border: 1px solid rgba(0,0,0,0.03);
}
.info-box-label {
 font-size: 10px;
 font-weight: 800;
 color: var(--color-text-muted, #64748b);
 text-transform: uppercase;
 letter-spacing: 0.1em;
 margin-bottom: 6px;
}
.info-box-value {
 font-size: 16px;
 font-weight: 700;
 color: var(--color-ink, #0f172a);
}
.status-badge {
 display: inline-flex;
 align-items: center;
 padding: 6px 14px;
 border-radius: 9999px;
 font-size: 11px;
  font-weight: 700;
 letter-spacing: 0.025em;
 text-transform: uppercase;
 transition: all 0.2s ease;
}
.status-badge[data-status="CONFIRMED"] { background: var(--color-status-success-bg, #d1fae5); color: #065f46; }
.status-badge[data-status="PENDING"] { background: var(--color-status-warning-bg, #fef3c7); color: #92400e; }
.status-badge[data-status="CANCELLED"] { background: var(--color-status-danger-bg, #fee2e2); color: #991b1b; }
.status-badge[data-status="COMPLETED"] { background: var(--color-status-info-bg, #dbeafe); color: #1e40af; }
.status-badge[data-status="NO_SHOW"] { background: var(--color-surface-2, #f3f4f6); color: #374151; }
.status-badge:hover { transform: scale(1.05); cursor: pointer; }

/* ---------- Analytics page (replaces inline <style>) ---------- */
.analytics-page { min-height: 100vh; }
.kpi-card { transition: all 0.2s ease; }
.kpi-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.chart-card { transition: all 0.2s ease; }
.order-row { transition: all 0.15s ease; }
.order-row:hover { background: #f8fafc; }
.order-arrow { transition: transform 0.2s ease; }
.order-arrow.rotate-90 { transform: rotate(90deg); }
.order-items { max-height: 500px; overflow-y: auto; }
.fade-in { animation: q-fade-in 0.3s ease; }
@keyframes q-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Product sales page (replaces inline <style>) ---------- */
.product-sales-page { min-height: 100vh; }
.stat-card { transition: all 0.2s ease; border: 1px solid rgba(0,0,0,0.04); }
.tab-btn { transition: all 0.15s ease; }
.tab-btn.active { background: #0f172a; color: #fff; }
.product-row { transition: all 0.15s ease; }
.product-row:hover { background: #f8fafc; }
.chart-container { position: relative; height: 300px; }
.period-chip { transition: all 0.15s ease; cursor: pointer; user-select: none; }
.period-chip.active { background: #0f172a; color: #fff; border-color: #0f172a; }
.category-badge { font-size: 0.65rem; padding: 2px 8px; border-radius: 9999px; }
.trend-up { color: #16a34a; }
.trend-down { color: #dc2626; }
.progress-bar { height: 6px; border-radius: 3px; background: #f1f5f9; overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }

/* ---------- StatusPill sizes ---------- */
.q-badge--sm { font-size: 10px; padding: 1px 6px; }

/* ============================================================
 * SuperAdmin Dashboard (qodmin/dashboard) — "Modern Minimal Ops"
 *
 * Deep obsidian midnight + vibrant indigo/violet accent + sleek
 * slate canvas + soft status pills + ultra-clean cards & typography.
 * Prefix: .qs-*
 * ============================================================ */
.qs-dash {
  --qs-gap: var(--space-4);
  --qs-fs-label: 11px;
  --qs-fs-caption: 12px;
  --qs-tap: 44px;

  --qs-caption: #64748b;
  --qs-accent-text: #4f46e5;
  --qs-accent-hover: #4338ca;
  --qs-success: #10b981;
  --qs-warning: #f59e0b;
  --qs-danger: #ef4444;

  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}
.qs-dash [hidden] { display: none !important; }

/* Numeric surfaces keep column alignment while values change */
.qs-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Page header ---------- */
.qs-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .qs-head { flex-direction: row; align-items: center; justify-content: space-between; }
}
.qs-head__title {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: var(--line-height-tight);
  letter-spacing: -0.03em;
  color: #0f172a;
  margin: 0;
}
@media (min-width: 768px) { .qs-head__title { font-size: 28px; } }
.qs-head__meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--qs-caption);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.qs-head__meta strong {
  color: #334155;
  font-weight: 600;
  background: #f1f5f9;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
}
.qs-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Download / utility chips in the header */
.qs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border-radius: var(--radius-full); border: 1px solid #e2e8f0;
  background: #ffffff; color: #334155;
  font-size: var(--qs-fs-caption); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  transition: all var(--transition-fast);
}
.qs-chip:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; transform: translateY(-1px); }
.qs-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
.qs-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.qs-chip__ver {
  font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: var(--radius-full);
  background: #f1f5f9; color: #64748b;
}
.qs-chip--ink { background: #0f172a; border-color: #0f172a; color: #fff; }
.qs-chip--ink:hover { background: #1e293b; border-color: #1e293b; color: #fff; }
.qs-chip--ink .qs-chip__ver { background: rgba(255,255,255,0.18); color: #fff; }
.qs-chip--muted { color: var(--qs-caption); background: #f8fafc; cursor: default; }
.qs-chip[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

/* Live indicator + manual refresh */
.qs-live {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); color: #047857;
  font-size: var(--qs-fs-caption); font-weight: 700; white-space: nowrap;
}
.qs-live__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  animation: qs-pulse 2s ease-in-out infinite;
}
@keyframes qs-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.9); } }
.qs-refresh {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  border: 1px solid #e2e8f0; background: #ffffff;
  color: var(--qs-caption); cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  transition: all var(--transition-fast);
}
.qs-refresh:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; transform: rotate(45deg); }
.qs-refresh:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
.qs-refresh svg { width: 15px; height: 15px; }
.qs-dash[aria-busy="true"] .qs-refresh svg { animation: q-spin 0.8s linear infinite; }

/* Compact controls hit area */
.qs-refresh::before,
.qs-seg__btn::before,
.qs-chip::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: var(--qs-tap, 44px); transform: translateY(-50%);
}
.qs-refresh::before { left: -4px; right: -4px; }
.qs-seg__btn, .qs-chip { position: relative; }

/* ---------- Section heading ---------- */
.qs-sec { display: flex; flex-direction: column; gap: var(--space-3); }
.qs-sec__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2);
}
.qs-sec__title {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #64748b;
  margin: 0;
}
.qs-sec__link {
  font-size: var(--qs-fs-caption); font-weight: 700;
  color: #4f46e5; text-decoration: none;
  min-height: 32px; display: inline-flex; align-items: center;
  transition: color var(--transition-fast);
}
.qs-sec__link:hover { color: #4338ca; text-decoration: underline; }
.qs-sec__link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); border-radius: var(--radius-sm); }

/* ---------- Segmented control (period switch) ---------- */
.qs-seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: #f1f5f9; border-radius: var(--radius-full);
}
.qs-seg__btn {
  appearance: none; border: 0; cursor: pointer;
  min-height: 30px; padding: 0 14px; border-radius: var(--radius-full);
  background: transparent; color: #64748b;
  font-family: inherit; font-size: 12px; font-weight: 600;
  transition: all var(--transition-fast);
}
.qs-seg__btn:hover { color: #0f172a; }
.qs-seg__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
.qs-seg__btn[aria-pressed="true"] {
  background: #4f46e5; color: #ffffff; box-shadow: 0 2px 5px rgba(79, 70, 229, 0.3);
}

/* ---------- KPI grid ---------- */
.qs-kpis {
  display: grid; gap: var(--qs-gap);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 420px)  { .qs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .qs-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.qs-kpi {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.qs-kpi:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05);
}
.qs-kpi__top { display: flex; align-items: center; gap: 10px; }
.qs-kpi__icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #475569;
  transition: all var(--transition-fast);
}
.qs-kpi__icon svg { width: 18px; height: 18px; }
.qs-kpi__label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: #64748b;
}
.qs-kpi__value {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 26px; font-weight: 800;
  line-height: 1.1; letter-spacing: -0.03em; color: #0f172a;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
@media (min-width: 640px) { .qs-kpi__value { font-size: 28px; } }
.qs-kpi__value small { font-size: 0.55em; font-weight: 600; color: #64748b; }
.qs-kpi__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--qs-fs-caption); color: #64748b;
  margin-top: auto;
}
.qs-kpi__ctl { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.qs-kpi__ctl::-webkit-scrollbar { display: none; }
.qs-kpi__ctl .qs-seg { min-width: max-content; }
@media (max-width: 419px) { .qs-seg__btn { padding: 0 11px; } }

/* Hero Feature Card — Deep obsidian midnight gradient with indigo glow */
.qs-kpi--feature {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #312e81 100%);
  border-color: transparent; color: #ffffff;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
}
.qs-kpi--feature::after {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
  filter: blur(35px); pointer-events: none;
}
.qs-kpi--feature .qs-kpi__icon { background: rgba(99, 102, 241, 0.25); color: #a5b4fc; }
.qs-kpi--feature .qs-kpi__label { color: rgba(255, 255, 255, 0.7); }
.qs-kpi--feature .qs-kpi__value { color: #ffffff; position: relative; }
.qs-kpi--feature .qs-kpi__value small { color: rgba(255, 255, 255, 0.6); }
.qs-kpi--feature .qs-kpi__foot { color: rgba(255, 255, 255, 0.75); position: relative; }
.qs-kpi--feature .qs-sub { color: rgba(255, 255, 255, 0.7); }

/* Accented card — indigo soft gradient */
.qs-kpi--accent { background: linear-gradient(150deg, #ffffff 0%, #f5f3ff 100%); border-color: #e0e7ff; }
.qs-kpi--accent .qs-kpi__icon { background: #e0e7ff; color: #4f46e5; }

/* Trend pill */
.qs-delta {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.qs-delta svg { width: 11px; height: 11px; }
.qs-delta--up   { color: #047857; background: #dcfce7; }
.qs-delta--down { color: #b91c1c; background: #fee2e2; }
.qs-delta--flat { color: #475569; background: #f1f5f9; }
.qs-kpi--feature .qs-delta--up   { color: #34d399; background: rgba(52, 211, 153, 0.16); border: 1px solid rgba(52, 211, 153, 0.25); }
.qs-kpi--feature .qs-delta--down { color: #fca5a5; background: rgba(252, 165, 165, 0.16); border: 1px solid rgba(252, 165, 165, 0.25); }
.qs-kpi--feature .qs-delta--flat { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.12); }

/* ---------- Secondary pulse strip ---------- */
.qs-pulse {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02);
}
@media (min-width: 768px) { .qs-pulse { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } }
.qs-pulse__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  transition: background var(--transition-fast);
}
.qs-pulse__item:hover { background: #f8fafc; }
@media (min-width: 768px) {
  .qs-pulse__item + .qs-pulse__item { border-left: 1px solid #f1f5f9; }
}
.qs-pulse__icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #475569;
}
.qs-pulse__icon svg { width: 17px; height: 17px; }
.qs-pulse__body { min-width: 0; }
.qs-pulse__value {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 19px; font-weight: 800;
  color: #0f172a; line-height: 1.15; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.qs-pulse__label {
  font-size: var(--qs-fs-caption); color: #64748b; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Panel ---------- */
.qs-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02);
  overflow: hidden;
}
.qs-panel__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: 18px 22px;
  border-bottom: 1px solid #f1f5f9;
}
.qs-panel__title {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px; font-weight: 700;
  color: #0f172a; margin: 0; letter-spacing: -0.01em;
}
.qs-panel__sub { font-size: var(--qs-fs-caption); color: #64748b; margin: 2px 0 0; }
.qs-panel__body { padding: 22px; }
.qs-panel__tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.qs-split { display: grid; gap: var(--qs-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .qs-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.qs-split--single { grid-template-columns: minmax(0, 1fr); }

/* ---------- Smooth Area chart ---------- */
.qs-chart { position: relative; width: 100%; height: 190px; }
@media (min-width: 768px) { .qs-chart { height: 240px; } }
.qs-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.qs-chart__grid { stroke: #f1f5f9; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; }
.qs-chart__area { fill: url(#qsAreaFill); stroke: none; }
.qs-chart__stop1 { stop-color: #6366f1; stop-opacity: 0.25; }
.qs-chart__stop2 { stop-color: #6366f1; stop-opacity: 0.0; }
.qs-chart__line {
  fill: none; stroke: #4f46e5; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 4px 6px rgba(79, 70, 229, 0.2));
}

.qs-chart__pt {
  position: absolute; width: 44px; height: 44px; margin: 0; padding: 0;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
}
.qs-chart__pt::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: #ffffff; border: 3px solid #4f46e5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s, border-color 0.2s;
}
.qs-chart__pt:hover::before,
.qs-chart__pt:focus-visible::before { background: #4f46e5; border-color: #ffffff; transform: scale(1.4); box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.3); }
.qs-chart__pt:focus-visible { outline: none; }
.qs-chart__pt:focus-visible::after {
  content: ""; position: absolute; inset: 9px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
}
.qs-chart__tip {
  position: absolute; bottom: 100%; left: 50%;
  transform: translate(-50%, -4px);
  padding: 8px 12px; border-radius: 10px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: var(--qs-fs-caption); font-weight: 700;
  white-space: nowrap; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.qs-chart__pt--start .qs-chart__tip { left: 0; transform: translate(0, -4px); }
.qs-chart__pt--end .qs-chart__tip { left: auto; right: 0; transform: translate(0, -4px); }
.qs-chart__pt:hover .qs-chart__tip,
.qs-chart__pt:focus-visible .qs-chart__tip { opacity: 1; }
.qs-chart__tip span { display: block; font-weight: 400; color: rgba(255, 255, 255, 0.7); margin-top: 2px; }

.qs-chart__axis {
  display: grid; grid-template-columns: repeat(var(--qs-n, 7), minmax(0, 1fr));
  margin-top: var(--space-3);
  font-size: 12px; color: #64748b; font-weight: 500;
  text-align: center; font-variant-numeric: tabular-nums;
}
.qs-chart__axis span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-chart__axis .is-today { color: #4f46e5; font-weight: 700; }

/* ---------- Horizontal bar list (package sales) ---------- */
.qs-bars { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.qs-bar__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); margin-bottom: 6px;
}
.qs-bar__name {
  font-size: 13px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qs-bar__meta {
  display: flex; align-items: baseline; gap: var(--space-2); flex-shrink: 0;
  font-size: var(--qs-fs-caption); color: #64748b;
}
.qs-bar__value { font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.qs-bar__track { height: 8px; border-radius: var(--radius-full); background: #f1f5f9; overflow: hidden; }
.qs-bar__fill {
  height: 100%; border-radius: var(--radius-full);
  background: linear-gradient(90deg, #6366f1, #4f46e5);
  transition: width var(--transition-slow);
}
.qs-bar:nth-child(n+2) .qs-bar__fill { background: #6366f1; opacity: 0.8; }
.qs-bar:nth-child(n+4) .qs-bar__fill { opacity: 0.5; }

/* ---------- Data table ---------- */
.qs-tablewrap { max-height: 480px; overflow: auto; -webkit-overflow-scrolling: touch; }
.qs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qs-table th {
  position: sticky; top: 0; z-index: 1;
  background: #f8fafc;
  box-shadow: inset 0 -1px 0 #e2e8f0;
  text-align: left; padding: 11px 16px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: #64748b;
  white-space: nowrap;
}
.qs-table th.is-num, .qs-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.qs-table th.is-center, .qs-table td.is-center { text-align: center; }
.qs-table td { padding: 12px 16px; border-top: 1px solid #f1f5f9; vertical-align: middle; }
.qs-table tbody tr:first-child td { border-top: 0; }
.qs-table tbody tr { transition: background var(--transition-fast); }
.qs-table tbody tr:hover { background: #f8fafc; }

.qs-cell { display: block; min-width: 0; }
.qs-cell > span { display: block; }
.qs-table td.is-num .qs-cell { text-align: right; }

.qs-biz-cell { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.qs-biz-cell:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); border-radius: var(--radius-sm); }
.qs-biz-cell__body { display: block; min-width: 0; }
.qs-biz-cell__name {
  display: block;
  font-size: 13px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qs-biz-cell:hover .qs-biz-cell__name { color: #4f46e5; }
.qs-biz-cell__sub {
  display: block;
  font-size: 11px; color: #64748b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qs-sub { font-size: 11px; color: #64748b; font-weight: 400; }
.qs-val-zero { color: #94a3b8; }
.qs-val-pos { color: #059669; font-weight: 700; }

/* Avatar / logo */
.qs-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
  background: #f1f5f9; color: #475569;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800;
  width: 36px; height: 36px; font-size: 13px;
}
.qs-avatar img { width: 100%; height: 100%; object-fit: contain; }
.qs-avatar--lg { width: 50px; height: 50px; font-size: 17px; border-radius: 14px; }
.qs-avatar--tint { background: #e0e7ff; color: #4f46e5; }

/* Occupancy meter */
.qs-meter { width: 72px; margin: 4px 0 0 auto; height: 5px; border-radius: var(--radius-full); background: #f1f5f9; overflow: hidden; }
.qs-meter__fill { height: 100%; border-radius: var(--radius-full); background: #6366f1; }
.qs-meter__fill--high { background: #10b981; }
.qs-meter__fill--idle { background: #cbd5e1; }

/* Phone layout */
@media (max-width: 719px) {
  .qs-tablewrap { max-height: none; overflow: visible; }
  .qs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .qs-table, .qs-table tbody, .qs-table tr, .qs-table td { display: block; width: 100%; }
  .qs-table tr {
    border: 1px solid #e2e8f0; border-radius: 12px;
    padding: var(--space-3); margin: 0 0 var(--space-3);
    width: auto; background: #ffffff;
  }
  .qs-table td { border: 0; padding: 5px 0; text-align: left !important; }
  .qs-table td.is-num, .qs-table td.is-center { text-align: left !important; }
  .qs-table td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .qs-table td[data-label]::before {
    content: attr(data-label);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: #64748b;
    flex-shrink: 0;
  }
  .qs-table td.qs-cell--head { padding-bottom: var(--space-3); border-bottom: 1px solid #f1f5f9; margin-bottom: var(--space-2); }
  .qs-table td[data-label] .qs-cell { text-align: right; }
  .qs-table .qs-biz-cell { min-height: var(--qs-tap); }
  .qs-sec__link { min-height: var(--qs-tap); }
}

/* ---------- Business logo grid ---------- */
.qs-bizgrid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 480px)  { .qs-bizgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .qs-bizgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .qs-bizgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.qs-biz {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: var(--qs-tap); padding: 16px 12px;
  border: 1px solid #e2e8f0; border-radius: 14px;
  background: #ffffff; text-decoration: none; text-align: center;
  transition: all 0.2s ease;
}
.qs-biz:hover { border-color: #c7d2fe; box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.08); transform: translateY(-2px); }
.qs-biz:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
.qs-biz__name {
  font-size: 13px; font-weight: 600; color: #0f172a;
  line-height: 1.25; width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qs-biz:hover .qs-biz__name { color: #4f46e5; }
.qs-biz__host {
  font-size: 11px; color: #64748b;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qs-biz .q-badge { font-size: 11px; padding: 2px 8px; margin-top: auto; border-radius: 9999px; }

/* Status Badges */
.q-badge--success { background-color: #dcfce7; color: #15803d; }
.q-badge--warning { background-color: #fef3c7; color: #b45309; }
.q-badge--neutral { background-color: #f1f5f9; color: #64748b; }

/* ---------- Search field ---------- */
.qs-search { position: relative; display: block; }
.qs-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: #94a3b8; pointer-events: none;
}
.qs-search input {
  width: 100%; min-width: 0; min-height: var(--qs-tap);
  padding: 8px 12px 8px 36px;
  font-family: inherit; font-size: 13px; font-weight: 500; color: #0f172a;
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition: all var(--transition-fast);
}
@media (min-width: 640px) { .qs-search { width: 220px; } .qs-search input { min-height: 38px; } }
.qs-search input::placeholder { color: #94a3b8; }
.qs-search input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }

/* ---------- Quick actions ---------- */
.qs-actions {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 480px) { .qs-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .qs-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.qs-action {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--qs-tap); padding: 14px 16px;
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 14px; text-decoration: none;
  transition: all 0.2s ease;
}
.qs-action:hover { border-color: #6366f1; box-shadow: 0 8px 16px -4px rgba(99, 102, 241, 0.12); transform: translateY(-2px); }
.qs-action:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
.qs-action__icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #475569;
  transition: all var(--transition-fast);
}
.qs-action:hover .qs-action__icon { background: #e0e7ff; color: #4f46e5; }
.qs-action__icon svg { width: 18px; height: 18px; }
.qs-action--danger:hover { border-color: #ef4444; box-shadow: 0 8px 16px -4px rgba(239, 68, 68, 0.12); }
.qs-action--danger:hover .qs-action__icon { background: #fee2e2; color: #dc2626; }
.qs-action__body { display: block; min-width: 0; }
.qs-action__title {
  display: block; font-size: 13px; font-weight: 700; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qs-action__sub {
  display: block; font-size: 11px; color: #64748b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Status dot ---------- */
.qs-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.qs-status__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.qs-status--busy { color: #059669; }
.qs-status--busy .qs-status__dot { background: #10b981; animation: qs-pulse 2s ease-in-out infinite; }
.qs-status--idle { color: #d97706; }
.qs-status--idle .qs-status__dot { background: #f59e0b; }
.qs-status--off { color: #94a3b8; }
.qs-status--off .qs-status__dot { background: #cbd5e1; }

/* ---------- Empty state ---------- */
.qs-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: var(--space-10) var(--space-5); text-align: center;
}
.qs-empty__icon {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #64748b; margin-bottom: 2px;
}
.qs-empty__icon svg { width: 21px; height: 21px; }
.qs-empty__title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 15px; font-weight: 700; color: #0f172a; }
.qs-empty__text { font-size: var(--qs-fs-caption); color: #64748b; max-width: 34ch; }

/* ---------- Skeleton ---------- */
.qs-skeleton {
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: qs-shimmer 1.4s ease-in-out infinite;
}
@keyframes qs-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.qs-dash[aria-busy="true"] .qs-kpi__value,
.qs-dash[aria-busy="true"] .qs-pulse__value { opacity: 0.45; transition: opacity var(--transition-base); }

/* ---------- Error banner ---------- */
.qs-alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); border-radius: 12px;
  background: #fee2e2; border: 1px solid #fca5a5; color: #7f1d1d;
  font-size: 13px; font-weight: 500;
}
.qs-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* ---------- Dark theme ---------- */
[data-theme="dark"] .qs-panel,
[data-theme="dark"] .qs-kpi,
[data-theme="dark"] .qs-pulse,
[data-theme="dark"] .qs-biz,
[data-theme="dark"] .qs-action,
[data-theme="dark"] .qs-chip,
[data-theme="dark"] .qs-search input {
  background: var(--color-surface-dark-2);
  border-color: var(--color-border-dark);
  color: var(--color-text-inverse);
}
[data-theme="dark"] .qs-kpi__value,
[data-theme="dark"] .qs-pulse__value,
[data-theme="dark"] .qs-panel__title,
[data-theme="dark"] .qs-head__title,
[data-theme="dark"] .qs-empty__title,
[data-theme="dark"] .qs-action__title,
[data-theme="dark"] .qs-biz__name,
[data-theme="dark"] .qs-biz-cell__name,
[data-theme="dark"] .qs-bar__name,
[data-theme="dark"] .qs-bar__value { color: var(--color-text-inverse); }
[data-theme="dark"] .qs-table th { background: var(--color-surface-dark-2); box-shadow: inset 0 -1px 0 var(--color-border-dark); }
[data-theme="dark"] .qs-table td { border-top-color: var(--color-border-dark); color: var(--color-text-inverse); }
[data-theme="dark"] .qs-table tbody tr:hover { background: var(--color-surface-dark); }
[data-theme="dark"] .qs-seg { background: var(--color-surface-dark); }
[data-theme="dark"] .qs-seg__btn[aria-pressed="true"] { background: #6366f1; color: #ffffff; }
[data-theme="dark"] .qs-kpi__icon,
[data-theme="dark"] .qs-pulse__icon,
[data-theme="dark"] .qs-action__icon,
[data-theme="dark"] .qs-avatar,
[data-theme="dark"] .qs-empty__icon { background: var(--color-surface-dark); color: #94a3b8; }
[data-theme="dark"] .qs-bar__track,
[data-theme="dark"] .qs-meter { background: var(--color-surface-dark); }
[data-theme="dark"] .qs-kpi--accent { background: linear-gradient(150deg, var(--color-surface-dark-2) 0%, rgba(99,102,241,0.16) 130%); border-color: rgba(99,102,241,0.3); }
[data-theme="dark"] .qs-dash { --qs-caption: #94a3b8; --qs-accent-text: #818cf8; --qs-success: #34d399; --qs-warning: #fbbf24; --qs-danger: #fca5a5; }
[data-theme="dark"] .qs-chart__pt::before { background: var(--color-surface-dark-2); border-color: #6366f1; }
[data-theme="dark"] .qs-chart__grid { stroke: var(--color-border-dark); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .qs-biz, .qs-action, .qs-kpi, .qs-chip, .qs-bar__fill, .qs-chart__tip { transition: none !important; }
  .qs-biz:hover, .qs-action:hover { transform: none; }
  .qs-live__dot, .qs-status__dot, .qs-skeleton,
  .qs-dash[aria-busy="true"] .qs-refresh svg { animation: none !important; }
}