body {
  background-color: #f8f9fa;
}

/* ---- Scrollbars ---- */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.sidebar-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.sidebar-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 10px;
}

/* ---- Cards ---- */
.material-card {
  border-top: 4px solid #e60000;
}

/* ---- Focus Reset ---- */
input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}

/* ---- Modal Animations ---- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

.modal-backdrop {
  animation: fadeIn 0.2s ease-out;
}
.modal-content {
  animation: slideUp 0.3s ease-out;
}

/* ---- Login Shake ---- */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
}
.login-shake {
  animation: shake 0.45s ease-in-out;
}

/* ---- App Shell flex override (Tailwind hidden uses display:none) ---- */
#appShell:not(.hidden) {
  display: flex;
}