/* IBD Dashboard — Reset, Scrollbars, Animations */
/* ─────────────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.5;
}

/* Protect icon fonts from being overridden by any inherited font-family rule */
i[class*="ti-"] {
  font-family: 'tabler-icons' !important;
  font-style: normal;
}

*:focus-visible {
  outline: 2px solid rgba(24, 95, 165, 0.5);
  outline-offset: 2px;
  border-radius: 6px;
}

button:focus-visible, a:focus-visible {
  outline: 2px solid rgba(24, 95, 165, 0.5);
  outline-offset: 3px;
  border-radius: 6px;
}


/* ─────────────────────────────────────────────
   3. SCROLLBARS
   ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f3f4f6; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }


/* ─────────────────────────────────────────────
   4. ANIMATIONS
   ───────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes barfill {
  0%   { width: 0%; }
  40%  { width: 55%; }
  70%  { width: 78%; }
  90%  { width: 90%; }
  100% { width: 95%; }
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(76,175,80,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(76,175,80,0); }
}

@keyframes menuIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pageFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(6px); }
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes modalOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.93); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(10px); }
}


/* ─────────────────────────────────────────────