/* ═══════════════════════════════════════════════════════════════════════════
   ACADEMY MANAGEMENT SYSTEM - Design System
   ClickTake Technologies | clicktaketech.com
═══════════════════════════════════════════════════════════════════════════ */

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

/* ─── CSS Custom Properties ───────────────────────────────────────────────── */
:root {
  /* Primary Palette */
  --color-primary:       #6C63FF;
  --color-primary-light: #8B85FF;
  --color-primary-dark:  #4A43CC;
  --color-primary-glow:  rgba(108,99,255,0.3);

  /* Accent Colors */
  --color-accent-teal:   #00D2D3;
  --color-accent-amber:  #F7B731;
  --color-accent-rose:   #FF4757;
  --color-accent-green:  #2ED573;
  --color-accent-blue:   #1E90FF;

  /* Role Colors */
  --color-student:  #00D2D3;
  --color-teacher:  #6C63FF;
  --color-visitor:  #F7B731;
  --color-worker:   #2ED573;
  --color-admin:    #FF4757;

  /* Dark Background Scale */
  --bg-900: #0A0B1E;
  --bg-800: #0F1024;
  --bg-700: #141528;
  --bg-600: #1A1B30;
  --bg-500: #20213A;
  --bg-400: #272844;
  --bg-300: #2F304F;
  --bg-glass: rgba(255,255,255,0.05);
  --bg-glass-hover: rgba(255,255,255,0.08);

  /* Text */
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,0.7);
  --text-muted:     rgba(255,255,255,0.4);
  --text-disabled:  rgba(255,255,255,0.2);

  /* Borders */
  --border-subtle:  rgba(255,255,255,0.06);
  --border-medium:  rgba(255,255,255,0.12);
  --border-strong:  rgba(255,255,255,0.2);

  /* Spacing */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px;

  /* Border Radius */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.5);
  --shadow-glow-primary: 0 0 30px var(--color-primary-glow);
  --shadow-glow-teal:    0 0 30px rgba(0,210,211,0.25);
  --shadow-glow-amber:   0 0 30px rgba(247,183,49,0.25);

  /* Transitions */
  --transition-fast:   all 0.15s ease;
  --transition-normal: all 0.25s ease;
  --transition-slow:   all 0.4s ease;
  --transition-bounce: all 0.3s cubic-bezier(0.34,1.56,0.64,1);

  /* Typography */
  --font-display: 'Outfit', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Z-Index */
  --z-base:    1;   --z-dropdown: 100;
  --z-sidebar: 200; --z-modal:    2000;
  --z-toast:   4000; --z-tooltip:  5000;
}

/* ─── Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--bg-900);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-700); }
::-webkit-scrollbar-thumb { background: var(--bg-300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ─── Gradient Backgrounds ────────────────────────────────────────────────── */
.gradient-mesh {
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(108,99,255,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(0,210,211,0.1) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 50% 50%, rgba(247,183,49,0.05) 0%, transparent 40%),
    var(--bg-900);
}

.gradient-card {
  background: linear-gradient(135deg, var(--bg-600) 0%, var(--bg-500) 100%);
}

/* ─── Glass Effect ────────────────────────────────────────────────────────── */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
}

.glass-hover:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-medium);
}

/* ─── Typography ──────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 0.95rem; }

.text-gradient {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-xs  { font-size: 0.75rem; }
.text-sm  { font-size: 0.875rem; }
.text-md  { font-size: 1rem; }
.text-lg  { font-size: 1.125rem; }
.text-xl  { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }

.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }

/* ─── Layout Utilities ────────────────────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-6); }
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.grid   { display: grid; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.hidden { display: none !important; }
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }

/* ─── Status Colors ───────────────────────────────────────────────────────── */
.status-in      { color: var(--color-accent-green); }
.status-out     { color: var(--color-accent-rose); }
.status-late    { color: var(--color-accent-amber); }
.status-pending { color: var(--color-accent-amber); }
.status-approved{ color: var(--color-accent-green); }
.status-rejected{ color: var(--color-accent-rose); }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-full);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px;
}
.badge-green  { background: rgba(46,213,115,0.15); color: var(--color-accent-green); border: 1px solid rgba(46,213,115,0.3); }
.badge-red    { background: rgba(255,71,87,0.15);  color: var(--color-accent-rose);  border: 1px solid rgba(255,71,87,0.3); }
.badge-amber  { background: rgba(247,183,49,0.15); color: var(--color-accent-amber); border: 1px solid rgba(247,183,49,0.3); }
.badge-blue   { background: rgba(30,144,255,0.15); color: var(--color-accent-blue);  border: 1px solid rgba(30,144,255,0.3); }
.badge-purple { background: rgba(108,99,255,0.15); color: var(--color-primary-light);border: 1px solid rgba(108,99,255,0.3); }

/* ─── Grid Systems ────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }

@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .container { padding: 0 var(--space-4); }
}

/* ─── Misc ────────────────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border-subtle); margin: var(--space-6) 0; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; background: var(--bg-400);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; flex-shrink: 0;
}
.avatar-lg { width: 56px; height: 56px; font-size: 1.5rem; }
.avatar-xl { width: 80px; height: 80px; font-size: 2rem; }

.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  animation: pulse-ring 1.5s infinite;
}
.pulse-dot.green { background: var(--color-accent-green); box-shadow: 0 0 0 0 rgba(46,213,115,0.4); }
.pulse-dot.red   { background: var(--color-accent-rose);  box-shadow: 0 0 0 0 rgba(255,71,87,0.4); }
.pulse-dot.amber { background: var(--color-accent-amber); box-shadow: 0 0 0 0 rgba(247,183,49,0.4); }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ─── Toast Notifications ─────────────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: var(--space-6); right: var(--space-6);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-3);
}
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-500); border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  min-width: 300px; max-width: 400px;
  animation: slideInRight 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
}
.toast-success { border-left: 3px solid var(--color-accent-green); }
.toast-error   { border-left: 3px solid var(--color-accent-rose); }
.toast-info    { border-left: 3px solid var(--color-primary); }
.toast-warning { border-left: 3px solid var(--color-accent-amber); }