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

/* Apply modern premium font and body styling globally */
body, html {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background: linear-gradient(135deg, #090d16 0%, #0f172a 60%, #1e1b4b 100%) !important;
  color: #f8fafc !important;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}
::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
}

/* Reset default templates' white/grey backgrounds */
.layout-wrapper, .layout-container, .layout-page, .content-wrapper, .card-body, .container-xxl {
  background: transparent !important;
}

/* Header Navbar Styling */
.layout-navbar {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
  border-radius: 0.75rem !important;
  margin-top: 1rem;
}
.layout-navbar h4, .layout-navbar li {
  color: #f8fafc !important;
}

/* Glassmorphism Card Design */
.card {
  background: rgba(30, 41, 59, 0.35) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5) !important;
  border-radius: 1.25rem !important;
  color: #f8fafc !important;
}
.card-header, .card-footer {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}
.card-title {
  color: #f8fafc !important;
  font-weight: 700 !important;
}

/* Form Inputs and Selects */
.form-control, .form-select, select {
  background-color: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem !important;
}
.form-control::placeholder {
  color: #64748b !important;
}
.form-control:focus, .form-select:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
  background-color: rgba(15, 23, 42, 0.75) !important;
  color: #ffffff !important;
}
.input-group-text {
  background-color: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.35) !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}
.btn-primary:hover {
  box-shadow: 0 6px 20px 0 rgba(99, 102, 241, 0.5) !important;
  transform: translateY(-1.5px) !important;
}
.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.35) !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}
.btn-success:hover {
  box-shadow: 0 6px 20px 0 rgba(16, 185, 129, 0.5) !important;
  transform: translateY(-1.5px) !important;
}
.btn-secondary, .btn-outline-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}
.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.35) !important;
}
.btn-danger:hover {
  box-shadow: 0 6px 20px 0 rgba(239, 68, 68, 0.5) !important;
  transform: translateY(-1.5px) !important;
}
.btn-outline-danger {
  border: 1.5px solid rgba(239, 68, 68, 0.5) !important;
  background: transparent !important;
  color: #f87171 !important;
  transition: all 0.25s ease !important;
}
.btn-outline-danger:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.2) !important;
}

/* Badges */
.badge.bg-success {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.15) !important;
}
.badge.bg-danger {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1.5px solid rgba(239, 68, 68, 0.3) !important;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.15) !important;
}

/* Alert Styling */
.alert-warning {
  background-color: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #fbbf24 !important;
  border-radius: 0.75rem !important;
}

/* Dashboard List Groups */
.list-group-item {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #f8fafc !important;
  border-radius: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.list-group-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}
.list-group-item h5 {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.list-group-item small {
  color: #94a3b8 !important;
}

/* Exam Screen Overrides */
.custom-option {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.75rem !important;
  color: #e2e8f0 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 1.1rem 1.5rem !important;
  display: block;
}
.custom-option:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2.5px);
}
.custom-option.selected {
  background-color: rgba(99, 102, 241, 0.15) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3) !important;
  transform: translateY(-2.5px);
}
.custom-option input[type="radio"] {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(0,0,0,0.2);
}
.custom-option input[type="radio"]:checked {
  background-color: #6366f1;
  border-color: #6366f1;
}

/* Exam Timer Banner */
.sticky-timer-card {
  background: rgba(99, 102, 241, 0.06) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.1) !important;
}
.bg-label-primary {
  background-color: rgba(99, 102, 241, 0.15) !important;
}
#countdown-timer {
  color: #818cf8 !important;
  text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

/* Question Circle Buttons Grid */
.question-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.question-btn.btn-outline-secondary {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
}
.question-btn.btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-3px);
}
.question-btn.btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border-color: #818cf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.5) !important;
  transform: scale(1.1) translateY(-3px);
}
.question-btn.btn-info {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(14, 165, 233, 0.4) !important;
  transform: translateY(-2px);
}

/* Animations */
.animate-flash {
  animation: flash-red 1s infinite alternate;
}
@keyframes flash-red {
  from {
    color: #f43f5e !important;
    text-shadow: 0 0 4px rgba(244, 63, 94, 0.4);
  }
  to {
    color: #fda4af !important;
    text-shadow: 0 0 20px rgba(244, 63, 94, 0.9);
  }
}

/* Result metrics visual excellence */
.result-score-gauge {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1rem;
  padding: 2rem !important;
}

/* Layout Centering Overrides to eliminate sidebar spacing */
@media (min-width: 1200px) {
  html.layout-menu-fixed:not(.layout-menu-collapsed) .layout-page,
  .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page,
  .layout-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
  }
}

.layout-page {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
}

/* Ensure container-xxl is centered on screen */
.container-xxl {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}