/* ==========================================================================
   DIBSII - UI Components
   Cards, Badges, Buttons, Tabs, Donut Charts, Forms, QR Scanner, Modals
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cards & Containers
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.card:last-child {
  margin-bottom: 0;
}

.card-clickable {
  cursor: pointer;
  user-select: none;
}

.card-clickable:hover {
  border-color: var(--primary-purple);
  box-shadow: 0 6px 18px rgba(99, 32, 238, 0.1);
}

.card-clickable:active {
  transform: scale(0.99);
}

.card-header-clean {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}

.card-title {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.35 !important;
}

.card-description {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   2. Profile Header Cards - Senior Friendly, Clear & Bold
   -------------------------------------------------------------------------- */
.profile-card {
  background-color: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background-color: var(--primary-purple-light);
  color: var(--primary-purple-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 24px;
  flex-shrink: 0;
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info {
  flex: 1;
  min-width: 0;
}

.profile-name {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
}

.profile-role-title {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  margin-top: 4px;
  line-height: 1.4 !important;
}

.profile-extra {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  margin-top: 4px;
  line-height: 1.4 !important;
}

/* Child Selector in Wali Murid Header */
.child-selector-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--primary-purple-light);
  color: var(--primary-purple-text);
  border: 1px solid #DDD6FE;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.child-selector-btn:hover {
  background-color: #EDE9FE;
}

/* --------------------------------------------------------------------------
   3. Stat Cards Grid (Admin 3 Horizontal Stats)
   -------------------------------------------------------------------------- */
.stats-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.stat-card {
  background-color: var(--bg-card);
  border: 2px solid var(--border-light) !important;
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.stat-value {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: var(--primary-purple);
  line-height: 1.2;
}

.stat-label {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  margin-top: 4px;
}

.stat-card.highlight {
  background-color: var(--primary-green-light);
  border-color: #34D399 !important;
}

.stat-card.highlight .stat-value {
  color: var(--primary-green-text);
}

.stat-card.highlight .stat-label {
  color: var(--primary-green-text);
}

/* --------------------------------------------------------------------------
   4. Status Badges & Pills - High Contrast & Senior Legible
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px !important;
  border-radius: var(--radius-full);
  font-size: 13.5px !important;
  font-weight: 800 !important;
  border: 1.5px solid transparent;
}

.badge-layak {
  background-color: #ECFDF5;
  color: #065F46;
  border: 2px solid #34D399 !important;
}

.badge-belum {
  background-color: #FEF2F2;
  color: #991B1B;
  border: 2px solid #F87171 !important;
}

.badge-neutral {
  background-color: #F1F5F9;
  color: #1E293B;
  border: 1.5px solid #CBD5E1 !important;
}

.badge-aspect {
  color: #FFFFFF;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   5. Buttons & Actions - Minimum 56dp Height & Large Touch Area
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  min-height: 48px;
  height: auto;
  box-sizing: border-box !important;
  max-width: 100%;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.3;
  letter-spacing: 0.1px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.btn-primary {
  background-color: var(--primary-purple);
  color: #FFFFFF;
  border-color: var(--primary-purple) !important;
}

.btn-primary:hover {
  background-color: var(--primary-purple-hover);
  border-color: var(--primary-purple-hover) !important;
}

.btn-success {
  background-color: var(--primary-green);
  color: #FFFFFF;
  border-color: var(--primary-green) !important;
}

.btn-success:hover {
  background-color: var(--primary-green-hover);
  border-color: var(--primary-green-hover) !important;
}

.btn-outline {
  background-color: var(--bg-card) !important;
  border: 2px solid var(--border-light) !important;
  color: var(--text-main) !important;
  font-weight: 800 !important;
}

.btn-outline:hover {
  background-color: var(--bg-subtle) !important;
  border-color: var(--primary-purple) !important;
  color: var(--primary-purple) !important;
}

.btn-danger {
  background-color: #DC2626 !important;
  color: #FFFFFF !important;
  border-color: #DC2626 !important;
}

.btn-danger:hover {
  background-color: #B91C1C !important;
  color: #FFFFFF !important;
  border-color: #B91C1C !important;
}

.btn-danger-subtle {
  background-color: #FEE2E2;
  color: #DC2626;
  border: 2px solid #FECACA !important;
}

.btn-danger-subtle:hover {
  background-color: #FCA5A5;
  color: #991B1B;
}

.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
  min-height: 38px;
  height: auto;
  border-radius: 10px;
  font-weight: 700;
  gap: 6px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.25;
}

.btn-xs {
  padding: 5px 10px;
  font-size: 11.5px;
  min-height: 30px;
  height: auto;
  border-radius: 8px;
  font-weight: 700;
  gap: 4px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.2;
}

.btn-block,
.btn-full {
  width: 100% !important;
  display: flex !important;
  min-height: 48px !important;
  height: auto !important;
}

/* Action button groups stretch across container */
.sheet-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.sheet-footer .btn {
  flex: 1 1 140px;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  height: auto;
  font-size: 14px;
  padding: 10px 14px;
  font-weight: 800;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: break-word;
}

.crud-actions-row,
.crud-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
}

.crud-actions-row .btn,
.crud-item-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  height: auto;
  padding: 6px 12px;
  font-size: 12px;
  white-space: normal;
  line-height: 1.2;
}

@media (min-width: 640px) {
  /* Universal safety cap: Prevent buttons from over-stretching while ensuring text always fits */
  .btn {
    max-width: 480px;
    box-sizing: border-box;
  }

  .btn-block,
  .btn-full {
    width: 100% !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
  }

  /* Modal / Bottom Sheet footer action buttons */
  .sheet-footer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .sheet-footer .btn {
    flex: 0 1 auto !important;
    min-width: 130px !important;
    max-width: 360px !important;
    width: auto !important;
    padding: 12px 20px !important;
    font-size: 14.5px !important;
    margin: 0 !important;
  }

  .sheet-footer .btn:only-child,
  .sheet-footer .btn.btn-block {
    max-width: 420px !important;
    width: 100% !important;
    min-width: 180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Form submit & action buttons */
  form button[type="submit"],
  form .btn-primary,
  form .btn-block,
  .avatar-upload-container .btn,
  .sheet-body button[type="submit"],
  .sheet-body .btn-block {
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
  }

  /* Dialog modal actions */
  .dialog-modal-card .btn-block,
  .dialog-modal-footer .btn {
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Small and icon buttons - allow content to dictate natural width */
  .btn-sm,
  .btn-xs {
    max-width: none !important;
    width: auto;
  }

  /* CRUD item actions */
  .crud-actions-row,
  .crud-item-actions {
    justify-content: flex-start;
  }

  .crud-actions-row .btn,
  .crud-item-actions .btn {
    flex: 0 1 auto !important;
    max-width: none !important;
    min-width: 0;
  }

  /* Carousel quick action row */
  .carousel-quick-action-row {
    justify-content: flex-start !important;
    text-align: left !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .carousel-quick-action-row .btn {
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
    text-align: left !important;
    max-width: none !important;
  }
}

@media (min-width: 768px) {
  .btn {
    padding: 14px 28px;
    font-size: 16.5px;
    min-height: 58px;
  }
  .btn-sm {
    padding: 10px 20px;
    font-size: 14.5px;
    min-height: 48px;
  }
}

.btn-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   6. Form Controls - Senior Friendly (Min 56px Height & Clear 2px Borders)
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-main);
  background-color: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: 12px;
  outline: none;
  min-height: 56px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.form-control:focus {
  border-color: var(--primary-purple) !important;
  box-shadow: 0 0 0 4px rgba(99, 32, 238, 0.2) !important;
}

/* Dedicated styling for inputs with prefix icons */
.input-with-icon-wrapper,
.input-with-icon {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.input-with-icon-wrapper .input-prefix-icon,
.input-with-icon .input-prefix-icon,
.input-prefix-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  width: 20px !important;
  height: 20px !important;
}

.form-control.has-icon-left,
input.form-control.has-icon-left,
.input-with-icon-wrapper input.form-control,
.input-with-icon input.form-control {
  padding-left: 46px !important;
}

.form-control.has-icon-both,
input.form-control.has-icon-both,
.input-with-icon-wrapper input.form-control.has-icon-both,
.input-with-icon input.form-control.has-icon-both {
  padding-left: 46px !important;
  padding-right: 46px !important;
}

.input-icon-box .form-control {
  border: none !important;
  background: transparent !important;
  padding: 10px 12px 10px 8px !important;
  min-height: 42px !important;
  box-shadow: none !important;
}

textarea.form-control {
  resize: vertical;
  min-height: 110px !important;
  line-height: 1.55 !important;
}

/* --------------------------------------------------------------------------
   7. Aspect Tabs (Horizontal Pill Tabs)
   -------------------------------------------------------------------------- */
.aspect-tabs-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
  scrollbar-width: none;
}

.aspect-tabs-nav::-webkit-scrollbar {
  display: none;
}

.aspect-tab-btn {
  padding: 8px 12px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.aspect-tab-btn:hover {
  border-color: #CBD5E1;
  color: var(--text-main);
}

.aspect-tab-btn.active {
  background-color: var(--primary-purple);
  color: #FFFFFF;
  border-color: var(--primary-purple);
}

/* --------------------------------------------------------------------------
   8. Indicator Rating Scale (1 - 4 Scale)
   -------------------------------------------------------------------------- */
.rating-scale-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.rating-btn {
  border: 1px solid var(--border-light);
  background-color: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}

.rating-btn:hover {
  background-color: #E2E8F0;
}

.rating-btn .score-number {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.rating-btn .score-text {
  font-size: 9.5px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
  line-height: 1.1;
}

.rating-btn.selected {
  background-color: var(--primary-purple);
  border-color: var(--primary-purple);
}

.rating-btn.selected .score-number,
.rating-btn.selected .score-text {
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   9. Solid Pie Chart (Diagram Lingkaran 5 Aspek SKL) & Statistics
   -------------------------------------------------------------------------- */
.chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  width: 100%;
}

.pie-chart-root {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}

.pie-chart-svg {
  display: block;
  margin: 0 auto;
  max-width: 280px;
  height: auto;
  overflow: visible;
}

.pie-slice {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
  transform-origin: 140px 140px;
}

.pie-slice:hover {
  transform: scale(1.03);
  filter: brightness(1.08) drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}

.pie-slice path {
  transition: opacity 0.2s ease;
}

.chart-toggle-pills {
  display: inline-flex;
  background-color: var(--bg-subtle);
  padding: 4px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  gap: 4px;
  margin-bottom: 14px;
}

.chart-toggle-btn {
  border: none;
  background: transparent;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.chart-toggle-btn.active {
  background-color: var(--primary-purple);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(99, 32, 238, 0.25);
}

.pie-legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 14px;
}

.pie-legend-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.pie-legend-card:hover {
  transform: translateY(-2px);
  background-color: #FFFFFF;
}

.pie-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.pie-legend-name {
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.pie-legend-val {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Attendance Counters */
.attendance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.att-box {
  background-color: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  text-align: center;
}

.att-box.hadir { background-color: #ECFDF5; color: #065F46; }
.att-box.izin { background-color: #EFF6FF; color: #1E40AF; }
.att-box.sakit { background-color: #FEFCE8; color: #854D0E; }
.att-box.alfa { background-color: #FEF2F2; color: #991B1B; }

.att-count {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
}

.att-label {
  font-size: 10.5px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   10. QR Scanner UI
   -------------------------------------------------------------------------- */
.qr-scanner-box {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: #0F172A;
  position: relative;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.camera-preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.scanner-target-frame {
  position: relative;
  width: 180px;
  height: 180px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  z-index: 2;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
}

.scanner-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--primary-green);
  border-style: solid;
}

.scanner-corner.tl { top: -2px; left: -2px; border-width: 3px 0 0 3px; }
.scanner-corner.tr { top: -2px; right: -2px; border-width: 3px 3px 0 0; }
.scanner-corner.bl { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; }
.scanner-corner.br { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; }

.scan-laser-line {
  position: absolute;
  left: 5%;
  right: 5%;
  height: 2px;
  background-color: var(--primary-green);
  box-shadow: 0 0 8px var(--primary-green);
  animation: scanLaser 2s infinite ease-in-out;
}

@keyframes scanLaser {
  0% { top: 10%; }
  50% { top: 90%; }
  100% { top: 10%; }
}

/* --------------------------------------------------------------------------
   11. Community Chat Log
   -------------------------------------------------------------------------- */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.4;
}

.chat-bubble.teacher {
  align-self: flex-start;
  background-color: #F1F5F9;
  color: var(--text-main);
  border-bottom-left-radius: 2px;
}

.chat-bubble.parent {
  align-self: flex-end;
  background-color: var(--primary-purple);
  color: #FFFFFF;
  border-bottom-right-radius: 2px;
}

.chat-meta {
  font-size: 10px;
  color: #94A3B8;
  margin-top: 3px;
  display: block;
}

.chat-bubble.parent .chat-meta {
  color: #DDD6FE;
  text-align: right;
}

/* Progress bar */
.progress-bar-wrap {
  width: 100%;
  height: 8px;
  background-color: #E2E8F0;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 6px;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--primary-purple);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.progress-bar-fill.success {
  background-color: var(--primary-green);
}

/* ==========================================================================
   MICRO-SKILL GRADING MODAL (Non-Locked Circular Step Flow)
   Emerald Green (#0D8A5E), Rounded-2xl, Soft Multi-Layer Shadow
   ========================================================================== */

.micro-grading-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
}

/* Step Section Card (All Active / Non-Locked) */
.step-section-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.step-section-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 14px rgba(13, 138, 94, 0.08);
}

body.dark-mode .step-section-card {
  background: #1E293B;
  border-color: #334155;
}

/* Step Section Header with Circular Badge */
.step-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.step-badge-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0D8A5E;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(13, 138, 94, 0.35);
}

.step-section-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-main);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.step-section-subtitle {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: normal;
}

/* [1] PILIH SANTRI SELECT BOX */
.santri-select-custom {
  width: 100%;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  background-color: var(--bg-subtle);
  border: 1.5px solid var(--border-light);
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230D8A5E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.santri-select-custom:focus {
  border-color: #0D8A5E;
  box-shadow: 0 0 0 3px rgba(13, 138, 94, 0.15);
  background-color: #FFFFFF;
}

body.dark-mode .santri-select-custom {
  background-color: #0F172A;
  border-color: #334155;
  color: #F8FAFC;
}

/* [2] CATEGORY CARDS GRID */
.category-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.category-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border-light);
  background: var(--bg-subtle);
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-card-item:hover {
  transform: translateY(-2px);
  border-color: #0D8A5E;
  box-shadow: 0 4px 10px rgba(13, 138, 94, 0.12);
}

.category-card-item:active {
  transform: scale(0.97);
}

/* Active Category Card (Emerald #0D8A5E) */
.category-card-item.active {
  background: linear-gradient(135deg, #0D8A5E 0%, #096343 100%);
  border-color: #0D8A5E;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(13, 138, 94, 0.35);
}

.category-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.category-card-icon {
  font-size: 16px;
  line-height: 1;
}

.category-card-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-card-item.active .category-card-name {
  color: #FFFFFF !important;
}

.category-card-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
}

.category-card-item.active .category-card-pill {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* [3] SEARCH BAR & MICRO-SKILL LIST */
.micro-search-container {
  position: relative;
  margin-bottom: 10px;
}

.micro-search-input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  font-size: 13px;
  border-radius: 12px;
  border: 1.5px solid var(--border-light);
  background-color: var(--bg-subtle);
  color: var(--text-main);
  outline: none;
  transition: all 0.2s ease;
}

.micro-search-input:focus {
  border-color: #0D8A5E;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(13, 138, 94, 0.12);
}

body.dark-mode .micro-search-input {
  background-color: #0F172A;
  border-color: #334155;
  color: #F8FAFC;
}

.micro-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #0D8A5E;
  font-size: 14px;
  pointer-events: none;
}

.micro-skill-scroll-box {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

.micro-skill-scroll-box::-webkit-scrollbar {
  width: 5px;
}
.micro-skill-scroll-box::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 10px;
}

.micro-skill-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.micro-skill-item:hover {
  background: #F0FDF4;
  border-color: #86EFAC;
}

body.dark-mode .micro-skill-item:hover {
  background: #064E3B;
  border-color: #059669;
}

.micro-skill-item.active {
  background: #ECFDF5;
  border: 1.5px solid #0D8A5E;
  box-shadow: 0 2px 8px rgba(13, 138, 94, 0.15);
}

body.dark-mode .micro-skill-item.active {
  background: #064E3B;
  border-color: #10B981;
}

.micro-skill-code-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: #E2E8F0;
  color: #334155;
  flex-shrink: 0;
  margin-top: 1px;
}

.micro-skill-item.active .micro-skill-code-badge {
  background: #0D8A5E;
  color: #FFFFFF;
}

.micro-skill-title-text {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-main);
  flex: 1;
}

.micro-skill-status-pill {
  font-size: 10px;
  font-weight: 700;
  color: #0D8A5E;
  background: #DCFCE7;
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}

body.dark-mode .micro-skill-status-pill {
  background: #065F46;
  color: #A7F3D0;
}

/* [4] INPUT PENILAIAN */
.active-skill-preview-banner {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.dark-mode .active-skill-preview-banner {
  background: #064E3B;
  border-color: #059669;
}

/* Level Kemampuan (1-7) */
.grading-levels-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.grading-level-btn {
  flex: 1;
  min-width: 36px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--border-light);
  background: var(--bg-subtle);
  color: var(--text-main);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.grading-level-btn:hover {
  border-color: #0D8A5E;
  transform: translateY(-2px);
}

.grading-level-btn.active {
  background: #0D8A5E;
  color: #FFFFFF;
  border-color: #0D8A5E;
  box-shadow: 0 3px 10px rgba(13, 138, 94, 0.35);
  transform: scale(1.05);
}

/* Assistance Options Grid */
.assistance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

@media (min-width: 500px) {
  .assistance-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.assistance-btn {
  padding: 9px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--border-light);
  background: var(--bg-subtle);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.assistance-btn:hover {
  border-color: #0D8A5E;
  background: #F0FDF4;
}

.assistance-btn.active {
  background: #ECFDF5;
  border-color: #0D8A5E;
  color: #0D8A5E;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(13, 138, 94, 0.18);
}

body.dark-mode .assistance-btn.active {
  background: #064E3B;
  color: #A7F3D0;
  border-color: #10B981;
}

/* Interactive 5-Star Rating */
.star-rating-box {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--bg-subtle);
}

.star-btn {
  font-size: 26px;
  cursor: pointer;
  color: #CBD5E1;
  transition: transform 0.15s ease, color 0.15s ease;
  user-select: none;
  line-height: 1;
}

.star-btn:hover {
  transform: scale(1.2);
}

.star-btn.filled {
  color: #F59E0B;
}

.star-rating-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: 8px;
}

/* Observation Textarea */
.observation-textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  font-size: 12.5px;
  border-radius: 12px;
  border: 1.5px solid var(--border-light);
  background-color: var(--bg-subtle);
  color: var(--text-main);
  outline: none;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.observation-textarea:focus {
  border-color: #0D8A5E;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(13, 138, 94, 0.12);
}

body.dark-mode .observation-textarea {
  background-color: #0F172A;
  border-color: #334155;
  color: #F8FAFC;
}

/* Modal Actions Footer (Batal & Simpan Penilaian) */
.grading-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.btn-grading-cancel {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border-light);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-grading-cancel:hover {
  background: #E2E8F0;
  color: var(--text-main);
}

.btn-grading-save {
  flex: 2;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #0D8A5E 0%, #096343 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(13, 138, 94, 0.35);
  transition: all 0.2s ease;
}

.btn-grading-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(13, 138, 94, 0.45);
}

