/* ============================================
   MOTIVE FLIP — DESIGN SYSTEM VARIABLES
   ============================================ */

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

/* ============================================
   GLOBAL & ANIMATIONS
   ============================================ */
:root {
  --font-primary: 'Poppins', sans-serif;
  --font-mono: 'Courier New', monospace;

  --brand-accent: #E94560;
  --brand-accent-hover: #C73652;
  --brand-accent-light: rgba(233, 69, 96, 0.12);

  --reward-gold: #F5A623;
  --reward-silver: #9BA4B4;
  --reward-bronze: #CD7F32;
  --reward-xp: #27AE60;

  --color-success: #27AE60;
  --color-success-light: rgba(39, 174, 96, 0.12);
  --color-warning: #F39C12;
  --color-warning-light: rgba(243, 156, 18, 0.12);
  --color-danger: #E74C3C;
  --color-danger-light: rgba(231, 76, 60, 0.12);
  --color-info: #3498DB;
  --color-info-light: rgba(52, 152, 219, 0.12);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.07);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.12), 0 10px 10px rgba(0,0,0,0.06);
  --shadow-float: 0 25px 50px rgba(0,0,0,0.18);
  --shadow-glow: 0 0 20px rgba(233, 69, 96, 0.4);

  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- ANIMATION KEYFRAMES --- */
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.90); } to { opacity: 1; transform: scale(1); } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
@keyframes float-slow { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-15px) rotate(2deg); } 100% { transform: translateY(0px) rotate(0deg); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(233, 69, 96, 0); } 100% { box-shadow: 0 0 0 0 rgba(233, 69, 96, 0); } }

/* --- ANIMATION UTILITIES --- */
.anim-slide-up { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.anim-slide-in-right { animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.anim-fade-in { animation: fadeIn 0.6s ease-out forwards; opacity: 0; }
.anim-scale-in { animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.anim-float { animation: float 3s ease-in-out infinite; }
.anim-float-slow { animation: float-slow 6s ease-in-out infinite; }
.anim-pulse-glow { animation: pulse-glow 2s infinite; }

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }

/* Interactive Hovers */
.hover-lift { transition: transform var(--transition-base), box-shadow var(--transition-base); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hover-glow:hover { box-shadow: var(--shadow-glow); border-color: var(--brand-accent); }
.hover-scale { transition: transform var(--transition-fast); }
.hover-scale:hover { transform: scale(1.05); }

/* Custom Tooltip via CSS */
[data-tooltip] { position: relative; cursor: pointer; }
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px);
  padding: 6px 10px; background: #1A1A2E; color: white; font-size: 11px; font-weight: 600;
  border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s; z-index: 100;
}
[data-tooltip]::after {
  content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(5px);
  border-width: 5px; border-style: solid; border-color: #1A1A2E transparent transparent transparent;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 100;
}
[data-tooltip]:hover::before { opacity: 1; transform: translateX(-50%) translateY(-10px); }
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0px); }


/* ============================================
   STUDENT PORTAL THEME
   ============================================ */
