/* ==================================================
   ABSENSI MADIN KALIGINTUNG
   FINAL DESIGN SYSTEM
   Hijau Botol - Putih - Emas
================================================== */

/* 1. WARNA DAN PENGATURAN DASAR */

:root {
  --green: #176b45;
  --green-dark: #104b32;
  --green-deep: #0b3d2e;
  --green-light: #eaf5ee;
  --green-soft: #f1f7f3;

  --gold: #c9a64f;

  --white: #ffffff;
  --ink: #24352c;
  --muted: #78857d;
  --line: #e3ebe5;

  --danger: #c0392b;

  --radius: 14px;
  --shadow: 0 5px 18px rgba(16, 75, 50, .06);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(201, 166, 79, .10),
      transparent 25%
    ),
    radial-gradient(
      circle at 90% 30%,
      rgba(23, 107, 69, .10),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #edf5ef,
      #f8faf8 50%,
      #e8f1eb
    );
  line-height: 1.6;
}

/* 2. HEADER */

.topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px max(16px, calc((100% - 1000px) / 2));

  background: linear-gradient(
    120deg,
    var(--green-deep),
    var(--green)
  );

  color: var(--white);
  border-top: 3px solid var(--gold);
  border-bottom: 2px solid var(--gold);

  box-shadow: 0 4px 14px rgba(11, 61, 46, .16);
}

.topbar img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
}

.topbar strong,
.topbar small {
  display: block;
}

.topbar strong {
  color: var(--white);
  font-size: 14px;
  letter-spacing: .4px;
}

.topbar small {
  color: #e5eee8;
  font-size: 12px;
}

.topbar button {
  margin-left: auto;
}

/* 3. AREA KONTEN */

main {
  width: 100%;
  max-width: 1000px;
  min-height: 75vh;
  margin: 24px auto;
  padding: 0 16px;
}

#appView {
  background: transparent;
}

.hidden {
  display: none !important;
}

/* 4. KARTU DAN PANEL */

.card,
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

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

.panel {
  padding: 16px;
  margin-bottom: 18px;
}

/* 5. JUDUL DAN TEKS */

h1,
h2,
h3 {
  color: var(--green-dark);
  line-height: 1.3;
}

h1 {
  font-size: 26px;
  margin: 5px 0;
}

h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 7px;
}

h3 {
  font-size: 16px;
}

p {
  margin-top: 5px;
}

.muted,
.hint {
  color: var(--muted);
}

.hint {
  font-size: 12px;
  line-height: 1.5;
}

.eyebrow {
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

/* 6. HALAMAN LOGIN */

.auth-card {
  max-width: 440px;
  margin: 7vh auto;
  padding: 26px;
}

.auth-card h1 {
  color: var(--green-dark);
}

#authView .primary {
  width: 100%;
}

/* 7. AREA SAMBUTAN DASHBOARD */

.welcome {
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 24px 20px;
  margin: 8px 0 20px;

  border-radius: 18px;

  background: linear-gradient(
    120deg,
    var(--green-dark),
    var(--green)
  );

  color: var(--white);
  box-shadow: 0 7px 20px rgba(16, 75, 50, .15);
}

.welcome::after {
  content: none;
  display: none;
}

.welcome h1 {
  color: var(--white);
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -.5px;
}

.welcome p,
.welcome small {
  color: #e5eee8;
}

.today-pill {
  position: relative;
  z-index: 1;
  flex-shrink: 0;

  padding: 7px 12px;
  border-radius: 8px;

  background: rgba(255, 255, 255, .12);
  border: none;
  box-shadow: none;

  color: var(--white);
  font-size: 12px;
  font-weight: 600;
}

/* 8. NAVIGASI */

.tabs {
  display: flex;
  gap: 8px;
  padding: 8px;
  margin-bottom: 16px;

  background: var(--green-deep);
  border: 1px solid var(--gold);
  border-radius: 15px;

  box-shadow: 0 4px 12px rgba(16, 75, 50, .12);

  overflow-x: auto;
  scrollbar-width: thin;
}

.tab {
  flex: 1 0 auto;
  white-space: nowrap;

  padding: 11px 17px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;

  background: var(--green);
  color: var(--white);

  font-weight: 600;
  font-size: 13px;
}

.tab:hover {
  background: var(--green-dark);
}

.tab.active {
  background: var(--white);
  color: var(--green-deep);
  border-color: var(--gold);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  font-weight: 700;
}

/* 9. DASHBOARD DAN STATISTIK */

#dashboardPanel .card {
  padding: 20px;
  margin-bottom: 18px;
  border-radius: 16px;
}

#dashboardPanel .card h2 {
  color: var(--green-dark);
  font-size: 18px;
  margin-bottom: 6px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.stat {
  position: relative;
  overflow: hidden;

  padding: 18px 12px;
  text-align: center;

  background: linear-gradient(
    145deg,
    #ffffff,
    #edf6f0
  );

  border: 1px solid #dcebe0;
  border-left: 4px solid var(--green);
  border-radius: 14px;

  box-shadow: 0 5px 15px rgba(16, 75, 50, .07);

  transition: transform .2s ease, box-shadow .2s ease;
}

.stat::after {
  content: none;
  display: none;
}

.stat strong {
  position: relative;
  z-index: 1;

  display: block;
  color: var(--green);
  font-size: 28px;
  font-weight: 800;
}

.stat span {
  position: relative;
  z-index: 1;

  color: #68796e;
  font-size: 12px;
  font-weight: 600;
}

/* 10. FORMULIR */

label {
  display: block;
  margin: 14px 0 6px;

  color: var(--green-dark);
  font-size: 13px;
  font-weight: 600;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;

  margin-top: 6px;
  padding: 11px 13px;

  border: 1px solid #dce8df;
  border-radius: 10px;

  background: var(--white);
  color: var(--ink);

  font-family: inherit;
  font-size: 14px;

  transition: border-color .2s, box-shadow .2s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(23, 107, 69, .12);
}

input::placeholder,
textarea::placeholder {
  color: #9aa79e;
}

textarea {
  min-height: 90px;
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--green);
}

/* PERBAIKAN INPUT TANGGAL */

#authView input[type="date"],
#appView input[type="date"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 44px;

  padding: 8px 10px;
  overflow: hidden;

  box-sizing: border-box;
  border-radius: 9px;
}

/* 11. TOMBOL */

button {
  padding: 12px 16px;

  border: none;
  border-radius: 11px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
  transition: all .2s ease;
}

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

button:focus-visible {
  outline: 3px solid rgba(201, 166, 79, .5);
  outline-offset: 2px;
}

.primary {
  background: linear-gradient(
    135deg,
    var(--green),
    var(--green-dark)
  );

  color: var(--white);
  border: 1px solid var(--green-dark);

  box-shadow: 0 3px 8px rgba(16, 75, 50, .13);
}

.primary:hover {
  background: var(--green-dark);
}

.primary:active {
  transform: scale(.97);
}

.secondary {
  background: var(--green-light);
  color: var(--green-dark);
  border: 1px solid #d5e8da;
}

.secondary:hover {
  background: #dceee2;
}

.outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .7);
}

.danger {
  background: #fbeceb;
  color: var(--danger);
  border: 1px solid #f0d3d0;
}

.full {
  width: 100%;
  margin-top: 12px;
}

/* 12. SUSUNAN FORMULIR DAN BARIS */

.row {
  display: flex;
  gap: 10px;
}

.row > * {
  flex: 1;
  min-width: 0;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.class-chip {
  display: inline-block;
  padding: 8px 12px;

  background: var(--green-light);
  color: var(--green-dark);

  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

/* 13. DAFTAR SANTRI DAN ABSENSI */

.list {
  margin-top: 14px;
}

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.list-row:last-child {
  border-bottom: none;
}

.list-row .grow {
  flex: 1;
  min-width: 0;
}

.list-row strong {
  display: block;
}

.list-row small {
  color: var(--muted);
}

.status-select {
  width: 125px;
  min-height: 40px;
  margin: 0;
  padding: 9px;
  border-radius: 9px;
}

/* 14. TABEL DATA */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  overflow: hidden;
  border-radius: 12px;

  background: var(--white);
  font-size: 13px;
}

th {
  padding: 13px 12px;

  background: linear-gradient(
    120deg,
    var(--green-dark),
    var(--green)
  );

  color: var(--white);
  font-weight: 700;
  text-align: left;
  border: none;
}

td {
  padding: 12px;
  color: #34483b;
  border-bottom: 1px solid #e8eee9;
  text-align: left;
}

tbody tr:nth-child(even) {
  background: #f1f7f3;
}

tbody tr:hover {
  background: #e5f1e9;
}

tbody tr:last-child td {
  border-bottom: none;
}

/* 15. HALAMAN ABSENSI */
/* Tampilan daftar absensi lebih rapat */
#attendancePanel .list-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  margin-bottom: 2px;
}

#attendancePanel .list-row .grow {
  flex: 1;
  min-width: 0;
}

#attendancePanel .list-row strong {
  font-size: 14px;
  line-height: 1.2;
}

#attendancePanel .status-select {
  width: 105px;
  min-width: 105px;
  margin: 0;
  padding: 6px;
  font-size: 12px;
}
#attendancePanel .card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

#attendancePanel h2,
#attendancePanel h3 {
  color: var(--green-dark);
}

#attendancePanel td {
  vertical-align: middle;
}

/* 16. HALAMAN DATA SANTRI */

#studentsPanel .card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

#studentsPanel h2 {
  color: var(--green-dark);
}

/* 17. HALAMAN REKAP */

#reportsPanel .card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

#reportsPanel h2,
#reportsPanel h3 {
  color: var(--green-dark);
}

#reportsPanel th,
#reportsPanel td {
  text-align: center;
}

#reportsPanel .summary-grid .stat {
  border-left-color: var(--gold);
}

/* 18. PESAN DAN NOTIFIKASI */

.message {
  margin-top: 10px;
  color: var(--green);
  font-size: 13px;
}

.message.error {
  color: var(--danger);
}

/* 19. FOOTER */

footer {
  padding: 20px 12px;

  background: rgba(255, 255, 255, .8);
  border-top: 1px solid var(--line);

  color: #87938b;
  text-align: center;
  font-size: 12px;
}

/* 20. RESPONSIVE TABLET DAN HP */

@media (max-width: 700px) {
  main {
    margin: 18px auto;
    padding: 0 14px;
  }

  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .topbar {
    min-height: 64px;
    padding: 9px 12px;
    gap: 9px;
  }

  .topbar img {
    width: 38px;
    height: 38px;
  }

  .topbar strong {
    font-size: 12px;
  }

  .topbar small {
    font-size: 11px;
  }

  main {
    margin: 14px auto;
    padding: 0 12px;
  }

  .card {
    padding: 15px;
    border-radius: 14px;
  }

  .panel {
    padding: 12px;
  }

  .auth-card {
    margin: 5vh auto;
    padding: 20px;
  }

  .welcome {
    align-items: flex-start;
    gap: 8px;
    padding: 20px 15px;
    border-radius: 15px;
  }

  .welcome h1 {
    font-size: 22px;
  }

  .today-pill {
    font-size: 10px;
    padding: 7px 9px;
  }

  .tabs {
    flex-wrap: nowrap;
    gap: 5px;
    padding: 6px;
  }

  .tab {
    flex: 0 0 auto;
    padding: 10px 12px;
    font-size: 12px;
  }

  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .stat {
    padding: 14px 8px;
  }

  .stat strong {
    font-size: 24px;
  }

  .stat span {
    font-size: 11px;
  }

  .row {
    flex-direction: column;
  }

  .section-head {
    flex-direction: column;
  }

  table {
    font-size: 12px;
  }

  th,
  td {
    padding: 10px 8px;
    white-space: nowrap;
  }

  .status-select {
    width: 112px;
  }

  button {
    min-height: 40px;
  }
}