.btn-grading-save:active {
  transform: scale(0.98);
}

/* --------------------------------------------------------------------------
   7. DIBSII Image & Banner Carousel (Touch-Swipe & Auto-Play)
   -------------------------------------------------------------------------- */
/* ==========================================================================
   CAROUSEL BANNER CONTROLLER & STYLES (SMOOTH GLIDE, BIGGER VISUALS, SAFE PADDING)
   ========================================================================== */
.dibsii-carousel-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  aspect-ratio: var(--carousel-aspect-ratio, 16 / 9);
  min-height: 140px;
  max-height: min(85vh, 650px);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
  user-select: none;
  background-color: #0f172a;
  border: 1px solid var(--border-light);
  transition: aspect-ratio 0.45s cubic-bezier(0.2, 0.9, 0.3, 1), max-height 0.45s ease;
}

.dibsii-carousel-track {
  display: flex;
  transition: transform 0.65s cubic-bezier(0.2, 0.9, 0.3, 1);
  width: 100%;
  height: 100%;
}

.dibsii-carousel-slide {
  min-width: 100%;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* SAFE PADDING: ensures chevron buttons NEVER overlap text or action buttons */
  padding: clamp(12px, 3.2vw, 26px) clamp(38px, 6vw, 64px);
  color: #FFFFFF;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.65s ease;
}

.carousel-slide-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.carousel-slide-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.carousel-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-full);
  font-size: 10.5px;
  font-weight: 700;
  width: fit-content;
  color: #FFFFFF;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.carousel-title {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel-desc {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.carousel-slide-hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 5px;
  background: rgba(0, 0, 0, 0.22);
  padding: 2px 8px;
  border-radius: 12px;
  width: fit-content;
  backdrop-filter: blur(4px);
  letter-spacing: 0.2px;
}

/* Dedicated Quick-Action Buttons (Persis di Luar / di Bawah Carousel Banner) */
.carousel-quick-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  margin-bottom: 12px;
  width: 100%;
}

/* Representative Visual Foto/Ikon Pilar (Ukuran ~70px, Lebih besar dari avatar profile 54px) */
.carousel-slide-visual {
  flex-shrink: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-visual-box {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.dibsii-carousel-slide:hover .carousel-visual-box {
  transform: scale(1.06) rotate(2deg);
}

.carousel-visual-icon {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}

.carousel-visual-weight {
  font-size: 9.5px;
  font-weight: 900;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 6px;
  border-radius: 6px;
  margin-top: 3px;
  letter-spacing: 0.2px;
}

/* Nav Chevrons (Fixed at 8px on sides, safe from inner content) */
.carousel-btn-prev,
.carousel-btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s ease;
}

.carousel-btn-prev { left: 8px; }
.carousel-btn-next { right: 8px; }

.carousel-btn-prev:hover,
.carousel-btn-next:hover {
  background: rgba(0, 0, 0, 0.65);
  transform: translateY(-50%) scale(1.12);
}

/* Indicators (Dynamic Expanding Pill Dot) */
.carousel-indicators {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);
  border-radius: 20px;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.carousel-dot.active {
  width: 22px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   CUSTOM 2000x900 JPG CAROUSEL & GENERATOR STUDIO STYLES
   ========================================================================== */
.dibsii-carousel-slide.has-custom-image {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.dibsii-carousel-slide .carousel-slide-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.dibsii-carousel-slide.is-image-only {
  padding: 0 !important;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.carousel-image-only-pill {
  padding: 10px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  width: 100%;
  box-sizing: border-box;
}

.carousel-badge-small {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 800;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
  letter-spacing: 0.3px;
}

/* CAROUSEL MANAGER MODAL & SLIDE CARDS */
.carousel-manager-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.carousel-manager-header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
}

.carousel-sync-action-box {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.06) 0%, rgba(16, 185, 129, 0.03) 100%);
  border: 1.5px solid rgba(5, 150, 105, 0.3);
  border-left: 4.5px solid #059669;
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.08);
}

.carousel-apply-btn {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff !important;
  border: none !important;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}

.carousel-apply-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.45);
}

.carousel-apply-btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

.carousel-apply-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.carousel-slide-item-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.carousel-slide-item-card:hover {
  border-color: #059669;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.12);
  transform: translateY(-1px);
}

.carousel-preview-thumb-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: flex-end;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.carousel-thumb-badge-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  background: rgba(0, 0, 0, 0.65);
  color: #FFFFFF;
  border-radius: 8px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.carousel-thumb-res-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 8px;
  background: #059669;
  color: #FFFFFF;
  border-radius: 8px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.4);
}

.carousel-thumb-overlay-content {
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  width: 100%;
  box-sizing: border-box;
}

.carousel-thumb-title {
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.3;
}

.carousel-thumb-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CAROUSEL GENERATOR STUDIO */
.carousel-generator-studio {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.generator-preview-canvas-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22);
  border: 2px solid rgba(5, 150, 105, 0.4);
  background: #0f172a;
  position: relative;
}

.generator-preview-canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.generator-theme-pill {
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  user-select: none;
  color: #FFFFFF;
}

.generator-theme-pill.active {
  border-color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transform: scale(1.05);
}

.generator-icon-chip {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.generator-icon-chip:hover,
.generator-icon-chip.active {
  border-color: #059669;
  background: rgba(5, 150, 105, 0.1);
  transform: scale(1.1);
}

/* RESPONSIVE DESIGN (DESKTOP, TABLET, MOBILE) */
@media (max-width: 900px) {
  .dibsii-carousel-wrapper {
    aspect-ratio: 16 / 9;
    aspect-ratio: var(--carousel-aspect-ratio, 16 / 9);
    min-height: 140px;
    max-height: min(85vh, 600px);
  }
  .carousel-title {
    font-size: clamp(14px, 2.5vw, 18px);
  }
  .carousel-desc {
    font-size: clamp(11px, 1.8vw, 13px);
  }
  .carousel-slide-inner {
    gap: 10px;
  }
}

@media (max-width: 600px) {
  .dibsii-carousel-wrapper {
    aspect-ratio: 16 / 9;
    aspect-ratio: var(--carousel-aspect-ratio, 16 / 9);
    min-height: 130px;
    max-height: min(85vh, 550px);
    margin-bottom: 10px;
  }
  .dibsii-carousel-slide {
    padding: 10px 34px 18px 34px;
  }
  .carousel-btn-prev, .carousel-btn-next {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .carousel-btn-prev { left: 5px; }
  .carousel-btn-next { right: 5px; }
  .carousel-badge {
    font-size: 9.5px;
    padding: 2px 8px;
  }
  .carousel-slide-hint {
    display: none;
  }
}

@media (max-width: 440px) {
  .dibsii-carousel-wrapper {
    aspect-ratio: 16 / 9;
    aspect-ratio: var(--carousel-aspect-ratio, 16 / 9);
    min-height: 120px;
    max-height: min(85vh, 520px);
  }
  .carousel-slide-inner {
    gap: 6px;
  }
  .carousel-visual-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .carousel-visual-icon {
    font-size: 22px;
  }
  .carousel-visual-weight {
    font-size: 8px;
    padding: 1px 4px;
  }
  .carousel-desc {
    -webkit-line-clamp: 2;
  }
}

/* ==========================================================================
   MULTI-STEP GRADING WIZARD & SCORE CIRCLE STYLES (PURE NUMBERING)
   ========================================================================== */

/* ==========================================================================
   MULTI-STEP GRADING WIZARD & INTERACTIVE MODERN STYLES
   ========================================================================== */

.grading-step-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 6px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  gap: 4px;
}

.grading-step-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: 8px;
  flex: 1;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  cursor: default;
}

.grading-step-item.clickable {
  cursor: pointer;
}

.grading-step-item.clickable:hover {
  background: var(--bg-subtle);
  color: var(--text-main);
  transform: translateY(-1px);
}

.grading-step-item.active {
  background: linear-gradient(135deg, var(--primary-purple) 0%, #7C3AED 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(99, 32, 238, 0.28);
}

.grading-step-item.completed {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

body.dark-mode .grading-step-item.completed {
  background: rgba(5, 150, 105, 0.15);
  color: #34D399;
  border-color: rgba(5, 150, 105, 0.3);
}

.grading-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border-color);
  color: var(--text-muted);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.grading-step-item.active .grading-step-num {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.grading-step-item.completed .grading-step-num {
  background: #059669;
  color: #FFFFFF;
}

.grading-step-arrow {
  color: var(--border-color);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Santri Step 1 - Auto Info Card Modern */
.santri-auto-info-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-top: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.25s ease;
}

.santri-step1-profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-color);
}

.santri-step1-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99, 32, 238, 0.12) 0%, rgba(20, 184, 166, 0.15) 100%);
  border: 2px solid var(--primary-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99, 32, 238, 0.15);
}

.santri-step1-profile-info {
  flex: 1;
  min-width: 0;
}

.santri-step1-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.santri-step1-pills-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.santri-step1-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.santri-step1-pill.primary {
  background: rgba(99, 32, 238, 0.1);
  color: var(--primary-purple);
}

/* 2 Kolom: Kelas & Wali Kelas */
.santri-meta-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.santri-meta-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.santri-meta-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.santri-meta-val {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Banner Diagnosa di Bawah Kelas & Wali Kelas (Full Width) */
.santri-diagnosa-banner {
  background: linear-gradient(135deg, rgba(99, 32, 238, 0.04) 0%, rgba(59, 130, 246, 0.06) 100%);
  border: 1px solid rgba(99, 32, 238, 0.18);
  border-left: 4px solid var(--primary-purple);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.santri-diagnosa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.santri-diagnosa-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  color: var(--primary-purple);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.santri-diagnosa-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
  word-break: break-word;
}

@media (max-width: 360px) {
  .santri-meta-grid-2col {
    grid-template-columns: 1fr;
  }
}

.numbered-santri-list,
.numbered-category-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.interactive-santri-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-left: 5px solid var(--primary-purple);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.interactive-santri-card:hover {
  transform: translateY(-3px) scale(1.008);
  border-color: var(--primary-purple);
  background: linear-gradient(135deg, rgba(99, 32, 238, 0.08) 0%, var(--bg-card) 100%);
  box-shadow: 0 8px 24px rgba(99, 32, 238, 0.18);
}

.interactive-santri-card.active {
  border-color: var(--primary-purple);
  background: linear-gradient(135deg, rgba(99, 32, 238, 0.12) 0%, var(--bg-card) 100%);
  box-shadow: 0 4px 16px rgba(99, 32, 238, 0.2);
}

.interactive-santri-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.interactive-santri-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.interactive-santri-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--primary-purple);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(99, 32, 238, 0.25);
  transition: transform 0.2s ease;
}

