/* EduHub — Estilos globais complementares */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Animações */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn .25s ease; }

/* Progress bar */
.progress { background: #E5E7EB; border-radius: 20px; height: 8px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 20px; background: linear-gradient(90deg, #2E6DA4, #17A589); transition: width .4s ease; }

/* Badge pill utilitário */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }

/* Tooltip simples */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
  background: #1C1C1C; color: #fff; padding: 5px 10px; border-radius: 5px;
  font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s;
}
[data-tooltip]:hover::after { opacity: 1; }

/* Loading spinner */
.spinner { width: 24px; height: 24px; border: 3px solid #E5E7EB; border-top-color: #2E6DA4; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Input checkbox/toggle */
.toggle { position: relative; width: 40px; height: 22px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #CBD5E1; border-radius: 22px; cursor: pointer; transition: background .2s; }
.toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.toggle input:checked + .toggle-slider { background: #17A589; }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

/* Responsive utilities */
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 641px) {
  .hide-desktop { display: none !important; }
}