/* 21. PENGATURAN CETAK LAPORAN */

@media print {
  body {
    background: #ffffff !important;
    color: #000000;
  }

  .topbar,
  .tabs,
  footer,
  button,
  #authView {
    display: none !important;
  }

  main {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  #appView,
  #reportsPanel,
  #reportsPanel .card {
    display: block !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
  }

  #reportsPanel table {
    width: 100%;
    font-size: 11px;
  }

  #reportsPanel th {
    background: #e8eee9 !important;
    color: #000000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #reportsPanel tr {
    break-inside: avoid;
  }
}

/* HILANGKAN ORNAMEN LAMA PADA STATISTIK */
.stat::before,
.stat::after {
  content: none !important;
  display: none !important;
}

/* AKTIFKAN ORNAMEN HEADER BARU */
#appView > .welcome::before,
#appView > .welcome::after {
  content: "";
  display: block;
}

/* PERBAIKAN TAMPILAN DAFTAR SANTRI */
.list-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.list-row .grow {
  width: 100%;
  min-width: 0;
}

.list-row strong {
  display: block;
   font-size: 20px;
font-weight: 600;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.list-row small {
  display: block;
  margin-top: 4px;
}

/* Tombol aksi santri dua baris */
.student-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  margin-top: 10px;
}

.student-actions button {
  width: 100%;
  min-height: 32px;
  margin: 0;
  font-size: 14px;
  padding: 5px 6px;
  font-weight: 600;
  color: white;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #14532d, #22a06b);
  box-shadow: 0 2px 5px rgba(20, 83, 45, 0.25);
  transition: 0.2s ease;
}

.student-actions button:hover {
  background: linear-gradient(135deg, #166534, #34d399);
  transform: translateY(-1px);
}

/* DESAIN ELEGAN UNTUK SEMUA PILIHAN */
select {
appearance: none;
-webkit-appearance: none;
background-color: #f1f7f3 !important;
color: #104b32 !important;
border: 1px solid #b8d5c1 !important;
border-radius: 12px !important;
font-weight: 600 !important;
padding: 10px 36px 10px 12px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23104b32' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
box-shadow: 0 2px 6px rgba(16,75,50,.06);
}

select:focus {
border-color: #c9a64f !important;
box-shadow: 0 0 0 3px rgba(201,166,79,.18) !important;
outline: none !important;
}

select option {
background: #ffffff;
color: #104b32;
font-weight: 500;
}

/* DROPDOWN CUSTOM MADIN */
.custom-select-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.custom-select-wrap .native-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #b8d5c1;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #eef6f0);
  color: #104b32;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 3px 9px rgba(16,75,50,.07);
}

.custom-select-trigger::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-right: 2px solid #176b45;
  border-bottom: 2px solid #176b45;
  transform: rotate(45deg);
  transition: transform .18s ease;
}

.custom-select-wrap.is-open .custom-select-trigger {
  border-color: #c9a64f;
  box-shadow: 0 0 0 3px rgba(201,166,79,.15);
}

.custom-select-wrap.is-open .custom-select-trigger::after {
  transform: rotate(225deg);
}

.custom-select-menu {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #c9dccd;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(11,61,46,.18);
}

.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  margin: 2px 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: #fff;
  color: #294638;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
}

.custom-select-option:hover,
.custom-select-option.selected {
  background: #eaf5ee;
  color: #104b32;
}

.custom-select-option.selected {
  border-left: 3px solid #c9a64f;
  font-weight: 700;
}

.custom-select-check {
  margin-left: 10px;
  color: #176b45;
  font-weight: 800;
}

/* PERBAIKAN DROPDOWN STATUS ABSENSI */
#attendancePanel .custom-select-wrap {
  width: 105px;
  min-width: 105px;
  flex: 0 0 105px;
}

#attendancePanel .custom-select-trigger {
  width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  font-size: 12px;
  border-radius: 9px;
}

#attendancePanel .custom-select-menu {
  min-width: 120px;
  right: 0;
  left: auto;
}

#attendancePanel .list-row .grow {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* PERBAIKAN FINAL BARIS ABSENSI */
#attendancePanel .list-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: 100%;
}

#attendancePanel .list-row .grow {
  flex: 1 1 auto;
  min-width: 0;
}

#attendancePanel .custom-select-wrap {
  width: 90px;
  min-width: 90px;
  flex: 0 0 90px;
}

#attendancePanel .custom-select-trigger {
  min-height: 34px;
  padding: 5px 7px;
  font-size: 11px;
}
/* LABEL KELAS ABSENSI SEJAJAR */
#attendanceClassWrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
}

#attendanceClassWrap {
  font-weight: 600;
}

#attendanceClassWrap .custom-select-wrap {
  flex: 1;
  min-width: 0;
}
/* PERBAIKAN POSISI LABEL KELAS ABSENSI */
#attendanceClassWrap {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 14px 0 6px;
}

#attendanceClassWrap .custom-select-wrap {
  width: 100%;
  min-width: 0;
  margin: 0;
}

#attendanceClassWrap .custom-select-trigger {
  margin: 0;
  min-height: 40px;
}
/* ABSENSI: DROPDOWN KELAS MINIMALIS */
#attendanceClassWrap {
  display: block !important;
  margin: 10px 0 14px !important;
  padding: 0 !important;
  font-size: 0 !important;
}

#attendanceClassWrap .custom-select-wrap {
  width: 100% !important;
}

#attendanceClassWrap .custom-select-trigger {
  min-height: 48px !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

#attendanceClassWrap .custom-select-trigger::after {
  position: absolute;
  right: 16px;
}

#attendanceClassName {
  display: none !important;
}
/* DASHBOARD: DESAIN JUMLAH SANTRI PER KELAS */
#dashboardPanel #dashClassStats {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

#dashboardPanel #dashClassStats .list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  background: linear-gradient(145deg, #ffffff, #edf6f0);
  border: 1px solid #dcebe0;
  border-left: 4px solid var(--green);
  border-radius: 14px;
  box-shadow: 0 5px 15px rgba(16, 75, 50, .07);
  color: var(--green-dark);
  font-size: 14px;
}

#dashboardPanel #dashClassStats .list-item span {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

#dashboardPanel #dashClassStats .list-item strong {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 14px;
  font-weight: 800;
}
/* ==========================================
DESAIN PROFIL SANTRI
MADRASAH DINIYAH KALIGINTUNG
Tema Hijau Botol - Putih - Emas
========================================== */

.student-profile {
width: 100%;
margin: auto;
overflow: hidden;
border-radius: 22px;
background: linear-gradient(
180deg,
#f0faf3,
#ffffff 50%,
#f1f8f3
);
box-shadow: 0 10px 30px rgba(0,70,45,.12);
color: #17251f;
}

/* HEADER PROFIL */

.profile-hero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
min-height: 285px;
padding: 25px 15px 22px;
text-align: center;
background:
radial-gradient(
ellipse at bottom,
#ffffff 0%,
#e6f5eb 45%,
transparent 75%
),
linear-gradient(
145deg,
#075b3d,
#08784f,
#06452f
);
border-bottom: 4px solid #d7b653;
}

.profile-hero::after {
content: "۞";
position: absolute;
top: 12px;
right: 18px;
color: rgba(255,255,255,.75);
font-size: 38px;
}

/* FOTO SANTRI */

.profile-photo-wrap {
width: 140px;
height: 140px;
padding: 6px;
margin-bottom: 15px;
border: 3px solid white;
border-radius: 30px;
background: white;
box-shadow: 0 8px 22px rgba(0,0,0,.2);
overflow: hidden;
}

.profile-photo {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 22px;
}

.profile-photo-placeholder {
display: grid;
place-items: center;
width: 100%;
height: 100%;
border-radius: 22px;
background: #e4f3e8;
color: #176b45;
font-size: 13px;
font-weight: bold;
}

/* NAMA SANTRI */

.profile-name {
margin: 0 0 14px;
color: #075b3d;
font-size: clamp(23px, 5vw, 34px);
font-weight: 800;
line-height: 1.2;
overflow-wrap: anywhere;
}

/* PEMBATAS ORNAMEN */

.profile-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 85%;
margin-bottom: 14px;
color: #c9a64f;
font-size: 25px;
}

.profile-divider::before,
.profile-divider::after {
content: "";
flex: 1;
height: 2px;
background: #16845b;
}

/* LABEL KELAS */

.profile-class {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 10px 24px;
border: 1px solid #a9d8bd;
border-radius: 50px;
background: #e0f3e6;
color: #075b3d;
font-size: 18px;
font-weight: 800;
}

/* KARTU BIODATA */

.profile-details {
margin: 18px 14px;
padding: 10px 16px;
border: 1px solid #e4eee7;
border-radius: 22px;
background: #ffffff;
box-shadow: 0 8px 25px rgba(10,64,43,.10);
}

/* BARIS BIODATA */

.profile-detail {
display: grid;
grid-template-columns: 48px minmax(105px,.9fr) minmax(0,1.2fr);
align-items: center;
gap: 10px;
min-height: 66px;
padding: 8px 0;
border-bottom: 1px solid #e5e9e6;
}

.profile-detail:last-child {
border-bottom: none;
}

/* IKON BIODATA */

.profile-icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: #e3f3e8;
color: #08704a;
font-size: 23px;
font-weight: bold;
}

/* LABEL BIODATA */

.profile-detail strong {
color: #17251f;
font-size: 14px;
font-weight: 750;
line-height: 1.4;
}

.profile-detail strong::after {
content: " :";
margin-left: 4px;
}

/* ISI BIODATA */

.profile-detail > span:last-child {
min-width: 0;
color: #26332d;
font-size: 14px;
line-height: 1.5;
overflow-wrap: anywhere;
}

/* TOMBOL KEMBALI */

.profile-back {
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 44px);
min-height: 56px;
margin: 22px auto 28px;
padding: 12px 20px;
border: 1px solid #c6a64b;
border-radius: 50px;
background: linear-gradient(
135deg,
#08784f,
#005b3b
);
color: white;
font-size: 18px;
font-weight: 800;
box-shadow: 0 6px 16px rgba(4,82,52,.22);
}

.profile-back:active {
transform: scale(.98);
}

/* RESPONSIVE HP */

@media(max-width:480px) {

.student-profile {
border-radius: 18px;
}

.profile-hero {
min-height: 255px;
padding: 20px 12px;
}

.profile-photo-wrap {
width: 120px;
height: 120px;
}

.profile-details {
margin: 14px 9px;
padding: 8px 10px;
}

.profile-detail {
grid-template-columns: 38px minmax(85px,.95fr) minmax(0,1.15fr);
gap: 7px;
min-height: 59px;
}

.profile-icon {
width: 36px;
height: 36px;
font-size: 19px;
}

.profile-detail strong,
.profile-detail > span:last-child {
font-size: 12px;
}

.profile-class {
font-size: 16px;
padding: 9px 18px;
}

.profile-back {
width: calc(100% - 30px);
font-size: 16px;
}
}