.interactive-santri-card:hover .interactive-santri-badge {
  transform: scale(1.08) rotate(3deg);
}

.interactive-santri-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.interactive-santri-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.santri-sub-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  background: rgba(99, 32, 238, 0.08);
  color: var(--primary-purple);
  border: 1px solid rgba(99, 32, 238, 0.2);
}

.interactive-category-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.interactive-category-card:hover {
  transform: translateY(-3px) scale(1.008);
}

/* Hover Warna Khusus per Kategori Aspek */
.interactive-category-card.cat-aspect-life-skills:hover {
  border-color: #10B981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, var(--bg-card) 100%);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
}
.interactive-category-card.cat-aspect-diniyah:hover {
  border-color: #059669;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, var(--bg-card) 100%);
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.2);
}
.interactive-category-card.cat-aspect-vokasional:hover {
  border-color: #D97706;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.12) 0%, var(--bg-card) 100%);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.2);
}
.interactive-category-card.cat-aspect-akademik:hover {
  border-color: #6320EE;
  background: linear-gradient(135deg, rgba(99, 32, 238, 0.12) 0%, var(--bg-card) 100%);
  box-shadow: 0 8px 24px rgba(99, 32, 238, 0.2);
}
.interactive-category-card.cat-aspect-formal:hover {
  border-color: #E11D48;
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.12) 0%, var(--bg-card) 100%);
  box-shadow: 0 8px 24px rgba(225, 29, 72, 0.2);
}

.interactive-cat-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.interactive-cat-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.interactive-cat-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease;
}

.interactive-category-card:hover .interactive-cat-badge {
  transform: scale(1.08) rotate(3deg);
}

.interactive-cat-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.25;
}

.interactive-cat-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cat-weight-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 12px;
  display: inline-block;
}

/* Category Card Progress Bar */
.cat-progress-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cat-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.cat-progress-track {
  width: 100%;
  height: 6px;
  background: var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.cat-progress-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.4s ease;
}

/* ==========================================================================
   STEP 3: HORIZONTAL 5-CATEGORY PILL TABS BAR & LIVE PROGRESS HEADER
   ========================================================================== */
.grading-aspect-tabs-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 8px 2px;
  margin-bottom: 10px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.grading-aspect-tabs-bar::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.grading-aspect-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  user-select: none;
}

.grading-aspect-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.grading-aspect-pill.active {
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  transform: scale(1.03);
}

.grading-aspect-pill-badge {
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
  font-weight: 800;
}

.grading-aspect-pill.active .grading-aspect-pill-badge {
  background: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
}

/* Live Aspect Header & Meter Card */
.grading-live-progress-card {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-subtle) 100%);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.grading-live-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.grading-live-title {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.grading-live-meter-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.grading-live-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.grading-live-progress-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.35s ease;
  background: linear-gradient(90deg, var(--primary-purple) 0%, #059669 100%);
}

/* Interactive Filter Chips Row */
.grading-filter-chips-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.grading-filter-chip {
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  transition: all 0.18s ease;
  white-space: nowrap;
}

.grading-filter-chip:hover {
  background: var(--bg-subtle);
  color: var(--text-main);
}

.grading-filter-chip.active {
  background: var(--text-main);
  color: var(--bg-card);
  border-color: var(--text-main);
}

body.dark-mode .grading-filter-chip.active {
  background: var(--primary-purple);
  color: #FFFFFF;
  border-color: var(--primary-purple);
}

/* Lingkaran Berkedip (Blinking / Pulsing Circle) Saat Belum Dinilai */
.clean-skill-blink-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid #94A3B8;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  animation: blinkPulseGlow 1.6s infinite ease-in-out;
  position: relative;
}

.clean-skill-blink-circle:hover {
  border-color: var(--primary-purple);
  transform: scale(1.12);
  background: rgba(99, 32, 238, 0.08);
}

@keyframes blinkPulseGlow {
  0% {
    transform: scale(0.95);
    border-color: #94A3B8;
    box-shadow: 0 0 0 0 rgba(99, 32, 238, 0.45);
  }
  50% {
    transform: scale(1.08);
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 9px rgba(99, 32, 238, 0);
  }
  100% {
    transform: scale(0.95);
    border-color: #94A3B8;
    box-shadow: 0 0 0 0 rgba(99, 32, 238, 0);
  }
}

/* Tombol / Badge Catatan Wali Kelas (Sesuai Konsep Halaman 1) */
.quick-note-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FEF08A;
  color: #854D0E;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #FACC15;
  cursor: pointer;
  margin-top: 4px;
  width: fit-content;
  transition: all 0.18s ease;
  user-select: none;
  box-shadow: 0 1px 3px rgba(133, 77, 14, 0.1);
}

.quick-note-pill-btn:hover {
  background: #FDE047;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(133, 77, 14, 0.2);
}

body.dark-mode .quick-note-pill-btn {
  background: #78350F;
  color: #FEF08A;
  border-color: #A16207;
}

/* Input Catatan Wali Kelas dengan Tombol Kirim Gaya WhatsApp */
.quick-note-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  animation: fadeIn 0.18s ease;
}

.quick-note-input {
  flex: 1;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 20px;
  border: 1.5px solid #FACC15;
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  transition: border-color 0.2s ease;
}

.quick-note-input:focus {
  border-color: #EAB308;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
}

.quick-note-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}

.quick-note-send-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.45);
}

.quick-note-send-btn:active {
  transform: scale(0.92);
}

.quick-note-cancel-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.quick-note-cancel-btn:hover {
  background: #FEE2E2;
  color: #DC2626;
  border-color: #F87171;
}

/* Teks Catatan Wali Kelas yang Tersimpan (Sesuai Konsep Halaman 3) */
.saved-note-container {
  margin-top: 5px;
  padding: 6px 10px;
  background: rgba(254, 249, 195, 0.7);
  border-left: 3px solid #EAB308;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.saved-note-container:hover {
  background: #FEF08A;
}

body.dark-mode .saved-note-container {
  background: rgba(120, 53, 15, 0.35);
  border-left-color: #FACC15;
}

.saved-note-text {
  font-size: 11.5px;
  color: #475569;
  font-style: italic;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

body.dark-mode .saved-note-text {
  color: #CBD5E1;
}

.note-quote-icon {
  font-style: normal;
  font-size: 12px;
  flex-shrink: 0;
}

.note-content-body {
  flex: 1;
}

.note-edit-badge {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.08);
  color: #334155;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  white-space: nowrap;
}

body.dark-mode .note-edit-badge {
  background: rgba(255, 255, 255, 0.15);
  color: #E2E8F0;
}

/* Tanggal, Bulan, Tahun Penilaian Wali Kelas (Konsep Integrasi Tanggal) */
.note-date-stamp {
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #78350F;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.95;
  letter-spacing: 0.1px;
}

body.dark-mode .note-date-stamp {
  color: #FDE047;
}

.standalone-date-stamp {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   POPUP MODAL RUBRIK 4 TINGKAT (Sesuai Konsep Halaman 2)
   ========================================================================== */
.dialog-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease-out;
  pointer-events: auto;
}

.dialog-modal-overlay[style*="display: none"] {
  pointer-events: none !important;
}

.dialog-modal-card {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: 24px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopIn {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.dialog-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1.5px solid var(--border-color);
  background: var(--bg-card);
}

.dialog-modal-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  margin: 0;
  letter-spacing: -0.2px;
}

.dialog-modal-body {
  padding: 20px 22px !important;
  font-size: 16px !important;
  color: var(--text-main) !important;
  overflow-y: auto;
  flex: 1;
}

/* Daftar Pilihan Rubrik (1 s/d 4) */
.rubric-list-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rubric-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.rubric-item-card.score-1 {
  border-left: 6px solid #DC2626;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.04) 0%, var(--bg-card) 100%);
}
.rubric-item-card.score-2 {
  border-left: 6px solid #EA580C;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.04) 0%, var(--bg-card) 100%);
}
.rubric-item-card.score-3 {
  border-left: 6px solid #2563EB;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, var(--bg-card) 100%);
}
.rubric-item-card.score-4 {
  border-left: 6px solid #059669;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.04) 0%, var(--bg-card) 100%);
}

.rubric-item-card:hover {
  transform: translateY(-2px);
}

.rubric-item-card.score-1:hover {
  border-color: #DC2626;
  background: rgba(220, 38, 38, 0.08);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.22);
}
.rubric-item-card.score-2:hover {
  border-color: #EA580C;
  background: rgba(234, 88, 12, 0.08);
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.22);
}
.rubric-item-card.score-3:hover {
  border-color: #2563EB;
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.22);
}
.rubric-item-card.score-4:hover {
  border-color: #059669;
  background: rgba(5, 150, 105, 0.08);
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.22);
}

.rubric-item-card:active {
  transform: scale(0.98);
}

/* Rubrik Aktif / Terpilih Saat Diklik */
.rubric-item-card.score-1.active {
  border-color: #DC2626;
  background: rgba(220, 38, 38, 0.14);
  box-shadow: 0 6px 24px rgba(220, 38, 38, 0.32);
}
.rubric-item-card.score-2.active {
  border-color: #EA580C;
  background: rgba(234, 88, 12, 0.14);
  box-shadow: 0 6px 24px rgba(234, 88, 12, 0.32);
}
.rubric-item-card.score-3.active {
  border-color: #2563EB;
  background: rgba(37, 99, 235, 0.14);
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.32);
}
.rubric-item-card.score-4.active {
  border-color: #059669;
  background: rgba(5, 150, 105, 0.14);
  box-shadow: 0 6px 24px rgba(5, 150, 105, 0.32);
}

.rubric-item-info {
  flex: 1;
  min-width: 0;
}

.rubric-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.rubric-item-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.3;
}

.rubric-percent-pill {
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 12px;
  color: #FFFFFF;
}

.rubric-percent-pill.score-pill-1 {
  background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}
.rubric-percent-pill.score-pill-2 {
  background: linear-gradient(135deg, #EA580C 0%, #F97316 100%);
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35);
}
.rubric-percent-pill.score-pill-3 {
  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}
.rubric-percent-pill.score-pill-4 {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%);
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35);
}

.rubric-item-desc {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.45;
}

/* Lingkaran Ceklis Pilihan Rubrik */
.rubric-check-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #94A3B8;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 900;
}

.rubric-item-card.score-1:hover .rubric-check-circle {
  border-color: #DC2626;
  background: rgba(220, 38, 38, 0.15);
  transform: scale(1.08);
}
.rubric-item-card.score-2:hover .rubric-check-circle {
  border-color: #EA580C;
  background: rgba(234, 88, 12, 0.15);
  transform: scale(1.08);
}
.rubric-item-card.score-3:hover .rubric-check-circle {
  border-color: #2563EB;
  background: rgba(37, 99, 235, 0.15);
  transform: scale(1.08);
}
.rubric-item-card.score-4:hover .rubric-check-circle {
  border-color: #059669;
  background: rgba(5, 150, 105, 0.15);
  transform: scale(1.08);
}

.rubric-item-card.score-1.active .rubric-check-circle {
  border-color: #DC2626;
  background: #DC2626;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}
.rubric-item-card.score-2.active .rubric-check-circle {
  border-color: #EA580C;
  background: #EA580C;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.4);
}
.rubric-item-card.score-3.active .rubric-check-circle {
  border-color: #2563EB;
  background: #2563EB;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}
.rubric-item-card.score-4.active .rubric-check-circle {
  border-color: #059669;
  background: #059669;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4);
}

/* Footer / Helper Tip Box (Sesuai Catatan Merah di Halaman 2) */
.rubric-modal-footer-tip {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(99, 32, 238, 0.06);
  border: 1.5px dashed var(--primary-purple);
  border-radius: 12px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary-purple);
  line-height: 1.45;
}

body.dark-mode .rubric-modal-footer-tip {
  background: rgba(99, 32, 238, 0.15);
  color: #C4B5FD;
  border-color: #7C3AED;
}

/* Micro-Skill Item with Pure Numbering & Right-Aligned Score Buttons (1 - 4) */
.clean-micro-skill-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-left: 4px solid #CBD5E1; /* Warna Abu-abu netral sebelum dinilai */
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: all 0.22s ease;
}

/* Status Belum Dinilai (Pending) */
.clean-micro-skill-card.pending-grade {
  background: var(--bg-card);
  border-color: rgba(148, 163, 184, 0.35);
  border-left: 4px solid #94A3B8;
}

.clean-micro-skill-card.pending-grade:hover {
  border-color: var(--primary-purple);
  border-left-color: var(--primary-purple);
  background: var(--bg-subtle);
}

