/* assets/css/global.css */
/* Core Styling System for EOC Assessment Tool */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap');

:root {
  /* Design Tokens - FORCED LIGHT MODE */
  --color-primary: 218 66% 12%;    /* #0A1931 - Midnight Navy */
  --color-secondary: 265 55% 52%;  /* #7C4DCC */
  --color-accent: 182 100% 50%;    /* #00F2FE - Neon Cyan */
  
  --color-base: 220 15% 95%;       /* Light gray background */
  --color-surface: 0 0% 100%;       /* White surface */
  --color-surface-hover: 220 14% 90%;
  --color-text: 220 20% 15%;       /* Dark slate text */
  
  /* Assessment Colors */
  --color-red: 0 72% 56%;          /* #E04848 */
  --color-orange: 30 85% 55%;      /* #EB8C28 */
  --color-yellow: 48 90% 55%;      /* #F0D02C */
  --color-green: 145 62% 48%;      /* #34B06D */
  
  /* Fonts */
  --font-sans: 'Inter', 'Sarabun', sans-serif;
}

body {
  font-family: var(--font-sans);
  background-color: hsl(var(--color-base));
  color: hsl(var(--color-text));
  min-height: 100vh;
  overflow-y: auto;
}

/* ─── App Shell Layout (bulletproof scroll layout) ─── */
#main-content {
  margin-left: 0;
  transition: margin-left 0.3s ease;
  min-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  #main-content {
    margin-left: 280px;
  }
}

/* Ensure table sticky headers stick below the sticky global navbar (4rem) */
.table-pin-rows thead tr th {
  top: 4rem !important;
  z-index: 10 !important;
}

/* Custom Thin scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--color-base));
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Glassmorphism Classes */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.04);
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Force GPU rendering to resolve WebKit backdrop-filter render & flicker bugs during scroll and animation */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.glass-card:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.08);
}