@media(max-width:360px) {

.profile-detail {
grid-template-columns: 32px minmax(76px,.95fr) minmax(0,1.05fr);
gap: 5px;
}

.profile-icon {
width: 31px;
height: 31px;
font-size: 17px;
}

.profile-detail strong,
.profile-detail > span:last-child {
font-size: 11px;
}
}
/* ==========================================
PROFIL SANTRI V2
MADRASAH DINIYAH KALIGINTUNG
GREEN ELEGANT DESIGN
========================================== */

#studentsPanel .list-row.profile-open {
display: block !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}

/* CONTAINER */

.student-profile-v2 {
--pv-green: #075b3d;
--pv-dark: #03452f;
--pv-gold: #d5b34d;

width: 100%;
margin: 0 auto;
overflow: hidden;

border-radius: 20px;
background: #f5faf6;
color: #17251f;

box-shadow: 0 8px 25px rgba(0,60,40,.10);
font-family: inherit;
}

/* HEADER */

.profile-v2-header {
position: relative;
isolation: isolate;

display: flex;
flex-direction: column;
align-items: center;

padding: 25px 15px 24px;

text-align: center;

background:
linear-gradient(
180deg,
#075b3d 0%,
#08764e 55%,
#e8f5ec 100%
);

border-bottom: 4px solid var(--pv-gold);
}

.profile-v2-header::before {
content: "";
position: absolute;
z-index: -1;

width: 115%;
height: 100px;

left: -7%;
bottom: -45px;

background: #f5faf6;
border-radius: 50% 50% 0 0;
}

.profile-v2-ornament {
position: absolute;
top: 12px;
right: 18px;

color: rgba(255,255,255,.55);
font-size: 36px;
}

/* FOTO */

.profile-v2-photo {
width: 130px;
height: 130px;

padding: 6px;
margin-bottom: 16px;

border: 3px solid white;
border-radius: 28px;

background: white;
box-shadow: 0 8px 22px rgba(0,0,0,.2);

overflow: hidden;
}

.profile-v2-photo img {
display: block;

width: 100%;
height: 100%;

object-fit: cover;
border-radius: 20px;
}

.profile-v2-placeholder {
display: grid;
place-items: center;

width: 100%;
height: 100%;

border-radius: 20px;
background: #e5f2e9;
color: var(--pv-green);

font-size: 13px;
}

/* NAMA */

.profile-v2-name {
max-width: 100%;
margin: 0 0 13px !important;

color: #064b34 !important;

font-size: clamp(22px,5vw,31px) !important;
font-weight: 800 !important;
line-height: 1.3;

overflow-wrap: anywhere;
}

/* ORNAMEN */

.profile-v2-divider {
display: flex;
align-items: center;

gap: 12px;
width: 85%;
margin-bottom: 16px;

color: var(--pv-gold);
font-size: 25px;
}

.profile-v2-divider span {
flex: 1;
height: 2px;
background: #17845b;
}

/* KELAS */

.profile-v2-class {
display: inline-flex;
align-items: center;
justify-content: center;

gap: 9px;
padding: 10px 23px;

border: 1px solid #add8bd;
border-radius: 50px;

background: #e2f3e8;
color: var(--pv-green);

font-size: 17px;
font-weight: 800;
}

.profile-v2-class svg {
width: 23px;
height: 23px;

fill: currentColor;
stroke: currentColor;
stroke-width: 1.2;
}

/* AREA BIODATA */

.profile-v2-content {
padding: 14px 12px 5px;
}

.profile-v2-card {
padding: 8px 16px;

border: 1px solid #e2ebe5;
border-radius: 20px;

background: #fff;
box-shadow: 0 5px 18px rgba(0,60,40,.07);
}

/* BARIS BIODATA */

.profile-v2-item {
  display: grid;
  grid-template-columns: 42px 115px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 0;
  border-bottom: 1px solid #e8ede9;
}

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

/* IKON SVG */

.profile-v2-icon {
display: flex;
align-items: center;
justify-content: center;

width: 42px;
height: 42px;

flex-shrink: 0;

border-radius: 50%;
background: #e4f3e9;
color: #08704a;
}

.profile-v2-icon svg {
display: block;

width: 22px;
height: 22px;

fill: none;
stroke: currentColor;
stroke-width: 1.9;

stroke-linecap: round;
stroke-linejoin: round;
}

/* LABEL */

.profile-v2-item strong {
color: #17251f;

font-size: 13px;
font-weight: 750;

line-height: 1.4;
overflow-wrap: anywhere;
}

/* ISI BIODATA */

.profile-v2-item > span {
min-width: 0;

color: #34423a;

font-size: 14px;
font-weight: 500;

line-height: 1.5;
overflow-wrap: anywhere;
}

/* TOMBOL KEMBALI */

.profile-v2-back {
display: flex;
align-items: center;
justify-content: center;

gap: 12px;

width: calc(100% - 36px);
min-height: 53px;

margin: 18px auto 24px;

border: 1px solid var(--pv-gold);
border-radius: 50px;

background: linear-gradient(
135deg,
#08784f,
#005b3b
);

color: white;

font-size: 17px;
font-weight: 800;

box-shadow: 0 5px 14px rgba(0,70,45,.18);
}

.profile-v2-back span {
font-size: 23px;
}

/* FOOTER */

.profile-v2-footer {
display: flex;
flex-direction: column;
align-items: center;

gap: 5px;

padding: 17px 10px;

background: #075b3d;
border-top: 3px solid var(--pv-gold);

color: white;
text-align: center;
}

.profile-v2-footer-title {
font-family: Georgia,serif;
font-size: 15px;
font-weight: bold;
}

.profile-v2-footer small {
color: #e3eee5;
font-size: 11px;
font-style: italic;
}

/* RESPONSIVE HP */

@media(max-width:480px) {

.student-profile-v2 {
border-radius: 16px;
}

.profile-v2-header {
padding: 22px 12px 20px;
}

.profile-v2-photo {
width: 115px;
height: 115px;
}

.profile-v2-name {
font-size: 23px !important;
}

.profile-v2-class {
font-size: 15px;
padding: 9px 17px;
}

.profile-v2-content {
padding: 12px 9px 4px;
}

.profile-v2-card {
padding: 6px 11px;
border-radius: 16px;
}

.profile-v2-item {
grid-template-columns:
38px
minmax(0, .95fr)
minmax(0, 1.05fr);

gap: 8px;
min-height: 59px;
padding: 8px 0;

}

.profile-v2-icon {
width: 36px;
height: 36px;
}

.profile-v2-icon svg {
width: 19px;
height: 19px;
}

.profile-v2-item strong {
font-size: 12px;
}

.profile-v2-item > span {
font-size: 13px;
}

.profile-v2-back {
width: calc(100% - 28px);
min-height: 50px;
font-size: 16px;
}

.profile-v2-footer-title {
font-size: 13px;
}
}

/* HP LAYAR KECIL */

@media (max-width: 380px) {
  .profile-v2-item {
    grid-template-columns: 34px 100px minmax(0, 1fr);
    gap: 7px;
  }

.profile-v2-icon {
width: 32px;
height: 32px;
}

.profile-v2-icon svg {
width: 17px;
height: 17px;
}

.profile-v2-item strong {
font-size: 11px;
}

.profile-v2-item > span {
font-size: 12px;
}
   }
/* PERBAIKAN JARAK BARIS BIODATA */

.student-profile-v2 .profile-v2-item {
min-height: 48px !important;
padding: 5px 0 !important;
gap: 8px !important;
}

/* Ukuran ikon */
.student-profile-v2 .profile-v2-icon {
width: 34px !important;
height: 34px !important;
}

.student-profile-v2 .profile-v2-icon svg {
width: 19px !important;
height: 19px !important;
}

/* Tulisan biodata */
.student-profile-v2 .profile-v2-item strong {
line-height: 1.3 !important;
}

.student-profile-v2 .profile-v2-item > span {
line-height: 1.35 !important;
}

/* Jarak dalam kartu biodata */
.student-profile-v2 .profile-v2-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
/* =====================================
FINAL FIX - JARAK BIODATA SANTRI
===================================== */

/* Memadatkan seluruh baris biodata */
.student-profile-v2 .profile-v2-item {
display: grid !important;

grid-template-columns: 36px 112px minmax(0, 1fr) !important;

align-items: center !important;
gap: 8px !important;

min-height: 0 !important;
height: auto !important;

padding: 5px 0 !important;
margin: 0 !important;

line-height: 1.25 !important;
}

/* Ikon biodata */
.student-profile-v2 .profile-v2-icon {
width: 32px !important;
height: 32px !important;
margin: 0 !important;
}

.student-profile-v2 .profile-v2-icon svg {
width: 18px !important;
height: 18px !important;
}

/* Label biodata */
.student-profile-v2 .profile-v2-item strong {
margin: 0 !important;
padding: 0 !important;
line-height: 1.25 !important;
}

/* Isi biodata */
.student-profile-v2 .profile-v2-item > span {
margin: 0 !important;
padding: 0 !important;
line-height: 1.3 !important;
}

/* Kartu biodata */
.student-profile-v2 .profile-v2-card {
padding: 4px 12px !important;
}

/* =====================================
MEMPERPENDEK JARAK FOTO KE BIODATA
===================================== */

/* Memperkecil tinggi header */
.student-profile-v2 .profile-v2-header {
padding-top: 16px !important;
padding-bottom: 8px !important;
}

/* Mengurangi jarak bawah foto */
.student-profile-v2 .profile-v2-photo {
margin-bottom: 10px !important;
}

/* Mengurangi jarak nama */
.student-profile-v2 .profile-v2-name {
margin-bottom: 7px !important;
}

/* Mengurangi jarak ornamen */
.student-profile-v2 .profile-v2-divider {
margin-bottom: 8px !important;
}

/* Memperkecil jarak kelas ke biodata */
.student-profile-v2 .profile-v2-content {
padding-top: 0 !important;
margin-top: -2px !important;
}

/* Memastikan tidak ada ruang tambahan */
.student-profile-v2 {
gap: 0 !important;
}

/* =====================================
RESPONSIVE HP
===================================== */

@media (max-width: 380px) {

.student-profile-v2 .profile-v2-item {
grid-template-columns: 32px 100px minmax(0, 1fr) !important;
gap: 6px !important;
padding: 5px 0 !important;
}

}
/* =====================================
   FIX NIS TERTUTUP HEADER PROFIL
===================================== */

/* Hilangkan dekorasi lengkung yang menutupi NIS */
.student-profile-v2 .profile-v2-header::before {
  display: none !important;
  content: none !important;
}

