/* General Styles */
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  font-family: 'Nunito Sans', sans-serif;
  background-color: #f8f9fa;
  color: #343563;
}

.form-floating{
    padding-bottom:10px;
}

.text-info {
    color: #0060df !important;
}
/* Typography */
h1 {
    font-weight: 800;
}

/* Header */
.header {
  padding: 20px;
  background-color: #fff;
}

/* Student Details */
.student-details {
  margin-bottom: 1rem;
}

.student-details label {
  font-weight: 600;
  margin-right: 1rem;
}

/* Dropdown and Input */
.select,
.input {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
}

/* Subject Selector */
.subject-selector {
  margin-bottom: 1rem;
  border-bottom: 2px solid #dee2e6;
}

.subject-selector .btn {
  margin-right: 0.5rem;
  color: #495057;
  background-color: #e9ecef;
  border-color: #e9ecef;
}

.subject-selector .btn.active {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* Skills Checklist */
.skills-checklist {
  padding: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

.skills-checklist h5 {
  font-weight: 600;
}

.skills-checklist .form-check {
  margin-bottom: 0.5rem;
}

.skills-checklist .form-check-input {
  margin-right: 0.5rem;
}

/* Generate Button */
.generate-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color: #198754;
  border-color: #198754;
  margin-bottom: 1rem;
}

/* Comment Box */
.comment-box {
  padding: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

/* Footer Action Buttons */
.footer-actions .btn {
  margin-right: 0.5rem;
  color: #495057;
  background-color: #e9ecef;
  border-color: #e9ecef;
}

.footer-actions .btn.active {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

/* Bootstrap Customizations */
.btn-primary {
    background-color: #001c46;
    border-color: #073a86 !important;
}

.btn-secondary {
  background-color: #6c757d;
}

.nav-pills .nav-link.active{
    background-color: #001c46 !important;
}


/* Form Elements and Buttons */
.form-control,
.form-select {
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
}

/* Responsiveness */
@media (max-width: 768px) {
  .header,
  .generate-btn {
    padding: 10px;
  }

  .footer-actions .btn {
    padding: 5px;
    font-size: 0.875rem;
  }
}