/* Status Sudah Dinilai (Graded) - Skor 4 (100%) Hijau, Skor 3 Biru, Skor 2 Oranye, Skor 1 Merah */
.clean-micro-skill-card.already-graded {
  background: var(--bg-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.clean-micro-skill-card.already-graded .clean-skill-text {
  color: var(--text-main);
  font-weight: 800;
}

/* SKOR 1 (25% - Bantuan Penuh): Merah */
.clean-micro-skill-card.already-graded.score-grade-1 {
  background: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  border-left: 6px solid #DC2626;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.12);
}
.clean-micro-skill-card.already-graded.score-grade-1 .clean-skill-number {
  background: #DC2626;
  color: #FFFFFF;
  border-color: #DC2626;
}
.clean-micro-skill-card.already-graded.score-grade-1 .clean-skill-text {
  color: #7F1D1D;
}
.clean-micro-skill-card.already-graded.score-grade-1:hover {
  background: #FEE2E2;
  border-color: #DC2626;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.22);
}

/* SKOR 2 (50% - Bantuan Minimal): Oranye */
.clean-micro-skill-card.already-graded.score-grade-2 {
  background: #FFF7ED;
  border: 1.5px solid #FDBA74;
  border-left: 6px solid #EA580C;
  box-shadow: 0 2px 10px rgba(234, 88, 12, 0.12);
}
.clean-micro-skill-card.already-graded.score-grade-2 .clean-skill-number {
  background: #EA580C;
  color: #FFFFFF;
  border-color: #EA580C;
}
.clean-micro-skill-card.already-graded.score-grade-2 .clean-skill-text {
  color: #7C2D12;
}
.clean-micro-skill-card.already-graded.score-grade-2:hover {
  background: #FFEDD5;
  border-color: #EA580C;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.22);
}

/* SKOR 3 (75% - Mandiri Sebagian / Pengawasan): Biru */
.clean-micro-skill-card.already-graded.score-grade-3 {
  background: #EFF6FF;
  border: 1.5px solid #93C5FD;
  border-left: 6px solid #2563EB;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.12);
}
.clean-micro-skill-card.already-graded.score-grade-3 .clean-skill-number {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
}
.clean-micro-skill-card.already-graded.score-grade-3 .clean-skill-text {
  color: #1E3A8A;
}
.clean-micro-skill-card.already-graded.score-grade-3:hover {
  background: #DBEAFE;
  border-color: #2563EB;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.22);
}

/* SKOR 4 (100% - Mandiri Sepenuhnya): HIJAU SEGAR & TEGAS */
.clean-micro-skill-card.already-graded.score-grade-4 {
  background: #F0FDF4;
  border: 1.5px solid #86EFAC;
  border-left: 6px solid #16A34A;
  box-shadow: 0 2px 10px rgba(22, 163, 74, 0.15);
}
.clean-micro-skill-card.already-graded.score-grade-4 .clean-skill-number {
  background: #16A34A;
  color: #FFFFFF;
  border-color: #16A34A;
}
.clean-micro-skill-card.already-graded.score-grade-4 .clean-skill-text {
  color: #064E3B;
}
.clean-micro-skill-card.already-graded.score-grade-4:hover {
  background: #DCFCE7;
  border-color: #16A34A;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.25);
}

/* Badge Bulat Persentase Capaian Nilai */
.clean-skill-percent-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #FFFFFF;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  border: 2px solid #FFFFFF;
  letter-spacing: -0.3px;
  user-select: none;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
}
.clean-skill-percent-circle:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.clean-skill-percent-circle.percent-circle-1 {
  background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}
.clean-skill-percent-circle.percent-circle-2 {
  background: linear-gradient(135deg, #EA580C 0%, #F97316 100%);
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.4);
}
.clean-skill-percent-circle.percent-circle-3 {
  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}
.clean-skill-percent-circle.percent-circle-4 {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.45);
}
/* ==========================================================================
   ADMIN MICRO-SKILLS & INDICATORS MANAGEMENT (CLICK TO EDIT & BULK DELETE)
   ========================================================================== */
.admin-bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 12px;
  gap: 8px;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.admin-bulk-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  user-select: none;
}

.admin-bulk-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-ind-card {
  padding: 10px 12px;
  margin-bottom: 8px;
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.admin-ind-card:hover {
  border-color: var(--primary-purple);
  background-color: var(--bg-subtle);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(99, 32, 238, 0.1);
}

.admin-ind-card.selected {
  border-color: var(--primary-purple);
  background-color: rgba(99, 32, 238, 0.06);
}

.admin-ind-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.admin-ind-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary-purple);
  flex-shrink: 0;
}

.admin-ind-content {
  flex: 1;
  min-width: 0;
}

.admin-ind-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.35;
}

.admin-ind-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-ind-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Teks Status Capaian Nilai */
.graded-status-text-1 { color: #991B1B; font-weight: 800; font-size: 11px; }
.graded-status-text-2 { color: #9A3412; font-weight: 800; font-size: 11px; }
.graded-status-text-3 { color: #1E40AF; font-weight: 800; font-size: 11px; }
.graded-status-text-4 { color: #065F46; font-weight: 800; font-size: 11px; }

.clean-micro-skill-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.clean-micro-skill-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.clean-skill-number {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.clean-skill-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.clean-skill-text {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
}

/* Right-Aligned Score Trigger Circle */
.clean-micro-skill-right-scores {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mini-score-btn {
  width: 32px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  user-select: none;
}

.mini-score-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.mini-score-btn:active {
  transform: scale(0.92);
}

/* Distinct Button Colors */
.mini-score-btn.score-1:hover, .mini-score-btn.score-1.selected {
  border-color: #DC2626;
  background: #DC2626;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

.mini-score-btn.score-2:hover, .mini-score-btn.score-2.selected {
  border-color: #D97706;
  background: #D97706;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}

.mini-score-btn.score-3:hover, .mini-score-btn.score-3.selected {
  border-color: #2563EB;
  background: #2563EB;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.mini-score-btn.score-4:hover, .mini-score-btn.score-4.selected {
  border-color: #059669;
  background: #059669;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
}

/* Success Confirmation Popup & Circle Score Badge */
.success-confirm-popup {
  padding: 8px 4px;
  text-align: center;
}

.success-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.12), rgba(99, 32, 238, 0.1));
  border: 1.5px solid rgba(5, 150, 105, 0.25);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 14px;
}

.score-circle-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669 0%, #10B981 100%);
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
  border: 2.5px solid #FFFFFF;
  flex-shrink: 0;
}

.success-summary-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: left;
  margin-bottom: 16px;
  font-size: 12.5px;
  line-height: 1.5;
}

.success-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-color);
}
.success-summary-row:last-child {
  border-bottom: none;
}


.graded-pill-badge {
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
  font-weight: 800;
  font-size: 11px;
  border: 1px solid rgba(5, 150, 105, 0.35);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ungraded-pill-badge {
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 10.5px;
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}

.edit-confirm-prompt-box {
  background: #FFFBEB;
  border: 1.5px solid #F59E0B;
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 10px;
  text-align: left;
  animation: fadeIn 0.2s ease;
}

/* ==========================================================================
   EXPANDABLE HISTORY ACCORDION LIST VIEW (PORTAL GURU)
   ========================================================================== */
.history-filter-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.history-filter-pills::-webkit-scrollbar {
  display: none;
}

.history-filter-pill {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  user-select: none;
}

.history-filter-pill:hover {
  border-color: var(--primary-purple);
  color: var(--text-main);
}

.history-filter-pill.active {
  background: var(--primary-purple);
  color: #FFFFFF;
  border-color: var(--primary-purple);
  box-shadow: 0 2px 8px rgba(99, 32, 238, 0.25);
}

.history-list-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.history-item-card:hover {
  border-color: var(--primary-purple);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.history-item-card.is-expanded {
  border-color: var(--primary-purple);
  box-shadow: 0 6px 18px rgba(99, 32, 238, 0.12);
}

.history-item-header {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  background: var(--bg-card);
  transition: background 0.18s ease;
}

.history-item-header:hover {
  background: var(--bg-subtle);
}

.history-item-card.is-expanded .history-item-header {
  background: var(--bg-subtle);
  border-bottom: 1px dashed var(--border-color);
}

.history-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.history-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.history-item-title-wrap {
  flex: 1;
  min-width: 0;
}

.history-item-main-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-sub-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.history-expand-chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
  transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.history-item-card.is-expanded .history-expand-chevron {
  transform: rotate(180deg);
  background: var(--primary-purple);
  color: #FFFFFF;
}

.history-expandable-content {
  padding: 14px;
  background: var(--bg-card);
  animation: fadeIn 0.22s ease;
}

.history-detail-row {
  display: flex;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.history-detail-label {
  width: 110px;
  color: var(--text-muted);
  font-weight: 700;
  flex-shrink: 0;
}

.history-detail-value {
  color: var(--text-main);
  flex: 1;
}

.history-quote-box {
  background: var(--bg-subtle);
  border-left: 3px solid var(--primary-purple);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.45;
  margin-top: 8px;
}

/* ==========================================================================
   EXPANDABLE SANTRI DASHBOARD CARD ACCORDION
   ========================================================================== */
.dashboard-santri-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dashboard-santri-card:hover {
  border-color: var(--primary-purple);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.dashboard-santri-card.is-expanded {
  border-color: var(--primary-purple);
  box-shadow: 0 6px 20px rgba(99, 32, 238, 0.12);
}

.dashboard-santri-header {
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  background: var(--bg-card);
  transition: background 0.18s ease;
}

.dashboard-santri-header:hover {
  background: var(--bg-subtle);
}

.dashboard-santri-card.is-expanded .dashboard-santri-header {
  background: var(--bg-subtle);
  border-bottom: 1px dashed var(--border-color);
}

.dashboard-santri-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.dashboard-santri-chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
  transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.dashboard-santri-card.is-expanded .dashboard-santri-chevron {
  transform: rotate(180deg);
  background: var(--primary-purple);
  color: #FFFFFF;
}

.dashboard-santri-expand-body {
  padding: 14px;
  background: var(--bg-card);
  animation: fadeIn 0.22s ease;
}

.santri-aspect-chips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 10px 0;
}

.santri-aspect-chip {
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
   DASHBOARD TOP SECTION (PROFILE CARD + CAROUSEL) - SCROLLS NATURALLY WITH PAGE
   ========================================================================== */
.sticky-dashboard-frozen-header,
.dashboard-top-section {
  position: static;
  margin-bottom: 12px;
}

.sticky-dashboard-frozen-header .profile-card,
.dashboard-top-section .profile-card {
  margin-bottom: 10px;
}

.sticky-dashboard-frozen-header .dibsii-carousel-wrapper,
.dashboard-top-section .dibsii-carousel-wrapper {
  margin-bottom: 6px;
}

/* ==========================================================================
   STATISTICS TAB: SINGLE-COLOR DONUT GAUGE & 5 ASPECT PROGRESS CARDS
   ========================================================================== */
.stat-gauge-card {
  text-align: center;
  padding: 16px 14px;
}

.stat-gauge-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 12px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-gauge-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.stat-gauge-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border: 2px solid transparent;
  transition: all 0.25s ease;
}

.stat-gauge-score {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}

.stat-gauge-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
  opacity: 0.9;
}

.stat-gauge-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.stat-aspect-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 12px;
}

.stat-aspect-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
  overflow: hidden;
}

.stat-aspect-card:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--primary-purple);
}

.stat-aspect-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.stat-aspect-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.stat-aspect-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
  flex-shrink: 0;
}

.stat-aspect-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-aspect-weight {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.stat-aspect-right {
  text-align: right;
  flex-shrink: 0;
}

.stat-aspect-score {
  font-size: 13.5px;
  font-weight: 800;
}

.stat-aspect-pts {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.stat-aspect-sub {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.stat-aspect-progress-track {
  width: 100%;
  height: 6px;
  background: var(--bg-subtle);
  border-radius: 3px;
  overflow: hidden;
}

.stat-aspect-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.35s ease;
}

.stat-footer-tip {
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
  border: 1px dashed var(--border-color);
}

/* ==========================================================================
   EXCEL & CSV BULK IMPORT / EXPORT & SANTRI CRUD UI
   ========================================================================== */
.bulk-upload-zone {
  border: 2px dashed var(--primary-purple);
  border-radius: var(--radius-md);
  padding: 22px 16px;
  text-align: center;
  background: var(--bg-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 12px;
}

.bulk-upload-zone:hover,
.bulk-upload-zone.dragover {
  background: rgba(99, 32, 238, 0.06);
  border-color: var(--primary-purple-dark);
}

.bulk-upload-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 8px auto;
  border-radius: 50%;
  background: rgba(99, 32, 238, 0.12);
  color: var(--primary-purple);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bulk-preview-wrap {
  max-height: 280px;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  background: var(--bg-card);
}

.bulk-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.bulk-preview-table th {
  background: var(--bg-subtle);
  padding: 8px 10px;
  font-weight: 700;
  text-align: left;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.bulk-preview-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.bulk-preview-table tr:hover {
  background: var(--bg-subtle);
}

.santri-crud-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

.santri-search-box {
  flex: 1;
  min-width: 160px;
}

/* ==========================================================================
   SMART SCHOOL BELL & AUDIO ANNOUNCEMENT SYSTEM (KIOSK DISPLAY)
   ========================================================================== */
.bell-hero-card {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #4338CA 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(49, 46, 129, 0.35);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.bell-hero-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.bell-clock-time {
  font-family: 'Outfit', sans-serif;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  color: #FFFFFF;
  margin-bottom: 4px;
}

.bell-clock-date {
  font-size: 12.5px;
  font-weight: 600;
  color: #C7D2FE;
  margin-bottom: 14px;
}

.bell-countdown-hero {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 10px;
}

.bell-countdown-label {
  font-size: 11px;
  font-weight: 700;
  color: #A5B4FC;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bell-countdown-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #FFFFFF;
}

.bell-countdown-timer {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #FCD34D;
  background: rgba(245, 158, 11, 0.2);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(245, 158, 11, 0.4);
  white-space: nowrap;
}

.bell-schedule-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.bell-schedule-card:hover {
  border-color: var(--primary-purple);
  box-shadow: var(--shadow-sm);
}

.bell-schedule-card.active-upcoming {
  border-color: #F59E0B;
  background: rgba(245, 158, 11, 0.04);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
}

.bell-schedule-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bell-time-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--primary-purple);
  background: rgba(99, 32, 238, 0.08);
  padding: 4px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.bell-announcement-box {
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
  border-left: 3px solid var(--primary-purple);
  font-style: italic;
}

.bell-pulse-ring {
  animation: bellPulse 1.2s infinite;
}

@keyframes bellPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   PARENT PORTAL - 2 SKL CATEGORY CARDS & POPUP LIST
   ========================================================================== */
.skl-category-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  border: 1.5px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}

.skl-category-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.skl-category-card.bisa {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, var(--bg-card) 100%);
  border-left: 5px solid #10B981;
}

.skl-category-card.tidak-bisa {
  border-color: rgba(239, 68, 68, 0.35);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, var(--bg-card) 100%);
  border-left: 5px solid #EF4444;
}

.skl-cat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.skl-cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
}

.skl-category-card.bisa .skl-cat-tag {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.skl-category-card.tidak-bisa .skl-cat-tag {
  background: rgba(239, 68, 68, 0.12);
  color: #DC2626;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.skl-cat-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}

.skl-cat-count-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.skl-cat-count-big {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

.skl-category-card.bisa .skl-cat-count-big {
  color: #059669;
}

.skl-category-card.tidak-bisa .skl-cat-count-big {
  color: #DC2626;
}

.skl-cat-count-meta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.skl-cat-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 12px;
}

.skl-cat-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.skl-category-card.bisa .skl-cat-action-btn {
  background: #10B981;
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
}

.skl-category-card.bisa .skl-cat-action-btn:hover {
  background: #059669;
}

.skl-category-card.tidak-bisa .skl-cat-action-btn {
  background: #EF4444;
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25);
}

.skl-category-card.tidak-bisa .skl-cat-action-btn:hover {
  background: #DC2626;
}

/* Modal List Items */
.skl-popup-filter-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 12px;
  scrollbar-width: thin;
}

.skl-popup-filter-pill {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.skl-popup-filter-pill.active {
  background: var(--primary-purple);
  color: #FFFFFF;
  border-color: var(--primary-purple);
}

.skl-popup-item-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}

.skl-popup-item-card:hover {
  border-color: var(--primary-purple);
  box-shadow: var(--shadow-sm);
}

