/* -------------------------------------------------------------------------
   Copilot for Microsoft 365 – Course Interface Stylesheet
   -------------------------------------------------------------------------
   • Consolidated & refactored for maintainability and accessibility
   • Keeps all original functionality but introduces CSS variables, reduced
     duplication, motion‑safe animations, light/dark support, logical props,
     and cross‑browser scrollbar styling
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Imports – Google Fonts
   ------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Teko:wght@600&display=swap");

/* -------------------------------------------------------------------------
   CSS Variables (default – dark theme)
   ------------------------------------------------------------------------- */
:root {
  /* Brand colours */
  --c-primary: #2563eb;           /* blue‑600  */
  --c-primary-hover: #1d4ed8;     /* blue‑700  */
  --c-secondary: #4b5563;         /* gray‑600  */
  --c-secondary-hover: #374151;   /* gray‑700  */
  --c-success: #16a34a;           /* green‑600 */
  --c-success-hover: #15803d;     /* green‑700 */
  --c-danger: #dc2626;            /* red‑600   */
  --c-danger-hover: #b91c1c;      /* red‑700   */
  --c-purple: #7e22ce;            /* purple‑700*/
  --c-purple-hover: #6b21a8;      /* purple‑800*/
  --c-gold: #facc15;              /* yellow-400 */
  --c-silver: #d1d5db;            /* gray-300 */
  --c-bronze: #f59e0b;            /* amber-500 */

  /* Surface & borders */
  --c-bg-body: #111827;           /* gray-900 */
  --c-bg-dim: #1f2937;            /* gray‑800 */
  --c-bg-dimmer: rgba(31, 41, 55, 0.7);
  --c-bg-overlay: rgba(0, 0, 0, 0.7);
  --c-border: #4a5568;            /* gray‑600 border */

  /* Typography */
  --c-text-body: #d1d5db;         /* gray-300 */
  --c-text-light: #f3f4f6;        /* gray‑100 */
  --c-text-header: #3b82f6;       /* blue-500 */
  --c-text-accent: #facc15;       /* yellow-400 */
  --c-text-subtle: #9ca3af;       /* gray-400 */

  /* Fonts */
  --ff-display: "Teko", sans-serif;
  --ff-mono: "Roboto Mono", monospace;

  /* Sizing & Shadows */
  --space: 0.75rem;
  --radius: 0.5rem;
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

/* ===================================================================== */
/* Light Mode Overrides: Verbeterd voor hoog contrast & leesbaarheid     */
/* ===================================================================== */
html.light-mode {
  /* Oppervlaktes & randen */
  --c-bg-body: #f9fafb;           /* gray-50: zacht wit voor minder oogvermoeidheid */
  --c-bg-dim: #ffffff;            /* white: voor kaarten en modals */
  --c-bg-dimmer: rgba(255, 255, 255, 0.7);
  --c-bg-overlay: rgba(249, 250, 251, 0.7);
  --c-border: #e5e7eb;            /* gray-200 */

  /* Typografie (hoog contrast) */
  --c-text-body: #374151;         /* gray-700 */
  --c-text-light: #111827;        /* gray-900 */
  --c-text-header: #1d4ed8;       /* blue-700 */
  --c-text-accent: #b45309;       /* amber-700 */
  --c-text-subtle: #6b7280;       /* gray-500 */
}

/* --- Algemene overrides voor Light Mode --- */
html.light-mode body {
  background-color: var(--c-bg-body);
  color: var(--c-text-body);
}

html.light-mode .video-background {
  opacity: 0.04;
}

html.light-mode nav {
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border-color: var(--c-border);
}

/* --- Typografie overrides --- */
html.light-mode .text-blue-400,
html.light-mode .text-blue-300 {
  color: var(--c-text-header);
}
html.light-mode .text-yellow-400,
html.light-mode .text-yellow-300,
html.light-mode .text-yellow-200 {
  color: var(--c-text-accent);
}
html.light-mode .text-gray-300,
html.light-mode .text-gray-400,
html.light-mode .text-gray-500 {
  color: var(--c-text-subtle);
}
html.light-mode strong.text-blue-400 {
  color: var(--c-text-header);
}
html.light-mode h4.text-white {
  color: var(--c-text-light);
}

/* --- Component overrides --- */
html.light-mode #auth-form,
html.light-mode #leaderboard-container,
html.light-mode #completion-container {
  background-color: var(--c-bg-dim);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
}

html.light-mode .terminal-input {
    background-color: #f3f4f6; /* gray-100 */
    border-color: #d1d5db; /* gray-300 */
    color: var(--c-text-light);
}
html.light-mode .terminal-input:focus-visible {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 25%, transparent);
}

