/* Secure EDUCOMS Pocket Classroom Global Styles */
@layer base {
  body {
    margin: 0;
    padding: 0;
    background-color: #f8fafc;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  /* High-Contrast Dark Mode for Low-Light Environments & AMOLED/OLED Battery Saving */
  html.dark, body.dark {
    background-color: #0b0f19;
    color: #f8fafc;
    color-scheme: dark;
  }

  /* Accessible Font Size Scaling (RA 7277 & WCAG 2.1 Low Vision Support) */
  html.font-size-normal, body.font-size-normal {
    font-size: 16px;
  }
  html.font-size-large, body.font-size-large {
    font-size: 18.5px;
    letter-spacing: 0.012em;
    line-height: 1.6;
  }
  html.font-size-extra-large, body.font-size-extra-large {
    font-size: 21px;
    letter-spacing: 0.022em;
    line-height: 1.7;
  }
}

/* High-Contrast Dark Mode Surface Overrides */
.dark .bg-white {
  background-color: #111827 !important;
  color: #f8fafc;
  border-color: #1f2937 !important;
}

.dark .bg-slate-50 {
  background-color: #0b0f19 !important;
}

.dark .bg-slate-100 {
  background-color: #1e293b !important;
  color: #e2e8f0;
}

.dark .bg-slate-150 {
  background-color: #1e293b !important;
}

.dark .bg-slate-200 {
  background-color: #334155 !important;
}

.dark .text-slate-900,
.dark .text-slate-950,
.dark .text-slate-800 {
  color: #f8fafc !important;
}

.dark .text-slate-700 {
  color: #e2e8f0 !important;
}

.dark .text-slate-600 {
  color: #cbd5e1 !important;
}

.dark .text-slate-500 {
  color: #94a3b8 !important;
}

.dark .text-slate-400 {
  color: #94a3b8 !important;
}

.dark .border-slate-100,
.dark .border-slate-200 {
  border-color: #1f2937 !important;
}

.dark .border-slate-300 {
  border-color: #374151 !important;
}

/* Dark mode inputs, select and textareas */
.dark input[type="text"],
.dark input[type="password"],
.dark input[type="email"],
.dark input[type="number"],
.dark input[type="search"],
.dark select,
.dark textarea {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #64748b !important;
}

/* Dark Mode Scrollbars */
.dark ::-webkit-scrollbar-track {
  background: #0b0f19;
}
.dark ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Dark Mode Header and Navigation adjustments */
.dark header {
  background-color: rgba(15, 23, 42, 0.9) !important;
  border-color: #1e293b !important;
}

.dark aside {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}

@keyframes statusFadeSlide {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-status-change {
  animation: statusFadeSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   GLOBAL DESIGN CONSTITUTION: DECLUTTERING & ZERO-PILL DISCIPLINE
   ========================================================================== */

/* 1. SOFTEN SYSTEM-WIDE CARD BORDERS (Anti-clutter & Single-elevation depth) */
.bg-white, [class*="bg-white"] {
  border-color: rgba(226, 232, 240, 0.65) !important;
}

/* 2. ELIMINATE CARDS-WITHIN-CARDS NESTED BORDERS */
.bg-white .bg-white, 
.bg-slate-50 .bg-white, 
.bg-white .border, 
.bg-white .border-slate-200, 
.bg-white .border-slate-100 {
  border-color: rgba(241, 245, 249, 0.8) !important;
  box-shadow: none !important;
}

/* 3. ZERO-PILL METADATA DISCIPLINE: Quiet unboxed labels instead of bordered tags */
span.rounded-full, 
.badge, 
[class*="badge-"] {
  box-shadow: none !important;
}

/* 4. COHESIVE SYSTEM SCROLLBARS (Eliminate thick distracting native scrollbars) */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.6);
}

/* 5. GENTLE SHADOW OVERRIDES FOR HOVER CARDS */
.hover\:shadow-md:hover, 
.hover\:shadow-lg:hover {
  box-shadow: 0 4px 20px -2px rgba(148, 163, 184, 0.08) !important;
}