.skl-descriptive-sentence {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.skl-descriptive-sentence .item-num {
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 1px;
}

.skl-popup-item-note {
  background: var(--bg-subtle);
  border-left: 3px solid var(--primary-purple);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}

/* ==========================================================================
   COMPREHENSIVE MULTI-DEVICE RESPONSIVE SUITE & WHATSAPP BRIDGE
   Optimized for All Devices: Ultra-small (<= 360px), Mobile (361px - 639px),
   Phablets (640px - 767px), Tablets (768px - 1023px), Laptops & Desktops (>= 1024px)
   ========================================================================== */

/* 1. WHATSAPP ATTENDANCE BUTTON & BADGES */
.btn-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 800;
  font-size: 13.5px;
  padding: 12px 18px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  text-decoration: none;
  box-sizing: border-box;
}

.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  filter: brightness(1.05);
}

.btn-whatsapp:active {
  transform: translateY(0);
}

.btn-whatsapp svg {
  flex-shrink: 0;
}

.btn-whatsapp-sm {
  padding: 6px 12px !important;
  font-size: 11.5px !important;
  border-radius: 10px !important;
  gap: 6px !important;
}

.whatsapp-badge {
  background-color: #E8FDF0;
  color: #0D8A5E;
  border: 1px solid #A7F3D0;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.dark-mode .whatsapp-badge {
  background-color: rgba(13, 138, 94, 0.2);
  color: #34D399;
  border-color: rgba(52, 211, 153, 0.3);
}

/* 2. RESPONSIVE TABLE & HORIZONTAL SCROLL WRAPPER */
.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  margin-bottom: 12px;
}

.table-responsive-wrapper::-webkit-scrollbar {
  height: 6px;
}

.table-responsive-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(99, 32, 238, 0.2);
  border-radius: 4px;
}

/* 3. MULTI-COLUMN ADAPTIVE GRIDS ACROSS PORTALS */
/* Cover Screen 5 Pilar SKL Grid */
.cover-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
}

@media (min-width: 640px) {
  .cover-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .cover-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

@media (min-width: 1360px) {
  .cover-cards-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }
}

/* Admin Portal Santri & PTK Cards Grid */
.admin-card-grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .admin-card-grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (min-width: 1200px) {
  .admin-card-grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 1600px) {
  .admin-card-grid-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

/* Guru Portal: Micro-Skill Indicators Grid */
.guru-indicators-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .guru-indicators-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (min-width: 1280px) {
  .guru-indicators-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* Guru Portal: Statistics & Chart Side-by-Side on Tablet/Desktop */
.guru-stats-chart-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
}

@media (min-width: 768px) {
  .guru-stats-chart-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
  }
}

/* Ortu Portal: 5 SKL Aspect Cards Grid */
.ortu-aspects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
}

@media (min-width: 640px) {
  .ortu-aspects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (min-width: 1100px) {
  .ortu-aspects-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 1400px) {
  .ortu-aspects-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }
}

/* Ortu Portal: Profile Banner Horizontal on Tablet/Desktop */
@media (min-width: 768px) {
  .profile-hero-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
    padding: 24px 28px;
  }
  .profile-hero-left {
    display: flex;
    align-items: center;
    gap: 18px;
  }
}

/* Ortu Portal: Radar / Pie Chart Side-by-Side */
.ortu-chart-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
}

@media (min-width: 768px) {
  .ortu-chart-section {
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
    align-items: center;
  }
}

/* 4. ID CARD GENERATOR: SIDE-BY-SIDE ON TABLET / DESKTOP */
@media (min-width: 860px) {
  .idcard-modal-container {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    gap: 24px !important;
    align-items: start !important;
  }
  .idcard-preview-stage {
    position: sticky;
    top: 10px;
  }
}

/* 5. FORM ROW 2-COLUMN RESPONSIVE LAYOUT */
@media (min-width: 600px) {
  .form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* 6. DIALOG MODAL CARD SCALING */
@media (min-width: 768px) {
  .dialog-modal-card {
    max-width: 580px;
    width: 90%;
  }
}

@media (min-width: 1024px) {
  .dialog-modal-card.wide-dialog {
    max-width: 740px;
  }
}

/* 7. ULTRA-SMALL SCREEN ADAPTATIONS (< 360px) - Senior Friendly */
@media (max-width: 359px) {
  .app-header {
    padding: 10px 12px !important;
  }
  .header-logo {
    width: 42px !important;
    height: 42px !important;
  }
  .header-app-title {
    font-size: 18px !important;
  }
  .stats-grid-3 {
    gap: 6px !important;
  }
  .stat-card {
    padding: 10px 6px !important;
  }
  .stat-value {
    font-size: 20px !important;
  }
  .stat-label {
    font-size: 12px !important;
    font-weight: 800 !important;
  }
  .attendance-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .role-segmented-selector {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .btn {
    padding: 12px 16px !important;
    font-size: 15px !important;
    min-height: 52px !important;
    font-weight: 800 !important;
  }
  .nav-item {
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 6px 2px !important;
  }
  .nav-item svg {
    width: 26px !important;
    height: 26px !important;
  }
}

/* SKL Category Card Row for Tablet / Desktop */
.skl-category-card-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
}

@media (min-width: 680px) {
  .skl-category-card-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* ==========================================================================
   Wali Murid: Clean & Simple SKL Summary & Grouped Skills View
   ========================================================================== */
.ortu-skl-summary-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.ortu-skl-score-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.ortu-skl-score-big {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

.ortu-skl-score-meta {
  flex: 1;
}

.ortu-summary-aspects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 640px) {
  .ortu-summary-aspects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (min-width: 1100px) {
  .ortu-summary-aspects-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

.ortu-aspect-summary-item {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

/* Filter Pills for Grouping */
.ortu-skill-filter-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.ortu-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
  justify-content: center;
}

.ortu-pill-btn svg {
  flex-shrink: 0;
}

.ortu-pill-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--border-color);
}

.ortu-pill-btn.active-bisa {
  background: #ECFDF5;
  color: #065F46;
  border-color: #10B981;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.ortu-pill-btn.active-tidak {
  background: #FFFBEB;
  color: #92400E;
  border-color: #F59E0B;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.ortu-pill-btn.active-all {
  background: var(--primary-purple-light);
  color: var(--primary-purple);
  border-color: var(--primary-purple);
  box-shadow: 0 2px 8px rgba(99, 32, 238, 0.15);
}

.ortu-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.06);
}

/* Clean Skill Cards */
.ortu-clean-skill-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 13px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: all 0.2s ease;
}

.ortu-clean-skill-card:hover {
  border-color: var(--primary-purple);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.ortu-clean-skill-card.is-bisa {
  border-left: 3.5px solid #10B981;
}

.ortu-clean-skill-card.is-bimbingan {
  border-left: 3.5px solid #F59E0B;
}

.ortu-skill-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--bg-subtle);
  transition: all 0.2s ease;
}

.ortu-skill-icon-box.icon-bisa {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.ortu-skill-icon-box.icon-bimbingan {
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
}

.ortu-skill-content {
  flex: 1;
  min-width: 0;
}

.ortu-skill-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.4;
  margin-bottom: 5px;
}

.ortu-skill-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
}

.ortu-skill-aspect-tag {
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 10.5px;
}

.ortu-skill-status-tag {
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 10.5px;
}

.ortu-skill-status-tag.tag-bisa {
  background: #ECFDF5;
  color: #047857;
}

.ortu-skill-status-tag.tag-bimbingan {
  background: #FFFBEB;
  color: #B45309;
}

.ortu-skill-evaluator {
  color: var(--text-muted);
  font-size: 10.5px;
}

.ortu-skill-notes {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bg-subtle);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--text-main);
  border-left: 2px solid var(--primary-purple);
}

.ortu-skill-percent-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ortu-skill-percent-badge.pct-bisa {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.ortu-skill-percent-badge.pct-bimbingan {
  background: #FFFBEB;
  color: #D97706;
  border: 1px solid #FDE68A;
}

/* ==========================================================================
   Super Admin Responsive Layout & Batch Management Styles
   ========================================================================== */

/* Super Admin Controls Grid (Kewenangan & Registrasi) */
.super-admin-controls-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 14px;
}

@media (min-width: 768px) {
  .super-admin-controls-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Super Admin Action Cards Grid */
.super-admin-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

@media (min-width: 640px) {
  .super-admin-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  .super-admin-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (min-width: 1280px) {
  .super-admin-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* Super Admin Quick Access Grid */
.super-admin-quick-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .super-admin-quick-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* Email Database Container Grid */
.email-db-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

@media (min-width: 768px) {
  .email-db-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (min-width: 1280px) {
  .email-db-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

/* Batch Management Bar */
.user-mgmt-batch-bar {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.user-item-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary-purple);
  flex-shrink: 0;
}

/* ==========================================================================
   ID Card 3-Step Wizard Component Styles
   ========================================================================== */
.idcard-wizard-box {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.idcard-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.idcard-step-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-purple);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

.idcard-step-title {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text-main);
}

.idcard-recommendation-box {
  background: rgba(2, 132, 199, 0.05);
  border: 1.5px solid #BAE6FD;
  border-radius: var(--radius-md);
  padding: 14px;
}

.idcard-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  .idcard-templates-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

/* ==========================================================================
   MASTER DATA & AKUN SISWA LIST VIEW STYLING
   ========================================================================== */
.santri-listview-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.santri-listview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  position: relative;
  user-select: none;
}

.santri-listview-item:hover {
  transform: translateY(-2px);
  border-color: var(--primary-purple);
  background: var(--bg-card);
  box-shadow: 0 6px 20px rgba(99, 32, 238, 0.12);
}

.santri-listview-item:active {
  transform: scale(0.995);
}

.santri-listview-item.selected {
  border: 1.5px solid var(--primary-purple);
  background: rgba(99, 32, 238, 0.04);
  box-shadow: 0 4px 14px rgba(99, 32, 238, 0.1);
}

.santri-listview-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.santri-listview-left input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-purple);
  cursor: pointer;
}

.santri-listview-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.santri-listview-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.santri-listview-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.santri-listview-name-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.santri-listview-no {
  font-weight: 800;
  font-size: 13px;
  color: var(--text-muted);
}

.santri-listview-name {
  font-weight: 800;
  font-size: 14.5px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.santri-listview-nickname {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12.5px;
}

.santri-listview-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.santri-listview-class-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(99, 32, 238, 0.08);
  color: var(--primary-purple);
  border: 1px solid rgba(99, 32, 238, 0.2);
}

.santri-listview-diag-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.santri-listview-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.santri-listview-account-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  margin-top: 1px;
}

.account-pill-label {
  font-weight: 700;
  color: var(--primary-purple);
}

.account-pill-user code,
.account-pill-pass code {
  background: var(--bg-card);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  font-family: monospace;
  font-weight: 700;
  color: var(--text-main);
}

.santri-listview-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-santri-listview-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary-purple);
  background: rgba(99, 32, 238, 0.08);
  border: 1px solid rgba(99, 32, 238, 0.25);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-santri-listview-edit:hover {
  background: var(--primary-purple);
  color: #FFFFFF;
  border-color: var(--primary-purple);
  box-shadow: 0 2px 8px rgba(99, 32, 238, 0.25);
}

.btn-santri-listview-delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #DC2626;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.25);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-santri-listview-delete:hover {
  background: #DC2626;
  color: #FFFFFF;
  border-color: #DC2626;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

@media (max-width: 680px) {
  .santri-listview-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
  }
  .santri-listview-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .santri-listview-actions {
    justify-content: flex-end;
    border-top: 1px dashed var(--border-light);
    padding-top: 8px;
    margin-top: 2px;
  }
}

/* ==========================================================================
   CATEGORIZED DASHBOARD SHORTCUTS & DYNAMIC VIEW STYLING
   ========================================================================== */
.dashboard-shortcuts-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.shortcut-category-block {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.shortcut-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}

.shortcut-category-icon {
  font-size: 16px;
}

.shortcut-category-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shortcut-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.shortcut-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 4px;
  user-select: none;
  position: relative;
}

.shortcut-card:hover {
  transform: translateY(-2px);
  background: var(--bg-card);
  border-color: var(--primary-purple);
  box-shadow: 0 4px 14px rgba(99, 32, 238, 0.12);
}

.shortcut-card:active {
  transform: scale(0.98);
}

.shortcut-card.active {
  background: var(--bg-card);
  border: 1.5px solid var(--primary-purple);
  box-shadow: 0 4px 16px rgba(99, 32, 238, 0.16);
}

.shortcut-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.shortcut-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.shortcut-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
}

.shortcut-card-title {
  font-weight: 800;
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.3;
}

.shortcut-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

.dashboard-dynamic-module-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-top: 14px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  animation: fadeIn 0.25s ease;
}

.dashboard-dynamic-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 600px) {
  .shortcut-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .shortcut-card {
    padding: 8px 10px;
  }
  .shortcut-card-title {
    font-size: 12px;
  }
  .shortcut-card-desc {
    display: none;
  }
}

/* ==========================================================================
   UNIVERSAL MENU LIST VIEW & EXPANDABLE DETAILS (SEMUA AKUN)
   ========================================================================== */
.app-menu-listview {
  display: flex;
  flex-direction: column;
  gap: 14px !important;
  width: 100%;
}

.menu-listview-item {
  background: var(--bg-card);
  border: 2px solid var(--border-light) !important;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  min-height: 80px !important;
}

.menu-listview-item:hover {
  border-color: var(--primary-purple) !important;
  box-shadow: 0 6px 18px rgba(99, 32, 238, 0.12);
}

.menu-listview-item.is-expanded {
  border-color: var(--primary-purple) !important;
  box-shadow: 0 6px 20px rgba(99, 32, 238, 0.14);
}

.menu-listview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px !important;
  min-height: 76px !important;
  cursor: pointer;
  user-select: none;
  gap: 14px;
  transition: background 0.18s ease;
}

.menu-listview-header:hover {
  background: var(--bg-subtle);
}

