/* ============================================================
   Mosaiq — App component classes (.mq-*)
   Plain-CSS translation of components/core/* for the dashboard.
   Token-driven only. NOTE: the dashboard's legacy :root reuses the
   bare names --accent / --bg / --border, so this file deliberately
   avoids them and references DS primitives (--purple-*, --slate-*,
   --surface, --text-*, --radius-*, --shadow-*) which never collide.
   ============================================================ */

/* ---- Button ------------------------------------------------ */
.mq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 16px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.mq-btn:active { transform: translateY(1px); }
.mq-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.mq-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mq-btn .mq-icon { width: 16px; height: 16px; }

.mq-btn--sm { padding: 7px 12px; min-height: 32px; gap: var(--space-1); }
.mq-btn--lg { padding: 12px 22px; min-height: 46px; font: var(--text-subtitle); }

.mq-btn--primary { background: var(--purple-60); color: var(--white); border-color: var(--purple-60); }
.mq-btn--primary:hover { background: var(--purple-70); border-color: var(--purple-70); }

/* AI / intelligence actions only */
.mq-btn--intelligence {
  background: linear-gradient(135deg, var(--purple-50), var(--purple-70));
  color: var(--white); border-color: var(--purple-60);
}
.mq-btn--intelligence:hover { background: linear-gradient(135deg, var(--purple-60), var(--purple-80)); }

.mq-btn--secondary { background: var(--surface); color: var(--text-body); border-color: var(--slate-300); }
.mq-btn--secondary:hover { background: var(--slate-100); }

.mq-btn--ghost { background: transparent; color: var(--text-body); border-color: transparent; }
.mq-btn--ghost:hover { background: var(--slate-100); }

.mq-btn--danger { background: var(--critical); color: var(--white); border-color: var(--critical); }
.mq-btn--danger:hover { filter: brightness(0.92); }

/* ---- Card -------------------------------------------------- */
.mq-card {
  background: var(--surface);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.mq-card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ---- Badge ------------------------------------------------- */
.mq-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: var(--slate-100);
  color: var(--slate-600);
}
.mq-badge--accent   { background: var(--teal-5);     color: var(--teal-70); }
.mq-badge--brand    { background: var(--purple-5);   color: var(--purple-70); }
.mq-badge--success  { background: var(--success-bg); color: var(--ok-fg); }
.mq-badge--warning  { background: var(--warning-bg); color: var(--warn-fg); }
.mq-badge--critical { background: var(--critical-bg);color: var(--crit-fg); }
.mq-badge--info     { background: var(--info-bg);    color: var(--info-fg); }

.mq-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.mq-badge--live .mq-badge__dot {
  position: relative; background: var(--teal-50);
}
.mq-badge--live .mq-badge__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--teal-50); animation: mqPulse 1.6s var(--ease) infinite;
}
@keyframes mqPulse { 0% { transform: scale(1); opacity: 0.5; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }

/* ---- Input ------------------------------------------------- */
.mq-input {
  width: 100%;
  padding: 10px 14px;
  font: var(--text-body);
  color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mq-input::placeholder { color: var(--text-faint); }
.mq-input:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }

.mq-label {
  display: block;
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* ---- Switch ------------------------------------------------ */
.mq-switch { position: relative; display: inline-flex; width: 40px; height: 22px; flex: none; cursor: pointer; }
.mq-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mq-switch__track {
  position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: var(--slate-300); transition: background var(--dur) var(--ease);
}
.mq-switch__thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--white); box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease);
}
.mq-switch input:checked ~ .mq-switch__track { background: var(--purple-60); }
.mq-switch input:checked ~ .mq-switch__thumb { transform: translateX(18px); }
.mq-switch input:focus-visible ~ .mq-switch__track { box-shadow: var(--shadow-focus); }

/* ---- Avatar ------------------------------------------------ */
.mq-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--purple-5); color: var(--purple-70);
  font: var(--text-label); font-weight: 600; flex: none; user-select: none;
}

/* ---- Lucide icon sizing ------------------------------------ */
.mq-icon { display: inline-flex; flex: none; stroke-width: 1.8; }

/* ---- App shell: topbar / sidebar / nav --------------------- */
.mq-topbar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--slate-200);
}
.mq-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--slate-200);
}
.mq-nav-section {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.mq-nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border: none; border-radius: var(--radius-md);
  background: transparent; color: var(--text-body);
  font: var(--text-label); cursor: pointer; text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mq-nav-item:hover { background: var(--slate-100); }
.mq-nav-item.active { background: var(--purple-5); color: var(--purple-80); font-weight: 600; }
.mq-nav-item .mq-icon { color: var(--slate-400); }
.mq-nav-item.active .mq-icon { color: var(--purple-60); }