html.light-mode .btn-icon {
    background-color: #e5e7eb; /* gray-200 */
    color: #4b5563; /* gray-600 */
}
html.light-mode .btn-icon:hover {
    background-color: #d1d5db; /* gray-300 */
    color: #1f2937; /* gray-800 */
}

html.light-mode .mission-card {
  background-color: var(--c-bg-dim);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
}
html.light-mode .mission-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: #d1d5db; /* gray-300 */
}
html.light-mode .mission-card .bg-black\/30 {
  background-color: #f9fafb; /* gray-50 */
  border-color: var(--c-border);
}

html.light-mode .modal-content {
  background-color: var(--c-bg-dim);
  color: var(--c-text-body);
  box-shadow: var(--shadow-lg);
}
html.light-mode .modal-body.text-gray-300 {
  color: var(--c-text-body);
}
html.light-mode .solution-details,
html.light-mode .solution-details .bg-gray-800,
html.light-mode .solution-details .bg-gray-900 {
  background-color: #f3f4f6; /* gray-100 */
  border-color: var(--c-border);
}
html.light-mode .solution-details code.text-green-300,
html.light-mode p.text-green-300 {
  color: #047857; /* emerald-700 */
  background-color: #d1fae5; /* emerald-100 */
}

html.light-mode .leaderboard-item {
  background-color: #ffffff;
  border: 1px solid var(--c-border);
}
html.light-mode .leaderboard-item:hover {
  background-color: #f9fafb; /* gray-50 */
}
html.light-mode .leaderboard-name,
html.light-mode .leaderboard-name.text-white {
  color: var(--c-text-light);
}
html.light-mode .leaderboard-rep {
  color: var(--c-text-accent);
}

html.light-mode .toast {
  background-color: #ffffff;
  color: var(--c-text-light);
  border-color: var(--c-primary);
  box-shadow: var(--shadow-lg);
}
html.light-mode .toast span.font-bold {
  color: var(--c-primary);
}
html.light-mode .toast strong.text-yellow-300 {
  color: var(--c-text-accent);
}

html.light-mode footer {
    border-color: var(--c-border);
}
/* Einde Light Mode Overrides */
/* ===================================================================== */

/* -------------------------------------------------------------------------
   Base & Typography (Basisstijlen voor beide thema's)
   ------------------------------------------------------------------------- */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

.gta-font {
  font-family: var(--ff-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Video Background – fixed & non‑interactive
   ------------------------------------------------------------------------- */
.video-background {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  opacity: 0.2;
  pointer-events: none;
  transition: opacity 0.5s;
}

#bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   Form Elements – Terminal‑style input
   ------------------------------------------------------------------------- */
.terminal-input {
  background-color: rgba(17, 24, 39, 0.8);
  border: 1px solid var(--c-border);
  color: var(--c-text-light);
  font-family: var(--ff-mono);
  padding: var(--space) calc(var(--space) * 1.333);
  border-radius: 0.375rem;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s;
}

.terminal-input:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 40%, transparent);
}

/* -------------------------------------------------------------------------
   Buttons – raised look with gradient overlay & depth
   ------------------------------------------------------------------------- */
.btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-purple {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space) calc(var(--space) * 2);
  border-radius: 0.375rem;
  font-family: var(--ff-display);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.25);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.12) 100%);
  mix-blend-mode: overlay;
  border-radius: inherit;
  pointer-events: none;
}

