html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* DARK THEME FOCUS OVERRIDE - HIGHEST PRIORITY */
[data-theme="dark"] .btn:focus, 
[data-theme="dark"] .btn:active:focus, 
[data-theme="dark"] .btn-link.nav-link:focus, 
[data-theme="dark"] .form-control:focus, 
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-check-input:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3) !important;
  background-color: var(--bg-tertiary) !important;
  border-color: var(--accent-blue) !important;
  color: var(--text-primary) !important;
}

/* CRITICAL: Ensure checked checkboxes remain checked when focused */
[data-theme="dark"] .form-check-input:checked:focus {
  background-color: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3) !important;
}

/* BROWSER AUTOFILL OVERRIDE - GLOBAL FIX */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active,
[data-theme="dark"] select:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill:hover,
[data-theme="dark"] select:-webkit-autofill:focus,
[data-theme="dark"] select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-tertiary) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  box-shadow: 0 0 0 1000px var(--bg-tertiary) inset !important;
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Firefox autofill override */
[data-theme="dark"] input:-moz-autofill,
[data-theme="dark"] input:-moz-autofill:hover,
[data-theme="dark"] input:-moz-autofill:focus {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  box-shadow: none !important;
}

/* Autofill focus state with blue glow */
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:focus-visible {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-tertiary) inset, 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
  box-shadow: 0 0 0 1000px var(--bg-tertiary) inset, 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
  border-color: var(--accent-blue) !important;
  outline: none !important;
}

/* Light theme focus styles */
[data-theme="light"] .btn:focus, 
[data-theme="light"] .btn:active:focus, 
[data-theme="light"] .btn-link.nav-link:focus, 
[data-theme="light"] .form-control:focus, 
[data-theme="light"] .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Default focus styles (maintain existing behavior for backward compatibility) */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: #ffffff !important; /* Clean white background for light theme */
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.05); /* Slight zoom-in */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Soft shadow */
}

.card.no-animation {
  transition: none;
  transform: none;
}

.card.no-animation:hover {
  transform: none;
  box-shadow: none;
}