/* app/static/css/style.css */
/* StudyMate Custom Styles */

/* Variables */
:root {
  --primary-blue: #135bc8;
  --primary-blue-hover: #0b5ed7;
  --study-mate-dark: #121212; /* Darker, more modern dark background */
  --study-mate-dark-surface: #1e1e1e; /* Surface color for cards in dark mode */
  --study-mate-light: #f8f9fa;
  --study-mate-white: #ffffff;
  --study-mate-text-dark: #212529;
  --study-mate-text-light: #e0e0e0;
  --study-mate-card-dark-bg: #1e1e1e;
  --study-mate-navbar-dark-bg: #121212;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
}

/* Default Theme (Dark) */
body {
  background-color: var(--study-mate-dark);
  color: var(--study-mate-text-light);
  transition: background-color 0.3s ease, color 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Light Theme Overrides */
[data-bs-theme="light"] body {
  background-color: #f0f2f5; /* Slightly off-white for better contrast */
  color: var(--study-mate-text-dark);
}

[data-bs-theme="light"] .navbar-dark.bg-dark {
  background-color: var(--primary-blue) !important;
  box-shadow: var(--shadow-md);
}

/* Navbar Styling */
.navbar {
  box-shadow: var(--shadow-md);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Card Styling */
.card {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Theme Aware Card */
.theme-aware-card {
  background-color: var(--study-mate-white);
  color: var(--study-mate-text-dark);
}

[data-bs-theme="dark"] .theme-aware-card {
  background-color: var(--study-mate-dark-surface);
  color: var(--study-mate-text-light);
  border: 1px solid #333;
}

/* Feature Cards */
.theme-aware-feature-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: var(--study-mate-white);
  color: var(--study-mate-text-dark);
  overflow: hidden; /* Keep content inside rounded corners */
}

[data-bs-theme="dark"] .theme-aware-feature-card {
  background-color: var(--study-mate-dark-surface);
  color: var(--study-mate-text-light);
  border: 1px solid #333;
}

.theme-aware-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg) !important;
}

.feature-card-highlighted {
    border: 2px solid var(--primary-blue) !important;
}