/* Atur batas bawah header */
.student-profile-v2 .profile-v2-header {
  position: relative !important;
  padding-bottom: 18px !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

/* Pastikan biodata berada di depan dan tidak tertutup */
.student-profile-v2 .profile-v2-content {
  position: relative !important;
  z-index: 5 !important;
  margin-top: 0 !important;
  padding-top: 10px !important;
}

/* Pastikan kartu biodata tampil utuh */
.student-profile-v2 .profile-v2-card {
  position: relative !important;
  z-index: 6 !important;
  overflow: visible !important;
}

/* Pastikan baris NIS tidak terpotong */
.student-profile-v2 .profile-v2-item:first-child {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 0 !important;
}
/* =====================================
   FIX FINAL NIS TERPOTONG
===================================== */

/* Hilangkan lengkungan yang menutupi biodata */
.profile-v2-header::before {
    display: none !important;
    content: none !important;
}

/* Atur ulang header */
.student-profile-v2 .profile-v2-header {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}

/* Area biodata */
.student-profile-v2 .profile-v2-content {
    display: block !important;
    position: relative !important;
    z-index: 10 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 8px 9px 5px !important;

    overflow: visible !important;
}

/* Kartu biodata */
.student-profile-v2 .profile-v2-card {
    display: block !important;
    position: relative !important;
    z-index: 11 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 8px 12px !important;

    background: #ffffff !important;
    overflow: visible !important;
}

/* Baris pertama NIS */
.student-profile-v2 .profile-v2-card
.profile-v2-item:first-child {
    display: grid !important;
    position: relative !important;

    min-height: 48px !important;
    height: auto !important;

    margin-top: 0 !important;
    padding-top: 5px !important;

    visibility: visible !important;
    opacity: 1 !important;
   }
/* =================================
   TOMBOL KEMBALI PROFIL - COMPACT
================================= */

.student-profile-v2 .profile-v2-back {
  width: calc(100% - 72px) !important;
  min-height: 42px !important;
  padding: 8px 16px !important;
  margin: 12px auto 18px !important;

  gap: 8px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;

  border-radius: 40px !important;
}

.student-profile-v2 .profile-v2-back span {
  font-size: 19px !important;
  line-height: 1 !important;
}

@media (max-width: 380px) {
  .student-profile-v2 .profile-v2-back {
    width: calc(100% - 56px) !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }
}
/* =========================================
REDESAIN VISUAL MADIN KALIGINTUNG
MODERN ISLAMIC DASHBOARD
========================================= */

/* LATAR UTAMA APLIKASI */

#appView {
background:
radial-gradient(ellipse at 8% 5%, rgba(207,177,92,.16), transparent 28%),
radial-gradient(ellipse at 94% 35%, rgba(20,112,73,.13), transparent 32%),
linear-gradient(145deg, #e4f1e8 0%, #f4f8f3 48%, #e5efe7 100%);
border-radius: 26px;
padding: 18px;
}

/* HEADER / SAMBUTAN */

#appView > .welcome {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 175px;
padding: 25px 28px;
margin-bottom: 18px;

border: 1px solid rgba(225,195,111,.55);
border-radius: 24px;

background:
radial-gradient(circle at 85% 15%, rgba(255,255,255,.15), transparent 28%),
linear-gradient(125deg, #03452f 0%, #08764e 58%, #0d8a5b 100%);

box-shadow: 0 12px 30px rgba(3,69,47,.20);
color: #fff;
}

#appView > .welcome::before,
#appView > .welcome::after {
content: "";
position: absolute;
z-index: -1;
border: 1px solid rgba(230,198,112,.28);
border-radius: 50%;
pointer-events: none;
}

#appView > .welcome::before {
width: 230px;
height: 230px;
right: 72px;
top: -145px;
box-shadow:
0 0 0 18px rgba(255,255,255,.035),
0 0 0 38px rgba(255,255,255,.025);
}

#appView > .welcome::after {
width: 145px;
height: 145px;
right: -48px;
bottom: -95px;
box-shadow:
0 0 0 15px rgba(255,255,255,.035),
0 0 0 32px rgba(255,255,255,.025);
}

#appView > .welcome h1 {
color: #fff;
margin: 7px 0;
font-size: clamp(25px,4vw,34px);
font-weight: 850;
letter-spacing: -.5px;
}

#appView > .welcome .eyebrow {
color: #f0d78e;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}

#appView > .welcome p,
#appView > .welcome .muted {
color: rgba(255,255,255,.82);
}

#appView .today-pill {
border: 1px solid rgba(241,215,145,.65);
border-radius: 30px;
background: rgba(255,255,255,.12);
color: #fff;
padding: 8px 13px;
font-weight: 700;
backdrop-filter: blur(8px);
}

#appView > .welcome img {
filter: drop-shadow(0 5px 9px rgba(0,0,0,.18));
}

/* NAVIGASI MENU */

#appView > .tabs {
display: flex;
gap: 8px;
padding: 9px;
margin: 0 0 18px;
border: 1px solid rgba(10,91,59,.12);
border-radius: 17px;
background: rgba(255,255,255,.82);
box-shadow: 0 5px 18px rgba(16,75,50,.07);
backdrop-filter: blur(10px);
}

#appView > .tabs .tab {
border-radius: 11px;
font-weight: 750;
transition: transform .18s ease, box-shadow .18s ease;
}

#appView > .tabs .tab.active {
background: linear-gradient(135deg,#08784f,#034b33);
color: #fff;
box-shadow: 0 4px 11px rgba(3,75,51,.22);
}

#appView > .tabs .tab:active {
transform: scale(.97);
}

/* PANEL SETIAP HALAMAN */

#appView > .panel {
position: relative;
isolation: isolate;
overflow: visible;
padding: 20px;

border: 1px solid rgba(11,101,65,.16);
border-radius: 23px;

background:
radial-gradient(circle at 100% 0%, rgba(211,180,94,.20), transparent 24%),
radial-gradient(circle at 0% 100%, rgba(36,133,86,.12), transparent 30%),
linear-gradient(145deg,#e2f0e6 0%,#f1f7f2 52%,#e4f0e7 100%);

box-shadow: 0 10px 28px rgba(16,75,50,.09);
}

#appView > .panel::before {
content: "";
position: absolute;
z-index: -1;
top: 14px;
right: 18px;
width: 92px;
height: 92px;
border: 1px solid rgba(181,145,55,.20);
border-radius: 26px;
transform: rotate(45deg);
pointer-events: none;
}

/* KARTU KONTEN */

#appView > .panel > .card {
position: relative;
z-index: 1;
padding: 22px;

border: 1px solid rgba(255,255,255,.95);
border-radius: 19px;

background: rgba(255,255,255,.94);

box-shadow: 0 7px 22px rgba(16,75,50,.075);
}

/* JUDUL HALAMAN */

#appView > .panel > .card > h2,
#appView > .panel > .card .section-head h2 {
position: relative;
margin-top: 0;
padding-bottom: 13px;
color: #07583b;
font-weight: 850;
letter-spacing: -.25px;
}

#appView > .panel > .card > h2::after,
#appView > .panel > .card .section-head h2::after {
content: "";
display: block;
width: 58px;
height: 4px;
margin-top: 10px;
border-radius: 5px;
background: linear-gradient(90deg,#08784f 0 65%,#d2ad50 65% 100%);
}

#appView > .panel > .card .muted {
color: #66796e;
}

/* DASHBOARD */

#dashboardPanel > .card:first-child {
overflow: hidden;
border: 1px solid rgba(221,190,111,.7);

background:
radial-gradient(circle at 95% 0%, rgba(255,255,255,.15), transparent 30%),
linear-gradient(125deg,#064a34,#08744d);

color: #fff;
}

#dashboardPanel > .card:first-child h2 {
color: #fff;
}

#dashboardPanel > .card:first-child h2::after {
background: linear-gradient(90deg,#e5c66f 0 65%,rgba(255,255,255,.7) 65% 100%);
}

#dashboardPanel > .card:first-child .muted {
color: rgba(255,255,255,.78);
}

#dashboardPanel .summary-grid {
gap: 12px;
}

#dashboardPanel .stat {
border: 1px solid rgba(229,198,111,.65);
border-radius: 16px;
background: linear-gradient(145deg,#fffdf5,#eaf5ed);
box-shadow: 0 5px 15px rgba(0,0,0,.10);
}

#dashboardPanel .stat strong {
color: #07583b;
font-size: 30px;
font-weight: 850;
}

#dashboardPanel .stat span {
color: #536b5d;
font-weight: 700;
}

#dashboardPanel > .card:nth-child(2) {
border-top: 4px solid #c9a64f;
}

/* INPUT DAN FORMULIR */

#appView > .panel input,
#appView > .panel select,
#appView > .panel textarea {
border-color: #d5e3d9;
border-radius: 11px;
background-color: #fbfdfb;
}

#appView > .panel input:focus,
#appView > .panel select:focus,
#appView > .panel textarea:focus {
border-color: #16845a;
box-shadow: 0 0 0 3px rgba(22,132,90,.12);
}

#appView > .panel button.primary {
box-shadow: 0 5px 13px rgba(5,102,65,.16);
}

#appView > .panel hr {
border: 0;
border-top: 1px solid #e0eae3;
}

/* KARTU BERTINGKAT MENU BACKUP */

#backupPanel .card .card {
border: 1px solid #e0ebe3;
background: #f8fcf9;
box-shadow: none;
}

/* RESPONSIVE HP */

@media (max-width:600px) {

#appView {
padding: 10px;
border-radius: 19px;
}

#appView > .welcome {
min-height: 138px;
padding: 18px 15px;
gap: 8px;
border-radius: 19px;
}

#appView > .welcome img {
width: 76px !important;
height: 76px !important;
}

#appView > .welcome h1 {
font-size: 23px;
}

#appView > .welcome .eyebrow {
font-size: 9px;
letter-spacing: 1.4px;
}

#appView > .welcome .today-pill {
font-size: 10px;
padding: 6px 9px;
}

#appView > .tabs {
gap: 6px;
padding: 7px;
margin-bottom: 12px;
border-radius: 14px;
}

#appView > .tabs .tab {
padding: 9px 11px;
font-size: 12px;
}

#appView > .panel {
padding: 10px;
border-radius: 18px;
}

#appView > .panel > .card {
padding: 16px;
border-radius: 15px;
}

#appView > .panel::before {
width: 60px;
height: 60px;
top: 12px;
right: 12px;
}

#dashboardPanel .stat strong {
font-size: 25px;
}
}

@media (max-width:380px) {

#appView > .welcome {
padding: 15px 11px;
}

#appView > .welcome img {
width: 64px !important;
height: 64px !important;
}

#appView > .tabs .tab {
padding: 8px 9px;
font-size: 11px;
}

#appView > .panel > .card {
padding: 13px;
}
}

/* TAMPILAN CETAK */

@media print {

#appView,
#appView > .panel {
background: #fff !important;
box-shadow: none !important;
border: 0 !important;
}

}
/* =========================================
   REDESAIN KHUSUS DASHBOARD
   RINGKASAN LEBIH TEGAS & PROFESIONAL
========================================= */

/* Ornamen panel berada di belakang kartu */
#appView > .panel::before {
  z-index: 0;
}

/* Komposisi kartu dashboard */
#dashboardPanel {
  display: grid;
  gap: 16px;
}

#dashboardPanel > .card:first-child {
  position: relative;
  padding: 25px;
  border-radius: 22px;
  box-shadow: 0 12px 26px rgba(3, 65, 43, .17);
}

#dashboardPanel > .card:first-child h2 {
  font-size: clamp(21px, 3vw, 27px);
  letter-spacing: -.45px;
}

#dashboardPanel > .card:first-child > p {
  max-width: 520px;
  line-height: 1.65;
}

/* Angka ringkasan */
#dashboardPanel .summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 22px;
}

#dashboardPanel .stat {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 7px;
  padding: 17px 19px;
  border-radius: 17px;
  transition: transform .2s ease, box-shadow .2s ease;
}

#dashboardPanel .stat strong {
  line-height: 1;
  font-size: clamp(29px, 4vw, 36px);
  letter-spacing: -.8px;
}

#dashboardPanel .stat span {
  font-size: 12px;
  letter-spacing: .25px;
}

#dashboardPanel .stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 19px rgba(0, 0, 0, .13);
}

/* Kartu jumlah santri per kelas */
#dashboardPanel > .card:nth-child(2) {
  padding: 22px;
  border: 1px solid #dce9df;
  border-top: 4px solid #c9a64f;
  border-radius: 19px;
}