.menu-listview-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.menu-icon-box {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px !important;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.menu-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.menu-title {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
}

.menu-subtitle {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.45 !important;
}

.menu-listview-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* User Request: Remove small decorative tags/badges (e.g. 50 SKL, Scanner QR, etc.) to keep view clean */
.menu-badge {
  display: none !important;
}

.menu-chevron {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 2px solid var(--border-light) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
  font-weight: 900;
  color: var(--text-main) !important;
  transition: transform 0.22s ease, background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.menu-chevron.rotated {
  transform: rotate(180deg);
  background: var(--primary-purple);
  color: #FFFFFF !important;
  border-color: var(--primary-purple) !important;
}

.menu-listview-details {
  padding: 16px 18px;
  background: var(--bg-subtle);
  border-top: 1.5px dashed var(--border-color);
  animation: fadeIn 0.22s ease;
}

.menu-detail-desc {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  line-height: 1.55 !important;
  margin-bottom: 14px;
}

.menu-detail-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.menu-metric-chip {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 12px;
}

.menu-metric-label {
  font-size: 12px !important;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
}

.menu-metric-value {
  font-size: 15px !important;
  font-weight: 800;
  color: var(--text-main);
  display: block;
  margin-top: 3px;
}

.menu-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .menu-listview-header {
    padding: 14px 16px !important;
  }
  .menu-icon-box {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }
  .menu-title {
    font-size: 19px !important;
  }
  .menu-subtitle {
    font-size: 15px !important;
  }
  .menu-listview-details {
    padding: 14px 16px !important;
  }
  .menu-detail-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

/* Master Data Rules & SOP Box Styling */
.menu-detail-rules-box {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-left: 5px solid var(--primary-purple);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.menu-rules-title {
  font-size: 13.5px !important;
  font-weight: 800;
  color: var(--primary-purple);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.menu-rules-list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-main);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-rules-list li strong {
  color: var(--primary-purple);
}

/* ==========================================================================
   DIRECT ACTION LIST VIEW MENUS & CRISP VECTOR ICONS
   ========================================================================== */
.menu-listview-item.menu-listview-direct {
  cursor: pointer;
  user-select: none;
}

.menu-listview-item.menu-listview-direct:hover {
  border-color: var(--primary-purple) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(99, 32, 238, 0.12);
}

.menu-listview-item.menu-listview-direct:active {
  transform: translateY(0);
}

.menu-listview-direct .menu-chevron-direct {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 2px solid var(--border-light) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-purple);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.menu-listview-item.menu-listview-direct:hover .menu-chevron-direct {
  background: var(--primary-purple);
  color: #FFFFFF;
  border-color: var(--primary-purple) !important;
  transform: translateX(3px);
}

/* ==========================================================================
   ANIMATED VECTOR PNG ICONS & MERGED MASTER DATA CARD
   ========================================================================== */

@keyframes vectorIconBreathe {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.06);
  }
}

.vector-png-icon {
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.28s ease;
}

.vector-png-icon.anim-icon,
.anim-vector-pulse .vector-png-icon,
.menu-icon-box .vector-png-icon,
.shortcut-category-icon .vector-png-icon,
.master-data-merged-card .vector-png-icon {
  animation: vectorIconBreathe 3.6s ease-in-out infinite;
}

/* Stagger animations for smooth living interface */
.app-menu-listview .menu-listview-item:nth-child(2n) .vector-png-icon {
  animation-delay: 0.5s;
}
.app-menu-listview .menu-listview-item:nth-child(3n) .vector-png-icon {
  animation-delay: 1s;
}
.app-menu-listview .menu-listview-item:nth-child(4n) .vector-png-icon {
  animation-delay: 1.5s;
}

/* Interactive Hover Dynamic Bounce & Glow */
.menu-listview-item:hover .vector-png-icon,
.master-data-merged-card:hover .vector-png-icon,
.shortcut-category-block:hover .shortcut-category-icon .vector-png-icon,
.btn:hover .vector-png-icon,
.vector-png-icon:hover {
  transform: translateY(-3px) scale(1.2) rotate(4deg) !important;
  filter: drop-shadow(0 4px 10px rgba(99, 32, 238, 0.35)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12));
}

.vector-png-icon:active {
  transform: scale(0.95) !important;
}

.vector-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}