/* Hero Section (Jumbotron replacement) */
.hero-section {
  background: linear-gradient(135deg, var(--study-mate-white) 0%, #f0f4f8 100%);
  padding: 4rem 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 3rem;
  text-align: center;
}

[data-bs-theme="dark"] .hero-section {
  background: linear-gradient(135deg, var(--study-mate-dark-surface) 0%, #1a1a1a 100%);
  border: 1px solid #333;
}

.hero-title {
  font-weight: 800;
  background: -webkit-linear-gradient(45deg, var(--primary-blue), #6f42c1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.5rem;
}

/* Team Member Card */
.team-card {
  text-align: center;
  padding: 2rem;
  border-radius: var(--radius-lg);
  background-color: var(--study-mate-white);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease;
  height: 100%;
}

[data-bs-theme="dark"] .team-card {
  background-color: var(--study-mate-dark-surface);
  border: 1px solid #333;
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.team-member-img {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 4px solid var(--primary-blue);
  display: inline-block; /* Ensures it respects width/height */
}

/* Theme Aware Jumbotron - Deprecated in favor of .hero-section but kept for compatibility if needed */
.theme-aware-jumbotron {
  background-color: var(--study-mate-white);
  color: var(--study-mate-text-dark);
}

[data-bs-theme="dark"] .theme-aware-jumbotron {
  background-color: var(--study-mate-dark-surface);
  color: var(--study-mate-text-light);
  border: 1px solid #333;
}

/* Buttons */
.btn {
  border-radius: 0.375rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
}

/* Primary Button Gradient */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-blue), #1e70eb);
  border: none;
  box-shadow: 0 2px 4px rgba(19, 91, 200, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0b5ed7, #135bc8);
  box-shadow: 0 4px 8px rgba(19, 91, 200, 0.4);
  transform: translateY(-1px);
}

/* Success Button Gradient */
.btn-success {
  background: linear-gradient(135deg, #198754, #20c997);
  border: none;
  box-shadow: 0 2px 4px rgba(25, 135, 84, 0.3);
}

.btn-success:hover {
  background: linear-gradient(135deg, #157347, #198754);
  box-shadow: 0 4px 8px rgba(25, 135, 84, 0.4);
  transform: translateY(-1px);
}

/* Footer */
.footer {
  margin-top: auto;
  padding: 2rem 0;
  background-color: var(--study-mate-white);
  border-top: 1px solid rgba(0,0,0,0.05);
}

[data-bs-theme="dark"] .footer {
  background-color: var(--study-mate-navbar-dark-bg);
  border-top: 1px solid #333;
}

/* Form Controls */
.form-control {
  border-radius: 0.375rem;
  padding: 0.6rem 1rem;
  border: 1px solid #ced4da;
}

.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(19, 91, 200, 0.15);
  border-color: var(--primary-blue);
}

[data-bs-theme="dark"] .form-control {
  background-color: #2c3034;
  border-color: #444;
  color: var(--study-mate-text-light);
}

[data-bs-theme="dark"] .form-control:focus {
  background-color: #343a40;
  border-color: var(--primary-blue);
}

/* Flashcards */
.flashcard-container {
  perspective: 1000px;
}

.flashcard {
  position: relative;
  width: 100%;
  min-height: 300px;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform-style: preserve-3d;
  cursor: pointer;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.flashcard-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-lg);
  padding: 2rem;
  background-color: var(--study-mate-white);
}

[data-bs-theme="dark"] .flashcard-face {
  background-color: var(--study-mate-dark-surface);
  border: 1px solid #333;
}

.flashcard-back {
  transform: rotateY(180deg);
  background-color: #f8f9fa;
}

[data-bs-theme="dark"] .flashcard-back {
  background-color: #252525;
}

/* Utilities */
.text-shadow {
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Rest of existing styles... */


/* Link styling within the footer for light theme. */
[data-bs-theme="light"] .footer a {
  color: var(--primary-blue);
}

/* Dark Theme Specific Styles */
/* These styles explicitly define elements for the dark theme, though some might be redundant if the defaults are already dark. */
[data-bs-theme="dark"] body {
  background-color: var(--study-mate-dark); /* Ensures dark background. */
  color: var(--study-mate-text-light); /* Ensures light text. */
}

/* Navbar background in dark theme. */
[data-bs-theme="dark"] .navbar-dark.bg-dark {
  background-color: var(--study-mate-navbar-dark-bg) !important;
}

/* Navbar brand and link colors in dark theme. */
[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .navbar-brand i,
[data-bs-theme="dark"] .nav-link {
  color: var(--primary-blue) !important;
}

/* Active and hover states for nav links in dark theme. */
[data-bs-theme="dark"] .nav-link.active,
[data-bs-theme="dark"] .nav-link:hover {
  color: var(--study-mate-white) !important;
}

/* Card styling for dark theme. */
[data-bs-theme="dark"] .card {
  background-color: var(--study-mate-card-dark-bg); /* Dark background for cards. */
  border: 1px solid #444; /* Darker grey border. */
  color: var(--study-mate-text-light); /* Light text. */
}

/* Card title color in dark theme. */
[data-bs-theme="dark"] .card-title {
  color: var(--primary-blue);
}

/* List group item styling for dark theme. */
[data-bs-theme="dark"] .list-group-item {
  background-color: #343a40; /* Darker grey background. */
  border-color: #444; /* Darker grey border. */
  color: var(--study-mate-text-light); /* Light text. */
}

/* Link styling for dark theme. */
[data-bs-theme="dark"] a {
  color: var(--primary-blue);
}

/* Link hover styling for dark theme. */
[data-bs-theme="dark"] a:hover {
  color: #338eff; /* Lighter blue on hover. */
}

/* Footer styling for dark theme. */
[data-bs-theme="dark"] .footer {
  background-color: var(--study-mate-navbar-dark-bg); /* Darker footer background. */
  color: var(--study-mate-text-light); /* Light text. */
  border-top: 1px solid #444; /* Darker grey top border. */
}

/* Muted text color for the footer in dark theme. */
[data-bs-theme="dark"] .footer .text-muted {
  color: #adb5bd !important;
}

/* Link styling within the footer for dark theme. */
[data-bs-theme="dark"] .footer a {
  color: var(--primary-blue);
}

/* Overrides for elements with `.bg-light` class to ensure readability in dark mode. */
[data-bs-theme="dark"] .bg-light {
  background-color: var(--study-mate-card-dark-bg) !important; /* Forces dark background for previously light elements. */
  color: var(--study-mate-text-light) !important; /* Ensures text is light. */
}

/* Ensures all text and icons within `.bg-light` elements are light in dark theme. */
[data-bs-theme="dark"] .bg-light .card-title,
[data-bs-theme="dark"] .bg-light .card-text,
[data-bs-theme="dark"] .bg-light h5,
[data-bs-theme="dark"] .bg-light p,
[data-bs-theme="dark"] .bg-light i {
  color: var(--study-mate-text-light) !important;
}

/* Ensures `text-dark` class elements become light in dark theme. */
[data-bs-theme="dark"] .bg-light.text-dark {
  color: var(--study-mate-text-light) !important;
}

/* Ensures general `text-dark` class elements become light in dark theme. */
[data-bs-theme="dark"] .text-dark {
  color: var(--study-mate-text-light) !important;
}

/* Muted text color in dark theme. */
[data-bs-theme="dark"] .text-muted {
  color: #adb5bd !important;
}

/* Jumbotron specific styling for dark/light mode */
[data-bs-theme="dark"] .jumbotron {
  background-color: #2c3e50; /* Darker blue-grey for jumbotron in dark mode. */
  color: var(--study-mate-text-light);
}

[data-bs-theme="light"] .jumbotron {
  background-color: #e9ecef; /* Light grey for jumbotron in light mode. */
  color: var(--study-mate-text-dark);
}

/* Feature cards on index.html */
/* Adds transition for hover effects. */
.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%; /* Ensures all cards in a row have consistent height. */
}

/* Hover effect for feature cards. */
.feature-card:hover {
  transform: translateY(-10px); /* Lifts the card up. */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Adds a shadow. */
}

/* Specific overrides for feature cards that use Bootstrap's colored backgrounds (e.g., .bg-primary). */
/* Ensures text is white on these colored backgrounds in dark theme. */
[data-bs-theme="dark"] .feature-card.bg-primary,
[data-bs-theme="dark"] .feature-card.bg-success,
[data-bs-theme="dark"] .feature-card.bg-info,
[data-bs-theme="dark"] .feature-card.bg-warning,
[data-bs-theme="dark"] .feature-card.bg-danger {
  color: var(--study-mate-white) !important;
}

/* Ensures icons within colored feature cards are also white in dark theme. */
[data-bs-theme="dark"] .feature-card.bg-primary i,
[data-bs-theme="dark"] .feature-card.bg-success i,
[data-bs-theme="dark"] .feature-card.bg-info i,
[data-bs-theme="dark"] .feature-card.bg-warning i,
[data-bs-theme="dark"] .feature-card.bg-danger i {
  color: var(--study-mate-white) !important;
}

/* Special styling for two specific feature cards on index.html that were initially `.bg-light`. */
[data-bs-theme="dark"] .feature-card.bg-light {
  background-color: #343a40 !important; /* Slightly lighter dark background for these cards. */
  color: var(--study-mate-text-light) !important;
}

/* Ensures text within these specific light-background feature cards is light in dark theme. */
[data-bs-theme="dark"] .feature-card.bg-light .card-title,
[data-bs-theme="dark"] .feature-card.bg-light .card-text,
[data-bs-theme="dark"] .feature-card.bg-light h5,
[data-bs-theme="dark"] .feature-card.bg-light p,
[data-bs-theme="dark"] .feature-card.bg-light i {
  color: var(--study-mate-text-light) !important;
}

/* Theme-aware components for better contrast and visibility */

/* General card styling that adapts to the theme. */
.theme-aware-card {
  /* Uses Bootstrap variables as fallback, then custom light variables. */
  background-color: var(--bs-card-bg, var(--study-mate-white));
  color: var(--bs-body-color, var(--study-mate-text-dark));
  border: 1px solid var(--bs-border-color, #ddd);
}

/* Dark mode specific styles for theme-aware cards. */
[data-bs-theme="dark"] .theme-aware-card {
  background-color: var(--study-mate-card-dark-bg);
  color: var(--study-mate-text-light);
  border: 1px solid #444;
}

/* Card header specific styling for theme awareness. */
.theme-aware-card .card-header.theme-aware-bg-text-dark {
  background-color: var(--bs-secondary-bg, #e9ecef); /* Light grey for light mode. */
  color: var(--study-mate-text-dark);
}

/* Dark mode specific styles for card headers. */
[data-bs-theme="dark"] .theme-aware-card .card-header.theme-aware-bg-text-dark {
  background-color: #343a40; /* Darker grey for dark mode. */
  color: var(--study-mate-text-light);
}

/* Input fields that adapt to the theme. */
.theme-aware-input {
  background-color: var(--bs-body-bg, var(--study-mate-white));
  color: var(--bs-body-color, var(--study-mate-text-dark));
  border: 1px solid var(--bs-border-color, #ced4da);
}

/* Focus state for theme-aware inputs. */
.theme-aware-input:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Dark mode specific styles for input fields. */
[data-bs-theme="dark"] .theme-aware-input {
  background-color: #495057; /* Darker input field background. */
  color: var(--study-mate-text-light);
  border: 1px solid #6c757d;
}

/* Placeholder text color for inputs in dark mode. */
[data-bs-theme="dark"] .theme-aware-input::placeholder {
  color: #adb5bd;
}

/* Buttons that adapt to the theme. */

/* Primary button styling. */
.theme-aware-button.btn-primary {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--study-mate-white) !important; /* Ensures text is white. */
}

/* Primary button hover state. */
.theme-aware-button.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
  color: var(--study-mate-white) !important;
}

/* Ensures primary button styles are applied in dark theme. */
[data-bs-theme="dark"] .theme-aware-button.btn-primary {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--study-mate-white) !important;
}

/* Ensures primary button hover styles are applied in dark theme. */
[data-bs-theme="dark"] .theme-aware-button.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
  color: var(--study-mate-white) !important;
}

/* Success button styling. */
.theme-aware-button.btn-success {
  background-color: var(--bs-success, #198754);
  border-color: var(--bs-success, #198754);
  color: var(--study-mate-white) !important;
}

/* Success button hover state. */
.theme-aware-button.btn-success:hover {
  background-color: #157347; /* Darker green. */
  border-color: #146c43;
  color: var(--study-mate-white) !important;
}

/* Ensures success button styles are applied in dark theme. */
[data-bs-theme="dark"] .theme-aware-button.btn-success {
  background-color: var(--bs-success, #198754);
  border-color: var(--bs-success, #198754);
  color: var(--study-mate-white) !important;
}

/* Ensures success button hover styles are applied in dark theme. */
[data-bs-theme="dark"] .theme-aware-button.btn-success:hover {
  background-color: #157347;
  border-color: #146c43;
  color: var(--study-mate-white) !important;
}

/* Info button styling. */
.theme-aware-button.btn-info {
  background-color: var(--bs-info, #0dcaf0);
  border-color: var(--bs-info, #0dcaf0);
  color: black; /* Text dark on light cyan. */
}

/* Info button hover state. */
.theme-aware-button.btn-info:hover {
  background-color: #31d2f2; /* Lighter/brighter cyan. */
  border-color: #25cff2;
  color: black;
}

/* Ensures info button styles are applied in dark theme. */
[data-bs-theme="dark"] .theme-aware-button.btn-info {
  background-color: var(--bs-info, #0dcaf0);
  border-color: var(--bs-info, #0dcaf0);
  color: black; /* Text dark for contrast. */
}

/* Ensures info button hover styles are applied in dark theme. */
[data-bs-theme="dark"] .theme-aware-button.btn-info:hover {
  background-color: #31d2f2;
  border-color: #25cff2;
  color: black;
}

/* Ensures white text for specific theme-aware buttons, overriding other styles. */
.theme-aware-button.btn-primary,
.theme-aware-button.btn-primary:hover,
.theme-aware-button.btn-primary:active,
.theme-aware-button.btn-primary:focus {
  color: white !important;
}

.theme-aware-button.btn-success,
.theme-aware-button.btn-success:hover,
.theme-aware-button.btn-success:active,
.theme-aware-button.btn-success:focus {
  color: white !important;
}

/* Feature card hover effect for theme-aware cards. */
.theme-aware-feature-card:hover {
  transform: translateY(-5px); /* Lifts the card up slightly. */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); /* Adds a shadow. */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition. */
}

/* Adjusts shadow for theme-aware feature card hover in dark mode. */
[data-bs-theme="dark"] .theme-aware-feature-card:hover {
  box-shadow: 0 8px 15px rgba(255, 255, 255, 0.05); /* Lighter shadow for dark mode. */
}


/* Links that adapt to the theme. */
.theme-aware-link {
  color: var(--primary-blue);
}

/* Link hover state for theme-aware links. */
.theme-aware-link:hover {
  color: #0b5ed7;
}

/* Ensures link color in dark theme. */
[data-bs-theme="dark"] .theme-aware-link {
  color: var(--primary-blue); /* Keeps primary blue or another light color for links. */
}

/* Link hover state for theme-aware links in dark theme. */
[data-bs-theme="dark"] .theme-aware-link:hover {
  color: #338eff;
}

/* Light theme button overrides - ensuring proper text visibility */
[data-bs-theme="light"] .btn-primary,
[data-bs-theme="light"] .btn-primary:hover,
[data-bs-theme="light"] .btn-primary:active,
[data-bs-theme="light"] .btn-primary:focus {
  color: var(--study-mate-white) !important;
}

[data-bs-theme="light"] .btn-success,
[data-bs-theme="light"] .btn-success:hover,
[data-bs-theme="light"] .btn-success:active,
[data-bs-theme="light"] .btn-success:focus {
  color: var(--study-mate-white) !important;
}

/* Dark theme button overrides - ensuring proper text and outline visibility */
[data-bs-theme="dark"] { /* Applies styles when the data-bs-theme is "dark". */
  /* Solid Buttons: Ensure white text */
  .btn-primary,
  .btn-primary:hover,
  .btn-primary:active,
  .btn-primary:focus {
    color: var(--study-mate-white) !important;
  }

  .btn-success,
  .btn-success:hover,
  .btn-success:active,
  .btn-success:focus {
    color: var(--study-mate-white) !important;
  }

  /* Outline Buttons: Specific styling for dark mode */
  /* Primary outline button. */
  .btn-outline-primary,
  .btn-outline-primary:active {
    color: #a0c6ff !important;
    border-color: #a0c6ff !important;
    background-color: transparent !important;
  }
  .btn-outline-primary:hover,
  .btn-outline-primary:focus {
    color: #052c65 !important;
    background-color: #a0c6ff !important;
    border-color: #a0c6ff !important;
  }

  /* Info outline button. */
  .btn-outline-info,
  .btn-outline-info:active {
    color: #7ed9f4 !important;
    border-color: #7ed9f4 !important;
    background-color: transparent !important;
  }
  .btn-outline-info:hover,
  .btn-outline-info:focus {
    color: #032a33 !important;
    background-color: #7ed9f4 !important;
    border-color: #7ed9f4 !important;
  }

  /* Danger outline button. */
  .btn-outline-danger,
  .btn-outline-danger:active {
    color: #ffabab !important; /* Lighter red text. */
    border-color: #ffabab !important; /* Lighter red border. */
    background-color: transparent !important;
  }
  .btn-outline-danger:hover,
  .btn-outline-danger:focus {
    color: var(--study-mate-white) !important; /* White text on hover. */
    background-color: var(--bs-danger, #dc3545) !important; /* Standard red background. */
    border-color: var(--bs-danger, #dc3545) !important;
  }
}

/* Custom 404 Error Page Styles */
/* Container styling for the 404 error page. */
.error-page-container {
  background: linear-gradient(135deg, #e0f7fa 0%, #b3e5fc 100%); /* Light blue gradient background. */
  padding: 40px 20px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  margin-top: 50px;
  margin-bottom: 50px;
}

/* Heading 1 styling for the 404 page. */
.error-page-container h1 {
  font-family: 'Pacifico', cursive; /* Curvy font. */
  font-size: 6rem; /* Large size. */
  font-weight: bold;
  color: #01579b; /* Darker blue text. */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Heading 2 styling for the 404 page. */
.error-page-container h2 {
  font-family: 'Pacifico', cursive; /* Curvy font. */
  font-weight: bold;
  color: #0277bd; /* Medium blue text. */
  margin-top: 0;
  margin-bottom: 20px;
}

/* Paragraph text styling for the 404 page. */
.error-page-container p {
  color: #01579b; /* Darker blue text. */
  font-size: 1.1rem;
}

/* Horizontal rule styling for the 404 page. */
.error-page-container hr {
  border-top: 1px solid #81d4fa; /* Light blue border. */
}

/* Primary button styling within the 404 page. */
.error-page-container .btn-primary {
  background-color: #0277bd;
  border-color: #0277bd;
  color: white !important;
  font-weight: bold;
  padding: 10px 25px;
  border-radius: 25px; /* More rounded. */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Primary button hover state within the 404 page. */
.error-page-container .btn-primary:hover {
  background-color: #01579b; /* Darker blue on hover. */
  border-color: #01579b;
  transform: translateY(-2px); /* Lifts the button. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Conditional text coloring for 404 page in dark mode (currently commented out/non-functional for the gradient). */
[data-bs-theme="dark"] .error-page-container h1,
[data-bs-theme="dark"] .error-page-container h2,
[data-bs-theme="dark"] .error-page-container p {
  /* If you want text to change color in dark mode, define here. */
  /* For now, assuming the light blue gradient background is desired in both modes */
  /* and the dark blue text provides enough contrast. */
  /* Example: color: var(--study-mate-text-light); */
}

/* Conditional button styling for 404 page in dark mode (currently retains specific blue/white). */
[data-bs-theme="dark"] .error-page-container .btn-primary {
  /* Adjust button for dark mode if needed, e.g., if it inherits other dark mode button styles undesirably */
  /* For now, it should retain its specific blue/white styling */
}

/* --- IMPROVED DARK MODE & TYPOGRAPHY --- */

[data-bs-theme="dark"] body {
    background-color: #121212;
    color: #e0e0e0; /* Light gray instead of dark gray for standard text */
}

/* Headings in pure white for better contrast */
[data-bs-theme="dark"] h1, 
[data-bs-theme="dark"] h2, 
[data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4, 
[data-bs-theme="dark"] h5, 
[data-bs-theme="dark"] h6 {
    color: #ffffff !important;
    font-weight: 600;
}

/* Make lists and paragraphs readable */
[data-bs-theme="dark"] p, 
[data-bs-theme="dark"] li, 
[data-bs-theme="dark"] span {
    color: #d1d1d1;
    line-height: 1.6; /* Better readability */
}

/* Make "Muted" text lighter so it is readable on black */
[data-bs-theme="dark"] .text-muted {
    color: #a0a0a0 !important;
}

/* Card design in Dark Mode */
[data-bs-theme="dark"] .card, 
[data-bs-theme="dark"] .theme-aware-card {
    background-color: #1e1e1e; /* Dark gray background for cards */
    border: 1px solid #333;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .card-title {
    color: #fff;
}

[data-bs-theme="dark"] .card-text {
    color: #ccc;
}

/* Highlight list items */
ul li {
    margin-bottom: 0.5rem;
}


/* Video Container Styles */
/* Centers the video player. */
.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

/* Video element styling. */
.video-container video {
  width: 100%;
  max-width: 600px;
  border: 2px solid #007bff; /* Blue border. */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Eye button styling (likely for password visibility toggle). */
.eye-button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  margin-left: -40px; /* Positions it over input field. */
  z-index: 2; /* Ensures it's above other elements. */
}

/* Eye icon styling. */
.eye-button .fa-eye {
  font-size: 1.2em;
  color: #6c757d;
}

/* Eye icon hover state. */
.eye-button:hover .fa-eye {
  color: #007bff;
}

/* Margin-bottom for elements, with animation. */
.mb-3 {
  font-weight: bold;
  color: var(--study-mate-text-dark);
  animation: gradientShift 4s ease infinite; /* Applies a gradient shift animation. */
}

/* Keyframe animation for `gradientShift`. */
/* Creates a subtle background position shift for a gradient effect. */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}