#dashboardPanel > .card:nth-child(2) h2 {
  margin-bottom: 17px;
  font-size: 19px;
}

#dashboardPanel #dashClassStats {
  display: grid;
  gap: 9px;
}

#dashboardPanel #dashClassStats .list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 49px;
  padding: 11px 14px;
  border: 1px solid #e4eee7;
  border-radius: 12px;
  background: linear-gradient(100deg, #f7fbf8, #ffffff);
  transition: border-color .18s ease, transform .18s ease;
}

#dashboardPanel #dashClassStats .list-item span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #315b46;
  font-weight: 700;
}

#dashboardPanel #dashClassStats .list-item span::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c5a24b;
  box-shadow: 0 0 0 4px rgba(197, 162, 75, .13);
}

#dashboardPanel #dashClassStats .list-item strong {
  color: #08734c;
  font-size: 13px;
  white-space: nowrap;
}

#dashboardPanel #dashClassStats .list-item:hover {
  transform: translateX(2px);
  border-color: #b9d7c3;
}

/* Penyesuaian layar HP */
@media (max-width: 600px) {
  #dashboardPanel {
    gap: 12px;
  }

  #dashboardPanel > .card:first-child {
    padding: 18px 15px;
    border-radius: 17px;
  }

  #dashboardPanel .summary-grid {
    gap: 9px;
    margin-top: 17px;
  }

  #dashboardPanel .stat {
    min-height: 94px;
    padding: 13px 12px;
    border-radius: 13px;
  }

  #dashboardPanel .stat strong {
    font-size: 27px;
  }

  #dashboardPanel .stat span {
    font-size: 11px;
  }

  #dashboardPanel > .card:nth-child(2) {
    padding: 17px 14px;
  }

  #dashboardPanel #dashClassStats .list-item {
    min-height: 45px;
    padding: 9px 11px;
  }
}

@media (max-width: 350px) {
  #dashboardPanel .summary-grid {
    grid-template-columns: 1fr;
  }
}

/* Pastikan desain dashboard tidak memengaruhi hasil cetak */
@media print {
  #dashboardPanel,
  #dashboardPanel > .card,
  #dashboardPanel #dashClassStats .list-item {
    box-shadow: none !important;
    transform: none !important;
  }
}
/* =========================================
   REDESAIN HALAMAN ABSENSI
   MODERN ATTENDANCE INTERFACE
========================================= */

/* Area utama absensi */
#attendancePanel > .card {
  padding: 24px;
  border-radius: 21px;
}

/* Judul halaman */
#attendancePanel .section-head {
  margin-bottom: 20px;
}

#attendancePanel .section-head h2 {
  font-size: 23px;
  font-weight: 850;
  letter-spacing: -.4px;
  margin-bottom: 7px;
}

#attendancePanel .section-head p {
  font-size: 13px;
  line-height: 1.6;
}

/* Input tanggal */
#attendancePanel label:has(#attendanceDate) {
  display: block;
  margin-bottom: 17px;
  font-weight: 750;
  color: #315b46;
}

#attendancePanel #attendanceDate {
  min-height: 49px;
  margin-top: 8px;
  padding: 11px 14px;
  border: 1px solid #d5e5da;
  border-radius: 13px;
  background: linear-gradient(145deg, #ffffff, #f5faf6);
  color: #174c34;
  font-weight: 700;
}

/* Pilihan kelas */
#attendanceClassWrap {
  margin: 12px 0 17px !important;
}

#attendanceClassWrap .custom-select-trigger {
  min-height: 49px !important;
  border: 1px solid #c9dfd0 !important;
  border-radius: 13px !important;
  background: linear-gradient(120deg, #eaf5ee, #ffffff) !important;
  color: #07583b !important;
  box-shadow: 0 3px 10px rgba(16,75,50,.05);
}

/* Daftar santri */
#attendancePanel #attendanceList {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

/* Kartu setiap santri */
#attendancePanel #attendanceList .list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 59px;
  padding: 10px 12px;
  margin: 0;

  border: 1px solid #e1ebe4;
  border-radius: 13px;

  background: linear-gradient(
    110deg,
    #ffffff,
    #f6faf7
  );

  box-shadow: 0 3px 10px rgba(16,75,50,.045);
  transition: border-color .2s ease, transform .2s ease;
}

/* Nomor/nama santri */
#attendancePanel #attendanceList .grow {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

#attendancePanel #attendanceList .grow strong {
  color: #254b36;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

/* Dropdown status */
#attendancePanel #attendanceList .custom-select-wrap {
  flex: 0 0 96px !important;
  width: 96px !important;
  min-width: 96px !important;
}

#attendancePanel #attendanceList .custom-select-trigger {
  width: 100%;
  min-height: 38px;
  padding: 6px 7px;
  border: 1px solid #d9e7dd;
  border-radius: 10px;
  background: #ffffff;
  color: #315b46;
  font-size: 11px;
  font-weight: 750;
}

/* Menu pilihan status */
#attendancePanel #attendanceList .custom-select-menu {
  min-width: 120px;
  border: 1px solid #dce9e0;
  border-radius: 11px;
  box-shadow: 0 9px 24px rgba(0,0,0,.12);
  z-index: 100;
}

/* Tombol simpan */
#attendancePanel #saveAttendanceBtn {
  min-height: 51px;
  margin-top: 22px;
  border-radius: 14px;
  background: linear-gradient(120deg, #08784f, #034b33);
  box-shadow: 0 7px 17px rgba(3,75,51,.20);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform .2s ease, box-shadow .2s ease;
}

#attendancePanel #saveAttendanceBtn:active {
  transform: scale(.98);
}

/* Pesan informasi */
#attendancePanel #attendanceMsg {
  margin-top: 14px;
  line-height: 1.6;
}

/* Tampilan HP */
@media (max-width: 600px) {

  #attendancePanel > .card {
    padding: 16px;
    border-radius: 16px;
  }

  #attendancePanel .section-head h2 {
    font-size: 20px;
  }

  #attendancePanel .section-head p {
    font-size: 12px;
  }

  #attendancePanel #attendanceList {
    gap: 8px;
    margin-top: 14px;
  }

  #attendancePanel #attendanceList .list-row {
    min-height: 54px;
    padding: 8px 9px;
    border-radius: 11px;
  }

  #attendancePanel #attendanceList .grow strong {
    font-size: 12px;
  }

  #attendancePanel #attendanceList .custom-select-wrap {
    flex-basis: 88px !important;
    width: 88px !important;
    min-width: 88px !important;
  }

  #attendancePanel #attendanceList .custom-select-trigger {
    min-height: 36px;
    font-size: 10px;
    padding: 5px;
  }

  #attendancePanel #saveAttendanceBtn {
    min-height: 47px;
    font-size: 13px;
  }
}

/* Layar HP sangat kecil */
@media (max-width: 350px) {

  #attendancePanel #attendanceList .list-row {
    gap: 6px;
    padding: 7px;
  }

  #attendancePanel #attendanceList .custom-select-wrap {
    flex-basis: 82px !important;
    width: 82px !important;
    min-width: 82px !important;
  }
}

/* Pertahankan tampilan cetak */
@media print {

  #attendancePanel > .card,
  #attendancePanel #attendanceList .list-row {
    box-shadow: none !important;
  }

}
/* =========================================
   REDESAIN HALAMAN DATA SANTRI
   MODERN STUDENT MANAGEMENT
========================================= */

/* Kartu utama */
#studentsPanel > .card {
  padding: 24px;
  border-radius: 21px;
}

/* Judul */
#studentsPanel > .card > h2 {
  font-size: 23px;
  font-weight: 850;
  letter-spacing: -.4px;
  margin-bottom: 7px;
}

#studentsPanel > .card > p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Area pencarian dan filter */
#studentsPanel .student-tools {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e0ebe3;
  border-radius: 16px;
  background: linear-gradient(135deg, #f1f8f3, #ffffff);
}

#studentsPanel .student-tools label {
  margin: 0;
  color: #315b46;
  font-size: 12px;
  font-weight: 750;
}

#studentsPanel .student-tools input,
#studentsPanel .student-tools select {
  min-height: 46px;
  margin-top: 7px;
  border: 1px solid #d7e6dc;
  border-radius: 11px;
  background: #ffffff;
  font-size: 13px;
}

/* Daftar santri */
#studentsPanel #studentList {
  display: grid;
  gap: 11px;
  margin-top: 15px;
}

/* Kartu individual santri */
#studentsPanel #studentList > .list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 13px;
  margin: 0;
  border: 1px solid #e1ebe4;
  border-left: 4px solid #c9a64f;
  border-radius: 15px;
  background: linear-gradient(110deg, #ffffff, #f5faf6);
  box-shadow: 0 4px 13px rgba(16,75,50,.055);
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Informasi santri */
#studentsPanel #studentList .grow {
  flex: 1;
  min-width: 0;
}

#studentsPanel #studentList .grow strong {
  display: block;
  margin-bottom: 5px;
  color: #174c34;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#studentsPanel #studentList .grow small {
  display: block;
  color: #728579;
  font-size: 11px;
  font-weight: 600;
}

/* Foto santri */
#studentsPanel #studentList .grow img {
  display: block;
  width: 66px !important;
  height: 66px !important;
  margin-top: 9px !important;
  border: 2px solid #ffffff;
  border-radius: 12px !important;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

/* Tombol tindakan */
#studentsPanel .student-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

#studentsPanel .student-actions button {
  min-height: 34px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}

#studentsPanel .student-actions button:active {
  transform: scale(.96);
}

/* Tombol hapus */
#studentsPanel .student-actions .delete-btn {
  background: #fff1f0;
  border: 1px solid #f2d2cf;
  color: #bd3731;
}

/* Tampilan tablet */
@media (max-width: 700px) {
  #studentsPanel .student-tools {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Tampilan HP */
@media (max-width: 600px) {

  #studentsPanel > .card {
    padding: 15px;
    border-radius: 16px;
  }

  #studentsPanel > .card > h2 {
    font-size: 20px;
  }

  #studentsPanel .student-tools {
    padding: 11px;
    border-radius: 13px;
  }

  #studentsPanel #studentList {
    gap: 9px;
  }

  #studentsPanel #studentList > .list-row {
    gap: 8px;
    padding: 10px 8px;
    border-radius: 12px;
  }

  #studentsPanel #studentList .grow strong {
    font-size: 12px;
  }

  #studentsPanel #studentList .grow small {
    font-size: 10px;
  }

  #studentsPanel #studentList .grow img {
    width: 55px !important;
    height: 55px !important;
  }

  #studentsPanel .student-actions {
    gap: 5px;
    max-width: 145px;
  }

  #studentsPanel .student-actions button {
    min-height: 31px;
    padding: 6px 8px;
    font-size: 10px;
  }
}

/* HP dengan layar sangat kecil */
@media (max-width: 380px) {

  #studentsPanel #studentList > .list-row {
    align-items: flex-start;
  }

  #studentsPanel .student-actions {
    max-width: 125px;
  }

  #studentsPanel .student-actions button {
    padding: 5px 6px;
    font-size: 9px;
  }
}

/* Pertahankan hasil cetak */
@media print {
  #studentsPanel > .card,
  #studentsPanel #studentList > .list-row {
    box-shadow: none !important;
  }
}
/* =========================================
   REDESAIN HALAMAN REKAP ABSENSI
   PROFESSIONAL REPORT INTERFACE
========================================= */

