/* Enhanced Home Module Styles */

/* Stat Cards - Layout sesuai gambar */
.stat-card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 15px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.stat-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
  font-size: 1.2rem;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

/* Chart Section */
.chart-section {
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  height: 100%;
}

.pie-chart-container {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .pie-chart-container {
    width: 180px;
    height: 180px;
    min-width: 120px;
    min-height: 120px;
  }
  .chart-section {
    padding: 10px;
    height: auto;
  }
  .module-home-charts-card .row > div {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 18px;
  }
  .breakdown-section {
    padding: 8px 0;
  }
  .breakdown-item {
    font-size: 0.95rem;
    padding: 6px 0;
  }
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 0.9rem;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}

.legend-color.male {
  background: #4f46e5;
}

.legend-color.female {
  background: #ec4899;
}

/* Breakdown Sections */
.breakdown-section h6 {
  color: #fff;
  margin-bottom: 15px;
  font-weight: 600;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.breakdown-item:last-child {
  border-bottom: none;
}

.breakdown-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}

.breakdown-count {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Stats Mini Cards - Legacy support */
.stats-mini-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.stats-mini-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s;
}

.stats-mini-card:hover::before {
  left: 100%;
}

.stats-mini-card:hover,
.stats-mini-card.hover-effect {
  transform: translateY(-2px) scale(1.02);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stats-mini-card.animated {
  animation: cardSlideIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes cardSlideIn {
  from {
    transform: translateY(30px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.stats-mini-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

.stats-mini-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

/* Chart Container */
.chart-container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}

.chart-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  pointer-events: none;
}

.chart-title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.chart-wrapper {
  position: relative;
  height: 250px;
  margin: 15px 0;
}

/* Grade Bars */
.grade-bars {
  margin-top: 15px;
}

.grade-item {
  margin-bottom: 12px;
  padding: 8px 0;
}

.grade-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Improved Grade Bars layout: label | progress | count */
.grade-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.grade-bar-label {
  order: 1;
  flex: 0 0 86px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grade-bar-inner {
  order: 2;
  flex: 1 1 auto;
  height: 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.grade-bar-inner > div {
  height: 100%;
  border-radius: 8px;
  transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.grade-bar-inner .grade-bar-x {
  background: linear-gradient(90deg, #7c3aed, #5b21b6);
}
.grade-bar-inner .grade-bar-xi {
  background: linear-gradient(90deg, #06b6d4, #0891b2);
}
.grade-bar-inner .grade-bar-xii {
  background: linear-gradient(90deg, #f97316, #c2410c);
}

/* Support markup where .grade-bar-inner itself is the colored bar (backwards-compatible) */
.grade-bar-inner.grade-bar-x,
.grade-bar-inner.grade-bar-xi,
.grade-bar-inner.grade-bar-xii {
  background: transparent; /* allow child-like appearance via gradient on element */
  min-width: 6px;
}
.grade-bar-inner.grade-bar-x {
  background: linear-gradient(90deg, #7c3aed, #5b21b6);
}
.grade-bar-inner.grade-bar-xi {
  background: linear-gradient(90deg, #06b6d4, #0891b2);
}
.grade-bar-inner.grade-bar-xii {
  background: linear-gradient(90deg, #f97316, #c2410c);
}
.grade-bar-inner[style] {
  transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.grade-bar-count {
  order: 3;
  flex: 0 0 auto;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 60px;
  text-align: right;
}

.grade-counts {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 6px;
}

/* NISN help button: make compact and aligned */
.module-home-form-header .btn#openNisnInfo {
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: auto;
}

.module-home-form-header .btn#openNisnInfo i {
  font-size: 0.95rem;
  margin-right: 0;
}

/* Improve visibility: stronger background, white label, hover and focus states */
.module-home-form-header .btn#openNisnInfo {
  color: #fff;
  background: linear-gradient(90deg, #4f46e5, #6366f1);
  border: 1px solid rgba(79, 70, 229, 0.18);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.12);
}
.module-home-form-header .btn#openNisnInfo:hover {
  background: linear-gradient(90deg, #4338ca, #4f46e5);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.18);
}
.module-home-form-header .btn#openNisnInfo:focus,
.module-home-form-header .btn#openNisnInfo:active {
  outline: 3px solid rgba(99, 102, 241, 0.15);
  outline-offset: 2px;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.22);
}

/* If using outline-white variants, ensure icon remains visible */
.module-home-form-header .btn#openNisnInfo .fa-info-circle {
  color: rgba(255, 255, 255, 0.95);
}

/* Breakdown list tweaks: keep list tidy and scroll when long */
.module-home-charts-body .breakdown-section {
  max-height: 210px;
  overflow-y: auto;
  padding-right: 6px;
}

.module-home-charts-body .breakdown-section .breakdown-item {
  padding: 8px 6px;
}

/* Small screens: adjust grade bar content spacing */
@media (max-width: 768px) {
  .grade-bar-label {
    flex: 0 0 70px;
    font-size: 0.88rem;
  }
  .grade-bar-count {
    min-width: 48px;
    font-size: 0.88rem;
  }
  /* On small screens allow the breakdown lists to expand fully
     instead of forcing a small, hard-to-scroll box. This ensures
     the "Distribusi per Jurusan" list is visible without extra
     scrolling inside a small area. */
  .module-home-charts-body .breakdown-section {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .module-home-form-header .btn#openNisnInfo {
    padding: 0.18rem 0.5rem;
    font-size: 0.82rem;
  }
}

/* Small-screen spacing adjustments to prevent list items sitting flush
   against the rounded card bottom. Adds comfortable bottom padding. */
@media (max-width: 768px) {
  .module-home-charts-card .card-body {
    padding-bottom: 20px;
  }
  .module-home-charts-body .breakdown-section {
    padding-bottom: 12px;
  }
}

/* Major Items */
.majors-grid {
  margin-top: 15px;
}

.major-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.major-item:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(5px);
}

.major-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.major-name {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

.major-total {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  font-weight: 500;
}

.major-bars {
  display: flex;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.major-bar-male,
.major-bar-female {
  height: 100%;
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.major-bar-male {
  background: #3498db;
}

.major-bar-female {
  background: #e91e63;
}

.major-gender-counts {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

/* NISN Info Modal */
.nisn-info-content {
  background: linear-gradient(
    135deg,
    rgba(52, 152, 219, 0.1) 0%,
    rgba(155, 89, 182, 0.1) 100%
  );
  border-radius: 15px;
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nisn-info-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #3498db, #9b59b6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 2rem;
  color: white;
  box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
}

.nisn-info-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
}

.nisn-info-text {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 15px;
}

.nisn-features {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 15px;
  margin: 15px 0;
}

.nisn-feature {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.nisn-feature:last-child {
  margin-bottom: 0;
}

.nisn-feature i {
  margin-right: 10px;
  margin-top: 2px;
  color: #3498db;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .chart-wrapper {
    height: 200px;
  }

  .stats-mini-card {
    padding: 12px;
  }

  .stats-mini-number {
    font-size: 1.5rem;
  }

  .major-item {
    padding: 10px;
  }

  .nisn-info-content {
    padding: 20px;
  }

  .nisn-info-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .nisn-info-title {
    font-size: 1.3rem;
  }

  /* Allow the charts card to expand on small screens without being clipped
     (the global .glass-card has overflow:hidden). Make the card and its
     body overflow visible so the breakdown-section can grow freely. */
  /* Keep the charts card clipping on small screens so rounded corners
     continue to enclose inner content. We'll give the breakdown section
     its own inner background and rounded corners to visually package
     the 'Distribusi per Jurusan' list. */
  .module-home-charts-card,
  .module-home-charts-card .card-body {
    overflow: hidden;
  }
}

/* Extra mobile spacing and FAB stacking tweaks
   - Give main content a bottom padding so cards can extend above any footer
   - Add extra bottom padding to the charts card body so the last items are clear
   - Lower the FAB z-index slightly on small screens to avoid covering content
*/
@media (max-width: 768px) {
  .module-home-content {
    padding-bottom: 90px; /* space for footer + FAB */
  }

  .module-home-charts-card .card-body {
    padding-bottom: 20px; /* modest breathing room for last list items */
  }

  /* Visually enclose the distribution list inside a soft rounded panel */
  .module-home-charts-body .breakdown-section {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0.02)
    );
    border-radius: 12px;
    padding: 12px 10px;
    margin-top: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  }

  /* nudge breakdown content to align with the card's inner padding
     (use padding instead of margin so the rounded panel remains flush) */
  /* Make card body and breakdown share the same inner padding so
     headings and list items line up with the header title. */
  .module-home-charts-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .module-home-charts-body .breakdown-section {
    /* breakdown uses the body padding, so reset its own horizontal padding */
    padding-left: 0;
    padding-right: 0;
  }

  /* If still too close on some devices, add a small extra left inset specifically
     for the breakdown list so list items align visually with the header title. */
  .module-home-charts-body .breakdown-section {
    padding-left: 24px;
  }

  /* FAB sits above most UI; lower it on small screens so it doesn't cover card content */
  .fab-container {
    z-index: 800;
  }
  .fab-container .fab-main {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  }

  /* Make the charts card flexible on small screens so it wraps its content
     and contains the distribution list instead of clipping or leaving empty space. */
  .module-home-charts-card {
    height: auto !important;
    min-height: 0 !important;
  }

  .module-home-charts-body {
    overflow: visible !important;
  }

  /* Slightly reduce chart height on very small screens so there's room for the list */
  .chart-wrapper {
    height: 160px;
  }
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.6s ease-in-out;
}

.slide-up {
  animation: slideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Modal-specific styles for #nisnInfoModal */
/* Modal-specific styles for #nisnInfoModal */
#nisnInfoModal .modal-dialog {
  max-width: 760px;
  width: 95%;
}
#nisnInfoModal .modal-content {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(80, 80, 120, 0.12);
  background: #fff;
}
#nisnInfoModal .modal-header {
  background: #f5f6fa;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 1.5rem 0.5rem 1.5rem;
}
#nisnInfoModal .modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #4f46e5;
}
#nisnInfoModal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 1.5rem 2rem 1.25rem 2rem; /* wider body padding for breathing room */
  background: #f9fafb;
  color: #222;
  font-size: 0.98rem;
  line-height: 1.6;
}
#nisnInfoModal .modal-body section {
  margin-bottom: 1.2rem;
}
#nisnInfoModal .modal-body h3 {
  font-size: 1.18rem;
  color: #4f46e5;
  margin-bottom: 1rem;
}
#nisnInfoModal .modal-body .fw-semibold {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #4f46e5;
  margin-bottom: 8px;
}
#nisnInfoModal .modal-body .fw-semibold i {
  font-size: 1.05rem;
  margin-right: 0;
  color: #4f46e5;
}
#nisnInfoModal .modal-body ul,
#nisnInfoModal .modal-body ol {
  margin-bottom: 0.5rem;
}
#nisnInfoModal .modal-body li {
  margin-bottom: 0.45rem;
}
#nisnInfoModal .modal-body ul.row.list-unstyled {
  margin-left: 0; /* ensure list rows don't escape modal padding */
}
#nisnInfoModal .modal-body ul.row.list-unstyled li.col-6 {
  padding-left: 0.75rem;
  padding-right: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#nisnInfoModal .modal-body .nisn-list {
  padding-left: 1.5rem;
}
#nisnInfoModal .modal-body .nisn-list li {
  margin-bottom: 0.5rem;
}
#nisnInfoModal .modal-body .nisn-section-title {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #6366f1;
}
#nisnInfoModal .modal-body .nisn-section-desc {
  padding-left: 0.6rem;
}
#nisnInfoModal .modal-footer {
  padding: 0.75rem 1.25rem;
  background: #f5f6fa;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
#nisnInfoModal .modal-footer .btn {
  min-width: 120px;
  font-size: 0.95rem;
  padding: 0.45rem 1rem;
}
#nisnInfoModal .form-check {
  margin: 0;
  font-size: 0.98rem;
}
#nisnInfoModal .alert-info {
  background: #e6f2ff;
  color: #2563eb;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

/* Make scrollbar thumb subtle and ensure content doesn't hug the right edge */
#nisnInfoModal .modal-body::-webkit-scrollbar {
  width: 10px;
}
#nisnInfoModal .modal-body::-webkit-scrollbar-track {
  background: transparent;
}
#nisnInfoModal .modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
}