/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

/* Dark theme (default) */
:root, [data-theme="dark"] {
  --bg: #060910;
  --bg2: #0c1118;
  --surface: #0f1520;
  --surface2: #141d2e;
  --surface3: #1a2540;
  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.1);
  --accent: #2563eb;
  --accent-light: #3b82f6;
  --cyan: #0891b2;
  --cyan-light: #06b6d4;
  --emerald: #059669;
  --emerald-light: #10b981;
  --amber: #d97706;
  --amber-light: #f59e0b;
  --rose: #e11d48;
  --rose-light: #f43f5e;
  --violet: #7c3aed;
  --violet-light: #8b5cf6;
  --text: #e8edf5;
  --text-2: #8b97b0;
  --text-3: #cfd5df;
  --glow-blue: rgba(37,99,235,0.12);
  --sidebar-width: 360px;
  --topbar-height: 52px;
  --topbar-bg: rgba(6,9,16,0.95);
  --grid-dot: rgba(255,255,255,0.15);
  --grid-line: rgba(255,255,255,0.03);
  --scanline: rgba(0,0,0,0.03);
  --skeleton-bg: #1a2235;
  --skeleton-shimmer: rgba(255,255,255,0.04);
  --popover-bg: #1e293b;
  --brand-panel-bg: rgba(9,12,20,0.6);
  --brand-panel-gradient: linear-gradient(180deg, rgba(37,99,235,0.04) 0%, transparent 60%);
}

/* Light theme */
[data-theme="light"] {
  --bg: #f5f7fa;
  --bg2: #edf0f5;
  --surface: #ffffff;
  --surface2: #f0f2f7;
  --surface3: #e4e8ef;
  --border: rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.12);
  --accent: #2563eb;
  --accent-light: #3b82f6;
  --cyan: #0891b2;
  --cyan-light: #0e7490;
  --emerald: #059669;
  --emerald-light: #047857;
  --amber: #d97706;
  --amber-light: #b45309;
  --rose: #e11d48;
  --rose-light: #be123c;
  --violet: #7c3aed;
  --violet-light: #6d28d9;
  --text: #1a2030;
  --text-2: #5b6578;
  --text-3: #3d4655;
  --glow-blue: rgba(37,99,235,0.08);
  --topbar-bg: rgba(255,255,255,0.92);
  --grid-dot: rgba(0,0,0,0.06);
  --grid-line: rgba(0,0,0,0.03);
  --scanline: rgba(0,0,0,0.01);
  --skeleton-bg: #e4e8ef;
  --skeleton-shimmer: rgba(0,0,0,0.04);
  --popover-bg: #ffffff;
  --brand-panel-bg: rgba(237,240,245,0.85);
  --brand-panel-gradient: linear-gradient(180deg, rgba(37,99,235,0.06) 0%, transparent 60%);
}

/* Tenant: PracticeHQ.ai — teal accent overrides */
.tenant-practicehq {
  --accent: #0d9488;
  --accent-light: #14b8a6;
  --glow-blue: rgba(13,148,136,0.12);
}
.tenant-practicehq[data-theme="light"] {
  --glow-blue: rgba(13,148,136,0.08);
}

/* MudBlazor tooltip override — use app theme colours */
.mud-tooltip {
  background: var(--surface2) !important;
  color: var(--text) !important;
}

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

html, body {
  height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
}

/* scanline texture */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--scanline) 2px, var(--scanline) 4px);
  pointer-events: none; z-index: 9999;
}

::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 2px; }

/* dot grid background — used by all layouts */
.bg-grid {
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle, var(--grid-dot) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 120px 120px;
  pointer-events: none; z-index: 0;
}

@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* skeleton overrides */
.sk-bone.mud-skeleton { background: var(--skeleton-bg) !important; }
.sk-bone.mud-skeleton::after { background: linear-gradient(90deg, transparent, var(--skeleton-shimmer), transparent) !important; }

/* colour avatar helpers */
.av-blue    { background: linear-gradient(135deg, #2563eb, #0891b2); }
.av-violet  { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.av-emerald { background: linear-gradient(135deg, #059669, #06b6d4); }
.av-amber   { background: linear-gradient(135deg, #d97706, #ef4444); }
.av-rose    { background: linear-gradient(135deg, #e11d48, #fb923c); }