/* Kartu utama */
#reportsPanel > .card {
  padding: 24px;
  border-radius: 21px;
}

/* Judul */
#reportsPanel > .card > h2 {
  margin-bottom: 20px;
  font-size: 23px;
  font-weight: 850;
  letter-spacing: -.4px;
}

/* Area filter */
#reportsPanel .grid2 {
  gap: 13px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #e0ebe3;
  border-radius: 16px;
  background: linear-gradient(135deg, #f0f8f2, #ffffff);
}

#reportsPanel .grid2 label {
  color: #315b46;
  font-size: 12px;
  font-weight: 750;
}

#reportsPanel .grid2 select {
  min-height: 46px;
  margin-top: 7px;
  border: 1px solid #d5e5da;
  border-radius: 11px;
  background: #ffffff;
  color: #174c34;
  font-size: 13px;
  font-weight: 650;
}

/* Tombol tampilkan rekap */
#reportsPanel #loadReportBtn {
  min-height: 49px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: linear-gradient(120deg, #08784f, #034b33);
  box-shadow: 0 6px 15px rgba(3,75,51,.16);
  font-size: 13px;
  font-weight: 800;
}

/* Statistik rekap */
#reportsPanel #reportSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 18px 0 22px;
}

#reportsPanel #reportSummary .stat {
  min-height: 105px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 13px 8px;
  border: 1px solid #e0ebe3;
  border-left: 4px solid #c9a64f;
  border-radius: 15px;
  background: linear-gradient(145deg, #ffffff, #f0f8f2);
  box-shadow: 0 4px 12px rgba(16,75,50,.06);
}

#reportsPanel #reportSummary .stat strong {
  color: #08734c;
  font-size: 29px;
  font-weight: 850;
  line-height: 1;
}

#reportsPanel #reportSummary .stat span {
  color: #597565;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

/* Area tabel */
#reportsPanel #reportTable {
  width: 100%;
  margin-top: 16px;
}

#reportsPanel #reportTable .table-wrap {
  overflow-x: auto;
}

#reportsPanel #reportTable table {
  width: 100%;
  min-width: 650px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #dce9e0;
  border-radius: 13px;
  background: #ffffff;
  font-size: 12px;
}

/* Header tabel */
#reportsPanel #reportTable thead th {
  padding: 13px 11px;
  background: linear-gradient(120deg, #075b3d, #08784f);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  border: none;
}

/* Isi tabel */
#reportsPanel #reportTable tbody td {
  padding: 12px 10px;
  color: #365545;
  border-bottom: 1px solid #e8efe9;
  font-size: 12px;
  white-space: nowrap;
}

#reportsPanel #reportTable tbody tr:nth-child(even) {
  background: #f4f9f5;
}

#reportsPanel #reportTable tbody tr:last-child td {
  border-bottom: none;
}

#reportsPanel #reportTable tbody td:first-child {
  font-weight: 700;
}

#reportsPanel #reportTable tbody td strong {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 8px;
  background: #e5f4e9;
  color: #08734c;
  font-size: 11px;
}

/* Keterangan tabel */
#reportsPanel #reportTable > p {
  margin-top: 12px;
  color: #748579;
  font-size: 11px;
  line-height: 1.6;
}

/* Tombol ekspor, cetak, dan gambar */
#reportsPanel #exportBtn,
#reportsPanel #printReportBtn,
#reportsPanel #shareImageBtn {
  min-height: 46px;
  margin-top: 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
}

/* Pesan */
#reportsPanel #reportMsg {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f0f8f2;
  color: #176b45;
  font-size: 12px;
  line-height: 1.6;
}

/* Tampilan HP */
@media (max-width: 600px) {

  #reportsPanel > .card {
    padding: 15px;
    border-radius: 16px;
  }

  #reportsPanel > .card > h2 {
    font-size: 20px;
  }

  #reportsPanel .grid2 {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  #reportsPanel #reportSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 15px 0 18px;
  }

  #reportsPanel #reportSummary .stat {
    min-height: 88px;
    padding: 10px 6px;
    border-radius: 12px;
  }

  #reportsPanel #reportSummary .stat strong {
    font-size: 25px;
  }

  #reportsPanel #reportSummary .stat span {
    font-size: 10px;
  }
     }

   /* =========================================
   REDESAIN HALAMAN BACKUP DATA
   PROFESSIONAL ADMIN INTERFACE
========================================= */

/* Kartu utama */
#backupPanel > .card {
  padding: 24px;
  border: 1px solid #dce9df;
  border-radius: 21px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(201,166,79,.10),
      transparent 30%
    ),
    linear-gradient(145deg, #ffffff, #f8fcf9);
  box-shadow: 0 9px 26px rgba(16,75,50,.08);
}

/* Judul utama */
#backupPanel > .card > h2 {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 14px;
  color: #104b32;
  font-size: 23px;
  font-weight: 850;
  letter-spacing: -.4px;
}

#backupPanel > .card > h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 65px;
  height: 4px;
  border-radius: 10px;
  background: linear-gradient(90deg, #176b45, #c9a64f);
}

/* Garis pemisah */
#backupPanel hr {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid #e1ebe4;
}

/* Judul setiap bagian */
#backupPanel h3 {
  margin: 20px 0 12px;
  color: #145638;
  font-size: 16px;
  font-weight: 800;
}

/* Kartu pemantauan foto */
#backupPanel > .card > .card {
  position: relative;
  overflow: hidden;
  padding: 17px;
  margin: 12px 0 24px;
  border: 1px solid #dcebe0;
  border-top: 4px solid #c9a64f;
  border-radius: 17px;
  background: linear-gradient(145deg, #f5faf6, #ffffff);
  box-shadow: 0 5px 15px rgba(16,75,50,.05);
}

/* Informasi statistik foto */
#backupPanel > .card > .card > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 3px;
  border-bottom: 1px solid #e5eee7;
  color: #52685a;
  font-size: 13px;
  font-weight: 600;
}

#backupPanel > .card > .card > p:last-of-type {
  border-bottom: none;
}

#backupPanel > .card > .card > p strong {
  color: #08734c;
  font-size: 17px;
  font-weight: 850;
  white-space: nowrap;
}

/* Persentase kelengkapan foto */
#backupPanel #photoPercentage {
  color: #a47d20;
  font-size: 20px;
}

/* Tombol perbarui statistik */
#backupPanel #refreshPhotoStatsBtn {
  min-height: 44px;
  margin-top: 14px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
}

/* Keterangan backup */
#backupPanel > .card > .muted {
  margin: 15px 0 10px;
  color: #718177;
  font-size: 12px;
  line-height: 1.7;
}

/* Tombol unduh backup */
#backupPanel #backupDataBtn {
  min-height: 54px;
  margin-top: 8px;
  border: 1px solid #075638;
  border-radius: 13px;
  background: linear-gradient(120deg, #08784f, #06452f);
  box-shadow: 0 6px 15px rgba(5,102,65,.17);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .2px;
}

#backupPanel #backupDataBtn:active {
  transform: scale(.98);
}

/* Bagian restore */
#backupPanel > .card > h3:last-of-type {
  margin-top: 22px;
}

/* Area keterangan restore */
#backupPanel > .card > h3:last-of-type ~ .muted {
  padding: 10px 12px;
  border-left: 3px solid #c9a64f;
  border-radius: 0 9px 9px 0;
  background: #f4f8f5;
  color: #66786c;
  font-size: 11px;
  line-height: 1.7;
}

/* Input file backup */
#backupPanel #restoreFile {
  min-height: 48px;
  margin-top: 12px;
  padding: 10px;
  border: 1px dashed #9dbba7;
  border-radius: 12px;
  background: #f5faf6;
  color: #456451;
  font-size: 12px;
}

/* Tombol restore */
#backupPanel #restoreDataBtn {
  min-height: 50px;
  margin-top: 12px;
  border: 1px solid #c5a34d;
  border-radius: 12px;
  background: linear-gradient(120deg, #f5edda, #eee1bd);
  color: #69521c;
  box-shadow: 0 4px 11px rgba(145,112,35,.09);
  font-size: 13px;
  font-weight: 850;
}

/* Pesan proses */
#backupPanel .message {
  margin-top: 13px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
}

/* Tampilan HP */
@media (max-width: 600px) {

  #backupPanel > .card {
    padding: 15px;
    border-radius: 17px;
  }

  #backupPanel > .card > h2 {
    font-size: 20px;
  }

  #backupPanel h3 {
    font-size: 14px;
  }

  #backupPanel > .card > .card {
    padding: 13px;
    border-radius: 14px;
  }

  #backupPanel > .card > .card > p {
    padding: 11px 2px;
    font-size: 12px;
  }

  #backupPanel > .card > .card > p strong {
    font-size: 15px;
  }

  #backupPanel #photoPercentage {
    font-size: 18px;
  }

  #backupPanel #backupDataBtn,
  #backupPanel #restoreDataBtn {
    min-height: 48px;
    font-size: 12px;
  }
}
/* =========================================
   REDESAIN KARTU DATA SANTRI
   FOTO KIRI - TOMBOL VERTIKAL KANAN
========================================= */

#studentsPanel #studentList > .list-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 12px;
  padding: 13px;
}

/* Foto santri di sebelah kiri */
#studentsPanel .student-photo {
  width: 68px;
  height: 68px;
  overflow: hidden;
  border-radius: 13px;
  background: #eaf2ec;
  border: 2px solid #ffffff;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

#studentsPanel .student-photo img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
}

#studentsPanel .photo-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #64836e;
  font-size: 25px;
  font-weight: 800;
}

/* Informasi nama dan kelas */
#studentsPanel .student-info {
  min-width: 0;
}

#studentsPanel .student-info strong {
  display: block;
  color: #174c34;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
  margin-bottom: 5px;
}

#studentsPanel .student-info small {
  display: block;
  color: #728579;
  font-size: 11px;
  font-weight: 600;
}

/* Tombol disusun vertikal */
#studentsPanel .student-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: none;
  gap: 6px;
}

#studentsPanel .student-actions button {
  width: 100%;
  min-height: 31px;
  padding: 6px 4px;
  margin: 0;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

/* Tampilan HP */
@media (max-width: 600px) {
  #studentsPanel #studentList > .list-row {
    grid-template-columns: 55px minmax(0, 1fr) 82px;
    gap: 8px;
    padding: 10px 8px;
  }

  #studentsPanel .student-photo {
    width: 55px;
    height: 55px;
    border-radius: 10px;
  }

  #studentsPanel .student-info strong {
    font-size: 11px;
  }

  #studentsPanel .student-info small {
    font-size: 10px;
  }

  #studentsPanel .student-actions {
    gap: 5px;
  }

  #studentsPanel .student-actions button {
    min-height: 29px;
    padding: 5px 3px;
    font-size: 9px;
  }
}

/* HP layar kecil */
@media (max-width: 380px) {
  #studentsPanel #studentList > .list-row {
    grid-template-columns: 48px minmax(0, 1fr) 76px;
    gap: 6px;
    padding: 9px 6px;
  }

  #studentsPanel .student-photo {
    width: 48px;
    height: 48px;
  }

  #studentsPanel .student-actions button {
    font-size: 8px;
    min-height: 27px;
  }
}
/* =========================================
   PROFIL SANTRI V3
   MODERN PREMIUM DASHBOARD
========================================= */

.student-profile-v3 {
  --v3-green: #075b3d;
  --v3-dark: #03452f;
  --v3-gold: #c9a64f;

  width: 100%;
  padding: 12px;
  background: #f4f8f5;
  border: 1px solid #e2ebe4;
  border-radius: 20px;
  box-sizing: border-box;
}


