@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --primary-color: #ab0000;
  --secondary-color: #585865;
  --text-color: #111111;
  --background-color: #ffffff;
  --sidebar-bg: #111111;
  --sidebar-text: #ffffff;
  --hover-bg: #585865;
  --active-bg: #ab0000;
}

* {
  font-family: "Roboto", sans-serif;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}
/* App.css - Dedicated styles for App component */

.app-loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 18px;
  color: #6B7280;
  background-color: #f5f5f5;
}/* Toast Notification Styles */

/* Toast Container Layout - Applied to internal content */
.toast-content {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.toast-message {
  flex: 1;
}

/* Icon Wrapper for Custom Icons */
.toast-icon {
  display: flex;
  align-items: center;
}

/* Close Button Styles */
.toast-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  margin-left: auto;
}

.toast-close-btn:hover {
  opacity: 1;
}

.toast-close-btn-white {
  color: #ffffff;
}

.toast-close-btn-dark {
  color: #222222;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  opacity: 0;
  display: none;
  transition: opacity 0.5s ease;
  position: relative;
}

.slide.active {
  display: block;
  opacity: 1;
}

.vignette-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 400px;
  max-height: 900px;
}

.vignette-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.7;
  border-radius: 0;
}

.vignette-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
}

/* Controls Container */
.slider-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  z-index: 10;
}

/* Buttons */
.slider-button {
  background-color: #222222;
  border: 2px solid #f0f8ff;
  border-radius: 50%;
  padding: 0.5rem;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-button:hover {
  background-color: #cf0a0a;
  transform: scale(1.1);
}

.slider-button img {
  width: 20px;
  height: 20px;
  filter: invert(100%);
}

@media (max-width: 768px) {
  .vignette-wrapper {
    height: 80vh;
    min-height: 500px;
    max-height: 800px;
  }

  .slider-button {
    width: 35px;
    height: 35px;
  }

  .slider-button img {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .vignette-wrapper {
    height: 70vh;
    min-height: 450px;
    max-height: 600px;
  }
}


/* AuthSteps.css - Dedicated styles for authentication step components */

/* OTP input styling */
.auth-otp-input {
  text-align: center;
  letter-spacing: 0.5em;
}

.auth-otp-input-large {
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.3em;
}

/* Timer styling */
.auth-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  font-weight: bold;
  color: #dc3545;
  text-align: center;
}

.auth-timer.resendable {
  color: #007bff;
  cursor: pointer;
}

/* Link button styling */
.auth-link-button {
  background: none;
  border: none;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
}
.LoginForm_Overlay {
  position: fixed;
  inset: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  backdrop-filter: blur(0.5px);
  padding: 1rem;
}

.LoginForm_Card {
  background: #ffffff;
  border-radius: 20px;
  padding: 2rem 1.5rem 1.5rem;
  width: 100%;
  max-width: 450px;
  max-height: 85vh;
  overflow-y: auto;
  transform: scale(0.85);
  box-shadow: 0 20px 60px rgba(17, 17, 17, 0.5);
  position: relative;
  font-family: "Roboto", sans-serif;
  animation: modalSlideIn 0.4s ease-out forwards;
}

@keyframes modalSlideIn {
  to {
    transform: scale(1);
  }
}

.LoginForm_Close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 1.9rem;
  font-weight: 700;
  color: #111111;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
}

.LoginForm_Title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 16px;
  margin-top: 16px;
  font-family: "Montserrat", sans-serif;
  color: #111111;
  text-align: center;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Field Group */
.LoginForm_FieldGroup {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 16px;
}

.LoginForm_FieldGroup label {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
  margin-left: 4px;
  color: #111111;
}

.LoginForm_FieldGroup input {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.9rem;
  border: 2px solid #585865;
  border-radius: 12px;
  background: #ffffff;
  outline: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
  font-family: "Roboto", sans-serif;
  color: #111111;
}

.LoginForm_FieldGroup input:focus {
  border-color: #eb4040;
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1);
}

.LoginForm_FieldGroup input:hover {
  border-color: #ab0000;
}

.LoginForm_PasswordWrapper {
  position: relative;
  width: 100%;
}

.LoginForm_PasswordWrapper input {
  width: 100%;
  padding: 12px 44px 12px 14px;
  font-size: 0.9rem;
  border-radius: 12px;
  border: 2px solid #585865;
  background: #ffffff;
  outline: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
  font-family: "Roboto", sans-serif;
  color: #111111;
}

.LoginForm_PasswordWrapper input:focus {
  border-color: #eb4040;
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1);
}

.LoginForm_PasswordWrapper input:hover {
  border-color: #ab0000;
}

.LoginForm_Icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #585865;
  cursor: pointer;
}

.LoginForm_Icon:hover {
  color: #ab0000;
}

/* Forgot Password */
.LoginForm_ForgotPassword {
  width: 100%;
  text-align: right;
  margin-top: -8px;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.LoginForm_ForgotPassword button {
  color: #111111;
  text-decoration: underline;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
}

.LoginForm_ForgotPassword button:hover {
  color: #ab0000;
}

/* Buttons */
.Login_Form_Buttons_Container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.LoginForm_SubmitButton {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  max-height: 40px;
  padding: 16px 0;
  background: linear-gradient(135deg, #ab0000 0%, #eb4040 100%);
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(171, 0, 0, 0.3);
}

.LoginForm_SubmitButton:hover {
  background: linear-gradient(135deg, #8b0000 0%, #ab0000 100%);
  box-shadow: 0 6px 20px rgba(171, 0, 0, 0.4);
}

.LoginForm_SubmitButton:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(171, 0, 0, 0.2);
}

.LoginForm_RegisterButton {
  width: 100%;
  padding: 12px 0;
  font-size: 0.9rem;
  font-weight: 600;
  border: 2px solid #585865;
  background: transparent;
  color: #111111;
  font-family: "Montserrat", sans-serif;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.LoginForm_RegisterButton:hover {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(17, 17, 17, 0.3);
}

.LoginForm_RegisterButton:active {
  transform: translateY(0);
}

.LoginForm_ErrorMessage {
  color: #ffffff;
  font-size: 0.9rem;
  margin-bottom: 16px;
  text-align: center;
  font-weight: 500;
  padding: 12px;
  border-radius: 8px;
  background: #ab0000;
  border-left: 4px solid #eb4040;
  font-family: "Roboto", sans-serif;
}

/* Responsive Design */
@media (min-width: 1280px) {
  .LoginForm_Card {
    max-width: 450px;
  }
}

@media (max-width: 768px) {
  .LoginForm_Overlay {
    padding: 0.5rem;
  }

  .LoginForm_Card {
    padding: 2rem 1.5rem 1.5rem;
    max-width: 100%;
    margin: 0 0.5rem;
  }

  .LoginForm_Title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .LoginForm_FieldGroup {
    margin-bottom: 1rem;
  }

  .LoginForm_FieldGroup input,
  .LoginForm_PasswordWrapper input {
    padding: 12px 14px;
    font-size: 0.95rem;
  }

  .LoginForm_PasswordWrapper input {
    padding: 12px 44px 12px 14px;
  }

  .LoginForm_Icon {
    right: 14px;
    font-size: 18px;
  }

  .LoginForm_SubmitButton,
  .LoginForm_RegisterButton,
  .LoginForm_GuestButton,
  .LoginForm_BackButton {
    padding: 12px 0;
    font-size: 0.95rem;
  }

  .LoginStepper_StepActions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .LoginForm_Overlay {
    padding: 0.25rem;
  }

  .LoginForm_Card {
    padding: 0.5rem 1rem 0.5rem;
    border-radius: 16px;
    max-width: 90%;
  }

  .LoginForm_Title {
    font-size: 1.3rem;
  }

  .LoginForm_Close {
    font-size: 1.5rem;
    top: 15px;
    right: 15px;
  }

  .LoginForm_Close svg {
    width: 30px;
    height: 30px;
  }

  .LoginStepper_Indicator {
    margin: 1rem 0 1.5rem;
  }

  .LoginStepper_Step {
    width: 35px;
    height: 35px;
    font-size: 0.8rem;
  }

  .LoginForm_FieldGroup input,
  .LoginForm_PasswordWrapper input {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
}

.LoginForm_GuestButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 40px;
  padding: 16px 0;
  background: transparent;
  color: #111111;
  border: 2px solid #585865;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 7px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.LoginForm_GuestButton:hover {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

.LoginForm_SwitchForm {
  text-align: center;
  font-size: 0.95rem;
  font-family: "Roboto", sans-serif;
}

.LoginForm_SwitchForm span {
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
  color: #111111;
}

.LoginForm_SwitchForm span:hover {
  color: #ab0000;
}

/* Login Stepper Form Styles */
.LoginStepper_Indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0 1.5rem;
  gap: 1rem;
}

.LoginStepper_Step {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #585865;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  position: relative;
  font-family: "Montserrat", sans-serif;
}

.LoginStepper_Step.active {
  background-color: #ab0000;
  color: #ffffff;
}

.LoginStepper_Step.completed {
  background-color: #5a9690;
  color: #ffffff;
}

.LoginStepper_Step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 2px;
  background-color: #585865;
}

.LoginStepper_Step.completed:not(:last-child)::after {
  background-color: #5a9690;
}

.LoginStepper_StepContent {
  min-height: 100px;
}

.LoginStepper_StepHeader {
  text-align: center;
  margin-bottom: 1.5rem;
}

.LoginStepper_StepHeader h3 {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: #111111;
  font-family: "Montserrat", sans-serif;
}

.LoginStepper_StepHeader p {
  margin: 0;
  color: #585865;
  font-size: 0.95rem;
  font-family: "Roboto", sans-serif;
}

.LoginStepper_StepActions {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.LoginStepper_StepActions button {
  flex: 1;
}

.LoginForm_BackButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 40px;
  background: #111111;
  color: #ffffff;
  border: none;
  padding: 16px 0;
  border-radius: 7px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
}

.LoginForm_BackButton:hover {
  background: #111111;
}

.LoginStepper_OtpHelper {
  text-align: center;
  margin: 1rem 0;
}

.LoginStepper_OtpHelper p {
  margin: 0 0 0.5rem;
  color: #585865;
  font-size: 0.9rem;
  font-family: "Roboto", sans-serif;
}

.LoginStepper_ResendButton {
  background: none;
  border: none;
  color: #111111;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: "Montserrat", sans-serif;
}

.LoginStepper_ResendButton:hover {
  color: #ab0000;
}

.LoginStepper_ResendButton:disabled {
  color: #585865;
  cursor: not-allowed;
}

.LoginStepper_Divider {
  display: flex;
  justify-self: center;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  width: 100%;
}

.LoginStepper_Divider::before,
.LoginStepper_Divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #585865;
}

.LoginStepper_Divider span {
  padding: 0 1rem;
  color: #111111;
  font-size: 0.9rem;
  font-family: "Roboto", sans-serif;
}
.RegistrationForm_Overlay {
  position: fixed;
  inset: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  backdrop-filter: blur(0.5px);
  padding: 1rem;
}

.RegistrationForm_Card {
  background: #ffffff;
  border-radius: 20px;
  padding: 2rem 1.5rem 1.5rem;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  font-family: "Roboto", sans-serif;
  transform: scale(0.9);
  animation: modalSlideIn 0.3s ease-out forwards;
  box-shadow: 0 20px 60px rgba(17, 17, 17, 0.5);
}

@keyframes modalSlideIn {
  to {
    transform: scale(1);
  }
}

.RegistrationForm_Close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111111;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  transition: color 0.3s ease;
}

.RegistrationForm_Close:hover {
  color: #ab0000;
}

.RegistrationForm_Title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.RegistrationForm_Subtitle {
  text-align: center;
  color: #585865;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  font-family: "Roboto", sans-serif;
}

.RegistrationForm_Form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.RegistrationForm_Row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.RegistrationForm_FieldGroup {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.RegistrationForm_FieldGroup label {
  padding: 5px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #111111;
  margin-left: 4px;
}

.password_label { 
  padding: 1px;
}

.RegistrationForm_FieldGroup input,
.RegistrationForm_FieldGroup select,
.RegistrationForm_FieldGroup textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  border: 2px solid #585865;
  border-radius: 8px;
  background: #ffffff;
  outline: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
  font-family: "Roboto", sans-serif;
  color: #111111;
}

.RegistrationForm_FieldGroup input:focus,
.RegistrationForm_FieldGroup select:focus,
.RegistrationForm_FieldGroup textarea:focus {
  border-color: #eb4040;
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1);
}

.RegistrationForm_FieldGroup input:hover,
.RegistrationForm_FieldGroup select:hover,
.RegistrationForm_FieldGroup textarea:hover {
  border-color: #ab0000;
}

.RegistrationForm_FieldGroup input.error,
.RegistrationForm_FieldGroup select.error,
.RegistrationForm_FieldGroup textarea.error {
  border-color: #ab0000;
  background-color: rgba(171, 0, 0, 0.05);
}

.RegistrationForm_PasswordWrapper {
  position: relative;
  width: 100%;
  padding-bottom: 5px;
}

.RegistrationForm_PasswordWrapper input {
  padding-right: 48px;
}

.RegistrationForm_Icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #585865;
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.3s ease;
}

.RegistrationForm_Icon:hover {
  color: #ab0000;
}

.RegistrationForm_Error {
  color: #ab0000;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  margin-left: 4px;
  font-family: "Roboto", sans-serif;
}

.RegistrationForm_CheckboxGroup {
  margin: 0.5rem 0;
}

.RegistrationForm_CheckboxLabel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #111111;
  font-family: "Roboto", sans-serif;
}

.RegistrationForm_CheckboxLabel a {
  text-wrap: nowrap;
  word-break: break-word;
}

.RegistrationForm_CheckboxLabel input[type="checkbox"] {
  display: none;
}

.RegistrationForm_Checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #585865;
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.3s ease;
}

.RegistrationForm_CheckboxLabel
  input[type="checkbox"]:checked
  + .RegistrationForm_Checkmark {
  background-color: #ab0000;
  border-color: #ab0000;
}

.RegistrationForm_CheckboxLabel
  input[type="checkbox"]:checked
  + .RegistrationForm_Checkmark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.RegistrationForm_CheckboxLabel a {
  color: #ab0000;
  text-decoration: none;
  font-weight: 600;
}

.RegistrationForm_CheckboxLabel a:hover {
  text-decoration: underline;
  color: #eb4040;
}

.RegistrationForm_ErrorMessage {
  color: #ffffff;
  font-size: 0.9rem;
  text-align: center;
  font-weight: 500;
  padding: 12px;
  background: #ab0000;
  border-radius: 8px;
  border-left: 4px solid #eb4040;
  font-family: "Roboto", sans-serif;
}

.RegistrationForm_Buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.RegistrationForm_SwitchForm {
  text-align: center;
  font-size: 0.95rem;
  color: #585865;
  font-family: "Roboto", sans-serif;
}

.RegistrationForm_SwitchForm span {
  color: #ab0000;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s ease;
}

.RegistrationForm_SwitchForm span:hover {
  color: #eb4040;
  text-decoration: underline;
}

/* Responsive Design */
@media (min-width: 1280px) {
  .RegistrationForm_Card {
    max-width: 520px;
  }
}

@media (max-width: 768px) {
  .RegistrationForm_Card {
    padding: 1.5rem;
    max-width: 100%;
    margin: 0 0.5rem;
  }

  .RegistrationForm_Title {
    font-size: 1.5rem;
  }

  .RegistrationForm_Row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .RegistrationForm_FieldGroup input,
  .RegistrationForm_FieldGroup select,
  .RegistrationForm_FieldGroup textarea {
    margin-top: 5px;
    padding: 12px 14px;
    font-size: 0.95rem;
  }

  .RegistrationForm_PasswordWrapper input {
    padding-right: 44px;
  }

  .RegistrationForm_Icon {
    right: 14px;
    font-size: 16px;
  }

  .RegistrationForm_SubmitButton,
  .RegistrationForm_BackButton {
    padding: 12px 0;
    font-size: 0.95rem;
  }

  .RegistrationStepper_StepActions {
    flex-direction: column;
    gap: 0.75rem;
    
  }

  /* Modal Mobile Styles */
  .RegistrationForm_ModalOverlay {
    padding: 1rem 0.5rem;
    align-items: flex-start;
  }

  .RegistrationForm_ModalCard {
    padding: 1.5rem 1rem 1rem;
    max-width: 100%;
    max-height: calc(100vh - 2rem);
    border-radius: 16px;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }

  .RegistrationForm_ModalTitle {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
  }

  .RegistrationForm_ModalContent {
    padding: 0.75rem 0;
    font-size: 0.9rem;
  }

  .RegistrationForm_ModalSection {
    margin-bottom: 1.25rem;
  }

  .RegistrationForm_ModalSection h3 {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
  }

  .RegistrationForm_ModalFooter {
    margin-top: 1.5rem;
    padding: 0.75rem;
  }

  .RegistrationForm_ModalFooter p {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .RegistrationForm_Card {
    padding: 0.5rem 1rem 0.5rem;
    border-radius: 16px;
    max-width: 95%;
  }

  .RegistrationForm_Title {
    font-size: 1.3rem;
  }

  .RegistrationForm_Close {
    font-size: 1.3rem;
    top: 15px;
    right: 15px;
  }

  .RegistrationForm_Close img {
    width: 20px;
    height: 20px;
  }

  .RegistrationForm_Form {
    gap: 1.25rem;
  }

  .RegistrationForm_CheckboxGroup {
    display: flex;
    justify-content: center;
  }

  .RegistrationForm_CheckboxLabel {
    align-items: flex-start;
    font-size: 0.70rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    text-align: center;
    justify-content: center;
    width: 100%;
  }

  .RegistrationForm_CheckboxLabel a {
    text-wrap: wrap;
    display: inline;
  }

  /* Center Privacy Policy when it wraps to new line */
  .RegistrationForm_CheckboxLabel a:last-of-type {
    flex-basis: 100%;
    text-align: center;
    margin-top: 0.25rem;
  }

  .RegistrationStepper_Indicator {
    margin: 1rem 0 1.5rem;
  }

  .RegistrationStepper_Step {
    width: 35px;
    height: 35px;
    font-size: 0.8rem;
  }

  .RegistrationForm_FieldGroup input,
  .RegistrationForm_FieldGroup select,
  .RegistrationForm_FieldGroup textarea {
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  /* Modal Small Mobile Styles */
  .RegistrationForm_ModalOverlay {
    padding: 0.5rem 0.25rem;
    align-items: flex-start;
  }

  .RegistrationForm_ModalCard {
    padding: 1rem 0.75rem 0.75rem;
    max-width: 98%;
    max-height: calc(100vh - 1rem);
    border-radius: 12px;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }

  .RegistrationForm_ModalTitle {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    padding: 0 0.5rem;
  }

  .RegistrationForm_ModalContent {
    padding: 0.5rem 0;
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .RegistrationForm_ModalSection {
    margin-bottom: 1rem;
  }

  .RegistrationForm_ModalSection h3 {
    font-size: 1rem;
    margin-bottom: 0.35rem;
  }

  .RegistrationForm_ModalSection p {
    font-size: 0.85rem;
  }

  .RegistrationForm_ModalFooter {
    margin-top: 1rem;
    padding: 0.75rem;
  }

  .RegistrationForm_ModalFooter p {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .RegistrationForm_Close {
    font-size: 1.2rem;
    top: 12px;
    right: 12px;
  }
}

/* Registration Stepper Specific Styles */
.RegistrationStepper_Indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0 1.5rem;
  gap: 1rem;
}

.RegistrationStepper_Step {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #585865;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  position: relative;
  font-family: "Montserrat", sans-serif;
}

.RegistrationStepper_Step.active {
  background-color: #ab0000;
  color: #ffffff;
}

.RegistrationStepper_Step.completed {
  background-color: #5a9690;
  color: #ffffff;
}

.RegistrationStepper_Step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 2px;
  background-color: #585865;
}

.RegistrationStepper_Step.completed:not(:last-child)::after {
  background-color: #5a9690;
}

.RegistrationStepper_StepContent {
  min-height: 100px;
}

.RegistrationStepper_StepHeader {
  text-align: center;
  margin-bottom: 1.5rem;
}

.RegistrationStepper_StepHeader h3 {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: #111111;
  font-family: "Montserrat", sans-serif;
}

.RegistrationStepper_StepHeader p {
  margin: 0;
  color: #585865;
  font-size: 0.95rem;
  font-family: "Roboto", sans-serif;
}

.RegistrationStepper_StepActions {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.RegistrationStepper_StepActions button {
  flex: 1;
  padding: 16px 0;
}

/* Step 1: Next Button */
.RegistrationStepper_Step1_Next {
  background: linear-gradient(135deg, #ab0000 0%, #eb4040 100%);
  color: #ffffff;
  border: none;
  border-radius: 7px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(171, 0, 0, 0.3);
}

.RegistrationStepper_Step1_Next:hover {
  background: linear-gradient(135deg, #8b0000 0%, #ab0000 100%);
  box-shadow: 0 6px 20px rgba(171, 0, 0, 0.4);
}

/* Step 2: Back and Next Buttons */
.RegistrationStepper_Step2_Back {
  background: #585865;
  color: #ffffff;
  border: none;
  border-radius: 7px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.RegistrationStepper_Step2_Back:hover {
  background: #111111;
}

.RegistrationStepper_Step2_Next {
  background: linear-gradient(135deg, #ab0000 0%, #eb4040 100%);
  color: #ffffff;
  border: none;
  border-radius: 7px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(171, 0, 0, 0.3);
}

.RegistrationStepper_Step2_Next:hover {
  background: linear-gradient(135deg, #8b0000 0%, #ab0000 100%);
  box-shadow: 0 6px 20px rgba(171, 0, 0, 0.4);
}

/* Step 3: Back and Next Buttons */
.RegistrationStepper_Step3_Back {
  background: #585865;
  color: #ffffff;
  border: none;
  border-radius: 7px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.RegistrationStepper_Step3_Back:hover {
  background: #111111;
}

.RegistrationStepper_Step3_Next {
  background: linear-gradient(135deg, #ab0000 0%, #eb4040 100%);
  color: #ffffff;
  border: none;
  border-radius: 7px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(171, 0, 0, 0.3);
}

.RegistrationStepper_Step3_Next:hover {
  background: linear-gradient(135deg, #8b0000 0%, #ab0000 100%);
  box-shadow: 0 6px 20px rgba(171, 0, 0, 0.4);
}

/* Step 4: Back and Create Account Buttons */
.RegistrationStepper_Step4_Back {
  background: #585865;
  color: #ffffff;
  border: none;
  border-radius: 7px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.RegistrationStepper_Step4_Back:hover {
  background: #111111;
}

.RegistrationStepper_Step4_CreateAccount {
  background: #ab0000;
  color: #ffffff;
  border: none;
  border-radius: 7px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(171, 0, 0, 0.3);
}

.RegistrationStepper_Step4_CreateAccount:hover {
  background: #8b0000;
  box-shadow: 0 6px 20px rgba(171, 0, 0, 0.4);
}

/* OTP Resend Link Styles */
.RegistrationForm_OtpResendContainer {
  text-align: center;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  font-family: "Roboto", sans-serif;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.RegistrationForm_OtpResendLink {
  color: #ab0000;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.RegistrationForm_OtpResendLink:hover {
  color: #eb4040;
  text-decoration: underline;
}

.RegistrationForm_OtpTimer {
  color: #585865;
  font-weight: 600;
  cursor: default;
}

.RegistrationForm_OtpResendLink.disabled {
  color: #585865;
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

/* Modal Overlay Styles */
.RegistrationForm_ModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(2px);
}

.RegistrationForm_ModalCard {
  background: #ffffff;
  border-radius: 20px;
  padding: 2rem 1.5rem 1.5rem;
  width: 100%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  font-family: "Roboto", sans-serif;
  box-shadow: 0 20px 60px rgba(17, 17, 17, 0.5);
}

.RegistrationForm_ModalTitle {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.RegistrationForm_ModalContent {
  padding: 1rem 0;
  line-height: 1.6;
  color: #333;
  font-family: "Roboto", sans-serif;
  font-size: 0.95rem;
}

.RegistrationForm_ModalSection {
  margin-bottom: 1.5rem;
}

.RegistrationForm_ModalSection h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #111;
  font-family: "Montserrat", sans-serif;
}

.RegistrationForm_ModalSection p {
  margin: 0;
  color: #333;
  font-family: "Roboto", sans-serif;
}

.RegistrationForm_ModalFooter {
  margin-top: 2rem;
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.RegistrationForm_ModalFooter p {
  margin: 0;
  font-weight: 600;
  color: #111;
  font-family: "Roboto", sans-serif;
}

/* Dark Mode: Make date/time input calendar icons white */
.theme-dark .RegistrationForm_FieldGroup input[type="date"]::-webkit-calendar-picker-indicator,
.theme-dark .RegistrationForm_FieldGroup input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.theme-dark .RegistrationForm_FieldGroup input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.theme-dark .RegistrationForm_FieldGroup input[type="date"]::-moz-calendar-picker-indicator,
.theme-dark .RegistrationForm_FieldGroup input[type="datetime-local"]::-moz-calendar-picker-indicator,
.theme-dark .RegistrationForm_FieldGroup input[type="time"]::-moz-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}


/* Forget Password Stepper Form Styles */
.ForgetPasswordStepper_Indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0 1.5rem;
  gap: 1rem;
}

.ForgetPasswordStepper_Step {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #585865;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  position: relative;
  font-family: "Montserrat", sans-serif;
}

.ForgetPasswordStepper_Step.active {
  background-color: #ab0000;
  color: #ffffff;
}

.ForgetPasswordStepper_Step.completed {
  background-color: #5A9690;
  color: #ffffff;
}

.ForgetPasswordStepper_Step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 2px;
  background-color: #585865;
}

.ForgetPasswordStepper_Step.completed:not(:last-child)::after {
  background-color: #5A9690;
}

.ForgetPasswordStepper_StepContent {
  min-height: 200px;
}

.ForgetPasswordStepper_StepHeader {
  text-align: center;
  margin-bottom: 1.5rem;
}

.ForgetPasswordStepper_StepHeader h3 {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: #111111;
  font-family: "Montserrat", sans-serif;
}

.ForgetPasswordStepper_StepHeader p {
  margin: 0;
  color: #585865;
  font-size: 0.95rem;
  font-family: "Roboto", sans-serif;
}

.ForgetPasswordStepper_StepActions {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.ForgetPasswordStepper_StepActions button {
  flex: 1;
}

.ForgetPasswordStepper_OtpHelper {
  text-align: center;
  margin: 1rem 0;
}

.ForgetPasswordStepper_OtpHelper p {
  margin: 0 0 0.5rem;
  color: #585865;
  font-size: 0.9rem;
  font-family: "Roboto", sans-serif;
}

.ForgetPasswordStepper_ResendButton {
  background: none;
  border: none;
  color: #111111;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: "Montserrat", sans-serif;
}

.ForgetPasswordStepper_ResendButton:hover {
  color: #ab0000;
}

.ForgetPasswordStepper_ResendButton:disabled {
  color: #585865;
  cursor: not-allowed;
}

.ForgetPasswordStepper_Divider {
  display: flex;
  justify-self: center;
  margin: 1.5rem 0;
  text-align: center;
  width: 100%;
}

.ForgetPasswordStepper_Divider::before,
.ForgetPasswordStepper_Divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #585865;
}

.ForgetPasswordStepper_Divider span {
  padding: 0 1rem;
  color: #111111;
  font-size: 0.9rem;
  font-family: "Roboto", sans-serif;
}


/* Homepage Navigation */
.Homepage_Container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Testimonials Section */
.Homepage_Testimonials_Section {
  background-color: #ffffff;
  color: #222222;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  gap: 3rem;
  padding: 5rem 2rem;
}

.Homepage_Testimonials_Section_Title {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #111111;
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.Homepage_Testimonials_Section_Cards_Container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  background: transparent;
}

.Homepage_Testimonials_Section_Cards_Container_Cards {
  background: #F0F8FF;
  border-radius: 20px;
  border: none;
  padding: 10px;
  overflow: hidden;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.Homepage_Testimonials_Section_Cards_Container_Cards_QuoteIcon {
  font-size: 3rem;
  color: #ab0000;
  text-align: center;
  margin: 1rem 0 0 0;
}

.Homepage_Testimonials_Section_Cards_Container_Cards_Author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.Homepage_Testimonials_Section_Cards_Container_Cards_Author_Pic {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.Homepage_Testimonials_Section_Cards_Container_Cards_Author_Info {
  text-align: center;
}

.Homepage_Testimonials_Section_Cards_Container_Cards_Author_Name {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: #111111;
  margin: 0;
}

.Homepage_Testimonials_Section_Cards_Container_Cards_Author_Role {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-size: 0.9rem;
  color: #585865;
  margin: 0;
  font-weight: 400;
}

.Homepage_Testimonials_Section_Cards_Container_Cards_Descriptions_Quote {
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: center;
  color: #111111;
  margin: 1rem 0 0 0;
  position: relative;
}

.Homepage_Navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 100%;
  height: 80px;
  background: #111111;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  transition: all 0.5s ease-in-out;
  padding: 0 2rem;
  box-sizing: border-box;
  overflow: hidden;
}

.Homepage_Navigation_Wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

@media (min-width: 821px) {
  .Homepage_Navigation.scrolled {
    top: 15px;
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 25px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    height: 90px;
    padding: 0 1.5rem;
  }
}

.Homepage_Navigation_h1 {
  color: #ffffff;
}

.Homepage_Navigation_Left {
  display: flex;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  flex-shrink: 0;
}

.Homepage_Navigation_Left img {
  width: 40px;
  height: auto;
  margin-right: 12px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.Homepage_Navigation_Middle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-family: "Montserrat", sans-serif;
  min-width: 0;
}

.Homepage_Navigation_Middle ul {
  display: flex;
  list-style-type: none;
  gap: 2rem;
  font-family: "Montserrat", sans-serif;
  margin: 0;
  padding: 0;
}

.Homepage_Navigation_Middle ul li button {
  background: none;
  text-wrap: nowrap;
  border: none;
  color: #ffffff;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.Homepage_Navigation_Middle ul li button:hover {
  filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.3));
}

.Homepage_Navigation_Right {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: "Montserrat", sans-serif;
  flex-shrink: 0;
  min-width: 0;
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  transition: all 0.3s ease;
}

/* Very Small Desktop Screens - Switch to mobile layout if needed */
@media (max-width: 900px) {
  .Homepage_Navigation {
    padding: 0 1rem;
  }
}

@media (max-width: 820px) {
  .Homepage_Navigation_Middle {
    display: none;
  }

  .Homepage_Navigation_Right {
    display: none;
  }

  .mobile-menu-toggle {
    display: block;
  }
}

/* Ensure mobile toggle is hidden on larger screens */
@media (min-width: 821px) {
  .mobile-menu-toggle {
    display: none !important;
  }

  .Homepage_Navigation_Middle {
    display: flex !important;
  }

  .Homepage_Navigation_Right {
    display: flex !important;
  }
}

.mobile-menu-toggle:hover {
  color: #eb4040;
  transform: scale(1.1);
}

.mobile-menu {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 999;
  animation: slideDown 0.3s ease;
  box-sizing: border-box;
}

.mobile-menu-content {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  gap: 1rem;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}

.mobile-menu-content button {
  background: none;
  border: none;
  color: #111111;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  padding: 1rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.mobile-menu-content button:hover {
  background: #f5f7f8;
  color: #ab0000;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.mobile-menu-buttons button {
  width: 100%;
  padding: 0.75rem;
  border-radius: 25px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.Homepage_Navigation_Right button {
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.Navigation_Login_Button {
  background: linear-gradient(135deg, #ab0000 0%, #eb4040 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(171, 0, 0, 0.3);
  border: none;
  transition: all 0.7s ease;
}

.Navigation_Login_Button:hover {
  box-shadow: 0 4px 15px rgba(240, 248, 255, 0.1);
}

.Navigation_Register_Button {
  color: #ffffff;
  background-color: transparent;
  border: 2px solid #ffffff;
}

.Navigation_Register_Button:hover {
  color: #111111;
  background-color: #ffffff;
  border: 2px solid #111111;
}

.Homepage_Navigation_Right hr {
  width: 2px;
  height: 24px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(88, 88, 101, 0.4),
    transparent
  );
  border: none;
  border-radius: 12px;
}

/* Homepage HERO SECTION */
.Homepage_Photo_Slider {
  position: relative;
  background-color: black;
  height: 100vh;
  min-height: 400px;
  max-height: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.hero-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  max-width: 800px;
  padding: 0 clamp(1rem, 3vw, 2rem);
  width: 100%;
  box-sizing: border-box;
}

.hero-title {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 4rem);
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  line-height: 1.2;
  letter-spacing: clamp(0.5px, 0.5vw, 1px);
  white-space: normal;
  word-wrap: break-word;
}

.hero-subtitle {
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-size: clamp(0.875rem, 3.5vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 4vw, 2rem);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  line-height: 1.5;
  opacity: 0.9;
  max-width: 100%;
}

.hero-cta {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1rem);
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

/* Hero Section Buttons */

.hero-section-button-one img {
  width: clamp(12px, 3vw, 16px);
  height: auto;
  filter: brightness(100) invert(0);
}

.hero-section-button-two img {
  width: clamp(16px, 3.5vw, 20px);
  height: auto;
  filter: invert(1);
}

.hero-section-button-one {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(0.25rem, 1vw, 0.5rem);
  padding-top: clamp(12px, 3vw, 20px);
  padding-bottom: clamp(12px, 3vw, 20px);
  padding-left: clamp(15px, 4vw, 30px);
  padding-right: clamp(15px, 4vw, 30px);
  border-radius: 32px;
  border: none;
  font-size: clamp(0.75rem, 2vw, 1rem);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  background: linear-gradient(135deg, #ab0000 0%, #eb4040 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(171, 0, 0, 0.3);
  cursor: pointer;
  white-space: nowrap;
}

.hero-section-button-two {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(0.25rem, 1vw, 0.5rem);
  padding-top: clamp(12px, 3vw, 20px);
  padding-bottom: clamp(12px, 3vw, 20px);
  padding-left: clamp(15px, 4vw, 25px);
  padding-right: clamp(15px, 4vw, 25px);
  border-radius: 32px;
  border: none;
  font-size: clamp(0.75rem, 2vw, 1rem);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  color: #ffffff;
  backdrop-filter: blur(10px);
  cursor: pointer;
  white-space: nowrap;
}

.hero-section-button-one:hover {
  box-shadow: 0 2px 20px 2px rgba(255, 255, 255, 0.2);
}

.hero-section-button-two:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
}

.hero-section-button-two:hover img {
  filter: invert(0);
}

/* Responsiveness Section */

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* Homepage ABOUT */
.Homepage_About_Section {
  grid-area: 3 / 1 / 4 / 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: clamp(2rem, 4vw, 3rem);
  padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 3vw, 2rem);

  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: auto;
}

.Homepage_About_Section_Box1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: min(60%, 800px);
  min-width: 280px;
  max-width: 100%;
  font-family: "Roboto", sans-serif;
  font-size: clamp(0.9rem, 2vw, 1rem);
  line-height: 1.7;
  color: #111111;
  flex: 1;
}

.Homepage_About_Section_Title {
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ab0000;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  position: relative;
}

.Homepage_About_Section_Title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #ab0000 0%, #8b0000 100%);
  border-radius: 2px;
}

.Homepage_About_Section_Box1_h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #111111;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -1px;
}

.Homepage_About_Section_Box1_p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #585865;
  font-family: "Roboto", sans-serif;
  margin-bottom: 2rem;
  font-weight: 400;
}

.Homepage_About_Section_Box1_Bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .Homepage_About_Section_Box1_Bullets {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.Homepage_About_Section_Box1_Bullets_Part1 ul,
.Homepage_About_Section_Box1_Bullets_Part2 ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.Homepage_About_Section_Box1_Bullets_Part1 ul li,
.Homepage_About_Section_Box1_Bullets_Part2 ul li {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  border-left: 4px solid #ab0000;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  margin-bottom: 0.5rem;
}


.bullet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ab0000 0%, #8b0000 100%);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1rem;
  margin-right: 1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(171, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.bullet-text {
  flex: 1;
  font-weight: 500;
  line-height: 1.5;
}

.Homepage_About_Section_Box1_Bullets_Part1 ul li:hover .bullet-icon,
.Homepage_About_Section_Box1_Bullets_Part2 ul li:hover .bullet-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(171, 0, 0, 0.4);
}

.Homepage_About_Section_Box2 {
  width: min(35%, 500px);
  min-width: 280px;
  height: clamp(300px, 40vw, 500px);
  aspect-ratio: 4/5;
  border-radius: 20px;
  background-image: url("/assets/About3-BjHdZXYE.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.Homepage_About_Section_Box2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(171, 0, 0, 0.1) 0%,
    rgba(139, 0, 0, 0.1) 100%
  );
  z-index: 1;
}

/* Homepage SYSTEM OVERVIEW */
.Homepage_System_Overview_Section {
  grid-area: 4 / 1 / 5 / 1;
  padding: 6rem 2rem;
  background-image: url("/assets/Overview-HnmPlixB.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  text-align: center;
}

.Homepage_System_Overview_Section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.Homepage_System_Overview_Section > * {
  position: relative;
  z-index: 2;
}

.Overview-section-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
  letter-spacing: -1px;
  text-align: center;
  max-width: 1200px;
  align-self: center;
}

.section-subtitle {
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 800px;
  margin: 0 auto 4rem auto;
  line-height: 1.6;
}

.System_Overview_Grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  width: min(90%, 1200px);
  margin: auto;
  padding: 0;
}
.System_Overview_Header {
  width: min(90%, 1200px);
  margin: 0 auto 2rem auto;
  padding: 0 1rem;
  text-align: center;
}

.System_Feature_Card {
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
  border: 1px solid rgba(171, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.System_Feature_Card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ab0000 0%, #eb4040 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.System_Feature_Card:hover::before {
  transform: scaleX(1);
}

.System_Feature_Card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  border-color: #ab0000;
}

.System_Icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 0.75rem auto;
  display: block;
  transition: all 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.System_Feature_Card:hover .System_Icon {
  transform: scale(1.1);
  filter: drop-shadow(0 2px 4px rgba(171, 0, 0, 0.2));
}

.System_Feature_Card img {
  filter: invert(0);
}

.System_Feature_Card img[src*="screen.svg"] {
  filter: invert(1);
}

.System_Feature_Card h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: #111111;
  margin-bottom: 0.5rem;
}

.System_Feature_Card p {
  font-family: "Roboto", sans-serif;
  font-size: 0.5rem;
  line-height: 1.4;
  color: #585865;
}

/* Homepage TESTIMONIALS */

/* TESTIMONIALS RESPONSIVENESS */

/* Homepage MILESTONES / ACCOMPLISHMENTS */
.Homepage_Accomplishments_Section {
  background: linear-gradient(135deg, #f5f7f8 0%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 2rem;
}

.Homepage_Accomplishments_Section_Content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.Homepage_Accomplishments_Section_Header {
  text-align: center;
  margin-bottom: 4rem;
}

.Homepage_Accomplishments_Section_Gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
}

.Homepage_Accomplishments_Section_Controls {
  display: flex;
  align-items: center;
}

.milestone-nav-btn {
  background: linear-gradient(135deg, #ab0000 0%, #8b0000 100%);
  border: none;
  border-radius: 50%;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(171, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
}

.milestone-nav-btn:hover {
  background: linear-gradient(135deg, #8b0000 0%, #6b0000 100%);
  transform: scale(1.1);
  box-shadow: 0 12px 30px rgba(171, 0, 0, 0.4);
}

.milestone-nav-btn img {
  width: 28px;
  height: 28px;
  filter: invert(1);
}

.Homepage_Accomplishments_Section_Images_Container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  max-width: 1200px;
  width: 100%;
  justify-self: center;
}

.Homepage_Accomplishments_Section_Milestone_Card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(171, 0, 0, 0.08);
  position: relative;
}

.Homepage_Accomplishments_Section_Milestone_Card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ab0000 0%, #eb4040 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.Homepage_Accomplishments_Section_Milestone_Image_Container {
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  position: relative;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.Homepage_Accomplishments_Section_Milestone_Image_Container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  filter: brightness(0.95);
}

.Homepage_Accomplishments_Section_Milestone_Image_Container:hover img {
  transform: scale(1.08);
  filter: brightness(1.05);
}

.Homepage_Accomplishments_Section_Milestone_Info {
  padding: 2rem 1.8rem;
  text-align: center;
}

.Homepage_Accomplishments_Section_Milestone_Title {
  font-family: "Montserrat", sans-serif;
  text-align: left;
  margin-top: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: #111111;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  letter-spacing: -0.5px;
}

.Homepage_Accomplishments_Section_Milestone_Date {
  font-family: "Roboto", sans-serif;
  font-size: 0.95rem;
  color: #ab0000;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.Homepage_Accomplishments_Section_Milestone_Description {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #585865;
  margin: 0;
  text-align: justify;
  font-weight: 400;
}

.Homepage_Accomplishments_Section_Boxes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1400px;
}

.Homepage_Accomplishments_Section_Box1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: #111111;
  text-align: center;
  margin-bottom: 2rem;
  letter-spacing: -2px;
}

.Homepage_Accomplishments_Section_Box2 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #585865;
  text-align: center;
  margin-bottom: 4rem;
  max-width: 600px;
  line-height: 1.6;
  opacity: 0.8;
}

.Homepage_Accomplishments_Section_Boxes_Middle_Container {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 1rem 0;
  scroll-behavior: smooth;
}

.Homepage_Accomplishments_Section_Boxes_Navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  width: 100%;
  justify-content: center;
  margin-top: 2rem;
}

.Homepage_Accomplishments_Section_Boxes_Buttons button {
  background: linear-gradient(135deg, #ab0000 0%, #8b0000 100%);
  border: none;
  border-radius: 50%;
}

.Homepage_Accomplishments_Section_Boxes_Middle_Container_Images {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  border: none;
  width: 280px;
  height: 280px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.Homepage_Accomplishments_Section_Boxes_Middle_Container_Images:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.Homepage_Accomplishments_Section_Boxes_Middle_Container_Images::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(231, 76, 60, 0.1) 0%,
    rgba(192, 57, 43, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.Homepage_Accomplishments_Section_Boxes_Middle_Container_Images:hover::after {
  opacity: 1;
}

.Homepage_Accomplishments_Section_Boxes_Middle_Container_Images_One {
  background-image: url("/assets/Milestones1-CLH2yoOT.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.Homepage_Accomplishments_Section_Boxes_Middle_Container_Images_Two {
  background-image: url("/assets/Milestones2-u0juAc1P.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.Homepage_Accomplishments_Section_Boxes_Middle_Container_Images_Three {
  background-image: url("/assets/Milestones3-0LIuxaDa.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.Homepage_Accomplishments_Section_Boxes_Middle_Container_Images_Four {
  background-image: url("/assets/Milestones4-DYcta3ze.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.Homepage_Accomplishments_Section_Boxes_Middle_Container_Images_Five {
  background-image: url("/assets/Milestones5-Dg7DNMIC.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.Homepage_Accomplishments_Section_Boxes_Buttons button img {
  width: 28px;
  height: 28px;
  filter: invert(1);
}

/* Homepage FOOTER */
.Homepage_Footer_Section {
  grid-area: 8 / 1 / 9 / 1;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 4vw, 3rem);
  min-height: auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem);
}

.Homepage_Footer_Section_Border {
  width: min(90%, 1200px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  margin: 0 auto;
}

.Homepage_Footer_Section_Box_Container_One {
  padding: clamp(16px, 3vw, 24px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  line-height: 1.6;
  width: 100%;
}

.Homepage_Footer_Section_Box_Container_One ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(0.75rem, 2vw, 1rem);
  width: 100%;
}

.Homepage_Footer_Section_Box_Container_One ul li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.Homepage_Footer_Section_Box_Container_Line_Divider {
  width: min(90%, 100%);
  border: none;
  border-top: 1px solid rgba(240, 248, 255, 0.2);
  margin: clamp(1rem, 2vw, 20px) auto;
}

.Homepage_Footer_Section_Box_Container_Two {
  justify-content: center;
  align-items: center;
  padding: clamp(1%, 2vw, 2%);
  width: 100%;
}

.Homepage_Footer_Section_Box_Container_One_h3 {
  font-family: "Roboto", sans-serif;
  font-size: clamp(1rem, 2.5vw, 20px);
  color: #ffffff;
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.Homepage_Footer_Section_Box_Container_One_Span {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  padding-bottom: 5px;
  font-size: clamp(0.8rem, 1.8vw, 1rem);
}

.Homepage_Footer_Section_Box_Container_One_Span_Sub {
  font-family: "Roboto", sans-serif;
  font-style: italic;
  font-size: clamp(0.75rem, 1.6vw, 0.9rem);
}

.Homepage_Footer_Section_Box_Container_Two_P {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: clamp(0.8rem, 1.8vw, 1rem);
}

.Homepage_Footer_Section_Box_Container_Two {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  font-family: "Roboto", sans-serif;
  gap: 1rem;
}

.Homepage_Footer_Section_Box_Container_Two_Middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Homepage_Footer_Section_Box_Container_Two_Rights {
  place-self: start;
  align-self: center;
  font-size: clamp(0.75rem, 1.6vw, 0.9rem);
}

.Homepage_Footer_Section_Box_Container_Two_Org_Container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  place-items: center;
  align-self: center;
  place-self: center;
  gap: clamp(12px, 3vw, 20px);
  flex-wrap: wrap;
}

.Homepage_Footer_Section_Box_Container_Two_Org_Container img {
  width: clamp(35px, 8vw, 50px);
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.5));
}

.Homepage_Footer_Section_Box_Container_Two_Socials {
  display: flex;
  flex-direction: row;
  gap: clamp(10px, 3vw, 25%);
  margin-right: clamp(10px, 2.5vw, 20px);
  place-self: end;
  align-self: center;
}

.Homepage_Footer_Section_Box_Container_Two_Socials img {
  width: clamp(24px, 5vw, 30px);
  height: auto;
  filter: invert(1);
}

.LoginFormOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Mobile Devices (up to 768px) */
@media (max-width: 768px) {
  .Homepage_Navigation {
    padding: 0 1rem;
    height: 70px;
  }

  .Homepage_Navigation_Middle {
    display: none;
  }

  .Homepage_Navigation_Right {
    display: none;
  }

  .mobile-menu-toggle {
    display: block;
  }

  .mobile-menu {
    top: 70px;
  }

  .mobile-menu-buttons {
    flex-direction: row;
    gap: 0.5rem;
  }

  .mobile-menu-buttons button {
    flex: 1;
    text-align: center;
    padding: 0.75rem;
  }
}

/* Hide mobile menu on larger screens */
@media (min-width: 821px) {
  .mobile-menu {
    display: none !important;
  }
}

/* Small Tablets (821px to 900px) */
@media (min-width: 810px) and (max-width: 900px) {
  .Homepage_Navigation {
    padding: 0 1rem;
  }

  .Homepage_Navigation_Middle ul {
    gap: 0.8rem;
  }

  .Homepage_Navigation_Middle ul li button {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
  }

  .Homepage_Navigation_Right {
    gap: 0.5rem;
  }

  .Homepage_Navigation_Right button {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }

  .Homepage_Navigation_h1 {
    font-size: 1.3rem;
  }

  .mobile-menu-toggle {
    display: none;
  }
}

/* Very Small Screens (821px to 850px) */
@media (min-width: 821px) and (max-width: 850px) {
  .Homepage_Navigation {
    padding: 0 0.8rem;
  }

  .Homepage_Navigation_Middle ul {
    gap: 0.5rem;
  }

  .Homepage_Navigation_Middle ul li button {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  .Homepage_Navigation_Right button {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
  }

  .Homepage_Navigation_h1 {
    font-size: 1.2rem;
  }
}

/* Medium Tablets (901px to 1024px) */
@media (min-width: 850px) and (max-width: 1024px) {
  .Homepage_Navigation {
    padding: 0 1.5rem;
  }

  .Homepage_Navigation_Middle ul {
    gap: 1.5rem;
  }

  .mobile-menu-toggle {
    display: none;
  }
}

/* Continue with existing mobile styles */
@media (max-width: 768px) {
  .Homepage_Photo_Slider {
    height: 80vh;
    min-height: 500px;
  }

  .hero-content {
    padding: 0 1rem;
  }

  .hero-cta {
    flex-direction: row;
    gap: 0.5rem;
  }

  .hero-section-button-one,
  .hero-section-button-two {
    font-size: 0.9rem;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .Homepage_Footer_Section_Box_Container_One ul {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .Homepage_Footer_Section_Box_Container_Two {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }

  .Homepage_Footer_Section_Box_Container_Two_Rights,
  .Homepage_Footer_Section_Box_Container_Two_Socials {
    place-self: center;
    margin: 0;
  }

  .Homepage_Footer_Section_Box_Container_Two_Org_Container {
    gap: 12px;
    flex-wrap: nowrap;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .hero-title {
    font-size: 1.5rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
  }

  .hero-cta {
    gap: 0.3rem;
  }

  .hero-section-button-one,
  .hero-section-button-two {
    font-size: 0.8rem;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .Homepage_About_Section {
    flex-direction: column;
    padding: 3rem 1rem;
    text-align: center;
  }

  .Homepage_About_Section_Box1 {
    width: 100%;
    order: 2;
  }

  .Homepage_About_Section_Box2 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    order: 1;
    margin-bottom: 2rem;
  }

  .Homepage_About_Section_Box1_Bullets {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .bullet-icon {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }

  .System_Overview_Grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 3rem 1rem;
  }

  .System_Feature_Card {
    padding: 2rem 1.5rem;
  }

  .Homepage_Testimonials_Section {
    padding: 3rem 1rem;
  }

  .Homepage_Testimonials_Section_Cards_Container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .Homepage_Accomplishments_Section {
    padding: 4rem 1rem;
  }

  .Homepage_Accomplishments_Section_Gallery {
    flex-direction: column;
    gap: 2rem;
  }

  .Homepage_Accomplishments_Section_Controls {
    order: 3;
  }

  .Homepage_Accomplishments_Section_Images_Container {
    grid-template-columns: 1fr;
    max-width: 350px;
    order: 2;
  }

  .milestone-nav-btn {
    width: 50px;
    height: 50px;
  }

  .milestone-nav-btn img {
    width: 24px;
    height: 24px;
  }
}

/* Tablet Devices (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .Homepage_Navigation {
    padding: 0 1.5rem;
  }

  .Homepage_Navigation_Middle ul {
    gap: 1.5rem;
  }

  .Homepage_About_Section {
    padding: 4rem 1.5rem;
  }

  .System_Overview_Grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 4rem 1.5rem;
  }

  .Homepage_Testimonials_Section_Cards_Container {
    grid-template-columns: repeat(2, 1fr);
  }

  .Homepage_Footer_Section_Box_Container_One ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .Homepage_Footer_Section_Box_Container_Two {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }

  .Homepage_Footer_Section_Box_Container_Two_Rights,
  .Homepage_Footer_Section_Box_Container_Two_Socials {
    place-self: center;
    margin: 0;
  }
}

/* Large Tablets and Small Desktops (1025px to 1200px) */
@media (min-width: 1025px) and (max-width: 1200px) {
  .System_Overview_Grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .Homepage_Testimonials_Section_Cards_Container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Extra Large Screens (1201px and up) */
@media (min-width: 1201px) {
  .Homepage_Navigation {
    padding: 0 3rem;
  }

  .System_Overview_Grid {
    max-width: 1400px;
  }
}

/* Mobile Menu Styles */
@media (max-width: 768px) {
  .mobile-menu-buttons .Navigation_Login_Button {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #ffffff;
  }

  .mobile-menu-buttons .Navigation_Register_Button {
    /* TO BE DESIGNED */
  }
}

/* Accessibility and Performance */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-scroll-indicator {
    animation: none;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .Homepage_Navigation_Left img,
  .System_Icon {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}
/* Homepage.css - Additional styles for Homepage component */

/* Testimonials section styles */
.testimonials-author-container {
  flex-direction: column;
  align-items: center;
}

.testimonials-author-pic {
  /* Background image will be set dynamically */
}

.testimonials-author-info {
  text-align: center;
}

.testimonials-quote {
  margin-top: 1rem;
}

.testimonials-quote-icon {
  margin-top: 1rem;
}
.PresidentSidebar {
  width: 15.625rem;
  height: 100vh;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: #111111;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0.125rem 0 0.625rem rgba(0, 0, 0, 0.2);
  transition: width 0.3s ease;
}

.PresidentSidebar.collapsed {
  width: 4rem;
}

/* Mobile Responsive Sidebar */
@media (max-width: 768px) {
  .PresidentSidebar {
    transform: translateX(-100%);
    width: 18.75rem;
    background-color: #111111;
    border-right: 0.0625rem solid #585865;
  }

  .PresidentSidebar.open {
    transform: translateX(0);
  }

  .PresidentSidebar.collapsed {
    transform: translateX(-100%);
  }

  .PresidentSidebar.collapsed.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 17, 17, 0.8);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 480px) {
  .PresidentSidebar {
    width: 16.75rem;
  }

  .PresidentSidebar.open {
    width: 16.75rem;
  }
}

.Sidebar_Header {
  display: flex;
  align-items: center;
  margin-bottom: 1.875rem;
  justify-content: space-between;
  gap: 0.5rem;
}

.Sidebar_UserInfo {
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 0.0625rem solid #585865;
  text-align: center;
}

.Sidebar_UserName {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
  font-family: "Roboto", sans-serif;
  word-wrap: break-word;
}

.Sidebar_Role {
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  text-transform: capitalize;
  white-space: nowrap;
  margin-right: 0.5rem;
}

.Sidebar_Menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.Sidebar_Menu li {
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.Sidebar_Link {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Roboto", sans-serif;
  text-wrap: nowrap;
  letter-spacing: 0.03125rem;
  font-weight: 500;
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.PresidentSidebar.collapsed .Sidebar_Link {
  justify-content: center;
  padding: 0.6rem;
}

.Sidebar_Link:hover {
  background-color: #585865;
}

.Sidebar_Link.active {
  background-color: #ab0000;
  color: #ffffff;
}

.Sidebar_Link svg {
  margin-right: 0.75rem;
  font-size: 1rem;
  min-width: 1rem;
}

.PresidentSidebar.collapsed .Sidebar_Link svg {
  margin-right: 0;
}

.link-text {
  transition: opacity 0.3s ease;
}

.PresidentSidebar.collapsed .link-text {
  opacity: 0;
  display: none;
}

.Sidebar_Link:visited {
  color: #ffffff;
}

/* Sidebar Toggle Button */
.sidebar-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  color: #ffffff;
}

.sidebar-toggle-btn:hover {
  background-color: #585865;
}

.sidebar-toggle-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}
.PresidentTopNav_Container {
  height: 5rem;
  background-color: #ffffff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 2.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 0.125rem 0.5rem rgba(17, 17, 17, 0.15);
  border-bottom: 0.0625rem solid #585865;
}

.PresidentTopNav_Container_Left {
  display: flex;
  align-items: center;
}

.PresidentTopNav_Container_Left_h1 {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: #111111;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.PresidentTopNav_Container_Right {
  display: flex;
  align-items: center;
}

.PresidentTopNav_Container_Right_Profile_Container {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
}

.PresidentTopNav_Container_Right_Profile_Container_img {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
}

.PresidentTopNav_Container_Right_Profile_Container_Dropdown {
  position: absolute;
  right: 0;
  top: 50px;
  background-color: #ffffff;
  width: 220px;
  border-radius: 12px;
  overflow: hidden;
  z-index: 101;
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.2);
  padding: 18px;
  border: 1px solid #585865;
}

.PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: "Roboto", sans-serif;
  color: #111111;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item:hover {
  background-color: #f5f7f8;
}

.PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item_img {
  width: 1rem;
  height: 1rem;
}

.PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item_span {
  flex: 1;
}

.president-topnav {
  height: 5rem;
  background-color: #ffffff;
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 0 2.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 0.125rem 0.5rem rgba(17, 17, 17, 0.15);
  border-bottom: 0.0625rem solid #585865;
}

.president-topnav.dark {
  background-color: #111111;
  color: #ffffff;
}

/* Left side with burger menu */
.topnav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Burger Menu Button */
.burger-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}

.burger-menu-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

.president-topnav .burger-menu-btn svg {
  color: #111111;
}

.president-topnav.dark .burger-menu-btn svg {
  color: #ffffff;
}

@media (max-width: 768px) {
  .burger-menu-btn {
    display: block;
  }
}

/* Dark Mode - Burger Menu */
.theme-dark .burger-menu-btn {
  color: #ffffff;
}

.theme-dark .burger-menu-btn svg {
  color: #ffffff;
}

.theme-dark .president-topnav .burger-menu-btn svg {
  color: #ffffff;
}

.topnav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

/* Responsive Navigation */
@media (max-width: 768px) {
  .president-topnav {
    padding: 0 1.5rem;
    height: 4.5rem;
  }

  .topnav-left {
    gap: 0.75rem;
  }

  .topnav-right {
    gap: 0.75rem;
  }

  .profile {
    padding: 0.625rem 0.875rem;
  }

  .profile img {
    width: 28px;
    height: auto;
  }

  .profile-text {
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .PresidentTopNav_Container {
    padding: 0 0.75rem;
    height: 3.75rem;
  }

  .president-topnav {
    padding: 0 0.75rem;
    height: 3.75rem;
  }

  .PresidentTopNav_Container_Left_h1 {
    font-size: 1rem;
  }

  .president-topnav .profile img {
    width: 1.5rem;
    height: 1.5rem;
  }

  .profile-text {
    font-size: 0.875rem;
  }
}

@media (max-width: 768px) {
  .PresidentTopNav_Container {
    padding: 0 1.5rem;
    height: 4.5rem;
  }

  .PresidentTopNav_Container_Left {
    gap: 0.75rem;
  }

  .PresidentTopNav_Container_Right {
    gap: 0.75rem;
  }

  .PresidentTopNav_Container_Right_Profile_Container {
    padding: 0.625rem 0.875rem;
  }

  .PresidentTopNav_Container_Right_Profile_Container_img {
    width: 28px;
    height: auto;
  }

  .PresidentTopNav_Container_Left_h1 {
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .PresidentTopNav_Container {
    padding: 0 1rem;
    height: 4rem;
  }

  .PresidentTopNav_Container_Left_h1 {
    display: none;
  }
}

@media (max-width: 480px) {
  .president-topnav {
    padding: 0 1rem;
    height: 4rem;
  }

  .profile-text {
    display: none;
  }
}

.profile {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.chevron-icon {
  font-size: 0.75rem;
  color: #111111;
}

.president-topnav .profile img {
  fill: #111111;
}

.profile img {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.5rem;
}

.profile-text {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #111111;
  letter-spacing: 0.05rem;
}

.profile-dropdown {
  position: absolute;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  right: 0;
  top: 50px;
  background-color: #ffffff;
  width: 220px;
  border-radius: 12px;
  overflow: hidden;
  z-index: 101;
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.2);
  padding: 18px;
  border: 1px solid #585865;
}

.dropdown-icon {
  color: #111111;
}

/* Dark mode dropdown styling is handled in theme.css */
/* This file only contains component-specific styles */

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: "Roboto", sans-serif;
  color: #111111;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f5f7f8;
}

.dropdown-item.logout-item {
  color: #ab0000;
}

.dropdown-item .logout-item img {
  align-self: center;
  justify-self: center;
}

.logout-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.logout-modal {
  background-color: #ffffff;
  padding: 32px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 400px;
  width: 90%;
  margin: 20px;
  border: 1px solid #585865;
}

.modal-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  object-fit: contain;
}

.modal-title {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: #111111;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-message {
  font-family: "Roboto", sans-serif;
  font-size: 0.875rem;
  color: #585865;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.logout-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.logout-modal-actions button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.logout-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.logout-modal-buttons button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.btn-confirm {
  background-color: #ab0000;
  color: #ffffff;
}

.btn-confirm:hover {
  background-color: #ab0000;
}

.btn-cancel {
  background-color: #585865;
  color: #ffffff;
}

.btn-cancel:hover {
  background-color: #111111;
}

.top-nav-btn-cancel {
  background-color: #585865;
  color: #ffffff;
}

.top-nav-btn-cancel:hover {
  background-color: #111111;
}
.president-dashboard-container {
  display: flex;
}

.president-main {
  display: flex;
  margin-left: 250px;
  width: calc(100% - 250px);
  min-height: 100vh;
  background-color: var(--bg-primary);
  flex-direction: column;
  transition: margin-left 0.3s ease, width 0.3s ease;
}

.president-main.collapsed {
  margin-left: 4rem;
  width: calc(100% - 4rem);
}

@media (max-width: 768px) {
  .president-main {
    margin-left: 0;
    width: 100%;
  }

  .president-main.collapsed {
    margin-left: 0;
    width: 100%;
  }

  .president-content {
    padding-top: 0;
  }
}

@media (max-width: 480px) {
  .president-content {
    padding: 15px;
  }

  .overview-dashboard-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .overview-stat-card {
    padding: 16px;
  }

  .overview-stat-value {
    font-size: 1.25rem;
  }
}

.president-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
  background: var(--bg-secondary);
}

.dashboard-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  background-color: transparent;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.1);
  overflow: hidden;
}

.overview-dashboard-header {
  margin-bottom: 32px;
}

.overview-dashboard-title {
  font-weight: 600;
  font-size: 1.25rem;
  font-family: "Roboto", sans-serif;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.overview-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.overview-stat-value {
  font-weight: 700;
  font-size: 2rem;
  font-family: "Roboto", sans-serif;
  padding-top: 10px;
  color: var(--text-primary);
  line-height: 1;
}

.dashboard-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  overflow: hidden;
}

.announcement-content h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.no-data {
  text-align: center;
  color: var(--text-secondary);
  font-family: "Roboto", sans-serif;
  padding: 32px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.current-month {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.875rem;
}

.calendar-grid {
  margin-bottom: 24px;
  flex: 1;
}

.day-header {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 8px 4px;
  text-transform: uppercase;
}

.upcoming-events {
  margin-top: auto;
  border-top: 1px solid var(--border-primary);
  padding-top: 20px;
}

.upcoming-events h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 200px;
  overflow-y: auto;
}

.event-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: transparent;
  color: var(--text-primary);
  border-radius: 6px;
  border-left: 3px solid var(--accent-primary);
}

.event-date {
  font-family: "Roboto", sans-serif;
  font-size: 0.75rem;
  color: var(--text-primary);
  font-weight: 500;
}

.event-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  flex: 1;
  margin-left: 12px;
}

.no-events {
  text-align: center;
  color: var(--text-secondary);
  font-family: "Roboto", sans-serif;
  padding: 24px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border-top: 1px solid var(--border-primary);
}

@media (max-width: 1024px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }

  .calendar-section {
    order: -1;
  }
}

/* overview Box UI Styles */
.overview-dashboard-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  background-color: var(--bg-secondary);
  min-height: calc(100vh - 140px);
}

.president-main.collapsed .overview-dashboard-container {
  max-width: none;
}

.overview-title {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.AdminSidebar {
  width: 15.625rem;
  height: 100vh;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: #111111;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0.125rem 0 0.625rem rgba(0, 0, 0, 0.2);
  transition: width 0.3s ease;
}

.AdminSidebar.collapsed {
  width: 4rem;
}

.AdminSidebar.open {
  transform: translateX(0);
}

/* Mobile Responsive Sidebar */
@media (max-width: 768px) {
  .AdminSidebar {
    transform: translateX(-100%);
    width: 18.75rem;
    background-color: #111111;
    border-right: 0.0625rem solid #585865;
  }

  .AdminSidebar.open {
    transform: translateX(0);
  }

  .AdminSidebar.collapsed {
    transform: translateX(-100%);
  }

  .AdminSidebar.collapsed.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 17, 17, 0.8);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 480px) {
  .AdminSidebar {
    width: 16.75rem;
  }

  .AdminSidebar.open {
    width: 16.75rem;
  }
}

.Sidebar_Header {
  display: flex;
  align-items: center;
  margin-bottom: 1.875rem;
  justify-content: space-between;
  gap: 0.5rem;
}

.Sidebar_UserInfo {
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 0.0625rem solid #585865;
  text-align: center;
}

.Sidebar_UserName {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
  font-family: "Roboto", sans-serif;
  word-wrap: break-word;
}

.Sidebar_Role {
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  text-transform: capitalize;
  white-space: nowrap;
  margin-right: 0.5rem;
}

.Sidebar_Menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.Sidebar_Menu li {
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.Sidebar_Link {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Roboto", sans-serif;
  text-wrap: nowrap;
  letter-spacing: 0.03125rem;
  font-weight: 500;
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.AdminSidebar.collapsed .Sidebar_Link {
  justify-content: center;
  padding: 0.6rem;
}

.Sidebar_Link:hover {
  background-color: #585865;
}

.Sidebar_Link.active {
  background-color: #ab0000;
  color: #ffffff;
}

.Sidebar_Link svg {
  margin-right: 0.75rem;
  font-size: 1rem;
  min-width: 1rem;
}

.AdminSidebar.collapsed .Sidebar_Link svg {
  margin-right: 0;
}

.link-text {
  transition: opacity 0.3s ease;
}

.AdminSidebar.collapsed .link-text {
  opacity: 0;
  display: none;
}

.Sidebar_Link:visited {
  color: #ffffff;
}

/* Sidebar Toggle Button */
.sidebar-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  color: #ffffff;
}

.sidebar-toggle-btn:hover {
  background-color: #585865;
}

.sidebar-toggle-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}
.AdminTopNav_Container {
  height: 5rem;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 0.125rem 0.5rem rgba(17, 17, 17, 0.15);
  border-bottom: 0.0625rem solid #585865;
}

.AdminTopNav_Container_Left {
  display: flex;
  align-items: center;
}

.AdminTopNav_Container_Left_h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--text-color);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.AdminTopNav_Container_Right {
  display: flex;
  align-items: center;
}

.AdminTopNav_Container_Right_Profile_Container {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
}

.AdminTopNav_Container_Right_Profile_Container_span {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-color);
  letter-spacing: 0.05rem;
  margin-right: 0.75rem;
}

.chevron-icon {
  font-size: 0.75rem;
  color: var(--text-color);
}

.AdminTopNav_Container_Right_Profile_Container_img {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
}

.AdminTopNav_Container_Right_Profile_Container_Dropdown {
  position: absolute;
  right: 0;
  top: 50px;
  background-color: #ffffff;
  width: 220px;
  border-radius: 12px;
  overflow: hidden;
  z-index: 101;
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.2);
  padding: 18px;
  border: 1px solid #585865;
}

.AdminTopNav_Container_Right_Profile_Container_Dropdown_Item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: "Roboto", sans-serif;
  color: var(--text-color);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.AdminTopNav_Container_Right_Profile_Container_Dropdown_Item:hover {
  background-color: var(--hover-bg);
}

.AdminTopNav_Container_Right_Profile_Container_Dropdown_Item_img {
  width: 1rem;
  height: 1rem;
}

.AdminTopNav_Container_Right_Profile_Container_Dropdown_Item_span {
  flex: 1;
}

.admin-topnav {
  height: 5rem;
  background-color: #ffffff;
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 0 2.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 0.125rem 0.5rem rgba(17, 17, 17, 0.15);
  border-bottom: 0.0625rem solid #585865;
}

.admin-topnav.dark {
  background-color: #111111;
  color: #ffffff;
}

/* Left side with burger menu */
.topnav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Burger Menu Button */
.burger-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  color: #111111;
}

.burger-menu-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 768px) {
  .burger-menu-btn {
    display: block;
  }
}

.topnav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Responsive Navigation */
@media (max-width: 768px) {
  .admin-topnav {
    padding: 0 1.5rem;
    height: 4.5rem;
  }

  .topnav-left {
    gap: 0.75rem;
  }

  .topnav-right {
    gap: 0.75rem;
  }

  .profile {
    padding: 0.625rem 0.875rem;
  }

  .profile img {
    width: 28px;
    height: auto;
  }

  .profile-text {
    font-size: 0.875rem;
  }
}

@media (max-width: 768px) {
  .AdminTopNav_Container {
    padding: 0 1.5rem;
    height: 4.5rem;
  }

  .AdminTopNav_Container_Left {
    gap: 0.75rem;
  }

  .AdminTopNav_Container_Right {
    gap: 0.75rem;
  }

  .AdminTopNav_Container_Right_Profile_Container {
    padding: 0.625rem 0.875rem;
  }

  .AdminTopNav_Container_Right_Profile_Container_img {
    width: 28px;
    height: auto;
  }

  .AdminTopNav_Container_Left_h1 {
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .AdminTopNav_Container {
    padding: 0 1rem;
    height: 4rem;
  }

  .AdminTopNav_Container_Left_h1 {
    display: none;
  }
}

@media (max-width: 480px) {
  .admin-topnav {
    padding: 0 1rem;
    height: 4rem;
  }

  .profile-text {
    display: none;
  }
}

.profile {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.admin-topnav .profile img {
  fill: #111111;
}

.profile img {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.5rem;
}

.profile-text {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-color);
  letter-spacing: 0.05rem;
}

.profile-dropdown {
  position: absolute;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  right: 0;
  top: 50px;
  background-color: #ffffff;
  width: 220px;
  border-radius: 12px;
  overflow: hidden;
  z-index: 101;
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.2);
  padding: 18px;
  border: 1px solid #585865;
}

.dropdown-icon {
  color: #111111;
}

/* Dark mode dropdown styling is handled in theme.css */
/* This file only contains component-specific styles */

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: "Roboto", sans-serif;
  color: var(--text-color);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: var(--hover-bg);
}

.dropdown-item.logout-item {
  color: #ab0000;
}

.dropdown-item .logout-item img {
  align-self: center;
  justify-self: center;
}

.logout-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.logout-modal {
  background-color: #ffffff;
  padding: 32px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 400px;
  width: 90%;
  margin: 20px;
  border: 1px solid #585865;
}

.modal-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  object-fit: contain;
}

.modal-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--text-color);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-message {
  font-family: "Roboto", sans-serif;
  font-size: 0.875rem;
  color: #585865;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.logout-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.logout-modal-buttons button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.btn-confirm {
  background-color: #ab0000;
  color: #ffffff;
}

.btn-confirm:hover {
  background-color: #8b0000;
}

.btn-cancel {
  background-color: #585865;
  color: #ffffff;
}

.btn-cancel:hover {
  background-color: #111111;
}

.top-nav-btn-cancel {
  background-color: #585865;
  color: #ffffff;
}

.top-nav-btn-cancel:hover {
  background-color: #111111;
}

/* Dark Mode - Burger Menu */
.theme-dark .burger-menu-btn {
  color: #ffffff;
}

.theme-dark .burger-menu-btn svg {
  color: #ffffff;
}

.theme-dark .AdminTopNav_Container .burger-menu-btn {
  color: #ffffff;
}

.theme-dark .AdminTopNav_Container .burger-menu-btn svg {
  color: #ffffff;
}
.admin-dashboard-container {
  display: flex;
}

.admin-main {
  display: flex;
  margin-left: 250px;
  width: calc(100% - 250px);
  min-height: 100vh;
  background-color: var(--bg-primary);
  flex-direction: column;
  transition: margin-left 0.3s ease, width 0.3s ease;
}

.admin-main.collapsed {
  margin-left: 4rem;
  width: calc(100% - 4rem);
}

@media (max-width: 768px) {
  .admin-main {
    margin-left: 0;
    width: 100%;
  }

  .admin-main.collapsed {
    margin-left: 0;
    width: 100%;
  }

  .admin-content {
    padding-top: 0;
  }
}

@media (max-width: 480px) {
  .admin-content {
    padding: 15px;
  }
}

.admin-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
  background: var(--bg-secondary);
}
.MemberSidebar {
  width: 15.625rem;
  height: 100vh;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: #111111;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0.125rem 0 0.625rem rgba(0, 0, 0, 0.2);
  transition: width 0.3s ease, transform 0.3s ease;
}

.MemberSidebar.collapsed {
  width: 4rem;
}

/* Mobile Responsive Sidebar */
@media (max-width: 768px) {
  .MemberSidebar {
    transform: translateX(-100%);
    width: 18.75rem;
    background-color: #111111;
    border-right: 0.0625rem solid #585865;
    z-index: 1001;
  }

  .MemberSidebar.open {
    transform: translateX(0);
  }

  .MemberSidebar.collapsed {
    transform: translateX(-100%);
  }

  .MemberSidebar.collapsed.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 17, 17, 0.8);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 480px) {
  .MemberSidebar {
    width: 16.75rem;
  }

  .MemberSidebar.open {
    width: 16.75rem;
  }
}

.Sidebar_Header {
  display: flex;
  align-items: center;
  margin-bottom: 1.875rem;
  justify-content: space-between;
  gap: 0.5rem;
}

.Sidebar_UserInfo {
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 0.0625rem solid #585865;
  text-align: center;
}

.Sidebar_UserName {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
  font-family: "Roboto", sans-serif;
  word-wrap: break-word;
}

.Sidebar_Role {
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  text-transform: capitalize;
  white-space: nowrap;
  margin-right: 0.5rem;
}

.Sidebar_Menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.Sidebar_Menu li {
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.Sidebar_Link {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Roboto", sans-serif;
  text-wrap: nowrap;
  letter-spacing: 0.03125rem;
  font-weight: 500;
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.MemberSidebar.collapsed .Sidebar_Link {
  justify-content: center;
  padding: 0.6rem;
}

.Sidebar_Link:hover {
  background-color: #585865;
}

.Sidebar_Link.active {
  background-color: #ab0000;
  color: #ffffff;
}

.Sidebar_Link svg {
  margin-right: 0.75rem;
  font-size: 1rem;
  min-width: 1rem;
}

.MemberSidebar.collapsed .Sidebar_Link svg {
  margin-right: 0;
}

.link-text {
  transition: opacity 0.3s ease;
}

.MemberSidebar.collapsed .link-text {
  opacity: 0;
  display: none;
}

.Sidebar_Link:visited {
  color: #ffffff;
}

/* Sidebar Toggle Button */
.sidebar-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  color: #ffffff;
}

.sidebar-toggle-btn:hover {
  background-color: #585865;
}

.sidebar-toggle-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}
.MemberTopNav_Container {
  height: 5rem;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 0.125rem 0.5rem rgba(17, 17, 17, 0.15);
  border-bottom: 0.0625rem solid #585865;
}

.MemberTopNav_Container_Left {
  display: flex;
  align-items: center;
}

.MemberTopNav_Container_Left_h1 {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: #111111;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.MemberTopNav_Container_Right {
  display: flex;
  align-items: center;
}

.MemberTopNav_Container_Right_Profile_Container {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
}

.MemberTopNav_Container_Right_Profile_Container_span {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-color);
  letter-spacing: 0.05rem;
  margin-right: 0.75rem;
}

.chevron-icon {
  font-size: 0.75rem;
  color: #111111;
}

.MemberTopNav_Container_Right_Profile_Container_img {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
}

.MemberTopNav_Container_Right_Profile_Container_Dropdown {
  position: absolute;
  right: 0;
  top: 50px;
  background-color: #ffffff;
  width: 220px;
  border-radius: 12px;
  overflow: hidden;
  z-index: 101;
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.2);
  padding: 18px;
  border: 1px solid #585865;
}

.MemberTopNav_Container_Right_Profile_Container_Dropdown_Item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: "Roboto", sans-serif;
  color: #111111;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.MemberTopNav_Container_Right_Profile_Container_Dropdown_Item:hover {
  background-color: #f5f7f8;
}

.MemberTopNav_Container_Right_Profile_Container_Dropdown_Item_img {
  width: 1rem;
  height: 1rem;
}

.MemberTopNav_Container_Right_Profile_Container_Dropdown_Item_span {
  flex: 1;
}

.member-topnav {
  height: 5rem;
  background-color: #ffffff;
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 0 2.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 0.125rem 0.5rem rgba(17, 17, 17, 0.15);
  border-bottom: 0.0625rem solid #585865;
}

.member-topnav.dark {
  background-color: #111111;
  color: #ffffff;
}

/* Left side with burger menu */
.topnav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Burger Menu Button */
.burger-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}

.burger-menu-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

.member-topnav .burger-menu-btn svg {
  color: #111111;
}

.member-topnav.dark .burger-menu-btn svg {
  color: #ffffff;
}

@media (max-width: 768px) {
  .burger-menu-btn {
    display: block;
  }
}

/* Dark Mode - Burger Menu */
.theme-dark .burger-menu-btn {
  color: #ffffff;
}

.theme-dark .burger-menu-btn svg {
  color: #ffffff;
}

.theme-dark .member-topnav .burger-menu-btn svg {
  color: #ffffff;
}

.topnav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

/* Responsive Navigation */
@media (max-width: 768px) {
  .member-topnav {
    padding: 0 1.5rem;
    height: 4.5rem;
  }

  .topnav-left {
    gap: 0.75rem;
  }

  .topnav-right {
    gap: 0.75rem;
  }

  .profile {
    padding: 0.625rem 0.875rem;
  }

  .profile img {
    width: 28px;
    height: auto;
  }

  .profile-text {
    font-size: 0.875rem;
  }
}

@media (max-width: 768px) {
  .MemberTopNav_Container {
    padding: 0 1.5rem;
    height: 4.5rem;
  }

  .MemberTopNav_Container_Left {
    gap: 0.75rem;
  }

  .MemberTopNav_Container_Right {
    gap: 0.75rem;
  }

  .MemberTopNav_Container_Right_Profile_Container {
    padding: 0.625rem 0.875rem;
  }

  .MemberTopNav_Container_Right_Profile_Container_img {
    width: 28px;
    height: auto;
  }

  .MemberTopNav_Container_Left_h1 {
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .MemberTopNav_Container {
    padding: 0 1rem;
    height: 4rem;
  }

  .MemberTopNav_Container_Left_h1 {
    display: none;
  }
}

@media (max-width: 480px) {
  .member-topnav {
    padding: 0 1rem;
    height: 4rem;
  }

  .profile-text {
    display: none;
  }
}

.profile {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.member-topnav .profile img {
  fill: #111111;
}

.member-topnav .profile svg {
  color: #111111;
}

.member-topnav.dark .profile svg {
  color: #ffffff;
}

.member-topnav.dark .chevron-icon {
  color: #ffffff;
}

.profile img {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.5rem;
}

.profile-text {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #111111;
  letter-spacing: 0.05rem;
}

.profile-dropdown {
  position: absolute;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  right: 0;
  top: 50px;
  background-color: #ffffff;
  width: 220px;
  border-radius: 12px;
  overflow: hidden;
  z-index: 101;
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.2);
  padding: 18px;
  border: 1px solid #585865;
}

.dropdown-icon {
  color: #111111;
}

/* Dark mode dropdown styling is handled in theme.css */
/* This file only contains component-specific styles */

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: "Roboto", sans-serif;
  color: #111111;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f5f7f8;
}

.dropdown-item.logout-item {
  color: #ab0000;
}

.dropdown-item .logout-item img {
  align-self: center;
  justify-self: center;
}

.logout-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.logout-modal {
  background-color: #ffffff;
  padding: 32px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 400px;
  width: 90%;
  margin: 20px;
  border: 1px solid #585865;
}

.modal-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  object-fit: contain;
}

.modal-title {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: #111111;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-message {
  font-family: "Roboto", sans-serif;
  font-size: 0.875rem;
  color: #585865;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.logout-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.logout-modal-buttons button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.btn-confirm {
  background-color: #ab0000;
  color: #ffffff;
}

.btn-confirm:hover {
  background-color: #8b0000;
}

.btn-cancel {
  background-color: #585865;
  color: #ffffff;
}

.btn-cancel:hover {
  background-color: #111111;
}

.top-nav-btn-cancel {
  background-color: #585865;
  color: #ffffff;
}

.top-nav-btn-cancel:hover {
  background-color: #111111;
}
.member-dashboard-container {
  display: flex;
}

.member-main {
  display: flex;
  margin-left: 250px;
  width: calc(100% - 250px);
  min-height: 100vh;
  background-color: var(--bg-secondary);
  flex-direction: column;
  transition: margin-left 0.3s ease, width 0.3s ease;
}

.member-main.collapsed {
  margin-left: 64px;
  width: calc(100% - 64px);
}

@media (max-width: 768px) {
  .member-main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .member-content {
    padding-top: 0;
  }
}

.member-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

.dashboard-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  background-color: transparent;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.overview-dashboard-header {
  margin-bottom: 32px;
}

.overview-dashboard-title {
  font-weight: 600;
  font-size: 2rem;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1.25rem;
  margin: 0;
  letter-spacing: -0.02em;
}

.overview-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.overview-stat-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px;
  border: solid var(--border-primary);
  white-space: nowrap;
}

.overview-stat-value {
  font-weight: 700;
  font-size: 2rem;
  font-family: Roboto;
  font-weight: 700;
  font-size: 2rem;
  padding-top: 10px;
  color: var(--text-primary);
  line-height: 1;
}

.dashboard-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  overflow: hidden;
}

.announcement-content h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.no-data {
  text-align: center;
  color: var(--text-secondary);
  font-family: "Roboto", sans-serif;
  padding: 32px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.current-month {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.875rem;
}

.calendar-grid {
  margin-bottom: 24px;
  flex: 1;
}

.day-header {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 8px 4px;
}

.upcoming-events {
  margin-top: auto;
  border-top: 1px solid var(--border-primary);
  padding-top: 20px;
}

.upcoming-events h4 {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 200px;
  overflow-y: auto;
}

.event-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg-card);
  border-radius: 6px;
  border-left: 3px solid var(--accent-primary);
}

.event-date {
  font-family: "Roboto", sans-serif;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.event-title {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  flex: 1;
  margin-left: 12px;
}

.no-events {
  text-align: center;
  color: var(--text-secondary);
  font-family: "Roboto", sans-serif;
  padding: 24px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border-top: 1px solid var(--border-primary);
}

@media (max-width: 1024px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }

  .calendar-section {
    order: -1;
  }
}

/* overview Box UI Styles */
.overview-dashboard-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  background-color: transparent;
  min-height: calc(100vh - 140px);
}

.member-main.collapsed .overview-dashboard-container {
  max-width: none;
}

.overview-title {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1.5rem;
}

.overview-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
}

.president-overview-stat-card {
  background: var(--bg-card);
  border-radius: 18px;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-md);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.overview-stat-label {
  font-family: "Montserrat", sans-serif;
  color: var(--text-secondary);
  font-size: 0.7rem;
  margin-bottom: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.overview-stat-value {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--accent-primary);
  line-height: 1;
}
.GuestSidebar {
  width: 15.625rem;
  height: 100vh;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: #111111;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0.125rem 0 0.625rem rgba(0, 0, 0, 0.2);
  transition: width 0.3s ease, transform 0.3s ease;
}

.GuestSidebar.collapsed {
  width: 4rem;
}

/* Mobile Responsive Sidebar */
@media (max-width: 768px) {
  .GuestSidebar {
    transform: translateX(-100%);
    width: 18.75rem;
    background-color: #111111;
    border-right: 0.0625rem solid #585865;
    z-index: 1001;
  }

  .GuestSidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 17, 17, 0.8);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 480px) {
  .GuestSidebar {
    width: 16.75rem;
  }

  .GuestSidebar.open {
    width: 16.75rem;
  }
}

.Sidebar_Header {
  display: flex;
  align-items: center;
  margin-bottom: 1.875rem;
  justify-content: flex-start;
  gap: 0.75rem;
}

.Sidebar_Role {
  background: transparent;
  color: #ffffff;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: "Montserrat", sans-serif;
}

.Sidebar_Menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.Sidebar_Menu li {
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.Sidebar_Link {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Roboto", sans-serif;
  text-wrap: nowrap;
  letter-spacing: 0.03125rem;
  font-weight: 500;
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.GuestSidebar.collapsed .Sidebar_Link {
  justify-content: center;
  padding: 0.6rem;
}

.link-text {
  transition: opacity 0.3s ease;
}

.GuestSidebar.collapsed .link-text {
  opacity: 0;
  display: none;
}

.Sidebar_Link:hover {
  background-color: #585865;
}

.Sidebar_Link.active {
  background-color: #ab0000;
  color: #ffffff;
}

.Sidebar_Link svg {
  margin-right: 0.75rem;
  font-size: 1rem;
  min-width: 1rem;
}

.GuestSidebar.collapsed .Sidebar_Link svg {
  margin-right: 0;
}

.Sidebar_Link:visited {
  color: #ffffff;
}

/* Sidebar Toggle Button */
.sidebar-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  color: #ffffff;
}

.sidebar-toggle-btn:hover {
  background-color: #585865;
}

.sidebar-toggle-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Dark Mode Styles - Removed legacy body.dark-mode selectors */
/* These styles are now handled by theme.css using .theme-dark class */
.GuestTopNav_Container {
  height: 5rem;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 0.125rem 0.5rem rgba(17, 17, 17, 0.15);
  border-bottom: 0.0625rem solid #585865;
}

.GuestTopNav_Container_Left {
  display: flex;
  align-items: center;
}

.burger-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  color: #111111;
  margin-right: 1rem;
}

.burger-menu-btn:hover {
  background-color: #f0f0f0;
}

.burger-menu-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

.GuestTopNav_Container_Left_h1 {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: #111111;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.GuestTopNav_Container_Right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.guest-topnav-home-btn {
  background-color: #ab0000;
  color: #ffffff;
  border: none;
  padding: 0.5rem 1rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.guest-topnav-home-btn:hover {
  background-color: #8b0000;
}

/* Responsive */
@media (max-width: 768px) {
  .GuestTopNav_Container {
    padding: 0 1.5rem;
    height: 4.5rem;
  }

  .GuestTopNav_Container_Left {
    gap: 0.75rem;
  }

  .GuestTopNav_Container_Right {
    gap: 0.75rem;
  }

  .GuestTopNav_Container_Left_h1 {
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .GuestTopNav_Container {
    padding: 0 1rem;
    height: 4rem;
  }

  .GuestTopNav_Container_Left_h1 {
    display: none;
  }
}

/* Dark Mode - Removed legacy body.dark-mode selectors */
/* These styles are now handled by theme.css using .theme-dark class */
.guest-dashboard-container {
  display: flex;
}

.guest-main {
  display: flex;
  margin-left: 250px;
  width: calc(100% - 250px);
  min-height: 100vh;
  background-color: rgba(190, 220, 249, 0.051);
  flex-direction: column;
  transition: margin-left 0.3s ease, width 0.3s ease;
}

.guest-main.collapsed {
  margin-left: 64px;
  width: calc(100% - 64px);
}

@media (max-width: 768px) {
  .guest-main {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

.guest-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

.dashboard-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  background-color: transparent;
  border-radius: 12px;
  box-shadow: 0 2px 8px #222222;
  overflow: hidden;
}

.overview-dashboard-header {
  margin-top: 10px;
  margin-top: 5px;
  margin-bottom: 32px;
}

.overview-dashboard-title {
  font-weight: 600;
  font-size: 2rem;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  color: #222222;
  font-size: 1.25rem;
  margin: 0;
  letter-spacing: -0.02em;
}

.overview-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.overview-stat-card {
  background: #f0f8ff;
  border: solid #111111;
  border-radius: 12px;
  padding: 24px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.overview-stat-value {
  font-weight: 700;
  font-size: 2rem;
  font-family: Roboto;
  font-weight: 700;
  font-size: 2rem;
  padding-top: 10px;
  color: rgba(34, 34, 34, 0.8);
  line-height: 1;
}

.dashboard-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  overflow: hidden;
}

.announcement-content h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #111111;
  margin: 0 0 8px 0;
}

.no-data {
  text-align: center;
  color: #58595a;
  font-family: "Roboto", sans-serif;
  padding: 32px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.current-month {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  color: #1a1a1a;
  font-size: 0.875rem;
}

.calendar-grid {
  margin-bottom: 24px;
  flex: 1;
}

.day-header {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: #6b7280;
  padding: 8px 4px;
}

.upcoming-events {
  margin-top: auto;
  border-top: 1px solid #e5e7eb;
  padding-top: 20px;
}

.upcoming-events h4 {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 200px;
  overflow-y: auto;
}

.event-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: transparent;
  color: #111111;
  border-radius: 6px;
  border-left: 3px solid #dc2626;
}

.event-date {
  font-family: "Roboto", sans-serif;
  font-size: 0.75rem;
  color: #111111;
  font-weight: 500;
}

.event-title {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: #111111;
  flex: 1;
  margin-left: 12px;
}

.no-events {
  text-align: center;
  color: #58595a;
  font-family: "Roboto", sans-serif;
  padding: 24px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border-top: 1px solid #58595a;
}

@media (max-width: 1024px) {
  .guest-content {
  }

  .dashboard-content {
    grid-template-columns: 1fr;
  }

  .calendar-section {
    order: -1;
  }
}

/* Dark Mode Styles - Removed legacy body.dark-mode selectors */
/* These styles are now handled by theme.css using .theme-dark class */

/* overview Box UI Styles */
.overview-dashboard-container {
  max-width: 1200px;
  width: 100%;
  margin-top: 0 auto;
  background-color: transparent;
  min-height: calc(100vh - 140px);
}

.overview-title {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  color: #222222;
  font-size: 1.5rem;
}

.overview-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.overview-stat-card {
  background: #f0f8ff;
  border: solid #111111;
  border-radius: 8px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.overview-stat-label {
  font-family: Roboto;
  font-size: 0.7rem;
  color: #222222;
  margin-bottom: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.overview-stat-value {
  font-family: Roboto;
  font-weight: 500;
  font-size: 1.5rem;
  color: #222222;
  line-height: 1;
}

/* Dark Mode - Removed legacy body.dark-mode selectors */
/* These styles are now handled by theme.css using .theme-dark class */
/* Overview Component Styles */
.president-admin-overview-dashboard-container,
.member-overview-dashboard-container {
  width: 100%;
  max-width: none;
}

.president-admin-overview-main-content,
.member-overview-main-content {
  display: grid;
  grid-template-columns: minmax(400px, 1fr) minmax(280px, 300px);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
  overflow: hidden;
}

.president-admin-overview-left-content,
.member-overview-left-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  background: transparent;
  gap: 1rem;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.president-admin-overview-right-content,
.member-overview-right-content {
  display: flex;
  flex-direction: column;
  margin-top: 0px;
  margin-bottom: 0px;
  align-self: flex-start;
}


.president-admin-overview-bottom-container,
.member-overview-bottom-container {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.dashboard-container-left-div,
.member-overview-container-left-div {
  display: flex;
  flex-direction: column;
  justify-content: start;
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  min-height: 0;
  gap: 1rem;
}

.dashboard-container-right-div {
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: start;
  flex: 0 0 300px;
  box-sizing: border-box;
}

.dashboard-calendar-section-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
}

.calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  border-top: 1px solid var(--border-primary);
  margin-bottom: 8px;
  margin-top: 0.2rem;
}

.calendar-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.nav-btn {
  background: transparent;
  border: none;
  padding-left: 4px;
  padding-right: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  font-family: "Roboto", sans-serif;
}

.president-admin-overview-calendar-section {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-md);
  min-width: 300px;
  max-width: 300px;
  height: auto;
  border-radius: 18px;
  padding: 24px;
  overflow: hidden;
  box-sizing: border-box;
}

.dashboard-announcements-section-header {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.dashboard-announcements-section-header h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--text-primary);
  padding-bottom: 5px;
}

.announcements-header h2 {
  color: var(--text-primary);
  font-size: 1.5rem;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
}

.president-admin-overview-announcements-section-container {
  display: flex;
  justify-content: start;
  align-items: start;
  margin: 0;
  padding: 0;
  border-radius: 8px;
}

.president-admin-overview-announcements-section {
  display: flex;
  flex-direction: column;
  justify-content: start;
  box-sizing: border-box;
  background: var(--bg-card);
  width: 100%;
  max-width: 100%;
  height: 100%;
  border: none;
  border-radius: 18px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-md);
  min-width: 0;
  min-height: 0;
}



.announcements-content {
  height: calc(100% - 3rem);
  overflow-y: auto;
}

.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
}

.announcement-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: transparent;
  border-radius: 8px;
  border-left: 4px solid var(--text-primary);
  max-height: 120px;
  overflow: hidden;
}

.announcement-indicator {
  width: 8px;
  height: 8px;
  background: var(--text-primary);
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.announcement-header {
  margin-bottom: 0.5rem;
}

.announcement-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.announcement-text {
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.announcement-date {
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 4px 0;
}

.announcement-title h3 {
  color: var(--text-primary);
  font-size: 1rem;
  margin: 0;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}

.priority-icon {
  font-size: 1rem;
}

.priority-icon.high {
  color: var(--accent-primary);
}

.priority-icon.medium {
  color: var(--accent-primary);
}

.priority-icon.low {
  color: var(--text-secondary);
}

.announcement-content {
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0.5rem 0;
  opacity: 0.9;
  font-family: "Roboto", sans-serif;
}

.announcement-footer {
  margin-top: 0.5rem;
}

.no-announcements {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
  opacity: 0.7;
  font-family: "Roboto", sans-serif;
}

.more-announcements {
  text-align: center;
  color: var(--text-secondary);
  opacity: 0.8;
  font-size: 0.9rem;
  padding: 0.5rem;
  font-family: "Roboto", sans-serif;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0 0.5rem;
}

.calendar-header h2 {
  color: var(--text-primary);
  font-size: 1.2rem;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  box-sizing: border-box;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  min-height: 35px;
  box-sizing: border-box;
}

.calendar-day:hover {
  border-radius: 18px;
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-button {
  background: transparent;
  border: none;
  color: var(--text-primary);
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.calendar-grid {
  margin-bottom: 1rem;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 0.5rem;
}

.weekday {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 0;
  opacity: 0.8;
}

.calendar-day.empty {
  background: transparent;
  cursor: default;
}

.calendar-day.today {
  background: #ab0000;
  color: #ffffff;
  font-weight: 800;
  border-radius: 18px;
}

/* Ensure today's date always looks like light mode (red circle with white text) */
.theme-dark .calendar-day.today {
  background: #ab0000 !important;
  color: #ffffff !important;
}

.day-number {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
}

.calendar-day.today .day-number {
  color: #ffffff !important;
  font-weight: bold;
}

/* Ensure today's day number is always white */
.theme-dark .calendar-day.today .day-number {
  color: #ffffff !important;
}

.event-indicator {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  background: var(--accent-primary);
  border-radius: 50%;
}

.calendar-day.today .event-indicator {
  background: #ffffff;
}

/* Ensure today's event indicator is always white */
.theme-dark .calendar-day.today .event-indicator {
  background: #ffffff !important;
}



/* Scrollbar styling for announcements */
.announcements-content::-webkit-scrollbar {
  width: 4px;
}

.announcements-content::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 2px;
}

.announcements-content::-webkit-scrollbar-thumb {
  background: var(--text-secondary);
  border-radius: 2px;
}

.announcements-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-primary);
}

/* Responsive Design for smaller screens where grid doesn't fit */
@media (max-width: 1200px) {
  .president-admin-overview-main-content,
  .member-overview-main-content {
    grid-template-columns: minmax(350px, 1fr) minmax(280px, 300px);
  }
}

/* Responsive Design for tablets and mobile */
@media (max-width: 1024px) {
  .president-admin-overview-main-content,
  .member-overview-main-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .president-admin-overview-left-content,
  .member-overview-left-content {
    margin-right: 0;
    width: 100%;
  }

  .president-admin-overview-right-content,
  .member-overview-right-content {
    margin-top: 0;
    position: relative;
    flex: 1;
    width: 100%;
    max-width: 100%;
    order: 2;
  }

  .president-admin-overview-calendar-section {
    min-width: 100%;
    max-width: 100%;
  }

  .president-admin-overview-bottom-container,
  .member-overview-bottom-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
  }

  .dashboard-upcoming-events-container {
    box-sizing: border-box;
    width: 100%;
  }

  .dashboard-container-left-div,
  .member-overview-container-left-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
  }

  .president-admin-overview-announcements-section {
    margin-bottom: 0.5rem;
  }

  .dashboard-container-right-div {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
  }

  .president-admin-overview-calendar-section-container {
    position: relative;
    top: auto;
    right: auto;
    margin: 0;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .president-admin-overview-dashboard-container,
  .member-overview-dashboard-container {
    margin: 0 -20px;
    padding: 0 16px 16px 16px;
  }

  .president-admin-overview-title {
    font-size: 2rem;
  }

  .president-admin-overview-calendar-section {
    padding: clamp(16px, 4vw, 24px);
  }

  .calendar-day {
    min-height: 30px;
  }

  .president-president-admin-overview-stat-card {
    padding: 20px;
  }

  .president-admin-overview-announcements-section,
  .president-admin-overview-calendar-section {
    width: 100%;
    padding: 24px;
  }

  .president-admin-overview-announcements-section {
    margin-bottom: 0.5rem;
  }

  .dashboard-container-left-div,
  .member-overview-container-left-div {
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
  }

  .president-main {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .president-admin-overview-dashboard-container,
  .member-overview-dashboard-container {
    margin: 0 -15px;
    padding: 0 12px 12px 12px;
  }

  .president-president-admin-overview-stat-card {
    padding: 16px;
  }

  .president-admin-overview-announcements-section,
  .president-admin-overview-calendar-section {
    padding: clamp(12px, 3vw, 20px);
  }

  .calendar-day {
    min-height: 28px;
  }

  .calendar-day-header {
    font-size: 0.7rem;
  }

  .day-number {
    font-size: 0.75rem;
  }
}
.president-admin-overview-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  margin-bottom: 0.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.president-overview-stat-card {
  background: var(--bg-card);
  border-radius: 18px;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-md);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.overview-stat-label {
  font-family: "Montserrat", sans-serif;
  color: var(--text-primary);
  font-size: 0.7rem;
  margin-bottom: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.overview-stat-value {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--accent-primary);
  line-height: 1;
}
/* Overview Announcements Component Styles */
.president-admin-overview-announcements-section-container {
  display: flex;
  justify-content: start;
  align-items: start;
  margin: 0 0 1rem 0;
  padding: 0;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

.president-admin-overview-announcements-section {
  display: flex;
  flex-direction: column;
  justify-content: start;
  box-sizing: border-box;
  background: var(--bg-card);
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border: none;
  border-radius: 18px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-md);
}

.dashboard-announcements-section-header {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.dashboard-announcements-section-header h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  padding-bottom: 5px;
}

.announcements-carousel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.announcement-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-md);
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  transition: all 0.3s ease;
  box-sizing: border-box;
  overflow: hidden;
}

.announcement-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 2px solid rgba(171, 0, 0, 0.1);
  padding-bottom: 0.75rem;
}

.announcement-priority {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  flex-shrink: 0;
  align-self: center;
}

.announcement-title {
  flex: 1;
  display: flex;
  align-items: center;
}

.announcement-title h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.announcement-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  overflow-y: auto;
  min-height: 0;
  max-height: 100%;
}

.announcement-text {
  font-family: 'Roboto', sans-serif;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
  text-align: left;
}

.announcement-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  font-family: 'Roboto', sans-serif;
  gap: 0.5rem;
}

.announcement-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.announcement-separator {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: bold;
}

.announcement-time {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
}

.priority-icon {
  font-size: 1rem;
  color: var(--accent-primary);
}

.announcement-content {
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0.5rem 0;
  opacity: 0.9;
  font-family: "Roboto", sans-serif;
}

.announcements-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 0.5rem;
}

.nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0;
}

.nav-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.announcement-indicator-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator-dot.active {
  background: var(--accent-primary);
  width: 24px;
  border-radius: 4px;
}

.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--text-secondary);
  opacity: 0.7;
  font-family: "Roboto", sans-serif;
  font-size: 0.875rem;
}
/* Overview Upcoming Events Component Styles */
.dashboard-upcoming-events {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
}

.dashboard-upcoming-events h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 5px;
}

.president-admin-dashboard-upcoming-events-container {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-md);
  font-weight: bold;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 18px;
  padding: 24px;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.event-item {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 0.75rem;
  border: 1px solid var(--border-primary);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.event-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.4;
  text-align: left;
}

.event-title > svg {
  flex-shrink: 0;
}

.event-title > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.event-location {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.4;
  text-align: left;
}

.event-location > svg {
  flex-shrink: 0;
}

.event-location > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.event-datetime {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  text-align: left;
  white-space: nowrap;
}

.event-datetime > svg {
  flex-shrink: 0;
}

.event-datetime > span {
  white-space: nowrap;
}

.datetime-separator {
  margin: 0 0.25rem;
  opacity: 0.6;
}

.no-events {
  color: var(--text-secondary);
  opacity: 0.7;
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
  .event-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .event-title,
  .event-location {
    width: 100%;
    flex: none;
    margin: 0;
    padding: 0;
  }

  .event-title > span,
  .event-location > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }

  .event-title > svg,
  .event-location > svg {
    margin-top: 0.1em;
    align-self: flex-start;
    margin-left: 0;
  }

  .event-title {
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: 0;
    padding-left: 0;
  }

  .event-location {
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: 0;
    padding-left: 0;
  }

  .event-datetime {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    justify-content: flex-start;
  }
}

/* Dark Mode: Make clock and date icons white */
.theme-dark .event-datetime svg,
.theme-dark .event-title svg,
.theme-dark .event-location svg {
  color: #ffffff !important;
}/* Overview Calendar Component Styles */
.president-admin-overview-calendar-section {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-md);
  width: 100%;
  min-width: 280px;
  height: auto;
  border-radius: 18px;
  padding: 24px;
  overflow: hidden;
  box-sizing: border-box;
}

.dashboard-calendar-section-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.calendar-title-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.calendar-title-section h2 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: var(--text-primary);
}

.calendar-icon {
  color: var(--text-primary);
  font-size: 1.1rem;
}

.calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  border-top: 1px solid var(--border-primary);
  margin-bottom: 8px;
  margin-top: 0.2rem;
}

.calendar-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  padding: 10px;
}

.nav-btn {
  background: transparent;
  border: none;
  padding-left: 4px;
  padding-right: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  font-family: "Roboto", sans-serif;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  box-sizing: border-box;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: var(--text-primary);
  font-size: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  min-height: 35px;
  box-sizing: border-box;
}

.calendar-day:hover {
  border-radius: 18px;
  background: var(--bg-hover);
  color: var(--text-primary);
}

.calendar-day.empty {
  background: transparent;
  cursor: default;
}

.calendar-day.today {
  background: #ab0000;
  color: #ffffff;
  font-weight: bold;
  border-radius: 18px;
}

/* Ensure today's date always looks like light mode (red circle with white text) */
.theme-dark .calendar-day.today {
  background: #ab0000 !important;
  color: #ffffff !important;
}


.day-number {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 400;
}

.day-number.bold-event-day {
  font-weight: bold;
}

/* Dark mode: Make marked dates red (but keep today's date white for contrast) */
.theme-dark .day-number.bold-event-day {
  color: #ff0000;
}

.theme-dark .calendar-day.today .day-number.bold-event-day {
  color: #ffffff !important;
}

.calendar-day.today .day-number {
  color: #ffffff !important;
  font-weight: bold;
}

/* Ensure today's day number is always white */
.theme-dark .calendar-day.today .day-number {
  color: #ffffff !important;
}

.event-indicator {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  background: var(--accent-primary);
  border-radius: 50%;
}

.calendar-day.today .event-indicator {
  background: #ffffff;
}

/* Ensure today's event indicator is always white */
.theme-dark .calendar-day.today .event-indicator {
  background: #ffffff !important;
}

.day-header {
  text-align: center;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: bold;
  padding: 0.5rem 0;
}

.current-month {
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Calendar Tooltip Styles */
.calendar-tooltip {
  position: absolute;
  left: var(--tooltip-left, 0);
  top: var(--tooltip-top, 0);
  transform: translate(-50%, -100%);
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 12px;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  min-width: 200px;
  max-width: 300px;
  pointer-events: auto;
  font-family: "Roboto", sans-serif;
  margin-bottom: 8px;
}

.calendar-tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--bg-card);
}

.calendar-tooltip::before {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--border-primary);
}

.tooltip-section {
  margin-bottom: 8px;
}

.tooltip-section:last-child {
  margin-bottom: 0;
}

.tooltip-section-title {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  font-family: "Montserrat", sans-serif;
}

.tooltip-item {
  font-size: 0.85rem;
  color: var(--text-primary);
  padding: 4px 0;
  line-height: 1.4;
  word-wrap: break-word;
}

.tooltip-item:not(:last-child) {
  border-bottom: 1px solid var(--border-primary);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .president-admin-overview-calendar-section {
    min-width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .president-admin-overview-calendar-section {
    padding: 20px;
  }

  .dashboard-calendar-section-header {
    align-items: center;
  }

  .calendar-title-section h2 {
    font-size: 1rem;
  }

  .calendar-icon {
    font-size: 1rem;
  }

  .calendar-nav {
    justify-content: center;
  }

  .calendar-day {
    min-height: 30px;
  }

  .day-number {
    font-size: 0.85rem;
  }

  .day-header {
    font-size: 0.7rem;
  }

  .current-month {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .president-admin-overview-calendar-section {
    padding: 16px;
  }

  .dashboard-calendar-section-header {
    align-items: center;
  }

  .calendar-title-section h2 {
    font-size: 0.9rem;
  }

  .calendar-icon {
    font-size: 0.9rem;
  }

  .calendar-nav {
    justify-content: center;
  }

  .calendar-day {
    min-height: 28px;
  }

  .day-number {
    font-size: 0.75rem;
  }

  .day-header {
    font-size: 0.65rem;
  }

  .current-month {
    font-size: 0.8rem;
  }

  .nav-btn {
    padding: 2px;
  }
}
/* CreateUserModal.css */
/* Modal styling following the specified color palette */

.create-user-modal-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 0;
  padding-top: 1rem;
  width: 100%;
  max-width: 650px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease-out;
}

/* Stepper Styles */
.CreateUserStepper_Indicator {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  padding: 0 2rem;
}

.steps-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}



.CreateUserStepper_Step {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #585865;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  position: relative;
}

.CreateUserStepper_Step.active {
  background-color: #ab0000;
  transform: scale(1.1);
}

.CreateUserStepper_Step.completed {
  background-color: #ab0000;
}

.CreateUserStepper_Step.completed::after {
  content: '✓';
  font-size: 1.2rem;
  color: #ffffff;
}

.CreateUserStepper_Step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 3rem;
  height: 2px;
  background-color: #585865;
  transform: translateY(-50%);
  z-index: -1;
}

.CreateUserStepper_Step.completed:not(:last-child)::before {
  background-color: #ab0000;
}

.CreateUserStepper_StepContent {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 2rem;
  background-color: #ffffff;
  border-radius: 8px;
}

.CreateUserStepper_StepHeader {
  text-align: center;
  padding: 1rem 0;
}

.CreateUserStepper_StepHeader h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.CreateUserStepper_StepHeader p {
  color: #585865;
  font-size: 1rem;
  font-family: "Roboto", sans-serif;
  line-height: 1.4;
}

.CreateUserStepper_StepActions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.CreateUserStepper_StepActions button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  font-family: "Montserrat", sans-serif;
  outline: none;
  flex: 1;
}

.CreateUserStepper_StepActions button.primary {
  background-color: #ab0000;
  color: #ffffff;
}

.CreateUserStepper_StepActions button.primary:hover:not(:disabled) {
  background-color: #b00909;
}

.CreateUserStepper_StepActions button.secondary {
  background-color: #f5f7f8;
  color: #111111;
  border: 2px solid #585865;
}

.CreateUserStepper_StepActions button.secondary:hover:not(:disabled) {
  background-color: #e5e7eb;
}

.CreateUserStepper_StepActions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Dedicated Button Styles for CreateUserStepper */
.CreateUserStepper_BackButton {
  background-color: #585865;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
}

.CreateUserStepper_BackButton:hover:not(:disabled) {
}

.CreateUserStepper_BackButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.CreateUserStepper_NextButton {
  background: linear-gradient(135deg, #ab0000 0%, #eb4040 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(171, 0, 0, 0.3);
  flex: 1;
}

.CreateUserStepper_NextButton:hover:not(:disabled) {
}

.CreateUserStepper_NextButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.CreateUserStepper_CreateButton {
  background-color: #ab0000;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(171, 0, 0, 0.3);
  flex: 1;
}

.CreateUserStepper_CreateButton:hover:not(:disabled) {
}

.CreateUserStepper_CreateButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.3s ease-out;
}



.create-user-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #222222;
  box-sizing: border-box;
  color: #ffffff;
  width: 100%;
  height: 5rem;
  padding: 16px;
}

.create-user-modal-header-head-two {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
}

.create-user-modal-header h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
  gap: 12px;
}

.create-user-modal-icon {
  align-self: center;
  width: 28px;
  height: auto;
  color: #f0f8ff;
  font-size: 1.3rem;
  filter: invert(1);
}

.create-user-close-button-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: #585865;
  font-size: 1.2rem;
  z-index: 10;
}

.close-button {
  background: none;
  border: none;
  color: #f0f8ff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.close-button:hover {
}

.create-user-form {
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  margin-bottom: 12px;
  position: relative;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 600;
  color: #111111;
  font-size: 0.95rem;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.3px;
}

.input-icon {
  color: #ab0000;
  font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #d0d0d0;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #fafafa;
  color: #111111;
  transition: all 0.3s ease;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  outline: none;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.4;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: #ab0000;
  background-color: #ffffff;
}

.password-field {
  position: relative;
}

.eye-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #ab0000;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.2);
}

.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: #ab0000;
}

.CreateUserStepper_StepContent .error-message {
  color: #ffffff;
  font-size: 0.8rem;
  display: block;
  font-family: "Montserrat", sans-serif;
  background-color: #eb4040;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  margin-top: 2px;
  word-wrap: break-word;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border-top: 1px solid #585865;
  flex-shrink: 0;
}

.cancel-button,
.submit-button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  font-family: "Montserrat", sans-serif;
}

.cancel-button {
  background-color: #f5f7f8;
  color: #111111;
  border: 2px solid #585865;
}

.cancel-button:hover:not(:disabled) {
}

.submit-button {
  background-color: #ab0000;
  color: #ffffff;
}

.submit-button:hover:not(:disabled) {
}

.submit-button:disabled,
.cancel-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 10px;
    align-items: flex-start;
    padding-top: 20px;
  }

  .create-user-modal-wrapper {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 40px);
    border-radius: 12px 12px 0 0;
  }

  .CreateUserStepper_Indicator {
    margin: 0.75rem 0 1rem;
    padding: 0 1rem;
  }

  .steps-container {
    gap: 0.75rem;
  }

  .CreateUserStepper_Step {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }

  .CreateUserStepper_Step:not(:last-child)::before {
    width: 1.5rem;
  }

  .CreateUserStepper_StepContent {
    padding: 0.75rem 1rem 1rem;
  }

  .CreateUserStepper_StepHeader {
    padding: 0.75rem 0;
  }

  .CreateUserStepper_StepHeader h3 {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
  }

  .CreateUserStepper_StepHeader p {
    font-size: 0.9rem;
  }

  .CreateUserStepper_StepActions {
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .CreateUserStepper_StepActions button {
    width: 100%;
    padding: 10px 20px;
    font-size: 0.95rem;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .form-group {
    margin-bottom: 16px;
  }

  .form-group label {
    font-size: 0.9rem;
    margin-bottom: 6px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 10px 14px;
    font-size: 0.95rem;
  }

  .password-field .eye-icon {
    right: 10px;
  }

  .create-user-close-button-icon {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
  }

  .create-user-form {
    padding: 16px;
  }

  .form-actions {
    flex-direction: column;
    padding: 12px 16px;
    gap: 10px;
  }

  .cancel-button,
  .submit-button {
    width: 100%;
    padding: 10px 20px;
  }

  .training-levels-container {
    max-height: 180px;
  }

  .CreateUserStepper_StepContent .error-message {
    font-size: 0.75rem;
    padding: 3px 6px;
  }
}

@media (max-width: 480px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .create-user-modal-wrapper {
    width: 100%;
    max-width: 100%;
    max-height: 95vh;
    border-radius: 16px 16px 0 0;
    padding-top: 0.75rem;
  }

  .CreateUserStepper_Indicator {
    margin: 0.5rem 0 0.75rem;
    padding: 0 0.75rem;
  }

  .steps-container {
    gap: 0.5rem;
  }

  .CreateUserStepper_Step {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .CreateUserStepper_Step:not(:last-child)::before {
    width: 1rem;
  }

  .CreateUserStepper_StepContent {
    padding: 0.5rem 0.75rem 0.75rem;
  }

  .CreateUserStepper_StepHeader {
    padding: 0.5rem 0;
  }

  .CreateUserStepper_StepHeader h3 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
  }

  .CreateUserStepper_StepHeader p {
    font-size: 0.85rem;
  }

  .CreateUserStepper_StepActions {
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .CreateUserStepper_StepActions button {
    padding: 10px 16px;
    font-size: 0.9rem;
    min-width: unset;
  }

  .form-group label {
    font-size: 0.85rem;
    margin-bottom: 5px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  .password-field .eye-icon {
    right: 8px;
    font-size: 0.9rem;
  }

  .create-user-close-button-icon {
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }

  .create-user-form {
    padding: 12px;
  }

  .form-actions {
    padding: 10px 12px;
    gap: 8px;
  }

  .cancel-button,
  .submit-button {
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  .training-levels-container {
    max-height: 150px;
    gap: 6px;
  }

  .training-level-checkbox {
    padding: 5px 6px;
    font-size: 0.85rem;
  }

  .checkmark {
    width: 16px;
    height: 16px;
  }

  .confirmation-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 16px;
  }

  .confirmation-modal h3 {
    font-size: 16px;
  }

  .confirmation-modal p {
    font-size: 13px;
  }

  .confirmation-actions {
    flex-direction: column;
    gap: 8px;
  }

  .confirmation-actions .cancel-button,
  .confirmation-actions .confirm-button {
    width: 100%;
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  .CreateUserStepper_StepContent .error-message {
    font-size: 0.7rem;
    padding: 3px 6px;
    position: relative;
    margin-top: 4px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .create-user-modal-wrapper,
  .close-button,
  .submit-button,
  .cancel-button,
  .form-group input,
  .form-group select,
  .form-group textarea {
    animation: none;
    transition: none;
  }
}

/* Training Levels Styles */
.training-levels-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  border: 2px solid #585865;
  border-radius: 8px;
  background-color: #F0F8FF;
}

.training-level-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  color: #111111;
}

.training-level-checkbox:hover {
  background-color: #F0F8FF;
}

.training-level-checkbox input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #585865;
  border-radius: 4px;
  position: relative;
  background-color: #ffffff;
  transition: all 0.2s ease;
}

.training-level-checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: #ab0000;
  border-color: #ab0000;
}

.training-level-checkbox input[type="checkbox"]:checked + .checkmark::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Focus indicators for keyboard navigation */
.close-button:focus,
.cancel-button:focus,
.submit-button:focus {
  outline: 2px solid #ab0000;
  outline-offset: 2px;
}

.training-level-checkbox:focus-within {
  outline: 2px solid #ab0000;
  outline-offset: 2px;
}

/* Confirmation Modal Styles */
.confirmation-modal {
  background: #ffffff;
  border-radius: 12px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  padding: 20px;
}

.confirmation-modal h3 {
  font-size: 18px;
  font-weight: 600;
  color: #222222;
  margin: 0 0 16px 0;
}

.confirmation-modal p {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.confirmation-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.confirmation-actions .cancel-button {
  background-color: #f5f7f8;
  color: #111111;
  border: 2px solid #585865;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.confirmation-actions .cancel-button:hover:not(:disabled) {
  background-color: #e5e7eb;
}

.confirmation-actions .confirm-button {
  background-color: #cf0a0a;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.confirmation-actions .confirm-button:hover:not(:disabled) {
  background-color: #b00909;
}

.confirmation-actions .cancel-button:disabled,
.confirmation-actions .confirm-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===================================
   DARK MODE STYLES
   =================================== */

/* Modal Wrapper */
.theme-dark .create-user-modal-wrapper {
  background-color: var(--bg-modal);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* Step Content */
.theme-dark .CreateUserStepper_StepContent {
  background-color: var(--bg-modal);
}

/* Step Header */
.theme-dark .CreateUserStepper_StepHeader h3 {
  color: var(--text-primary);
}

.theme-dark .CreateUserStepper_StepHeader p {
  color: var(--text-secondary);
}

/* Form Labels */
.theme-dark .form-group label {
  color: var(--text-primary);
}

/* Form Inputs */
.theme-dark .form-group input,
.theme-dark .form-group select,
.theme-dark .form-group textarea {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--border-input);
}

.theme-dark .form-group input:hover,
.theme-dark .form-group select:hover,
.theme-dark .form-group textarea:hover {
  border-color: var(--border-focus);
  background-color: var(--bg-input);
}

.theme-dark .form-group input:focus,
.theme-dark .form-group select:focus,
.theme-dark .form-group textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.2);
}

.theme-dark .form-group input::placeholder,
.theme-dark .form-group textarea::placeholder,
.theme-dark .form-group select::placeholder {
  color: var(--text-muted);
}

/* Eye Icon */
.theme-dark .eye-icon {
  color: var(--text-secondary);
}

.theme-dark .eye-icon:hover {
  color: var(--text-primary);
}

/* Error Messages */
.theme-dark .CreateUserStepper_StepContent .error-message {
  color: #ffffff;
  background-color: #eb4040;
  border: 1px solid var(--border-primary);
}

/* Step Indicator */
.theme-dark .CreateUserStepper_Step {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.theme-dark .CreateUserStepper_Step.active {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
}

.theme-dark .CreateUserStepper_Step.completed {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
}

.theme-dark .CreateUserStepper_Step:not(:last-child)::before {
  background-color: var(--bg-tertiary);
}

.theme-dark .CreateUserStepper_Step.completed:not(:last-child)::before {
  background-color: var(--accent-primary);
}

/* Buttons */
.theme-dark .CreateUserStepper_StepActions button.secondary {
  background-color: var(--bg-button-secondary);
  color: var(--text-primary);
  border: 2px solid var(--border-primary);
}

.theme-dark .CreateUserStepper_StepActions button.secondary:hover:not(:disabled) {
  background-color: var(--bg-hover);
}

.theme-dark .CreateUserStepper_BackButton {
  background-color: var(--bg-button-secondary);
  color: var(--text-primary);
}

.theme-dark .CreateUserStepper_BackButton:hover:not(:disabled) {
  background-color: var(--bg-hover);
}

.theme-dark .CreateUserStepper_NextButton {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-light) 100%);
  color: var(--text-inverse);
  box-shadow: 0 4px 15px rgba(235, 64, 64, 0.3);
}

.theme-dark .CreateUserStepper_CreateButton {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
  box-shadow: 0 4px 15px rgba(235, 64, 64, 0.3);
}

/* Close Button */
.theme-dark .create-user-close-button-icon {
  color: var(--text-primary);
}

.theme-dark .create-user-close-button-icon:hover {
  color: var(--accent-primary);
}

/* Training Levels Container */
.theme-dark .training-levels-container {
  background-color: var(--bg-input);
  border-color: var(--border-input);
}

.theme-dark .training-level-checkbox {
  color: var(--text-primary);
}

.theme-dark .training-level-checkbox:hover {
  background-color: var(--bg-hover);
}

.theme-dark .checkmark {
  background-color: var(--bg-input);
  border-color: var(--border-input);
}

.theme-dark .training-level-checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* Confirmation Modal */
.theme-dark .confirmation-modal {
  background-color: var(--bg-modal);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.theme-dark .confirmation-modal h3 {
  color: var(--text-primary);
}

.theme-dark .confirmation-modal p {
  color: var(--text-secondary);
}

.theme-dark .confirmation-actions .cancel-button {
  background-color: var(--bg-button-secondary);
  color: var(--text-primary);
  border: 2px solid var(--border-primary);
}

.theme-dark .confirmation-actions .cancel-button:hover:not(:disabled) {
  background-color: var(--bg-hover);
}

.theme-dark .confirmation-actions .confirm-button {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
}

.theme-dark .confirmation-actions .confirm-button:hover:not(:disabled) {
  background-color: var(--accent-hover);
}

/* Select Options */
.theme-dark .form-group select option {
  background-color: var(--bg-input);
  color: var(--text-primary);
}

/* Loading Text */
.theme-dark .training-levels-container div {
  color: var(--text-secondary);
}

/* Dark Mode: Make date input calendar icon white */
.theme-dark .form-group input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.theme-dark .form-group input[type="date"]::-moz-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.theme-dark .form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.theme-dark .form-group input[type="datetime-local"]::-moz-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.theme-dark .form-group input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.theme-dark .form-group input[type="time"]::-moz-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}/* Confirmation Modal Styles */
/* Role-specific confirmation modal styles */
.president-admin-confirmation-modal-overlay,
.admin-confirmation-modal-overlay,
.member-confirmation-modal-overlay,
.guest-confirmation-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.president-admin-confirmation-modal-modal,
.admin-confirmation-modal-modal,
.member-confirmation-modal-modal,
.guest-confirmation-modal-modal {
  background: #ffffff;
  border-radius: 12px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.president-admin-confirmation-modal-header,
.admin-confirmation-modal-header,
.member-confirmation-modal-header,
.guest-confirmation-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.president-admin-confirmation-modal-header h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  padding: 0.rem;
  color: #222222;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

.admin-confirmation-modal-header h3,
.member-confirmation-modal-header h3,
.guest-confirmation-modal-header h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #222222;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

.president-admin-confirmation-modal-header .warning-icon {
  color: #cf0a0a;
  font-size: 18px;
  flex-shrink: 0;
}

.admin-confirmation-modal-header .warning-icon,
.member-confirmation-modal-header .warning-icon,
.guest-confirmation-modal-header .warning-icon {
  color: #f59e0b;
  font-size: 22px;
  flex-shrink: 0;
}

.president-admin-confirmation-modal-close,
.admin-confirmation-modal-close,
.member-confirmation-modal-close,
.guest-confirmation-modal-close {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.president-admin-confirmation-modal-close:hover,
.admin-confirmation-modal-close:hover,
.member-confirmation-modal-close:hover,
.guest-confirmation-modal-close:hover {
  background: #f3f4f6;
  color: #222222;
}

.president-admin-confirmation-modal-close:disabled,
.admin-confirmation-modal-close:disabled,
.member-confirmation-modal-close:disabled,
.guest-confirmation-modal-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.president-admin-confirmation-modal-content,
.admin-confirmation-modal-content,
.member-confirmation-modal-content,
.guest-confirmation-modal-content {
  padding: 24px;
}

.president-admin-confirmation-modal-content p,
.admin-confirmation-modal-content p,
.member-confirmation-modal-content p,
.guest-confirmation-modal-content p {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

.president-admin-confirmation-modal-actions,
.admin-confirmation-modal-actions,
.member-confirmation-modal-actions,
.guest-confirmation-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
}

.confirmation-btn-secondary,
.confirmation-btn-primary {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Roboto", sans-serif;
}

.confirmation-btn-secondary {
  background: #f3f4f6;
  color: #222222;
}

.confirmation-btn-secondary:hover {
  background: #e5e7eb;
}

.confirmation-btn-primary {
  background: #cf0a0a;
  color: #ffffff;
}

.confirmation-btn-primary:hover {
  background: #b00909;
}

.confirmation-btn-secondary:disabled,
.confirmation-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .president-admin-confirmation-modal-modal,
  .admin-confirmation-modal-modal,
  .member-confirmation-modal-modal,
  .guest-confirmation-modal-modal {
    max-width: 100%;
  }

  .president-admin-confirmation-modal-actions,
  .admin-confirmation-modal-actions,
  .member-confirmation-modal-actions,
  .guest-confirmation-modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .confirmation-btn-secondary,
  .confirmation-btn-primary {
    width: 100%;
  }
}

/* ===================================
   DARK MODE STYLES
   =================================== */

.theme-dark .president-admin-confirmation-modal-overlay,
.theme-dark .admin-confirmation-modal-overlay,
.theme-dark .member-confirmation-modal-overlay,
.theme-dark .guest-confirmation-modal-overlay {
  background: rgba(0, 0, 0, 0.8);
}

.theme-dark .president-admin-confirmation-modal-modal,
.theme-dark .admin-confirmation-modal-modal,
.theme-dark .member-confirmation-modal-modal,
.theme-dark .guest-confirmation-modal-modal {
  background: var(--bg-modal);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.theme-dark .president-admin-confirmation-modal-header,
.theme-dark .admin-confirmation-modal-header,
.theme-dark .member-confirmation-modal-header,
.theme-dark .guest-confirmation-modal-header {
  border-bottom-color: var(--border-primary);
  background-color: var(--bg-modal-header);
}

.theme-dark .president-admin-confirmation-modal-header h3,
.theme-dark .admin-confirmation-modal-header h3,
.theme-dark .member-confirmation-modal-header h3,
.theme-dark .guest-confirmation-modal-header h3 {
  color: var(--text-primary);
}

.theme-dark .president-admin-confirmation-modal-header .warning-icon {
  color: var(--accent-primary);
}

.theme-dark .admin-confirmation-modal-header .warning-icon,
.theme-dark .member-confirmation-modal-header .warning-icon,
.theme-dark .guest-confirmation-modal-header .warning-icon {
  color: var(--status-warning);
}

.theme-dark .president-admin-confirmation-modal-close,
.theme-dark .admin-confirmation-modal-close,
.theme-dark .member-confirmation-modal-close,
.theme-dark .guest-confirmation-modal-close {
  color: var(--text-secondary);
}

.theme-dark .president-admin-confirmation-modal-close:hover,
.theme-dark .admin-confirmation-modal-close:hover,
.theme-dark .member-confirmation-modal-close:hover,
.theme-dark .guest-confirmation-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.theme-dark .president-admin-confirmation-modal-content p,
.theme-dark .admin-confirmation-modal-content p,
.theme-dark .member-confirmation-modal-content p,
.theme-dark .guest-confirmation-modal-content p {
  color: var(--text-secondary);
}

.theme-dark .president-admin-confirmation-modal-actions,
.theme-dark .admin-confirmation-modal-actions,
.theme-dark .member-confirmation-modal-actions,
.theme-dark .guest-confirmation-modal-actions {
  border-top-color: var(--border-primary);
}

.theme-dark .confirmation-btn-secondary {
  background: var(--bg-button-secondary);
  color: var(--text-primary);
}

.theme-dark .confirmation-btn-secondary:hover {
  background: var(--border-secondary);
}

.theme-dark .confirmation-btn-primary {
  background: var(--accent-primary);
  color: var(--text-primary);
}

.theme-dark .confirmation-btn-primary:hover {
  background: var(--accent-hover);
}
/* EditMemberModal.css */
/* Modal styling following the specified color palette */
/* Red header, white background, black text */

.edit-member-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  padding: 20px;
}

.edit-member-modal-content {
  background-color: #ffffff;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  width: 100%;
  min-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
  position: relative;
}

.edit-member-modal-header {
  background-color: #ffffff;
  color: #111111;
  padding: 20px 24px;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edit-member-modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Montserrat", sans-serif;
}

.edit-member-modal-icon {
  font-size: 1.2rem;
}

.edit-member-close-button {
  background: none;
  border: none;
  color: #111111;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.edit-member-form {
  padding: 24px;
}

.edit-member-form .edit-member-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 10px;
}

.edit-member-form .edit-member-form-row .edit-member-form-group {
  margin-bottom: 0;
}

.edit-member-form{
  display: flex;
  flex-direction: column;
}

.edit-member-form-group {
  margin-bottom: 20px;
}

.edit-member-form .edit-member-form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #111111;
  font-size: 0.9rem;
  font-family: "Montserrat", sans-serif;
  line-height: 1.4;
}

.edit-member-form .edit-member-input-icon {
  color: #ab0000;
  font-size: 0.9rem;
}

.edit-member-form .edit-member-form-group input,
.edit-member-form .edit-member-form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #585865;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #ffffff;
  color: #111111;
  transition: all 0.2s ease;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

.edit-member-form .edit-member-form-group input:focus,
.edit-member-form .edit-member-form-group select:focus {
  outline: none;
  border-color: #ab0000;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.2);
}

.edit-member-form .edit-member-form-group input.edit-member-error,
.edit-member-form .edit-member-form-group select.edit-member-error {
  border-color: #ab0000;
  background-color: #fef2f2;
}

.edit-member-form .edit-member-error-message {
  color: #ab0000;
  font-size: 0.8rem;
  margin-top: 4px;
  display: block;
  font-family: "Montserrat", sans-serif;
}

.edit-member-form .edit-member-form-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.edit-member-form .edit-member-cancel-button,
.edit-member-form .edit-member-submit-button {
  width: 100%;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  font-family: "Montserrat", sans-serif;
}

.edit-member-form .edit-member-cancel-button {
  background-color: #111111;
  color: #ffffff;
  border: 2px solid #585865;
}

.edit-member-form .edit-member-submit-button {
  background-color: #ab0000;
  color: #ffffff;
}

.edit-member-form .edit-member-submit-button:disabled,
.edit-member-form .edit-member-cancel-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .edit-member-modal-overlay {
    padding: 10px;
  }

  .edit-member-form .edit-member-form-row {
    grid-template-columns: 1fr;
  }

  .edit-member-form {
    padding: 20px;
  }

  .edit-member-modal-content {
    min-width: unset;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}

@media (max-width: 480px) {
  .edit-member-modal-overlay {
    padding: 5px;
  }

  .edit-member-form {
    padding: 16px;
  }

  .edit-member-form .edit-member-form-group input,
  .edit-member-form .edit-member-form-group select {
    padding: 10px 12px;
  }

  .edit-member-modal-header {
    padding: 16px 20px;
  }

  .edit-member-modal-header h2 {
    font-size: 1.3rem;
  }

  .edit-member-modal-content {
    min-width: unset;
    width: 100%;
    max-width: 100%;
  }
}

/* Focus indicators for keyboard navigation */

.edit-member-form .edit-member-cancel-button:focus,
.edit-member-form .edit-member-submit-button:focus {
  outline: 2px solid #ab0000;
  outline-offset: 2px;
}

/* Training Levels Section */
.edit-member-form .edit-member-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #111111;
  font-family: "Montserrat", sans-serif;
  position: relative;
  line-height: 1.4;
}



.edit-member-form .edit-member-section-icon {
  color: #ab0000;
  font-size: 1rem;
}

.edit-member-form .edit-member-loading-text {
  color: #585865;
  font-size: 0.9rem;
  font-style: italic;
  padding: 12px 0;
  font-family: "Montserrat", sans-serif;
}

.edit-member-form .edit-member-training-levels-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #585865;
  border-radius: 8px;
  background-color: #ffffff;
}

.edit-member-form .edit-member-training-level-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: "Roboto", sans-serif;
  font-size: 0.85rem;
  color: #111111;
  margin: 0;
  line-height: 1.3;
  flex-wrap: nowrap !important;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.edit-member-form .edit-member-training-level-checkbox .edit-member-checkmark {
  display: inline-flex !important;
  flex-shrink: 0 !important;
}

.edit-member-form .edit-member-training-level-checkbox .edit-member-training-level-text {
  flex: 1 1 auto !important;
  min-width: 0;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.edit-member-form .edit-member-training-level-checkbox:hover {
  background-color: #f5f7f8;
}

.edit-member-form .edit-member-training-level-checkbox input[type="checkbox"] {
  display: none;
}

.edit-member-form .edit-member-training-level-checkbox .edit-member-checkmark {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 2px solid #585865;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: bold;
  color: #ffffff;
  background-color: #ffffff;
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: relative;
}


.edit-member-form
  .edit-member-training-level-checkbox
  input[type="checkbox"]:checked
  + .edit-member-checkmark {
  background-color: #ab0000;
  border-color: #ab0000;
}

.edit-member-form
  .edit-member-training-level-checkbox
  input[type="checkbox"]:checked
  + .edit-member-checkmark::before {
  content: "✓";
  color: #ffffff;
  font-size: 0.7rem;
  line-height: 1;
  display: block;
}

.edit-member-form
  .edit-member-training-level-checkbox
  input[type="checkbox"]:not(:checked)
  + .edit-member-checkmark::before {
  content: "";
}

/* Responsive Training Levels */
@media (max-width: 768px) {
  .edit-member-form .edit-member-training-levels-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    max-height: none;
    overflow-y: visible;
  }

  .edit-member-form .edit-member-training-level-checkbox {
    padding: 8px 10px;
    font-size: 0.8rem;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .edit-member-form .edit-member-training-level-checkbox .edit-member-training-level-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .edit-member-form .edit-member-training-level-checkbox .edit-member-checkmark {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    font-size: 0.65rem;
    flex-shrink: 0;
  }
}

@media (max-width: 600px) {
  .edit-member-form .edit-member-training-levels-container {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .edit-member-form .edit-member-training-level-checkbox {
    padding: 8px 10px;
    font-size: 0.75rem;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .edit-member-form .edit-member-training-level-checkbox .edit-member-training-level-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .edit-member-form .edit-member-training-level-checkbox .edit-member-checkmark {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .edit-member-form .edit-member-training-levels-container {
    padding: 6px;
    gap: 4px;
  }

  .edit-member-form .edit-member-training-level-checkbox {
    padding: 6px 8px;
    font-size: 0.7rem;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .edit-member-form .edit-member-training-level-checkbox .edit-member-training-level-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .edit-member-form .edit-member-training-level-checkbox .edit-member-checkmark {
    width: 15px;
    height: 15px;
    min-width: 15px;
    min-height: 15px;
    font-size: 0.6rem;
    flex-shrink: 0;
  }
}

/* ===================================
   DARK MODE STYLES
   =================================== */

.theme-dark .edit-member-modal-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}

.theme-dark .edit-member-modal-content {
  background-color: var(--bg-modal);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.theme-dark .edit-member-modal-header {
  background-color: var(--bg-modal-header);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-primary);
}

.theme-dark .edit-member-modal-header h2 {
  color: var(--text-primary);
}

.theme-dark .edit-member-close-button {
  color: var(--text-primary);
}

.theme-dark .edit-member-close-button:hover {
  background-color: var(--bg-hover);
  color: var(--accent-primary);
}

.theme-dark .edit-member-form .edit-member-form-group label {
  color: var(--text-primary);
}

.theme-dark .edit-member-form .edit-member-input-icon {
  color: var(--accent-primary);
}

.theme-dark .edit-member-form .edit-member-form-group input,
.theme-dark .edit-member-form .edit-member-form-group select {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--border-input);
}

.theme-dark .edit-member-form .edit-member-form-group input:focus,
.theme-dark .edit-member-form .edit-member-form-group select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.2);
}

.theme-dark .edit-member-form .edit-member-form-group input.edit-member-error,
.theme-dark .edit-member-form .edit-member-form-group select.edit-member-error {
  border-color: var(--accent-primary);
  background-color: rgba(235, 64, 64, 0.1);
}

.theme-dark .edit-member-form .edit-member-error-message {
  color: var(--accent-primary);
}

.theme-dark .edit-member-form .edit-member-cancel-button {
  background-color: var(--bg-button-secondary);
  color: var(--text-primary);
  border-color: var(--border-secondary);
}

.theme-dark .edit-member-form .edit-member-cancel-button:hover {
  background-color: var(--border-secondary);
}

.theme-dark .edit-member-form .edit-member-submit-button {
  background-color: var(--accent-primary);
  color: var(--text-primary);
}

.theme-dark .edit-member-form .edit-member-submit-button:hover {
  background-color: var(--accent-hover);
}

.theme-dark .edit-member-form .edit-member-section-heading {
  color: var(--text-primary);
}

.theme-dark .edit-member-form .edit-member-section-icon {
  color: var(--accent-primary);
}

.theme-dark .edit-member-form .edit-member-loading-text {
  color: var(--text-secondary);
}

.theme-dark .edit-member-form .edit-member-training-levels-container {
  background-color: var(--bg-input);
  border-color: var(--border-input);
}

.theme-dark .edit-member-form .edit-member-training-level-checkbox {
  color: var(--text-primary);
}

.theme-dark .edit-member-form .edit-member-training-level-checkbox:hover {
  background-color: var(--bg-hover);
}

.theme-dark .edit-member-form .edit-member-training-level-checkbox .edit-member-checkmark {
  background-color: var(--bg-input);
  border-color: var(--border-input);
}

.theme-dark .edit-member-form
  .edit-member-training-level-checkbox
  input[type="checkbox"]:checked
  + .edit-member-checkmark {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.theme-dark .edit-member-form
  .edit-member-training-level-checkbox
  input[type="checkbox"]:checked
  + .edit-member-checkmark::before {
  color: var(--text-primary);
}
/* CustomFilterDropdown.css */
/* Custom dropdown component to replace native select for reliable mobile positioning */

.custom-filter-dropdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  width: 100%;
}

.custom-dropdown-wrapper {
  position: relative;
  width: 100%;
}

.custom-filter-dropdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  width: 100%;
}

.custom-dropdown-button {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #222222;
  border-radius: 8px;
  font-size: 0.9rem;
  background: transparent;
  color: #222222;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  text-align: left;
  transition: all 0.2s ease;
  outline: none;
}

.custom-dropdown-button:hover {
  border-color: #CF0A0A;
}

.custom-dropdown-button:focus {
  border-color: #CF0A0A;
  outline: none;
}

.custom-dropdown-button.open {
  border-color: #CF0A0A;
  outline: none;
}

.custom-dropdown-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-dropdown-icon {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.custom-dropdown-icon.open {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 2px solid #222222;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 4px;
}

.custom-dropdown-wrapper.dropdown-open {
  z-index: 1000;
  position: relative;
}

.custom-filter-dropdown.dropdown-open {
  z-index: 1000;
  position: relative;
}

.custom-dropdown-option {
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: #222222;
  cursor: pointer;
  text-align: left;
  font-size: 0.9rem;
  font-family: "Montserrat", sans-serif;
  transition: background-color 0.2s ease;
  display: block;
  box-sizing: border-box;
}

.custom-dropdown-option:hover {
  background-color: #f5f7f8;
}

.custom-dropdown-option.selected {
  background-color: #e3f2fd;
  color: #CF0A0A;
  font-weight: 600;
}

.custom-dropdown-option:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.custom-dropdown-option:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .custom-dropdown-button {
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  .custom-dropdown-option {
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  .custom-dropdown-menu {
    max-height: 250px;
    z-index: 1000;
  }

  .custom-dropdown-wrapper.dropdown-open {
    z-index: 1000;
  }

  .custom-filter-dropdown.dropdown-open {
    z-index: 1000;
  }
}

@media (max-width: 480px) {
  .custom-dropdown-button {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .custom-dropdown-option {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .custom-dropdown-menu {
    max-height: 200px;
    z-index: 1000;
  }

  .custom-dropdown-wrapper.dropdown-open {
    z-index: 1000;
  }

  .custom-filter-dropdown.dropdown-open {
    z-index: 1000;
  }
}

/* Dark Mode */
.theme-dark .custom-dropdown-button {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--border-input);
}


.theme-dark .custom-dropdown-button:hover {
  border-color: var(--accent-primary);
}

.theme-dark .custom-dropdown-button {
  outline: none;
}

.theme-dark .custom-dropdown-button:focus {
  border-color: var(--accent-primary);
  outline: none;
}

.theme-dark .custom-dropdown-button.open {
  border-color: var(--accent-primary);
  outline: none;
}

/* Dark mode icon styling - separated rules for clarity */
/* Icon SVG elements */
body.theme-dark .custom-filter-dropdown .custom-dropdown-icon svg,
body.theme-dark .custom-dropdown-button .custom-dropdown-icon svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Icon SVG path elements */
body.theme-dark .custom-filter-dropdown .custom-dropdown-icon svg path,
body.theme-dark .custom-dropdown-button .custom-dropdown-icon svg path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.theme-dark .custom-dropdown-menu {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
  box-shadow: var(--shadow-lg);
}

.theme-dark .custom-dropdown-option {
  color: var(--text-primary);
}

.theme-dark .custom-dropdown-option:hover {
  background-color: var(--bg-hover);
}

.theme-dark .custom-dropdown-option.selected {
  background-color: rgba(207, 10, 10, 0.2);
  color: var(--accent-primary);
}

/* SearchFilter.css */
/* Styling for the search and filter controls */

.search-filter-container {
  background: #ffffff;
  border: none;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 18px;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  position: relative;
  overflow: visible;
}

/* Header with Search, Filters, and Actions */
.search-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 12px;
}

.search-and-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Search Section */
.search-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 200px;
}

.search-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.search-input-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 2px solid #222222;
  border-radius: 8px;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  background-color: transparent;
  color: #222222;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.search-input::placeholder {
  color: #999;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #CF0A0A;
  font-size: 1rem;
  pointer-events: none;
  z-index: 1;
}

.clear-search-button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s ease;
  z-index: 1;
}

/* Filter Section */
.filter-section {
  margin-bottom: 15px;
  position: relative;
  overflow: visible;
}

.filter-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
}

.filter-icon {
  color: #222222;
  font-size: 1rem;
}

.filter-label {
  font-weight: 600;
  color: #222222;
  font-size: 1rem;
}

.clear-filters-button {
  font-family: Roboto;
  font-weight: 600;
  margin-left: auto;
  padding: 6px 12px;
  background-color: #222222;
  box-shadow: 0px 4px 8px rgba(34, 34, 34, 0.1);
  border: none;
  color: #F0F8FF;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.filter-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  position: relative;
  overflow: visible;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.filter-group:focus-within {
  z-index: 10;
}

.filter-group-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #222222;
  font-size: 0.9rem;
}

.filter-select {
  padding: 10px 12px;
  border: 2px solid #222222;
  border-radius: 8px;
  font-size: 0.9rem;
  background: transparent;
  color: #222222;
  cursor: pointer;
  position: static;
  width: 100%;
  box-sizing: border-box;
}

/* Archive Section */
.archive-section {
  margin-bottom: 16px;
}

.archive-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.archive-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #222222;
  cursor: pointer;
}

.action-button .unarchive-button {
  background-color: #3A6F43;
}

.archive-label {
  font-weight: 500;
  color: #222222;
  font-size: 0.9rem;
}

/* Active Filters */
.active-filters {
  padding-top: 16px;
  border-top: 1px solid #58595a;
}

.active-filters-label {
  font-weight: 500;
  color: #222222;
  font-size: 0.9rem;
  margin-bottom: 8px;
  display: block;
}

.active-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: rgba(34, 34, 34, 0.2);
  color: #222222;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.remove-filter {
  background: none;
  border: none;
  color: #222222;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: background-color 0.2s ease;
}

/* Refresh Button Styles */
.refresh-button {
  background: none;
  border: none;
  color: #222222;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 1rem;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.refresh-button:hover:not(:disabled) {
  background-color: rgba(34, 34, 34, 0.1);
  transform: scale(1.05);
}

.refresh-button:active:not(:disabled),
.refresh-button:focus:not(:disabled) {
  background: none !important;
  background-color: transparent !important;
  transform: scale(0.98);
  color: #222222;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.refresh-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.refresh-button .spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .search-filter-container {
    padding: 12px;
    margin-bottom: 16px;
  }

  .search-filter-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
  }

  .search-section {
    width: 100%;
    min-width: unset;
  }

  .search-input-wrapper {
    width: 100%;
    gap: 10px;
  }

  .search-input {
    width: 100%;
  }

  .filter-header {
    margin-left: 0;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .create-account-btn {
    flex: 0 0 auto;
    padding: 10px 16px;
    font-size: 0.85rem;
  }

  .refresh-button {
    padding: 0;
    font-size: 0.9rem;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border: 1px solid #222222;
    background-color: #222222;
    color: #ffffff;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .refresh-button:hover:not(:disabled) {
    background-color: rgba(34, 34, 34, 0.8);
  }

  .refresh-button:active:not(:disabled),
  .refresh-button:focus:not(:disabled) {
    background-color: #222222 !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .theme-dark .refresh-button:active:not(:disabled),
  .theme-dark .refresh-button:focus:not(:disabled) {
    background: none !important;
    background-color: transparent !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .filter-section {
    margin-bottom: 12px;
  }

  .filter-controls {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .filter-group-label {
    font-size: 0.85rem;
  }

  .filter-select {
    padding: 10px 12px;
    font-size: 0.85rem;
    width: 100%;
    position: static;
    box-sizing: border-box;
  }

  .filter-group {
    position: relative;
    z-index: 1;
  }

  .filter-group:focus-within {
    z-index: 10;
  }

  .clear-filters-button {
    margin-left: auto;
    padding: 5px 10px;
    font-size: 0.8rem;
  }

  .archive-section {
    margin-bottom: 12px;
  }

  .archive-label {
    font-size: 0.85rem;
  }

  .active-filter-tags {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .filter-tag {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .search-filter-container {
    padding: 10px;
    margin-bottom: 12px;
    border-radius: 12px;
  }

  .search-filter-header {
    gap: 10px;
    margin-bottom: 10px;
  }

  .search-input-wrapper {
    gap: 8px;
  }

  .search-input {
    padding: 10px 12px 10px 40px;
    font-size: 0.9rem;
  }

  .search-icon {
    left: 12px;
    font-size: 0.9rem;
  }

  .clear-search-button {
    right: 10px;
    padding: 3px;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .create-account-btn {
    flex: 0 0 auto;
    padding: 10px 16px;
    font-size: 0.8rem;
  }

  .refresh-button {
    padding: 0;
    font-size: 0.85rem;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border: 1px solid #222222;
    background-color: #222222;
    color: #ffffff;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .refresh-button:hover:not(:disabled) {
    background-color: rgba(34, 34, 34, 0.8);
  }

  .refresh-button:active:not(:disabled),
  .refresh-button:focus:not(:disabled) {
    background-color: #222222 !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .theme-dark .refresh-button:active:not(:disabled),
  .theme-dark .refresh-button:focus:not(:disabled) {
    background: none !important;
    background-color: transparent !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .filter-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  .filter-label {
    font-size: 0.9rem;
  }

  .clear-filters-button {
    margin-left: auto;
    padding: 4px 8px;
    font-size: 0.75rem;
    gap: 4px;
  }

  .filter-controls {
    gap: 8px;
  }

  .filter-group {
    gap: 5px;
  }

  .filter-group-label {
    font-size: 0.8rem;
  }

  .filter-select {
    padding: 8px 10px;
    font-size: 0.8rem;
    width: 100%;
    position: static;
    box-sizing: border-box;
  }

  .filter-group {
    position: relative;
    z-index: 1;
  }

  .filter-group:focus-within {
    z-index: 10;
  }

  .archive-section {
    margin-bottom: 10px;
  }

  .archive-checkbox {
    width: 16px;
    height: 16px;
  }

  .archive-label {
    font-size: 0.8rem;
  }

  .active-filters {
    padding-top: 12px;
  }

  .active-filters-label {
    font-size: 0.85rem;
    margin-bottom: 6px;
  }

  .filter-tag {
    font-size: 0.75rem;
    padding: 5px 10px;
    gap: 5px;
  }

  .remove-filter {
    width: 14px;
    height: 14px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .search-input,
  .filter-select {
    border-width: 3px;
  }
  
  .filter-tag {
    border: 2px solid #CF0A0A;
  }
}

/* ===================================
   DARK MODE STYLES
   =================================== */

.theme-dark .search-filter-container {
  background: var(--bg-card);
  border-color: var(--border-primary);
  box-shadow: var(--shadow-md);
}

.theme-dark .search-input {
  background-color: var(--bg-input);
  color: #585865;
  border-color: #ffffff;
}

.theme-dark .search-input::placeholder {
  color: var(--text-tertiary);
}

.theme-dark .search-icon {
  color: #ffffff;
}

.theme-dark .clear-search-button {
  color: var(--text-secondary);
}

.theme-dark .clear-search-button:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.theme-dark .filter-icon,
.theme-dark .filter-label {
  color: var(--text-primary);
}

.theme-dark .clear-filters-button {
  background-color: var(--bg-button-secondary);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.theme-dark .clear-filters-button:hover {
  background-color: var(--border-secondary);
}

.theme-dark .filter-group-label {
  color: var(--text-primary);
}

.theme-dark .filter-select {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--border-input);
}

.theme-dark .filter-select:hover {
  border-color: var(--accent-primary);
}

.theme-dark .archive-label {
  color: var(--text-primary);
}

.theme-dark .archive-checkbox {
  accent-color: var(--accent-primary);
}

.theme-dark .active-filters {
  border-top-color: var(--border-primary);
}

.theme-dark .active-filters-label {
  color: var(--text-primary);
}

.theme-dark .filter-tag {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.theme-dark .remove-filter {
  color: var(--text-primary);
}

.theme-dark .remove-filter:hover {
  background-color: var(--bg-hover);
}

.theme-dark .refresh-button {
  color: var(--text-primary);
  border: 1px solid #ffffff;
}

.theme-dark .refresh-button:hover:not(:disabled) {
  background-color: var(--bg-hover);
  border-color: #ffffff;
}

@media (max-width: 768px) {
  .theme-dark .refresh-button {
    border: 1px solid #ffffff;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    padding: 0;
    background-color: transparent;
    color: #ffffff;
  }

  .theme-dark .refresh-button:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 480px) {
  .theme-dark .refresh-button {
    border: 1px solid #ffffff;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    padding: 0;
    background-color: transparent;
    color: #ffffff;
  }

  .theme-dark .refresh-button:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

.theme-dark .refresh-button:active:not(:disabled),
.theme-dark .refresh-button:focus:not(:disabled) {
  background: none !important;
  background-color: transparent !important;
  border-color: #ffffff;
  color: var(--text-primary);
  transform: scale(0.98);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.theme-dark .create-account-btn {
  background-color: var(--bg-button-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.theme-dark .create-account-btn:hover {
  background-color: var(--border-secondary);
}

/* ProgressDropdown.css */
/* Styling for the expandable training progress dropdown */

.progress-dropdown {
  box-sizing: border-box;
  width: 100%;
  margin-top: 8px;
}

.member-management-progress-content {
  box-sizing: border-box;
  background-color: transparent;
  border-top: 1px solid #ddd;
  padding: 0.75rem 1rem;
}

.progress-toggle {
  width: 100%;
  padding: 12px 16px;
  background-color: #f0f8ff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  color: #222222;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.progress-toggle:hover {
  border-color: #cf0a0a;
  background-color: rgba(207, 10, 10, 0.05);
}

.progress-toggle:focus {
  outline: 2px solid #cf0a0a;
  outline-offset: 2px;
}

.toggle-text {
  font-weight: 500;
}

.toggle-icon {
  color: #cf0a0a;
  transition: transform 0.2s ease;
}

.progress-content {
  margin-top: 8px;
  padding: 16px;
  background-color: #f0f8ff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  animation: slideDown 0.2s ease-out;
  box-sizing: border-box;
}

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

/* Loading State */
.progress-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  color: #222222;
  box-sizing: border-box;
}

.spinner {
  animation: spin 1s linear infinite;
  color: #cf0a0a;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Error State */
.progress-error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: rgba(207, 10, 10, 0.1);
  border-radius: 6px;
  color: #cf0a0a;
}

.error-icon {
  color: #cf0a0a;
}

.retry-button {
  padding: 6px 12px;
  background-color: #cf0a0a;
  color: #f0f8ff;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s ease;
  margin-left: auto;
}

.retry-button:hover {
  background-color: #b00909;
}

/* Progress Summary */
.progress-summary {
  margin-bottom: 20px;
  padding: 16px;
  background-color: rgba(240, 248, 255, 0.8);
  border-radius: 6px;
  border: 1px solid #e0e0e0;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-label {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222222;
}

.stat-value.pass {
  color: #28a745;
}

.stat-value.fail {
  color: #cf0a0a;
}

/* Progress List */
.progress-list {
  margin-top: 20px;
  border-top: 1px solid #ddd;
  padding-top: 20px;
}

.member-management-progress-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  box-sizing: border-box;
  width: 100%;
}

.training-section {
  border-right: 1px solid #ddd;
  padding-right: 1rem;
}

.progress-title {
  font-family: "Montserrat", sans-serif;
  margin: 0 0 16px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #222222;
  border-bottom: 2px solid #b90000;
  padding-bottom: 0.25rem;
}

.progress-item {
  margin-bottom: 16px;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
}

.progress-item:hover {
  border-color: #cf0a0a;
  box-shadow: 0 2px 8px rgba(207, 10, 10, 0.1);
}

.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.quiz-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #222222;
}

.result-icon {
  font-size: 1rem;
}

.result-icon.pass {
  color: #28a745;
}

.result-icon.fail {
  color: #cf0a0a;
}

.quiz-result {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.quiz-result.pass {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

.quiz-result.fail {
  background-color: rgba(207, 10, 10, 0.1);
  color: #cf0a0a;
}

.quiz-details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #666;
}

.detail-icon {
  color: #cf0a0a;
  font-size: 0.8rem;
}

.score-display {
  font-weight: 500;
  color: #222222;
}

/* No Progress State */
.no-progress {
  padding: 20px;
}

.member-management-completed-exams {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
}

.member-management-no-results {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}

.training-levels-section,
.quiz-results-section {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 20px;
}

.training-levels-section-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #222222;
  margin-bottom: 10px;
  border-bottom: 2px solid #b90000;
  padding-bottom: 0.25rem;
}

.training-levels-section-title .badge {
  background-color: #cf0a0a;
  color: white;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 0.7em;
  font-weight: bold;
  margin-left: 8px;
}

.member-management-training-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.member-management-training-list .member-management-training-item {
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  white-space: nowrap;
  animation: slideDown 0.2s ease-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
}

.member-management-training-list .member-management-training-item.no-results-item {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: rgba(17, 17, 17, 0.3);
  font-style: italic;
  color: #666;
}

.member-management-training-item-title {
  flex: 1;
  font-weight: 500;
  color: #222222;
}

.quiz-results-section {
  display: flex;
  flex-direction: column;
}

.quiz-results-section-results {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #222222;
}

.quiz-results-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.member-management-completed-exams-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.member-management-completed-exams-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #222222;
  border-bottom: 2px solid #b90000;
  margin-bottom: 10px;
}

.member-management-completed-exams-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.member-management-completed-exams-list .member-management-completed-exams-item {
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  white-space: nowrap;
  animation: slideDown 0.2s ease-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
}

.member-management-completed-exams-list .member-management-completed-exams-item.no-results-item {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: rgba(17, 17, 17, 0.3);
  font-style: italic;
  color: #666;
}

.member-management-completed-exams-item-title {
  flex: 1;
  font-weight: 500;
  color: #222222;
}



.member-management-completed-exams-item-status {
  flex: 0 0 70px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 12px;
}

.member-management-completed-exams-item-status.passed {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

.member-management-completed-exams-item-status.failed {
  background-color: rgba(207, 10, 10, 0.1);
  color: #cf0a0a;
}

.member-management-completed-exams-item-date {
  flex: 0 0 100px;
  text-align: right;
  font-size: 0.8rem;
  color: #666;
}

.quiz-results-section-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  padding-bottom: 5px;
  border-bottom: 2px solid #111111;
  padding-bottom: 0.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .member-management-progress-data {
    grid-template-columns: 1fr;
  }

  .training-section {
    border-right: none;
    border-bottom: 1px solid #ddd;
    padding-right: 0;
    padding-bottom: 1rem;
  }

  .progress-content {
    padding: 12px;
  }

  .summary-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .training-tags {
    justify-content: flex-start;
  }

  .quiz-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .quiz-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .detail-item {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .progress-toggle {
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  .summary-stats {
    grid-template-columns: 1fr;
  }

  .progress-item {
    padding: 12px;
  }

  .quiz-title {
    font-size: 0.9rem;
  }
}

/* Focus indicators for accessibility */
.progress-toggle:focus,
.retry-button:focus {
  outline: 2px solid #cf0a0a;
  outline-offset: 2px;
}

/* ===================================
   DARK MODE STYLES
   =================================== */

.theme-dark .member-management-progress-content {
  border-top-color: var(--border-primary);
}

.theme-dark .progress-toggle {
  background-color: var(--bg-input);
  border-color: var(--border-input);
  color: var(--text-primary);
}

.theme-dark .progress-toggle:hover {
  border-color: var(--accent-primary);
  background-color: var(--bg-hover);
}

.theme-dark .toggle-icon {
  color: var(--accent-primary);
}

.theme-dark .progress-content {
  background-color: var(--bg-input);
  border-color: var(--border-input);
}

.theme-dark .progress-loading {
  color: var(--text-primary);
}

.theme-dark .spinner {
  color: var(--accent-primary);
}

.theme-dark .progress-error {
  background-color: rgba(235, 64, 64, 0.1);
  color: var(--accent-primary);
}

.theme-dark .error-icon {
  color: var(--accent-primary);
}

.theme-dark .retry-button {
  background-color: var(--accent-primary);
  color: var(--text-primary);
}

.theme-dark .retry-button:hover {
  background-color: var(--accent-hover);
}

.theme-dark .progress-summary {
  background-color: var(--bg-tertiary);
  border-color: var(--border-primary);
}

.theme-dark .stat-label {
  color: var(--text-secondary);
}

.theme-dark .stat-value {
  color: var(--text-primary);
}

.theme-dark .stat-value.pass {
  color: var(--status-success);
}

.theme-dark .stat-value.fail {
  color: var(--accent-primary);
}

.theme-dark .progress-list {
  border-top-color: var(--border-primary);
}

.theme-dark .member-management-progress-data {
  background-color: transparent;
}

.theme-dark .training-section {
  border-right-color: var(--border-primary);
}

.theme-dark .progress-title {
  color: var(--text-primary);
  border-bottom-color: var(--accent-primary);
}

.theme-dark .progress-item {
  background-color: var(--bg-tertiary);
  border-color: var(--border-primary);
}

.theme-dark .progress-item:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px rgba(235, 64, 64, 0.2);
}

.theme-dark .quiz-title {
  color: var(--text-primary);
}

.theme-dark .score-display {
  color: var(--text-primary);
}

.theme-dark .detail-item {
  color: var(--text-secondary);
}

.theme-dark .detail-icon {
  color: var(--accent-primary);
}

.theme-dark .member-management-completed-exams {
  background: transparent;
}

.theme-dark .member-management-no-results {
  background: transparent;
  color: var(--text-secondary);
}

.theme-dark .training-levels-section-title,
.theme-dark .member-management-completed-exams-title {
  color: var(--text-primary);
  border-bottom-color: var(--accent-primary);
}

.theme-dark .member-management-training-list .member-management-training-item {
  background-color: var(--bg-tertiary);
  border-color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.theme-dark .member-management-training-list .member-management-training-item.no-results-item {
  background-color: var(--bg-input);
  border-color: #ffffff;
  color: var(--text-tertiary);
}

.theme-dark .member-management-training-item-title {
  color: var(--text-primary);
}

.theme-dark .quiz-results-section-results {
  border-top-color: var(--border-primary);
}

.theme-dark .member-management-completed-exams-list .member-management-completed-exams-item {
  background-color: var(--bg-tertiary);
  border-color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.theme-dark .member-management-completed-exams-list .member-management-completed-exams-item.no-results-item {
  background-color: var(--bg-input);
  border-color: #ffffff;
  color: var(--text-tertiary);
}

.theme-dark .member-management-completed-exams-item-title {
  color: var(--text-primary);
}

.theme-dark .member-management-completed-exams-item-date {
  color: var(--text-secondary);
}

.theme-dark .quiz-results-section-title {
  color: var(--text-primary);
  border-bottom-color: var(--border-primary);
}/* UserTable.css */
/* Styling for the user management table */

.president-admin-user-table-container,
.admin-user-table-container {
  width: 100%;
  background-color: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  overflow: hidden;
}

.table-wrapper {
  overflow-x: auto;
  box-sizing: content-box;
  max-width: 100%;
  margin: 0 auto;
}

.president-admin-user-table-table,
.admin-user-table-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: auto;
}

.president-admin-user-table-table thead,
.admin-user-table-table thead,
.user-table thead {
  background-color: #ab0000;
  color: #ffffff;
  box-sizing: border-box;
}

.president-admin-user-table-table thead tr,
.admin-user-table-table thead tr,
.user-table thead tr {
  background-color: #cf0a0a;
  color: #f0f8ff;
}

.president-admin-user-table-table th,
.admin-user-table-table th,
.user-table th {
  padding: 16px 12px;
  text-align: start;
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 2px solid #ab0000;
  background-color: #cf0a0a;
  color: #f0f8ff;
}

/* Status column header - add balanced padding for spacing */
.president-admin-user-table-table th:nth-child(5),
.admin-user-table-table th:nth-child(5),
.user-table th:nth-child(5) {
  padding-left: 8px;
  padding-right: 16px;
}

/* Actions column header - expand to fill remaining space and center-align */
.president-admin-user-table-table th:last-child,
.admin-user-table-table th:last-child,
.user-table th:last-child {
  width: auto;
  min-width: 90px;
  text-align: center !important;
  padding: 16px 20px 16px 24px !important;
}

.president-admin-user-table-table tbody tr,
.admin-user-table-table tbody tr,
.user-table tbody tr {
  border-bottom: 1px solid #585865;
  transition: background-color 0.2s ease;
}

.president-admin-user-table-table tbody tr:hover,
.admin-user-table-table tbody tr:hover,
.user-table tbody tr:hover {
  background-color: #f5f7f8;
}

.president-admin-user-table-table tbody tr.archived-row,
.admin-user-table-table tbody tr.archived-row,
.user-table tbody tr.archived-row {
  background-color: rgba(0, 0, 0, 0.05);
  opacity: 0.8;
}

.president-admin-user-table-table tbody tr.archived-row:hover,
.admin-user-table-table tbody tr.archived-row:hover,
.user-table tbody tr.archived-row:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.president-admin-user-table-table td,
.admin-user-table-table td,
.user-table td {
  padding: 16px 12px;
  vertical-align: top;
}

/* Name Cell */
.name-cell {
  min-width: 180px;
}

.user-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.full-name {
  font-weight: 600;
  color: #111111;
  font-size: 0.95rem;
}

.occupation {
  font-size: 0.8rem;
  color: #585865;
  font-style: italic;
}

/* Email in name cell */
.name-cell .email {
  font-size: 0.8rem;
  color: #585865;
  font-style: italic;
}

.phone {
  font-size: 0.8rem;
  color: #585865;
  font-style: italic;
}

/* Role Cell */
.role-cell {
  min-width: 100px;
}

.role-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.role-president {
  background-color: #eb4040;
  color: #ffffff;
}

.role-admin {
  background-color: #111111;
  color: #ffffff;
}

.role-member {
  background-color: #556B2F;
  color: #ffffff;
}

/* Status Cell */
.status-cell {
  min-width: 100px;
  padding: 16px 20px 16px 8px !important;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 16px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.status-active {
  background-color: #84994F;
  color: #ffffff;
}

.status-badge.status-pending {
  background-color: #58595a;
  color: #ffffff;
}

.status-badge.status-inactive {
  background-color: #111111;
  color: #ffffff;
}

.status-badge.status-archived {
  background-color: #faa533;
  color: #ffffff;
}



/* Training Level Cell */
.training-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 120px;
}

.training-level {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: capitalize;
}

.training-level-1 {
  background-color: #e8f5e8;
  color: #2d5a2d;
  border: 1px solid #4caf50;
}

.training-level-3 {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
}

.training-level-5 {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #17a2b8;
}

/* Actions Cell */
.actions-cell {
  min-width: 90px;
  width: auto;
  padding: 16px 20px 16px 24px !important;
  text-align: center !important;
}

.action-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center !important;
  width: 100%;
  margin: 0 auto;
}

.action-button {
  padding: 6px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

.action-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.edit-button {
  background-color: rgba(0, 0, 0, 0.1);
  color: #000000;
}

.edit-button:hover:not(:disabled) {
  background-color: #000000;
  color: #ffffff;
  transform: translateY(-1px);
}

.archive-button {
  background-color: #222222;
  color: #f0f8ff;
}

.unarchive-button {
  background-color: #3a6f43;
  color: #f0f8ff;
}

.delete-button {
  background-color: #ab0000;
  color: white;
}

.progress-button {
  background-color: rgba(0, 0, 0, 0.1);
  color: #000000;
}

.dropdown-icon {
  width: 16px;
  height: 16px;
  filter: brightness(0);
  transition: filter 0.2s ease;
}

/* Progress Row */
.progress-row {
  background-color: rgba(240, 248, 255, 0.3);
}

.progress-cell {
  padding: 10px;
  box-sizing: border-box;
}

/* Loading State */
.table-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: #222222;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.spinner {
  animation: spin 1s linear infinite;
  color: #cf0a0a;
  font-size: 1.2rem;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* No Users State */
.no-users {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.no-users p {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
}

.no-users-hint {
  font-size: 0.9rem !important;
  color: #999 !important;
  font-style: italic;
}

/* Table Summary */
.table-summary {
  padding: 16px 20px;
  background-color: rgba(240, 248, 255, 0.5);
  border-top: 1px solid #e0e0e0;
  text-align: center;
}

.user-count {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

/* Training Levels Dropdown Styles */
.training-levels-dropdown {
  position: relative;
  display: inline-block;
}

.training-display {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.training-display:hover {
  background-color: #f5f7f8;
}

.training-count {
  background-color: #ab0000;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}

.dropdown-icon {
  font-size: 0.7rem;
  color: #585865;
  transition: all 0.2s ease;
}

.dropdown-icon.rotated {
  transform: rotate(180deg);
}

.training-display:hover .dropdown-icon {
  color: #ab0000;
}

.training-levels-details {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #585865;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.1);
  padding: 8px;
  min-width: 200px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  pointer-events: none;
}

.training-levels-dropdown.active .training-levels-details {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.training-level-item {
  display: flex;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #585865;
}

.training-level-item:last-child {
  border-bottom: none;
}

.training-badge {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #f5f7f8;
  color: #111111;
}

.training-level.no-training {
  color: #585865;
  font-style: italic;
}

/* Single training level styles */
.training-level {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: #f5f7f8;
  color: #111111;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .president-admin-user-table-table,
.admin-user-table-table {
    font-size: 0.85rem;
  }

  .president-admin-user-table-table th,
  .admin-user-table-table th,
  .user-table th,
  .president-admin-user-table-table td,
  .admin-user-table-table td,
  .user-table td {
    padding: 12px 8px;
  }

  .action-buttons {
    gap: 6px;
  }

  .action-button {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .president-admin-user-table-container,
  .admin-user-table-container {
    border-radius: 18px;
  }

  .table-wrapper {
    overflow-x: auto;
  }

  .president-admin-user-table-table,
  .admin-user-table-table {
    width: 100%;
    font-size: 0.8rem;
  }

  .president-admin-user-table-table th,
  .admin-user-table-table th,
  .user-table th,
  .president-admin-user-table-table td,
  .admin-user-table-table td,
  .user-table td {
    padding: 10px 8px;
  }

  /* Status header padding on smaller screens */
  .president-admin-user-table-table th:nth-child(5),
  .admin-user-table-table th:nth-child(5),
  .user-table th:nth-child(5) {
    padding-left: 8px;
    padding-right: 12px;
  }

  /* Actions header on smaller screens */
  .president-admin-user-table-table th:last-child,
  .admin-user-table-table th:last-child,
  .user-table th:last-child {
    min-width: 65px;
    padding: 10px 12px 10px 16px !important;
  }

  /* Hide Role, Age, and Sex columns on smaller screens */
  .president-admin-user-table-table th:nth-child(2),
  .president-admin-user-table-table td:nth-child(2),
  .admin-user-table-table th:nth-child(2),
  .admin-user-table-table td:nth-child(2),
  .user-table th:nth-child(2),
  .user-table td:nth-child(2),
  .president-admin-user-table-table th:nth-child(3),
  .president-admin-user-table-table td:nth-child(3),
  .admin-user-table-table th:nth-child(3),
  .admin-user-table-table td:nth-child(3),
  .user-table th:nth-child(3),
  .user-table td:nth-child(3),
  .president-admin-user-table-table th:nth-child(4),
  .president-admin-user-table-table td:nth-child(4),
  .admin-user-table-table th:nth-child(4),
  .admin-user-table-table td:nth-child(4),
  .user-table th:nth-child(4),
  .user-table td:nth-child(4) {
    display: none;
  }

  .name-cell {
    min-width: 120px;
    max-width: 160px;
  }

  .full-name {
    font-size: 0.85rem;
  }

  .occupation,
  .name-cell .email {
    font-size: 0.7rem;
  }

  .status-cell {
    min-width: 25px;
    max-width: 85px;
    padding: 1px 14px 8px 8px !important;
  }

  .status-badge {
    padding: 1px 2px;
    font-size: 0.2rem;
    gap: 0;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.5px;
  }

  .status-badge.status-archived {
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
    gap: 2px;
    border-radius: 12px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .status-badge svg {
    display: none;
  }

  .actions-cell {
    min-width: 65px;
    padding: 10px 12px 10px 16px !important;
  }

  .action-buttons {
    gap: 3px;
  }

  .action-button {
    width: 24px;
    height: 24px;
    font-size: 0.65rem;
    padding: 4px;
  }

  .training-levels-details {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
  }

  .training-levels-dropdown.active .training-levels-details {
    transform: translateX(-50%) translateY(0);
  }

  /* Progress row should span all visible columns (Name, Status, Actions = 3 columns) */
  .progress-cell {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .president-admin-user-table-container,
  .admin-user-table-container {
    border-radius: 18px;
  }

  .table-wrapper {
    overflow-x: auto;
  }

  .president-admin-user-table-table,
  .admin-user-table-table {
    width: 100%;
    font-size: 0.75rem;
  }

  .president-admin-user-table-table th,
  .admin-user-table-table th,
  .user-table th,
  .president-admin-user-table-table td,
  .admin-user-table-table td,
  .user-table td {
    padding: 8px 6px;
  }

  /* Actions header on very small screens */
  .president-admin-user-table-table th:last-child,
  .admin-user-table-table th:last-child,
  .user-table th:last-child {
    min-width: 55px;
    padding: 8px 10px 8px 12px !important;
  }

  /* Hide Role, Age, and Sex columns on smaller screens */
  .president-admin-user-table-table th:nth-child(2),
  .president-admin-user-table-table td:nth-child(2),
  .admin-user-table-table th:nth-child(2),
  .admin-user-table-table td:nth-child(2),
  .user-table th:nth-child(2),
  .user-table td:nth-child(2),
  .president-admin-user-table-table th:nth-child(3),
  .president-admin-user-table-table td:nth-child(3),
  .admin-user-table-table th:nth-child(3),
  .admin-user-table-table td:nth-child(3),
  .user-table th:nth-child(3),
  .user-table td:nth-child(3),
  .president-admin-user-table-table th:nth-child(4),
  .president-admin-user-table-table td:nth-child(4),
  .admin-user-table-table th:nth-child(4),
  .admin-user-table-table td:nth-child(4),
  .user-table th:nth-child(4),
  .user-table td:nth-child(4) {
    display: none;
  }

  .name-cell {
    min-width: 100px;
    max-width: 140px;
  }

  .full-name {
    font-size: 0.8rem;
  }

  .occupation,
  .name-cell .email {
    font-size: 0.65rem;
  }

  .status-cell {
    min-width: 20px;
    max-width: 75px;
    padding: 6px 12px 6px 6px !important;
  }

  .status-badge {
    padding: 1px 1px;
    font-size: 0.35rem;
    gap: 0;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.5px;
  }

  .status-badge.status-archived {
    padding: 4px 6px !important;
    font-size: 0.8rem !important;
    gap: 2px;
    border-radius: 10px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .status-badge svg {
    display: none;
  }

  .actions-cell {
    min-width: 55px;
    padding: 8px 10px 8px 12px !important;
  }

  .action-buttons {
    gap: 2px;
  }

  .action-button {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    padding: 3px;
  }

  .table-loading,
  .no-users {
    padding: 40px 16px;
  }

  .table-summary {
    padding: 12px 16px;
    font-size: 0.8rem;
  }

  .training-levels-details {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    font-size: 0.7rem;
  }

  .training-levels-dropdown.active .training-levels-details {
    transform: translateX(-50%) translateY(0);
  }

  /* Progress row should span all visible columns (Name, Status, Actions = 3 columns) */
  .progress-cell {
    padding: 8px;
  }
}

/* Focus indicators for accessibility */
.action-button:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .president-admin-user-table-table,
.admin-user-table-table {
    border: 2px solid #000;
  }

  .president-admin-user-table-table th,
  .admin-user-table-table th,
  .user-table th {
    border-bottom: 3px solid #000;
  }

  .president-admin-user-table-table tbody tr,
  .admin-user-table-table tbody tr,
  .user-table tbody tr {
    border-bottom: 2px solid #000;
  }

  .role-badge,
  .status-badge,
  .training-level {
    border: 2px solid currentColor;
  }
}

/* Section Titles */
.section-title {
  width: 100%;
  align-self: center;
  justify-self: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #111111;
  margin: 20px 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #cf0a0a;
}

.archived-section-title {
  color: #faa533;
  border-bottom-color: #faa533;
}

/* Archived table specific styles */
.archived-row .training-cell,
.archived-row .exam-cell,
.archived-row .result-cell,
.archived-row .date-cell {
  font-size: 0.9rem;
}

.archived-row .result-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
}

.archived-row .result-badge.pass {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.archived-row .result-badge.completed {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.archived-row .result-badge.no-result {
  background-color: #f8f9fa;
  color: #6c757d;
  border: 1px solid #dee2e6;
}

/* Restore and Permanent Delete buttons */
.restore-button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  margin-right: 0.5rem;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.restore-button:hover:not(:disabled) {
  background-color: #218838;
}

.restore-button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.permanent-delete-button {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.permanent-delete-button:hover:not(:disabled) {
  background-color: #c82333;
}

.permanent-delete-button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

/* Print styles */
@media print {
  .action-buttons {
    display: none;
  }

  .president-admin-user-table-container,
.admin-user-table-container {
    box-shadow: none;
    border: 1px solid #000;
  }

  .president-admin-user-table-table th,
  .admin-user-table-table th,
  .user-table th {
    background-color: #f0f0f0 !important;
    color: #000 !important;
  }

  .section-title {
    color: #000 !important;
    border-bottom-color: #000 !important;
  }
}

/* ===================================
   DARK MODE STYLES
   =================================== */

.theme-dark .president-admin-user-table-container,
.theme-dark .admin-user-table-container {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
  box-shadow: var(--shadow-md);
}

.theme-dark .president-admin-user-table-table thead,
.theme-dark .admin-user-table-table thead,
.theme-dark .user-table thead {
  background-color: var(--accent-primary);
}

.theme-dark .president-admin-user-table-table thead tr,
.theme-dark .admin-user-table-table thead tr,
.theme-dark .user-table thead tr {
  background-color: var(--accent-primary);
}

.theme-dark .president-admin-user-table-table th,
.theme-dark .admin-user-table-table th,
.theme-dark .user-table th {
  background-color: var(--accent-primary);
  color: var(--text-primary);
  border-bottom-color: var(--accent-hover);
}

.theme-dark .president-admin-user-table-table th {
  background-color: #ab0000;
}

.theme-dark .president-admin-user-table-table tbody tr,
.theme-dark .admin-user-table-table tbody tr,
.theme-dark .user-table tbody tr {
  border-bottom-color: var(--border-primary);
}

.theme-dark .president-admin-user-table-table tbody tr:hover,
.theme-dark .admin-user-table-table tbody tr:hover,
.theme-dark .user-table tbody tr:hover {
  background-color: var(--bg-hover);
}

.theme-dark .president-admin-user-table-table tbody tr.archived-row,
.theme-dark .admin-user-table-table tbody tr.archived-row,
.theme-dark .user-table tbody tr.archived-row {
  background-color: rgba(255, 255, 255, 0.03);
  opacity: 0.8;
}

.theme-dark .president-admin-user-table-table tbody tr.archived-row:hover,
.theme-dark .admin-user-table-table tbody tr.archived-row:hover,
.theme-dark .user-table tbody tr.archived-row:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.theme-dark .full-name {
  color: var(--text-primary);
}

.theme-dark .occupation,
.theme-dark .name-cell .email,
.theme-dark .phone {
  color: var(--text-secondary);
}

.theme-dark .role-admin {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.theme-dark .status-badge.status-active {
  background-color: #84994F;
  color: #ffffff;
}

.theme-dark .status-badge.status-inactive {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.theme-dark .training-level-1 {
  background-color: rgba(76, 175, 80, 0.2);
  color: var(--status-success);
  border-color: var(--status-success);
}

.theme-dark .training-level-3 {
  background-color: rgba(255, 193, 7, 0.2);
  color: var(--status-warning);
  border-color: var(--status-warning);
}

.theme-dark .training-level-5 {
  background-color: rgba(23, 162, 184, 0.2);
  color: var(--status-info);
  border-color: var(--status-info);
}

.theme-dark .edit-button {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.theme-dark .edit-button:hover:not(:disabled) {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.theme-dark .archive-button {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.theme-dark .archive-button:hover:not(:disabled) {
  background-color: var(--border-secondary);
}

.theme-dark .unarchive-button {
  background-color: rgba(58, 111, 67, 0.3);
  color: var(--status-success);
}

.theme-dark .unarchive-button:hover:not(:disabled) {
  background-color: rgba(58, 111, 67, 0.5);
}

.theme-dark .progress-button {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.theme-dark .progress-button:hover:not(:disabled) {
  background-color: var(--bg-tertiary);
}

.theme-dark .dropdown-icon {
  filter: brightness(0) invert(1);
  color: var(--text-secondary);
}

.theme-dark .progress-row {
  background-color: rgba(255, 255, 255, 0.03);
}

.theme-dark .table-loading {
  color: var(--text-primary);
  background-color: var(--bg-card);
  box-shadow: var(--shadow-md);
}

.theme-dark .spinner {
  color: var(--accent-primary);
}

.theme-dark .no-users {
  color: var(--text-secondary);
  background-color: var(--bg-card);
  box-shadow: var(--shadow-md);
}

.theme-dark .no-users-hint {
  color: var(--text-tertiary) !important;
}

.theme-dark .table-summary {
  background-color: rgba(255, 255, 255, 0.03);
  border-top-color: var(--border-primary);
}

.theme-dark .user-count {
  color: var(--text-secondary);
}

.theme-dark .training-display:hover {
  background-color: var(--bg-hover);
}

.theme-dark .training-display:hover .dropdown-icon {
  color: var(--accent-primary);
}

.theme-dark .training-levels-details {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
  box-shadow: var(--shadow-lg);
}

.theme-dark .training-level-item {
  border-bottom-color: var(--border-primary);
}

.theme-dark .training-badge {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.theme-dark .training-level.no-training {
  color: var(--text-tertiary);
}

.theme-dark .training-level {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.theme-dark .section-title {
  color: var(--text-primary);
  border-bottom-color: var(--accent-primary);
}

.theme-dark .archived-section-title {
  color: var(--status-warning);
  border-bottom-color: var(--status-warning);
}
@keyframes react-loading-skeleton {
  100% {
    transform: translateX(100%);
  }
}

.react-loading-skeleton {
  --base-color: #ebebeb;
  --highlight-color: #f5f5f5;
  --animation-duration: 1.5s;
  --animation-direction: normal;
  --pseudo-element-display: block; /* Enable animation */

  background-color: var(--base-color);

  width: 100%;
  border-radius: 0.25rem;
  display: inline-flex;
  line-height: 1;

  position: relative;
  user-select: none;
  overflow: hidden;
}

.react-loading-skeleton::after {
  content: ' ';
  display: var(--pseudo-element-display);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-image: var(
    --custom-highlight-background,
    linear-gradient(
      90deg,
      var(--base-color) 0%,
      var(--highlight-color) 50%,
      var(--base-color) 100%
    )
  );
  transform: translateX(-100%);

  animation-name: react-loading-skeleton;
  animation-direction: var(--animation-direction);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion) {
  .react-loading-skeleton {
    --pseudo-element-display: none; /* Disable animation */
  }
}
/* SkeletonLoader.css - Dedicated styles for skeleton loading components */

/* Base skeleton theme wrapper */
.skeleton-wrapper {
  /* Base styles handled by SkeletonTheme component */
}

/* Table row skeleton */
.skeleton-row {
  /* Row styles */
}

.skeleton-row td {
  padding: 12px 16px;
}

/* Card skeleton */
.skeleton-card {
  padding: 20px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  margin-bottom: 16px;
}

.skeleton-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.skeleton-card-avatar {
  margin-right: 12px;
}

.skeleton-card-content {
  flex: 1;
}

.skeleton-card-title {
  margin-bottom: 8px;
}

.skeleton-card-subtitle {
  /* Subtitle styles */
}

.skeleton-card-text {
  margin-bottom: 8px;
}

.skeleton-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* List item skeleton */
.skeleton-list-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #E2E8F0;
}

.skeleton-list-avatar {
  margin-right: 16px;
}

.skeleton-list-content {
  flex: 1;
}

.skeleton-list-title {
  margin-bottom: 8px;
}

.skeleton-list-subtitle {
  margin-bottom: 4px;
}

.skeleton-list-meta {
  /* Meta styles */
}

.skeleton-list-actions {
  display: flex;
  gap: 8px;
}

/* Dashboard stats skeleton */
.skeleton-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.skeleton-stat-card {
  padding: 20px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  text-align: center;
}

.skeleton-stat-title {
  margin-bottom: 12px;
}

.skeleton-stat-value {
  margin-bottom: 8px;
}

.skeleton-stat-subtitle {
  /* Subtitle styles */
}

/* Form skeleton */
.skeleton-form {
  padding: 24px;
}

.skeleton-form-title {
  margin-bottom: 24px;
}

.skeleton-form-field {
  margin-bottom: 20px;
}

.skeleton-form-label {
  margin-bottom: 8px;
}

.skeleton-form-input {
  /* Input styles */
}

.skeleton-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* Table skeleton */
.skeleton-table {
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
}

.skeleton-table-header {
  display: grid;
  background-color: #F7FAFC;
  padding: 16px;
  border-bottom: 1px solid #E2E8F0;
}

.skeleton-table-row {
  display: grid;
  padding: 16px;
}

.skeleton-table-row:not(:last-child) {
  border-bottom: 1px solid #E2E8F0;
}

/* Page skeleton (full page loading) */
.skeleton-page {
  padding: 24px;
}

.skeleton-page-header {
  margin-bottom: 32px;
}

.skeleton-page-title {
  margin-bottom: 12px;
}

.skeleton-page-subtitle {
  /* Subtitle styles */
}

.skeleton-page-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.skeleton-page-main {
  /* Main content area */
}

.skeleton-page-sidebar {
  /* Sidebar area */
}

.skeleton-page-sidebar .skeleton-card {
  margin-bottom: 16px;
}

/* Loading overlay skeleton */
.skeleton-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.skeleton-loading-content {
  background-color: white;
  padding: 32px;
  border-radius: 12px;
  text-align: center;
  min-width: 200px;
}

.skeleton-loading-spinner {
  margin: 0 auto 16px;
}

.skeleton-loading-text {
  margin: 0 auto;
}

.skeleton-loading-message {
  margin-top: 16px;
  color: #6B7280;
  font-size: 14px;
}

/* ===================================
   DARK MODE STYLES
   =================================== */

.theme-dark .skeleton-card {
  border-color: var(--border-primary);
  background-color: var(--bg-card);
}

.theme-dark .skeleton-list-item {
  border-bottom-color: var(--border-primary);
}

.theme-dark .skeleton-stat-card {
  border-color: var(--border-primary);
  background-color: var(--bg-card);
}

.theme-dark .skeleton-table {
  border-color: var(--border-primary);
  background-color: var(--bg-card);
}

.theme-dark .skeleton-table-header {
  background-color: var(--accent-primary);
  border-bottom-color: var(--accent-hover);
}

.theme-dark .skeleton-table-row {
  background-color: var(--bg-card);
}

.theme-dark .skeleton-table-row:not(:last-child) {
  border-bottom-color: var(--border-primary);
}

.theme-dark .skeleton-loading-content {
  background-color: var(--bg-modal);
  color: var(--text-primary);
}

.theme-dark .skeleton-loading-message {
  color: var(--text-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .skeleton-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
  }
  
  .skeleton-page-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .skeleton-card {
    padding: 16px;
  }
  
  .skeleton-list-item {
    padding: 12px;
  }
}
.president-admin-member-management-outer,
.admin-member-management-outer {
  width: 100%;
  background: transparent;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
}

.president-admin-member-management-card,
.admin-member-management-card {
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  border: none;
}

.president-admin-member-management-title,
.admin-member-management-title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 1.5rem;
}

.president-admin-member-management-title h2 {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  color: #222222;
  margin: 0;
}

.refresh-button {
  padding: 8px 12px;
  border-radius: 6px;
  background-color: transparent;
  border: 2px solid #222222;
  border-radius: 6px;
  color: #222222;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Roboto;
  font-weight: 500;
}

.refresh-button:hover:not(:disabled) {
  background-color: #222222;
  color: #f0f8ff;
}

.refresh-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.president-admin-member-management-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.president-admin-member-management-controls-left {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.btn-create-account {
  background: #ab0000;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  background: #222222;
  color: #f0f8ff;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 1rem;
  font-family: Roboto;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-create-account:hover {
  background: #eb4040;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #eb4040;
}

.create-account-btn {
    background-color: #222222;
    color: #f0f8ff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Montserrat", sans-serif;
  }

  .btn-icon {
    font-size: 0.7rem;
  }

  /* Error Message Styles */
  .error-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: #eb4040;
    border: 1px solid #ab0000;
    border-radius: 8px;
    color: #ab0000;
    margin-bottom: 20px;
    font-family: "Montserrat", sans-serif;
  }

  .retry-button {
    padding: 6px 12px;
    background-color: #ab0000;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
  }

  .retry-button:hover {
    background-color: #eb4040;
    transform: translateY(-1px);
  }
}

.search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.search-bar input {
  padding: 8px 12px 8px 32px;
  border: 1px solid #ab0000;
  border-radius: 6px;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  background: #ffffff;
  color: #111111;
  border: 1px solid #222222;
  border-radius: 6px;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  background: transparent;
  color: #222222;
  outline: none;
  transition: all 0.2s ease;
  min-width: 200px;
}

.search-bar input:focus {
  border: 1.5px solid #ab0000;
  box-shadow: 0 0 0 3px #eb4040;
  border: 1.5px solid #222222;
  box-shadow: 0 0 0 3px #222222;
}

.search-icon {
  position: absolute;
  left: 10px;
  color: #585865;
  color: #222222;
  font-size: 0.9rem;
}

.btn-filter {
  background: #ffffff;
  color: #111111;
  border: 1px solid #ab0000;
  background: #222222;
  color: #222222;
  border: 1px solid #222222;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}

.btn-filter:hover {
  background: #f5f7f8;
  transform: translateY(-1px);
}

.member-table {
  width: 100%;
  overflow-x: auto;
}

.table-header {
  display: grid;
  grid-template-columns: 0.8fr 2.5fr 1.2fr 1fr 1fr 0.8fr 1.5fr;
  align-items: center;
  background: #ab0000;
  color: #ffffff;
  font-weight: 600;
  padding: 1rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-family: "Montserrat", sans-serif;
  font-family: "Montserrat", sans-serif;
}

.table-row {
  display: grid;
  grid-template-columns: 0.8fr 2.5fr 1.2fr 1fr 1fr 0.8fr 1.5fr;
  align-items: center;
  background: #ffffff;
  background: #222222;
  border-bottom: 1px solid #585865;
  transition: all 0.2s ease;
  min-height: 64px;
}

.table-row:nth-child(even) {
  background: #FBFCF8;
}

.table-row:hover {
  background: #f5f7f8;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cell {
  padding: 1rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.checkbox-cell {
  justify-content: center;
}

.name-cell {
  gap: 1rem;
  display: flex;
  align-items: center;
  font-family: "Montserrat", sans-serif;
}

.profile-avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.1);
}

.member-name {
  font-size: 1.08rem;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  color: #111111;
}

.warning-icon {
  color: #eb4040;
  margin-left: 0.5rem;
}

.status {
  padding: 0.3rem 0.9rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
}

.status.active {
  background: rgba(40, 167, 69, 0.1);
  color: #5A9690;
  border: 1px solid rgba(40, 167, 69, 0.2);
}

.action-cell {
  gap: 0.5rem;
}

.btn-edit,
.btn-archive {
  border: none;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Montserrat", sans-serif;
}

.btn-edit {
  background: #5A9690;
  color: #ffffff;
}

.btn-edit:hover {
  background: #ab0000;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px #eb4040;
}

.btn-archive {
  background: #585865;
  color: #ffffff;
}

.btn-archive:hover {
  background: #ab0000;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px #eb4040;
}

.btn-delete {
  background: #ab0000;
  color: #ffffff;
}

.btn-delete:hover {
  background: #eb4040;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px #eb4040;
}

.delete-button {
  background: #CF0A0A;
  color:  #F0F8FF;
  border: none;
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  font-family: "Montserrat", sans-serif;
}

.delete-button:disabled {
  background: #585865;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.expanded-info {
  background: #f5f7f8;
  border-left: 4px solid #ab0000;
  padding: 1rem;
  margin: 0;
  border-radius: 0 0 8px 8px;
}

.exam-details {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-item strong {
  font-size: 0.9rem;
  color: #585865;
  font-family: "Montserrat", sans-serif;
}

.detail-item p {
  margin: 0;
  font-weight: 500;
}

.score.failed {
  color: #ab0000;
  font-weight: 700;
}

.expand-icon {
  cursor: pointer;
  margin-left: 0.5rem;
  color: #585865;
  transition: all 0.2s ease;
}

.expand-icon:hover {
  color: #ab0000;
  transform: scale(1.1);
}

/* Responsive Design */

@media (max-width: 768px) {

  .president-admin-member-management-title,
.admin-member-management-title {
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
    text-align: left;
  }

  .president-admin-member-management-title h2 {
    font-size: 1.3rem;
  }

  .president-admin-member-management-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .create-account-btn {
    width: 100%;
    justify-content: center;
  }

  .table-header,
  .table-row {
    grid-template-columns: 1fr;
    padding: 0.5rem;
  }

  .cell {
    padding: 0.5rem;
  }
}

@media (max-width: 480px) {
  .president-admin-member-management-title,
  .admin-member-management-title {
    margin-bottom: 1rem;
  }

  .president-admin-member-management-title h2 {
    font-size: 1.15rem;
  }

  .president-admin-member-management-controls-left {
    flex-direction: column;
    align-items: stretch;
  }

  .search-bar input {
    min-width: auto;
    width: 100%;
  }
}


/* CustomCheckbox.css - Styles for CustomCheckbox component */

/* Default variant - for general use */
.custom-checkbox-default.MuiCheckbox-root {
  color: #000000;
}

.custom-checkbox-default.MuiCheckbox-root.Mui-checked {
  color: #ab0000;
}

.custom-checkbox-default.MuiCheckbox-root.Mui-checked svg {
  color: #ab0000;
}

.custom-checkbox-default.MuiCheckbox-root.Mui-disabled {
  color: #cccccc;
}

/* Quiz list variant - for quiz list headers and items */
.custom-checkbox-quiz-list.MuiCheckbox-root {
  color: #ffffff;
}

.custom-checkbox-quiz-list.MuiCheckbox-root.Mui-checked {
  color: #ffffff;
}

.custom-checkbox-quiz-list.MuiCheckbox-root.Mui-checked svg {
  color: #ffffff;
}

.custom-checkbox-quiz-list.MuiCheckbox-root.Mui-disabled {
  color: #cccccc;
}

/* Quiz item variant - for individual quiz list items */
.custom-checkbox-quiz-item.MuiCheckbox-root {
  color: #000000;
}

.custom-checkbox-quiz-item.MuiCheckbox-root.Mui-checked {
  color: #ab0000;
}

.custom-checkbox-quiz-item.MuiCheckbox-root.Mui-checked svg {
  color: #ab0000;
}

.custom-checkbox-quiz-item.MuiCheckbox-root.Mui-disabled {
  color: #cccccc;
}

/* Dark mode for quiz item variant */
.theme-dark .custom-checkbox-quiz-item.MuiCheckbox-root {
  color: #ffffff;
}

.theme-dark .custom-checkbox-quiz-item.MuiCheckbox-root.Mui-checked {
  color: #ffffff;
}

.theme-dark .custom-checkbox-quiz-item.MuiCheckbox-root.Mui-checked svg {
  color: #ffffff;
}

.theme-dark .custom-checkbox-quiz-item.MuiCheckbox-root.Mui-disabled {
  color: #666666;
}

/* Training level variant - for training level selection */
.custom-checkbox-training-level.MuiCheckbox-root {
  color: #000000;
}

.custom-checkbox-training-level.MuiCheckbox-root.Mui-checked {
  color: #ab0000;
}

.custom-checkbox-training-level.MuiCheckbox-root.Mui-checked svg {
  color: #ab0000;
}

.custom-checkbox-training-level.MuiCheckbox-root.Mui-disabled {
  color: #cccccc;
}

/* Account approval variant - for account approval section with black background */
.custom-checkbox-account-approval.MuiCheckbox-root {
  color: #ffffff;
}

.custom-checkbox-account-approval.MuiCheckbox-root.Mui-checked {
  color: #ffffff;
}

.custom-checkbox-account-approval.MuiCheckbox-root.Mui-checked svg {
  color: #ffffff;
}

.custom-checkbox-account-approval.MuiCheckbox-root.Mui-disabled {
  color: #cccccc;
}

/* Approval member variant - for approval table row checkboxes with #111111 color in light mode */
.custom-checkbox-approval-member.MuiCheckbox-root {
  color: #111111;
}

.custom-checkbox-approval-member.MuiCheckbox-root.Mui-checked {
  color: #111111;
}

.custom-checkbox-approval-member.MuiCheckbox-root.Mui-checked svg {
  color: #111111;
}

.custom-checkbox-approval-member.MuiCheckbox-root.Mui-disabled {
  color: #cccccc;
}

/* Dark mode for approval member variant */
.theme-dark .custom-checkbox-approval-member.MuiCheckbox-root {
  color: var(--text-primary);
}

.theme-dark .custom-checkbox-approval-member.MuiCheckbox-root.Mui-checked {
  color: var(--text-primary);
}

.theme-dark .custom-checkbox-approval-member.MuiCheckbox-root.Mui-checked svg {
  color: var(--text-primary);
}

/* Events list header variant - checkbox box stays white on red header, checkmark uses black (#111111) */
.custom-checkbox-events-list-header.MuiCheckbox-root {
  color: #ffffff;
}

.custom-checkbox-events-list-header.MuiCheckbox-root.Mui-checked {
  color: #ffffff;
}

/* Hide the built-in MUI checkbox glyph and draw our own via the icon wrapper.
   Use the MUI Checkbox icon span to avoid conflicts with SVG fills. */
.custom-checkbox-events-list-header .MuiCheckbox-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-block;
}
.custom-checkbox-events-list-header .MuiCheckbox-icon > svg {
  opacity: 0; /* hide default svg */
}
.custom-checkbox-events-list-header .MuiCheckbox-icon::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 2px solid #ffffff; /* visible on red header */
  background: transparent;
  box-sizing: border-box;
}
.custom-checkbox-events-list-header.Mui-checked .MuiCheckbox-icon::before {
  background: #ffffff; /* white box when checked */
}
.custom-checkbox-events-list-header.Mui-checked .MuiCheckbox-icon::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 10px;
  border: solid #111111; /* black tick */
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox-events-list-header.MuiCheckbox-root.Mui-disabled {
  color: #cccccc;
}

/* Events list item variant - for events list item checkboxes with primary brand color */
.custom-checkbox-events-list-item.MuiCheckbox-root {
  color: var(--primary);
}

.custom-checkbox-events-list-item.MuiCheckbox-root.Mui-checked {
  color: var(--primary);
}

.custom-checkbox-events-list-item.MuiCheckbox-root.Mui-checked svg {
  color: var(--primary);
}

.custom-checkbox-events-list-item.MuiCheckbox-root.Mui-disabled {
  color: #cccccc;
}

/* Role-specific container styles */
.president-admin-account-approval-container,
.admin-account-approval-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  background: #f8f9fa;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  padding: 0 1rem;
}

/* Dark mode for president-admin-account-approval-container */
.theme-dark .president-admin-account-approval-container,
.theme-dark .admin-account-approval-container {
  background: transparent;
}

.president-admin-account-approval-rejection-section,
.admin-account-approval-rejection-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-top: 5px;
  overflow-x: hidden;
}

.approval-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  padding: 0 0.5rem;
}

.approval-title {
  font-size: 2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
  font-family: "Montserrat", sans-serif;
}

.theme-dark .approval-title {
  color: var(--text-primary);
}

.rejection-title {
  font-size: 2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
  font-family: "Montserrat", sans-serif;
}

.theme-dark .rejection-title {
  color: var(--text-primary);
}

.approval-header-title-container {
  display: flex;
  align-items: center;
  justify-content: start;
}

.btn-refresh-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rejection-table-wrapper {
  width: 100%;
  overflow-x: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: -6px 8px 8px rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  margin-bottom: 15px;
  box-sizing: border-box;
  contain: layout style;
}

.theme-dark .rejection-table-wrapper {
  border: 1px solid var(--border-primary);
  box-shadow: -6px 8px 8px rgba(0, 0, 0, 0.3);
}

.approval-table-wrapper {
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-top: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: -6px 8px 8px rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  box-sizing: border-box;
  contain: layout style;
}

.theme-dark .approval-table-wrapper {
  border: 1px solid var(--border-primary);
  box-shadow: -6px 8px 8px rgba(0, 0, 0, 0.3);
}

.rejection-table-header {
  background: #ab0000;
  color: #ffffff;
  font-weight: 600;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
  padding-top: 0;
  padding-bottom: 0;
}

.rejection-table-header .rejection-cell {
  color: #ffffff;
  padding: 1.25rem 0.75rem;
  box-sizing: border-box;
}

.theme-dark .rejection-table-header {
  background: #ab0000;
  color: var(--text-primary);
}

.theme-dark .rejection-table-header .rejection-cell {
  color: var(--text-primary);
}

.rejection-table-header,
.rejection-table-row {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr 1.8fr 0.7fr 1.8fr;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.rejection-table-row {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  transition: background 0.2s;
  min-height: 80px;
}

.theme-dark .rejection-table-row {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.approval-table-header,
.approval-table-row {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr 1.8fr 0.7fr 1.8fr;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.approval-table-header {
  background: #ab0000 !important;
  color: #ffffff;
  font-weight: 600;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
  padding-top: 0;
  padding-bottom: 0;
}

.approval-table-header .approval-cell {
  color: #ffffff;
  padding: 1.25rem 0.75rem;
  box-sizing: border-box;
}

.theme-dark .approval-table-header {
  background: #ab0000 !important;
  color: var(--text-primary);
}

.theme-dark .approval-table-header .approval-cell {
  color: var(--text-primary);
}

.approval-table-header .checkbox-cell {
  justify-content: flex-start;
}

.approval-table-row .checkbox-cell {
  justify-content: flex-start;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.approval-table-row {
  background: #F0F8FF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  transition: background 0.2s;
  min-height: 80px;
}

.theme-dark .approval-table-row {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.approval-table-row.alt {
  background: #f8f9fa;
}

.theme-dark .approval-table-row.alt {
  background: var(--bg-tertiary);
}

.approval-table-row:last-child {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.rejection-cell .rejection-details-cell {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-weight: 200;
  white-space: nowrap;
}

.approval-cell .details-cell {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-weight: 200;
  white-space: nowrap;
}

.approval-cell {
  padding: 1.25rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  font-size: 1.05rem;
  color: #2c3e50;
  min-width: 0;
  box-sizing: border-box;
}

.approval-cell.date-cell {
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.4;
  color: #2c3e50;
  padding-right: 0.5rem;
  justify-content: center;
}

.approval-cell.details-cell {
  color: #2c3e50;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

.theme-dark .approval-cell {
  color: var(--text-primary);
}

.theme-dark .rejection-cell {
  color: var(--text-primary);
}

.rejection-cell .checkbox-cell {
  justify-content: flex-start;
}

.rejection-cell {
  padding: 1.25rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  font-size: 1.05rem;
  color: #2c3e50;
  min-width: 0;
  box-sizing: border-box;
}

.rejection-cell.date-cell {
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.4;
  color: #2c3e50;
  padding-right: 0.5rem;
  justify-content: center;
}

.rejection-cell.details-cell {
  color: #2c3e50;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

.theme-dark .rejection-cell.date-cell {
  color: var(--text-primary);
}

.theme-dark .rejection-cell.details-cell {
  color: var(--text-primary);
}

.rejection-cell .name-cell {
  gap: 1.25rem;
  display: flex;
  align-items: center;
  font-family: "Roboto", sans-serif;
}

.checkbox-cell {
  justify-content: flex-start;
}

.name-cell {
  gap: 1.25rem;
  display: flex;
  align-items: center;
  font-family: "Roboto", sans-serif;
}



.rejection-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: #2c3e50;
  font-family: "Roboto", sans-serif;
}

.approval-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: #2c3e50;
  font-family: "Roboto", sans-serif;
}

.theme-dark .approval-name {
  color: var(--text-primary);
}

.theme-dark .rejection-name {
  color: var(--text-primary);
}
.action-cell {
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
}
.btn-accept,
.btn-reject {
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Roboto", sans-serif;
  min-width: 100px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn-accept {
  background: #167a2e;
  color: #f0f8ff;
}

.btn-accept:disabled {
  background: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

.btn-reject {
  background: #dc3545;
  color: #fff;
  margin-left: 0;
}

.btn-reject:disabled {
  background: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

.btn-accept.processing,
.btn-reject.processing {
  background: #58595a;
  cursor: not-allowed;
}

.btn-undo {
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Roboto", sans-serif;
  min-width: 100px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: #ffc107;
  color: #212529;
}

.btn-undo:disabled {
  background: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

.btn-delete {
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Roboto", sans-serif;
  min-width: 100px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: #dc3545;
  color: #fff;
}

.btn-delete:disabled {
  background: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.status {
  padding: 0.5rem 1.2rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  font-family: "Roboto", sans-serif;
  text-align: center;
  min-width: 80px;
}
.status.accepted {
  background: #d4edda;
  color: #155724;
}
.status.rejected {
  background: #f8d7da;
  color: #721c24;
}

.approval-header {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.approval-header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.rejection-header {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.bulk-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.btn-bulk-accept,
.btn-bulk-reject,
.btn-bulk-undo,
.btn-bulk-delete {
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Roboto", sans-serif;
  min-width: 120px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-bulk-accept {
  background: #167a2e;
  color: #f0f8ff;
}

.btn-bulk-accept:hover:not(:disabled) {
  background: #125e23;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(22, 122, 46, 0.3);
}

.btn-bulk-reject {
  background: #dc3545;
  color: #fff;
}

.btn-bulk-reject:hover:not(:disabled) {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-bulk-undo {
  background: #ffc107;
  color: #212529;
}

.btn-bulk-undo:hover:not(:disabled) {
  background: #e0a800;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.btn-bulk-delete {
  background: #dc3545;
  color: #fff;
}

.btn-bulk-delete:hover:not(:disabled) {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-bulk-accept:disabled,
.btn-bulk-reject:disabled,
.btn-bulk-undo:disabled,
.btn-bulk-delete:disabled {
  background: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

.btn-refresh {
  background: #111111 !important;
  color: #ffffff !important;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  transition: all 0.2s ease;
  font-weight: 600;
}

.btn-refresh:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.error-message,
.success-message {
  padding: 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  font-family: "Roboto";
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.error-message {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.success-message {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.close-message {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: inherit;
  padding: 0;
  margin-left: 1rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.close-message:hover {
  opacity: 1;
}

.no-requests {
  text-align: center;
  padding: 3rem 2rem;
  color: #6c757d;
  font-family: "Montserrat", sans-serif;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 1rem 0;
}

.theme-dark .no-requests {
  background: var(--bg-card);
  color: var(--text-secondary);
}

.no-requests-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.no-requests p {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #495057;
}

.no-requests small {
  font-size: 0.9rem;
  color: #6c757d;
  opacity: 0.8;
}

/* Large desktop screens - ensure proper containment */
@media (min-width: 1400px) {
  .president-admin-account-approval-container,
  .admin-account-approval-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .approval-card {
    max-width: 100%;
    margin: 0 auto;
  }

  .approval-table-wrapper,
  .rejection-table-wrapper {
    max-width: 100%;
    overflow-x: hidden;
  }

  .approval-table-header,
  .approval-table-row {
    width: 100%;
    max-width: 100%;
  }

  .rejection-table-header,
  .rejection-table-row {
    width: 100%;
    max-width: 100%;
  }
}

/* Extra large screens - prevent excessive stretching */
@media (min-width: 1920px) {
  .president-admin-account-approval-container,
  .admin-account-approval-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 3rem;
  }

  .approval-table-header,
  .approval-table-row {
    grid-template-columns: 0.7fr 1.4fr 1.7fr 0.6fr 1.7fr;
    max-width: 100%;
    width: 100%;
  }

  .rejection-table-header,
  .rejection-table-row {
    grid-template-columns: 0.7fr 1.4fr 1.7fr 0.6fr 1.7fr;
    max-width: 100%;
    width: 100%;
  }
}

/* Tablet and smaller desktop sizes */
@media (max-width: 1024px) {
  .approval-card {
    max-width: calc(100vw - 2rem);
    padding: 0 0.5rem;
  }

  .approval-table-wrapper,
  .rejection-table-wrapper {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
  }

  .approval-table-header,
  .approval-table-row {
    grid-template-columns: 0.6fr 1.2fr 1.5fr 0.6fr 1.6fr;
    gap: 0.4rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .rejection-table-header,
  .rejection-table-row {
    grid-template-columns: 0.6fr 1.2fr 1.5fr 0.6fr 1.6fr;
    gap: 0.4rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .approval-cell,
  .rejection-cell {
    padding: 1rem 0.5rem;
    font-size: 0.95rem;
    min-width: 0;
  }

  .approval-cell.details-cell,
  .rejection-cell.details-cell {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .approval-cell.name-cell,
  .rejection-cell.name-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .approval-table-header .approval-cell,
  .rejection-table-header .rejection-cell {
    padding: 1rem 0.5rem;
    font-size: 0.95rem;
    min-width: 0;
    box-sizing: border-box;
  }

  .btn-accept,
  .btn-reject,
  .btn-undo,
  .btn-delete {
    min-width: 90px;
    padding: 0.65rem 1.2rem;
    font-size: 0.9rem;
  }
}

/* Intermediate tablet sizes */
@media (max-width: 900px) and (min-width: 769px) {
  .approval-card {
    max-width: calc(100vw - 1.5rem);
    padding: 0 0.25rem;
  }

  .approval-table-wrapper,
  .rejection-table-wrapper {
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .approval-table-header,
  .approval-table-row {
    grid-template-columns: 0.5fr 1fr 1.3fr 0.5fr 1.4fr;
    gap: 0.3rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .rejection-table-header,
  .rejection-table-row {
    grid-template-columns: 0.5fr 1fr 1.3fr 0.5fr 1.4fr;
    gap: 0.3rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .approval-cell,
  .rejection-cell {
    padding: 0.9rem 0.4rem;
    font-size: 0.9rem;
    min-width: 0;
  }

  .approval-cell.details-cell,
  .rejection-cell.details-cell {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .approval-cell.name-cell,
  .rejection-cell.name-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .approval-table-header .approval-cell,
  .rejection-table-header .rejection-cell {
    padding: 0.9rem 0.4rem;
    font-size: 0.9rem;
    white-space: nowrap;
    min-width: 0;
    box-sizing: border-box;
  }

  .approval-cell.date-cell,
  .rejection-cell.date-cell {
    white-space: normal;
    line-height: 1.3;
  }

  .btn-accept,
  .btn-reject,
  .btn-undo,
  .btn-delete {
    min-width: 80px;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  .approval-header,
  .rejection-header {
    gap: 1rem;
  }

  .approval-title,
  .rejection-title {
    font-size: 1.75rem;
  }
}

@media (max-width: 768px) {
  .approval-card {
    max-width: calc(100vw - 2rem);
    padding: 0;
    overflow-x: hidden;
  }

  .president-admin-account-approval-container,
  .admin-account-approval-container {
    padding: 0 1rem;
    overflow-x: hidden;
  }

  .approval-title {
    font-size: 1.5rem;
    margin-bottom: 0;
  }

  .rejection-title {
    font-size: 1.5rem;
    margin-bottom: 0;
  }

  .approval-header {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
  }

  .approval-header-title-container {
    flex: 1;
    justify-content: flex-start;
    align-items: center;
  }

  .approval-header-actions {
    flex-direction: row;
    flex-shrink: 0;
    gap: 0.5rem;
  }

  .rejection-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .bulk-actions {
    flex-direction: column;
    width: 100%;
  }

  .btn-bulk-accept,
  .btn-bulk-reject,
  .btn-bulk-undo,
  .btn-bulk-delete {
    width: 100%;
    padding: 1rem;
  }

  .btn-refresh {
    width: auto;
    padding: 0 0.875rem;
    border: 1px solid #ffffff;
    white-space: nowrap;
    font-size: 0.7rem !important;
    font-weight: 600;
    font-family: "Montserrat", sans-serif !important;
    line-height: 1.2;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    background: transparent;
    min-height: 0;
  }

  .approval-table-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 1.5rem;
  }

  .rejection-table-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 1.5rem;
    margin-bottom: 0;
  }

  .approval-table-header,
  .approval-table-row {
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 1rem;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
  }

  .approval-table-header {
    display: none; /* Hide header on mobile for card-style layout */
  }

  .approval-table-row {
    background: #F0F8FF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
  }

  .theme-dark .approval-table-row {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
  }

  .rejection-table-header,
  .rejection-table-row {
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 1rem;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
  }

  .rejection-table-header {
    display: none; /* Hide header on mobile for card-style layout */
  }

  .rejection-table-row {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
  }

  .theme-dark .rejection-table-row {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
  }

  .approval-cell {
    padding: 0;
  }

  .rejection-cell {
    padding: 0;
  }

  .checkbox-cell {
    display: none; /* Hide checkboxes on mobile */
  }

  /* Name and email container - left side */
  .approval-cell.name-cell {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.2rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    color: #2c3e50;
  }

  .theme-dark .approval-cell.name-cell {
    color: var(--text-primary);
  }

  .approval-cell.details-cell {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.9rem;
    line-height: 1.4;
    padding-bottom: 0;
    margin-top: -0.25rem;
    color: #2c3e50;
  }

  .theme-dark .approval-cell.details-cell {
    color: var(--text-primary);
  }

  /* Date - right side */
  .approval-cell.date-cell {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    text-align: left;
    padding-left: 1rem;
  }

  /* Action buttons - full width, side by side */
  .approval-cell.action-cell {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: row;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }

  .btn-accept,
  .btn-reject,
  .btn-undo,
  .btn-delete {
    flex: 1;
    margin-left: 0;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    border-radius: 10px;
  }

  /* Rejection cells - same layout */
  .rejection-cell.name-cell {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.2rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    color: #2c3e50;
  }

  .theme-dark .rejection-cell.name-cell {
    color: var(--text-primary);
  }

  .rejection-cell.details-cell {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.9rem;
    line-height: 1.4;
    padding-bottom: 0;
    margin-top: -0.25rem;
    color: #2c3e50;
  }

  .theme-dark .rejection-cell.details-cell {
    color: var(--text-primary);
  }

  .rejection-cell.date-cell {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    text-align: left;
    padding-left: 1rem;
    font-size: 0.85rem;
  }

  .theme-dark .rejection-cell.date-cell {
    color: var(--text-primary);
  }

  .rejection-cell.action-cell {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: row;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }



  .error-message,
  .success-message {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .close-message {
    align-self: flex-end;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .account-approval-container {
    padding: 2rem 1rem;
  }

  .approval-card {
    border-radius: 16px;
  }

  .approval-title {
    font-size: 1.25rem;
    margin-bottom: 0;
  }

  .rejection-title {
    font-size: 1.25rem;
    margin-bottom: 0;
  }

  .approval-header {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
  }

  .approval-header-title-container {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .approval-header-actions {
    flex-direction: row;
    flex-shrink: 0;
    gap: 0.5rem;
  }

  .btn-refresh {
    width: auto;
    padding: 0 0.75rem;
    border: 1px solid #ffffff;
    white-space: nowrap;
    font-size: 0.7rem !important;
    font-weight: 600;
    font-family: "Montserrat", sans-serif !important;
    line-height: 1.2;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    background: transparent;
    min-height: 0;
  }

  .approval-table-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 1.5rem;
  }

  .rejection-table-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 1.5rem;
    margin-bottom: 0;
  }

  .approval-table-row {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .approval-cell.name-cell {
    font-size: 1.1rem;
    padding-bottom: 0.5rem;
  }

  .approval-cell.details-cell {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .approval-cell.date-cell {
    font-size: 0.85rem;
  }

  .btn-accept,
  .btn-reject,
  .btn-undo,
  .btn-delete {
    flex: 1;
    padding: 0.75rem 0.875rem;
    font-size: 0.95rem;
    border-radius: 8px;
  }


}
/* ========================================
   LEARNING MATERIALS - REDESIGNED
   Color Palette: #111111, #ffffff, #ab0000
   ======================================== */

/* Container */
.president-admin-learning-materials-container,
.admin-learning-materials-container,
.member-learning-materials-container,
.learning-materials-container {
  background-color: transparent;
  font-family: "Montserrat", sans-serif;
  color: #111111;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Drag and drop overlay removed - clean UX for folder/file moving only */

/* ========================================
   HEADER
   ======================================== */

.materials-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.header-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 1rem;
}

.header-title-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.materials-title {
  font-size: 34px;
  font-weight: 700;
  color: #111111;
  margin: 0;
  font-family: "Montserrat", sans-serif;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ========================================
   STORAGE INFO (COMPACT - INLINE)
   ======================================== */

.storage-info-compact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
}

.storage-icon-compact {
  font-size: 1rem;
  color: var(--accent-primary, #ab0000);
  flex-shrink: 0;
}

.storage-compact-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.storage-compact-bar {
  width: 80px;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  display: flex;
}

.storage-compact-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
  flex-shrink: 0;
}

.storage-compact-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111111;
  font-family: "Roboto", sans-serif;
  white-space: nowrap;
}

/* ========================================
   STORAGE INFO (FULL - FOR DETAILS)
   ======================================== */

.storage-info {
  background: #ab0000;
  color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  width: 100%;
  max-width: 300px;
  align-self: flex-start;
}

.storage-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
}

.storage-icon {
  color: #ffffff;
}

.storage-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
  display: flex;
}

.storage-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
  flex-shrink: 0;
}

.learning-materials-fill {
  background: #4CAF50;
}

.incident-reports-fill {
  background: #FF9800;
}

.system-files-fill {
  background: #2196F3;
}

.storage-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #ffffff;
  margin-bottom: 8px;
}

.storage-percentage {
  font-weight: 600;
  color: #ffffff;
}

.storage-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 12px;
}

.storage-breakdown-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 8px;
}

.storage-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-wrap: wrap;
}

.storage-tag-label {
  font-weight: 600;
  color: #ffffff;
  min-width: 90px;
  font-size: 11px;
}

.storage-tag-value {
  color: #ffffff;
  font-weight: 600;
  margin-left: auto;
  font-size: 11px;
}

.storage-tag-percentage {
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
}

.learning-materials-tag {
  border-left: 3px solid #4CAF50;
}

.incident-reports-tag {
  border-left: 3px solid #FF9800;
}

.system-files-tag {
  border-left: 3px solid #2196F3;
}

/* ========================================
   CONTROLS AND BREADCRUMB CONTAINER
   ======================================== */

.materials-controls-breadcrumb-container {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  margin-bottom: 1rem;
}

/* ========================================
   BREADCRUMB
   ======================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 0;
  padding: 12px 16px;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
}

.breadcrumb-item {
  background: none;
  border: none;
  color: #666666;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

@media (max-width: 640px) {
  .breadcrumb-item {
    max-width: 140px;
  }
}

.breadcrumb-path .breadcrumb-item {
  font-size: 18px;
  gap: 10px;
  padding: 10px 18px;
  font-weight: 500;
}

.breadcrumb-item:hover:not(.active) {
  background: #f5f5f5;
  color: #111111;
}

.breadcrumb-item.root {
  color: var(--accent-primary, #ab0000);
  font-weight: 600;
}

.breadcrumb-item.active {
  background: transparent;
  color: var(--accent-primary, #ab0000);
  font-weight: 600;
  cursor: default;
  pointer-events: none;
}

.breadcrumb-folder-icon {
  font-size: 11px;
}

.breadcrumb-path .breadcrumb-item svg,
.breadcrumb-path .breadcrumb-folder-icon {
  font-size: 18px;
}

.breadcrumb-separator {
  color: #111111;
  font-size: 11px;
  margin: 0 4px;
  flex-shrink: 0;
}

.breadcrumb-path .breadcrumb-separator {
  font-size: 18px;
  margin: 0 10px;
  flex-shrink: 0;
}

.breadcrumb-ellipsis {
  color: #666666;
  font-size: 18px;
  font-weight: 500;
  padding: 0 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.breadcrumb-path {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
}

.breadcrumb-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.breadcrumb-actions .create-folder-modal-btn,
.breadcrumb-actions .upload-material-modal-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  box-shadow: none;
}

.breadcrumb-actions .create-folder-modal-btn:hover,
.breadcrumb-actions .upload-material-modal-btn:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ========================================
   CONTROLS
   ======================================== */

.materials-controls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
  gap: 16px;
  flex-wrap: nowrap;
  background: #ffffff;
  padding: 0.5rem;
  border-radius: 18px;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.05);
}

.materials-controls .controls-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.materials-controls .controls-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.controls-right-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  overflow: hidden;
}

/* Search Box */
.materials-controls .search-container,
.materials-controls .search-box {
  position: relative;
  min-width: 200px;
  max-width: 280px;
  flex: 1;
}

.materials-controls .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #111111;
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}

.materials-controls .search-input {
  width: 100%;
  height: auto;
  padding: 10px 12px 10px 38px;
  border: 1px solid #e0e0e0;
  border-radius: 18px;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  background: #F0F8FF;
  color: #111111;
  transition: all 0.2s ease;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.materials-controls .search-input:focus {
  outline: none;
  border-color: #111111;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

.materials-controls .search-input::placeholder {
  color: #999999;
}

/* Select Controls */
.materials-controls .category-select,
.materials-controls .type-select {
  padding: 10px 14px 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  background: #ffffff;
  color: #111111;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 130px;
  max-width: 160px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23111111' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-right: 32px;
}

.materials-controls .category-select:focus,
.materials-controls .type-select:focus {
  outline: none;
  border-color: #ab0000;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

.materials-controls .category-select:hover,
.materials-controls .type-select:hover {
  background-color: #f8f8f8;
  border-color: #ab0000;
}

/* Favorites Button */
.materials-controls .favorites-btn {
  padding: 10px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #ffffff;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
}

/* Sort Controls */
.materials-controls .sort-controls {
  display: flex;
  gap: 8px;
}

.materials-controls .sort-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: #F0F8FF;
  color: #111111;
  border: 2px solid #cccccc;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
}

.materials-controls .sort-btn.active {
  background: #ab0000;
  border: none;
  color: #ffffff;
}

/* Sort Order Select */
.materials-controls .sort-order-select {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: #ffffff;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  min-width: 120px;
}

.materials-controls .sort-order-select:focus {
  outline: none;
  border-color: #ab0000;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

.materials-controls .sort-order-select:hover {
  background: #f5f5f5;
  color: #111111;
}

/* Sort Select Dropdown */
.materials-controls .sort-select {
  padding: 10px 14px 10px 12px;
  border: 1px solid #e0e0e0;
  border-style: solid;
  border-radius: 6px;
  background: #ffffff;
  color: #111111;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  min-width: 200px;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23111111' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-right: 32px;
}

.materials-controls .sort-select:focus {
  outline: none;
  border: 1px solid #ab0000;
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

.materials-controls .sort-select:hover {
  background-color: #f8f8f8;
  border: 1px solid #ab0000;
  border-style: solid;
}

.controls-right .sort-select {
  padding: 10px 14px 10px 12px;
  border: 1px solid #e0e0e0;
  border-style: solid;
  border-radius: 6px;
  background: #ffffff;
  color: #111111;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  min-width: 200px;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23111111' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-right: 32px;
}

.controls-right .sort-select:focus {
  outline: none;
  border: 1px solid #ab0000;
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

.controls-right .sort-select:hover {
  background-color: #f8f8f8;
  border: 1px solid #ab0000;
  border-style: solid;
}

.sort-order-btn {
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  background: #ffffff;
  color: #111111;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sort-order-btn:hover {
  background: #f5f5f5;
}

.sort-order-btn:focus {
  outline: none;
  border-color: #ab0000;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

/* View Controls */
.view-controls,
.view-toggle {
  display: flex;
  border: 1px solid #111111;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

.controls-right .view-toggle {
  margin-right: 0;
}

.view-btn {
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
  border-right: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  min-width: 40px;
}

.view-btn:last-child {
  border-right: none;
}

.view-btn:hover {
  background: #f5f5f5;
  color: #111111;
}

.view-btn.active {
  background: #111111;
  color: #ffffff;
}

/* ========================================
   BUTTONS
   ======================================== */

.create-folder-modal-btn,
.upload-material-modal-btn,
.president-admin-learning-materials-btn-primary,
.admin-learning-materials-btn-primary {
  font-family: "Montserrat", sans-serif;
  background: #111111;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.create-folder-modal-btn:hover,
.upload-material-modal-btn:hover,
.president-admin-learning-materials-btn-primary:hover {
  background: #000000;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.create-folder-modal-btn:disabled,
.upload-material-modal-btn:disabled,
.president-admin-learning-materials-btn-primary:disabled {
  background: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.president-admin-learning-materials-btn-secondary,
.btn-secondary {
  font-family: "Montserrat", sans-serif;
  background: #111111;
  color: #ffffff;
  border: 1px solid #111111;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.president-admin-learning-materials-btn-secondary:hover,
.btn-secondary:hover {
  background: #000000;
  border-color: #000000;
}

.btn-danger {
  background: #ab0000;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
}

.btn-danger:hover:not(:disabled) {
  background: #8b0000;
  transform: translateY(-1px);
}

.btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   MATERIALS CONTENT
   ======================================== */

.president-admin-learning-materials-content,
.admin-learning-materials-content,
.member-learning-materials-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 400px;
}

/* Loading State */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #666666;
  width: 100%;
}

.spinner {
  font-size: 32px;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
  color: #ab0000;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 80px 20px;
  color: #666666;
  width: 100%;
}

.empty-icon {
  font-size: 64px;
  color: #cccccc;
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 20px;
  font-weight: 600;
  color: #111111;
  margin: 0 0 8px 0;
}

.empty-state p {
  font-size: 15px;
  margin: 0 0 24px 0;
  color: #666666;
}

/* ========================================
   GRID VIEW
   ======================================== */

/* Mobile-first Grid View: 2-4 cards per row on mobile, never single column */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
  width: 100%;
  align-items: start;
}

/* Small mobile optimization */
@media (min-width: 480px) {
  .materials-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
  }
}

/* Tablet: 3 cards per row */
@media (min-width: 768px) {
  .materials-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
  }
}

/* Desktop: 4-6 cards per row */
@media (min-width: 1024px) {
  .materials-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }
}

/* Large desktop: Optimal multi-column */
@media (min-width: 1440px) {
  .materials-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
  }
}

.material-card {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.5);
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  user-select: none;
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  height: 100%;
  min-height: 160px;
  box-sizing: border-box;
}

/* Increase card size for larger screens */
@media (min-width: 480px) {
  .material-card {
    min-height: 180px;
    border-radius: 7px;
  }
}

@media (min-width: 768px) {
  .material-card {
    min-height: 200px;
    border-radius: 8px;
  }
}

@media (min-width: 1024px) {
  .material-card {
    min-height: 220px;
  }
}

.material-card:hover {
  border-color: #cccccc;
}

.material-card.folder {
  border-top: 4px solid #ab0000;
}

.material-card.file {
  border-top: 4px solid #111111;
}

.material-card.link-material {
  background: #ffffff;
  border-top: 4px solid #007bff;
}

.material-card.link-material:hover {
  background: #f8f9fa;
  border-color: #0056b3;
}

.material-list-item.link-material {
  background: #ffffff;
  border-top: 4px solid #007bff;
}

.material-list-item.link-material:hover {
  background: #f8f9fa;
  border-color: #0056b3;
}

.material-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 10px 6px 10px;
}

@media (min-width: 480px) {
  .material-header {
    padding: 10px 12px 8px 12px;
  }
}

@media (min-width: 768px) {
  .material-header {
    padding: 12px 16px 10px 16px;
  }
}

@media (min-width: 1024px) {
  .material-header {
    padding: 14px 18px 11px 18px;
  }
}

@media (min-width: 1280px) {
  .material-header {
    padding: 16px 20px 12px 20px;
  }
}

.material-icon {
  font-size: 24px;
  margin-right: 8px;
}

@media (min-width: 480px) {
  .material-icon {
    font-size: 26px;
    margin-right: 9px;
  }
}

@media (min-width: 768px) {
  .material-icon {
    font-size: 28px;
    margin-right: 10px;
  }
}

@media (min-width: 1024px) {
  .material-icon {
    font-size: 30px;
    margin-right: 11px;
  }
}

@media (min-width: 1280px) {
  .material-icon {
    font-size: 32px;
    margin-right: 12px;
  }
}

.material-icon .file-icon.folder {
  color: #ab0000;
}

.material-icon .file-icon.pdf {
  color: #ab0000;
}

.material-icon .file-icon.video {
  color: #3b82f6;
}

.material-icon .file-icon.image {
  color: #10b981;
}

.material-icon .file-icon.word {
  color: #2563eb;
}

.material-icon .file-icon.excel {
  color: #16a34a;
}

.material-icon .file-icon.powerpoint {
  color: #ea580c;
}

.material-icon .file-icon.text {
  color: #6366f1;
}

.material-icon .file-icon.archive {
  color: #7c3aed;
}

.material-icon .file-icon.default {
  color: #666666;
}

.material-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.favorite-btn {
  background: none;
  border: none;
  color: #cccccc;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 16px;
}

.action-dropdown {
  position: relative;
}

.action-btn {
  background: none;
  border: none;
  color: #999999;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 16px;
  font-weight: bold;
}

.action-btn:hover {
  background: #f5f5f5;
  color: #111111;
}

.action-btn.active {
  background: #f5f5f5;
  color: #111111;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
}

.action-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu button {
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #111111;
  font-family: "Montserrat", sans-serif;
}

.dropdown-menu button:hover {
  background: #f5f5f5;
}

.dropdown-menu button.delete-action {
  color: #ab0000;
}

.dropdown-menu button.delete-action:hover {
  background: #fff5f5;
}

/* Dark Mode Styles for Dropdown Menu */
.theme-dark .dropdown-menu {
  background: var(--bg-card, #1f1f1f) !important;
  border: 1px solid var(--border-primary, #333333) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .dropdown-menu button {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .dropdown-menu button:hover {
  background: var(--bg-hover, #2a2a2a) !important;
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .dropdown-menu button.delete-action {
  color: #ab0000 !important;
}

.theme-dark .dropdown-menu button.delete-action:hover {
  background: rgba(171, 0, 0, 0.2) !important;
  color: #eb4040 !important;
}

.theme-dark .action-btn {
  color: var(--text-secondary, #9ca3af) !important;
}

.theme-dark .action-btn:hover {
  background: var(--bg-hover, #2a2a2a) !important;
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .action-btn.active {
  background: var(--bg-hover, #2a2a2a) !important;
  color: var(--text-primary, #ffffff) !important;
}

.material-content {
  padding: 0 10px 10px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Responsive grid card content */
@media (min-width: 480px) {
  .material-content {
    padding: 0 12px 12px 12px;
  }
}

@media (min-width: 768px) {
  .material-content {
    padding: 0 16px 14px 16px;
  }
}

@media (min-width: 1024px) {
  .material-content {
    padding: 0 18px 16px 18px;
  }
}

@media (min-width: 1280px) {
  .material-content {
    padding: 0 20px 16px 20px;
  }
}

.material-title {
  font-size: 14px;
  font-weight: 600;
  color: #111111;
  margin: 0 0 6px 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (min-width: 768px) {
  .material-title {
    font-size: 15px;
    margin: 0 0 7px 0;
  }
}

@media (min-width: 1024px) {
  .material-title {
    font-size: 16px;
    margin: 0 0 8px 0;
  }
}

.material-description {
  font-size: 13px;
  color: #666666;
  line-height: 1.5;
  margin: 0 0 10px 0;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .material-description {
    font-size: 13px;
    margin: 0 0 12px 0;
  }
}

@media (min-width: 1024px) {
  .material-description {
    font-size: 14px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

.material-file-link {
  margin-bottom: 8px;
  overflow: hidden;
}

.material-file-link a {
  font-size: 13px;
  color: #555;
  text-decoration: none;
  transition: text-decoration 0.2s ease;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

.material-file-link a:hover {
  text-decoration: underline;
}

.material-file-link span {
  font-size: 13px;
  color: #555;
}

.material-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #999999;
  margin-bottom: 8px;
  margin-top: auto;
}

.material-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.material-category {
  display: inline-block;
  background: #f5f5f5;
  color: #111111;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
   LIST VIEW
   ======================================== */

/* List View: Full-width rows, horizontal layout, uniform heights */
.materials-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .materials-list {
    gap: 10px;
  }
}

@media (min-width: 1024px) {
  .materials-list {
    gap: 12px;
  }
}

.material-list-item {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.5);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
}

@media (min-width: 480px) {
  .material-list-item {
    min-height: 70px;
    padding: 11px 13px;
    border-radius: 7px;
  }
}

/* Tablet: More spacing and larger text */
@media (min-width: 768px) {
  .materials-list {
    gap: 12px;
  }
  
  .material-list-item {
    padding: 14px 18px;
    gap: 14px;
    min-height: 80px;
  }
  
  .list-icon {
    font-size: 28px;
  }
  
  .list-title {
    font-size: 15px;
  }
  
  .list-meta {
    font-size: 13px;
  }
}

/* Desktop: Full detail, optimal spacing */
@media (min-width: 1024px) {
  .material-list-item {
    padding: 16px 20px;
    gap: 16px;
    min-height: 88px;
  }
  
  .list-icon {
    font-size: 32px;
  }
  
  .list-title {
    font-size: 16px;
  }
  
  .list-meta {
    font-size: 13px;
    gap: 16px;
  }
}

.material-list-item.folder {
  border-top: 4px solid #ab0000;
}

.material-list-item.file {
  border-top: 4px solid #111111;
}

/* Mobile-first list element styles */
.list-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.list-title {
  font-size: 14px;
  font-weight: 600;
  color: #111111;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #999999;
  line-height: 1.3;
}

.list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.list-actions button {
  background: none;
  border: none;
  color: #999999;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 14px;
}

.list-actions button:hover {
  background: #f5f5f5;
  color: #111111;
}

.list-actions button.delete-action:hover {
  color: #ab0000;
  background: #fff5f5;
}

/* ========================================
   MODALS
   ======================================== */

.modal-overlay,
.president-admin-learning-materials-modal-overlay,
.admin-learning-materials-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  padding: 0;
  margin: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.upload-president-admin-learning-materials-modal,
.edit-president-admin-learning-materials-modal,
.create-folder-president-admin-learning-materials-modal {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 650px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid rgba(17, 17, 17, 0.1);
  box-sizing: border-box;
}

.president-admin-learning-materials-modal,
.admin-learning-materials-modal {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.president-admin-learning-materials-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  background: transparent;
  flex-shrink: 0;
}

.president-admin-learning-materials-modal-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #111111;
  font-family: "Montserrat", sans-serif;
  letter-spacing: -0.5px;
}

.president-admin-learning-materials-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #111111;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.president-admin-learning-materials-modal-form {
  padding: 20px 28px 28px 28px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-sizing: border-box;
  min-height: 0;
  gap: 0;
}

.modal-content {
  padding: 16px;
}

.president-admin-learning-materials-form-group-input {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 2px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-family: "Roboto", sans-serif !important;
  transition: all 0.2s ease !important;
  background: #ffffff !important;
  color: #111111 !important;
  box-sizing: border-box !important;
}

.president-admin-learning-materials-form-group-input:focus {
  outline: none !important;
  border-color: #ab0000 !important;
  box-shadow: 0 0 0 4px rgba(171, 0, 0, 0.15) !important;
  background: #ffffff !important;
}

.president-admin-learning-materials-form-group-input::placeholder {
  color: #9ca3af !important;
  font-style: italic !important;
}

.president-admin-learning-materials-form-group {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  overflow: visible;
  margin-bottom: 10px;
}

.president-admin-learning-materials-form-group:last-of-type {
  margin-bottom: 20px;
}

.president-admin-learning-materials-form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #111111;
  margin-bottom: 8px;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.3px;
}

/* Only apply to inputs/selects/textarea that don't have the dedicated input class */
.president-admin-learning-materials-form-group input:not(.president-admin-learning-materials-form-group-input),
.president-admin-learning-materials-form-group select:not(.president-admin-learning-materials-form-group-input),
.president-admin-learning-materials-form-group textarea:not(.president-admin-learning-materials-form-group-input) {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  font-size: 15px;
  font-family: "Roboto", sans-serif;
  transition: all 0.2s ease;
  background: #ffffff;
  color: #111111;
  box-sizing: border-box;
}

/* Only apply to inputs/selects/textarea that don't have the dedicated input class */
.president-admin-learning-materials-form-group input:not(.president-admin-learning-materials-form-group-input):focus,
.president-admin-learning-materials-form-group select:not(.president-admin-learning-materials-form-group-input):focus,
.president-admin-learning-materials-form-group textarea:not(.president-admin-learning-materials-form-group-input):focus {
  outline: none;
  border-color: #ab0000;
  box-shadow: 0 0 0 4px rgba(171, 0, 0, 0.15);
  background: #ffffff;
}

/* Only apply to inputs/selects/textarea that don't have the dedicated input class */
.president-admin-learning-materials-form-group input:not(.president-admin-learning-materials-form-group-input)::placeholder,
.president-admin-learning-materials-form-group textarea:not(.president-admin-learning-materials-form-group-input)::placeholder {
  color: #9ca3af;
  font-style: italic;
}

textarea.president-admin-learning-materials-form-group-input {
  min-height: 80px;
  resize: vertical;
  line-height: 1.6;
}

/* Generic textarea styling for textareas without the dedicated class */
.president-admin-learning-materials-form-group textarea:not(.president-admin-learning-materials-form-group-input) {
  min-height: 80px;
  resize: vertical;
  line-height: 1.6;
}

.form-help {
  display: block;
  font-size: 12px;
  color: #666666;
  margin-top: 6px;
  font-style: italic;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Permissions Checkboxes */
.permissions-checkboxes {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}

.permission-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #111111;
  font-weight: 500;
}

.permission-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #ab0000;
}

.permission-checkbox:hover {
  color: #ab0000;
}

.permission-checkbox span {
  user-select: none;
}

/* Access Levels Section */
.section-heading {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 14px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 5px;
  margin-top: 0;
  letter-spacing: 0.3px;
  font-family: "Montserrat", sans-serif;
}

.section-icon {
  color: #ab0000;
  font-size: 18px;
}

.training-levels-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  background: transparent;
  border: none;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

.training-level-checkbox {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #111111;
  font-weight: 500;
  padding: 8px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  transition: all 0.2s ease;
  position: relative;
  font-family: "Roboto", sans-serif;
  user-select: none;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  max-width: 100%;
}

.checkbox-label {
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
}

.training-level-checkbox:hover {
  border-color: #ab0000;
  background: #F0F8FF;
  box-shadow: 0 2px 8px rgba(171, 0, 0, 0.1);
}

.training-level-checkbox:has(input:checked) {
  background: #F0F8FF;
  border-color: #ab0000;
  color: #ab0000;
  font-weight: 600;
}

.training-level-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  height: 16px;
  width: 16px;
  background-color: #ffffff;
  border: 2px solid #d1d5db;
  border-radius: 3px;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.training-level-checkbox:hover .checkmark {
  border-color: #ab0000;
}

.training-level-checkbox:has(input:checked) .checkmark {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ab0000;
  border-color: #ab0000;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.training-level-checkbox:has(input:checked) .checkmark:after {
  display: block;
}

/* File Upload */
.file-upload-area {
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin-top: 8px;
  overflow: visible;
}

.file-upload-area:hover {
  border-color: #ab0000;
  background: #fff5f5;
}

.file-input {
  display: none;
}

.file-upload-display {
  padding: 0;
}

.file-placeholder {
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.file-placeholder:hover {
  background: #fff5f5;
}

.upload-icon {
  font-size: 36px;
  color: #cccccc;
  margin-bottom: 10px;
}

.file-placeholder p {
  font-size: 14px;
  color: #111111;
  margin: 0 0 6px 0;
  font-weight: 500;
}

.file-placeholder small {
  font-size: 11px;
  color: #999999;
  display: block;
  margin-top: 2px;
}

.file-selected {
  padding: 16px 20px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-name {
  font-weight: 500;
  color: #111111;
  font-size: 14px;
}

.file-size {
  font-size: 12px;
  color: #666666;
}

.size-error {
  color: #ab0000;
  font-weight: 500;
}

.file-selected .file-icon {
  color: #ab0000;
  font-size: 20px;
}

.remove-file {
  background: none;
  border: none;
  color: #999999;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 18px;
}

.remove-file:hover {
  background: #f5f5f5;
  color: #ab0000;
}

/* Delete Modal */
.delete-modal {
  max-width: 520px;
  background: #f0f8ff;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.delete-warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 28px 32px;
}

.warning-icon {
  color: #ab0000;
  font-size: 56px;
  flex-shrink: 0;
}

.warning-text h3 {
  margin: 0 0 16px 0;
  color: #111111;
  font-size: 22px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  letter-spacing: -0.5px;
}

.warning-text p {
  margin: 0 0 12px 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.7;
  font-family: "Roboto", sans-serif;
}

.item-name {
  font-weight: 700;
  color: #ab0000;
  margin: 12px 0;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  padding: 8px 16px;
  background: #fff5f5;
  border-radius: 6px;
  display: inline-block;
}

.cascade-warning {
  background: #fff5f5;
  border: 1px solid #ffcccc;
  border-radius: 6px;
  padding: 12px;
  margin: 12px 0;
  color: #ab0000;
  font-size: 13px;
}

.cascade-warning strong {
  color: #ab0000;
  font-weight: 600;
}

.permanent-warning {
  color: #6b7280;
  font-style: italic;
  margin: 16px 0 0 0;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}

/* Upload Progress */
.upload-progress {
  margin-top: 16px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #ab0000;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.upload-progress span {
  font-size: 14px;
  font-weight: 600;
  color: #111111;
  min-width: 40px;
}

.president-admin-learning-materials-modal-actions {
  display: flex;
  width: 100%;
  gap: 12px;
  justify-content: stretch;
  background: transparent;
  flex-shrink: 0;
  box-sizing: border-box;
}

.president-admin-learning-materials-modal-actions button {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary {
  background: #ab0000;
  color: #ffffff;
  border: 1px solid #ab0000;
}

.president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary:hover:not(:disabled) {
  background: #8b0000;
  border-color: #8b0000;
}

.president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary:disabled {
  background: #cccccc;
  border-color: #cccccc;
  cursor: not-allowed;
}

/* ========================================
   PAGINATION
   ======================================== */

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding: 20px 24px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  gap: 16px;
  flex-wrap: wrap;
}

.pagination-info {
  font-size: 14px;
  color: #666666;
}

.pagination-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pagination-btn {
  padding: 8px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #ffffff;
  color: #111111;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
}

.pagination-btn:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: #cccccc;
}

.pagination-btn.active {
  background: #ab0000;
  border-color: #ab0000;
  color: #ffffff;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-size {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-size label {
  font-size: 14px;
  color: #666666;
  font-weight: 500;
}

.pagination-size select {
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 13px;
  font-family: "Montserrat", sans-serif;
  background: #ffffff;
  color: #111111;
  cursor: pointer;
}

.pagination-size select:focus {
  outline: none;
  border-color: #ab0000;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

/* ========================================
   BULK ACTIONS TOOLBAR
   ======================================== */

/* Flexbox overlay centering approach - no transforms or calc needed */
.bulk-actions-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  z-index: 9999;
  box-sizing: border-box;
}

.bulk-actions-toolbar > * {
  pointer-events: auto;
}

.bulk-actions-content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 100px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  gap: 6px;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Desktop: More spacious */
@media (min-width: 1024px) {
  .bulk-actions-content {
    padding: 12px 18px;
    gap: 16px;
  }
}

/* Ultra-small screens: ensure everything fits inside and can wrap */
@media (max-width: 480px) {
  .bulk-actions-content {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 8px 10px;
    border-radius: 14px;
  }

  .bulk-actions-left,
  .bulk-actions-right {
    width: 100%;
  }

  .bulk-actions-left {
    justify-content: space-between;
    order: 1;
    margin-bottom: 4px;
  }

  .bulk-actions-right {
    gap: 4px;
    order: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Swap labels/icons on small screens */
  .btn-label-long {
    display: none;
  }
  .btn-label-short {
    display: inline;
  }
  .btn-icon-only {
    display: inline;
    font-size: 16px;
  }

  /* For the bulk download button, use icon-only on very small screens */
  .bulk-action-btn.download-btn .download-icon-full {
    display: none;
  }
  .bulk-action-btn.download-btn .btn-label-short,
  .bulk-action-btn.download-btn .btn-label-long {
    display: none !important;
  }

  .select-all-btn,
  .bulk-action-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    font-size: 10px;
    height: 30px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .selected-count {
    font-size: 12px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Extra compaction for the three main actions */
  .select-all-btn,
  .bulk-action-btn.move-btn,
  .bulk-action-btn.delete-btn {
    padding: 6px 8px;
    font-size: 7px;
    letter-spacing: -0.1px;
  }

  /* Slightly tighten icon/text spacing */
  .bulk-action-btn {
    gap: 3px;
  }

  /* Ensure icons scale down appropriately */
  .bulk-action-btn svg {
    font-size: 14px;
    flex-shrink: 0;
  }

  /* Keep cancel visually lighter but same sizing */
  .bulk-action-btn.cancel-btn {
    height: 30px;
    line-height: 1.2;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Extremely narrow widths */
@media (max-width: 360px) {
  .select-all-btn,
  .bulk-action-btn {
    padding: 5px 6px;
    font-size: 9px;
    height: 28px;
  }

  .bulk-action-btn svg {
    font-size: 12px;
  }

  .select-all-btn,
  .bulk-action-btn.move-btn,
  .bulk-action-btn.delete-btn {
    padding: 5px 6px;
    font-size: 3px;
    letter-spacing: -0.2px;
  }
}

/* Slightly wider phones/very narrow windows */
@media (max-width: 640px) {
  .btn-label-long { display: none !important; }
  .btn-label-short { display: inline !important; }
  .btn-icon-only { display: inline !important; font-size: 16px; }
  .bulk-action-btn.cancel-btn { text-decoration: none; }

  /* Reinforce icon-only behavior for bulk download on narrow phones */
  .bulk-action-btn.download-btn .download-icon-full {
	display: none;
  }
  .bulk-action-btn.download-btn .btn-label-short,
  .bulk-action-btn.download-btn .btn-label-long {
	display: none !important;
  }
}

.bulk-actions-left {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
}

@media (min-width: 768px) {
  .bulk-actions-left {
    gap: 8px;
  }
}

@media (min-width: 1024px) {
  .bulk-actions-left {
    gap: 12px;
  }
}

.select-all-btn {
  background: transparent;
  border: 1px solid #111111;
  color: #111111;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 11px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

@media (min-width: 480px) {
  .select-all-btn {
    padding: 7px 10px;
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .select-all-btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}

@media (min-width: 1024px) {
  .select-all-btn {
    padding: 8px 16px;
    font-size: 14px;
    flex-shrink: 0;
  }
}

.select-all-btn:hover {
  background: #111111;
  color: #ffffff;
}

.selected-count {
  font-size: 11px;
  font-weight: 600;
  color: #111111;
  font-family: "Montserrat", sans-serif;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

@media (min-width: 480px) {
  .selected-count {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .selected-count {
    font-size: 13px;
  }
}

@media (min-width: 1024px) {
  .selected-count {
    font-size: 14px;
  }
}

.bulk-actions-right {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
}

@media (min-width: 768px) {
  .bulk-actions-right {
    gap: 6px;
  }
}

@media (min-width: 1024px) {
  .bulk-actions-right {
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
  }
}

.bulk-action-btn {
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Montserrat", sans-serif;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

@media (min-width: 480px) {
  .bulk-action-btn {
    padding: 7px 10px;
    font-size: 12px;
    gap: 5px;
  }
}

@media (min-width: 768px) {
  .bulk-action-btn {
    padding: 9px 14px;
    font-size: 13px;
    gap: 6px;
  }
}

@media (min-width: 1024px) {
  .bulk-action-btn {
    padding: 10px 20px;
    font-size: 14px;
    gap: 8px;
    flex-shrink: 0;
  }
}

.bulk-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bulk-action-btn.move-btn {
  background: #111111;
  color: #ffffff;
}

.bulk-action-btn.move-btn:hover:not(:disabled) {
  background: #000000;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.bulk-action-btn.download-btn {
  background: #f5f5f5;
  color: #111111;
  border: 1px solid #111111;
}

.bulk-action-btn.download-btn:hover:not(:disabled) {
  background: #e5e5e5;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.bulk-action-btn.delete-btn {
  background: #ab0000;
  color: #ffffff;
}

.bulk-action-btn.delete-btn:hover:not(:disabled) {
  background: #8b0000;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.bulk-action-btn.cancel-btn {
  background: transparent;
  color: #111111;
  border: none;
  padding: 6px 4px;
  font-weight: 500;
  text-decoration: underline;
}

/* Label swapping utilities (default: show long label on larger screens) */
.btn-label-long {
  display: inline;
}
.btn-label-short {
  display: none;
}
.btn-icon-only {
  display: none;
}

@media (min-width: 480px) {
  .bulk-action-btn.cancel-btn {
    padding: 7px 6px;
  }
}

@media (min-width: 768px) {
  .bulk-action-btn.cancel-btn {
    padding: 9px 8px;
  }
}

@media (min-width: 1024px) {
  .bulk-action-btn.cancel-btn {
    padding: 10px 0;
  }
}

/* ========================================
   GOOGLE DRIVE-STYLE SELECTION
   ======================================== */

/* Checkbox for selected items */
.material-checkbox {
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.material-checkbox.checked {
  background: var(--accent-primary, #ab0000);
  border-color: var(--accent-primary, #ab0000);
}

.material-checkbox:hover {
  border-color: var(--accent-primary, #ab0000);
}

.list-checkbox {
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.list-checkbox.checked {
  background: var(--accent-primary, #ab0000);
  border-color: var(--accent-primary, #ab0000);
}

.list-checkbox:hover {
  border-color: var(--accent-primary, #ab0000);
}

/* Selected state styling removed - checkbox indicates selection instead */

/* Hover state for better UX */
.material-card:hover:not(.selected),
.material-list-item:hover:not(.selected) {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.material-card:hover.selected,
.material-list-item:hover.selected {
  background: #f8f9fa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Selected state (non-hover) */
.material-card.selected,
.material-list-item.selected {
  border-color: #ab0000;
  box-shadow: 0 0 0 2px rgba(171, 0, 0, 0.1);
}

/* Active state for click feedback */
.material-card:active,
.material-list-item:active {
  transform: scale(0.98);
}

/* ========================================
   DRAG AND DROP STATES
   ======================================== */

.material-card[draggable="true"],
.material-list-item[draggable="true"] {
  cursor: grab;
}

.material-card[draggable="true"]:active,
.material-list-item[draggable="true"]:active {
  cursor: grabbing;
  opacity: 0.7;
}

.material-card.drag-over,
.material-list-item.drag-over {
  background: #e6f3ff;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
  transform: scale(1.02);
}

.material-card.drag-over .material-icon,
.material-list-item.drag-over .list-icon {
  color: #2563eb;
  animation: pulse 0.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* ========================================
   MOVE MODAL
   ======================================== */

.move-modal {
  max-width: 500px;
  margin-bottom: 8px;
}

.folder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 12px;
  padding: 8px;
  background: #f9f9f9;
  border-radius: 8px;
}

.folder-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: #111111;
}

.folder-option:hover {
  border-color: #ab0000;
  background: #fff5f5;
}

.folder-option.selected {
  border-color: #ab0000;
  background: #fff5f5;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

.folder-option svg {
  font-size: 18px;
  color: #ab0000;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1024px) {
  .materials-controls {
    flex-wrap: wrap;
    gap: 12px;
  }
}

@media (max-width: 900px) {
  .materials-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .materials-controls .controls-left {
    width: 100%;
    min-width: auto;
  }

  .materials-controls .controls-right {
    width: 100%;
    min-width: auto;
  }

  .materials-controls .search-container,
  .materials-controls .search-box {
    max-width: 100%;
    width: 100%;
  }

  .controls-right .sort-select {
    width: 100%;
    max-width: 100%;
  }

  .materials-controls .controls-right-section {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .storage-info-compact {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .storage-compact-content {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    gap: 0.5rem;
  }

  .storage-compact-text {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
  }

  .view-toggle {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .view-btn {
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }

  .breadcrumb {
    flex-wrap: wrap;
  }

  .breadcrumb-item {
    font-size: 13px;
    padding: 5px 10px;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }

  .breadcrumb-path .breadcrumb-item {
    font-size: 13px;
  }

  .breadcrumb-path .breadcrumb-item svg,
  .breadcrumb-path .breadcrumb-folder-icon {
    font-size: 13px;
  }

  .breadcrumb-folder-icon {
    font-size: 11px;
  }

  .breadcrumb-separator {
    font-size: 10px;
    margin: 0 3px;
  }

  .breadcrumb-path .breadcrumb-separator {
    font-size: 10px;
    margin: 0 5px;
  }

  .breadcrumb-ellipsis {
    font-size: 13px;
    padding: 0 3px;
  }

  .breadcrumb-actions {
    width: 100%;
    flex-direction: row;
  }

  .breadcrumb-actions .create-folder-modal-btn,
  .breadcrumb-actions .upload-material-modal-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .president-admin-learning-materials-container,
  .admin-learning-materials-container,
  .member-learning-materials-container,
  .learning-materials-container {
    padding: 12px;
  }

  .materials-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
  }

  .materials-title {
    font-size: 24px;
  }

  .materials-controls-breadcrumb-container {
    margin-bottom: 12px;
  }

  .materials-controls {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  .materials-controls .controls-left {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .materials-controls .search-container,
  .materials-controls .search-box {
    min-width: auto;
    max-width: 100%;
    width: 100%;
  }

  .materials-controls .search-input {
    width: 100%;
    font-size: 16px; /* Prevents zoom on iOS */
    box-sizing: border-box;
  }

  .materials-controls .controls-right {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }

  .materials-controls .controls-right-section {
    width: 100%;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .controls-right .sort-select {
    width: 100%;
    min-width: auto;
    max-width: 100%;
  }

  .storage-info-compact {
    width: 100%;
    padding: 12px;
    justify-content: space-between;
    min-width: 0;
    box-sizing: border-box;
  }

  .storage-compact-content {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    gap: 0.5rem;
  }

  .storage-compact-bar {
    width: 60px;
    flex-shrink: 0;
  }

  .storage-compact-text {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
  }

  .view-toggle {
    width: 100%;
    justify-content: center;
    min-width: 0;
    box-sizing: border-box;
  }

  .view-btn {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .breadcrumb {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    align-items: stretch;
  }

  .breadcrumb-path {
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    min-width: 0;
  }

  .breadcrumb-path::-webkit-scrollbar {
    height: 4px;
  }

  .breadcrumb-path::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 2px;
  }

  .breadcrumb-item {
    font-size: 12px;
    padding: 5px 8px;
    white-space: nowrap;
    flex-shrink: 0;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }

  .breadcrumb-path .breadcrumb-item {
    font-size: 12px;
  }

  .breadcrumb-path .breadcrumb-item svg,
  .breadcrumb-path .breadcrumb-folder-icon {
    font-size: 12px;
  }

  .breadcrumb-folder-icon {
    font-size: 10px;
  }

  .breadcrumb-separator {
    font-size: 9px;
    margin: 0 2px;
  }

  .breadcrumb-path .breadcrumb-separator {
    font-size: 9px;
    margin: 0 4px;
  }

  .breadcrumb-ellipsis {
    font-size: 12px;
    padding: 0 2px;
  }

  .breadcrumb-actions {
    width: 100%;
    flex-direction: row;
    gap: 8px;
  }

  .breadcrumb-actions .create-folder-modal-btn,
  .breadcrumb-actions .upload-material-modal-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
    font-size: 12px;
    padding: 8px 12px;
  }

  .bulk-actions-toolbar {
    padding: 14px;
  }

  .bulk-actions-content {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 12px;
    max-width: 100%;
    width: 100%;
    border-radius: 16px;
  }

  .header-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .header-actions {
    justify-content: stretch;
    gap: 8px;
    width: 100%;
  }

  .header-actions button {
    flex: 1;
  }


  .material-card {
    min-width: 0;
  }

  .material-title {
    font-size: 15px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .material-file-link {
    overflow: hidden;
  }

  .material-file-link a {
    word-break: break-all;
    overflow-wrap: break-word;
    display: block;
    max-width: 100%;
  }

  .material-description {
    font-size: 13px;
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }

  .material-meta {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
  }

  .material-meta span {
    flex-shrink: 0;
  }

  .material-list-item {
    padding: 12px;
    gap: 12px;
  }

  .list-icon {
    font-size: 28px;
  }

  .list-content {
    flex: 1;
    min-width: 0;
  }

  .list-title {
    font-size: 14px;
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .list-meta {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
  }

  .list-actions {
    flex-shrink: 0;
    gap: 6px;
  }

  .list-actions button {
    padding: 6px;
    font-size: 13px;
  }

  .modal-overlay {
    padding: 12px;
    align-items: flex-start;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: 128px; /* leave space for bulk actions bar */
  }

  .upload-president-admin-learning-materials-modal,
  .edit-president-admin-learning-materials-modal,
  .create-folder-president-admin-learning-materials-modal,
  .president-admin-learning-materials-modal,
  .move-modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 24px - 2rem);
    margin: 0;
    border-radius: 16px;
    margin-bottom: 2.5rem; /* leave space above bulk actions toolbar */
  }

  .president-admin-learning-materials-modal-header {
    padding: 16px 20px;
  }

  .president-admin-learning-materials-modal-header h2 {
    font-size: 18px;
  }

  .president-admin-learning-materials-modal-form {
    padding: 16px 20px 20px 20px;
  }

  .president-admin-learning-materials-form-group {
    margin-bottom: 16px;
  }

  .president-admin-learning-materials-form-group label {
    font-size: 13px;
  }

  .president-admin-learning-materials-form-group-input {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 10px 14px !important;
  }

  .training-levels-container {
    flex-direction: column;
    gap: 8px;
  }

  .training-level-checkbox {
    width: 100%;
  }

  .president-admin-learning-materials-modal-actions {
    flex-direction: row; /* keep buttons side by side on small screens */
    gap: 10px;
    margin-top: 16px;
  }

  .president-admin-learning-materials-modal-actions button {
    width: 100%;
    justify-content: center;
    min-width: unset;
    flex: 1;
    font-size: 14px;
    padding: 12px 20px;
  }

  .pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
  }

  .pagination-info {
    text-align: center;
    font-size: 13px;
  }

  .pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .pagination-btn {
    padding: 8px 12px;
    font-size: 12px;
    min-width: 36px;
  }

  .pagination-size {
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pagination-size label {
    font-size: 13px;
  }

  .pagination-size select {
    font-size: 13px;
    padding: 8px 10px;
  }
}

@media (max-width: 480px) {
  .president-admin-learning-materials-container,
  .admin-learning-materials-container,
  .member-learning-materials-container,
  .learning-materials-container {
    padding: 8px;
  }

  /* Late override: force compact labels/icons for bulk actions */
  .btn-label-long { display: none !important; }
  .btn-label-short { display: inline !important; }
  .btn-icon-only { display: inline !important; font-size: 16px; }
  .bulk-action-btn.cancel-btn { text-decoration: none; }

  /* Additional specific tweaks */
  .select-all-btn {
    font-size: 8.5px !important;
    padding: 2px 6px !important;
    line-height: 1.05 !important;
    flex: 0 0 auto;
    max-width: 68px;
    white-space: nowrap;
  }

  .bulk-action-btn.move-btn { justify-content: center; }
  .bulk-action-btn.move-btn svg { display: none; }

  .bulk-action-btn.delete-btn {
    justify-content: center;
    min-width: 36px;
    padding: 6px;
  }
  .bulk-action-btn.delete-btn .btn-label-short,
  .bulk-action-btn.delete-btn .btn-label-long { display: none !important; }
  .bulk-action-btn.delete-btn svg { font-size: 16px; }

  .materials-title {
    font-size: 20px;
  }

  .materials-header {
    gap: 10px;
    margin-bottom: 10px;
  }

  .materials-controls {
    padding: 10px;
    gap: 10px;
  }

  .materials-controls .controls-left {
    gap: 10px;
  }

  .materials-controls .controls-right {
    gap: 10px;
  }

  .materials-controls .controls-right-section {
    gap: 10px;
  }

  .breadcrumb {
    padding: 8px 10px;
    gap: 10px;
  }

  .breadcrumb-path {
    gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }

  .breadcrumb-item {
    font-size: 11px;
    padding: 4px 6px;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }

  .breadcrumb-path .breadcrumb-item {
    font-size: 11px;
  }

  .breadcrumb-path .breadcrumb-item svg,
  .breadcrumb-path .breadcrumb-folder-icon {
    font-size: 11px;
  }

  .breadcrumb-folder-icon {
    font-size: 9px;
  }

  .breadcrumb-separator {
    font-size: 8px;
    margin: 0 2px;
  }

  .breadcrumb-path .breadcrumb-separator {
    font-size: 8px;
    margin: 0 3px;
  }

  .breadcrumb-ellipsis {
    font-size: 11px;
    padding: 0 2px;
  }

  .breadcrumb-actions {
    gap: 6px;
    flex-direction: row;
  }

  .breadcrumb-actions .create-folder-modal-btn,
  .breadcrumb-actions .upload-material-modal-btn {
    font-size: 12px;
    padding: 8px 10px;
    flex: 1;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
  }

  .storage-info-compact {
    padding: 10px;
    gap: 8px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .storage-compact-content {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    gap: 0.5rem;
  }

  .storage-compact-bar {
    width: 50px;
    height: 5px;
    flex-shrink: 0;
  }

  .storage-compact-text {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
  }

  .controls-right .sort-select {
    font-size: 14px;
    padding: 8px 12px;
  }

  .view-toggle {
    gap: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .view-btn {
    padding: 8px 10px;
    font-size: 13px;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }


  .material-card {
    border-radius: 6px;
  }

  .material-header {
    padding: 12px 16px 10px 16px;
  }

  .material-icon {
    font-size: 28px;
  }

  .material-content {
    padding: 0 16px 12px 16px;
  }

  .material-title {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .material-description {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .material-file-link {
    margin-bottom: 6px;
  }

  .material-file-link a {
    font-size: 11px;
  }

  .material-meta {
    gap: 6px;
    font-size: 10px;
  }

  /* List stays horizontal on mobile - compact but always row layout */
  .material-list-item {
    padding: 10px;
    gap: 10px;
  }

  .list-icon {
    font-size: 24px;
    flex-shrink: 0;
  }

  .list-content {
    flex: 1;
    min-width: 0;
  }

  .list-title {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .list-meta {
    gap: 6px;
    font-size: 10px;
    flex-wrap: wrap;
  }

  .list-actions {
    gap: 4px;
    flex-shrink: 0;
  }

  .list-actions button {
    padding: 5px;
    font-size: 12px;
  }

  .bulk-actions-toolbar {
    padding: 10px;
  }

  .bulk-actions-content {
    padding: 8px 10px;
    gap: 6px;
    border-radius: 12px;
    flex-wrap: nowrap;
  }

  .select-all-btn {
    font-size: 7px;
    padding: 6px 8px;
  }

  .modal-overlay {
    padding: 8px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 128px; /* leave space for bulk actions bar */
  }

  .upload-president-admin-learning-materials-modal,
  .edit-president-admin-learning-materials-modal,
  .create-folder-president-admin-learning-materials-modal,
  .president-admin-learning-materials-modal,
  .move-modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 16px - 2rem);
    margin: 0;
    border-radius: 12px;
    margin-bottom: 2.5rem; /* leave space above bulk actions toolbar on very small screens */
  }

  .president-admin-learning-materials-modal-header {
    padding: 14px 16px;
  }

  .president-admin-learning-materials-modal-header h2 {
    font-size: 17px;
  }

  .president-admin-learning-materials-modal-close {
    width: 32px;
    height: 32px;
    font-size: 20px;
    padding: 6px;
  }

  .president-admin-learning-materials-modal-form {
    padding: 14px 16px 16px 16px;
  }

  .president-admin-learning-materials-form-group {
    margin-bottom: 14px;
  }

  .president-admin-learning-materials-form-group label {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .president-admin-learning-materials-form-group-input {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 10px 12px !important;
  }

  .training-levels-container {
    gap: 6px;
  }

  .training-level-checkbox {
    padding: 6px 10px;
    font-size: 12px;
  }

  .president-admin-learning-materials-modal-actions {
    gap: 8px;
    margin-top: 14px;
  }

  .president-admin-learning-materials-modal-actions button {
    font-size: 13px;
    padding: 10px 16px;
  }

  .pagination {
    padding: 12px;
    gap: 10px;
  }

  .pagination-info {
    font-size: 12px;
  }

  .pagination-controls {
    gap: 4px;
  }

  .pagination-btn {
    padding: 6px 10px;
    font-size: 11px;
    min-width: 32px;
  }

  .pagination-size {
    gap: 6px;
  }

  .pagination-size label {
    font-size: 12px;
  }

  .pagination-size select {
    font-size: 12px;
    padding: 6px 8px;
  }

  .file-upload-area {
    border-radius: 6px;
  }

  .file-placeholder {
    padding: 20px 16px;
    min-height: 70px;
  }

  .upload-icon {
    font-size: 28px;
    margin-bottom: 8px;
  }

  .file-placeholder p {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .file-placeholder small {
    font-size: 10px;
  }

  .file-selected {
    padding: 12px 16px;
  }

  .file-name {
    font-size: 13px;
  }

  .file-size {
    font-size: 11px;
  }
}

/* ========================================
   DARK MODE STYLES
   ======================================== */

/* Materials Grid - Dark Mode */
.theme-dark .materials-grid {
  background-color: transparent;
}

.theme-dark .material-card {
  background: var(--bg-card, #1f1f1f) !important;
  border: 1px solid var(--border-primary, #333333) !important;
  box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.3)) !important;
}

.theme-dark .material-card:hover {
  border-color: var(--border-secondary, #444444) !important;
  background: var(--bg-hover, #2a2a2a) !important;
}

.theme-dark .material-card.folder {
  border-top: 4px solid var(--accent-primary, #ab0000) !important;
  background: var(--bg-card, #1f1f1f) !important;
  border: 1px solid var(--border-primary, #333333) !important;
  box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.3)) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.theme-dark .material-card.folder:hover {
  background: var(--bg-hover, #2a2a2a) !important;
  border-color: var(--border-secondary, #444444) !important;
  border-top-color: var(--accent-primary, #ab0000) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.theme-dark .material-card.file {
  border-top: 4px solid var(--text-primary);
}

.theme-dark .material-card.link-material {
  background: var(--bg-card);
  border-top: 4px solid #007bff;
}

.theme-dark .material-card.link-material:hover {
  background: var(--bg-hover);
  border-color: #0056b3;
}

.theme-dark .material-list-item.link-material {
  background: var(--bg-card);
  border-top: 4px solid #007bff;
}

.theme-dark .material-list-item.link-material:hover {
  background: var(--bg-hover);
  border-color: #0056b3;
}

/* Dark Mode - Selected state */
.theme-dark .material-card.selected,
.theme-dark .material-list-item.selected {
  background: #2a2a2a !important;
  border: 2px solid var(--accent-primary, #ab0000) !important;
  box-shadow: 0 0 0 2px rgba(171, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

.theme-dark .material-card.selected.folder,
.theme-dark .material-list-item.selected.folder {
  background: #2a2a2a !important;
  border: 2px solid var(--accent-primary, #ab0000) !important;
  border-top: 4px solid var(--accent-primary, #ab0000) !important;
  box-shadow: 0 0 0 2px rgba(171, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

.theme-dark .material-card.selected:hover,
.theme-dark .material-list-item.selected:hover {
  background: #333333 !important;
  border-color: var(--accent-primary, #ab0000) !important;
  box-shadow: 0 0 0 2px rgba(171, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .material-card.selected.folder:hover,
.theme-dark .material-list-item.selected.folder:hover {
  background: #333333 !important;
  border-color: var(--accent-primary, #ab0000) !important;
  border-top-color: var(--accent-primary, #ab0000) !important;
  box-shadow: 0 0 0 2px rgba(171, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure text remains visible when selected in dark mode */
.theme-dark .material-card.selected .material-title,
.theme-dark .material-list-item.selected .list-title {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .material-card.selected .material-description,
.theme-dark .material-list-item.selected .material-description {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .material-card.selected .material-meta,
.theme-dark .material-list-item.selected .material-meta {
  color: var(--text-tertiary, #9ca3af) !important;
}

.theme-dark .material-header {
  background: transparent !important;
}

.theme-dark .material-content {
  background: transparent !important;
}

/* Dark Mode - Folder Icons */
.theme-dark .material-icon .file-icon.folder {
  color: #ab0000 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.theme-dark .material-card.folder .material-icon,
.theme-dark .material-list-item.folder .material-icon {
  opacity: 1 !important;
  visibility: visible !important;
}

.theme-dark .material-card.folder .material-icon .file-icon.folder {
  color: #ab0000 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure selected folder icons and content remain visible */
.theme-dark .material-card.selected .material-icon,
.theme-dark .material-list-item.selected .material-icon {
  opacity: 1 !important;
  visibility: visible !important;
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .material-card.selected.folder .material-icon .file-icon.folder {
  color: #ab0000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.theme-dark .material-card.selected.folder .material-title,
.theme-dark .material-list-item.selected.folder .list-title {
  color: var(--text-primary, #ffffff) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.theme-dark .material-card.selected.folder .material-header,
.theme-dark .material-list-item.selected.folder .material-header {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

.theme-dark .material-card.selected.folder .material-content,
.theme-dark .material-list-item.selected.folder .material-content {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

.theme-dark .material-card.selected .material-header,
.theme-dark .material-list-item.selected .material-header {
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.theme-dark .material-card.selected .material-content,
.theme-dark .material-list-item.selected .material-content {
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.theme-dark .material-title {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .material-card.folder .material-title,
.theme-dark .material-list-item.folder .list-title {
  color: var(--text-primary, #ffffff) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.theme-dark .material-description {
  color: var(--text-secondary);
}

.theme-dark .material-file-link a {
  color: var(--text-secondary);
}

.theme-dark .material-file-link a:hover {
  color: var(--accent-primary);
}

.theme-dark .material-file-link span {
  color: var(--text-secondary);
}

.theme-dark .material-meta {
  color: var(--text-tertiary);
}

.theme-dark .material-meta span {
  color: var(--text-tertiary);
}

/* Dark Mode: Make all icons in material-meta white */
.theme-dark .material-meta svg,
.theme-dark .material-meta span svg,
.theme-dark .upload-date svg,
.theme-dark .download-count svg,
.theme-dark .access-count svg,
.theme-dark .file-size svg {
  color: #ffffff !important;
}

/* Also target icons in list view */
.theme-dark .list-meta svg,
.theme-dark .list-actions svg {
  color: #ffffff !important;
}

.theme-dark .material-category {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.theme-dark .material-list-item {
  background: var(--bg-card, #1f1f1f) !important;
  border: 1px solid var(--border-primary, #333333) !important;
  box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.3)) !important;
}

.theme-dark .material-list-item.folder {
  border-top: 4px solid var(--accent-primary, #ab0000) !important;
  background: var(--bg-card, #1f1f1f) !important;
  border: 1px solid var(--border-primary, #333333) !important;
  box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.3)) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.theme-dark .material-list-item.folder:hover {
  background: var(--bg-hover, #2a2a2a) !important;
  border-color: var(--border-secondary, #444444) !important;
  border-top-color: var(--accent-primary, #ab0000) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.theme-dark .material-list-item.file {
  border-top: 4px solid var(--text-primary);
}

.theme-dark .list-title {
  color: var(--text-primary);
}

.theme-dark .list-meta {
  color: var(--text-tertiary);
}

/* Materials Controls - Dark Mode */
.theme-dark .materials-controls {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-md);
}

.theme-dark .materials-controls .search-icon {
  color: var(--text-secondary);
}

.theme-dark .materials-controls .search-input {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-input);
}

.theme-dark .materials-controls .search-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1);
}

.theme-dark .materials-controls .search-input::placeholder {
  color: var(--text-muted);
}

.theme-dark .materials-controls .category-select,
.theme-dark .materials-controls .type-select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-input);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}

.theme-dark .materials-controls .category-select:focus,
.theme-dark .materials-controls .type-select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1);
}

.theme-dark .materials-controls .category-select:hover,
.theme-dark .materials-controls .type-select:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-focus);
}

.theme-dark .materials-controls .favorites-btn {
  background: var(--bg-input);
  color: var(--text-secondary);
  border: 1px solid var(--border-input);
}

.theme-dark .materials-controls .favorites-btn:hover {
  border-color: var(--border-focus);
  color: var(--accent-primary);
  background: var(--bg-hover);
}

.theme-dark .materials-controls .favorites-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-inverse);
}

.theme-dark .materials-controls .sort-btn {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 2px solid var(--border-input);
}

.theme-dark .materials-controls .sort-btn.active {
  background: var(--accent-primary);
  border: none;
  color: var(--text-inverse);
}

.theme-dark .materials-controls .sort-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-focus);
}

.theme-dark .materials-controls .sort-order-select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-input);
}

.theme-dark .materials-controls .sort-order-select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1);
}

.theme-dark .materials-controls .sort-order-select:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.theme-dark .materials-controls .sort-select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-input);
  border-style: solid;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}

.theme-dark .materials-controls .sort-select:focus {
  border: 1px solid var(--border-focus);
  border-style: solid;
  outline: none;
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1);
}

.theme-dark .materials-controls .sort-select:hover {
  background-color: var(--bg-hover);
  border: 1px solid var(--border-focus);
  border-style: solid;
}

.theme-dark .controls-right .sort-select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-input);
  border-style: solid;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}

.theme-dark .controls-right .sort-select:focus {
  border: 1px solid var(--border-focus);
  border-style: solid;
  outline: none;
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1);
}

.theme-dark .controls-right .sort-select:hover {
  background-color: var(--bg-hover);
  border: 1px solid var(--border-focus);
  border-style: solid;
}

.theme-dark .sort-order-btn {
  background: var(--bg-input);
  color: var(--text-primary);
}

.theme-dark .sort-order-btn:hover {
  background: var(--bg-hover);
}

.theme-dark .view-controls,
.theme-dark .view-toggle {
  border: 1px solid var(--border-input);
  background: var(--bg-input);
}

.theme-dark .view-btn {
  background: transparent;
  color: var(--text-secondary);
  border-right: 1px solid var(--border-input);
}

.theme-dark .view-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.theme-dark .view-btn.active {
  background: #eb4040;
  color: #ffffff;
}

/* Create Folder Modal - Dark Mode */
.theme-dark .create-folder-president-admin-learning-materials-modal {
  background: var(--bg-modal);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-lg);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-modal-header {
  background: transparent;
  border-bottom: 1px solid var(--border-primary);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-modal-header h2 {
  color: var(--text-primary);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-modal-close {
  color: var(--text-primary);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-modal-form {
  background: var(--bg-modal);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-form-group label {
  color: var(--text-primary);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-form-group-input {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--border-input) !important;
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-form-group-input:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 4px rgba(235, 64, 64, 0.15) !important;
  background: var(--bg-input) !important;
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-form-group-input::placeholder {
  color: var(--text-muted) !important;
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-form-group input:not(.president-admin-learning-materials-form-group-input),
.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-form-group select:not(.president-admin-learning-materials-form-group-input),
.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-form-group textarea:not(.president-admin-learning-materials-form-group-input) {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 2px solid var(--border-input);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-form-group input:not(.president-admin-learning-materials-form-group-input):focus,
.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-form-group select:not(.president-admin-learning-materials-form-group-input):focus,
.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-form-group textarea:not(.president-admin-learning-materials-form-group-input):focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(235, 64, 64, 0.15);
  background: var(--bg-input);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-form-group input:not(.president-admin-learning-materials-form-group-input)::placeholder,
.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-form-group textarea:not(.president-admin-learning-materials-form-group-input)::placeholder {
  color: var(--text-muted);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .form-help {
  color: var(--text-secondary);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .section-heading {
  color: var(--text-primary);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .section-icon {
  color: var(--accent-primary);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .training-level-checkbox {
  background: var(--bg-input);
  border: 2px solid var(--border-input);
  color: var(--text-primary);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .training-level-checkbox:hover {
  border-color: var(--border-focus);
  background: var(--bg-hover);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .training-level-checkbox:has(input:checked) {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .checkmark {
  background-color: var(--bg-input);
  border: 2px solid var(--border-input);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .training-level-checkbox:hover .checkmark {
  border-color: var(--border-focus);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .training-level-checkbox:has(input:checked) .checkmark {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border: 1px solid var(--accent-primary);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary:disabled {
  background: var(--bg-tertiary);
  border-color: var(--bg-tertiary);
  color: var(--text-muted);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-secondary {
  background: var(--bg-button-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.theme-dark .create-folder-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-focus);
}

/* Upload Material Modal - Dark Mode */
.theme-dark .upload-president-admin-learning-materials-modal {
  background: var(--bg-modal);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-lg);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-modal-header {
  background: transparent;
  border-bottom: 1px solid var(--border-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-modal-header h2 {
  color: var(--text-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-modal-close {
  color: var(--text-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-modal-form {
  background: var(--bg-modal);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-form-group label {
  color: var(--text-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-form-group-input {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--border-input) !important;
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-form-group-input:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 4px rgba(235, 64, 64, 0.15) !important;
  background: var(--bg-input) !important;
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-form-group-input::placeholder {
  color: var(--text-muted) !important;
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-form-group input:not(.president-admin-learning-materials-form-group-input),
.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-form-group select:not(.president-admin-learning-materials-form-group-input),
.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-form-group textarea:not(.president-admin-learning-materials-form-group-input) {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 2px solid var(--border-input);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-form-group input:not(.president-admin-learning-materials-form-group-input):focus,
.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-form-group select:not(.president-admin-learning-materials-form-group-input):focus,
.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-form-group textarea:not(.president-admin-learning-materials-form-group-input):focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(235, 64, 64, 0.15);
  background: var(--bg-input);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-form-group input:not(.president-admin-learning-materials-form-group-input)::placeholder,
.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-form-group textarea:not(.president-admin-learning-materials-form-group-input)::placeholder {
  color: var(--text-muted);
}

.theme-dark .upload-president-admin-learning-materials-modal .form-help {
  color: var(--text-secondary);
}

.theme-dark .upload-president-admin-learning-materials-modal .section-heading {
  color: var(--text-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .section-icon {
  color: var(--accent-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .training-level-checkbox {
  background: var(--bg-input);
  border: 2px solid var(--border-input);
  color: var(--text-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .training-level-checkbox:hover {
  border-color: var(--border-focus);
  background: var(--bg-hover);
}

.theme-dark .upload-president-admin-learning-materials-modal .training-level-checkbox:has(input:checked) {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .checkmark {
  background-color: var(--bg-input);
  border: 2px solid var(--border-input);
}

.theme-dark .upload-president-admin-learning-materials-modal .training-level-checkbox:hover .checkmark {
  border-color: var(--border-focus);
}

.theme-dark .upload-president-admin-learning-materials-modal .training-level-checkbox:has(input:checked) .checkmark {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .file-upload-area {
  border: 2px dashed var(--border-input);
  background: var(--bg-input);
}

.theme-dark .upload-president-admin-learning-materials-modal .file-upload-area:hover {
  border-color: var(--border-focus);
  background: var(--bg-hover);
}

.theme-dark .upload-president-admin-learning-materials-modal .file-placeholder {
  background: transparent;
}

.theme-dark .upload-president-admin-learning-materials-modal .upload-icon {
  color: var(--text-tertiary);
}

.theme-dark .upload-president-admin-learning-materials-modal .file-placeholder p {
  color: var(--text-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .file-placeholder small {
  color: var(--text-secondary);
}

.theme-dark .upload-president-admin-learning-materials-modal .file-selected {
  background: var(--bg-tertiary);
}

.theme-dark .upload-president-admin-learning-materials-modal .file-name {
  color: var(--text-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .file-size {
  color: var(--text-secondary);
}

.theme-dark .upload-president-admin-learning-materials-modal .file-selected .file-icon {
  color: var(--accent-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .remove-file {
  color: var(--text-secondary);
}

.theme-dark .upload-president-admin-learning-materials-modal .remove-file:hover {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border: 1px solid var(--accent-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary:disabled {
  background: var(--bg-tertiary);
  border-color: var(--bg-tertiary);
  color: var(--text-muted);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-secondary {
  background: var(--bg-button-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.theme-dark .upload-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-focus);
}

/* Edit Material Modal - Dark Mode (uses same structure as upload modal) */
.theme-dark .edit-president-admin-learning-materials-modal {
  background: var(--bg-modal);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-lg);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-modal-header {
  background: transparent;
  border-bottom: 1px solid var(--border-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-modal-header h2 {
  color: var(--text-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-modal-close {
  color: var(--text-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-modal-form {
  background: var(--bg-modal);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-form-group label {
  color: var(--text-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-form-group-input {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--border-input) !important;
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-form-group-input:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 4px rgba(235, 64, 64, 0.15) !important;
  background: var(--bg-input) !important;
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-form-group-input::placeholder {
  color: var(--text-muted) !important;
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-form-group input:not(.president-admin-learning-materials-form-group-input),
.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-form-group select:not(.president-admin-learning-materials-form-group-input),
.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-form-group textarea:not(.president-admin-learning-materials-form-group-input) {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 2px solid var(--border-input);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-form-group input:not(.president-admin-learning-materials-form-group-input):focus,
.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-form-group select:not(.president-admin-learning-materials-form-group-input):focus,
.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-form-group textarea:not(.president-admin-learning-materials-form-group-input):focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(235, 64, 64, 0.15);
  background: var(--bg-input);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-form-group input:not(.president-admin-learning-materials-form-group-input)::placeholder,
.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-form-group textarea:not(.president-admin-learning-materials-form-group-input)::placeholder {
  color: var(--text-muted);
}

.theme-dark .edit-president-admin-learning-materials-modal .form-help {
  color: var(--text-secondary);
}

.theme-dark .edit-president-admin-learning-materials-modal .section-heading {
  color: var(--text-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .section-icon {
  color: var(--accent-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .training-level-checkbox {
  background: var(--bg-input);
  border: 2px solid var(--border-input);
  color: var(--text-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .training-level-checkbox:hover {
  border-color: var(--border-focus);
  background: var(--bg-hover);
}

.theme-dark .edit-president-admin-learning-materials-modal .training-level-checkbox:has(input:checked) {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .checkmark {
  background-color: var(--bg-input);
  border: 2px solid var(--border-input);
}

.theme-dark .edit-president-admin-learning-materials-modal .training-level-checkbox:hover .checkmark {
  border-color: var(--border-focus);
}

.theme-dark .edit-president-admin-learning-materials-modal .training-level-checkbox:has(input:checked) .checkmark {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .file-upload-area {
  border: 2px dashed var(--border-input);
  background: var(--bg-input);
}

.theme-dark .edit-president-admin-learning-materials-modal .file-upload-area:hover {
  border-color: var(--border-focus);
  background: var(--bg-hover);
}

.theme-dark .edit-president-admin-learning-materials-modal .file-placeholder {
  background: transparent;
}

.theme-dark .edit-president-admin-learning-materials-modal .upload-icon {
  color: var(--text-tertiary);
}

.theme-dark .edit-president-admin-learning-materials-modal .file-placeholder p {
  color: var(--text-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .file-placeholder small {
  color: var(--text-secondary);
}

.theme-dark .edit-president-admin-learning-materials-modal .file-selected {
  background: var(--bg-tertiary);
}

.theme-dark .edit-president-admin-learning-materials-modal .file-name {
  color: var(--text-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .file-size {
  color: var(--text-secondary);
}

.theme-dark .edit-president-admin-learning-materials-modal .file-selected .file-icon {
  color: var(--accent-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .remove-file {
  color: var(--text-secondary);
}

.theme-dark .edit-president-admin-learning-materials-modal .remove-file:hover {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border: 1px solid var(--accent-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary:disabled {
  background: var(--bg-tertiary);
  border-color: var(--bg-tertiary);
  color: var(--text-muted);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-secondary {
  background: var(--bg-button-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.theme-dark .edit-president-admin-learning-materials-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-focus);
}

/* Breadcrumb - Dark Mode */
.theme-dark .breadcrumb-item.root {
  color: #ffffff !important;
}

.theme-dark .breadcrumb-item.root svg {
  color: #ffffff !important;
}

.theme-dark .breadcrumb-item.root * {
  color: #ffffff !important;
}

.theme-dark .breadcrumb-item.active {
  color: var(--accent-primary);
}

.theme-dark .breadcrumb-item:hover:not(.active) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.theme-dark .breadcrumb-separator {
  color: var(--text-primary);
}

.theme-dark .breadcrumb-folder-icon {
  color: var(--accent-primary);
}

/* Storage Info Compact - Dark Mode */
.theme-dark .storage-icon-compact {
  color: #ffffff;
}

.theme-dark .storage-icon-compact svg {
  color: #ffffff;
}

.theme-dark .storage-compact-text {
  color: var(--text-primary);
}

.theme-dark .storage-compact-bar {
  background: var(--bg-tertiary);
}

.theme-dark .storage-compact-fill {
  background: var(--accent-primary);
}

/* Bulk Actions Toolbar - Dark Mode */
.theme-dark .bulk-actions-toolbar {
  background: transparent;
  border: none;
  box-shadow: none;
}

.theme-dark .bulk-actions-content {
  background: var(--bg-card, #1f1f1f);
  border: 1px solid var(--border-primary, #333333);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.theme-dark .select-all-btn {
  background: transparent;
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
}

.theme-dark .select-all-btn:hover {
  background: var(--text-primary);
  color: var(--text-inverse);
}

.theme-dark .selected-count {
  color: var(--text-primary);
}

.theme-dark .bulk-action-btn.move-btn {
  background: var(--text-primary);
  color: var(--text-inverse);
}

.theme-dark .bulk-action-btn.move-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
}

.theme-dark .bulk-action-btn.delete-btn {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

.theme-dark .bulk-action-btn.delete-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  color: var(--text-inverse);
}

.theme-dark .bulk-action-btn.cancel-btn {
  background: transparent;
  color: var(--text-primary);
}

.theme-dark .bulk-action-btn.cancel-btn:hover {
  color: var(--accent-primary);
  text-decoration: underline;
  background: transparent;
}

/* Dark Mode - Loading State */
.theme-dark .loading-state {
  color: var(--text-secondary, #d1d5db) !important;
  background: transparent !important;
}

.theme-dark .loading-state .spinner {
  color: var(--accent-primary, #ab0000) !important;
}

.theme-dark .loading-state p {
  color: var(--text-secondary, #d1d5db) !important;
}

/* Dark Mode - Modal Overlay */
.theme-dark .modal-overlay,
.theme-dark .president-admin-learning-materials-modal-overlay,
.theme-dark .admin-learning-materials-modal-overlay {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(4px);
}

/* Dark Mode - Logout Modal Overlay (for delete modals) */
.theme-dark .logout-modal-overlay {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(4px);
}

.theme-dark .logout-modal {
  background: var(--bg-modal, #1f1f1f) !important;
  border-color: var(--border-primary, #333333) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

.theme-dark .logout-modal .modal-title {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .logout-modal .modal-message {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .logout-modal .modal-icon {
  color: var(--accent-primary, #ab0000) !important;
}

.theme-dark .logout-modal-buttons button {
  background: var(--bg-button-secondary, #333333) !important;
  color: var(--text-primary, #ffffff) !important;
  border-color: var(--border-primary, #333333) !important;
}

.theme-dark .logout-modal-buttons button:hover {
  background: var(--bg-hover, #444444) !important;
}

.theme-dark .logout-modal-buttons button.delete-btn {
  background: var(--accent-primary, #ab0000) !important;
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .logout-modal-buttons button.delete-btn:hover {
  background: var(--accent-hover, #8b0000) !important;
}

/* Dark Mode - Checkbox */
.theme-dark .material-checkbox {
  background: var(--bg-input, #2a2a2a) !important;
  border-color: var(--border-input, #444444) !important;
}

.theme-dark .material-checkbox.checked {
  background: var(--accent-primary, #ab0000) !important;
  border-color: var(--accent-primary, #ab0000) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure parent folder card remains visible when checkbox is checked */
.theme-dark .material-card:has(.material-checkbox.checked),
.theme-dark .material-list-item:has(.list-checkbox.checked) {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

.theme-dark .material-card.folder:has(.material-checkbox.checked),
.theme-dark .material-list-item.folder:has(.list-checkbox.checked) {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  background: #2a2a2a !important;
  border: 2px solid var(--accent-primary, #ab0000) !important;
  border-top: 4px solid var(--accent-primary, #ab0000) !important;
}

.theme-dark .material-checkbox:hover {
  border-color: var(--accent-primary, #ab0000) !important;
}

.theme-dark .list-checkbox {
  background: var(--bg-input, #2a2a2a) !important;
  border-color: var(--border-input, #444444) !important;
}

.theme-dark .list-checkbox.checked {
  background: var(--accent-primary, #ab0000) !important;
  border-color: var(--accent-primary, #ab0000) !important;
}

.theme-dark .list-checkbox:hover {
  border-color: var(--accent-primary, #ab0000) !important;
}

/* Dark Mode - Move Folder Modal */
.theme-dark .move-modal {
  background: var(--bg-modal, #1f1f1f) !important;
  border-color: var(--border-primary, #333333) !important;
}

.theme-dark .move-modal .president-admin-learning-materials-modal-header {
  background: var(--bg-modal-header, #2a2a2a) !important;
  border-bottom-color: var(--border-primary, #333333) !important;
}

.theme-dark .move-modal .president-admin-learning-materials-modal-header h2 {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .move-modal .president-admin-learning-materials-modal-close {
  color: var(--text-secondary, #9ca3af) !important;
}

.theme-dark .move-modal .president-admin-learning-materials-modal-close:hover {
  background: var(--bg-hover, #333333) !important;
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .move-modal .president-admin-learning-materials-modal-form {
  background: var(--bg-modal, #1f1f1f) !important;
}

.theme-dark .move-modal .president-admin-learning-materials-form-group label {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .move-modal .president-admin-learning-materials-form-group p {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .folder-list {
  background: var(--bg-card, #2a2a2a) !important;
  border-color: var(--border-primary, #333333) !important;
}

.theme-dark .folder-option {
  background: var(--bg-input, #1f1f1f) !important;
  border-color: var(--border-input, #444444) !important;
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .folder-option:hover {
  border-color: var(--accent-primary, #ab0000) !important;
  background: rgba(171, 0, 0, 0.1) !important;
}

.theme-dark .folder-option.selected {
  border-color: var(--accent-primary, #ab0000) !important;
  background: rgba(171, 0, 0, 0.2) !important;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.2) !important;
}

.theme-dark .folder-option svg {
  color: var(--accent-primary, #ab0000) !important;
}

.theme-dark .move-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-secondary {
  background: var(--bg-button-secondary, #333333) !important;
  color: var(--text-primary, #ffffff) !important;
  border-color: var(--border-primary, #333333) !important;
}

.theme-dark .move-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-secondary:hover {
  background: var(--bg-hover, #444444) !important;
}

.theme-dark .move-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary {
  background: var(--accent-primary, #ab0000) !important;
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .move-modal .president-admin-learning-materials-modal-actions .president-admin-learning-materials-btn-primary:hover:not(:disabled) {
  background: var(--accent-hover, #8b0000) !important;
}/* Role Change Modal Styles */
.role-change-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.role-change-modal {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  font-family: "Roboto", sans-serif;
}

.role-change-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem 1rem 2rem;
  border-bottom: 1px solid #e9ecef;
}

.role-change-modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #222222;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.role-change-modal-header .warning-icon {
  color: #ffc107;
  font-size: 1.1rem;
}

.role-change-modal-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #6c757d;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.role-change-modal-close:hover:not(:disabled) {
  color: #CF0A0A;
  background: #f8f9fa;
}

.role-change-modal-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.role-change-modal-content {
  padding: 1.5rem 2rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #ab0000;
  border-radius: 8px;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
}

.user-details h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
}

.user-details p {
  margin: 0;
  font-size: 0.9rem;
  color: #F0F8FF;
}

.role-change-preview {
  margin-bottom: 1.5rem;
}

.confirmation-text {
  font-size: 1rem;
  color: #222222;
  margin-bottom: 1.5rem;
  text-align: center;
}

.role-transition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.role-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 8px;
  min-width: 120px;
}

.role-item.current {
  background: #e9ecef;
  border: 2px solid #6c757d;
}

.role-item.new {
  background: #d4edda;
  border: 2px solid #28a745;
}

.role-item svg {
  font-size: 1.5rem;
}

.role-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #222222;
}

.arrow {
  font-size: 1.5rem;
  font-weight: bold;
  color: #CF0A0A;
}

.warning-message {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #856404;
}

.warning-message svg {
  color: #ffc107;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.role-change-modal-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem 1.5rem 2rem;
  border-top: 1px solid #e9ecef;
}

.btn-cancel,
.btn-confirm {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Roboto", sans-serif;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-cancel {
  background: #6c757d;
  color: white;
}

.btn-cancel:hover:not(:disabled) {
  background: #545b62;
}

.btn-confirm {
  background: #CF0A0A;
  color: white;
}

.btn-confirm:hover:not(:disabled) {
  background: #a00808;
}

.btn-cancel:disabled,
.btn-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
  .role-change-modal-overlay {
    padding: 1rem;
    align-items: center;
    justify-content: center;
  }
  
  .role-change-modal {
    margin: 0;
    max-width: 100%;
    width: 100%;
    max-height: calc(100vh - 2rem);
    border-radius: 12px;
  }
  
  .role-change-modal-header {
    padding: 1rem 1rem 0.75rem 1rem;
  }
  
  .role-change-modal-header h3 {
    font-size: 1.1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .role-change-modal-content {
    padding: 1rem;
  }
  
  .user-info {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
    padding: 1rem 0.75rem;
  }
  
  .user-avatar {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
  }
  
  .user-details h4 {
    font-size: 1rem;
  }
  
  .user-details p {
    font-size: 0.85rem;
    word-break: break-word;
  }
  
  .confirmation-text {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.5;
  }
  
  .role-transition {
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
  }
  
  .arrow {
    transform: rotate(90deg);
    font-size: 1.25rem;
    margin: 0.25rem 0;
  }
  
  .role-item {
    min-width: auto;
    width: 100%;
    max-width: 200px;
    padding: 0.875rem;
  }
  
  .role-item svg {
    font-size: 1.25rem;
  }
  
  .role-label {
    font-size: 0.85rem;
    text-align: center;
  }
  
  .warning-message {
    padding: 0.875rem;
    font-size: 0.85rem;
    line-height: 1.4;
    flex-direction: row;
    align-items: flex-start;
  }
  
  .warning-message span {
    flex: 1;
    word-break: break-word;
  }
  
  .role-change-modal-actions {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }
  
  .btn-cancel,
  .btn-confirm {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.25rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .role-change-modal-overlay {
    padding: 0.75rem;
    align-items: center;
    justify-content: center;
  }
  
  .role-change-modal {
    border-radius: 12px;
    max-height: calc(100vh - 1.5rem);
  }
  
  .role-change-modal-header {
    padding: 1rem 0.875rem 0.75rem 0.875rem;
  }
  
  .role-change-modal-header h3 {
    font-size: 1rem;
  }
  
  .role-change-modal-content {
    padding: 0.875rem;
  }
  
  .user-info {
    padding: 0.875rem 0.5rem;
  }
  
  .user-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }
  
  .confirmation-text {
    font-size: 0.9rem;
    padding: 0 0.5rem;
  }
  
  .role-item {
    padding: 0.75rem;
    max-width: 180px;
  }
  
  .role-item svg {
    font-size: 1.1rem;
  }
  
  .role-label {
    font-size: 0.8rem;
  }
  
  .warning-message {
    padding: 0.75rem;
    font-size: 0.8rem;
  }
  
  .role-change-modal-actions {
    padding: 0.875rem;
    gap: 0.5rem;
  }
  
  .btn-cancel,
  .btn-confirm {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
}

/* Dark Mode Styles for Role Change Modal */
.theme-dark .role-change-modal {
  background: var(--bg-modal) !important;
}

.theme-dark .role-change-modal-header {
  border-bottom-color: var(--border-primary) !important;
}

.theme-dark .role-change-modal-header h3 {
  color: var(--text-primary) !important;
}

.theme-dark .role-change-modal-close {
  color: var(--text-secondary) !important;
}

.theme-dark .role-change-modal-close:hover:not(:disabled) {
  color: var(--accent-primary) !important;
  background: var(--bg-hover) !important;
}

.theme-dark .confirmation-text {
  color: var(--text-primary) !important;
}

.theme-dark .role-item.current {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .role-item.new {
  background: rgba(76, 175, 80, 0.2) !important;
  border-color: var(--status-success) !important;
}

.theme-dark .role-label {
  color: var(--text-primary) !important;
}

.theme-dark .warning-message {
  background: rgba(255, 193, 7, 0.2) !important;
  border-color: var(--status-warning) !important;
  color: var(--text-primary) !important;
}

.theme-dark .role-change-modal-actions {
  border-top-color: var(--border-primary) !important;
}

.theme-dark .btn-cancel {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.theme-dark .btn-cancel:hover:not(:disabled) {
  background: var(--bg-hover) !important;
}

/* User Access Management Styles */
.president-admin-user-access-container {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  background: transparent;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
  overflow-x: hidden;
}

.president-admin-user-access-card {
  background: transparent;
  border: none;
  max-width: 1400px;
  width: 100%;
  box-sizing: border-box;
}

.president-admin-user-access-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.president-admin-user-access-header h2 {
  font-size: 2rem;
  font-weight: 700;
  text-align: left;
  font-family: "Roboto", sans-serif;
  color: #222222;
  margin: 0;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.president-admin-user-access-controls {
  margin-bottom: 1.5rem;
}

.search-container {
  position: relative;
  max-width: 400px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #222222;
  font-size: 0.9rem;
  z-index: 1;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  background: transparent;
  color: #222222;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #ab0000;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

.search-input::placeholder {
  color: #999999;
}

.refresh-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #222222;
  font-size: 1.2rem;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.refresh-button:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #ab0000;
}

.refresh-button:active,
.refresh-button:focus {
  background: none !important;
  color: #ab0000;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.refresh-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.error-message {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: #F0F8FF;
  border: 1px solid #F0F8FF;
  border-radius: 6px;
  color: #F0F8FF;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem;
  color: #F0F8FF;
  font-size: 1rem;
}

.users-table-container {
  background: #F0F8FF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
}

.users-table {
  width: 100%;
  box-sizing: border-box;
}

.table-header {
  background: #222222;
  color: #F0F8FF;
  padding: 1rem;
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  box-sizing: border-box;
  width: 100%;
}

.header-cell {
  display: flex;
  align-items: center;
}

.table-row {
  background: #F0F8FF;
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 1rem;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
}


.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}

.name-cell {
  gap: 0.75rem;
  min-width: 0;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #222222;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  flex-shrink: 0;
}

.user-name {
  font-size: 1rem;
  font-weight: 500;
  color: #222222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.email-cell {
  font-size: 0.9rem;
  color: #222222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.role-cell {
  justify-content: flex-start;
}

.role-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.role-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.role-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #F0F8FF;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Roboto", sans-serif;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  flex: 1 1 auto;
}


.role-select option {
  background: white;
  color: #222222;
  padding: 0.5rem;
}

.no-users-message {
  padding: 3rem;
  text-align: center;
  color: #F0F8FF;
  font-size: 1rem;
  font-style: italic;
}

/* Responsive Design - Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .president-admin-user-access-card {
    padding: 1.25rem;
  }

  .president-admin-user-access-header {
    margin-bottom: 1.25rem;
  }

  .president-admin-user-access-header h2 {
    font-size: 1.75rem;
  }

  .president-admin-user-access-controls {
    margin-bottom: 1.25rem;
  }

  .search-container {
    max-width: 100%;
    width: 100%;
  }

  .table-header,
  .table-row {
    grid-template-columns: 1.8fr 2fr 0.9fr;
    gap: 0.5rem;
    padding: 0.75rem;
    box-sizing: border-box;
  }

  .table-header {
    font-size: 0.9rem;
  }

  .table-cell {
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .user-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    flex-shrink: 0;
  }

  .user-name {
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .name-cell {
    min-width: 0;
    overflow: hidden;
  }

  .email-cell {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .role-cell {
    min-width: 0;
    overflow: visible;
    justify-content: flex-start;
  }

  .role-selector {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 0.4rem;
    box-sizing: border-box;
  }

  .role-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
  }

  .role-select {
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
  }
}


@media (max-width: 768px) {
  .president-admin-user-access-header {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .president-admin-user-access-header h2 {
    font-size: 1.5rem;
  }

  .refresh-button {
    -webkit-tap-highlight-color: transparent;
  }

  .refresh-button:active,
  .refresh-button:focus {
    background: none !important;
    background-color: transparent !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  .search-container {
    max-width: 100%;
  }
  
  .table-header,
  .table-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.75rem;
  }
  
  .table-header {
    display: none; /* Hide header on mobile, use labels instead */
  }
  
  .table-row {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    background: #f8f9fa;
  }
  
  .table-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .table-cell::before {
    content: attr(data-label);
    font-weight: 600;
    color: #222222;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .name-cell {
    flex-direction: row;
    align-items: center;
  }
  
  .name-cell::before {
    display: none;
  }
  
  .role-selector {
    width: 100%;
    justify-content: space-between;
  }
  
  .role-select {
    flex: 1;
    margin-left: 0.5rem;
  }
}

@media (max-width: 480px) {
  .president-admin-user-access-card {
    padding: 1rem;
  }
  
  .president-admin-user-access-header h2 {
    font-size: 1.25rem;
  }

  .refresh-button {
    -webkit-tap-highlight-color: transparent;
  }

  .refresh-button:active,
  .refresh-button:focus {
    background: none !important;
    background-color: transparent !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  .user-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  
  .user-name {
    font-size: 0.9rem;
  }
  
  .email-cell {
    font-size: 0.8rem;
  }
  
  .role-select {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
}

/* Dark Mode Styles for User Access Management */
.theme-dark .president-admin-user-access-header h2 {
  color: var(--text-primary) !important;
}

.theme-dark .search-icon {
  color: var(--text-secondary) !important;
}

.theme-dark .search-input {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

.theme-dark .search-input:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1) !important;
}

.theme-dark .search-input::placeholder {
  color: var(--text-muted) !important;
}

.theme-dark .refresh-button {
  color: var(--text-primary) !important;
}

.theme-dark .refresh-button:hover {
  background: var(--bg-hover) !important;
  color: var(--accent-primary) !important;
}

.theme-dark .refresh-button:active,
.theme-dark .refresh-button:focus {
  background: none !important;
  background-color: transparent !important;
  color: var(--accent-primary) !important;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.theme-dark .error-message {
  background: rgba(244, 67, 54, 0.2) !important;
  border-color: var(--status-error) !important;
  color: var(--status-error) !important;
}

.theme-dark .loading-container {
  color: var(--text-secondary) !important;
}

.theme-dark .users-table-container {
  background: var(--bg-card) !important;
}

.theme-dark .table-row {
  background: var(--bg-card) !important;
  border-bottom-color: var(--border-primary) !important;
}

.theme-dark .table-row:hover {
  background: var(--bg-hover) !important;
}

.theme-dark .user-name {
  color: var(--text-primary) !important;
}

.theme-dark .email-cell {
  color: var(--text-secondary) !important;
}

.theme-dark .no-users-message {
  color: var(--text-secondary) !important;
}

.theme-dark .role-select option {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
}

.theme-dark .table-cell::before {
  color: var(--text-primary) !important;
}

@media (max-width: 768px) {
  .theme-dark .table-row {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
  }

  .theme-dark .refresh-button:active,
  .theme-dark .refresh-button:focus {
    background: none !important;
    background-color: transparent !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 480px) {
  .theme-dark .refresh-button:active,
  .theme-dark .refresh-button:focus {
    background: none !important;
    background-color: transparent !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* IncidentReportModal.css - Dedicated styles for Incident Report Modal */

/* Modal Overlay - Fixed positioning to cover entire screen */
.president-admin-incident-report-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  backdrop-filter: blur(4px);
}

/* Modal Container */
.president-admin-incident-report-modal {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Modal Header */
.president-admin-incident-report-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 2px solid #e5e7eb;
  background: #f9fafb;
}

.president-admin-incident-report-modal-header h2 {
  font-family: "Montserrat", sans-serif;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
}

.president-admin-incident-report-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.president-admin-incident-report-modal-close:hover {
  background-color: #e5e7eb;
  color: #1a1a1a;
}

/* Form Styling */
.president-admin-incident-report-form {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.president-admin-incident-report-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.president-admin-incident-report-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.president-admin-incident-report-form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

.president-admin-incident-report-form-group input,
.president-admin-incident-report-form-group textarea {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: "Roboto", sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.president-admin-incident-report-form-group input:focus,
.president-admin-incident-report-form-group textarea:focus {
  outline: none;
  border-color: #ab0000;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

.president-admin-incident-report-form-group textarea {
  min-height: 120px;
  resize: vertical;
}

/* Error Messages */
.president-admin-incident-report-error-message {
  color: #dc2626;
  font-size: 0.75rem;
  margin-top: 4px;
}

/* File Upload Area */
.president-admin-incident-report-file-upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  background: #f9fafb;
  transition: all 0.2s;
  cursor: pointer;
}

.president-admin-incident-report-file-upload-area:hover,
.president-admin-incident-report-file-upload-area.drag-over {
  border-color: #ab0000;
  background: #fff5f5;
}

.president-admin-incident-report-file-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #6b7280;
}

.president-admin-incident-report-file-upload-label svg {
  font-size: 2rem;
  color: #ab0000;
}

.president-admin-incident-report-file-upload-label span {
  font-size: 0.875rem;
  font-weight: 500;
}

.president-admin-incident-report-file-upload-label small {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 4px;
}

/* File input styling */
.president-admin-incident-report-file-input {
  display: none;
}

/* File Errors */
.president-admin-incident-report-file-errors {
  margin-top: 12px;
  padding: 12px;
  background: #fee2e2;
  border-radius: 8px;
  border-left: 4px solid #dc2626;
}

/* Selected Files Preview */
.president-admin-incident-report-selected-files {
  margin-top: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.president-admin-incident-report-selected-files h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin: 0;
  padding: 12px 16px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.president-admin-incident-report-file-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s;
}

.president-admin-incident-report-file-preview:last-child {
  border-bottom: none;
}

.president-admin-incident-report-file-preview:hover {
  background-color: #f9fafb;
}

.president-admin-incident-report-file-icon {
  font-size: 1.25rem;
  color: #6b7280;
  flex-shrink: 0;
}

.president-admin-incident-report-file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.president-admin-incident-report-file-name {
  font-size: 0.875rem;
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.president-admin-incident-report-file-size {
  font-size: 0.75rem;
  color: #6b7280;
}

.president-admin-incident-report-remove-file-btn {
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.president-admin-incident-report-remove-file-btn:hover {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* Form Actions */
.president-admin-incident-report-form-actions {
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.president-admin-incident-report-form-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.president-admin-incident-report-btn-cancel,
.president-admin-incident-report-btn-submit {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: "Roboto", sans-serif;
}

.president-admin-incident-report-btn-cancel {
  background-color: #e5e7eb;
  color: #374151;
}

.president-admin-incident-report-btn-cancel:hover {
  background-color: #d1d5db;
}

.president-admin-incident-report-btn-submit {
  background-color: #ab0000;
  color: #ffffff;
}

.president-admin-incident-report-btn-submit:hover {
  background-color: #b91c1c;
}

/* Responsive Design */
@media (max-width: 768px) {
  .president-admin-incident-report-modal {
    max-width: 95%;
    margin: 10px;
  }

  .president-admin-incident-report-form-row {
    grid-template-columns: 1fr;
  }

  .president-admin-incident-report-modal-overlay {
    padding: 10px;
  }
}

/* Spinner animation utility */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Submit button loading state */
.president-admin-incident-report-btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* File upload area loading state */
.president-admin-incident-report-file-upload-area.uploading {
  position: relative;
  pointer-events: none;
}

.president-admin-incident-report-file-upload-area.uploading::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  z-index: 1;
}

/* Dark Mode Styles */
.theme-dark .president-admin-incident-report-modal-overlay {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

.theme-dark .president-admin-incident-report-modal {
  background: var(--bg-modal, #1f1f1f) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.theme-dark .president-admin-incident-report-modal-header {
  background: var(--bg-modal-header, #2a2a2a) !important;
  border-bottom-color: var(--border-primary, #333333) !important;
}

.theme-dark .president-admin-incident-report-modal-header h2 {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .president-admin-incident-report-modal-close {
  color: var(--text-secondary, #9ca3af) !important;
}

.theme-dark .president-admin-incident-report-modal-close:hover {
  background-color: var(--bg-hover, #333333) !important;
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .president-admin-incident-report-form {
  background: var(--bg-modal, #1f1f1f) !important;
}

.theme-dark .president-admin-incident-report-form-group label {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .president-admin-incident-report-form-group input,
.theme-dark .president-admin-incident-report-form-group textarea {
  background: var(--bg-input, #2a2a2a) !important;
  color: var(--text-primary, #ffffff) !important;
  border-color: var(--border-input, #444444) !important;
}

.theme-dark .president-admin-incident-report-form-group input:focus,
.theme-dark .president-admin-incident-report-form-group textarea:focus {
  border-color: var(--accent-primary, #ab0000) !important;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.2) !important;
}

.theme-dark .president-admin-incident-report-form-group input::placeholder,
.theme-dark .president-admin-incident-report-form-group textarea::placeholder {
  color: var(--text-secondary, #9ca3af) !important;
}

.theme-dark .president-admin-incident-report-error-message {
  color: var(--accent-primary, #dc2626) !important;
}

.theme-dark .president-admin-incident-report-file-upload-area {
  background: var(--bg-card, #2a2a2a) !important;
  border-color: var(--border-input, #444444) !important;
}

/* Dark Mode: Make date/time input calendar icons white */
.theme-dark .president-admin-incident-report-form-group input[type="date"]::-webkit-calendar-picker-indicator,
.theme-dark .president-admin-incident-report-form-group input[type="time"]::-webkit-calendar-picker-indicator,
.theme-dark .president-admin-incident-report-form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.theme-dark .president-admin-incident-report-form-group input[type="date"]::-moz-calendar-picker-indicator,
.theme-dark .president-admin-incident-report-form-group input[type="time"]::-moz-calendar-picker-indicator,
.theme-dark .president-admin-incident-report-form-group input[type="datetime-local"]::-moz-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.theme-dark .president-admin-incident-report-file-upload-area:hover,
.theme-dark .president-admin-incident-report-file-upload-area.drag-over {
  border-color: var(--accent-primary, #ab0000) !important;
  background: rgba(171, 0, 0, 0.1) !important;
}

.theme-dark .president-admin-incident-report-file-upload-label {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .president-admin-incident-report-file-upload-label svg {
  color: var(--accent-primary, #ab0000) !important;
}

.theme-dark .president-admin-incident-report-file-upload-label span {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .president-admin-incident-report-file-upload-label small {
  color: var(--text-secondary, #9ca3af) !important;
}

.theme-dark .president-admin-incident-report-file-upload-area.uploading::before {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

.theme-dark .president-admin-incident-report-file-errors {
  background: rgba(220, 38, 38, 0.2) !important;
  border-left-color: var(--accent-primary, #dc2626) !important;
}

.theme-dark .president-admin-incident-report-selected-files {
  background: var(--bg-card, #2a2a2a) !important;
  border-color: var(--border-primary, #333333) !important;
}

.theme-dark .president-admin-incident-report-selected-files h4 {
  background: var(--bg-input, #1f1f1f) !important;
  color: var(--text-primary, #ffffff) !important;
  border-bottom-color: var(--border-primary, #333333) !important;
}

.theme-dark .president-admin-incident-report-file-preview {
  background: var(--bg-card, #2a2a2a) !important;
  border-bottom-color: var(--border-primary, #333333) !important;
}

.theme-dark .president-admin-incident-report-file-preview:hover {
  background: var(--bg-hover, #333333) !important;
}

.theme-dark .president-admin-incident-report-file-icon {
  color: var(--text-secondary, #9ca3af) !important;
}

.theme-dark .president-admin-incident-report-file-name {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .president-admin-incident-report-file-size {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .president-admin-incident-report-remove-file-btn {
  color: var(--accent-primary, #dc2626) !important;
}

.theme-dark .president-admin-incident-report-remove-file-btn:hover {
  background-color: rgba(220, 38, 38, 0.2) !important;
  color: var(--accent-primary, #dc2626) !important;
}

.theme-dark .president-admin-incident-report-form-actions {
  border-top-color: var(--border-primary, #333333) !important;
}

.theme-dark .president-admin-incident-report-btn-cancel {
  background-color: var(--bg-button-secondary, #333333) !important;
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .president-admin-incident-report-btn-cancel:hover {
  background-color: var(--bg-hover, #444444) !important;
}

.theme-dark .president-admin-incident-report-btn-submit {
  background-color: var(--accent-primary, #ab0000) !important;
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .president-admin-incident-report-btn-submit:hover {
  background-color: var(--accent-hover, #8b0000) !important;
}/* Main Container */
.president-admin-incident-reports-container {
  min-height: 100vh;
  background-color: transparent;
  font-family: "Roboto", sans-serif;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Header */
.reports-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.header-left {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0;
}

.reports-title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
}

.create-report-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background-color: #ab0000;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 0.813rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.create-report-btn:hover {
  background-color: #8b0000;
  transform: translateY(-1px);
}

/* Bulk Action Buttons */
.bulk-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: none;
  border-radius: 6px;
  font-size: 0.813rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.bulk-download-btn {
  background-color: #10b981;
  color: #ffffff;
}

.bulk-download-btn:hover {
  background-color: #059669;
  transform: translateY(-1px);
}

.bulk-delete-btn {
  background-color: #dc2626;
  color: #ffffff;
}

.bulk-delete-btn:hover {
  background-color: #b91c1c;
  transform: translateY(-1px);
}

/* Select All Button */
.select-all-btn {
  background: transparent;
  border: 1px solid #111111;
  color: #111111;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.813rem;
  font-weight: 600;
  white-space: nowrap;
  font-family: "Montserrat", sans-serif;
}

.select-all-btn:hover {
  background: #111111;
  color: #ffffff;
}

/* Storage Info */
.storage-info {
  width: 100%;
  height: auto;
  background: #ffffff;
  border: 2px solid rgba(17, 17, 17, 0.5);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.storage-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.storage-icon {
  font-size: 1.2rem;
  color: #dc2626;
}

.storage-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.storage-bar {
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.storage-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #f59e0b 70%, #dc2626 100%);
  transition: width 0.3s ease;
}

.storage-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: #6b7280;
}

.storage-percentage {
  font-weight: 600;
  color: #dc2626;
}

.storage-stats {
  display: flex;
  gap: 20px;
  font-size: 0.875rem;
  color: #6b7280;
}

/* Controls */
.reports-controls {
  display: flex;
  justify-content: space-between;
  border: 2px solid rgba(17, 17, 17, 0.5);
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
  flex-wrap: wrap;
  background: #ffffff;
  padding: 10px 12px;
  border-radius: 18px;
}

.controls-left {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: #6b7280;
  font-size: 0.875rem;
}

.search-input {
  padding: 8px 12px 8px 36px;
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 18px;
  font-size: 0.875rem;
  width: 240px;
  min-width: 200px;
  max-width: 100%;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.search-input:focus {
  border-color: #ab0000;
  outline: none;
}

.controls-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
}

.sort-controls label {
  font-size: 0.813rem;
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
}

.sort-select {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  font-size: 0.813rem;
  cursor: pointer;
  transition: border-color 0.2s;
  width: 240px;
  min-width: 200px;
  max-width: 100%;
  box-sizing: border-box;
}

.sort-select:focus {
  border-color: #ab0000;
  outline: none;
}

.sort-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  background: #111111;
  color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

/* Reports Content */
.reports-content {
  min-height: 400px;
}

.loading-state,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.spinner {
  font-size: 2rem;
  color: #111111;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Spinner animation utility */
.animate-spin {
  animation: spin 1s linear infinite;
}

/* Download button loading state */
.action-btn.download.downloading {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-download.downloading {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.empty-icon {
  font-size: 4rem;
  color: #d1d5db;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 1.5rem;
  color: #374151;
  margin-bottom: 10px;
}

.empty-state p {
  color: #6b7280;
  margin-bottom: 20px;
}

.btn-primary {
  padding: 12px 24px;
  background-color: #dc2626;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #b91c1c;
}

/* Reports Grid */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

@media (max-width: 400px) {
  .reports-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Report Card */
.report-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.report-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.report-header {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  gap: 10px;
}

@media (max-width: 400px) {
  .report-header {
    padding: 12px 14px;
    gap: 8px;
  }
}

.report-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 400px) {
  .report-checkbox {
    order: 1;
  }
}

.report-checkbox-input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #ab0000;
}

.report-title {
  flex: 1;
}

.report-title h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

@media (max-width: 400px) {
  .report-title h3 {
    font-size: 0.938rem;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

.report-icon {
  font-size: 1.5rem;
  color: #dc2626;
  flex-shrink: 0;
}

@media (max-width: 400px) {
  .report-icon {
    font-size: 1.25rem;
  }
}

.report-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 400px) {
  .report-actions {
    gap: 4px;
    flex-shrink: 0;
  }
}

.action-btn {
  background: none;
  border: none;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 1rem;
}

@media (max-width: 400px) {
  .action-btn {
    padding: 6px;
    font-size: 0.875rem;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.action-btn.view {
  color: #6b7280;
}

.action-btn.view:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.action-btn.download {
  color: #10b981;
}

.action-btn.download:hover {
  background-color: #d1fae5;
  color: #059669;
}

.action-btn.edit {
  color: #f59e0b;
}

.action-btn.edit:hover {
  background-color: #fef3c7;
}

.action-btn.delete {
  color: #dc2626;
}

.action-btn.delete:hover {
  background-color: #fee2e2;
}

.report-content {
  padding: 20px;
}

@media (max-width: 400px) {
  .report-content {
    padding: 12px 14px;
  }
}

.report-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #6b7280;
}

@media (max-width: 400px) {
  .meta-item {
    font-size: 0.813rem;
    gap: 6px;
    flex-wrap: wrap;
  }

  .meta-item svg {
    flex-shrink: 0;
  }
}

.report-description {
  color: #374151;
  font-size: 0.875rem;
  margin-bottom: 15px;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 400px) {
  .report-description {
    font-size: 0.813rem;
    margin-bottom: 12px;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

.report-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.tag.injury-type {
  background-color: #fef3c7;
  color: #92400e;
}

.tag.injury-area {
  background-color: #e0e7ff;
  color: #3730a3;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
  gap: 20px;
}

.pagination-info {
  color: #6b7280;
  font-size: 0.875rem;
}

.pagination-controls {
  display: flex;
  gap: 5px;
}

.pagination-btn {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
  border-color: #dc2626;
  color: #dc2626;
}

.pagination-btn.active {
  background-color: #dc2626;
  color: white;
  border-color: #dc2626;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-size {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-size label {
  font-size: 0.875rem;
  color: #374151;
}

.pagination-size select {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
}

/* Incident Report Modal Styles */
.incident-report-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.incident-report-modal,
.view-report-modal {
  background: #f0f8ff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.1);
  display: flex;
  flex-direction: column;
}

.view-report-modal {
  max-width: 600px;
}

.incident-report-modal-header,
.view-report-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 2px solid #e0e0e0;
  background: #ffffff;
  flex-shrink: 0;
}

.incident-report-modal-header h2,
.view-report-modal .modal-header h2 {
  font-family: "Montserrat", sans-serif;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.5px;
}

.incident-report-modal-close,
.view-report-modal .modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666666;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.incident-report-modal-close:hover,
.view-report-modal .modal-close:hover {
  background: #f5f5f5;
  color: #ab0000;
  transform: scale(1.1);
}

.incident-report-modal-content,
.view-report-modal .modal-content {
  padding: 24px 32px;
  background: #f0f8ff;
  overflow-y: auto;
  flex: 1;
}

.view-report-modal .report-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.view-report-modal .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 20px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  gap: 16px;
}

.view-report-modal .label {
  font-weight: 600;
  color: #111111;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  flex-shrink: 0;
  min-width: 140px;
}

.view-report-modal .value {
  color: #4b5563;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  text-align: right;
  word-break: break-word;
}

.incident-report-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.incident-report-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid #e5e7eb;
}

.incident-report-label {
  font-weight: 600;
  color: #111111;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
}

.incident-report-value {
  color: #4b5563;
  font-size: 15px;
  text-align: right;
  font-family: "Roboto", sans-serif;
}

.incident-report-modal-actions,
.view-report-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 20px 32px;
  border-top: 2px solid #e0e0e0;
  background: #ffffff;
  flex-shrink: 0;
}

.view-report-modal .modal-actions button {
  padding: 12px 32px;
  background-color: #111111;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  min-width: 180px;
}

.view-report-modal .modal-actions button:hover {
  background-color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.incident-report-btn-secondary {
  padding: 12px 24px;
  background-color: #f3f4f6;
  color: #111111;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  min-width: 140px;
}

.incident-report-btn-secondary:hover {
  background-color: #e5e7eb;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

.incident-report-btn-danger {
  padding: 12px 24px;
  background-color: #ab0000;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.incident-report-btn-danger:hover {
  background-color: #8b0000;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(171, 0, 0, 0.3);
}

.incident-report-delete-warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: 32px;
}

.incident-report-warning-icon {
  font-size: 56px;
  color: #ab0000;
}

.incident-report-warning-text h3 {
  font-size: 22px;
  color: #111111;
  margin-bottom: 16px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  letter-spacing: -0.5px;
}

.incident-report-warning-text p {
  color: #4b5563;
  font-size: 15px;
  line-height: 1.7;
  font-family: "Roboto", sans-serif;
  margin-bottom: 12px;
}

.incident-report-item-name {
  color: #ab0000;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  padding: 8px 16px;
  background: #fff5f5;
  border-radius: 6px;
  display: inline-block;
  margin: 12px 0;
  font-size: 16px;
}

.incident-report-permanent-warning {
  color: #6b7280;
  font-size: 14px;
  font-style: italic;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  margin-top: 16px;
}

/* ========================================
   DELETE CONFIRMATION MODAL
   ======================================== */

.incident-delete-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.incident-delete-modal {
  background: #ffffff;
  border-radius: 12px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.incident-delete-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}

.incident-delete-modal-header h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #222222;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

.incident-delete-modal-header .warning-icon {
  color: #cf0a0a;
  font-size: 18px;
  flex-shrink: 0;
}

.incident-delete-modal-close {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.incident-delete-modal-close:hover {
  background: #f3f4f6;
  color: #222222;
}

.incident-delete-modal-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.incident-delete-modal-content {
  padding: 24px;
  text-align: center;
}

.incident-delete-modal-content p {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
  font-family: "Roboto", sans-serif;
}

.incident-delete-report-id {
  color: #ab0000;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  padding: 8px 16px;
  background: #fff5f5;
  border-radius: 6px;
  display: inline-block;
  margin: 12px 0;
  font-size: 16px;
}

.incident-delete-warning-text {
  color: #6b7280;
  font-size: 14px;
  font-style: italic;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  margin: 16px 0 0 0;
}

.incident-delete-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: stretch;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
}

.incident-delete-btn-secondary,
.incident-delete-btn-primary {
  flex: 1;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Roboto", sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.incident-delete-btn-secondary {
  background: #f3f4f6;
  color: #222222;
}

.incident-delete-btn-secondary:hover:not(:disabled) {
  background: #e5e7eb;
}

.incident-delete-btn-primary {
  background: #cf0a0a;
  color: #ffffff;
}

.incident-delete-btn-primary:hover:not(:disabled) {
  background: #b00909;
}

.incident-delete-btn-secondary:disabled,
.incident-delete-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.incident-delete-btn-primary .spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 480px) {
  .incident-delete-modal {
    max-width: 100%;
  }

  .incident-delete-modal-actions {
    gap: 8px;
    padding: 16px 20px;
  }
}

/* Dark Mode Styles */
.theme-dark .reports-title {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .reports-controls {
  background: var(--bg-card, #1f1f1f) !important;
  border-color: var(--border-primary, #333333) !important;
}

.theme-dark .search-input {
  background: var(--bg-input, #2a2a2a) !important;
  color: var(--text-primary, #ffffff) !important;
  border-color: var(--border-input, #444444) !important;
}

.theme-dark .search-input:focus {
  border-color: var(--accent-primary, #ab0000) !important;
  background: var(--bg-input, #2a2a2a) !important;
}

.theme-dark .search-icon {
  color: var(--text-secondary, #9ca3af) !important;
}

.theme-dark .sort-select {
  background: var(--bg-input, #2a2a2a) !important;
  color: var(--text-primary, #ffffff) !important;
  border-color: var(--border-input, #444444) !important;
}

.theme-dark .sort-select:focus {
  border-color: var(--accent-primary, #ab0000) !important;
}

.theme-dark .sort-controls label {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .select-all-btn {
  border-color: var(--border-primary, #333333) !important;
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .select-all-btn:hover {
  background: var(--bg-hover, #333333) !important;
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .storage-info {
  background: var(--bg-card, #1f1f1f) !important;
  border-color: var(--border-primary, #333333) !important;
}

.theme-dark .storage-text,
.theme-dark .storage-stats {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .storage-percentage {
  color: var(--accent-primary, #dc2626) !important;
}

.theme-dark .spinner {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .empty-icon {
  color: var(--text-secondary, #666666) !important;
}

.theme-dark .empty-state h3 {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .empty-state p {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .report-card {
  background: var(--bg-card, #1f1f1f) !important;
  border: 1px solid var(--border-primary, #333333) !important;
}

.theme-dark .report-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .report-header {
  border-bottom-color: var(--border-primary, #333333) !important;
}

.theme-dark .report-title h3 {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .action-btn.view {
  color: var(--text-secondary, #9ca3af) !important;
}

.theme-dark .action-btn.view:hover {
  background-color: var(--bg-hover, #333333) !important;
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .action-btn.download:hover {
  background-color: rgba(16, 185, 129, 0.2) !important;
}

.theme-dark .action-btn.edit:hover {
  background-color: rgba(245, 158, 11, 0.2) !important;
}

.theme-dark .action-btn.delete:hover {
  background-color: rgba(220, 38, 38, 0.2) !important;
}

.theme-dark .report-content {
  background: var(--bg-card, #1f1f1f) !important;
}

.theme-dark .meta-item {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .meta-item svg {
  color: #ffffff !important;
}

.theme-dark .report-description {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .pagination {
  background: var(--bg-card, #1f1f1f) !important;
  border: 1px solid var(--border-primary, #333333) !important;
}

.theme-dark .pagination-info {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .pagination-btn {
  background: var(--bg-input, #2a2a2a) !important;
  color: var(--text-primary, #ffffff) !important;
  border-color: var(--border-input, #444444) !important;
}

.theme-dark .pagination-btn:hover:not(:disabled) {
  border-color: var(--accent-primary, #dc2626) !important;
  color: var(--accent-primary, #dc2626) !important;
}

.theme-dark .pagination-btn.active {
  background-color: var(--accent-primary, #dc2626) !important;
  color: var(--text-primary, #ffffff) !important;
  border-color: var(--accent-primary, #dc2626) !important;
}

.theme-dark .pagination-size label {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .pagination-size select {
  background: var(--bg-input, #2a2a2a) !important;
  color: var(--text-primary, #ffffff) !important;
  border-color: var(--border-input, #444444) !important;
}

.theme-dark .incident-report-modal,
.theme-dark .view-report-modal {
  background: var(--bg-modal, #1f1f1f) !important;
  border-color: var(--border-primary, #333333) !important;
}

.theme-dark .incident-report-modal-header,
.theme-dark .view-report-modal .modal-header {
  background: var(--bg-modal-header, #2a2a2a) !important;
  border-bottom-color: var(--border-primary, #333333) !important;
}

.theme-dark .incident-report-modal-header h2,
.theme-dark .view-report-modal .modal-header h2 {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .incident-report-modal-close,
.theme-dark .view-report-modal .modal-close {
  color: var(--text-secondary, #9ca3af) !important;
}

.theme-dark .incident-report-modal-close:hover,
.theme-dark .view-report-modal .modal-close:hover {
  background: var(--bg-hover, #333333) !important;
  color: var(--accent-primary, #ab0000) !important;
}

.theme-dark .incident-report-modal-content,
.theme-dark .view-report-modal .modal-content {
  background: var(--bg-modal, #1f1f1f) !important;
}

.theme-dark .view-report-modal .detail-row,
.theme-dark .incident-report-detail-row {
  background: var(--bg-card, #2a2a2a) !important;
  border-color: var(--border-primary, #333333) !important;
}

.theme-dark .view-report-modal .label,
.theme-dark .incident-report-label {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .view-report-modal .value,
.theme-dark .incident-report-value {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .incident-report-modal-actions,
.theme-dark .view-report-modal .modal-actions {
  background: var(--bg-modal-header, #2a2a2a) !important;
  border-top-color: var(--border-primary, #333333) !important;
}

.theme-dark .incident-report-form {
  background: var(--bg-card, #2a2a2a) !important;
  border-color: var(--border-primary, #333333) !important;
}

.theme-dark .incident-report-form-group label {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .incident-report-form-group input[type="text"],
.theme-dark .incident-report-form-group input[type="date"],
.theme-dark .incident-report-form-group input[type="number"] {
  background: var(--bg-input, #1f1f1f) !important;
  color: var(--text-primary, #ffffff) !important;
  border-color: var(--border-input, #444444) !important;
}

.theme-dark .incident-report-form-group input:focus {
  border-color: var(--accent-primary, #ab0000) !important;
}

.theme-dark .incident-report-form textarea {
  background: var(--bg-input, #1f1f1f) !important;
  color: var(--text-primary, #ffffff) !important;
  border-color: var(--border-input, #444444) !important;
}

.theme-dark .incident-report-form textarea:focus {
  border-color: var(--accent-primary, #dc2626) !important;
}

.theme-dark .incident-report-checkbox-group label {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .incident-report-checkbox-group label:hover {
  background-color: var(--bg-hover, #333333) !important;
  border-color: var(--border-primary, #333333) !important;
}

.theme-dark .incident-report-file-upload-area {
  border-color: var(--border-input, #444444) !important;
  background: var(--bg-card, #2a2a2a) !important;
}

.theme-dark .incident-report-file-upload-area:hover,
.theme-dark .incident-report-file-upload-area.drag-over {
  border-color: var(--accent-primary, #dc2626) !important;
  background: rgba(220, 38, 38, 0.1) !important;
}

.theme-dark .incident-report-file-upload-label span {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .incident-report-file-upload-label small {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .incident-report-selected-files {
  background: var(--bg-card, #2a2a2a) !important;
  border-color: var(--border-primary, #333333) !important;
}

.theme-dark .incident-report-selected-files h4 {
  color: var(--text-primary, #ffffff) !important;
  border-bottom-color: var(--border-primary, #333333) !important;
}

.theme-dark .incident-report-file-preview {
  background: var(--bg-input, #1f1f1f) !important;
  border-bottom-color: var(--border-primary, #333333) !important;
}

.theme-dark .incident-report-file-preview:hover {
  background: var(--bg-hover, #333333) !important;
}

.theme-dark .incident-report-file-name {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .incident-report-file-size {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .incident-report-remove-file-btn:hover {
  background-color: rgba(220, 38, 38, 0.2) !important;
}

.theme-dark .incident-report-warning-text h3 {
  color: var(--text-primary, #ffffff) !important;
}

.theme-dark .incident-report-warning-text p {
  color: var(--text-secondary, #d1d5db) !important;
}

.theme-dark .incident-report-item-name {
  background: rgba(171, 0, 0, 0.2) !important;
  color: var(--accent-primary, #ab0000) !important;
}

.theme-dark .incident-report-permanent-warning {
  color: var(--text-secondary, #9ca3af) !important;
}

/* Dark mode styles for delete modal */
.theme-dark .incident-delete-modal-overlay {
  background: rgba(0, 0, 0, 0.8);
}

.theme-dark .incident-delete-modal {
  background: var(--bg-modal, #1f1f1f);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.theme-dark .incident-delete-modal-header {
  border-bottom-color: var(--border-primary, #333333);
}

.theme-dark .incident-delete-modal-header h3 {
  color: var(--text-primary, #ffffff);
}

.theme-dark .incident-delete-modal-header .warning-icon {
  color: var(--accent-primary, #cf0a0a);
}

.theme-dark .incident-delete-modal-close {
  color: var(--text-secondary, #9ca3af);
}

.theme-dark .incident-delete-modal-close:hover {
  background: var(--bg-hover, #333333);
  color: var(--text-primary, #ffffff);
}

.theme-dark .incident-delete-modal-content p {
  color: var(--text-secondary, #d1d5db);
}

.theme-dark .incident-delete-modal-actions {
  border-top-color: var(--border-primary, #333333);
}

.theme-dark .incident-delete-btn-secondary {
  background: var(--bg-button-secondary, #333333);
  color: var(--text-primary, #ffffff);
}

.theme-dark .incident-delete-btn-secondary:hover {
  background: var(--border-secondary, #444444);
}

.theme-dark .incident-delete-btn-primary {
  background: var(--accent-primary, #cf0a0a);
  color: var(--text-primary, #ffffff);
}

.theme-dark .incident-delete-btn-primary:hover {
  background: var(--accent-hover, #b00909);
}

/* Form Styles for Incident Report Modal */
.incident-report-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background-color: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.incident-report-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.incident-report-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.incident-report-form-group label {
  font-weight: 600;
  color: #111111;
  font-size: 0.875rem;
  margin-bottom: 0;
}

.incident-report-form-group input[type="text"],
.incident-report-form-group input[type="date"],
.incident-report-form-group input[type="number"] {
  padding: 12px 14px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9375rem;
  background-color: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
  max-width: 100%;
}

.incident-report-form-group input:focus {
  border-color: #111111;
}

.incident-report-form-group input:invalid {
  border-color: #111111;
  background-color: transparent;
}

.incident-report-form-group-checkbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.incident-report-form-group-checkbox > label {
  font-weight: 600;
  color: #4b5563;
  font-size: 0.875rem;
  margin-bottom: 0;
}

.incident-report-checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
}

.incident-report-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s, border-color 0.2s;
  border: 1px solid transparent;
}

.incident-report-checkbox-group label:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
}

.incident-report-checkbox-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #dc2626;
  cursor: pointer;
}

.incident-report-form textarea {
  width: 100%;
  min-height: 120px;
  max-height: 300px;
  padding: 12px 14px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9375rem;
  background-color: #ffffff;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.incident-report-form textarea:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
  outline: none;
}

.incident-report-form textarea:invalid {
  border-color: #dc2626;
  background-color: #fef2f2;
}

.incident-report-form textarea:invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.incident-report-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.incident-report-attachment-icons {
  display: flex;
  gap: 10px;
}

.incident-report-icon-btn {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 8px;
  font-size: 1rem;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.incident-report-icon-btn:hover {
  background-color: #f3f4f6;
  color: #dc2626;
}

.incident-report-form-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
}

.incident-report-btn-cancel,
.incident-report-btn-submit {
  flex: 1;
}

.incident-report-btn-cancel,
.incident-report-btn-submit {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.incident-report-btn-cancel {
  text-align: center;
  background-color: #111111;
  color: #ffffff;
  justify-content: center;
}

.incident-report-btn-cancel:hover {
  background-color: #d1d5db;
}

.incident-report-btn-submit {
  background-color: #dc2626;
  color: #ffffff;
}

.incident-report-btn-submit:hover {
  background-color: #b91c1c;
}

/* File Upload Section */
.incident-report-file-upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.incident-report-file-upload-area:hover,
.incident-report-file-upload-area.drag-over {
  border-color: #dc2626;
  background-color: #fef2f2;
}

.incident-report-file-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.incident-report-file-upload-label span {
  font-size: 1rem;
  color: #374151;
  font-weight: 500;
}

.incident-report-file-upload-label small {
  font-size: 0.875rem;
  color: #6b7280;
}

/* File Errors */
.incident-report-file-errors {
  margin-top: 10px;
}

.incident-report-error-message {
  color: #dc2626;
  font-size: 0.875rem;
  margin-bottom: 5px;
}

/* Selected Files Preview */
.incident-report-selected-files {
  margin-top: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.incident-report-selected-files h4 {
  font-size: 1rem;
  color: #374151;
  margin: 0;
  padding: 16px 16px 8px 16px;
  font-weight: 600;
  border-bottom: 1px solid #f3f4f6;
}

.incident-report-file-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s, border-color 0.2s;
}

.incident-report-file-preview:last-child {
  border-bottom: none;
}

.incident-report-file-preview:hover {
  background-color: #f3f4f6;
}

.incident-report-file-icon {
  font-size: 1.25rem;
  color: #6b7280;
  flex-shrink: 0;
}

.incident-report-file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.incident-report-file-name {
  font-size: 0.875rem;
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.incident-report-file-size {
  font-size: 0.75rem;
  color: #6b7280;
}

.incident-report-remove-file-btn {
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
  flex-shrink: 0;
}

.incident-report-remove-file-btn:hover {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* Responsive Design */
/* Make both fields responsive and matching when space is constrained */
@media (max-width: 1200px) {
  .search-input {
    width: 100%;
    max-width: 240px;
    flex: 1 1 auto;
  }

  .sort-select {
    width: 100%;
    max-width: 240px;
    flex: 1 1 auto;
  }
}

/* Medium screens - ensure search and sort match */
@media (min-width: 769px) and (max-width: 1024px) {
  .search-input {
    width: 100%;
    max-width: 240px;
  }

  .sort-select {
    width: 100%;
    max-width: 240px;
  }
}

/* Desktop view - restore original fixed widths when there's plenty of space */
@media (min-width: 1201px) {
  .search-input {
    width: 240px;
    max-width: 240px;
    flex: 0 0 auto;
  }

  .sort-select {
    width: 240px;
    max-width: 240px;
    flex: 0 0 auto;
  }
}

@media (max-width: 768px) {
  .president-admin-incident-reports-container {
    padding: 15px;
  }

  .reports-header {
    flex-direction: column;
    align-items: stretch;
  }

  .reports-title {
    font-size: 1.5rem;
  }

  .reports-controls {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }

  .controls-left,
  .controls-right {
    justify-content: flex-start;
    width: 100%;
  }

  .search-box {
    width: 100%;
  }

  .search-input {
    width: 100%;
    max-width: 100%;
  }

  .sort-controls {
    width: 100%;
    justify-content: space-between;
  }

  .sort-select {
    width: 100%;
    max-width: 100%;
  }

  .select-all-btn {
    width: 90%;
    justify-content: center;
  }

  .bulk-action-btn,
  .create-report-btn {
    flex: 1;
    justify-content: center;
  }

  .controls-right > * {
    flex: 1;
    min-width: 100px;
  }

  .reports-grid {
    grid-template-columns: 1fr;
  }

  .pagination {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .pagination-controls {
    order: -1;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .value {
    text-align: left;
  }
}

@media (max-width: 400px) {
  .report-header {
    flex-wrap: wrap;
  }

  .report-checkbox {
    order: 1;
  }

  .report-icon {
    order: 2;
  }

  .report-actions {
    order: 3;
    margin-left: auto;
  }

  .report-title {
    order: 4;
    width: 100%;
    margin-top: 8px;
    flex: 1 1 100%;
  }
}

@media (max-width: 480px) {
  .incident-report-modal,
  .view-report-modal {
    max-width: 100%;
  }

  .incident-report-modal-header,
  .view-report-modal .modal-header {
    padding: 16px 20px;
  }

  .incident-report-modal-content,
  .view-report-modal .modal-content {
    padding: 16px 20px;
  }

  .incident-report-modal-actions,
  .view-report-modal .modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .incident-report-btn-secondary,
  .incident-report-btn-danger,
  .view-report-modal .modal-actions button {
    width: 100%;
  }
}
/* QuizExams.css - Styles for Quiz and Exams component */

/* Container */
.president-admin-quiz-exams-container {
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: none;
  min-height: 80vh;
  box-sizing: border-box;
  overflow-x: hidden;
}

.president-admin-quiz-exams-content {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  overflow: visible;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Header */
.president-admin-quiz-exams-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
}

.president-admin-quiz-exams-title {
  font-size: 2rem;
  font-weight: bold;
  color: #111111;
  margin: 0;
}

.view-only-notice {
  color: #585865;
  font-style: italic;
  margin: 0;
}

/* Tabs */
.president-admin-quiz-exams-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.president-admin-quiz-exams-tabs {
  display: flex;
  gap: 1rem;
  margin-right: auto;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 0;
  max-width: 100%;
}

.president-admin-quiz-exams-search-input {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  width: 300px;
  min-width: 300px;
  max-width: 400px;
  box-sizing: border-box;
  flex: 0 0 auto;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.president-admin-quiz-exams-search-input:focus {
  border-color: #ab0000;
  outline: none;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

.president-admin-quiz-exams-search-input::placeholder {
  color: #999999;
}

.president-admin-quiz-exams-tab {
  padding: 0.75rem 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: #111111;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.president-admin-quiz-exams-tab.active {
  border-bottom: 2px solid #ab0000;
  border-radius: 0;
  background: none;
}

.president-admin-quiz-exams-create-button {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
  align-items: center;
}

.president-admin-quiz-exams-delete-selected-btn {
  padding: 0.5rem 1rem;
  font-family: "Montserrat", sans-serif;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #dc3545;
  color: white;
}

.president-admin-quiz-exams-delete-selected-btn:hover {
  background-color: #c82333;
}

.president-admin-quiz-exams-create-btn {
  padding: 0.5rem 1rem;
  font-family: "Montserrat", sans-serif;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #111111;
  color: #ffffff;
}

.president-admin-quiz-exams-create-btn:hover {
  background: rgba(17, 17, 17, 0.9);
}

.president-admin-quiz-exams-next-btn {
  width: 100%;
  padding: 0.5rem 1rem;
  font-family: "Montserrat", sans-serif;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #ab0000;
  color: #ffffff;
}

.president-admin-quiz-exams-next-btn:hover {
  background: rgba(171, 0, 0, 0.9);
  box-shadow: 0 4px 15px rgba(171, 0, 0, 0.1);
}

/* List Styles */
.president-admin-quiz-exams-list {
  background: #ffffff;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

.president-admin-quiz-exams-list-header {
  display: grid;
  grid-template-columns: 50px 2.5fr 0.8fr 1.2fr 1.2fr 0.8fr 0.8fr 0.8fr 100px;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background-color: #ab0000;
  font-weight: 600;
  color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.president-admin-quiz-exams-list-header > span {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.president-admin-quiz-exams-list-header > span:nth-child(3),
.president-admin-quiz-exams-list-header > span:nth-child(4),
.president-admin-quiz-exams-list-header > span:nth-child(5),
.president-admin-quiz-exams-list-header > span:nth-child(6),
.president-admin-quiz-exams-list-header > span:nth-child(7),
.president-admin-quiz-exams-list-header > span:nth-child(8) {
  text-align: left;
}



.president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header {
  grid-template-columns: 2.5fr 1.5fr 1fr 1fr 1.2fr;
}

.president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header > span:nth-child(2),
.president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header > span:nth-child(3),
.president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header > span:nth-child(4),
.president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header > span:nth-child(5) {
  text-align: left;
}

.president-admin-quiz-exams-list-item {
  display: grid;
  grid-template-columns: 50px 2.5fr 0.8fr 1.2fr 1.2fr 0.8fr 0.8fr 0.8fr 100px;
  gap: 1rem;
  padding: 1rem 1.5rem;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow: visible;
}

.president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item {
  grid-template-columns: 2.5fr 1.5fr 1fr 1fr 1.2fr;
}

.president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item > span:nth-child(2),
.president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item > span:nth-child(3),
.president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item > span:nth-child(4),
.president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item > span:nth-child(5) {
  text-align: left;
}

.president-admin-quiz-exams-list-item:hover {
  background-color: #f8f9fa;
}

.president-admin-quiz-exams-list-item:last-child {
  border-bottom: none;
}

.president-admin-quiz-exams-item-title {
  font-weight: 500;
  color: #333;
}

.president-admin-quiz-exams-date-time-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.president-admin-quiz-exams-date {
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.2;
}

.president-admin-quiz-exams-time {
  font-size: 0.8rem;
  color: #666;
  line-height: 1.2;
}

.president-admin-quiz-exams-item-type,
.president-admin-quiz-exams-item-questions,
.president-admin-quiz-exams-item-time,
.president-admin-quiz-exams-item-date,
.president-admin-quiz-exams-item-attempts,
.president-admin-quiz-exams-item-status,
.president-admin-quiz-exams-item-score {
  color: #666;
}

.president-admin-quiz-exams-item-type,
.president-admin-quiz-exams-item-questions,
.president-admin-quiz-exams-item-date,
.president-admin-quiz-exams-item-time,
.president-admin-quiz-exams-item-attempts,
.president-admin-quiz-exams-item-status,
.president-admin-quiz-exams-item-score {
  text-align: left;
}

.president-admin-quiz-exams-item-status .president-admin-quiz-exams-status {
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
}

.president-admin-quiz-exams-status.given {
  background-color: #d4edda;
  color: #155724;
}

.president-admin-quiz-exams-status.hidden {
  background-color: #f8d7da;
  color: #721c24;
}

/* Actions */
.president-admin-quiz-exams-item-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: auto;
}

.president-admin-quiz-exams-action-dropdown {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: auto;
}

.president-admin-quiz-exams-action-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
  position: relative;
  z-index: auto;
}

.president-admin-quiz-exams-action-btn:hover {
  background-color: #f0f0f0;
}

.president-admin-quiz-exams-dropdown-menu {
  position: fixed !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 99999 !important;
  min-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: auto;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  opacity: 1 !important;
  isolation: isolate;
}

.president-admin-quiz-exams-dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  background-color: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
  pointer-events: auto;
  position: relative;
  z-index: inherit;
  opacity: 1 !important;
}

.president-admin-quiz-exams-dropdown-menu button:hover {
  background-color: #f8f9fa;
}

.president-admin-quiz-exams-delete-action:hover {
  background-color: #f8d7da;
  color: #721c24;
}

/* Question Dropdown Styles */
.president-admin-quiz-exams-question-dropdown {
  position: relative;
}

.president-admin-quiz-exams-question-action-btn {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.president-admin-quiz-exams-question-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1100;
  min-width: 150px;
  overflow: hidden;
}

.president-admin-quiz-exams-question-dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.president-admin-quiz-exams-question-dropdown-menu button:hover {
  background-color: #f8f9fa;
}

.president-admin-quiz-exams-take-quiz-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Empty State */
.president-admin-quiz-exams-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #585865;
}

/* Modal Styles */
.president-admin-quiz-exams-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  height: 100vh;
}

.quiz-form-section {
  background-color: #f0f8ff;
  padding: 2rem;
  border-radius: 18px;
  width: 90vw;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  box-sizing: border-box;
}

.president-admin-quiz-exams-form-section,
.president-admin-quiz-exams-take-modal {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 1rem;
  width: 90vw;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

/* Form Styles */
.president-admin-quiz-exams-form-group {
  margin-bottom: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.president-admin-quiz-exams-form-row {
  display: flex;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.president-admin-quiz-exams-form-row .president-admin-quiz-exams-form-group {
  flex: 1;
}

.president-admin-quiz-exams-form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

.president-admin-quiz-exams-form-group input,
.president-admin-quiz-exams-form-group select,
.president-admin-quiz-exams-form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.president-admin-quiz-exams-form-group input:focus,
.president-admin-quiz-exams-form-group select:focus,
.president-admin-quiz-exams-form-group textarea:focus {
  outline: none;
  border-color: #ab0000;
  box-shadow: 0 0 0 2px rgba(171, 0, 0, 0.25);
}

/* Quiz Actions */
.president-admin-quiz-exams-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
}

.president-admin-quiz-exams-actions-left,
.president-admin-quiz-exams-actions-right {
  display: flex;

  gap: 1rem;
}

/* Quiz Actions for Modals */
.president-admin-quiz-exams-quiz-actions {
  display: flex;
  margin-top: 1rem;
  gap: 1rem;
  align-items: center;
}

.president-admin-quiz-exams-quiz-actions-left,
.president-admin-quiz-exams-quiz-actions-right {
  flex: 1;
  display: flex;
}

.president-admin-quiz-exams-quiz-actions-btn {
  width: 100%;
  padding: 0.5rem 1rem;
  font-family: "Montserrat", sans-serif;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.president-admin-quiz-exams-quiz-actions-btn-primary {
  background: #111111;
  color: #ffffff;
}

.president-admin-quiz-exams-quiz-actions-btn-primary svg {
  color: #ffffff;
  width: 12px;
  height: auto;
}

.president-admin-quiz-exams-quiz-actions-btn-primary:hover {
  background: rgba(17, 17, 17, 0.9);
  box-shadow: 0 4px 15px rgba(171, 0, 0, 0.1);
}

.president-admin-quiz-exams-quiz-actions-btn-secondary {
  background-color: #6c757d;
  color: white;
}

.president-admin-quiz-exams-quiz-actions-btn-secondary:hover {
  background-color: #545b62;
}

/* Buttons */
.president-admin-quiz-exams-btn {
  padding: 0.5rem 1rem;
  font-family: "Montserrat", sans-serif;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.president-admin-quiz-exams-btn-primary {
  background: #ab0000;
  color: #ffffff;
}

.president-admin-quiz-exams-btn-primary svg {
  color: #ffffff;
  width: 12px;
  height: auto;
}

.president-admin-quiz-exams-btn-primary:hover {
  background: #eb4040;
}

.president-admin-quiz-exams-btn-secondary {
  background-color: #111111;
  color: #ffffff;
}

.president-admin-quiz-exams-btn-secondary:hover {
  background-color: rgba(17, 17, 17, 0.9);
}

.president-admin-quiz-exams-btn-danger {
  background-color: #dc3545;
  color: white;
}

.president-admin-quiz-exams-btn-danger:hover {
  background-color: #c82333;
}

.president-admin-quiz-exams-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Question Styles */

.president-admin-quiz-exams-question-item {
  border-radius: 0.5rem;
  background: transparent;
}

.president-admin-quiz-exams-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* Choice Styles */
.president-admin-quiz-exams-choice-item {
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
  border: none;
  background-color: #fafafa;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.president-admin-quiz-exams-choice-item input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}

.president-admin-quiz-exams-choice-item:hover {
  background-color: #f0f0f0;
}

.president-admin-quiz-exams-choice-input {
  flex: 1;
  padding: 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid #ccc;
  background-color: #ffffff;
}

.president-admin-quiz-exams-choice-delete-btn {
  background: none;
  border: none;
  color: #ab0000;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.president-admin-quiz-exams-choice-delete-btn:hover {
  background-color: #f8d7da;
  color: #721c24;
}

.president-admin-quiz-exams-choice-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Correct Answer Display */
.president-admin-quiz-exams-correct-answer-display {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: #e8f5e8;
  border: 1px solid #c3e6c3;
  border-radius: 0.25rem;
  color: #155724;
  font-size: 0.9rem;
}

/* Responsive Design - Medium Desktop (1025px - 1200px) */
@media (min-width: 1025px) and (max-width: 1200px) {
  .president-admin-quiz-exams-tabs {
    flex: 1 1 0;
    max-width: calc(100% - 200px);
    min-width: 0;
  }

  .president-admin-quiz-exams-search-input {
    width: 280px;
    min-width: 280px;
    max-width: 350px;
    flex: 0 0 auto;
  }
}

/* Responsive Design - Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .president-admin-quiz-exams-container {
    padding: 0.75rem;
  }

  .president-admin-quiz-exams-content {
    padding: 1rem;
  }

  .president-admin-quiz-exams-tab-header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    align-items: stretch;
  }

  .president-admin-quiz-exams-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .president-admin-quiz-exams-search-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 0.5rem;
    flex: 1 1 auto;
  }

  .president-admin-quiz-exams-create-button {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-top: 0.5rem;
  }

  .president-admin-quiz-exams-create-btn,
  .president-admin-quiz-exams-delete-selected-btn {
    width: auto;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    flex-shrink: 0;
  }

  .president-admin-quiz-exams-delete-selected-btn {
    order: -1;
  }

  .president-admin-quiz-exams-list-header,
  .president-admin-quiz-exams-list-item {
    grid-template-columns: 50px 2fr 0.8fr 1.2fr 1.2fr 100px;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Hide Timer (6th), Attempts (7th), Status (8th) columns */
  .president-admin-quiz-exams-list-header > span:nth-child(6),
  .president-admin-quiz-exams-list-header > span:nth-child(7),
  .president-admin-quiz-exams-list-header > span:nth-child(8) {
    display: none;
  }

  .president-admin-quiz-exams-list-item > :nth-child(6),
  .president-admin-quiz-exams-list-item > :nth-child(7),
  .president-admin-quiz-exams-list-item > :nth-child(8) {
    display: none;
  }

  /* Ensure all visible columns have proper sizing */
  .president-admin-quiz-exams-list-header > span,
  .president-admin-quiz-exams-list-item > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .president-admin-quiz-exams-item-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Results list for tablet */
  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header,
  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item {
    grid-template-columns: 2fr 1.2fr 0.9fr 0.9fr 1fr;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header > span,
  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}

/* Responsive Design - Mobile (max-width: 768px) */
@media (max-width: 768px) {
  .president-admin-quiz-exams-container {
    padding: 0.5rem;
  }

  .president-admin-quiz-exams-content {
    padding: 0.75rem;
  }

  .president-admin-quiz-exams-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .president-admin-quiz-exams-tab-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
  }

  .president-admin-quiz-exams-tabs {
    flex: 1;
    justify-content: flex-start;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .president-admin-quiz-exams-search-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .president-admin-quiz-exams-create-button {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }

  .president-admin-quiz-exams-create-btn,
  .president-admin-quiz-exams-delete-selected-btn {
    width: 100%;
    justify-content: center;
  }

  .president-admin-quiz-exams-tab-buttons {
    flex-shrink: 0;
  }

  .president-admin-quiz-exams-list-header,
  .president-admin-quiz-exams-list-item {
    grid-template-columns: 50px 1fr 100px;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem;
  }

  .president-admin-quiz-exams-list-header > span,
  .president-admin-quiz-exams-list-item > * {
    font-size: 0.85rem;
  }

  .president-admin-quiz-exams-list-header > span:nth-child(3),
  .president-admin-quiz-exams-list-header > span:nth-child(4),
  .president-admin-quiz-exams-list-header > span:nth-child(5),
  .president-admin-quiz-exams-list-header > span:nth-child(6),
  .president-admin-quiz-exams-list-header > span:nth-child(7),
  .president-admin-quiz-exams-list-header > span:nth-child(8) {
    display: none;
  }

  .president-admin-quiz-exams-list-item > :nth-child(3),
  .president-admin-quiz-exams-list-item > :nth-child(4),
  .president-admin-quiz-exams-list-item > :nth-child(5),
  .president-admin-quiz-exams-list-item > :nth-child(6),
  .president-admin-quiz-exams-list-item > :nth-child(7),
  .president-admin-quiz-exams-list-item > :nth-child(8) {
    display: none;
  }

  .president-admin-quiz-exams-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Results list mobile view - show Title and Score only */
  .president-admin-quiz-exams-results-list {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header,
  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item {
    grid-template-columns: 1fr minmax(60px, 0.4fr);
    gap: 0.5rem;
    padding: 0.5rem 0.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Hide User (2nd), Status (4th), and Date (5th) columns */
  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header > span:nth-child(2),
  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header > span:nth-child(4),
  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header > span:nth-child(5) {
    display: none !important;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item > :nth-child(2),
  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item > :nth-child(4),
  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item > :nth-child(5) {
    display: none !important;
  }

  /* Ensure Title (1st) and Score (3rd) are visible and positioned correctly */
  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header > span:nth-child(1) {
    display: block !important;
    grid-column: 1;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header > span:nth-child(3) {
    display: block !important;
    grid-column: 2;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item > :nth-child(1) {
    display: block !important;
    grid-column: 1;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item > :nth-child(3) {
    display: block !important;
    grid-column: 2;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header {
    font-size: 0.7rem;
    padding: 0.5rem 0.375rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header > span {
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    padding: 0;
    min-width: 0;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item > span {
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    padding: 0;
    min-width: 0;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-item-title {
    min-width: 0;
    font-size: 0.8rem;
    max-width: 100%;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-item-type {
    display: none;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-item-score {
    min-width: 60px;
    max-width: 80px;
    text-align: right;
    font-weight: 500;
    font-size: 0.8rem;
    flex-shrink: 0;
  }

  .president-admin-quiz-exams-form-row,
  .president-admin-quiz-exams-form-row-tight {
    flex-direction: column;
  }

  .president-admin-quiz-exams-actions {
    flex-direction: column;
    gap: 1rem;
  }

  .president-admin-quiz-exams-actions-left,
  .president-admin-quiz-exams-actions-right {
    justify-content: center;
  }

  .president-admin-quiz-exams-modal-overlay {
    padding: 0.5rem;
  }

  .president-admin-quiz-exams-form-section,
  .president-admin-quiz-exams-take-modal,
  .quiz-form-section {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    margin: 0;
    border-radius: 12px;
  }

  .quiz-form-section {
    padding: 1.25rem;
  }

  .president-admin-quiz-exams-form-group,
  .president-admin-quiz-exams-form-group-tight {
    margin-bottom: 1rem;
  }

  .president-admin-quiz-exams-form-group input,
  .president-admin-quiz-exams-form-group select,
  .president-admin-quiz-exams-form-group textarea,
  .president-admin-quiz-exams-form-group-tight input,
  .president-admin-quiz-exams-form-group-tight select,
  .president-admin-quiz-exams-form-group-tight textarea {
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
  }

  .quiz-form-section .president-admin-quiz-exams-type-select,
  .quiz-form-section .president-admin-quiz-exams-questions-input,
  .quiz-form-section .president-admin-quiz-exams-time-limit-select {
    width: 100%;
    box-sizing: border-box;
  }

  .president-admin-quiz-exams-form-row,
  .president-admin-quiz-exams-form-row-tight {
    gap: 0.75rem;
  }

  .president-admin-quiz-exams-form-group-tight {
    flex: 1 1 100%;
    min-width: 0;
  }

  .president-admin-quiz-exams-time-limit-inputs {
    flex-direction: column;
    gap: 0.5rem;
  }

  .president-admin-quiz-exams-time-input-group {
    width: 100%;
  }

  .president-admin-quiz-exams-time-input-full {
    width: 100%;
    box-sizing: border-box;
  }

  .quiz-form-stepper {
    margin-bottom: 1.5rem;
  }

  .quiz-form-stepper-container {
    gap: 0.5rem;
  }

  .quiz-form-step-line {
    width: 50px;
  }

  .quiz-form-step-title {
    font-size: 0.8rem;
  }
}

/* Modal Title */
.president-admin-quiz-exams-modal-title {
  margin-bottom: 1.5rem;
  color: #222222;
}

/* Add Answer Button */
.president-admin-quiz-exams-add-answer-btn {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  background-color: #f0f0f0;
  cursor: pointer;
  margin-top: 0.5rem;
}

/* Add Choice Button */
.president-admin-quiz-exams-add-choice-btn {
  display: flex;
  text-align: center;
  justify-content: center;
  width: 100%;
  height: auto;
  font-family: 'Roboto';
  font-weight: 500;
  align-items: center;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  background-color: transparent;
  border: solid 2px #111111;
  color: #111111;
  cursor: pointer;
  white-space: nowrap;
}

/* Points and Add Row */
.president-admin-quiz-exams-points-and-add-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 1rem;
}

.president-admin-quiz-exams-points-group {
  flex: 0 0 auto;
}


/* Points Input */
.president-admin-quiz-exams-points-input {
  width: 100px;
  padding: 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid #ccc;
}

/* Take Quiz Modal */
.president-admin-quiz-exams-take-modal-title {
  margin-bottom: 1.5rem;
  color: #222222;
}

.president-admin-quiz-exams-take-modal-question-count {
  margin-bottom: 1rem;
}

.president-admin-quiz-exams-take-modal-question-content {
  margin-bottom: 1.5rem;
}

.president-admin-quiz-exams-take-modal-question-text {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.president-admin-quiz-exams-take-modal-choice-label {
  display: block;
  margin-bottom: 0.5rem;
}

.president-admin-quiz-exams-take-modal-choice-input {
  margin-right: 0.5rem;
}

/* Action Dropdown - Mobile Override */
.president-admin-quiz-exams-action-dropdown {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.president-admin-quiz-exams-action-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.president-admin-quiz-exams-dropdown-menu {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  margin-top: 0.25rem;
  z-index: 99999 !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1 !important;
  isolation: isolate;
}

/* Ensure dropdown is visible on mobile/tablet */
@media (max-width: 1024px) {
  .president-admin-quiz-exams-dropdown-menu {
    min-width: 140px;
    z-index: 99999 !important;
  }
}

@media (max-width: 768px) {
  .president-admin-quiz-exams-dropdown-menu {
    min-width: 130px;
    font-size: 0.875rem;
    z-index: 99999 !important;
  }
  
  .president-admin-quiz-exams-dropdown-menu button {
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
  }
}

.president-admin-quiz-exams-dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.president-admin-quiz-exams-dropdown-menu button:hover {
  background-color: #f8f9fa;
}

/* Galaxy Z Fold 5 and similar narrow devices (max-width: 400px) */
@media (max-width: 400px) {
  .president-admin-quiz-exams-search-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .president-admin-quiz-exams-container {
    padding: 0.25rem;
  }

  .president-admin-quiz-exams-content {
    padding: 0.5rem;
  }

  .president-admin-quiz-exams-title {
    font-size: 1.5rem;
  }

  .president-admin-quiz-exams-tab-header {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .president-admin-quiz-exams-tab {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    flex: 1;
    min-width: 0;
  }

  .president-admin-quiz-exams-create-button {
    gap: 0.5rem;
  }

  .president-admin-quiz-exams-create-btn,
  .president-admin-quiz-exams-delete-selected-btn {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }

  .president-admin-quiz-exams-btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .president-admin-quiz-exams-modal-overlay {
    padding: 0.25rem;
  }

  .president-admin-quiz-exams-form-section,
  .president-admin-quiz-exams-take-modal {
    width: 100%;
    max-width: 100%;
    padding: 0.75rem;
    margin: 0;
    border-radius: 8px;
  }

  .quiz-form-section {
    width: 100%;
    max-width: 100%;
    padding: 1rem 0.75rem;
    border-radius: 12px;
  }

  .president-admin-quiz-exams-form-group,
  .president-admin-quiz-exams-form-group-tight {
    margin-bottom: 0.875rem;
  }

  .president-admin-quiz-exams-form-group input,
  .president-admin-quiz-exams-form-group select,
  .president-admin-quiz-exams-form-group textarea,
  .president-admin-quiz-exams-form-group-tight input,
  .president-admin-quiz-exams-form-group-tight select,
  .president-admin-quiz-exams-form-group-tight textarea {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    width: 100%;
    box-sizing: border-box;
  }

  .quiz-form-section .president-admin-quiz-exams-form-row-tight {
    flex-direction: column;
    gap: 0.5rem;
  }

  .quiz-form-section .president-admin-quiz-exams-form-group-tight {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }

  .quiz-form-section .president-admin-quiz-exams-type-select,
  .quiz-form-section .president-admin-quiz-exams-questions-input,
  .quiz-form-section .president-admin-quiz-exams-time-limit-select {
    width: 100% !important;
  }

  .president-admin-quiz-exams-time-limit-inputs {
    flex-direction: column;
    gap: 0.5rem;
  }

  .president-admin-quiz-exams-time-input-group {
    width: 100%;
  }

  .president-admin-quiz-exams-time-input-full {
    width: 100%;
    box-sizing: border-box;
  }

  .quiz-form-stepper {
    margin-bottom: 1rem;
  }

  .quiz-form-stepper-container {
    gap: 0.25rem;
  }

  .quiz-form-step-number {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }

  .quiz-form-step-line {
    width: 30px;
  }

  .quiz-form-step-title {
    font-size: 0.75rem;
  }

  .president-admin-quiz-exams-close-btn {
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    font-size: 1.25rem;
  }

  /* Extra compact results list for very small screens */
  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header,
  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item {
    grid-template-columns: 1fr minmax(55px, 0.35fr);
    gap: 0.4rem;
    padding: 0.4rem 0.4rem;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header {
    font-size: 0.7rem;
    padding: 0.4rem 0.4rem;
    font-weight: 600;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-header > span {
    font-size: 0.7rem;
    line-height: 1.2;
    padding: 0;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-list-item > span {
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 0;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-item-title {
    font-size: 0.75rem;
  }

  .president-admin-quiz-exams-results-list .president-admin-quiz-exams-item-score {
    font-size: 0.75rem;
    min-width: 45px;
    max-width: 65px;
  }

  .president-admin-quiz-exams-list-header,
  .president-admin-quiz-exams-list-item {
    padding: 0.625rem 0.5rem;
    gap: 0.375rem;
  }

  .president-admin-quiz-exams-item-title {
    font-size: 0.8rem;
  }
}

/* Large Desktop (min-width: 1200px) */
@media (min-width: 1200px) {
  .president-admin-quiz-exams-content {
    max-width: 100%;
  }

  .president-admin-quiz-exams-list-header,
  .president-admin-quiz-exams-list-item {
    gap: 1.25rem;
    padding: 1rem 2rem;
  }
}

/* Extra Large Desktop (min-width: 1440px) */
@media (min-width: 1440px) {
  .president-admin-quiz-exams-list-header,
  .president-admin-quiz-exams-list-item {
    gap: 1.5rem;
    padding: 1.25rem 2.5rem;
  }
}

/* Form Row Tight Gap */
.president-admin-quiz-exams-form-row-tight {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

.president-admin-quiz-exams-form-group-tight {
  margin-bottom: 0.5rem;
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 200px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.president-admin-quiz-exams-form-group-tight label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

.president-admin-quiz-exams-form-group-tight input,
.president-admin-quiz-exams-form-group-tight select,
.president-admin-quiz-exams-form-group-tight textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.president-admin-quiz-exams-form-group-tight input:focus,
.president-admin-quiz-exams-form-group-tight select:focus,
.president-admin-quiz-exams-form-group-tight textarea:focus {
  outline: none;
  border-color: #ab0000;
  box-shadow: 0 0 0 2px rgba(171, 0, 0, 0.25);
}

.president-admin-quiz-exams-form-row-tight .president-admin-quiz-exams-form-group {
  flex: 1;
}

/* Form Group Widths */
.president-admin-quiz-exams-type-select,
.president-admin-quiz-exams-questions-input,
.president-admin-quiz-exams-time-limit-select {
  flex: 1;
  width: auto;
}

/* Dropdown Menu Fixed Position */
.president-admin-quiz-exams-dropdown-menu-fixed {
  position: fixed;
  top: auto;
  left: auto;
}

/* Time Limit Flex */
.president-admin-quiz-exams-time-limit-flex-start {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

/* Time Limit Input */
.president-admin-quiz-exams-time-limit-input-small {
  width: 80px !important;
}

/* Stepper Styles */
.quiz-form-stepper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

.quiz-form-stepper-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
}

.quiz-form-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.quiz-form-step.active {
  opacity: 1;
}

.quiz-form-step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #333;
  transition: background-color 0.3s ease;
}

.quiz-form-step.active .quiz-form-step-number {
  background-color: #ab0000;
  color: #fff;
}

.quiz-form-step-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
  text-align: center;
  white-space: nowrap;
}

.quiz-form-step-line {
  width: 100px;
  height: 2px;
  background-color: #ddd;
  transition: background-color 0.3s ease;
}

.quiz-form-step.active + .quiz-form-step-line {
  background-color: #ab0000;
}

/* Close Button */
.president-admin-quiz-exams-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #333;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease;
  z-index: 10;
}

/* Time Limit Inputs Flex */
.president-admin-quiz-exams-time-limit-inputs {
  display: flex;
  gap: 10px;
  align-items: center;
}

.president-admin-quiz-exams-time-input-full {
  width: 100%;
}

.president-admin-quiz-exams-time-input-group {
  flex: 1;
}

/* Training Levels Styles */
.president-admin-quiz-exams-training-levels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #585865;
  border-radius: 8px;
  background-color: #ffffff;
}

.president-admin-quiz-exams-training-level-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: "Roboto", sans-serif;
  font-size: 0.95rem;
  color: #111111;
}

.president-admin-quiz-exams-training-level-item:hover {
  background-color: #f5f7f8;
}

.president-admin-quiz-exams-training-level-label {
  flex: 1;
}

/* Responsive Training Levels */
@media (max-width: 768px) {
  .president-admin-quiz-exams-training-levels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-height: none;
    overflow-y: visible;
  }

  .president-admin-quiz-exams-training-level-item {
    padding: 6px 8px;
    font-size: 0.9rem;
  }
}

/* Dark Mode Styles for President/Admin Quiz & Exams */
.theme-dark .president-admin-quiz-exams-content {
  background: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .president-admin-quiz-exams-title {
  color: var(--text-primary) !important;
}

.theme-dark .view-only-notice {
  color: var(--text-secondary) !important;
}

.theme-dark .president-admin-quiz-exams-tab {
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-quiz-exams-tab.active {
  border-bottom-color: var(--accent-primary) !important;
}

.theme-dark .president-admin-quiz-exams-search-input {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

.theme-dark .president-admin-quiz-exams-search-input:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1) !important;
}

.theme-dark .president-admin-quiz-exams-search-input::placeholder {
  color: var(--text-muted) !important;
}

.theme-dark .president-admin-quiz-exams-list {
  background: var(--bg-card) !important;
}

.theme-dark .president-admin-quiz-exams-list-item {
  background: var(--bg-card) !important;
  border-bottom-color: var(--border-primary) !important;
}

.theme-dark .president-admin-quiz-exams-list-item:hover {
  background-color: var(--bg-hover) !important;
}

.theme-dark .president-admin-quiz-exams-item-title {
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-quiz-exams-item-type,
.theme-dark .president-admin-quiz-exams-item-questions,
.theme-dark .president-admin-quiz-exams-item-time,
.theme-dark .president-admin-quiz-exams-item-date,
.theme-dark .president-admin-quiz-exams-item-attempts,
.theme-dark .president-admin-quiz-exams-item-status,
.theme-dark .president-admin-quiz-exams-item-score {
  color: var(--text-secondary) !important;
}

.theme-dark .president-admin-quiz-exams-date {
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-quiz-exams-time {
  color: var(--text-secondary) !important;
}

.theme-dark .president-admin-quiz-exams-empty-state {
  color: var(--text-secondary) !important;
}

.theme-dark .president-admin-quiz-exams-action-btn {
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-quiz-exams-action-btn:hover {
  background-color: var(--bg-hover) !important;
}

.theme-dark .president-admin-quiz-exams-dropdown-menu {
  background: var(--bg-card, #1f1f1f) !important;
  background-color: var(--bg-card, #1f1f1f) !important;
  border-color: var(--border-primary, #333333) !important;
  opacity: 1 !important;
}

.theme-dark .president-admin-quiz-exams-dropdown-menu button {
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-quiz-exams-dropdown-menu button:hover {
  background-color: var(--bg-hover) !important;
}

.theme-dark .president-admin-quiz-exams-delete-action:hover {
  background-color: rgba(244, 67, 54, 0.2) !important;
  color: var(--status-error) !important;
}

.theme-dark .president-admin-quiz-exams-question-dropdown-menu {
  background: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .president-admin-quiz-exams-question-dropdown-menu button {
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-quiz-exams-question-dropdown-menu button:hover {
  background-color: var(--bg-hover) !important;
}

.theme-dark .president-admin-quiz-exams-form-section,
.theme-dark .president-admin-quiz-exams-take-modal,
.theme-dark .quiz-form-section {
  background-color: var(--bg-modal) !important;
}

.theme-dark .president-admin-quiz-exams-modal-title,
.theme-dark .president-admin-quiz-exams-take-modal-title {
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-quiz-exams-form-group label,
.theme-dark .president-admin-quiz-exams-form-group-tight label {
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-quiz-exams-form-group input,
.theme-dark .president-admin-quiz-exams-form-group select,
.theme-dark .president-admin-quiz-exams-form-group textarea,
.theme-dark .president-admin-quiz-exams-form-group-tight input,
.theme-dark .president-admin-quiz-exams-form-group-tight select,
.theme-dark .president-admin-quiz-exams-form-group-tight textarea {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

.theme-dark .president-admin-quiz-exams-form-group input:focus,
.theme-dark .president-admin-quiz-exams-form-group select:focus,
.theme-dark .president-admin-quiz-exams-form-group textarea:focus,
.theme-dark .president-admin-quiz-exams-form-group-tight input:focus,
.theme-dark .president-admin-quiz-exams-form-group-tight select:focus,
.theme-dark .president-admin-quiz-exams-form-group-tight textarea:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 2px rgba(235, 64, 64, 0.25) !important;
}

.theme-dark .president-admin-quiz-exams-choice-item {
  background-color: var(--bg-tertiary) !important;
}

.theme-dark .president-admin-quiz-exams-choice-item:hover {
  background-color: var(--bg-hover) !important;
}

.theme-dark .president-admin-quiz-exams-choice-input {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

.theme-dark .president-admin-quiz-exams-choice-delete-btn:hover {
  background-color: rgba(244, 67, 54, 0.2) !important;
  color: var(--status-error) !important;
}

.theme-dark .president-admin-quiz-exams-correct-answer-display {
  background-color: rgba(76, 175, 80, 0.2) !important;
  border-color: var(--status-success) !important;
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-quiz-exams-quiz-actions-btn-secondary {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-quiz-exams-quiz-actions-btn-secondary:hover {
  background-color: var(--bg-hover) !important;
}

.theme-dark .president-admin-quiz-exams-close-btn {
  color: var(--text-secondary) !important;
}

.theme-dark .president-admin-quiz-exams-close-btn:hover {
  color: var(--accent-primary) !important;
  background-color: var(--bg-hover) !important;
}

.theme-dark .quiz-form-step-number {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.theme-dark .quiz-form-step.active .quiz-form-step-number {
  background-color: var(--accent-primary) !important;
  color: white !important;
}

.theme-dark .quiz-form-step-title {
  color: var(--text-primary) !important;
}

.theme-dark .quiz-form-step-line {
  background-color: var(--border-primary) !important;
}

.theme-dark .quiz-form-step.active + .quiz-form-step-line {
  background-color: var(--accent-primary) !important;
}

.theme-dark .president-admin-quiz-exams-add-choice-btn {
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-quiz-exams-add-choice-btn:hover {
  background-color: var(--bg-hover) !important;
}

.theme-dark .president-admin-quiz-exams-points-input {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

.theme-dark .president-admin-quiz-exams-training-levels {
  background-color: var(--bg-input) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .president-admin-quiz-exams-training-level-item {
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-quiz-exams-training-level-item:hover {
  background-color: var(--bg-hover) !important;
}

.theme-dark .president-admin-quiz-exams-take-modal-question-count {
  color: var(--text-secondary) !important;
}

.theme-dark .president-admin-quiz-exams-take-modal-question-text {
  color: var(--text-primary) !important;
}

/* Dark Mode: Make date/time input calendar icons white */
.theme-dark .president-admin-quiz-exams-form-group input[type="date"]::-webkit-calendar-picker-indicator,
.theme-dark .president-admin-quiz-exams-form-group input[type="time"]::-webkit-calendar-picker-indicator,
.theme-dark .president-admin-quiz-exams-form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.theme-dark .president-admin-quiz-exams-form-group input[type="date"]::-moz-calendar-picker-indicator,
.theme-dark .president-admin-quiz-exams-form-group input[type="time"]::-moz-calendar-picker-indicator,
.theme-dark .president-admin-quiz-exams-form-group input[type="datetime-local"]::-moz-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.theme-dark .president-admin-quiz-exams-form-group-tight input[type="date"]::-webkit-calendar-picker-indicator,
.theme-dark .president-admin-quiz-exams-form-group-tight input[type="time"]::-webkit-calendar-picker-indicator,
.theme-dark .president-admin-quiz-exams-form-group-tight input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.theme-dark .president-admin-quiz-exams-form-group-tight input[type="date"]::-moz-calendar-picker-indicator,
.theme-dark .president-admin-quiz-exams-form-group-tight input[type="time"]::-moz-calendar-picker-indicator,
.theme-dark .president-admin-quiz-exams-form-group-tight input[type="datetime-local"]::-moz-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}/* User Profile Redesign - New Design System */

.president-admin-user-profile-container,
.admin-user-profile-container,
.member-user-profile-container {
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-family: "Roboto", sans-serif;
  min-height: calc(100vh - 100px);
  box-sizing: border-box;
  background: transparent;
  overflow-x: hidden;
  border: none;
}

.member-user-profile-header-content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.member-user-profile-header-card {
  display: flex;
  justify-content: start;
  align-items: center;
  background: #F0F8FF;
  border-radius: 18px;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  margin-bottom: 15px;
}

.member-user-profile-info-card {
  background: #F0F8FF;
  border-radius: 18px;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
}

.president-admin-user-profile-header-card,
.admin-user-profile-header-card {
  display: flex;
  justify-content: start;
  align-items: center;
  background: #F0F8FF;
  border-radius: 18px;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  margin-bottom: 15px;
}

/* Ensure admin header card matches president exactly - explicit border styling */
.admin-user-profile-header-card {
  border: 1px solid rgba(17, 17, 17, 0.5) !important;
} 

.member-user-profile-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.president-admin-user-profile-header-content,
.admin-user-profile-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.president-admin-user-profile-info-card,
.admin-user-profile-info-card {
  background: #F0F8FF;
  border-radius: 18px;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
}

/* Profile Header Card */
.president-admin-profile-header-card,
.admin-profile-header-card,
.member-profile-header-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.president-admin-profile-header-content,
.admin-profile-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F0F8FF;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  border-radius: 18px;
  padding: 32px;
  gap: 40px;
}

.president-admin-profile-header-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
}

.admin-user-profile-header-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  flex: 1;
}

.president-admin-profile-avatar-large {
  flex-shrink: 0;
}

.admin-user-profile-avatar-large {
  flex-shrink: 0;
  align-self: flex-start;
}

.avatar-circle-large {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.avatar-circle-large svg {
  color: #585865;
}

.president-admin-profile-header-info {
  flex: 1;
}

.admin-user-profile-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.president-admin-profile-name {
  font-size: 24px;
  font-weight: 600;
  color: #111111;
  margin: 0 0 6px 0;
  font-family: "Montserrat", sans-serif;
  text-wrap: nowrap;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-user-profile-name {
  font-size: 24px;
  font-weight: 600;
  color: #111111;
  margin: 0 0 6px 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  text-wrap: nowrap;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  align-self: flex-start;
}

.president-admin-profile-title {
  font-size: 14px;
  color: #ab0000;
  margin: 0 0 4px 0;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
}

.admin-user-profile-title {
  font-size: 14px;
  color: #111111;
  margin: 0;
  padding: 0;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  text-align: left;
  align-self: flex-start;
}

.president-admin-profile-department {
  font-size: 13px;
  color: #585865;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

.president-admin-profile-header-right,
.admin-user-profile-header-right {
  flex-shrink: 0;
}

.president-admin-profile-quick-info,
.admin-user-profile-quick-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
  min-width: 400px;
}

.quick-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quick-info-label {
  font-size: 11px;
  color: #585865;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-info-value {
  font-size: 13px;
  color: #111111;
  font-weight: 600;
  font-family: "Roboto", sans-serif;
}

/* Vertical Layout for Cards */
.cards-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

/* Profile Info Cards */
.president-admin-profile-info-card,
.admin-profile-info-card,
.member-profile-info-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
}

.cards-row .president-admin-profile-info-card,
.admin-profile-info-card,
.member-profile-info-card {
  margin-bottom: 0;
  flex: 1;
}

.president-admin-profile-info-card:not(.cards-row .president-admin-profile-info-card) {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #585865;
  background: #ab0000;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.card-title {
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  text-transform: capitalize;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.edit-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #111111;
  background: #ffffff;
  color: #111111;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}

.edit-actions {
  display: flex;
  gap: 8px;
}

.save-btn,
.cancel-btn {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}

.save-btn {
  background: #5A9690;
  color: #ffffff;
}

.save-btn:hover {
  background: #4a7d78;
}

.cancel-btn {
  background: #ab0000;
  color: #ffffff;
}

.cancel-btn:hover {
  background: #8b0000;
}

.card-content {
  padding: 24px;
}

/* Info Rows */
.info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 20px;
  place-items: start;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-row-single {
  margin-bottom: 16px;
}

.info-row-single:last-child {
  margin-bottom: 0;
}

.info-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-column.full-width {
  grid-column: 1 / -1;
}

.info-label {
  font-size: 12px;
  color: #585865;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.info-text {
  font-size: 14px;
  color: #111111;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  line-height: 1.5;
  min-height: 21px;
}

.info-input,
.info-textarea,
select.info-input {
  padding: 8px 12px;
  border: 1px solid #585865;
  border-radius: 4px;
  font-size: 13px;
  font-family: "Roboto", sans-serif;
  background: #ffffff;
  color: #111111;
  transition: all 0.2s;
  width: 100%;
  box-sizing: border-box;
}

select.info-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.info-input:focus,
.info-textarea:focus,
select.info-input:focus {
  outline: none;
  border-color: #eb4040;
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1);
}

.info-textarea {
  resize: vertical;
  min-height: 60px;
  width: 100%;
  box-sizing: border-box;
}

.status-active {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(90, 150, 144, 0.2);
  color: #5A9690;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
}

/* Training List */
.training-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.training-item {
  padding: 20px;
  background: #F0F8FF;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  border-radius: 6px;
  transition: all 0.2s;
}

.training-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.training-left {
  flex: 1;
}

.training-degree {
  font-size: 14px;
  font-weight: 600;
  color: #111111;
  margin: 0 0 4px 0;
  font-family: "Montserrat", sans-serif;
}



.training-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.training-year {
  font-size: 13px;
  font-weight: 600;
  color: #111111;
  font-family: "Roboto", sans-serif;
}

.training-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  text-transform: capitalize;
}

.training-status.certified {
  background: rgba(90, 150, 144, 0.2);
  color: #5A9690;
}

.training-status.completed {
  background: #84994F;
  color: #ffffff;
}

.training-status.in_progress {
  background: #84994F;
  color: #ffffff;
}

.no-data {
  text-align: center;
  color: #585865;
  padding: 40px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
}

/* Password Change Button in Header */
.password-change-btn-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #111111;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  transition: all 0.2s;
}

/* Password Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.password-modal {
  background: #ffffff;
  border-radius: 8px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
  border: 1px solid #585865;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 2px solid #ab0000;
  background: #f5f7f8;
}

.modal-header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #111111;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-header h3 svg {
  color: #ab0000;
  font-size: 18px;
}

.modal-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #585865;
  background: #ffffff;
  color: #585865;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
}

.modal-close-btn:hover {
  background: #f5f7f8;
  border-color: #111111;
  color: #111111;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 20px 24px;
  border-top: 1px solid #585865;
  background: #f5f7f8;
}

.request-otp-btn {
  width: 100%;
  padding: 12px;
  background: #ab0000;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  transition: all 0.2s;
  margin-top: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.request-otp-btn:hover {
  background: #8b0000;
  box-shadow: 0 4px 12px rgba(171, 0, 0, 0.4);
}

.otp-notice {
  background: rgba(235, 64, 64, 0.1);
  border-left: 4px solid #eb4040;
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.otp-notice p {
  font-size: 12px;
  color: #111111;
  margin: 0;
  font-family: "Roboto", sans-serif;
  line-height: 1.6;
}

.otp-notice strong {
  color: #ab0000;
  font-weight: 600;
}

.password-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.password-field:last-child {
  margin-bottom: 0;
}

.password-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #111111;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.field-icon {
  color: #ab0000;
  font-size: 12px;
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input {
  width: 100%;
  padding: 12px 14px;
  padding-right: 45px;
  border: 1px solid #585865;
  border-radius: 6px;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  background: #ffffff;
  color: #111111;
  transition: all 0.2s;
  box-sizing: border-box;
}

.password-input:focus {
  outline: none;
  border-color: #eb4040;
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1);
}

.password-input:disabled {
  background: #f5f7f8;
  cursor: not-allowed;
  opacity: 0.6;
  color: #585865;
}

.password-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  color: #585865;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
}

.password-toggle:hover {
  background: #f5f7f8;
  color: #111111;
}

.update-password-btn,
.cancel-password-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.update-password-btn {
  background: #ab0000;
  color: #ffffff;
}

.update-password-btn:hover {
  background: #8b0000;
  box-shadow: 0 4px 12px rgba(171, 0, 0, 0.4);
}

.cancel-password-btn {
  background: #585865;
  color: #ffffff;
}

.cancel-password-btn:hover {
  background: #111111;
}

.otp-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.verify-otp-btn {
  flex: 1;
  padding: 10px 20px;
  background: #ab0000;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.verify-otp-btn:hover {
  background: #8b0000;
  box-shadow: 0 4px 12px rgba(171, 0, 0, 0.4);
}

.verify-otp-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.resend-otp-section {
  text-align: center;
  margin-top: 16px;
}

.resend-otp-btn {
  background: none;
  border: none;
  color: #ab0000;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  text-decoration: underline;
  transition: all 0.2s;
}

.resend-otp-btn:hover {
  color: #8b0000;
}

.resend-otp-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.resend-timer {
  font-size: 13px;
  color: #585865;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .president-admin-profile-quick-info,
  .admin-user-profile-quick-info {
    min-width: 350px;
  }
}

@media (max-width: 1024px) {
  .president-admin-profile-header-content,
  .admin-profile-header-content,
  .admin-user-profile-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .president-admin-profile-quick-info,
  .admin-user-profile-quick-info {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .president-admin-user-profile-container,
.admin-user-profile-container,
.member-user-profile-container {
    padding: 16px 16px 16px 0;
  }

  .president-admin-profile-header-content,
  .admin-profile-header-content,
  .admin-user-profile-header-content {
    padding: 24px;
  }

  .president-admin-profile-header-left,
  .admin-user-profile-header-left {
    flex-direction: column;
    text-align: center;
    width: 100%;
  }

  .avatar-circle-large {
    width: 80px;
    height: 80px;
    font-size: 36px;
  }

  .president-admin-profile-name,
  .admin-user-profile-name {
    font-size: 20px;
  }

  .president-admin-profile-quick-info,
  .admin-user-profile-quick-info {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cards-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .info-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .card-content {
    padding: 20px;
  }

  .training-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .training-right {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .password-actions {
    flex-direction: column;
  }

  .otp-actions {
    flex-direction: column;
    gap: 10px;
  }

  .update-password-btn,
  .cancel-password-btn,
  .verify-otp-btn {
    width: 100%;
  }

  .password-change-btn-header {
    font-size: 11px;
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  .president-admin-profile-header-content,
  .admin-profile-header-content,
  .admin-user-profile-header-content {
    padding: 20px;
  }

  .card-header {
    padding: 16px 20px;
  }

  .card-content {
    padding: 16px;
  }

  .avatar-circle-large {
    width: 70px;
    height: 70px;
    font-size: 32px;
  }

  .president-admin-profile-name,
  .admin-user-profile-name {
    font-size: 18px;
  }

  .card-title {
    font-size: 13px;
  }
}

/* Dark Mode Support - Removed legacy body.dark-mode selectors */
/* These styles are now handled by theme.css using .theme-dark class */

/* Dark Mode Styles for Member User Profile */
.theme-dark .member-user-profile-header-card,
.theme-dark .member-user-profile-info-card,
.theme-dark .president-admin-user-profile-header-card,
.theme-dark .president-admin-user-profile-info-card,
.theme-dark .admin-user-profile-header-card,
.theme-dark .admin-user-profile-info-card {
  background: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .member-user-profile-header-content,
.theme-dark .president-admin-user-profile-header-content,
.theme-dark .admin-user-profile-header-content {
  background: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .president-admin-profile-header-content,
.theme-dark .admin-user-profile-header-content {
  background: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .president-admin-profile-name,
.theme-dark .admin-user-profile-name,
.theme-dark .member-profile-name {
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-profile-department {
  color: var(--text-secondary) !important;
}

.theme-dark .quick-info-label {
  color: var(--text-secondary) !important;
}

.theme-dark .quick-info-value {
  color: var(--text-primary) !important;
}

.theme-dark .info-label {
  color: var(--text-secondary) !important;
}

.theme-dark .info-text {
  color: var(--text-primary) !important;
}

.theme-dark .training-degree,
.theme-dark .training-year {
  color: var(--text-primary) !important;
}

.theme-dark .training-item {
  background: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .no-data {
  color: var(--text-secondary) !important;
}

.theme-dark .avatar-circle-large {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .avatar-circle-large svg {
  color: var(--text-secondary) !important;
}

.theme-dark .president-admin-profile-info-card,
.theme-dark .admin-profile-info-card,
.theme-dark .admin-user-profile-info-card,
.theme-dark .member-profile-info-card {
  background: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .card-content {
  background: var(--bg-card) !important;
}

.theme-dark .president-admin-profile-header-left,
.theme-dark .admin-user-profile-header-left {
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-profile-title,
.theme-dark .admin-user-profile-title {
  color: var(--accent-primary) !important;
}

.theme-dark .status-active {
  background: rgba(90, 150, 144, 0.2) !important;
  color: var(--status-certified) !important;
}

.theme-dark .edit-icon-btn {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .edit-icon-btn:hover {
  background: var(--bg-hover) !important;
}


/* ===================================
   Events Page - Component-Scoped Styles
   Design: Red (#ab0000), Black (#111111), White (#ffffff), Grey (#585865)
   Fonts: Montserrat (headings), Roboto (body)
   =================================== */

/* Page Container */
.events-page-container {
  background: transparent;
  min-height: 100vh;
  font-family: "Roboto", sans-serif;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Header */
.events-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  background: transparent !important;
}

.events-page-title {
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  color: #111111 !important;
  margin: 0;
  letter-spacing: 1px;
}

/* Main Container wrapping tabs, controls, and content */
.events-main-container {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  border-radius: 8px;
  padding: 1.5rem 1.5rem 2rem;
  overflow: visible;
}

/* Header row inside main container (tabs + actions) */
.events-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.events-tabs-search {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.events-create-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: #111111;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  margin-left: auto;
}

.events-create-btn:hover {
  background: #000000;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.events-create-btn:active {
  transform: scale(0.98);
}

/* Tabs */
.events-tabs {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.events-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: #585865;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.events-tab:hover {
  color: #111111;
}

.events-tab.active {
  color: #ab0000;
  border-bottom-color: #ab0000;
}

/* Controls */
.events-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

.events-search-container {
  position: relative;
  flex: 0 0 auto;
  width: 250px;
  max-width: 250px;
}

.events-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #585865;
  font-size: 0.9rem;
  z-index: 1;
}

.events-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: "Roboto", sans-serif;
  font-size: 0.875rem;
  background: transparent;
  transition: all 0.3s ease;
}

.events-search-input:focus {
  outline: none;
  border-color: #111111;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

.events-delete-selected-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: #ab0000;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.events-delete-selected-btn:hover {
  background: #eb4040;
}

/* Content */
.events-content {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: #111111 !important;
}

.events-loading {
  text-align: center;
  padding: 3rem;
  color: #585865;
  font-size: 1.1rem;
}

.events-empty-state {
  text-align: center;
  padding: 3rem;
}

.events-empty-state p {
  color: #585865;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.events-create-btn-alt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: #ab0000;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.events-create-btn-alt:hover {
  background: #eb4040;
}

/* Select All */
.events-select-all {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #585865;
}

/* List Styles */
.events-page-list {
  background: #ffffff;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.events-page-list .events-list-header {
  display: grid;
  grid-template-columns: 50px 1fr 100px;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: #ab0000;
  border-bottom: 1px solid #e0e0e0;
  font-weight: 600;
  color: #ffffff;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.events-page-list .events-list-header-checkbox {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.events-page-list .events-list-header-item {
  display: flex;
  align-items: center;
}

.events-list-header-date,
.events-list-header-time,
.events-list-header-location,
.events-list-header-message,
.events-list-header-publish,
.events-list-header-expiry {
  display: none;
}

.events-page-list .events-list-item {
  display: grid;
  grid-template-columns: 50px 1fr 100px;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
  position: relative;
  background: #ffffff;
}

.events-page-list .events-list-item:hover {
  background-color: #f8f9fa;
}

.events-page-list .events-list-item:last-child {
  border-bottom: none;
}

.events-page-list .events-list-item-checkbox {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.events-page-list .events-list-item-title {
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.events-page-list .events-list-item-date,
.events-page-list .events-list-item-time,
.events-page-list .events-list-item-location,
.events-page-list .events-list-item-message,
.events-page-list .events-list-item-expiry {
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: none;
}

.events-page-list .events-list-item-message {
  max-width: 100%;
}

.events-page-list .events-list-item-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

.events-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.events-edit-btn {
  background: #111111;
  color: #ffffff;
}

.events-edit-btn:hover {
  background: #4a7670;
}

.events-delete-btn {
  background: #ab0000;
  color: #ffffff;
}

.events-delete-btn:hover {
  background: #eb4040;
}

/* Modal */
.events-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.events-modal {
  background: #ffffff;
  border-radius: 12px;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.events-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 2.5rem;
  border-bottom: 1px solid #e0e0e0;
  background: #fafafa;
  border-radius: 12px 12px 0 0;
}

.events-modal-header h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.75rem;
  color: #111111;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.events-modal-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  color: #888;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0.25rem;
  border-radius: 4px;
}

.events-modal-close:hover {
  color: #ab0000;
  background: rgba(171, 0, 0, 0.1);
}

.events-modal-form {
  padding: 2.5rem;
  width: 100%;
  box-sizing: border-box;
}

.events-form-group {
  margin-bottom: 1.75rem;
  width: 100%;
  box-sizing: border-box;
}

.events-form-label {
  display: block;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
}

.events-required {
  color: #ab0000;
}

.events-optional {
  color: #888;
  font-weight: 400;
  font-size: 0.85rem;
}

.events-form-input,
.events-form-textarea,
.events-form-select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid #d0d0d0;
  border-radius: 6px;
  font-family: "Roboto", sans-serif;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  background: #fafafa;
  box-sizing: border-box;
}

.events-form-input:focus,
.events-form-textarea:focus,
.events-form-select:focus {
  outline: none;
  border-color: #ab0000;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

.events-form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.events-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.events-modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 2rem;
  margin-top: 1rem;
  border-top: 1px solid #e0e0e0;
}

.events-btn {
  padding: 0.85rem 2rem;
  border: none;
  border-radius: 6px;
  font-family: "Roboto", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.events-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.events-btn-cancel {
  background: #6c757d;
  color: #ffffff;
}

.events-btn-cancel:hover:not(:disabled) {
  background: #5a6268;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.events-btn-submit {
  background: #ab0000;
  color: #ffffff;
}

.events-btn-submit:hover:not(:disabled) {
  background: #c90000;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(171, 0, 0, 0.3);
}

/* Galaxy Z Fold 5 and similar narrow devices (max-width: 400px) */
@media (max-width: 400px) {
  .events-search-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .events-search-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .events-tabs {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }

  .events-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.5rem 0.5rem;
    font-size: 0.8rem;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }

  .events-tab svg {
    width: 14px;
    height: 14px;
  }
}

/* Responsive */
@media (max-width: 768px) {

  .events-page-container {
    padding: 12px;
  }

  .events-main-container {
    padding: 1rem;
    overflow: hidden; /* keep children (search input focus ring) contained */
  }

  .events-content {
    width: 100%;
    max-width: 100%;
  }

  .events-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .events-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  /* Search goes above tabs and controls on mobile */
  .events-tabs-search {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .events-search-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-top: 0;
    order: 0;
    box-sizing: border-box;
  }

  .events-search-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .events-tabs {
    flex-wrap: wrap;
    gap: 0.5rem;
    order: 1;
  }

  .events-tab {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .events-controls {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 0.5rem;
  }

  .events-create-btn {
    margin-left: 0;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .events-delete-selected-btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.85rem;
  }

  .events-grid {
    grid-template-columns: 1fr;
  }

  .events-form-row {
    grid-template-columns: 1fr;
  }

  .events-modal-overlay {
    padding: 0.75rem;
  }

  .events-modal {
    max-width: 100%;
  }

  .events-modal-header {
    padding: 1.5rem 1.5rem;
  }

  .events-modal-form {
    padding: 1.5rem;
  }

  .events-form-input,
  .events-form-textarea,
  .events-form-select {
    box-sizing: border-box;
  }
}

/* Tablet View (769px - 1024px) - iPad Pro */
@media (min-width: 769px) and (max-width: 1024px) {
  .events-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .events-tabs-search {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .events-tabs {
    flex-shrink: 0;
  }
  
  .events-search-container {
    flex: 1 1 0;
    min-width: 200px;
    max-width: 100%;
    width: auto;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .events-search-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .events-create-btn {
    margin-left: 0;
    flex-shrink: 0;
    white-space: nowrap;
  }
  
  .events-controls {
    width: 100%;
    justify-content: flex-end;
    margin-top: 0;
  }
  
  /* Show all columns for iPad Pro - adjust based on active tab */
  .events-page-list .events-list-header {
    grid-template-columns: 50px 1.5fr 1fr 0.9fr 1fr 100px;
    gap: 0.75rem;
  }

  .events-page-list .events-list-item {
    grid-template-columns: 50px 1.5fr 1fr 0.9fr 1fr 100px;
    gap: 0.75rem;
  }
  
  /* For events tab: checkbox, title, date, time, location, actions */
  /* For announcements tab: checkbox, title, message, publish date, expiry date, actions */
  
  .events-list-header-date,
  .events-list-header-time,
  .events-list-header-location,
  .events-list-header-message,
  .events-list-header-publish,
  .events-list-header-expiry {
    display: flex;
    align-items: center;
  }
  
  .events-page-list .events-list-item-date,
  .events-page-list .events-list-item-time,
  .events-page-list .events-list-item-location,
  .events-page-list .events-list-item-message,
  .events-page-list .events-list-item-expiry {
    display: block;
  }
  
  /* Adjust font sizes for better readability */
  .events-list-header {
    font-size: 0.85rem;
    padding: 0.875rem 1rem;
  }
  
  .events-page-list .events-list-item {
    padding: 0.875rem 1rem;
    font-size: 0.9rem;
  }
  
  .events-action-btn {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-width: 44px;
    min-height: 44px;
  }
  
  .events-tabs {
    flex: 0 0 auto;
  }

  .events-controls {
    width: 100%;
    justify-content: flex-end;
    margin-top: 0;
    padding-top: 0;
  }
  
  /* Improve touch targets for iPad Pro */
  .events-create-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0.625rem 1.5rem;
  }
  
  .events-tab {
    min-height: 44px;
    padding: 0.875rem 1.5rem;
  }
}

/* Medium screens - stack create button below search */
@media (min-width: 900px) and (max-width: 1200px) {
  .events-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .events-tabs-search {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .events-tabs {
    flex-shrink: 0;
  }
  
  .events-search-container {
    flex: 1 1 0;
    min-width: 200px;
    max-width: 100%;
    width: auto;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .events-search-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .events-controls {
    width: 100%;
    justify-content: flex-end;
    margin-top: 0;
    box-sizing: border-box;
  }
}

/* Desktop View (1025px and above) */
@media (min-width: 1025px) {
  .events-page-list .events-list-header {
    grid-template-columns: 50px 2fr 1.5fr 1fr 1.5fr 100px;
  }

  .events-page-list .events-list-item {
    grid-template-columns: 50px 2fr 1.5fr 1fr 1.5fr 100px;
  }

  .events-list-header-date,
  .events-list-header-time,
  .events-list-header-location,
  .events-list-header-message,
  .events-list-header-publish,
  .events-list-header-expiry {
    display: flex;
  }

  .events-page-list .events-list-item-date,
  .events-page-list .events-list-item-time,
  .events-page-list .events-list-item-location,
  .events-page-list .events-list-item-message,
  .events-page-list .events-list-item-expiry {
    display: inline-block;
  }
}

/* Mobile: Hide Date, Time, Location for Events.jsx */
@media (max-width: 767px) {
  .events-page-list .events-list-header {
    grid-template-columns: 50px 1fr auto;
  }

  .events-page-list .events-list-item {
    grid-template-columns: 50px 1fr auto;
  }

  .events-list-header-date,
  .events-list-header-time,
  .events-list-header-location,
  .events-list-header-message,
  .events-list-header-publish,
  .events-list-header-expiry {
    display: none !important;
  }

  .events-page-list .events-list-item-date,
  .events-page-list .events-list-item-time,
  .events-page-list .events-list-item-location,
  .events-page-list .events-list-item-message,
  .events-page-list .events-list-item-expiry {
    display: none !important;
  }
}

@media (max-width: 480px) {

  .events-page-title {
    font-size: 1.5rem;
  }

  .events-modal-overlay {
    padding: 0.5rem;
  }

  .events-modal {
    max-width: 100%;
    margin: 0;
    border-radius: 8px;
  }

  .events-modal-header {
    padding: 1.25rem 1rem;
  }

  .events-modal-header h2 {
    font-size: 1.5rem;
  }

  .events-modal-form {
    padding: 1rem;
  }

  .events-form-group {
    margin-bottom: 1.25rem;
  }

  .events-form-input,
  .events-form-textarea,
  .events-form-select {
    padding: 0.75rem 0.875rem;
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
  }

  .events-form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .events-modal-actions {
    flex-direction: column;
    align-items: stretch;
    padding-top: 1.5rem;
    margin-top: 0.75rem;
  }

  .events-btn {
    width: 100%;
  }
}

/* Dark Mode Styles for Events Page */
.theme-dark .events-page-title {
  color: var(--text-primary) !important;
}

.theme-dark .events-main-container {
  background: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .events-tab {
  color: var(--text-secondary) !important;
}

.theme-dark .events-tab:hover {
  color: var(--text-primary) !important;
}

.theme-dark .events-tab.active {
  color: var(--accent-primary) !important;
  border-bottom-color: var(--accent-primary) !important;
}

.theme-dark .events-search-input {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

.theme-dark .events-search-input:focus {
  background: var(--bg-input) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1) !important;
}

.theme-dark .events-search-icon {
  color: var(--text-secondary) !important;
}

.theme-dark .events-content {
  color: var(--text-primary) !important;
}

.theme-dark .events-loading {
  color: var(--text-secondary) !important;
}

.theme-dark .events-empty-state p {
  color: var(--text-secondary) !important;
}

.theme-dark .events-select-all {
  border-bottom-color: var(--border-primary) !important;
}

.theme-dark .events-page-list {
  background: var(--bg-card) !important;
}

.theme-dark .events-page-list .events-list-item {
  background: var(--bg-card) !important;
  border-bottom-color: var(--border-primary) !important;
}

.theme-dark .events-page-list .events-list-item:hover {
  background-color: var(--bg-hover) !important;
}

.theme-dark .events-page-list .events-list-item-title {
  color: var(--text-primary) !important;
}

.theme-dark .events-page-list .events-list-item-date,
.theme-dark .events-page-list .events-list-item-time,
.theme-dark .events-page-list .events-list-item-location,
.theme-dark .events-page-list .events-list-item-message,
.theme-dark .events-page-list .events-list-item-expiry {
  color: var(--text-secondary) !important;
}

.theme-dark .events-modal {
  background: var(--bg-modal) !important;
}

.theme-dark .events-modal-header {
  background: var(--bg-modal-header) !important;
  border-bottom-color: var(--border-primary) !important;
}

.theme-dark .events-modal-header h2 {
  color: var(--text-primary) !important;
}

.theme-dark .events-modal-close {
  color: var(--text-secondary) !important;
}

.theme-dark .events-modal-close:hover {
  color: var(--accent-primary) !important;
  background: rgba(235, 64, 64, 0.1) !important;
}

.theme-dark .events-form-label {
  color: var(--text-primary) !important;
}

.theme-dark .events-optional {
  color: var(--text-muted) !important;
}

.theme-dark .events-form-input,
.theme-dark .events-form-textarea,
.theme-dark .events-form-select {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

.theme-dark .events-form-input:focus,
.theme-dark .events-form-textarea:focus,
.theme-dark .events-form-select:focus {
  background: var(--bg-input) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1) !important;
}

.theme-dark .events-modal-actions {
  border-top-color: var(--border-primary) !important;
}

.theme-dark .events-btn-cancel {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.theme-dark .events-btn-cancel:hover:not(:disabled) {
  background: var(--bg-hover) !important;
}

/* Dark Mode: Make date/time input calendar icons white */
.theme-dark .events-form-input[type="date"]::-webkit-calendar-picker-indicator,
.theme-dark .events-form-input[type="time"]::-webkit-calendar-picker-indicator,
.theme-dark .events-form-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.theme-dark .events-form-input[type="date"]::-moz-calendar-picker-indicator,
.theme-dark .events-form-input[type="time"]::-moz-calendar-picker-indicator,
.theme-dark .events-form-input[type="datetime-local"]::-moz-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* ===================================
   President & Admin Events - Responsive List Styles
   =================================== */

/* Base styles for tab header in president/admin containers */
.president-admin-events-tab-header,
.admin-events-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Search field width fix for president/admin roles */
.president-admin-events-tab-header input[type="text"],
.president-admin-events-tab-header .events-search-container,
.admin-events-tab-header input[type="text"],
.admin-events-tab-header .events-search-container,
.president-admin-events-container .events-search-container,
.admin-events-container .events-search-container,
.president-admin-events-container input[type="text"],
.admin-events-container input[type="text"],
.president-admin-events-container .events-search-input,
.admin-events-container .events-search-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.president-admin-events-tabs,
.admin-events-tabs {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.president-admin-events-tab-header .tab-buttons,
.admin-events-tab-header .tab-buttons {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-shrink: 0;
}

/* Base styles for list header and items in president/admin containers */
.president-admin-events-list .list-header,
.admin-events-list .list-header {
  display: grid;
  grid-template-columns: 50px 2fr 1fr 120px 1fr auto;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background-color: #ab0000;
  font-weight: 600;
  color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.president-admin-events-list .list-item,
.admin-events-list .list-item {
  display: grid;
  grid-template-columns: 50px 2fr 1fr 120px 1fr auto;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
  background-color: #ffffff;
  font-family: "Roboto", sans-serif;
}

.president-admin-events-list .item-title,
.admin-events-list .item-title {
  font-weight: 600;
  color: #111111;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.president-admin-events-list .list-item:hover,
.admin-events-list .list-item:hover {
  background-color: #f8f9fa;
}

.president-admin-events-list .list-item:last-child,
.admin-events-list .list-item:last-child {
  border-bottom: none;
}

.president-admin-events-list .item-date,
.admin-events-list .item-date {
  font-weight: 500;
  color: #111111;
  font-size: 0.95rem;
}

.president-admin-events-list .item-time,
.admin-events-list .item-time {
  color: #585865;
  font-size: 0.9rem;
}

.president-admin-events-list .item-location,
.admin-events-list .item-location {
  color: #585865;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.president-admin-events-list .item-actions,
.admin-events-list .item-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

/* Responsive: Tablet (769px - 1024px) - iPad Pro */
@media (min-width: 769px) and (max-width: 1024px) {
  .president-admin-events-tab-header,
  .admin-events-tab-header {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    flex-wrap: wrap;
  }

  .president-admin-events-tabs,
  .admin-events-tabs {
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .president-admin-events-tab-header .events-search-container,
  .admin-events-tab-header .events-search-container,
  .president-admin-events-container .events-search-container,
  .admin-events-container .events-search-container {
    flex: 1 1 auto;
    min-width: 200px;
    max-width: none;
    width: auto;
    margin-top: 0;
    order: 0;
  }
  
  .president-admin-events-tab-header .events-search-input,
  .admin-events-tab-header .events-search-input,
  .president-admin-events-container .events-search-input,
  .admin-events-container .events-search-input {
    width: 100%;
  }

  .president-admin-events-tab-header .tab-buttons,
  .admin-events-tab-header .tab-buttons {
    flex-shrink: 0;
    margin-top: 0;
    gap: 0.75rem;
    order: 0;
  }

  .president-admin-events-list .list-header,
  .admin-events-list .list-header {
    grid-template-columns: 50px 1.5fr 1fr 0.9fr 1fr auto;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    font-size: 0.85rem;
  }

  .president-admin-events-list .list-item,
  .admin-events-list .list-item {
    grid-template-columns: 50px 1.5fr 1fr 0.9fr 1fr auto;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    font-size: 0.9rem;
  }

  /* Show all columns on iPad Pro */
  .president-admin-events-list .list-header > span,
  .admin-events-list .list-header > span,
  .president-admin-events-list .item-time,
  .admin-events-list .item-time {
    display: flex;
  }
  
  .president-admin-events-list .item-time,
  .admin-events-list .item-time {
    display: block;
  }

  .president-admin-events-list .item-title,
  .admin-events-list .item-title {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .president-admin-events-list .item-date,
  .admin-events-list .item-date {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .president-admin-events-list .item-location,
  .admin-events-list .item-location {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .president-admin-events-list .item-actions,
  .admin-events-list .item-actions {
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .president-admin-events-list .list-header > span,
  .president-admin-events-list .list-item > span,
  .admin-events-list .list-header > span,
  .admin-events-list .list-item > span {
    min-width: 0;
    overflow: hidden;
  }
}


/* Responsive: Mobile - Show only Title and Actions */
@media (max-width: 768px) {
  .president-admin-events-tab-header,
  .admin-events-tab-header {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .president-admin-events-tab-header input[type="text"],
  .president-admin-events-tab-header .events-search-container,
  .admin-events-tab-header input[type="text"],
  .admin-events-tab-header .events-search-container,
  .president-admin-events-container .events-search-container,
  .admin-events-container .events-search-container,
  .president-admin-events-container .events-search-input,
  .admin-events-container .events-search-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .president-admin-events-tabs,
  .admin-events-tabs {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .president-admin-events-tabs .tab,
  .admin-events-tabs .tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    flex: 1;
    min-width: 0;
  }

  .president-admin-events-tab-header .tab-buttons,
  .admin-events-tab-header .tab-buttons {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }

  .president-admin-events-tab-header .tab-buttons button,
  .admin-events-tab-header .tab-buttons button {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    justify-content: center;
  }

  .president-admin-events-list .list-header,
  .admin-events-list .list-header {
    grid-template-columns: 50px 1fr auto;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
  }

  .president-admin-events-list .list-item,
  .admin-events-list .list-item {
    grid-template-columns: 50px 1fr auto;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }

  .president-admin-events-list .list-header > span:nth-child(3),
  .president-admin-events-list .list-header > span:nth-child(4),
  .president-admin-events-list .list-header > span:nth-child(5),
  .admin-events-list .list-header > span:nth-child(3),
  .admin-events-list .list-header > span:nth-child(4),
  .admin-events-list .list-header > span:nth-child(5),
  .president-admin-events-list .item-date,
  .president-admin-events-list .item-time,
  .president-admin-events-list .item-location,
  .admin-events-list .item-date,
  .admin-events-list .item-time,
  .admin-events-list .item-location {
    display: none;
  }

  .president-admin-events-list .item-title,
  .admin-events-list .item-title {
    font-size: 0.9rem;
  }

  .president-admin-events-list .item-actions,
  .admin-events-list .item-actions {
    gap: 0.25rem;
  }

  .president-admin-events-list .edit-btn,
  .president-admin-events-list .delete-btn,
  .admin-events-list .edit-btn,
  .admin-events-list .delete-btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.85rem;
  }

  .president-admin-events-list .edit-btn .events-icon-spacing,
  .president-admin-events-list .delete-btn .events-icon-spacing,
  .admin-events-list .edit-btn .events-icon-spacing,
  .admin-events-list .delete-btn .events-icon-spacing {
    margin-right: 0.125rem;
  }
}

/* Responsive: Small mobile - Compact layout */
@media (max-width: 480px) {
  .president-admin-events-tab-header,
  .admin-events-tab-header {
    padding: 0.5rem;
  }

  .president-admin-events-tabs .tab,
  .admin-events-tabs .tab {
    padding: 0.375rem 0.5rem;
    font-size: 0.8rem;
  }

  .president-admin-events-tab-header .tab-buttons button,
  .admin-events-tab-header .tab-buttons button {
    padding: 0.375rem 0.5rem;
    font-size: 0.8rem;
  }

  .president-admin-events-list .list-header,
  .admin-events-list .list-header {
    grid-template-columns: 40px 1fr auto;
    padding: 0.625rem 0.75rem;
    font-size: 0.8rem;
  }

  .president-admin-events-list .list-item,
  .admin-events-list .list-item {
    grid-template-columns: 40px 1fr auto;
    padding: 0.625rem 0.75rem;
  }

  .president-admin-events-list .item-title,
  .admin-events-list .item-title {
    font-size: 0.85rem;
  }

  .president-admin-events-list .item-actions,
  .admin-events-list .item-actions {
    flex-direction: column;
    gap: 0.25rem;
  }

  .president-admin-events-list .edit-btn,
  .president-admin-events-list .delete-btn,
  .admin-events-list .edit-btn,
  .admin-events-list .delete-btn {
    width: 100%;
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
    justify-content: center;
  }
}

/* Dark mode support for president/admin events */
.theme-dark .president-admin-events-list .list-item,
.theme-dark .admin-events-list .list-item {
  background-color: var(--bg-card);
  border-bottom-color: var(--border-primary);
}

.theme-dark .president-admin-events-list .list-item:hover,
.theme-dark .admin-events-list .list-item:hover {
  background-color: var(--bg-hover);
}

.theme-dark .president-admin-events-list .item-title,
.theme-dark .admin-events-list .item-title {
  color: var(--text-primary);
}

.theme-dark .president-admin-events-list .item-date,
.theme-dark .admin-events-list .item-date {
  color: var(--text-primary);
}

.theme-dark .president-admin-events-list .item-time,
.theme-dark .president-admin-events-list .item-location,
.theme-dark .admin-events-list .item-time,
.theme-dark .admin-events-list .item-location {
  color: var(--text-secondary);
}/* Admin User Profile Styles - Inherits from President but can be customized */
/* Note: Header card styles are defined in PresidentSections/UserProfile.css */
/* This ensures admin matches member/president styling exactly */

/* Training List */
.training-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.training-item {
  padding: 20px;
  background: #F0F8FF;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  border-radius: 6px;
  transition: all 0.2s;
}

.training-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.training-left {
  flex: 1;
}

.training-degree {
  font-size: 14px;
  font-weight: 600;
  color: #111111;
  margin: 0 0 4px 0;
  font-family: "Montserrat", sans-serif;
}



.training-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.training-year {
  font-size: 13px;
  font-weight: 600;
  color: #111111;
  font-family: "Roboto", sans-serif;
}

.training-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  text-transform: capitalize;
}

.training-status.certified {
  background: rgba(90, 150, 144, 0.2);
  color: #5A9690;
}

.training-status.completed {
  background: #84994F;
  color: #ffffff;
}

.training-status.in_progress {
  background: #84994F;
  color: #ffffff;
}

.no-data {
  text-align: center;
  color: #585865;
  padding: 40px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
}
/* MemberQuizAndExams.css - Styles for Member Quiz and Exams component */

/* Container */
.member-quiz-and-exams-container {
  width: 100%;
  background: transparent;
  border: none;
  min-height: 80vh;
}

.member-quiz-and-exams-content {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  overflow: visible;
}

/* Header */
.member-quiz-and-exams-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
}

.member-quiz-and-exams-title {
  font-size: 2rem;
  font-weight: bold;
  color: #111111;
  margin: 0;
}

.view-only-notice {
  color: #585865;
  font-style: italic;
  margin: 0;
}

/* Tabs */
.member-quiz-and-exams-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.member-quiz-and-exams-tabs {
  display: flex;
  gap: 1rem;
  margin-right: auto;
  align-items: center;
}

.member-quiz-and-exams-search-input {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  width: 250px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.member-quiz-and-exams-search-input:focus {
  border-color: #ab0000;
  outline: none;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

.member-quiz-and-exams-search-input::placeholder {
  color: #999999;
}

.member-quiz-and-exams-tab {
  padding: 0.75rem 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: #111111;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.member-quiz-and-exams-tab.active {
  border-bottom: 2px solid #ab0000;
  border-radius: 0;
  background: none;
}

/* List Styles */
.member-quiz-and-exams-list {
  background: #ffffff;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.member-quiz-and-exams-list-header {
  display: grid;
  grid-template-columns: 2.5fr 0.8fr 0.8fr 1fr 1fr 0.8fr 100px;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background-color: #ab0000;
  font-weight: 600;
  color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.member-quiz-and-exams-list-header > span {
  text-align: left;
  white-space: nowrap;
}

.member-quiz-and-exams-list-header > span:nth-child(2),
.member-quiz-and-exams-list-header > span:nth-child(3),
.member-quiz-and-exams-list-header > span:nth-child(4),
.member-quiz-and-exams-list-header > span:nth-child(5),
.member-quiz-and-exams-list-header > span:nth-child(6) {
  text-align: right;
}

.member-quiz-and-exams-results-list .member-quiz-and-exams-list-header {
  grid-template-columns: 2.5fr 1fr 1fr 1fr 1.2fr;
}

.member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(2),
.member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(3),
.member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(4),
.member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(5) {
  text-align: right;
}

.member-quiz-and-exams-list-item {
  display: grid;
  grid-template-columns: 2.5fr 0.8fr 0.8fr 1fr 1fr 0.8fr 100px;
  gap: 1rem;
  padding: 1rem 1.5rem;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
  position: relative;
}

.member-quiz-and-exams-results-list .member-quiz-and-exams-list-item {
  grid-template-columns: 2.5fr 1fr 1fr 1fr 1.2fr;
}

.member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > span:nth-child(2),
.member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > span:nth-child(3),
.member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > span:nth-child(4),
.member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > span:nth-child(5) {
  text-align: right;
}

.member-quiz-and-exams-list-item:hover {
  background-color: #f8f9fa;
}

.member-quiz-and-exams-list-item:last-child {
  border-bottom: none;
}

.member-quiz-and-exams-date-time-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-quiz-and-exams-date {
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.2;
}

.member-quiz-and-exams-time {
  font-size: 0.8rem;
  color: #666;
  line-height: 1.2;
}

.member-quiz-and-exams-item-title {
  font-weight: 500;
  color: #333;
}

.member-quiz-and-exams-item-type,
.member-quiz-and-exams-item-time,
.member-quiz-and-exams-item-date,
.member-quiz-and-exams-item-max-attempts,
.member-quiz-and-exams-item-score {
  color: #666;
  text-align: right;
}

/* Status */
.member-quiz-and-exams-item-status {
  text-align: right;
  font-weight: 600;
}

.member-quiz-and-exams-item-status.passed {
  color: #4caf50;
}

.member-quiz-and-exams-item-status.failed {
  color: #f44336;
}

/* Actions */
.member-quiz-and-exams-item-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.member-quiz-and-exams-take-quiz-btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
  font-family: "Montserrat", sans-serif;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  width: auto;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #ab0000;
  color: #ffffff;
  white-space: nowrap;
}

.member-quiz-and-exams-take-quiz-btn svg {
  color: #ffffff;
  width: 12px;
  height: auto;
}

.member-quiz-and-exams-take-quiz-btn:hover:not(:disabled) {
  background: #eb4040;
}

.member-quiz-and-exams-take-quiz-btn:disabled,
.member-quiz-and-exams-taken-btn {
  opacity: 0.6;
  cursor: not-allowed;
  background: #999999;
}

.member-quiz-and-exams-taken-btn:hover {
  background: #999999;
}

/* Empty State */
.member-quiz-and-exams-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #585865;
}

/* Modal Styles */
.member-quiz-and-exams-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  height: 100vh;
}

.member-quiz-and-exams-take-modal {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 1rem;
  width: 90vw;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
  box-sizing: border-box;
}

.member-quiz-and-exams-take-modal > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Buttons */
.member-quiz-and-exams-btn {
  padding: 0.75rem 1.5rem;
  font-family: "Montserrat", sans-serif;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  width: auto;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.member-quiz-and-exams-btn-primary {
  background: #ab0000;
  color: #ffffff;
}

.member-quiz-and-exams-btn-primary svg {
  color: #ffffff;
  width: 12px;
  height: auto;
}

.member-quiz-and-exams-btn-primary:hover {
  background: #eb4040;
}

.member-quiz-and-exams-btn-secondary {
  background-color: #111111;
  color: #ffffff;
}

.member-quiz-and-exams-btn-secondary:hover {
  background-color: rgba(17, 17, 17, 0.9);
}

.member-quiz-and-exams-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Take Quiz Modal */
.member-quiz-and-exams-take-modal-title {
  margin-bottom: 1rem;
  color: #222222;
  font-family: "Montserrat", sans-serif;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.member-quiz-and-exams-review-badge {
  background: #4caf50;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Timer */
.member-quiz-and-exams-timer {
  background: #f0f8ff;
  border: 2px solid #2196f3;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2196f3;
}

.member-quiz-and-exams-timer-warning {
  color: #f44336;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Score Summary */
.member-quiz-and-exams-score-summary {
  background: #e8f5e9;
  border: 2px solid #4caf50;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #2e7d32;
}

.member-quiz-and-exams-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  transition: color 0.2s ease;
}

.member-quiz-and-exams-close-btn:hover {
  color: #ab0000;
}

.member-quiz-and-exams-take-modal-question-count {
  margin-bottom: 1rem;
}

.member-quiz-and-exams-take-modal-question-content {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.member-quiz-and-exams-take-modal-question-text {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  font-family: "Montserrat", sans-serif;
}

.member-quiz-and-exams-take-modal-choice-label {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Montserrat", sans-serif;
}

.member-quiz-and-exams-take-modal-choice-label:hover:not(.member-quiz-and-exams-choice-correct):not(.member-quiz-and-exams-choice-incorrect) {
  background-color: #f0f8ff;
  border-color: #ab0000;
}

/* Review Mode Styles */
.member-quiz-and-exams-choice-correct {
  background-color: #d4edda !important;
  border-color: #4caf50 !important;
}

.member-quiz-and-exams-choice-incorrect {
  background-color: #f8d7da !important;
  border-color: #f44336 !important;
}

.member-quiz-and-exams-check-mark {
  color: #4caf50;
  font-weight: bold;
  font-size: 1.2rem;
  margin-left: 0.5rem;
}

.member-quiz-and-exams-x-mark {
  color: #f44336;
  font-weight: bold;
  font-size: 1.2rem;
  margin-left: 0.5rem;
}

.member-quiz-and-exams-review-answer-info {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  background: #f9f9f9;
}

.member-quiz-and-exams-correct-answer {
  color: #4caf50;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.member-quiz-and-exams-incorrect-answer {
  color: #f44336;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.member-quiz-and-exams-correct-answer-display {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  color: #856404;
}

.member-quiz-and-exams-take-modal-choice-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #e0e0e0;
  border-radius: 50%;
  background-color: #ffffff;
  margin-right: 0.75rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.member-quiz-and-exams-take-modal-choice-input:checked {
  border-color: #ab0000;
  background-color: #ab0000;
  box-shadow: inset 0 0 0 4px #ffffff;
}

.member-quiz-and-exams-take-modal-choice-input:hover {
  border-color: #ab0000;
}

.member-quiz-and-exams-take-modal-input {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  background-color: #ffffff;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.member-quiz-and-exams-take-modal-input:focus {
  border-color: #ab0000;
  outline: none;
  box-shadow: 0 0 0 3px rgba(171, 0, 0, 0.1);
}

/* Confirmation Modal */
.member-quiz-and-exams-confirmation-modal {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 1rem;
  width: 90vw;
  max-width: 400px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.member-quiz-and-exams-confirmation-title {
  margin-bottom: 1rem;
  color: #222222;
  font-family: "Montserrat", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
}

.member-quiz-and-exams-confirmation-message {
  margin-bottom: 1.5rem;
  color: #666;
  font-size: 1rem;
  line-height: 1.5;
}

.member-quiz-and-exams-confirmation-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.member-quiz-and-exams-confirmation-actions button {
  flex: 1;
  max-width: 120px;
}

/* Quiz Actions for Modals */
.member-quiz-and-exams-quiz-actions {
  display: flex;
  margin-top: 1rem;
  gap: 1rem;
  align-items: center;
}

.member-quiz-and-exams-quiz-actions-left,
.member-quiz-and-exams-quiz-actions-right {
  flex: 1;
  display: flex;
  gap: 0.5rem;
}

.member-quiz-and-exams-quiz-actions-left button,
.member-quiz-and-exams-quiz-actions-right button {
  flex: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
  .member-quiz-and-exams-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .member-quiz-and-exams-title {
    font-size: 1.5rem;
  }

  .member-quiz-and-exams-tab-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .member-quiz-and-exams-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
  }

  .member-quiz-and-exams-tab {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    flex: 0 0 auto;
  }

  .member-quiz-and-exams-search-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .member-quiz-and-exams-list-header,
  .member-quiz-and-exams-list-item {
    grid-template-columns: 1.5fr 0.8fr 80px;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .member-quiz-and-exams-list-header > span:nth-child(3),
  .member-quiz-and-exams-list-header > span:nth-child(4),
  .member-quiz-and-exams-list-header > span:nth-child(5),
  .member-quiz-and-exams-list-header > span:nth-child(6) {
    display: none;
  }

  .member-quiz-and-exams-list-item > :nth-child(3),
  .member-quiz-and-exams-list-item > :nth-child(4),
  .member-quiz-and-exams-list-item > :nth-child(5),
  .member-quiz-and-exams-list-item > :nth-child(6) {
    display: none;
  }

  .member-quiz-and-exams-list-header > span,
  .member-quiz-and-exams-list-item > span {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .member-quiz-and-exams-item-title {
    min-width: 0;
  }

  .member-quiz-and-exams-take-quiz-btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    gap: 0.25rem;
  }

  .member-quiz-and-exams-take-quiz-btn svg {
    width: 10px;
  }

  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-header,
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-item {
    grid-template-columns: 1.5fr 1fr;
  }

  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(2),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(4),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(5) {
    display: none !important;
  }

  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > :nth-child(2),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > :nth-child(4),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > :nth-child(5) {
    display: none !important;
  }

  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(1),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(3),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > :nth-child(1),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > :nth-child(3) {
    display: block !important;
  }

  .member-quiz-and-exams-take-modal {
    width: 95vw;
    max-width: 95vw;
    padding: 1rem;
    margin: 0.5rem;
  }
}

/* Extra small screens and foldable devices */
@media (max-width: 480px) {
  .member-quiz-and-exams-container {
    padding: 0.5rem;
  }

  .member-quiz-and-exams-content {
    padding: 0.5rem;
  }

  .member-quiz-and-exams-title {
    font-size: 1.25rem;
  }

  .member-quiz-and-exams-tab-header {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .member-quiz-and-exams-tabs {
    gap: 0.25rem;
  }

  .member-quiz-and-exams-tab {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
  }

  .member-quiz-and-exams-search-input {
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  .member-quiz-and-exams-list-header,
  .member-quiz-and-exams-list-item {
    grid-template-columns: 1fr 0.7fr 70px;
    gap: 0.4rem;
    padding: 0.6rem 0.5rem;
  }

  .member-quiz-and-exams-list-header > span,
  .member-quiz-and-exams-list-item > span {
    font-size: 0.75rem;
  }

  .member-quiz-and-exams-take-quiz-btn {
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
    white-space: nowrap;
  }

  .member-quiz-and-exams-take-quiz-btn svg {
    width: 8px;
  }

  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-header,
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-item {
    grid-template-columns: 1fr 0.9fr;
  }

  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(2),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(4),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(5) {
    display: none !important;
  }

  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > :nth-child(2),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > :nth-child(4),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > :nth-child(5) {
    display: none !important;
  }

  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(1),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-header > span:nth-child(3),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > :nth-child(1),
  .member-quiz-and-exams-results-list .member-quiz-and-exams-list-item > :nth-child(3) {
    display: block !important;
  }

  .member-quiz-and-exams-btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }

  .member-quiz-and-exams-take-modal {
    width: 98vw;
    max-width: 98vw;
    padding: 0.75rem;
    margin: 0.25rem;
  }
}

/* Galaxy Z Fold 5 and similar foldable devices (folded state) */
@media (max-width: 320px) {
  .member-quiz-and-exams-list-header,
  .member-quiz-and-exams-list-item {
    grid-template-columns: 1fr 60px;
    gap: 0.3rem;
    padding: 0.5rem;
  }

  .member-quiz-and-exams-list-header > span:nth-child(2),
  .member-quiz-and-exams-list-item > :nth-child(2) {
    display: none;
  }

  .member-quiz-and-exams-list-header > span:last-child,
  .member-quiz-and-exams-list-item > :last-child {
    justify-self: end;
  }

  .member-quiz-and-exams-take-quiz-btn {
    padding: 0.25rem 0.4rem;
    font-size: 0.65rem;
    min-width: auto;
    gap: 0.2rem;
  }

  .member-quiz-and-exams-take-quiz-btn svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
  }
}

/* Dark Mode Styles for Member Quiz & Exams */
.theme-dark .member-quiz-and-exams-content {
  background: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .member-quiz-and-exams-title {
  color: var(--text-primary) !important;
}

.theme-dark .view-only-notice {
  color: var(--text-secondary) !important;
}

.theme-dark .member-quiz-and-exams-tab {
  color: var(--text-primary) !important;
}

.theme-dark .member-quiz-and-exams-tab.active {
  border-bottom-color: var(--accent-primary) !important;
}

.theme-dark .member-quiz-and-exams-search-input {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

.theme-dark .member-quiz-and-exams-search-input:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1) !important;
}

.theme-dark .member-quiz-and-exams-search-input::placeholder {
  color: var(--text-muted) !important;
}

.theme-dark .member-quiz-and-exams-list {
  background: var(--bg-card) !important;
}

.theme-dark .member-quiz-and-exams-list-item {
  background: var(--bg-card) !important;
  border-bottom-color: var(--border-primary) !important;
}

.theme-dark .member-quiz-and-exams-list-item:hover {
  background-color: var(--bg-hover) !important;
}

.theme-dark .member-quiz-and-exams-item-title {
  color: var(--text-primary) !important;
}

.theme-dark .member-quiz-and-exams-item-type,
.theme-dark .member-quiz-and-exams-item-time,
.theme-dark .member-quiz-and-exams-item-date,
.theme-dark .member-quiz-and-exams-item-max-attempts,
.theme-dark .member-quiz-and-exams-item-score {
  color: var(--text-secondary) !important;
}

.theme-dark .member-quiz-and-exams-date {
  color: var(--text-primary) !important;
}

.theme-dark .member-quiz-and-exams-time {
  color: var(--text-secondary) !important;
}

.theme-dark .member-quiz-and-exams-empty-state {
  color: var(--text-secondary) !important;
}

.theme-dark .member-quiz-and-exams-take-modal {
  background-color: var(--bg-modal) !important;
}

.theme-dark .member-quiz-and-exams-take-modal-title {
  color: var(--text-primary) !important;
}

.theme-dark .member-quiz-and-exams-timer {
  background: var(--bg-tertiary) !important;
  border-color: var(--accent-secondary) !important;
  color: var(--accent-secondary) !important;
}

.theme-dark .member-quiz-and-exams-timer-warning {
  color: var(--status-error) !important;
}

.theme-dark .member-quiz-and-exams-score-summary {
  background: rgba(90, 150, 144, 0.2) !important;
  border-color: var(--status-certified) !important;
  color: var(--status-certified) !important;
}

.theme-dark .member-quiz-and-exams-close-btn {
  color: var(--text-secondary) !important;
}

.theme-dark .member-quiz-and-exams-close-btn:hover {
  color: var(--accent-primary) !important;
}

.theme-dark .member-quiz-and-exams-take-modal-question-content {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .member-quiz-and-exams-take-modal-question-text {
  color: var(--text-primary) !important;
}

.theme-dark .member-quiz-and-exams-take-modal-choice-label {
  background-color: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

.theme-dark .member-quiz-and-exams-take-modal-choice-label:hover:not(.member-quiz-and-exams-choice-correct):not(.member-quiz-and-exams-choice-incorrect) {
  background-color: var(--bg-hover) !important;
  border-color: var(--accent-primary) !important;
}

.theme-dark .member-quiz-and-exams-choice-correct {
  background-color: rgba(76, 175, 80, 0.2) !important;
  border-color: var(--status-success) !important;
}

.theme-dark .member-quiz-and-exams-choice-incorrect {
  background-color: rgba(244, 67, 54, 0.2) !important;
  border-color: var(--status-error) !important;
}

.theme-dark .member-quiz-and-exams-review-answer-info {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.theme-dark .member-quiz-and-exams-correct-answer {
  color: var(--status-success) !important;
}

.theme-dark .member-quiz-and-exams-incorrect-answer {
  color: var(--status-error) !important;
}

.theme-dark .member-quiz-and-exams-correct-answer-display {
  background: rgba(255, 193, 7, 0.2) !important;
  border-color: var(--status-warning) !important;
  color: var(--text-primary) !important;
}

.theme-dark .member-quiz-and-exams-take-modal-choice-input {
  border-color: var(--border-primary) !important;
  background-color: var(--bg-card) !important;
}

.theme-dark .member-quiz-and-exams-take-modal-choice-input:checked {
  border-color: var(--accent-primary) !important;
  background-color: var(--accent-primary) !important;
}

.theme-dark .member-quiz-and-exams-take-modal-choice-input:hover {
  border-color: var(--accent-primary) !important;
}

.theme-dark .member-quiz-and-exams-take-modal-input {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

.theme-dark .member-quiz-and-exams-take-modal-input:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(235, 64, 64, 0.1) !important;
}

.theme-dark .member-quiz-and-exams-confirmation-modal {
  background-color: var(--bg-modal) !important;
}

.theme-dark .member-quiz-and-exams-confirmation-title {
  color: var(--text-primary) !important;
}

.theme-dark .member-quiz-and-exams-confirmation-message {
  color: var(--text-secondary) !important;
}

.theme-dark .member-quiz-and-exams-btn-secondary {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.theme-dark .member-quiz-and-exams-btn-secondary:hover {
  background-color: var(--bg-hover) !important;
}

.theme-dark .member-quiz-and-exams-take-modal-question-count {
  color: var(--text-secondary) !important;
}

.theme-dark .member-quiz-and-exams-review-badge {
  background: var(--status-success) !important;
  color: white !important;
}/* Member User Profile Styles - Inherits from President but can be customized */

/* Training List */
.training-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.training-item {
  padding: 20px;
  background: #F0F8FF;
  border: 1px solid rgba(17, 17, 17, 0.5);
  box-shadow: -6px 8px 8px rgba(17, 17, 17, 0.07);
  border-radius: 6px;
  transition: all 0.2s;
}

.training-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.training-left {
  flex: 1;
}

.training-degree {
  font-size: 14px;
  font-weight: 600;
  color: #111111;
  margin: 0 0 4px 0;
  font-family: "Montserrat", sans-serif;
}



.training-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.training-year {
  font-size: 13px;
  font-weight: 600;
  color: #111111;
  font-family: "Roboto", sans-serif;
}

.training-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  text-transform: capitalize;
}

.training-status.certified {
  background: rgba(90, 150, 144, 0.2);
  color: #5A9690;
}

.training-status.completed {
  background: #84994F;
  color: #ffffff;
}

.training-status.in_progress {
  background: #84994F;
  color: #ffffff;
}

.no-data {
  text-align: center;
  color: #585865;
  padding: 40px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
}

/* Dark Mode Support for Member User Profile */
.theme-dark .training-item {
  background: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .training-degree {
  color: var(--text-primary) !important;
}

.theme-dark .training-year {
  color: var(--text-primary) !important;
}

.theme-dark .no-data {
  color: var(--text-secondary) !important;
}/* ===================================
   CENTRALIZED THEME SYSTEM
   Light and Dark Mode Variables
   =================================== */

/* Light Mode (Default) */
:root,
.theme-light {
  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #F0F8FF;
  --bg-tertiary: #585865;
  --bg-card: #ffffff;
  --bg-hover: rgba(17, 17, 17, 0.05);
  --bg-modal: #ffffff;
  --bg-modal-header: #f5f7f8;
  --bg-input: #ffffff;
  --bg-button: #111111;
  --bg-button-secondary: #585865;
  
  /* Text Colors */
  --text-primary: #111111;
  --text-secondary: #585865;
  --text-tertiary: #808080;
  --text-inverse: #ffffff;
  --text-muted: #6b7280;
  
  /* Borders */
  --border-primary: #292928;
  --border-secondary: #d0d0d0;
  --border-focus: #ab0000;
  --border-input: rgba(17, 17, 17, 0.2);
  
  /* Accent Colors */
  --accent-primary: #ab0000;
  --accent-hover: #8b0000;
  --accent-light: #eb4040;
  --accent-secondary: #5A9690;

  /* Primary brand color (alias for accent primary) */
  --primary: #ab0000;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(17, 17, 17, 0.05);
  --shadow-md: 0 2px 8px rgba(17, 17, 17, 0.1);
  --shadow-lg: 0 4px 12px rgba(17, 17, 17, 0.15);
  
  /* Status Colors */
  --status-success: #28a745;
  --status-warning: #ffc107;
  --status-error: #dc3545;
  --status-info: #17a2b8;
  --status-certified: #5A9690;
  --status-completed: #84994F;
}

/* Dark Mode */
.theme-dark {
  /* Backgrounds - Using black/very dark backgrounds */
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #1a1a1a;
  --bg-card: #111111;
  --bg-hover: rgba(255, 255, 255, 0.08);
  --bg-modal: #111111;
  --bg-modal-header: #1a1a1a;
  --bg-input: #1a1a1a;
  --bg-button: #ffffff;
  --bg-button-secondary: #2a2a2a;
  
  /* Text Colors - Ensuring white text on dark backgrounds */
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-tertiary: #808080;
  --text-inverse: #000000;
  --text-muted: #6b7280;
  
  /* Borders */
  --border-primary: #2a2a2a;
  --border-secondary: #3a3a3a;
  --border-focus: #eb4040;
  --border-input: rgba(255, 255, 255, 0.2);
  
  /* Accent Colors */
  --accent-primary: #eb4040;
  --accent-hover: #ff5555;
  --accent-light: #ff6b6b;
  --accent-secondary: #5A9690;

  /* Primary brand color (alias for accent primary) */
  --primary: #eb4040;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
  
  /* Status Colors */
  --status-success: #4ade80;
  --status-warning: #fbbf24;
  --status-error: #ef4444;
  --status-info: #3b82f6;
  --status-certified: #5A9690;
  --status-completed: #84994F;
}

/* ===================================
   GLOBAL DARK MODE STYLES
   Applied when body has theme-dark class
   =================================== */

/* Dashboard Layouts */
.theme-dark .president-dashboard-container,
.theme-dark .admin-dashboard-container,
.theme-dark .member-dashboard-container {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.theme-dark .president-main,
.theme-dark .admin-main,
.theme-dark .member-main {
  background-color: var(--bg-primary);
}

.theme-dark .president-content,
.theme-dark .admin-content,
.theme-dark .member-content {
  background-color: var(--border-primary);
}

/* Dashboard Components */
.theme-dark .dashboard-container {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}

.theme-dark .overview-dashboard-container {
  background-color: transparent;
}

/* Cards */
.theme-dark .overview-stat-card,
.theme-dark .stat-card,
.theme-dark .card {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
  box-shadow: var(--shadow-md);
}

/* Text Elements */
.theme-dark .overview-title,
.theme-dark .overview-dashboard-title,
.theme-dark .dashboard-title,
.theme-dark .announcement-content h4,
.theme-dark .current-month,
.theme-dark .upcoming-events h4,
.theme-dark .event-title,
.theme-dark .modal-title,
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4 {
  color: var(--text-primary);
}

.theme-dark .overview-stat-label {
  color: #ffffff;
}

.theme-dark .stat-label,
.theme-dark .day-header,
.theme-dark .event-date,
.theme-dark .no-data,
.theme-dark .no-events {
  color: var(--text-secondary);
}

.theme-dark .overview-stat-value,
.theme-dark .stat-value,
.theme-dark .stat-number {
  color: var(--text-primary);
}

/* Borders */
.theme-dark .upcoming-events,
.theme-dark .no-events {
  border-top-color: var(--border-primary);
}

/* Event Items */
.theme-dark .event-item {
  background: var(--bg-card);
  border: 1px solid #ffffff;
}

/* Buttons */
.theme-dark .nav-btn,
.theme-dark .btn-cancel,
.theme-dark .top-nav-btn-cancel {
  background-color: var(--bg-tertiary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.theme-dark .nav-btn:hover,
.theme-dark .btn-cancel:hover,
.theme-dark .top-nav-btn-cancel:hover {
  background-color: var(--bg-hover);
}

/* Top Navigation */
.theme-dark .AdminTopNav_Container,
.theme-dark .PresidentTopNav_Container,
.theme-dark .MemberTopNav_Container,
.theme-dark .president-topnav,
.theme-dark .admin-topnav,
.theme-dark .member-topnav {
  background-color: var(--bg-primary);
  border-bottom-color: var(--border-primary);
}

.theme-dark .profile-text,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_span,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_span,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_span {
  color: var(--text-primary) !important;
}

.theme-dark .chevron-icon {
  color: var(--text-primary) !important;
}

.theme-dark .dropdown-icon:not(.logout-item .dropdown-icon) {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* General rule for all SVG icons in dropdown items (except logout) */
/* All dropdown item SVGs should be white in dark mode (including logout) */
.theme-dark .profile-dropdown .dropdown-item svg,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_Dropdown .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item svg,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_Dropdown .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item svg,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_Dropdown .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Profile Icons */
.theme-dark .profile svg,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container svg,
.theme-dark .AdminTopNav_Container_Right_Profile_Container svg,
.theme-dark .MemberTopNav_Container_Right_Profile_Container svg {
  color: var(--text-primary) !important;
}

/* Dropdown Icon Classes - All icons use white in dark mode (including logout) */
.theme-dark .dropdown-item .dropdown-icon,
.theme-dark .dropdown-item svg.dropdown-icon,
.theme-dark .dropdown-item > svg,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item .dropdown-icon,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item_img,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item > svg,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item .dropdown-icon,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item_img,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item > svg,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item .dropdown-icon,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item_img,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item > svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Dropdown Menus */
.theme-dark .profile-dropdown,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_Dropdown,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_Dropdown,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_Dropdown {
  background-color: var(--bg-primary);
  border-color: var(--border-primary);
}

.theme-dark .dropdown-item,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item {
  color: var(--text-primary) !important;
}

/* All dropdown item SVGs and images use white in dark mode */
.theme-dark .dropdown-item svg,
.theme-dark .dropdown-item > svg,
.theme-dark .dropdown-item svg.dropdown-icon,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item svg,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item > svg,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item_img,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item svg,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item > svg,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item_img,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item svg,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item > svg,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item_img,
.theme-dark .dropdown-item img,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item img,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item img,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item img {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.theme-dark .dropdown-item span,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item_span,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item_span,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item_span {
  color: var(--text-primary) !important;
}

.theme-dark .dropdown-item:hover,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item:hover,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item:hover,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item:hover {
  background-color: var(--bg-hover);
}

/* Logout items - text and icons are white in dark mode */
.theme-dark .dropdown-item.logout-item {
  color: #ffffff !important;
}

.theme-dark .dropdown-item.logout-item svg,
.theme-dark .dropdown-item.logout-item .dropdown-icon,
.theme-dark .AdminTopNav_Container_Right_Profile_Container_Dropdown_Item.logout-item svg,
.theme-dark .MemberTopNav_Container_Right_Profile_Container_Dropdown_Item.logout-item svg,
.theme-dark .PresidentTopNav_Container_Right_Profile_Container_Dropdown_Item.logout-item svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Modals */
.theme-dark .logout-modal {
  background-color: var(--bg-primary);
  border-color: var(--border-primary);
}

.theme-dark .modal-message {
  color: var(--text-secondary);
}

/* Sidebars */
.theme-dark .president-sidebar,
.theme-dark .admin-sidebar,
.theme-dark .member-sidebar {
  background-color: var(--bg-primary);
  border-right-color: var(--border-primary);
}

.theme-dark .sidebar-item {
  color: var(--text-primary);
}

.theme-dark .sidebar-item:hover {
  background-color: var(--bg-hover);
}

.theme-dark .sidebar-item.active {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
}

/* Sidebar Links - Ensure white color in dark mode */
.theme-dark .Sidebar_Link,
.theme-dark .PresidentSidebar .Sidebar_Link,
.theme-dark .AdminSidebar .Sidebar_Link,
.theme-dark .MemberSidebar .Sidebar_Link {
  color: #ffffff !important;
}

.theme-dark .Sidebar_Link:visited,
.theme-dark .PresidentSidebar .Sidebar_Link:visited,
.theme-dark .AdminSidebar .Sidebar_Link:visited,
.theme-dark .MemberSidebar .Sidebar_Link:visited {
  color: #ffffff !important;
}

.theme-dark .Sidebar_Link.active,
.theme-dark .PresidentSidebar .Sidebar_Link.active,
.theme-dark .AdminSidebar .Sidebar_Link.active,
.theme-dark .MemberSidebar .Sidebar_Link.active {
  color: #ffffff !important;
}

/* Tables */
.theme-dark table {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

.theme-dark th {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.theme-dark td {
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.theme-dark tr:hover {
  background-color: var(--bg-hover);
}

/* Forms */
.theme-dark input,
.theme-dark textarea,
.theme-dark select {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.theme-dark input:focus,
.theme-dark textarea:focus,
.theme-dark select:focus {
  border-color: var(--border-focus);
  outline: none;
}

.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
  color: var(--text-secondary);
}

/* Guest Dashboard */
.theme-dark .guest-dashboard-container {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* ===================================
   COMPREHENSIVE COMPONENT STYLES
   =================================== */

/* Profile Pages */
.theme-dark .president-admin-profile-container,
.theme-dark .admin-profile-container,
.theme-dark .member-profile-container {
  background-color: var(--bg-primary);
}

.theme-dark .president-admin-profile-header-card,
.theme-dark .admin-profile-header-card,
.theme-dark .member-profile-header-card,
.theme-dark .president-admin-profile-info-card,
.theme-dark .admin-profile-info-card,
.theme-dark .member-profile-info-card {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
}

.theme-dark .president-admin-profile-name,
.theme-dark .admin-profile-name,
.theme-dark .member-profile-name,
.theme-dark .quick-info-value,
.theme-dark .info-text,
.theme-dark .training-degree,
.theme-dark .training-year {
  color: var(--text-primary) !important;
}

.theme-dark .president-admin-profile-department,
.theme-dark .quick-info-label,
.theme-dark .info-label {
  color: var(--text-secondary) !important;
}

.theme-dark .avatar-circle-large {
  background-color: var(--bg-tertiary);
  border-color: var(--border-primary);
}

.theme-dark .avatar-circle-large svg {
  color: var(--text-secondary);
}

/* Modals */
.theme-dark .password-modal,
.theme-dark .modal {
  background-color: var(--bg-modal);
}

.theme-dark .modal-header,
.theme-dark .modal-footer {
  background-color: var(--bg-modal-header);
  border-color: var(--border-primary);
}

.theme-dark .modal-header h3,
.theme-dark .modal-title {
  color: var(--text-primary) !important;
}

.theme-dark .modal-message,
.theme-dark .modal-body {
  color: var(--text-secondary);
}

.theme-dark .modal-close-btn {
  background-color: var(--bg-input);
  color: var(--text-secondary);
  border-color: var(--border-primary);
}

.theme-dark .modal-close-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

/* Inputs and Forms */
.theme-dark .info-input,
.theme-dark .info-textarea,
.theme-dark input[type="text"],
.theme-dark input[type="email"],
.theme-dark input[type="password"],
.theme-dark input[type="number"],
.theme-dark input[type="date"],
.theme-dark textarea,
.theme-dark select {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

.theme-dark .info-input:focus,
.theme-dark .info-textarea:focus,
.theme-dark input:focus,
.theme-dark textarea:focus,
.theme-dark select:focus {
  border-color: var(--border-focus) !important;
}

.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Buttons */
.theme-dark .edit-btn,
.theme-dark .save-btn,
.theme-dark .add-training-btn,
.theme-dark .change-password-btn {
  background-color: var(--bg-button);
  color: var(--text-inverse);
  border-color: var(--border-primary);
}

.theme-dark .edit-btn:hover,
.theme-dark .save-btn:hover {
  opacity: 0.9;
}

.theme-dark .cancel-btn {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
}

.theme-dark .cancel-btn:hover {
  background-color: var(--accent-hover);
}

.theme-dark .request-otp-btn,
.theme-dark .btn-primary {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
}

.theme-dark .request-otp-btn:hover,
.theme-dark .btn-primary:hover {
  background-color: var(--accent-hover);
}

/* Training Items */
.theme-dark .training-item {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
}

.theme-dark .training-institution {
  color: var(--text-secondary);
}

/* Calendar Components */
.theme-dark .calendar-grid {
  background-color: var(--bg-card);
}

.theme-dark .calendar-day {
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.theme-dark .calendar-day:hover {
  background-color: var(--bg-hover);
}

/* Announcements */
.theme-dark .announcement-card,
.theme-dark .announcement-item {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
}

.theme-dark .announcement-title {
  color: var(--text-primary);
}

.theme-dark .announcement-content,
.theme-dark .announcement-description {
  color: var(--text-secondary);
}

.theme-dark .announcement-date {
  color: var(--text-muted);
}

/* Stats Cards */
.theme-dark .stat-card,
.theme-dark .overview-stat-card,
.theme-dark .president-overview-stat-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-primary) !important;
}

.theme-dark .stat-label {
  color: var(--text-secondary) !important;
}

.theme-dark .overview-stat-label {
  color: #ffffff !important;
}

.theme-dark .stat-value,
.theme-dark .stat-number {
  color: var(--text-primary) !important;
}

/* Status Badges */
.theme-dark .status-active {
  background-color: rgba(90, 150, 144, 0.2);
  color: var(--status-certified);
}

.theme-dark .training-status.certified {
  background-color: rgba(90, 150, 144, 0.2);
  color: var(--status-certified);
}

.theme-dark .training-status.completed,
.theme-dark .training-status.in_progress {
  background-color: var(--status-completed);
  color: var(--text-inverse);
}

/* No Data States */
.theme-dark .no-data,
.theme-dark .no-events,
.theme-dark .no-training {
  color: var(--text-secondary);
}

/* Overview Page Specific */
.theme-dark .president-admin-overview-calendar-section,
.theme-dark .president-admin-overview-announcements-section,
.theme-dark .president-admin-dashboard-upcoming-events-container,
.theme-dark .member-overview-calendar-section,
.theme-dark .member-overview-announcements-section {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
}

.theme-dark .dashboard-announcements-section-header h2,
.theme-dark .dashboard-calendar-section-header h2,
.theme-dark .announcements-header h2 {
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.theme-dark .announcement-text,
.theme-dark .announcement-title h3,
.theme-dark .announcement-content h4 {
  color: var(--text-primary);
}

.theme-dark .announcement-date {
  color: var(--text-secondary);
}

.theme-dark .announcement-indicator,
.theme-dark .announcement-item {
  background-color: var(--bg-tertiary);
  border-color: var(--border-primary);
}

.theme-dark .calendar-nav,
.theme-dark .calendar-header {
  border-color: var(--border-primary);
}

.theme-dark .calendar-nav button,
.theme-dark .nav-btn {
  color: var(--text-primary);
}

.theme-dark .calendar-nav button:hover,
.theme-dark .nav-btn:hover {
  background-color: var(--bg-hover);
}

.theme-dark .month-display,
.theme-dark .weekday,
.theme-dark .day-header {
  color: var(--text-primary);
}

.theme-dark .calendar-day {
  color: var(--text-primary);
  background-color: transparent;
}

.theme-dark .calendar-day:hover {
  background-color: var(--bg-hover);
}

.theme-dark .calendar-day.today {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
}

.theme-dark .calendar-day.today .day-number {
  color: var(--text-primary);
}

.theme-dark .day-number {
  color: var(--text-primary);
}

.theme-dark .calendar-day.other-month {
  color: var(--text-muted);
  opacity: 0.5;
}

.theme-dark .calendar-day.has-events {
  background: transparent;
}

.theme-dark .event-indicator {
  background-color: var(--accent-primary);
}

.theme-dark .calendar-day.today .event-indicator {
  background-color: var(--text-inverse);
}

/* Dashboard Upcoming Events */
.theme-dark .dashboard-upcoming-events-container,
.theme-dark .dashboard-upcoming-events {
  background-color: var(--bg-card);
}

.theme-dark .dashboard-upcoming-events h2 {
  color: var(--text-primary);
}

/* Priority Icons */
.theme-dark .priority-icon {
  color: #ffffff;
}

.theme-dark .priority-icon.high {
  color: #ffffff;
}

.theme-dark .priority-icon.medium {
  color: #ffffff;
}

.theme-dark .priority-icon.low {
  color: #ffffff;
}

/* Announcement Navigation */
.theme-dark .announcements-navigation .nav-button {
  color: var(--text-primary);
  background: transparent;
}

.theme-dark .announcements-navigation .nav-button:hover {
  background-color: var(--bg-hover);
}

.theme-dark .indicator-dot {
  background-color: #F0F8FF;
}

.theme-dark .indicator-dot.active {
  background-color: var(--accent-primary);
}

.theme-dark .indicator-dot:hover {
  background-color: var(--accent-light);
}

.theme-dark .announcement-separator {
  color: var(--text-muted);
}

.theme-dark .announcement-time {
  color: var(--text-secondary);
}

.theme-dark .announcement-footer {
  border-top-color: var(--border-primary);
}

.theme-dark .announcement-header {
  border-bottom-color: var(--border-primary);
}

.theme-dark .announcement-priority {
  background-color: transparent;
}

/* Learning Materials & Quiz Pages */
.theme-dark .materials-container,
.theme-dark .quiz-container,
.theme-dark .events-container {
  background-color: var(--bg-primary);
}

.theme-dark .material-card,
.theme-dark .quiz-card,
.theme-dark .event-card {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
}

.theme-dark .material-title,
.theme-dark .quiz-title,
.theme-dark .event-title {
  color: var(--text-primary);
}

.theme-dark .material-description,
.theme-dark .quiz-description,
.theme-dark .event-description {
  color: var(--text-secondary);
}

/* Tables */
.theme-dark table,
.theme-dark .table {
  background-color: var(--bg-card);
}

.theme-dark thead,
.theme-dark th {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.theme-dark tbody tr,
.theme-dark td {
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.theme-dark tbody tr:hover,
.theme-dark .table-row:hover {
  background-color: var(--bg-hover);
}

/* Filter & Search Components */
.theme-dark .search-bar,
.theme-dark .filter-dropdown,
.theme-dark .search-input {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--border-input);
}

.theme-dark .search-bar:focus,
.theme-dark .filter-dropdown:focus,
.theme-dark .search-input:focus {
  border-color: var(--border-focus);
}

/* Scrollbars */
.theme-dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.theme-dark ::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

.theme-dark ::-webkit-scrollbar-thumb {
  background: var(--text-secondary);
  border-radius: 4px;
}

.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: var(--text-primary);
}

/* Admin & Member Sections - Ensure Consistency */
.theme-dark .admin-profile-container,
.theme-dark .member-profile-container,
.theme-dark .president-profile-container {
  background-color: var(--bg-primary);
}

.theme-dark .profile-section,
.theme-dark .section-card {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
}

.theme-dark .section-title,
.theme-dark .section-header,
.theme-dark .page-title {
  color: var(--text-primary);
}

.theme-dark .section-description,
.theme-dark .section-subtitle {
  color: var(--text-secondary);
}

/* Quiz & Exam Components */
.theme-dark .quiz-container,
.theme-dark .exam-container,
.theme-dark .quiz-card,
.theme-dark .exam-card {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
}

.theme-dark .quiz-question,
.theme-dark .exam-question {
  color: var(--text-primary);
}

.theme-dark .quiz-option,
.theme-dark .exam-option {
  color: var(--text-secondary);
  background-color: var(--bg-input);
  border-color: var(--border-input);
}

.theme-dark .quiz-option:hover,
.theme-dark .exam-option:hover {
  background-color: var(--bg-hover);
}

/* Member Management & User Access */
.theme-dark .member-table,
.theme-dark .user-table,
.theme-dark .management-table {
  background-color: var(--bg-card);
}

.theme-dark .member-row,
.theme-dark .user-row {
  border-color: var(--border-primary);
}

.theme-dark .member-row:hover,
.theme-dark .user-row:hover {
  background-color: var(--bg-hover);
}

.theme-dark .member-name,
.theme-dark .user-name {
  color: var(--text-primary);
}

.theme-dark .member-email,
.theme-dark .user-email,
.theme-dark .member-department,
.theme-dark .user-role {
  color: var(--text-secondary);
}

/* Incident Reports */
.theme-dark .incident-card,
.theme-dark .report-card {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
}

.theme-dark .incident-title,
.theme-dark .report-title {
  color: var(--text-primary);
}

.theme-dark .incident-description,
.theme-dark .report-description {
  color: var(--text-secondary);
}

.theme-dark .incident-status,
.theme-dark .report-status {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Learning Materials */
.theme-dark .material-list,
.theme-dark .materials-grid {
  background: transparent;
}

.theme-dark .material-item {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
}

.theme-dark .material-item:hover {
  background-color: var(--bg-hover);
}

/* Events */
.theme-dark .event-list,
.theme-dark .events-grid {
  background-color: var(--bg-primary);
}

.theme-dark .event-item {
  background-color: var(--bg-card);
  border: 1px solid #ffffff;
}

/* Ensure all headings are white in dark mode */
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6 {
  color: var(--text-primary);
}

/* Ensure all paragraphs and spans have proper text color */
.theme-dark p,
.theme-dark span,
.theme-dark label,
.theme-dark div {
  color: inherit;
}

/* Links */
.theme-dark a {
  color: var(--accent-primary);
}

.theme-dark a:hover {
  color: var(--accent-hover);
}

/* Badges and Tags */
.theme-dark .badge,
.theme-dark .tag,
.theme-dark .chip {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

/* Dropdown Menus */
.theme-dark .dropdown-menu,
.theme-dark .context-menu {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
}

.theme-dark .dropdown-item,
.theme-dark .menu-item {
  color: var(--text-primary);
}

.theme-dark .dropdown-item:hover,
.theme-dark .menu-item:hover {
  background-color: var(--bg-hover);
}

/* Tooltips */
.theme-dark .tooltip,
.theme-dark .popover {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

/* Loading States */
.theme-dark .loading,
.theme-dark .spinner {
  color: var(--text-secondary);
}

/* Empty States */
.theme-dark .empty-state,
.theme-dark .no-results {
  color: var(--text-secondary);
}

/* ===================================
   PREVENT HOMEPAGE FROM BEING AFFECTED
   =================================== */

/* Ensure homepage is never affected by theme */
body.theme-dark .Homepage_Container,
body.theme-dark .Homepage_Container *,
.theme-dark .Homepage_Container,
.theme-dark .Homepage_Container * {
  background-color: initial !important;
  color: initial !important;
  border-color: initial !important;
}

/* ===================================
   TRANSITIONS
   =================================== */

/* Smooth transitions for theme changes */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Disable transitions for certain elements */
*:focus,
input,
textarea,
select,
button {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}