/*
 * QAssist Dashboard v2 — Design System CSS
 * Font: Manrope | Primary: #207fdf
 * Matches v2/QAssist v2.html design prototype
 */

/* ── Base ─────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur:  .18s;

  /* Colours */
  --primary:       #207fdf;
  --primary-50:    #eff6ff;
  --primary-100:   #dbeafe;
  --primary-200:   #bfdbfe;
  --primary-600:   #1a6cc0;

  --ink:        #0f172a;
  --ink-muted:  #475569;
  --ink-soft:   #94a3b8;
  --ink-faint:  #cbd5e1;

  --line:       #e5e7eb;
  --line-soft:  #f1f5f9;

  --paper:        #ffffff;
  --paper-canvas: #f6f7f8;

  --success:      #059669;
  --success-soft: #ecfdf5;
  --warn:         #d97706;
  --warn-soft:    #fffbeb;
  --danger:       #dc2626;
  --danger-soft:  #fef2f2;

  /* Shadows */
  --shadow-card:      0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.05);
  --shadow-card-hover:0 8px 24px -8px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.05);
  --shadow-focus:     0 0 0 3px rgba(32,127,223,.20);
  --shadow-cta:       0 6px 16px -4px rgba(32,127,223,.45);

  /* Radii */
  --radius-card: 14px;
  --radius-btn:  10px;
}

body {
  font-family: 'Manrope', sans-serif;
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: var(--paper-canvas);
}

/* ── Auth loading overlay ─────────────────────────────────────────────────── */
.auth-loading {
  position: fixed;
  inset: 0;
  background: var(--paper-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spin-ring {
  width: 40px;
  height: 40px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: qa-spin 0.7s linear infinite;
}

@keyframes qa-spin { to { transform: rotate(360deg); } }

/* ── Scrollbars ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 8px; height: 8px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Focus ring (unified) ─────────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
}

/* ── Material icons ───────────────────────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* ── Transitions ──────────────────────────────────────────────────────────── */
button, a { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }

/* ── Page enter animation ─────────────────────────────────────────────────── */
@keyframes qa-fade-up { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation: qa-fade-up .22s var(--ease); }

/* ── Tool card hover: icon fill ──────────────────────────────────────────── */
.tool-card:hover .icon-block {
  background: var(--primary);
  color: #ffffff;
}

/* ── Hero search wrapper focus glow ──────────────────────────────────────── */
#heroSearchWrapper:focus-within {
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
}

/* ── User dropdown ────────────────────────────────────────────────────────── */
#userDropdown.open { display: block !important; }

/* ── App shell flex layout ────────────────────────────────────────────────── */
#appContent.flex { display: flex; }