/* KARTU IDENTITAS */

.profile-v3-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;

  padding: 20px 16px;
  overflow: hidden;

  background: linear-gradient(
    125deg,
    #03452f,
    #08704a
  );

  border-radius: 16px;
  border-bottom: 4px solid var(--v3-gold);
  box-shadow: 0 6px 16px rgba(3,69,47,.16);
}

.profile-v3-photo {
  flex-shrink: 0;
  width: 92px;
  height: 108px;
  padding: 4px;

  background: #fff;
  border: 2px solid #d7bd72;
  border-radius: 13px;
  overflow: hidden;
}

.profile-v3-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}

.profile-v3-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;

  color: #075b3d;
  background: #eaf3ed;
  font-size: 35px;
  font-weight: 800;
}

.profile-v3-identity {
  position: relative;
  z-index: 2;
  min-width: 0;
  flex: 1;
}

.profile-v3-label {
  display: inline-block;
  margin-bottom: 7px;
  color: #e4d39e;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.profile-v3-identity h2 {
  margin: 0 0 9px !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.profile-v3-class {
  display: inline-block;
  padding: 5px 11px;

  color: #075b3d;
  background: #f1e5bd;
  border-radius: 30px;

  font-size: 11px;
  font-weight: 800;
}

.profile-v3-nis {
  margin-top: 9px;
  color: #e1eee5;
  font-size: 11px;
  font-weight: 600;
}

.profile-v3-decoration {
  position: absolute;
  right: 10px;
  top: -15px;
  color: rgba(255,255,255,.08);
  font-size: 100px;
  pointer-events: none;
}


/* BAGIAN INFORMASI */

.profile-v3-section {
  margin-top: 20px;
}

.profile-v3-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

.profile-v3-heading-icon {
  display: flex;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;

  color: #ffffff;
  background: var(--v3-green);
  border-radius: 10px;

  font-size: 11px;
  font-weight: 800;
}

.profile-v3-heading h3 {
  margin: 0 !important;
  color: #174c34 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.profile-v3-heading p {
  margin: 3px 0 0 !important;
  color: #839187;
  font-size: 10px;
}


/* KARTU BIODATA */

.profile-v3-card {
  padding: 5px 14px;

  background: #ffffff;
  border: 1px solid #e4ece6;
  border-radius: 13px;

  box-shadow: 0 3px 10px rgba(16,75,50,.04);
}

.profile-v3-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 0;
  border-bottom: 1px solid #edf1ee;
}

.profile-v3-row:last-child {
  border-bottom: none;
}

.profile-v3-row span {
  flex: 0 0 40%;
  color: #7b8b80;
  font-size: 11px;
  font-weight: 600;
}

.profile-v3-row strong {
  flex: 1;
  color: #263d30;
  font-size: 12px;
  font-weight: 750;
  text-align: right;
  overflow-wrap: anywhere;
  line-height: 1.5;
}


/* ALAMAT */

.profile-v3-address {
  padding: 15px;

  color: #34483a;
  background: #ffffff;
  border: 1px solid #e4ece6;
  border-left: 4px solid var(--v3-gold);
  border-radius: 12px;

  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}


/* TOMBOL KEMBALI */

.profile-v3-back {
  display: block;
  width: 100%;
  min-height: 43px;
  margin-top: 22px;
  padding: 10px;

  color: #ffffff;
  background: linear-gradient(120deg, #075b3d, #08704a);
  border: none;
  border-radius: 11px;

  font-size: 12px;
  font-weight: 750;

  box-shadow: 0 4px 10px rgba(3,69,47,.13);
}


/* RESPONSIVE HP */

@media (max-width: 480px) {

  .student-profile-v3 {
    padding: 9px;
    border-radius: 15px;
  }

  .profile-v3-hero {
    gap: 11px;
    padding: 15px 11px;
    border-radius: 13px;
  }

  .profile-v3-photo {
    width: 76px;
    height: 91px;
  }

  .profile-v3-identity h2 {
    font-size: 15px !important;
  }

  .profile-v3-label {
    font-size: 8px;
  }

  .profile-v3-class {
    font-size: 10px;
  }

  .profile-v3-nis {
    font-size: 10px;
  }

  .profile-v3-section {
    margin-top: 16px;
  }

  .profile-v3-heading h3 {
    font-size: 13px !important;
  }

  .profile-v3-row {
    gap: 7px;
    padding: 11px 0;
  }

  .profile-v3-row span {
    flex-basis: 39%;
    font-size: 10px;
  }

  .profile-v3-row strong {
    font-size: 11px;
  }

  .profile-v3-address {
    font-size: 11px;
  }
}


/* HP LAYAR KECIL */

@media (max-width: 350px) {

  .profile-v3-photo {
    width: 65px;
    height: 80px;
  }

  .profile-v3-hero {
    gap: 9px;
    padding: 12px 9px;
  }

  .profile-v3-identity h2 {
    font-size: 13px !important;
  }

  .profile-v3-row span {
    flex-basis: 36%;
  }
}
/* =========================================
   PERBAIKAN HALAMAN RIWAYAT DAN EDIT SANTRI
========================================= */

/* Lepaskan layout grid daftar santri */
#studentsPanel #studentList > .student-detail-open {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* KONTENER RIWAYAT */
.student-history-v1 {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 18px;
  box-sizing: border-box;
  border: 1px solid #e2ebe4;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff, #f3f8f4);
  box-shadow: 0 5px 18px rgba(15, 75, 48, .07);
}

.student-history-v1 h3 {
  color: #075b3d;
  font-size: 16px;
  font-weight: 800;
}

.student-history-v1 img {
  display: block;
  margin: auto;
  border: 3px solid #d7bd72;
}

.history-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 12px 0;
}

.history-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 12px 4px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .05);
}

.history-stat strong {
  color: #174c34;
  font-size: 21px;
}

.history-stat span {
  margin-top: 4px;
  color: #718078;
  font-size: 10px;
}

.history-percent {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  margin-top: 12px;
  border-radius: 13px;
  background: #eaf5ed;
  color: #075b3d;
}

.history-percent strong {
  font-size: 28px;
  font-weight: 800;
}

.history-percent span {
  font-size: 11px;
}

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

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e7eee8;
  border-radius: 11px;
  background: #ffffff;
}

.history-item strong {
  color: #34483a;
  font-size: 12px;
  line-height: 1.5;
}

.history-item > span {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 20px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}

/* FORM EDIT PROFIL */
.student-edit-v1 {
  width: 100%;
  min-width: 0;
  padding: 18px;
  box-sizing: border-box;
  border: 1px solid #e2ebe4;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff, #f4f8f5);
  box-shadow: 0 5px 18px rgba(15, 75, 48, .07);
}

.student-edit-v1 label {
  display: block;
  margin: 15px 0 6px;
  color: #24563c;
  font-size: 12px;
  font-weight: 750;
}

.student-edit-v1 input,
.student-edit-v1 select,
.student-edit-v1 textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 43px;
  margin: 0;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid #d5e3d8;
  border-radius: 10px;
  background: #ffffff;
  color: #263d30;
  font-size: 13px;
}

.student-edit-v1 textarea {
  min-height: 85px;
  resize: vertical;
}

.student-edit-v1 input:focus,
.student-edit-v1 select:focus,
.student-edit-v1 textarea:focus {
  outline: none;
  border-color: #16845b;
  box-shadow: 0 0 0 3px rgba(22, 132, 91, .10);
}

.student-edit-v1 input[type="file"] {
  min-height: auto;
  padding: 10px;
  background: #f4f8f5;
}

.student-edit-v1 img {
  display: block;
  width: 90px;
  height: 90px;
  margin-top: 12px;
  object-fit: cover;
  border: 3px solid #d7bd72;
  border-radius: 12px;
}

.student-edit-v1 button {
  width: 100%;
  min-height: 43px;
  margin: 12px 0 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
}

.student-edit-v1 .edit-save {
  color: #ffffff;
  background: linear-gradient(120deg, #075b3d, #16845b);
}

.student-edit-v1 .edit-cancel {
  color: #075b3d;
  background: #eaf3ed;
  border: 1px solid #cbded0;
}

/* PENYESUAIAN HP */
@media (max-width: 480px) {
  .student-history-v1,
  .student-edit-v1 {
    padding: 13px;
    border-radius: 14px;
  }

  .history-summary {
    gap: 5px;
  }

  .history-stat {
    padding: 10px 3px;
  }

  .history-stat strong {
    font-size: 18px;
  }

  .history-stat span {
    font-size: 9px;
  }

  .history-item {
    padding: 10px;
  }

  .history-item strong {
    font-size: 11px;
  }
}
/* =================================
   DASHBOARD ANALITIK MADIN
================================= */

#dashboardPanel .dash-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

#dashboardPanel .dash-section-title h2 {
  margin: 0 0 5px;
}

#dashboardPanel .dash-period {
  padding: 6px 10px;
  border-radius: 20px;
  background: #eaf4ee;
  color: #216b45;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

#dashboardPanel .dash-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#dashboardPanel .dash-rate {
  font-size: 36px;
  font-weight: 800;
  color: #216b45;
  margin: 12px 0 4px;
}

#dashboardPanel .dash-progress {
  height: 10px;
  background: #e8eee9;
  border-radius: 20px;
  overflow: hidden;
  margin: 12px 0;
}

#dashboardPanel .dash-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: #278653;
  border-radius: 20px;
  transition: width .3s ease;
}

#dashboardPanel .dash-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 13px;
}

#dashboardPanel .dash-mini-stats strong {
  color: #216b45;
  margin-left: 4px;
}

#dashboardPanel #dashClassStats .list-item,
#dashboardPanel #dashTopStudents .list-item,
#dashboardPanel #dashRecentDays .list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #edf0ed;
}

#dashboardPanel #dashClassStats .list-item:last-child,
#dashboardPanel #dashTopStudents .list-item:last-child,
#dashboardPanel #dashRecentDays .list-item:last-child {
  border-bottom: 0;
}

@media (max-width: 520px) {
  #dashboardPanel .dash-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dashboardPanel .dash-rate {
    font-size: 30px;
  }

  #dashboardPanel .dash-mini-stats {
    gap: 8px 12px;
  }
   }
/* DASHBOARD - KEHADIRAN DAN SANTRI SREGE P */
#dashboardPanel #dashClassStats {
  display: grid;
  gap: 12px;
}

#dashboardPanel .class-ranking-item {
  overflow: hidden;
  border: 1px solid #dce9df;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(20, 70, 45, .05);
  transition: all .2s ease;
}

#dashboardPanel .class-ranking-item[open] {
  border-color: #9fc9ad;
  box-shadow: 0 5px 15px rgba(20, 70, 45, .09);
}

#dashboardPanel .class-ranking-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 65px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(110deg, #f3faf5, #ffffff);
}

#dashboardPanel .class-ranking-summary::-webkit-details-marker {
  display: none;
}

#dashboardPanel .class-ranking-summary > span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #24583e;
  font-size: 15px;
  font-weight: 750;
}

#dashboardPanel .class-ranking-summary > span::before {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #c5a24b;
  box-shadow: 0 0 0 4px rgba(197, 162, 75, .15);
}

#dashboardPanel .class-ranking-summary > strong {
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 9px;
  background: #e5f4e9;
  color: #08734c;
  font-size: 12px;
  white-space: nowrap;
}