.glass-navbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.glass-sidebar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.sticky-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Skeleton Loading Animation */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-loading {
  background: linear-gradient(90deg, 
    rgba(0, 0, 0, 0.03) 25%, 
    rgba(0, 0, 0, 0.08) 37%, 
    rgba(0, 0, 0, 0.03) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-text {
  height: 12px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-circle {
  border-radius: 50%;
}

/* Assessment colors states and badges */
.color-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-red {
  background-color: rgba(224, 72, 72, 0.15);
  color: hsl(var(--color-red));
  border: 1px solid rgba(224, 72, 72, 0.3);
}
.badge-orange {
  background-color: rgba(235, 140, 40, 0.15);
  color: hsl(var(--color-orange));
  border: 1px solid rgba(235, 140, 40, 0.3);
}
.badge-yellow {
  background-color: rgba(240, 208, 44, 0.15);
  color: hsl(var(--color-yellow));
  border: 1px solid rgba(240, 208, 44, 0.3);
}
.badge-green {
  background-color: rgba(52, 176, 109, 0.15);
  color: hsl(var(--color-green));
  border: 1px solid rgba(52, 176, 109, 0.3);
}

/* Color radio selection cards styles */
.color-radio-card {
  cursor: pointer;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.color-radio-card.red-select:hover, 
.color-radio-card.red-select.active {
  border-color: hsl(var(--color-red));
  background: rgba(224, 72, 72, 0.04);
  box-shadow: 0 0 15px rgba(224, 72, 72, 0.15);
}

.color-radio-card.orange-select:hover, 
.color-radio-card.orange-select.active {
  border-color: hsl(var(--color-orange));
  background: rgba(235, 140, 40, 0.04);
  box-shadow: 0 0 15px rgba(235, 140, 40, 0.15);
}

.color-radio-card.yellow-select:hover, 
.color-radio-card.yellow-select.active {
  border-color: hsl(var(--color-yellow));
  background: rgba(240, 208, 44, 0.04);
  box-shadow: 0 0 15px rgba(240, 208, 44, 0.15);
}

.color-radio-card.green-select:hover, 
.color-radio-card.green-select.active {
  border-color: hsl(var(--color-green));
  background: rgba(52, 176, 109, 0.04);
  box-shadow: 0 0 15px rgba(52, 176, 109, 0.15);
}

/* Notification bell shake animation */
@keyframes bell-wobble {
  0% { transform: rotate(0); }
  15% { transform: rotate(10deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(5deg); }
  60% { transform: rotate(-5deg); }
  75% { transform: rotate(2deg); }
  85% { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}

.bell-wobble {
  animation: bell-wobble 0.6s ease-out;
}

/* Toast custom layout styling */
#toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
  width: calc(100% - 48px);
}

.toast-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.toast-alert-success {
  background: rgba(255, 255, 255, 0.95);
  border-left: 4px solid hsl(var(--color-green));
}
.toast-alert-error {
  background: rgba(255, 255, 255, 0.95);
  border-left: 4px solid hsl(var(--color-red));
}
.toast-alert-warning {
  background: rgba(255, 255, 255, 0.95);
  border-left: 4px solid hsl(var(--color-orange));
}

/* FilePond overrides to match EOC light theme */
.filepond--root {
  font-family: var(--font-sans);
}
.filepond--panel-root {
  background-color: rgba(0, 0, 0, 0.02) !important;
  border: 2px dashed rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
}
.filepond--drop-label {
  color: #475569 !important;
}
.filepond--credits {
  display: none !important;
}
.filepond--item-panel {
  background-color: hsl(var(--color-primary)) !important;
}

/* Layout spacing utility classes based on 4px grid */
.m-grid-1 { margin: 4px; }
.m-grid-2 { margin: 8px; }
.m-grid-3 { margin: 12px; }
.m-grid-4 { margin: 16px; }
.p-grid-1 { padding: 4px; }
.p-grid-2 { padding: 8px; }
.p-grid-3 { padding: 12px; }
.p-grid-4 { padding: 16px; }
.gap-grid-1 { gap: 4px; }
.gap-grid-2 { gap: 8px; }
.gap-grid-3 { gap: 12px; }
.gap-grid-4 { gap: 16px; }

/* Sticky bottom bar */
.sticky-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
@media (min-width: 1024px) {
  .sticky-bottom-bar {
    left: 280px; /* Sidebar width on desktop */
  }
}

/* GLOBAL LIGHT-MODE CONTRAST OVERRIDES to force dark utility classes to light mode */
.bg-slate-900,
.bg-slate-950,
.bg-slate-800,
.bg-\[\#1E2230\],
.bg-\[\#171B26\],
.bg-slate-900\/20,
.bg-slate-900\/35,
.bg-slate-900\/40,
.bg-slate-900\/50,
.bg-slate-900\/60,
.bg-slate-950\/95,
.bg-slate-900\/50 {
  background-color: hsl(var(--color-surface)) !important;
}

body,
.bg-base,
.bg-\[\#171B26\] {
  background-color: hsl(var(--color-base)) !important;
}

.text-slate-100,
.text-slate-200,
.text-slate-300 {
  color: #1e293b !important; /* slate-800 */
}

/* Force text-white inside forced-light containers to slate-800 */
.bg-slate-900 .text-white,
.bg-slate-950 .text-white,
.bg-slate-800 .text-white,
.bg-\[\#1E2230\] .text-white,
.bg-\[\#171B26\] .text-white,
.bg-slate-900\/40 .text-white,
.bg-slate-900\/50 .text-white,
.bg-slate-950\/95 .text-white {
  color: #1e293b !important;
}

.text-slate-400,
.text-slate-500 {
  color: #475569 !important; /* slate-600 */
}

/* Same fix, for placeholder text — Tailwind's placeholder-* utilities target
   ::placeholder specifically, so the text-color override above doesn't reach
   them. Measured ~2.6:1 on a white input before this fix; slate-600 clears
   the 4.5:1 AA threshold. */
.placeholder-slate-400::placeholder,
.placeholder-slate-500::placeholder {
  color: #475569 !important;
}

.border-white\/5,
.border-white\/6,
.border-white\/8,
.border-white\/10 {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .skeleton-loading {
    animation: none;
    background: rgba(0, 0, 0, 0.05);
  }
  .bell-wobble {
    animation: none;
  }
  .glass-card,
  .color-radio-card {
    transition: none;
  }
}