.btn-primary   { background-color: var(--c-primary);   color: #ffffff; border-color: var(--c-primary-hover); }
.btn-secondary { background-color: var(--c-secondary); color: #ffffff; border-color: var(--c-secondary-hover); }
.btn-success   { background-color: var(--c-success);   color: #ffffff; border-color: var(--c-success-hover); }
.btn-danger    { background-color: var(--c-danger);    color: #ffffff; border-color: var(--c-danger-hover); }
.btn-purple    { background-color: var(--c-purple);    color: #ffffff; border-color: var(--c-purple-hover); }

.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-success:hover, .btn-danger:hover, .btn-purple:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px -2px rgba(0,0,0,0.45), 0 4px 6px -2px rgba(0,0,0,0.3);
}

.btn-primary:hover   { background-color: var(--c-primary-hover); }
.btn-secondary:hover { background-color: var(--c-secondary-hover); }
.btn-success:hover   { background-color: var(--c-success-hover); }
.btn-danger:hover    { background-color: var(--c-danger-hover); }
.btn-purple:hover    { background-color: var(--c-purple-hover); }

.btn:active, .btn-primary:active, .btn-secondary:active, .btn-success:active, .btn-danger:active, .btn-purple:active {
  transform: translateY(0);
  box-shadow: 0 3px 4px -2px rgba(0,0,0,0.4);
}

.btn-icon {
  padding: 0.5rem;
  background-color: rgba(55, 65, 81, 0.5);
  border-radius: 9999px;
  color: #d1d5db;
  transition: background-color 0.2s, color 0.2s;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  cursor: pointer;
}

.btn-icon:hover {
  background-color: rgba(31, 41, 55, 1);
  color: #ffffff;
}

/* Stijlen voor de thema-wissel knop */
.theme-toggle-btn .moon-icon { display: block; }
.theme-toggle-btn .sun-icon { display: none; }

html.light-mode .theme-toggle-btn .moon-icon { display: none; }
html.light-mode .theme-toggle-btn .sun-icon { display: block; }

/* -------------------------------------------------------------------------
   Components – Cards, Toasts, Modals, Leaderboard
   ------------------------------------------------------------------------- */

/* Mission Cards */
.mission-card {
  background-color: var(--c-bg-dimmer);
  backdrop-filter: blur(4px);
  border-radius: var(--radius);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background-color 0.2s;
}

.mission-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

/* Toast Notifications */
.toast {
  background-color: rgba(17, 24, 39, 0.9);
  color: var(--c-text-light);
  padding: calc(var(--space) * 1.333) calc(var(--space) * 2);
  border-radius: var(--radius);
  border: 1px solid #4f46e5; /* indigo‑600 */
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  font-family: var(--ff-mono);
  font-size: 0.875rem;
  animation: fadeIn 0.5s, fadeOut 0.5s 3.5s forwards;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

@keyframes fadeIn   { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOut  { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--c-bg-overlay);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
  padding: var(--space);
  transition: background-color 0.3s;
}

.modal-content {
  background-color: rgba(31, 41, 55, 0.9);
  padding: calc(var(--space) * 2.5);
  border-radius: var(--radius);
  border: 1px solid var(--c-primary);
  max-height: 90vh;
  overflow-y: auto;
  width: 100%;
  transition: opacity 0.3s, transform 0.3s, background-color 0.3s, color 0.3s, border-color 0.3s;
  opacity: 0;
  transform: scale(0.95) translateY(1rem);
}

.modal-enter-to {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.modal-leave-to {
  opacity: 0;
  transform: scale(0.95) translateY(1rem);
}

/* Leaderboard */
.leaderboard-item {
  background-color: rgba(55, 65, 81, 0.5);
  transition: background-color 0.2s, border-color 0.2s;
}
.leaderboard-item:hover {
  background-color: rgba(75, 85, 99, 0.7);
}
.leaderboard-rank {
  font-family: var(--ff-display);
  font-size: 1.75rem;
  width: 2.5rem;
  text-align: center;
  margin-right: 1rem;
  -webkit-text-stroke: 1px rgba(0,0,0,0.5);
}
.leaderboard-rank.gold { color: var(--c-gold); }
.leaderboard-rank.silver { color: var(--c-silver); }
.leaderboard-rank.bronze { color: var(--c-bronze); }
.leaderboard-name { font-weight: bold; color: white; }
.leaderboard-rep { font-family: var(--ff-mono); font-weight: bold; color: var(--c-text-accent); }
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: help;
  transition: transform 0.2s;
}
.badge:hover {
  transform: scale(1.2);
}

/* Profiel Modal */
.achievement-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(55, 65, 81, 0.7);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--c-border);
}
.achievement-badge .icon {
  font-size: 1.25rem;
}

/* Thematic Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: var(--c-bg-dim);
}
::-webkit-scrollbar-thumb {
  background-color: var(--c-primary);
  border-radius: 20px;
  border: 3px solid var(--c-bg-dim);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--c-primary-hover);
}

/* -------------------------------------------------------------------------
   Floating Action Button (FAB) for Copilot
   ------------------------------------------------------------------------- */
.fab-copilot {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 45; /* Boven content, onder modals */
  width: 4rem;
  height: 4rem;
  background-image: linear-gradient(135deg, #2563eb, #7e22ce, #dc2626);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 6px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.fab-copilot:hover {
  transform: scale(1.1) translateY(-5px);
  box-shadow: 0 15px 25px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

html.light-mode .fab-copilot {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1);
}

html.light-mode .fab-copilot:hover {
    box-shadow: 0 15px 25px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.12);
}

/* Zorg dat de knop niet zichtbaar is wanneer de class 'hidden' aanwezig is */
.fab-copilot.hidden {
  display: none;
}