.btn svg, .btn .vector-icon-badge, .btn .vector-png-icon {
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

.shortcut-category-icon svg,
.shortcut-category-icon .vector-png-icon {
  display: block;
}

/* Master Data Merged Card Hover & Interactive Effects */
.master-data-merged-card {
  position: relative;
  overflow: hidden;
  user-select: none;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.master-data-merged-card:hover {
  transform: translateY(-2.5px);
  border-color: var(--primary-purple) !important;
  box-shadow: 0 8px 24px rgba(99, 32, 238, 0.16) !important;
}

.master-data-merged-card:hover .menu-chevron-direct {
  background: var(--primary-purple) !important;
  color: #FFFFFF !important;
  transform: translateX(3px);
}

.master-data-merged-card:active {
  transform: translateY(0);
}

/* ==========================================================================
   3-LEVEL MASTER DATA HIERARCHICAL NAVIGATION STYLES
   ========================================================================== */
.master-data-nav-back-btn {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  color: var(--text-main);
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.master-data-nav-back-btn:hover {
  border-color: var(--primary-purple);
  color: var(--primary-purple);
  background: rgba(99, 32, 238, 0.05);
  transform: translateX(-2px);
}

.master-data-category-banner {
  background: var(--bg-card);
  border: 1.5px solid rgba(99, 32, 238, 0.2);
  border-left: 4px solid var(--primary-purple);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(99, 32, 238, 0.05);
}

.master-data-rules-summary {
  background: rgba(99, 32, 238, 0.04);
  border: 1px solid rgba(99, 32, 238, 0.15);
  border-left: 3.5px solid var(--primary-purple);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-main);
  line-height: 1.55;
}

.master-data-search-toolbar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.master-data-list-row {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  margin-bottom: 8px;
}

.master-data-list-row:hover {
  border-color: var(--primary-purple);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(99, 32, 238, 0.1);
}

.master-data-list-row:active {
  transform: translateY(0);
}

.master-data-list-row .list-row-chevron {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-purple);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.master-data-list-row:hover .list-row-chevron {
  background: var(--primary-purple);
  color: #FFFFFF;
  transform: translateX(2px);
}

.master-data-detail-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.master-data-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.master-data-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin-top: 16px;
}

/* ==========================================================================
   KETENTUAN UBAH KATA SANDI UNTUK SEMUA AKUN (PASSWORD POLICY STYLING)
   ========================================================================== */
.admin-password-policy-card,
.guru-password-policy-card,
.ortu-password-policy-card,
.super-password-policy-card {
  transition: all 0.2s ease;
}

.admin-password-policy-card:hover,
.guru-password-policy-card:hover,
.ortu-password-policy-card:hover,
.super-password-policy-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.pwd-policy-box {
  animation: fadeInDown 0.25s ease;
}

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

/* --------------------------------------------------------------------------
   Modern Stacked Bar Chart & Attendance Metrics (Portal Orang Tua)
   -------------------------------------------------------------------------- */
.attendance-summary-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.att-chart-wrapper {
  position: relative;
  width: 100%;
  height: 96px;
  margin: 10px 0 14px 0;
  border-radius: var(--radius-md, 12px);
  background: var(--bg-subtle, #F8FAFC);
  padding: 8px 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attendance-grid-modern {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.att-box-modern {
  position: relative;
  border-radius: var(--radius-sm, 10px);
  padding: 10px 4px;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1.5px solid transparent;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.att-box-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.att-box-modern .att-box-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.att-box-modern.hadir {
  background: linear-gradient(180deg, #F0FDF4 0%, #DCFCE7 100%);
  color: #065F46;
  border-color: rgba(16, 185, 129, 0.3);
}
.att-box-modern.hadir .att-box-topbar {
  background: #10B981;
}

.att-box-modern.izin {
  background: linear-gradient(180deg, #EEF2FF 0%, #E0E7FF 100%);
  color: #3730A3;
  border-color: rgba(99, 102, 241, 0.3);
}
.att-box-modern.izin .att-box-topbar {
  background: #6366F1;
}

.att-box-modern.sakit {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
  color: #92400E;
  border-color: rgba(245, 158, 11, 0.3);
}
.att-box-modern.sakit .att-box-topbar {
  background: #F59E0B;
}

.att-box-modern.alfa {
  background: linear-gradient(180deg, #FFF1F2 0%, #FFE4E6 100%);
  color: #9F1239;
  border-color: rgba(244, 63, 94, 0.3);
}
.att-box-modern.alfa .att-box-topbar {
  background: #F43F5E;
}

.att-count-val {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  font-family: 'Outfit', sans-serif;
}

.att-name-label {
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px;
  letter-spacing: 0.3px;
}

.att-pct-sub {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.8;
  margin-top: 1px;
}

/* Dark mode theme adjustments */
[data-theme="dark"] .att-chart-wrapper,
body.dark-mode .att-chart-wrapper {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .att-box-modern.hadir,
body.dark-mode .att-box-modern.hadir {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.35);
}

[data-theme="dark"] .att-box-modern.izin,
body.dark-mode .att-box-modern.izin {
  background: rgba(99, 102, 241, 0.12);
  color: #818CF8;
  border-color: rgba(99, 102, 241, 0.35);
}

[data-theme="dark"] .att-box-modern.sakit,
body.dark-mode .att-box-modern.sakit {
  background: rgba(245, 158, 11, 0.12);
  color: #FBBF24;
  border-color: rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .att-box-modern.alfa,
body.dark-mode .att-box-modern.alfa {
  background: rgba(244, 63, 94, 0.12);
  color: #FB7185;
  border-color: rgba(244, 63, 94, 0.35);
}

/* ==========================================================================
   DIBSII - SENIOR & LOW-VISION ACCESSIBILITY REDESIGN ENGINE
   Rules strictly enforcing high contrast, large touch targets, clear borders,
   minimum 18-20sp menu titles, minimum 14-16sp descriptions, and clutter-free UI.
   ========================================================================== */

/* 1. Global High-Contrast Color and Font Enforcements */
body:not(.dark-mode) {
  --text-main: #111111 !important;
  --text-muted: #27303F !important;
  --text-light: #475569 !important;
  --border-light: #CBD5E1 !important;
  --border-color: #CBD5E1 !important;
}

body.dark-mode {
  --text-main: #FFFFFF !important;
  --text-muted: #E2E8F0 !important;
  --text-light: #94A3B8 !important;
  --border-light: #475569 !important;
  --border-color: #475569 !important;
}

/* Ensure no text on light theme is washed out */
body:not(.dark-mode) p,
body:not(.dark-mode) span,
body:not(.dark-mode) div {
  -webkit-font-smoothing: antialiased;
}

/* 2. Menu Titles: Minimum 18sp-20sp, Bold, Deep Black (#111111) */
.menu-title,
.card-title,
.shortcut-category-title,
.hub-card-title,
.dashboard-santri-left div > div:first-child,
.aspect-title,
.section-header-title {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* 3. Subtitles, Descriptions, and Sub-Menus: Minimum 14sp-16sp, Semi-Bold (#27303F) */
.menu-subtitle,
.card-description,
.menu-detail-desc,
.profile-role-title,
.profile-extra,
.stat-label,
.dashboard-santri-left div > div:last-child,
.aspect-desc,
.section-subtitle {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* 4. Elimination of Visual Clutter, Badges & Decorative Tags */
.menu-badge,
.cover-logo-aura,
.decorative-sparkle {
  display: none !important;
}

/* 5. Button Sizing: Senior Accessible & Touch-Friendly with Adaptive Content Sizing */
.btn {
  min-height: 50px !important;
  padding: 12px 18px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  border-width: 2px !important;
  letter-spacing: 0.15px !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.3 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.btn-sm {
  min-height: 38px !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.btn-xs {
  min-height: 30px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.btn-outline {
  border: 2px solid var(--border-light) !important;
  color: var(--text-main) !important;
  background-color: var(--bg-card) !important;
}

.btn-outline:hover {
  border-color: var(--primary-purple) !important;
  color: var(--primary-purple) !important;
}

/* 6. Form Fields: Min 56px Height & Clear Boundaries */
.form-group {
  margin-bottom: 22px !important;
}

.form-label {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  margin-bottom: 8px !important;
}

.form-control {
  min-height: 56px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  background-color: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: 12px;
  box-sizing: border-box;
}

.form-control:focus {
  border-color: var(--primary-purple) !important;
  box-shadow: 0 0 0 4px rgba(99, 32, 238, 0.2) !important;
}

textarea.form-control {
  min-height: 110px !important;
  line-height: 1.55 !important;
}

/* 7. Card Elevation, Breathing Room & Border Definition */
.card,
.menu-listview-item,
.dashboard-santri-card,
.profile-card {
  border: 2px solid var(--border-light) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

.card {
  padding: 20px !important;
  margin-bottom: 20px !important;
}

.app-menu-listview {
  gap: 14px !important;
}

.menu-listview-item {
  min-height: 80px !important;
}

.menu-listview-header {
  padding: 16px 18px !important;
  min-height: 76px !important;
  gap: 14px !important;
}

.menu-icon-box {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  font-size: 22px !important;
}

.menu-chevron,
.menu-chevron-direct {
  width: 38px !important;
  height: 38px !important;
  border: 2px solid var(--border-light) !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

/* 8. Bottom Navigation Bar: Ergonomic, Safe-Area Bottom Inset, PWA Mobile Support */
.bottom-nav {
  height: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 2px solid var(--border-light) !important;
  box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08) !important;
  padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px !important;
  box-sizing: border-box !important;
}

@media (display-mode: standalone) {
  .bottom-nav {
    height: calc(72px + max(16px, env(safe-area-inset-bottom, 16px))) !important;
    min-height: calc(72px + max(16px, env(safe-area-inset-bottom, 16px))) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  }
}

.nav-item {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #27303F !important;
  padding: 6px 2px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  min-width: 0 !important;
  flex: 1 !important;
}

body.dark-mode .nav-item {
  color: #CBD5E1 !important;
}

.nav-item svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  margin-bottom: 3px !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

body.dark-mode .nav-item svg {
  display: block !important;
}

.nav-item:hover svg {
  transform: translateY(-2px) scale(1.1) !important;
}

.nav-item.active {
  color: var(--primary-purple) !important;
  font-weight: 900 !important;
  background: rgba(99, 32, 238, 0.08) !important;
}

.nav-item.active svg {
  transform: scale(1.15) !important;
  stroke: var(--primary-purple) !important;
}

body.dark-mode .nav-item.active {
  background: rgba(167, 139, 250, 0.12) !important;
}

/* Login Menu Button (Top Left on Login Card) */
.login-menu-btn {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: var(--bg-subtle) !important;
  border: 1.5px solid var(--border-light) !important;
  color: var(--text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.login-menu-btn:hover {
  background-color: var(--primary-purple-light) !important;
  color: var(--primary-purple) !important;
  border-color: var(--primary-purple) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 3px 10px rgba(99, 32, 238, 0.15) !important;
}

.login-menu-btn:active {
  transform: scale(0.92) !important;
}

/* ==========================================================================
   Clean Icon Removal Across Entire Application (Minimalist UI)
   ========================================================================== */
.menu-icon-box,
.shortcut-category-icon,
.profile-avatar-badge,
.vector-icon-badge,
.aspect-icon-box,
.header-clock-dot,
.menu-chevron-direct {
  display: none !important;
}

.header-notif-btn svg {
  display: inline-flex !important;
  width: 19px !important;
  height: 19px !important;
}

.header-sync-btn .sync-dot {
  display: inline-block !important;
}

.header-sync-btn .sync-icon {
  display: inline-flex !important;
}

/* ==========================================================================
   Aktifkan Ikon Vektor untuk Menu Dashboard & Daftar Santri Binaan
   ========================================================================== */
.menu-item-icon-box,
.menu-item-icon-box .vector-icon-badge,
.dashboard-santri-section-header .vector-icon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.menu-item-icon-box svg,
.dashboard-santri-section-header svg {
  display: inline-block !important;
  vertical-align: middle !important;
}

.menu-listview-left {
  gap: 0 !important;
}

@media (min-width: 768px) {
  .bottom-nav {
    height: 80px !important;
    min-height: 80px !important;
  }
  .nav-item {
    height: 56px !important;
    font-size: 16px !important;
    gap: 12px !important;
  }
  .nav-item svg {
    width: 28px !important;
    height: 28px !important;
  }
}

/* 9. Modals and Bottom Sheets */
.sheet-title,
.dialog-modal-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
}

.sheet-close-btn {
  width: 44px !important;
  height: 44px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  border: 2px solid var(--border-light) !important;
}

.sheet-body,
.dialog-modal-body {
  padding: 20px 22px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.sheet-footer {
  padding: 16px 20px !important;
  border-top: 2px solid var(--border-light) !important;
}

.sheet-footer .btn {
  min-height: 56px !important;
  font-size: 16px !important;
}

/* 10. Wali Murid & Santri Evaluations */
.ortu-skill-status-tag {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
}

.ortu-skill-notes {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--text-main) !important;
  padding: 10px 14px !important;
}

.stat-gauge-card,
.stat-card {
  padding: 16px !important;
}

/* ==========================================================================
   LAYOUT REVISION: FULL-WIDTH GREEN CONTAINER, BOLD LEFT-ALIGNED SUB-CARDS
   ========================================================================== */

/* 1. Posisi Tombol Atas Rata Kiri */
.carousel-quick-action-row {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-top: 10px !important;
  margin-bottom: 12px !important;
}

.carousel-quick-action-row .btn {
  flex: initial !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 10px 18px !important;
}

/* 2. Card Latar Hijau Muda: Melebar Penuh ke Tepi Layar (Full-width, width: 100%, margin: 0, padding-x disesuaikan, zero gap/space) */
.card-green-fullwidth {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  box-sizing: border-box !important;
  padding: 18px 18px !important;
  background-color: var(--primary-green-light) !important;
  border-top: 2px solid var(--primary-green) !important;
  border-bottom: 2px solid var(--primary-green) !important;
  overflow: visible !important;
}

@media (min-width: 768px) {
  .card-green-fullwidth {
    padding: 22px 32px !important;
  }
}

@media (min-width: 1024px) {
  .card-green-fullwidth {
    padding: 24px 44px !important;
  }
}

@media (min-width: 1440px) {
  .card-green-fullwidth {
    padding: 28px 56px !important;
  }
}

/* App Main viewport adjustments when containing card-green-fullwidth */
.app-main.has-green-fullwidth,
.app-main:has(.card-green-fullwidth) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.app-main.has-green-fullwidth .dashboard-top-section,
.app-main:has(.card-green-fullwidth) .dashboard-top-section {
  padding-left: 18px !important;
  padding-right: 18px !important;
  box-sizing: border-box !important;
}

.app-main.has-green-fullwidth .dashboard-santri-section-header,
.app-main.has-green-fullwidth .dashboard-santri-card,
.app-main:has(.card-green-fullwidth) .dashboard-santri-section-header,
.app-main:has(.card-green-fullwidth) .dashboard-santri-card {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

@media (min-width: 768px) {
  .app-main.has-green-fullwidth .dashboard-top-section,
  .app-main:has(.card-green-fullwidth) .dashboard-top-section {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .app-main.has-green-fullwidth .dashboard-santri-section-header,
  .app-main.has-green-fullwidth .dashboard-santri-card,
  .app-main:has(.card-green-fullwidth) .dashboard-santri-section-header,
  .app-main:has(.card-green-fullwidth) .dashboard-santri-card {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
}

@media (min-width: 1024px) {
  .app-main.has-green-fullwidth .dashboard-top-section,
  .app-main:has(.card-green-fullwidth) .dashboard-top-section {
    padding-left: 44px !important;
    padding-right: 44px !important;
  }
  .app-main.has-green-fullwidth .dashboard-santri-section-header,
  .app-main.has-green-fullwidth .dashboard-santri-card,
  .app-main:has(.card-green-fullwidth) .dashboard-santri-section-header,
  .app-main:has(.card-green-fullwidth) .dashboard-santri-card {
    margin-left: 44px !important;
    margin-right: 44px !important;
  }
}

@media (min-width: 1440px) {
  .app-main.has-green-fullwidth .dashboard-top-section,
  .app-main:has(.card-green-fullwidth) .dashboard-top-section {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
  .app-main.has-green-fullwidth .dashboard-santri-section-header,
  .app-main.has-green-fullwidth .dashboard-santri-card,
  .app-main:has(.card-green-fullwidth) .dashboard-santri-section-header,
  .app-main:has(.card-green-fullwidth) .dashboard-santri-card {
    margin-left: 56px !important;
    margin-right: 56px !important;
  }
}

/* Fallback if app-main has padding and :has is not supported */
.app-main:not(.has-green-fullwidth):not(:has(.card-green-fullwidth)) .card-green-fullwidth {
  width: calc(100% + 36px) !important;
  margin-left: -18px !important;
  margin-right: -18px !important;
}

@media (min-width: 768px) {
  .app-main:not(.has-green-fullwidth):not(:has(.card-green-fullwidth)) .card-green-fullwidth {
    width: calc(100% + 64px) !important;
    margin-left: -32px !important;
    margin-right: -32px !important;
  }
}

@media (min-width: 1024px) {
  .app-main:not(.has-green-fullwidth):not(:has(.card-green-fullwidth)) .card-green-fullwidth {
    width: calc(100% + 88px) !important;
    margin-left: -44px !important;
    margin-right: -44px !important;
  }
}

@media (min-width: 1440px) {
  .app-main:not(.has-green-fullwidth):not(:has(.card-green-fullwidth)) .card-green-fullwidth {
    width: calc(100% + 112px) !important;
    margin-left: -56px !important;
    margin-right: -56px !important;
  }
}

/* 3. Card Utama (misal: "Pembinaan & Penilaian Santri") di Dalam Kontainer Hijau */
.card-green-fullwidth .shortcut-category-block {
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--bg-card) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px 18px !important;
  margin-bottom: 16px !important;
  border: 1.5px solid rgba(99, 32, 238, 0.16) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

.shortcut-category-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin-bottom: 10px !important;
  border-bottom: 1.5px solid var(--border-light) !important;
  padding-bottom: 8px !important;
  width: 100% !important;
}

.shortcut-category-title {
  font-size: 15.5px !important;
  font-weight: 900 !important;
  color: var(--primary-purple) !important;
  text-align: left !important;
  display: block !important;
  width: 100% !important;
}

/* 4. Sub-Card / Kartu Menu (misal: "Form Penilaian 50 SKL Santri") */
.app-menu-listview {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.menu-listview-item {
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-light) !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: 0 !important;
  min-height: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.2s ease !important;
  display: block !important;
}

.menu-listview-item:hover {
  border-color: var(--primary-purple) !important;
  background: var(--bg-subtle) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 32, 238, 0.08) !important;
}

.menu-listview-header {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 16px 18px !important;
  min-height: auto !important;
}

/* 5. Teks Judul Menu Saja yang Tampil: Besar, Tebal, Rata Kiri Penuh */
.menu-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  text-align: left !important;
  width: 100% !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* 6. Pembersihan Seluruh Elemen Dekoratif, Panah/Chevron, & Sub-teks Global */
.menu-chevron,
.menu-chevron-direct,
.menu-listview-right,
.menu-icon-box,
.menu-subtitle,
.menu-detail-desc,
.menu-badge,
.shortcut-category-icon,
.shortcut-category-header svg,
.shortcut-category-header img,
.shortcut-category-header .vector-png-icon,
.sheet-title > svg,
.dialog-modal-title > svg {
  display: none !important;
}

/* 7. Penegasan Ukuran & Lebar Penuh (100% Full Width) */
.shortcut-category-block,
.master-data-merged-card,
.app-menu-listview,
.menu-listview-item {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 8. Seluruh Area Kartu Dapat Diklik (Clickable Container) & Rata Kiri Penuh */
.menu-listview-item,
.menu-listview-direct,
.master-data-merged-card {
  cursor: pointer !important;
  user-select: none !important;
  text-align: left !important;
}

/* ==========================================================================
   PUBLIC COVER SCREEN LAYOUT ENHANCEMENTS (FULL-WIDTH CARDS, 2x2x1 GRID)
   ========================================================================== */

/* Full-width viewport setup on app-main when showing cover screen */
.app-main:has(.cover-screen),
.app-main.has-cover-screen {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.cover-screen {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.cover-hero {
  padding-left: 18px !important;
  padding-right: 18px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.cover-info-section {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Card Diagram Bobot 5 Pilar Full Width */
.cover-diagram-card-fullwidth {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  box-sizing: border-box !important;
  padding: 24px 18px !important;
  background: var(--bg-card) !important;
  border-top: 1.5px solid var(--border-light) !important;
  border-bottom: 1.5px solid var(--border-light) !important;
}

@media (min-width: 768px) {
  .cover-diagram-card-fullwidth {
    padding: 30px 32px !important;
  }
}

/* 2 x 2 x 1 Badge Grid Layout */
.cover-aspect-grid-221 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px 12px !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 14px auto 16px auto !important;
  box-sizing: border-box !important;
  padding: 0 6px !important;
}

.cover-aspect-badge-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 24px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 42px !important;
  height: auto !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.cover-aspect-badge-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
}

.cover-aspect-badge-btn.badge-center-row {
  grid-column: 1 / span 2 !important;
  width: fit-content !important;
  min-width: 210px !important;
  margin: 0 auto !important;
}

.cover-aspect-png-icon {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Deskripsi Kurikulum Lebih Jelas & Tebal */
.cover-curriculum-desc {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  line-height: 1.55 !important;
}

/* Button Micro-Skill (Wrap gracefully without overflow) */
.cover-btn-microskill,
.cover-btn-microskill span {
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* Card Login Full Width */
.cover-login-cta-card {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  box-sizing: border-box !important;
  padding: 24px 18px !important;
}

@media (min-width: 768px) {
  .cover-login-cta-card {
    padding: 30px 32px !important;
  }
}

/* Button Login (Wrap gracefully without overflow) */
.cover-login-btn,
.cover-login-btn span {
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* Fallback breakout if container has padding on older browsers */
.app-main:not(.has-cover-screen):not(:has(.cover-screen)) .cover-diagram-card-fullwidth,
.app-main:not(.has-cover-screen):not(:has(.cover-screen)) .cover-login-cta-card {
  width: calc(100% + 36px) !important;
  margin-left: -18px !important;
  margin-right: -18px !important;
}

/* ==========================================================================
   LOGIN SCREEN MODERN CLEAN UI & FULL-WIDTH LAYOUT (REVISI UI PROFESIONAL)
   ========================================================================== */

/* 1. Reset padding on app-main to avoid excessive left/right margins */
.app-main:has(.login-screen),
.app-main.has-login-screen {
  padding: 16px 12px 28px 12px !important;
}

@media (min-width: 768px) {
  .app-main:has(.login-screen),
  .app-main.has-login-screen {
    padding: 24px 20px 32px 20px !important;
  }
}

/* 2. Login Screen Container */
.login-screen {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 3. Card Container Melebar Penuh (Full-Width, Width: 100%) Tanpa Celah Berlebih */
.login-card-container {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* 4. Main Clean White Card */
.login-main-card {
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: var(--bg-card, #FFFFFF) !important;
  border: 1px solid var(--border-light, #E2E8F0) !important;
  border-radius: 20px !important;
  padding: 28px 20px 22px 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

@media (max-width: 480px) {
  .app-main:has(.login-screen),
  .app-main.has-login-screen {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 10px !important;
    padding-bottom: 20px !important;
  }

  .login-card-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .login-main-card {
    padding: 20px 14px 18px 14px !important;
    border-radius: 16px !important;
  }
}

/* 5. Tombol Utama MASUK KE DIBSII: Solid Purple (#6C5CE7 / #7C3AED), Min-Height 56dp, Bold, Centered */
.btn-login-submit,
#btn-login-submit-main {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 52px !important;
  height: auto !important;
  padding: 12px 18px !important;
  background: #6C5CE7 !important;
  background-image: linear-gradient(135deg, #6C5CE7 0%, #7C3AED 100%) !important;
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(108, 92, 231, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  box-sizing: border-box !important;
  transition: all 0.22s ease !important;
  user-select: none !important;
}

.btn-login-submit:hover,
#btn-login-submit-main:hover {
  background: #5B4CD9 !important;
  background-image: linear-gradient(135deg, #5B4CD9 0%, #6D28D9 100%) !important;
  box-shadow: 0 6px 22px rgba(108, 92, 231, 0.45) !important;
  transform: translateY(-1px) !important;
}

.btn-login-submit:active,
#btn-login-submit-main:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px rgba(108, 92, 231, 0.3) !important;
}

/* 6. Card Akun Tersimpan & Tombol Ganti Akun (Neutral / Subtle Purple, Bukan Merah Pudar) */
.login-remembered-card-clean {
  background: var(--bg-subtle, #F8FAFC) !important;
  border: 1.5px solid rgba(99, 32, 238, 0.18) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.btn-switch-account {
  background: rgba(99, 32, 238, 0.08) !important;
  border: 1px solid rgba(99, 32, 238, 0.25) !important;
  color: var(--primary-purple, #6C5CE7) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.25 !important;
  min-height: 32px !important;
  height: auto !important;
  transition: all 0.2s ease !important;
}

.btn-switch-account:hover {
  background: rgba(99, 32, 238, 0.16) !important;
  border-color: rgba(99, 32, 238, 0.45) !important;
}

/* 7. Tombol Pendaftaran Akun Baru (Daftar Wali Kelas & Daftar Wali Murid - Balanced 50/50 Width) */
.btn-login-register,
#btn-open-register-wali-kelas,
#btn-open-register-wali-murid {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 8px 6px !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: rgba(99, 32, 238, 0.06) !important;
  color: var(--primary-purple, #6C5CE7) !important;
  border: 1.5px solid rgba(99, 32, 238, 0.22) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.btn-login-register:hover,
#btn-open-register-wali-kelas:hover,
#btn-open-register-wali-murid:hover {
  background: rgba(99, 32, 238, 0.12) !important;
  border-color: rgba(99, 32, 238, 0.4) !important;
}

/* 8. Action Circle Buttons on Login Screen (Sync & Theme Toggle) */
.login-action-circle-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: var(--bg-subtle, #F8FAFC) !important;
  border: 1.5px solid var(--border-light, #E2E8F0) !important;
  color: var(--primary-purple, #6C5CE7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.login-action-circle-btn:hover {
  background-color: var(--primary-purple-light, rgba(99, 32, 238, 0.12)) !important;
  border-color: var(--primary-purple, #6C5CE7) !important;
  color: var(--primary-purple, #6C5CE7) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 3px 10px rgba(99, 32, 238, 0.18) !important;
}

.login-action-circle-btn:active {
  transform: scale(0.92) !important;
}

/* ==========================================================================
   9. SKL 5-Pillar Matrix Table (Option 1: Integrated Cell Model)
   ========================================================================== */
.skl-matrix-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  margin-top: 10px;
}

.skl-matrix-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 560px;
  overflow-y: auto;
}

.skl-matrix-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 860px;
}

.skl-matrix-table th {
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 800;
  color: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.skl-matrix-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  vertical-align: top;
  font-size: 12px;
  background: var(--bg-card);
  transition: background 0.15s ease;
}

.skl-matrix-cell-td {
  transition: all 0.15s ease;
}

.skl-matrix-cell-td:hover {
  background: rgba(99, 32, 238, 0.04) !important;
}

.skl-matrix-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.skl-matrix-cell-title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-main);
  line-height: 1.4;
}

.skl-matrix-cell-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.skl-matrix-badge {
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1.2;
}

.skl-matrix-desc {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.2;
}

.skl-matrix-cell-empty {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 12px 8px;
  opacity: 0.55;
  transition: all 0.2s ease;
  user-select: none;
}

.skl-matrix-cell-empty:hover {
  opacity: 1;
  color: var(--primary-purple);
  background: rgba(99, 32, 238, 0.08) !important;
}

[data-theme="dark"] .skl-matrix-cell-td:hover {
  background: rgba(168, 85, 247, 0.16) !important;
}

[data-theme="dark"] .skl-matrix-cell-empty:hover {
  background: rgba(168, 85, 247, 0.16) !important;
  color: #C084FC;
}

[data-theme="dark"] .skl-matrix-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   PORTAL WALI MURID: HEADER PROFIL UTAMA & DAFTAR MENU MODERN REVISI UI
   ========================================================================== */

/* 1. Header Profil Utama Satu Kartu (Ringkas, Presisi, Simetris) */
.ortu-header-profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  background-image: linear-gradient(135deg, var(--bg-card) 0%, rgba(99, 32, 238, 0.03) 100%);
  border: 1.5px solid var(--border-light, rgba(99, 32, 238, 0.14));
  border-radius: var(--radius-lg, 18px);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
  position: relative;
  transition: all 0.25s ease;
  width: 100%;
  box-sizing: border-box;
}

.ortu-header-profile-card:hover {
  box-shadow: 0 6px 24px rgba(99, 32, 238, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  border-color: rgba(99, 32, 238, 0.25);
}

.ortu-header-avatar-box {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(99, 32, 238, 0.16);
  border: 3px solid #FFFFFF;
  background: linear-gradient(135deg, rgba(99, 32, 238, 0.12), rgba(99, 32, 238, 0.05));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.ortu-header-avatar-box:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(99, 32, 238, 0.26);
}

body.dark-mode .ortu-header-avatar-box,
[data-theme="dark"] .ortu-header-avatar-box {
  border-color: #334155;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.ortu-header-avatar-box .avatar,
.ortu-header-avatar-box img,
.ortu-header-avatar-box > div,
.ortu-header-avatar-box > span {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  overflow: hidden !important;
}

.ortu-header-avatar-badge {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-purple, #6320EE);
  border: 2px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease;
}

.ortu-header-avatar-box:hover .ortu-header-avatar-badge {
  transform: scale(1.12);
}

body.dark-mode .ortu-header-avatar-badge,
[data-theme="dark"] .ortu-header-avatar-badge {
  border-color: #1E293B;
}

.ortu-header-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  justify-content: center;
}

.ortu-header-name {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.ortu-header-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 1px 0 3px 0;
}

.ortu-badge-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2.5px 9px;
  border-radius: 7px;
  line-height: 1.3;
}

.ortu-badge-tag.tag-diagnosis {
  background: rgba(99, 32, 238, 0.08);
  color: var(--primary-purple, #6320EE);
  border: 1px solid rgba(99, 32, 238, 0.2);
}

.ortu-badge-tag.tag-class {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}

body.dark-mode .ortu-badge-tag.tag-class,
[data-theme="dark"] .ortu-badge-tag.tag-class {
  background: rgba(6, 78, 59, 0.35);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.35);
}

.ortu-header-meta-list {
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  font-size: 11.5px;
}

.ortu-header-meta-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ortu-meta-label {
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
  font-size: 11px;
}

.ortu-meta-val {
  color: var(--text-main);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ortu-header-actions-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.ortu-badge-role {
  background: rgba(99, 32, 238, 0.08);
  border: 1px solid rgba(99, 32, 238, 0.22);
  color: var(--primary-purple, #6320EE);
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 3px rgba(99, 32, 238, 0.06);
}

.ortu-btn-wa-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(4, 120, 87, 0.12);
  transition: all 0.2s ease;
}

.ortu-btn-wa-header:hover {
  background: #D1FAE5;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(4, 120, 87, 0.18);
}

body.dark-mode .ortu-btn-wa-header,
[data-theme="dark"] .ortu-btn-wa-header {
  background: rgba(6, 78, 59, 0.35);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.4);
}

/* 2. Daftar Tombol Menu Utama (Modern, 1 Baris, Color Coded, Height >= 54px) */
.ortu-menu-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 24px;
  width: 100%;
  box-sizing: border-box;
}

.ortu-menu-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 6px 16px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-light, rgba(0, 0, 0, 0.08));
  border-left: 5px solid var(--btn-accent, var(--primary-purple));
  border-radius: var(--radius-md, 14px);
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.ortu-menu-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--btn-pastel, transparent);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.ortu-menu-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  border-color: var(--btn-accent);
}

.ortu-menu-btn:active {
  transform: scale(0.985);
}

.ortu-menu-btn-left {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  flex: 1;
}

.ortu-menu-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ortu-menu-icon-box svg {
  display: block;
}

.ortu-menu-btn:hover .ortu-menu-icon-box {
  transform: scale(1.08);
}

.ortu-menu-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  letter-spacing: 0.1px;
}

.ortu-menu-btn-right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.ortu-menu-btn-right svg {
  display: block;
}

.ortu-menu-btn:hover .ortu-menu-btn-right {
  transform: translateX(3px);
  background: rgba(0, 0, 0, 0.06);
}

/* Tombol Keluar / Logout Khusus Merah */
.ortu-menu-btn.btn-logout {
  border-left-color: #DC2626 !important;
  border-color: rgba(220, 38, 38, 0.2);
}

.ortu-menu-btn.btn-logout:hover {
  border-color: #DC2626;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.15);
}

.ortu-menu-btn.btn-logout .ortu-menu-title {
  color: #DC2626;
}

body.dark-mode .ortu-menu-btn.btn-logout .ortu-menu-title,
[data-theme="dark"] .ortu-menu-btn.btn-logout .ortu-menu-title {
  color: #F87171;
}

/* Dark mode adjustments */
body.dark-mode .ortu-menu-btn,
[data-theme="dark"] .ortu-menu-btn {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

body.dark-mode .ortu-menu-btn:hover,
[data-theme="dark"] .ortu-menu-btn:hover {
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.4);
}

/* Responsive adjustment for small screens */
@media (max-width: 480px) {
  .ortu-header-profile-card {
    padding: 14px 14px;
    gap: 12px;
  }
  .ortu-header-avatar-box {
    width: 58px;
    height: 58px;
  }
  .ortu-header-name {
    font-size: 15px;
  }
  .ortu-header-meta-row {
    font-size: 11px;
  }
  .ortu-badge-role {
    font-size: 10px;
    padding: 3.5px 8px;
  }
  .ortu-btn-wa-header {
    font-size: 10.5px;
    padding: 4px 9px;
  }
  .ortu-menu-btn {
    min-height: 54px;
    padding: 6px 12px;
  }
  .ortu-menu-title {
    font-size: 13.5px;
  }
  .ortu-menu-icon-box {
    width: 36px;
    height: 36px;
  }
  .ortu-menu-btn-right {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 380px) {
  .ortu-header-profile-card {
    padding: 12px 10px;
    gap: 10px;
  }
  .ortu-header-avatar-box {
    width: 50px;
    height: 50px;
  }
  .ortu-header-name {
    font-size: 14px;
  }
  .ortu-header-meta-row {
    font-size: 10px;
  }
  .ortu-badge-role {
    font-size: 9px;
    padding: 2px 6px;
  }
  .ortu-btn-wa-header {
    font-size: 9.5px;
    padding: 3px 7px;
  }
  .ortu-menu-btn {
    min-height: 52px;
    padding: 5px 10px;
  }
  .ortu-menu-title {
    font-size: 12.5px;
  }
  .ortu-menu-icon-box {
    width: 32px;
    height: 32px;
  }
}

/* ==========================================================================
   Penegasan Visibilitas Ikon Vektor Menu Dashboard & Santri Binaan
   ========================================================================== */
.menu-item-icon-box,
.menu-item-icon-box .vector-icon-badge,
.dashboard-santri-section-header .vector-icon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.menu-item-icon-box svg,
.dashboard-santri-section-header svg {
  display: inline-block !important;
  vertical-align: middle !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Penegasan Visibilitas & Penyelarasan Ikon Tombol (Menu QR & Seluruh Aksi)
   ========================================================================== */
.btn svg,
.btn .vector-icon-badge,
.btn-whatsapp svg,
.btn-success svg,
.btn-primary svg,
.btn-outline svg {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  vertical-align: middle !important;
}

.btn svg:only-child,
.btn .vector-icon-badge:only-child {
  margin-right: 0 !important;
}

.btn-whatsapp-sm,
.btn-success.btn-sm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

/* ==========================================================================
   FITUR PERBESAR BARCODE SANTRI & GALERI BARCODE WALI KELAS
   ========================================================================== */
.enlarged-barcode-box {
  background: #FFFFFF !important;
  color: #0F172A !important;
  padding: 20px 16px;
  border-radius: 16px;
  border: 2px solid #E2E8F0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  margin: 10px auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 360px;
}

.enlarged-barcode-box.barcode-bright-mode {
  background: #FFFFFF !important;
  border-color: #0D9488 !important;
  box-shadow: 0 0 0 8px rgba(13, 148, 136, 0.22), 0 16px 40px rgba(0, 0, 0, 0.2) !important;
  filter: contrast(1.15) brightness(1.05);
  transform: scale(1.02);
}

.teacher-barcode-item {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.teacher-barcode-item:hover {
  border-color: #0D9488 !important;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.12) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   SISTEM PRESENSI HOLISTIK DIBSII (Hadir, Izin, Sakit, Alfa & Cut-off)
   ========================================================================== */
.attendance-nav-pills {
  display: flex;
  background: var(--bg-subtle, #F1F5F9);
  padding: 4px;
  border-radius: 14px;
  gap: 4px;
  margin-bottom: 14px;
  border: 1px solid var(--border-light, #E2E8F0);
  overflow-x: auto;
}

.attendance-nav-btn {
  flex: 1;
  min-width: 105px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted, #64748B);
  font-weight: 700;
  font-size: 12px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.attendance-nav-btn.active {
  background: var(--bg-card, #FFFFFF);
  color: var(--primary-green-text, #0D8A5E);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cutoff-banner {
  background: linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 100%);
  border: 1.5px solid #FCD34D;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.cutoff-banner.cutoff-passed {
  background: linear-gradient(135deg, #FEE2E2 0%, #FEF2F2 100%);
  border-color: #FCA5A5;
}

.cutoff-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #92400E;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cutoff-banner.cutoff-passed .cutoff-title {
  color: #991B1B;
}

.status-chip-group {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}

.status-chip {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid var(--border-light, #E2E8F0);
  background: var(--bg-card, #FFFFFF);
  color: var(--text-muted, #64748B);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.status-chip:hover {
  transform: translateY(-1px);
}

.status-chip.chip-hadir:hover, .status-chip.chip-hadir.active {
  background: #E8FDF0 !important;
  color: #065F46 !important;
  border-color: #34D399 !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}

.status-chip.chip-izin:hover, .status-chip.chip-izin.active {
  background: #EEF2FF !important;
  color: #3730A3 !important;
  border-color: #818CF8 !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.2);
}

.status-chip.chip-sakit:hover, .status-chip.chip-sakit.active {
  background: #FFFBEB !important;
  color: #92400E !important;
  border-color: #FBBF24 !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
}

.status-chip.chip-alfa:hover, .status-chip.chip-alfa.active {
  background: #FEF2F2 !important;
  color: #991B1B !important;
  border-color: #F87171 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.today-attendance-card {
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  transition: all 0.2s ease;
}

.today-attendance-card.status-hadir {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1.5px solid #6EE7B7;
}

.today-attendance-card.status-sakit {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1.5px solid #FCD34D;
}

.today-attendance-card.status-izin {
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  border: 1.5px solid #A5B4FC;
}

.today-attendance-card.status-alfa {
  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
  border: 1.5px solid #FCA5A5;
}

.today-attendance-card.status-none {
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 1.5px solid #CBD5E1;
}

.permit-card {
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* ==========================================================================
   UNIVERSAL BUTTON TEXT OVERFLOW PREVENTION SAFETY RULES
   ========================================================================== */
button:not([data-nowrap]),
.btn:not([data-nowrap]),
[class*="btn-"]:not([data-nowrap]),
.cover-aspect-badge-btn,
.cover-btn-microskill,
.cover-login-btn {
  box-sizing: border-box !important;
  max-width: 100%;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
  text-align: center;
  height: auto !important;
}

/* Horizontal scrolling tab bars preserve single-line nowrap */
[style*="overflow-x: auto"] > button,
[style*="overflow-x:auto"] > button,
.horizontal-scroll-row button,
.tabs-nav button,
.subtabs-nav button {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  max-width: none !important;
}

button > span,
.btn > span,
[class*="btn-"] > span {
  max-width: 100%;
  min-width: 0;
  text-align: inherit;
  overflow-wrap: break-word;
}

button svg,
button i,
button img,
.btn svg,
.btn i,
.btn img,
.btn .vector-png-icon {
  flex-shrink: 0;
}

@media (max-width: 639px) {
  .btn {
    font-size: 13.5px;
    padding: 10px 14px;
    min-height: 44px;
    gap: 6px;
  }
  .btn-sm {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 36px;
    gap: 5px;
  }
  .btn-xs {
    font-size: 11px;
    padding: 4px 8px;
    min-height: 28px;
    gap: 4px;
  }
  .sheet-footer {
    gap: 8px !important;
  }
  .sheet-footer .btn {
    font-size: 13px !important;
    padding: 10px 8px !important;
    min-height: 44px !important;
    line-height: 1.25 !important;
    flex: 1 1 calc(50% - 4px) !important;
  }
  .sheet-footer .btn:only-child,
  .sheet-footer .btn.btn-block {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}