.portal-student {
  --portal-bg: #F0F4FF;
  --portal-bg-secondary: #E8EEF9;
  --portal-surface: #FFFFFF;
  --portal-surface-secondary: #F7F9FD;
  --portal-sidebar-bg: #1A1A2E;
  --portal-sidebar-active: #E94560;
  --portal-sidebar-hover: rgba(233,69,96,0.1);
  --portal-sidebar-text: rgba(255,255,255,0.75);
  --portal-sidebar-text-active: #FFFFFF;
  --portal-nav-bg: rgba(255,255,255,0.95);
  --portal-nav-border: rgba(0,0,0,0.06);

  --portal-text-primary: #1A1A2E;
  --portal-text-secondary: #6B7280;
  --portal-text-muted: #9CA3AF;
  --portal-text-inverse: #FFFFFF;

  --portal-card-bg: #FFFFFF;
  --portal-card-border: rgba(0,0,0,0.06);
  --portal-card-radius: 8px;
  --portal-card-padding: 24px;
  --portal-card-shadow: var(--shadow-sm);
  --portal-card-hover-shadow: var(--shadow-lg);

  --input-bg: #F7F9FD;
  --input-border: #E5E7EB;
  --input-border-focus: #E94560;
  --input-radius: 10px;
  --input-padding: 12px 16px;

  --btn-primary-bg: #E94560;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #C73652;
  --btn-secondary-bg: #F0F4FF;
  --btn-secondary-text: #1A1A2E;
  --btn-secondary-hover: #E8EEF9;
  --btn-radius: 10px;

  --space-sidebar: 260px;
  --space-topbar: 68px;

  --progress-height: 8px;
  --progress-radius: 4px;
  --progress-bg: #E8EEF9;
  --progress-fill: linear-gradient(90deg, #E94560, #F5A623);
}

/* ============================================
   TEACHER PORTAL THEME
   ============================================ */
.portal-teacher {
  --portal-bg: #F4F6FA;
  --portal-bg-secondary: #EAECF2;
  --portal-surface: #FFFFFF;
  --portal-surface-secondary: #F8F9FC;
  --portal-sidebar-bg: #0D1B2A;
  --portal-sidebar-active: #2563EB;
  --portal-sidebar-hover: rgba(37,99,235,0.1);
  --portal-sidebar-text: rgba(255,255,255,0.7);
  --portal-sidebar-text-active: #FFFFFF;
  --portal-nav-bg: rgba(255,255,255,0.95);
  --portal-nav-border: rgba(0,0,0,0.07);

  --portal-text-primary: #0D1B2A;
  --portal-text-secondary: #6B7280;
  --portal-text-muted: #9CA3AF;
  --portal-text-inverse: #FFFFFF;

  --portal-card-bg: #FFFFFF;
  --portal-card-border: rgba(0,0,0,0.07);
  --portal-card-radius: 6px;
  --portal-card-padding: 24px;
  --portal-card-shadow: var(--shadow-sm);
  --portal-card-hover-shadow: var(--shadow-md);

  --input-bg: #F8F9FC;
  --input-border: #E5E7EB;
  --input-border-focus: #2563EB;
  --input-radius: 4px;
  --input-padding: 11px 14px;

  --btn-primary-bg: #2563EB;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #1D4ED8;
  --btn-secondary-bg: #EFF2FF;
  --btn-secondary-text: #2563EB;
  --btn-secondary-hover: #E0E7FF;
  --btn-radius: 4px;

  --space-sidebar: 240px;
  --space-topbar: 64px;

  --progress-height: 6px;
  --progress-radius: 3px;
  --progress-bg: #EFF2FF;
  --progress-fill: linear-gradient(90deg, #2563EB, #7C3AED);

  --table-header-bg: #F8F9FC;
  --table-row-hover: rgba(37,99,235,0.04);
  --table-border: #E5E7EB;
}

/* ============================================
   ADMIN PORTAL THEME
   ============================================ */
.portal-admin {
  --portal-bg: #F1F5F9;
  --portal-bg-secondary: #E8EDF4;
  --portal-surface: #FFFFFF;
  --portal-surface-secondary: #F8FAFC;
  --portal-sidebar-bg: #111827;
  --portal-sidebar-active: #7C3AED;
  --portal-sidebar-hover: rgba(124,58,237,0.1);
  --portal-sidebar-text: rgba(255,255,255,0.65);
  --portal-sidebar-text-active: #FFFFFF;
  --portal-nav-bg: rgba(255,255,255,0.95);
  --portal-nav-border: rgba(0,0,0,0.07);

  --portal-text-primary: #111827;
  --portal-text-secondary: #6B7280;
  --portal-text-muted: #9CA3AF;
  --portal-text-inverse: #FFFFFF;

  --portal-card-bg: #FFFFFF;
  --portal-card-border: rgba(0,0,0,0.07);
  --portal-card-radius: 6px;
  --portal-card-padding: 24px;
  --portal-card-shadow: var(--shadow-sm);
  --portal-card-hover-shadow: var(--shadow-md);

  --input-bg: #F8FAFC;
  --input-border: #E5E7EB;
  --input-border-focus: #7C3AED;
  --input-radius: 4px;
  --input-padding: 11px 14px;

  --btn-primary-bg: #7C3AED;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #6D28D9;
  --btn-secondary-bg: #F5F3FF;
  --btn-secondary-text: #7C3AED;
  --btn-secondary-hover: #EDE9FE;
  --btn-radius: 4px;

  --space-sidebar: 250px;
  --space-topbar: 64px;

  --progress-height: 6px;
  --progress-radius: 3px;
  --progress-bg: #F5F3FF;
  --progress-fill: linear-gradient(90deg, #7C3AED, #EC4899);

  --table-header-bg: #F8FAFC;
  --table-row-hover: rgba(124,58,237,0.04);
  --table-border: #E5E7EB;

  --stat-1-bg: linear-gradient(135deg, #7C3AED, #9333EA);
  --stat-2-bg: linear-gradient(135deg, #2563EB, #3B82F6);
  --stat-3-bg: linear-gradient(135deg, #059669, #10B981);
  --stat-4-bg: linear-gradient(135deg, #DC2626, #EF4444);
  --stat-5-bg: linear-gradient(135deg, #D97706, #F59E0B);
}