#dashboardPanel .class-ranking-summary::after {
  content: "⌄";
  color: #568368;
  font-size: 21px;
  font-weight: bold;
  transition: transform .2s ease;
}

#dashboardPanel .class-ranking-item[open]
.class-ranking-summary::after {
  transform: rotate(180deg);
}

#dashboardPanel .class-ranking-content {
  padding: 14px;
  border-top: 1px solid #e7efe9;
  background: #fbfdfb;
}

#dashboardPanel .class-ranking-content > strong {
  display: block;
  margin-bottom: 10px;
  color: #98762e;
  font-size: 13px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

#dashboardPanel .class-ranking-student {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  margin-top: 7px;
  border: 1px solid #e6eee8;
  border-radius: 10px;
  background: #fff;
}

#dashboardPanel .class-ranking-student span {
  color: #315b46;
  font-size: 14px;
  font-weight: 600;
}

#dashboardPanel .class-ranking-student strong {
  flex-shrink: 0;
  padding: 6px 9px;
  border-radius: 8px;
  background: #f8f1dc;
  color: #927128;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  #dashboardPanel .class-ranking-summary {
    min-height: 59px;
    padding: 11px;
    gap: 7px;
  }

  #dashboardPanel .class-ranking-summary > strong {
    padding: 6px 7px;
    font-size: 11px;
  }

  #dashboardPanel .class-ranking-student {
    padding: 10px;
  }
}
/* BINGKAI TANGGAL WELCOME DASHBOARD */
.welcome .today-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;

  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;

  padding: 7px 13px;
  margin: 0;

  white-space: nowrap;
  text-align: center;
  line-height: 1.3;
  font-size: 11px;
  font-weight: 700;

  color: #ffffff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(201, 166, 79, .8);
  border-radius: 20px;

  box-shadow: 0 2px 7px rgba(0, 0, 0, .10);
}

@media (max-width: 480px) {
  .welcome .today-pill {
    min-height: 33px;
    padding: 6px 10px;
    font-size: 10px;
  }
}
/* MEMPERBESAR NAMA SANTRI */
#studentsPanel .student-info strong {
  font-size: 15px !important;
  line-height: 1.5;
}

@media (max-width: 600px) {
  #studentsPanel .student-info strong {
    font-size: 13px !important;
  }
}
/* STATUS KELENGKAPAN BIODATA SANTRI */
#studentsPanel .biodata-status {
  display: inline-block;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

#studentsPanel .biodata-status.complete {
  color: #187a43;
  background: #e5f7ec;
  border: 1px solid #b7e5c8;
}

#studentsPanel .biodata-status.incomplete {
  color: #b42318;
  background: #fde8e7;
  border: 1px solid #f5c2c0;
}
/* INPUT NIS OTOMATIS */
.nis-input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.nis-input-group input {
  flex: 1;
  min-width: 0;
}

.nis-input-group button {
  white-space: nowrap;
  padding: 0 14px;
}
/* ==================================================
   SPLASH SCREEN MADIN KALIGINTUNG
   Islamic Modern Premium
================================================== */

.startup-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding: 24px 18px;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255,255,255,.95),
      transparent 65%
    ),
    repeating-conic-gradient(
      from 45deg at 50% 50%,
      rgba(201,166,79,.05) 0deg 2deg,
      transparent 2deg 15deg
    ),
    linear-gradient(
      145deg,
      #f5f1e5,
      #fffdf6 48%,
      #e8f0e6
    );

  transition:
    opacity .6s ease,
    visibility .6s ease;
}

/* ORNAMEN GEOMETRIS */

.startup-splash::before,
.startup-splash::after {
  content: "";
  position: absolute;

  width: min(78vw, 430px);
  aspect-ratio: 1;

  border: 1px solid rgba(201,166,79,.28);
  border-radius: 34%;

  transform: rotate(45deg);
  pointer-events: none;
}

.startup-splash::before {
  top: -54%;
  left: -35%;

  box-shadow:
    0 0 0 12px rgba(201,166,79,.045),
    0 0 0 25px rgba(23,107,69,.035);
}

.startup-splash::after {
  bottom: -58%;
  right: -36%;

  box-shadow:
    0 0 0 12px rgba(201,166,79,.045),
    0 0 0 25px rgba(23,107,69,.035);
}

/* KONTEN UTAMA */

.splash-content {
  position: relative;
  z-index: 1;

  width: min(100%, 440px);

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  animation:
    splash-arrive 1.05s cubic-bezier(.2,.75,.25,1) both;
}

/* LOGO ASLI */

.splash-logo {
  display: block;

  width: clamp(118px, 32vw, 158px);
  height: clamp(118px, 32vw, 158px);

  object-fit: contain;
  margin-bottom: 4px;
}

/* ILUSTRASI SANTRI */

.splash-santri {
  display: block;

  width: min(73vw, 285px);
  max-height: min(34vh, 280px);

  height: auto;

  object-fit: contain;
  object-position: center;

  margin: 4px auto 10px;
  border-radius: 12px;
}

/* JUDUL MADRASAH */

.splash-title {
  margin-top: 2px;

  color: #124b32;

  font-size: clamp(17px, 4.7vw, 23px);
  font-weight: 800;

  line-height: 1.25;
  letter-spacing: .09em;
}

/* NAMA KALIGINTUNG */

.splash-subtitle {
  margin-top: 4px;

  color: #a27d2e;

  font-size: clamp(15px, 4vw, 19px);
  font-weight: 800;

  letter-spacing: .28em;
}

/* ORNAMEN GARIS EMAS */

.splash-gold-line {
  display: flex;
  align-items: center;
  justify-content: center;

  width: min(62%, 230px);
  height: 15px;

  margin-top: 8px;
}

.splash-gold-line::before,
.splash-gold-line::after {
  content: "";

  flex: 1;
  height: 1px;

  background:
    linear-gradient(90deg, transparent, #c9a64f);
}

.splash-gold-line::after {
  transform: scaleX(-1);
}

.splash-gold-line span {
  width: 7px;
  height: 7px;

  margin: 0 9px;

  border: 1px solid #c9a64f;
  transform: rotate(45deg);
}

/* MOTTO */

.splash-motto {
  margin: 5px 0 0;

  color: #66766b;
  font-size: 11px;

  letter-spacing: .025em;
}

/* TOMBOL LEWATI */

.splash-skip {
  position: absolute;
  z-index: 2;

  right: 18px;
  bottom: 18px;

  padding: 8px 15px;

  color: white;
  background: #176b45;

  border: 1px solid rgba(201,166,79,.85);
  border-radius: 22px;

  font-size: 12px;
  font-weight: 700;

  box-shadow: 0 3px 12px rgba(16,75,50,.15);
}

/* ANIMASI KELUAR */

.startup-splash.splash-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ANIMASI MASUK */

@keyframes splash-arrive {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* PENYESUAIAN HP LAYAR PENDEK */

@media (max-height: 650px) {

  .splash-logo {
    width: 105px;
    height: 105px;
  }

  .splash-santri {
    max-height: 29vh;
    width: min(58vw, 225px);
    margin-bottom: 5px;
  }

  .splash-motto {
    font-size: 10px;
  }
}

/* MENGHORMATI PENGATURAN ANIMASI PERANGKAT */

@media (prefers-reduced-motion: reduce) {

  .splash-content {
    animation: none;
  }

  .startup-splash {
    transition: none;
  }

}

/* =========================================
   SPLASH SCREEN EMERALD GOLD PREMIUM
========================================= */

.startup-splash {
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255,215,120,.28),
      transparent 48%
    ),
    repeating-conic-gradient(
      from 45deg at 50% 50%,
      rgba(255,215,120,.13) 0deg 3deg,
      transparent 3deg 15deg
    ),
    linear-gradient(
      145deg,
      #032e29 0%,
      #087653 48%,
      #052d48 100%
    );
}

/* ORNAMEN EMAS */

.startup-splash::before,
.startup-splash::after {
  border: 2px solid rgba(255,215,120,.65);

  background:
    repeating-conic-gradient(
      from 45deg,
      rgba(255,215,120,.12) 0deg 5deg,
      transparent 5deg 15deg
    );

  box-shadow:
    0 0 0 12px rgba(255,215,120,.12),
    0 0 0 26px rgba(255,255,255,.06),
    0 0 35px rgba(255,215,120,.18);

  animation: ornament-rotate 45s linear infinite;
}

/* ILUSTRASI PNG TRANSPARAN */

.splash-santri {
  width: min(78vw, 310px);
  max-height: min(38vh, 310px);

  height: auto;

  object-fit: contain;

  background: transparent;
  border-radius: 0;

  filter: drop-shadow(0 8px 15px rgba(0,0,0,.22));

  animation: santri-float 4s ease-in-out infinite;
}

/* JUDUL FONT ALGERIAN */

.splash-title,
.splash-subtitle {
  font-family:
    "Algerian",
    "Almendra SC",
    Georgia,
    serif;

  font-weight: 700;
  text-shadow:
    0 3px 0 #704817,
    0 5px 15px rgba(0,0,0,.35);
}

.splash-title {
  color: #fff1c5;
  font-size: clamp(21px, 5.5vw, 29px);
  letter-spacing: .05em;
}

.splash-subtitle {
  color: #ffd66f;
  font-size: clamp(19px, 4.8vw, 25px);
  letter-spacing: .15em;
}

.splash-motto {
  color: #fff8e8;
  text-shadow: 0 2px 5px rgba(0,0,0,.4);
}

/* GARIS EMAS */

.splash-gold-line::before,
.splash-gold-line::after {
  background: linear-gradient(
    90deg,
    transparent,
    #ffd66f
  );
}

/* TOMBOL LEWATI */

.splash-skip {
  color: #173e31;

  background: linear-gradient(
    135deg,
    #ffe39a,
    #c18b29
  );

  border: 1px solid #fff0bf;
}

/* ANIMASI ORNAMEN */

@keyframes ornament-rotate {
  from {
    transform: rotate(45deg);
  }

  to {
    transform: rotate(405deg);
  }
}

/* ANIMASI SANTRI */

@keyframes santri-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}
/* =====================================
   SPLASH SCREEN KREM - EMAS PREMIUM
===================================== */

.startup-splash {
  background:
    radial-gradient(
      circle at 50% 42%,
      #ffffff 0%,
      rgba(255, 247, 224, .85) 42%,
      transparent 75%
    ),
    linear-gradient(
      145deg,
      #fff9e9 0%,
      #f5e8c8 55%,
      #eee1bd 100%
    ) !important;
}

/* ORNAMEN GEOMETRIS EMAS */

.startup-splash::before,
.startup-splash::after {
  border: 2px solid rgba(190, 145, 48, .45);
  background: transparent;
  box-shadow:
    0 0 0 12px rgba(201,166,79,.08),
    0 0 0 26px rgba(201,166,79,.045);
}

/* ILUSTRASI SANTRI */

.splash-santri {
  background: transparent !important;
  filter: drop-shadow(0 8px 12px rgba(75, 55, 20, .18));
}

/* TULISAN MADRASAH */

.splash-title {
  color: #174b35 !important;
  text-shadow: 0 2px 2px rgba(255,255,255,.8);
}

.splash-subtitle {
  color: #a47722 !important;
  text-shadow: 0 2px 3px rgba(255,255,255,.6);
}

.splash-motto {
  color: #536653 !important;
  text-shadow: none;
}

/* TOMBOL LEWATI */

.splash-skip {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    #176b45,
    #0b4931
  ) !important;
  border: 1px solid #c9a64f;
}