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

:root {
  --ink: #123f39;
  --deep: #062f2b;
  --forest: #0b6858;
  --forest-2: #0e7a64;
  --gold: #c79c43;
  --gold-light: #fbf2dc;
  --cream: #f7f8f5;
  --line: #e6ebe8;
  --muted: #788581;
  --white: #fff;
  --blue: #3777bb;
  --purple: #7b56b6;
  --red: #c95d57;
  --shadow: 0 16px 40px rgba(16, 67, 57, .07);
}

/* Kalender Akademik: pisahkan judul kegiatan dari kategori agar tidak terlihat menyatu. */
.calendar-page-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-import-panel {
  margin-bottom: 18px;
  overflow: hidden;
}

.calendar-import-heading {
  align-items: flex-start;
  border-bottom: 1px solid #edf3ef;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 18px 20px 15px;
}

.calendar-import-heading > div {
  display: grid;
  gap: 4px;
}

.calendar-import-heading .eyebrow {
  margin-bottom: 1px;
}

.calendar-import-heading h2 {
  color: var(--ink);
  font-size: 16px;
  margin: 0;
}

.calendar-import-heading p:last-child {
  color: #7d8d85;
  font-size: 10px;
  margin: 0;
}

.calendar-import-heading > .tag {
  flex: 0 0 auto;
}

.calendar-import-panel > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 16px 20px;
}

.calendar-import-panel > summary::-webkit-details-marker {
  display: none;
}

.calendar-import-panel > summary > span {
  display: grid;
  gap: 4px;
}

.calendar-import-panel > summary strong {
  color: var(--ink);
  font-size: 13px;
}

.calendar-import-panel > summary small {
  color: #7d8d85;
  font-size: 10px;
}

.calendar-import-panel > summary > b {
  align-items: center;
  border: 1px solid #cfe3d9;
  border-radius: 50%;
  color: var(--forest);
  display: inline-flex;
  font-size: 16px;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.calendar-import-panel[open] > summary > b {
  transform: rotate(45deg);
}

.calendar-import-body {
  border-top: 1px solid #edf3ef;
  padding: 16px 20px 20px;
}

.calendar-import-body > p {
  color: #6f8078;
  font-size: 11px;
  line-height: 1.55;
  margin: 0 0 14px;
}

.calendar-import-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.calendar-import-form label {
  display: grid !important;
  flex: 1 1 320px;
  gap: 6px;
}

.calendar-import-form .calendar-file-field {
  min-width: 0;
}

.calendar-import-form label > span {
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}

.calendar-import-form input[type="file"] {
  border: 1px solid #cfe3d9;
  border-radius: 9px;
  color: #51665c;
  font-size: 11px;
  padding: 9px;
}

.calendar-import-form label small {
  color: #87958e;
  font-size: 9px;
}

.calendar-activity-table .calendar-activity-cell,
.calendar-activity-table .calendar-date-cell {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  white-space: normal;
}

.calendar-activity-table .calendar-activity-cell {
  min-width: 190px;
}

.calendar-activity-table {
  min-width: 980px;
  table-layout: fixed;
}

.calendar-activity-table th:nth-child(1),
.calendar-activity-table td:nth-child(1) { width: 14%; }
.calendar-activity-table th:nth-child(2),
.calendar-activity-table td:nth-child(2) { width: 25%; }
.calendar-activity-table th:nth-child(3),
.calendar-activity-table td:nth-child(3) { width: 15%; }
.calendar-activity-table th:nth-child(4),
.calendar-activity-table td:nth-child(4) { width: 12%; }
.calendar-activity-table th:nth-child(5),
.calendar-activity-table td:nth-child(5) { width: 24%; }
.calendar-activity-table th:nth-child(6),
.calendar-activity-table td:nth-child(6) { width: 10%; }

.calendar-activity-table td {
  vertical-align: top;
}

.calendar-activity-table tbody tr.is-completed {
  opacity: .56;
  filter: grayscale(.16);
}

.calendar-activity-table tbody tr.is-completed:hover {
  opacity: .76;
}

.calendar-activity-table tbody tr.is-running {
  background: #f0fbf5;
  box-shadow: inset 4px 0 #48ad83;
}

.calendar-activity-table tbody tr.is-upcoming {
  background: #f3f8ff;
  box-shadow: inset 4px 0 #76a9dc;
}

.calendar-activity-table tbody tr.is-cancelled {
  background: #fff7f5;
  box-shadow: inset 4px 0 #d98b7e;
}

.calendar-status-label {
  border: 1px solid #dce5e0;
  border-radius: 999px;
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 8px;
  white-space: nowrap;
}

.calendar-status-label.is-completed {
  background: #eef2f0;
  color: #718079;
}

.calendar-status-label.is-running {
  background: #e3f7ec;
  border-color: #c4e9d3;
  color: #177957;
}

.calendar-status-label.is-upcoming {
  background: #e8f1ff;
  border-color: #c9dcf4;
  color: #336b9e;
}

.calendar-status-label.is-cancelled {
  background: #fff0ed;
  border-color: #f0d0c9;
  color: #a75b4d;
}

.calendar-activity-table td:nth-child(3),
.calendar-activity-table td:nth-child(4),
.calendar-activity-table td:nth-child(5),
.calendar-activity-table td:nth-child(6) {
  white-space: normal;
}

.calendar-activity-table .calendar-activity-cell strong {
  line-height: 1.35;
}

.calendar-activity-table .calendar-activity-cell small,
.calendar-activity-table .calendar-date-cell small {
  color: #82928a;
  display: block !important;
  font-size: 9px;
  line-height: 1.35;
  margin: 0;
}

.calendar-activity-table .calendar-activity-cell small {
  color: #0b806a;
  font-weight: 600;
}

@media (max-width: 760px) {
  .calendar-import-heading {
    flex-direction: column;
  }

  .calendar-import-form .button {
    width: 100%;
  }
}

.principal-page-heading { align-items:flex-end; }.principal-page-heading .tag { margin-bottom:7px; }.principal-dashboard-grid { align-items:stretch; }.principal-panel { min-width:0; }.principal-panel .panel-heading-link { color:var(--forest); font-size:10px; font-weight:700; text-decoration:none; white-space:nowrap; }.principal-panel .panel-heading-link:hover { text-decoration:underline; }.principal-table { min-width:620px; }.principal-table td { vertical-align:middle; }.principal-progress-copy { color:var(--ink); display:block; font-size:10px; font-weight:700; margin-bottom:5px; }.principal-progress { background:#e7eee9; border-radius:99px; display:block; height:6px; min-width:100px; overflow:hidden; }.principal-progress i { background:linear-gradient(90deg,#168466,#6eb98a); border-radius:inherit; display:block; height:100%; }.principal-agenda-list { display:flex; flex-direction:column; gap:8px; }.principal-agenda-item { align-items:center; background:#f8fbf9; border:1px solid #e6eee9; border-radius:10px; display:flex; gap:11px; padding:11px 12px; }.principal-agenda-icon { align-items:center; background:#e5f6eb; border-radius:9px; color:#167c61; display:flex; flex:0 0 auto; font-size:18px; height:32px; justify-content:center; width:32px; }.principal-agenda-item div { min-width:0; }.principal-agenda-item strong,.principal-agenda-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.principal-agenda-item strong { color:var(--ink); font-size:11px; }.principal-agenda-item small { color:var(--muted); font-size:9px; margin-top:3px; }.principal-summary-list { display:grid; gap:8px; grid-template-columns:1fr 1fr; }.principal-summary-list div { align-items:center; background:#f8fbf9; border:1px solid #e6eee9; border-radius:9px; display:flex; justify-content:space-between; padding:12px 13px; }.principal-summary-list span { color:#718079; font-size:10px; }.principal-summary-list strong { color:var(--ink); font-size:17px; }.principal-summary-list .is-highlight { background:#edf9f2; border-color:#cfe9da; }.principal-summary-list .is-highlight strong { color:#087958; }.principal-level-panel { margin-top:20px; }.principal-focus-panel { margin-top:20px; }.principal-focus-panel .workflow-grid a { color:inherit; text-decoration:none; }.principal-focus-panel .workflow-grid a:hover { border-color:#9ac9b0; box-shadow:0 8px 20px rgba(9,84,62,.08); transform:translateY(-2px); }.principal-empty { border:1px dashed #dce8e1; border-radius:10px; color:#83918b; font-size:11px; padding:25px; text-align:center; }
@media (max-width:760px) { .principal-page-heading { align-items:flex-start; flex-direction:column; gap:12px; }.principal-summary-list { grid-template-columns:1fr; } }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 14px;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.eyebrow {
  color: var(--forest);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

/* Login */
.login-page {
  background: #f6f8f5;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.login-layout {
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(460px, 1.08fr);
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.login-visual {
  align-items: center;
  background: linear-gradient(145deg, #073b35, #075d4e 55%, #0b6a59);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 70px clamp(48px, 8vw, 130px);
  position: relative;
}

.login-visual::after {
  background-image: linear-gradient(180deg, rgba(4, 63, 54, .14), rgba(1, 35, 31, .48)), url('../assets/images/mosque-login-bg.png');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  inset: 0;
  opacity: .72;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.islamic-pattern {
  background-image: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1px), linear-gradient(45deg, transparent 48%, rgba(211, 177, 87, .09) 49%, rgba(211, 177, 87, .09) 51%, transparent 52%);
  background-size: 22px 22px, 42px 42px;
  inset: 0;
  opacity: .6;
  position: absolute;
}

.login-visual>*:not(.islamic-pattern) {
  position: relative;
  z-index: 1;
}

.login-brand-mark,
.brand-emblem {
  align-items: center;
  background: #fff;
  border: 1px solid var(--gold);
  color: #e0ba57;
  display: inline-flex;
  font-family: Georgia, serif;
  justify-content: center;
  object-fit: contain;
  padding: 2px;
}

.login-brand-mark {
  align-self: flex-start;
  border-radius: 14px;
  font-size: 29px;
  height: 59px;
  margin-bottom: 34px;
  width: 59px;
}

.login-slider {
  margin: 0 auto;
  max-width: 610px;
  position: relative;
  width: 100%;
}

.login-slides {
  min-height: 530px;
  position: relative;
}

.login-slide {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate3d(26px, 0, 0);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .9s;
  visibility: hidden;
  will-change: opacity, transform;
}

.login-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
  visibility: visible;
}

.login-visual h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.13;
  margin: 0 0 22px;
  max-width: 610px;
}

.login-visual-copy {
  color: rgba(255, 255, 255, .73);
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  max-width: 520px;
}

.ayah-card {
  border-left: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 58px;
  padding-left: 20px;
  max-width: 440px;
}

.ayah-arabic {
  color: #f5d98a;
  font-family: Georgia, serif;
  font-size: 22px;
}

.ayah-translation {
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
  line-height: 1.6;
}

.ayah-card small {
  color: #ddbb66;
  font-size: 11px;
  letter-spacing: .08em;
}

.slider-controls {
  align-items: center;
  display: flex;
  gap: 14px;
  margin-top: 14px;
  position: relative;
  z-index: 3;
}

.slider-arrow {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  height: 32px;
  width: 32px;
}

.slider-arrow:hover,
.slider-arrow:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--deep);
  outline: 0;
}

.slider-dots {
  display: flex;
  gap: 6px;
}

.slider-dot {
  background: rgba(255, 255, 255, .32);
  border: 0;
  border-radius: 10px;
  height: 5px;
  padding: 0;
  transition: .25s;
  width: 18px;
}

.slider-dot.is-active {
  background: var(--gold);
  width: 31px;
}

.slider-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.login-panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 7%;
}

.login-card {
  background: var(--white);
  border: 1px solid #edf0ec;
  border-radius: 20px;
  box-shadow: var(--shadow);
  max-width: 510px;
  padding: 34px clamp(24px, 4vw, 46px);
  width: 100%;
}

.login-heading {
  margin-bottom: 20px;
  text-align: center;
}

.heading-ornament {
  color: var(--gold);
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
}

.login-heading h2 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  letter-spacing: -.03em;
  margin: 0 0 6px;
}

.login-heading>p:last-child {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.mobile-logo {
  align-items: center;
  display: none;
  gap: 10px;
  margin-bottom: 22px;
}

.brand-emblem {
  border-radius: 10px;
  font-size: 19px;
  height: 40px;
  width: 40px;
}

.mobile-logo strong,
.mobile-logo small {
  display: block;
}

.mobile-logo strong {
  font-size: 13px;
  letter-spacing: .12em;
}

.mobile-logo small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.login-form>label {
  color: #39534e;
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
}

.input-wrap {
  align-items: center;
  border: 1px solid #dfe7e2;
  border-radius: 9px;
  display: flex;
  transition: .2s;
}

.input-wrap:focus-within {
  border-color: var(--forest-2);
  box-shadow: 0 0 0 3px rgba(14, 122, 100, .1);
}

.input-icon {
  color: var(--forest);
  font-size: 20px;
  padding-left: 14px;
  width: 39px;
}

.input-wrap input {
  background: transparent;
  border: 0;
  color: var(--ink);
  outline: 0;
  padding: 10px 13px 10px 7px;
  width: 100%;
}

.input-wrap input::placeholder {
  color: #a4afab;
}

.input-action {
  background: transparent;
  border: 0;
  color: var(--forest);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  margin-right: 10px;
  padding: 6px 4px;
  white-space: nowrap;
}

.input-action:hover {
  color: var(--deep);
  text-decoration: underline;
}

.form-options {
  align-items: center;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin: 5px 0 12px;
}

.form-options a {
  color: var(--forest);
  font-weight: 600;
}

.checkbox-label {
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  gap: 7px;
  user-select: none;
}

.checkbox-label input {
  appearance: none;
  background: #fff;
  border: 1px solid #cddbd4;
  border-radius: 4px;
  cursor: pointer;
  height: 16px;
  margin: 0;
  position: relative;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
  width: 16px;
}

.checkbox-label input:hover {
  border-color: var(--forest-2);
}

.checkbox-label input:focus-visible {
  border-color: var(--forest-2);
  box-shadow: 0 0 0 3px rgba(14, 122, 100, .12);
  outline: 0;
}

.checkbox-label input:checked {
  background: var(--forest);
  border-color: var(--forest);
}

.checkbox-label input:checked::after {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  content: '';
  height: 8px;
  left: 5px;
  position: absolute;
  top: 2px;
  transform: rotate(45deg);
  width: 4px;
}

.captcha-box {
  background: #f8faf8;
  border: 1px solid #e5ece8;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
  padding: 10px;
}

.captcha-box label {
  color: #39534e;
  display: block;
  font-size: 12px;
  font-weight: 700;
}

.captcha-box small {
  color: var(--muted);
  display: block;
  font-size: 10px;
  margin-top: 3px;
}

.captcha-challenge {
  align-items: center;
  display: flex;
  gap: 9px;
}

.captcha-challenge span {
  background: #e8f3ed;
  border: 1px dashed #82af9e;
  border-radius: 6px;
  color: var(--forest);
  flex: 1;
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 8px;
  text-align: center;
}

.captcha-challenge input {
  border: 1px solid #dfe7e2;
  border-radius: 6px;
  color: var(--ink);
  outline: 0;
  padding: 8px 9px;
  width: 105px;
}

.captcha-challenge input:focus {
  border-color: var(--forest-2);
  box-shadow: 0 0 0 3px rgba(14, 122, 100, .1);
}

.button {
  align-items: center;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  font-weight: 700;
  gap: 12px;
  justify-content: center;
  padding: 11px 18px;
}

.button-primary {
  background: var(--forest);
  box-shadow: 0 8px 16px rgba(11, 104, 88, .18);
  color: white;
}

.button-primary:hover {
  background: var(--deep);
}

.button-full {
  justify-content: space-between;
  width: 100%;
}

.button-outline {
  background: #fff;
  border: 1px solid #dce6e1;
  color: var(--forest);
}

.mobile-app-promo {
  align-items: center;
  background: #f7f8f6;
  border: 1px solid #e7e9e5;
  border-radius: 15px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 14px;
  min-height: 132px;
  overflow: hidden;
  padding: 13px 14px;
  position: relative;
}

.mobile-app-promo::after {
  background: #e6e8e4;
  border-radius: 50%;
  content: '';
  height: 180px;
  position: absolute;
  right: -84px;
  top: -106px;
  transform: rotate(20deg);
  width: 260px;
}

.mobile-app-promo-copy,
.mobile-app-promo-scan {
  position: relative;
  z-index: 1;
}

.mobile-app-promo-copy {
  min-width: 0;
}

.mobile-app-kicker {
  color: var(--forest);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.mobile-app-promo h3 {
  color: #202426;
  font-size: clamp(20px, 2.8vw, 24px);
  letter-spacing: -.045em;
  line-height: .98;
  margin: 0;
}

.mobile-app-promo-note {
  color: #68716d;
  font-size: 10px;
  line-height: 1.5;
  margin: 6px 0 8px;
}

.mobile-app-platforms {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mobile-app-store {
  align-items: center;
  background: #202226;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  gap: 8px;
  min-width: 116px;
  padding: 7px 12px 7px 8px;
  text-decoration: none;
}

.mobile-app-store:hover {
  background: #0c6a58;
  color: #fff;
}

.mobile-app-store-icon {
  align-items: center;
  background: #00a7e8;
  border-radius: 50%;
  display: flex;
  flex: 0 0 auto;
  font-size: 9px;
  height: 25px;
  justify-content: center;
  width: 25px;
}

.mobile-app-store-icon svg {
  display: block;
  fill: currentColor;
  height: 15px;
  width: 15px;
}

.mobile-app-store-icon-android svg {
  height: 16px;
  width: 16px;
}

.mobile-app-store small,
.mobile-app-store strong {
  display: block;
  line-height: 1;
}

.mobile-app-store small {
  font-size: 6px;
  letter-spacing: .03em;
  opacity: .75;
}

.mobile-app-store strong {
  font-size: 10px;
  margin-top: 3px;
}

.mobile-app-store-disabled {
  background: #8e9591;
  cursor: default;
  opacity: .78;
}

.mobile-app-store-disabled:hover {
  background: #8e9591;
}

.mobile-app-store-ios .mobile-app-store-icon {
  background: #52565a;
}

.mobile-app-promo-scan {
  align-items: center;
  display: flex;
  flex: 0 0 84px;
  flex-direction: column;
  gap: 5px;
}

.mobile-app-scan-label {
  background: #202226;
  border-radius: 4px;
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 4px 10px;
}

.mobile-app-qr {
  background-color: #fff;
  background-image: linear-gradient(90deg, #16191a 12%, transparent 12%, transparent 24%, #16191a 24%, #16191a 36%, transparent 36%, transparent 49%, #16191a 49%, #16191a 63%, transparent 63%, transparent 77%, #16191a 77%, #16191a 91%, transparent 91%), linear-gradient(#16191a 12%, transparent 12%, transparent 24%, #16191a 24%, #16191a 36%, transparent 36%, transparent 49%, #16191a 49%, #16191a 63%, transparent 63%, transparent 77%, #16191a 77%, #16191a 91%, transparent 91%);
  background-size: 11px 11px;
  border: 6px solid #fff;
  box-shadow: 0 1px 5px rgba(29, 42, 36, .14);
  height: 64px;
  position: relative;
  width: 64px;
}

.mobile-app-qr::before,
.mobile-app-qr::after,
.mobile-app-qr i:first-child {
  background: #fff;
  border: 4px solid #16191a;
  content: '';
  height: 17px;
  position: absolute;
  width: 17px;
}

.mobile-app-qr::before {
  left: 0;
  top: 0;
}

.mobile-app-qr::after {
  right: 0;
  top: 0;
}

.mobile-app-qr i:first-child {
  bottom: 0;
  display: block;
  left: 0;
}

.mobile-app-qr i {
  display: none;
}

.mobile-app-promo-scan > small {
  color: #707975;
  font-size: 8px;
  text-align: center;
}

.mobile-app-link {
  color: var(--forest);
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  gap: 6px;
  margin-top: 7px;
  text-decoration: none;
}

.mobile-app-link:hover {
  color: var(--deep);
  text-decoration: underline;
}

.mobile-app-link-disabled {
  color: #8a9991;
  cursor: default;
}

.mobile-app-link-disabled:hover {
  color: #8a9991;
  text-decoration: none;
}

.alert {
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 16px;
  padding: 11px 13px;
}

.alert-error {
  background: #fff0ef;
  color: #a54843;
}

.alert-success {
  background: #eef9f2;
  color: #28754b;
}

.login-footer {
  color: #a0aaa6;
  font-size: 11px;
  margin: 19px 0 0;
  text-align: center;
}

.login-footer span {
  color: var(--gold);
}

.copyright {
  color: #9aa6a1;
  font-size: 11px;
  margin: 14px 0 0;
}

/* Forgot password */
.forgot-page {
  align-items: center;
  background: #f2f5ff;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 28px 15px;
}

.forgot-card {
  background: #fff;
  box-shadow: 0 12px 35px rgba(53, 66, 137, .08);
  max-width: 530px;
  min-height: 570px;
  padding: 36px 48px 42px;
  width: 100%;
}

.forgot-brand {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  gap: 10px;
  margin-bottom: 46px;
}

.forgot-brand .brand-emblem {
  background: var(--deep);
  border-radius: 10px;
  height: 40px;
  width: 40px;
}

.forgot-brand strong,
.forgot-brand small {
  display: block;
}

.forgot-brand strong {
  font-size: 13px;
  letter-spacing: .1em;
}

.forgot-brand small {
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
}

.forgot-heading {
  margin-bottom: 28px;
}

.forgot-heading h1 {
  color: #202d49;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  letter-spacing: -.03em;
  margin: 0 0 9px;
}

.forgot-heading p:last-child {
  color: #7e8796;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

.forgot-form {
  display: flex;
  flex-direction: column;
}

.role-choice {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 42px;
  margin: 0 0 27px;
  padding: 0;
}

.role-choice legend {
  color: #3c465a;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
  width: 100%;
}

.role-choice label {
  align-items: center;
  color: #202d49;
  display: flex;
  font-size: 13px;
  gap: 8px;
}

.role-choice input {
  accent-color: #514bb4;
  height: 19px;
  width: 19px;
}

.forgot-notice {
  background: #f0f0f0;
  border: 1px solid #9b9b9b;
  border-radius: 4px;
  color: #7b8490;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 3px;
  line-height: 1.65;
  margin-bottom: 20px;
  padding: 13px 19px;
}

.forgot-notice strong {
  color: #727b87;
  font-weight: 500;
}

.forgot-form>label {
  color: #202d49;
  font-size: 12px;
  margin-bottom: 10px;
}

.forgot-form>input {
  border: 1px solid #679aff;
  color: #202d49;
  outline: 0;
  padding: 15px 19px;
  margin-bottom: 23px;
  width: 100%;
}

.forgot-form>input:focus {
  box-shadow: 0 0 0 3px rgba(103, 154, 255, .15);
}

.button-forgot {
  background: #514bb4;
  border-radius: 15px;
  color: #fff;
  min-height: 54px;
  letter-spacing: .02em;
  width: 100%;
}

.button-forgot:hover {
  background: #423c9f;
}

.forgot-back {
  color: #202d49;
  display: inline-block;
  font-size: 13px;
  margin-top: 13px;
}

.forgot-back:hover {
  color: #514bb4;
}

.forgot-login-page .forgot-visual-copy {
  max-width: 610px;
  width: 100%;
}

.forgot-login-page .forgot-heading {
  margin-bottom: 30px;
}

.forgot-login-page .role-choice {
  gap: 28px;
  margin-bottom: 22px;
  width: 100%;
}

.forgot-login-page .role-choice legend {
  color: #39534e;
}

.forgot-login-page .role-choice label {
  color: var(--ink);
}

.forgot-login-page .role-choice input {
  accent-color: var(--forest);
}

.forgot-login-page .forgot-notice {
  background: #f8faf8;
  border-color: #e1ebe6;
  border-radius: 9px;
  color: var(--muted);
  padding: 12px 14px;
}

.forgot-login-page .forgot-notice strong {
  color: var(--ink);
}

.forgot-login-page .forgot-form>label {
  color: #39534e;
  font-weight: 700;
}

.forgot-login-page .forgot-form>input {
  border: 1px solid #dfe7e2;
  border-radius: 9px;
  color: var(--ink);
  margin-bottom: 18px;
  padding: 13px;
}

.forgot-login-page .forgot-form>input:focus {
  border-color: var(--forest-2);
  box-shadow: 0 0 0 3px rgba(14, 122, 100, .1);
}

.forgot-login-page .button-forgot {
  background: var(--forest);
  border-radius: 8px;
  min-height: 47px;
}

.forgot-login-page .button-forgot:hover {
  background: var(--deep);
}

.forgot-login-page .forgot-back {
  color: var(--forest);
  display: block;
  font-weight: 600;
  margin-top: 20px;
  text-align: center;
}

.forgot-login-page .forgot-back:hover {
  color: var(--deep);
}

/* Admin */
.admin-page {
  background: #f5f7f5;
}

.admin-shell {
  display: block;
  min-height: 100vh;
}

.sidebar {
  background: var(--deep);
  color: rgba(255, 255, 255, .72);
  display: flex;
  flex-direction: column;
  height: 100vh;
  left: 0;
  overflow-y: auto;
  padding: 24px 14px 18px;
  position: fixed;
  top: 0;
  width: 244px;
  z-index: 40;
}

.sidebar-brand {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  gap: 11px;
  padding: 0 12px 24px;
}

.sidebar-brand .brand-emblem {
  font-size: 17px;
  height: 39px;
  width: 39px;
}

.sidebar-brand strong,
.sidebar-brand small {
  display: block;
}

.sidebar-brand strong {
  color: #fff;
  font-size: 17px;
  letter-spacing: .12em;
}

.sidebar-brand small {
  color: rgba(255, 255, 255, .5);
  font-size: 10px;
  margin-top: 2px;
}

.sidebar-context {
  align-items: center;
  background: rgba(255, 255, 255, .06);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  margin: 22px 3px 24px;
  padding: 12px;
}

.context-dot {
  background: #d8b354;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(216, 179, 84, .12);
  height: 7px;
  width: 7px;
}

.sidebar-context small,
.sidebar-context strong {
  display: block;
}

.sidebar-context small {
  color: rgba(255, 255, 255, .42);
  font-size: 8px;
  letter-spacing: .12em;
}

.sidebar-context strong {
  color: #fff;
  font-size: 11px;
  margin-top: 4px;
}

.nav-label {
  color: rgba(255, 255, 255, .34);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  margin: 0 13px 9px;
}

.nav-label-spaced {
  margin-top: 26px;
}

.sidebar-nav {
  flex: 1;
}

.nav-item {
  align-items: center;
  border-radius: 8px;
  display: flex;
  font-size: 12px;
  gap: 11px;
  margin: 3px 0;
  padding: 11px 12px;
  transition: .2s;
}

.nav-item:hover,
.nav-item.active {
  background: rgba(80, 196, 158, .17);
  color: #fff;
}

.nav-item.active {
  box-shadow: inset 3px 0 var(--gold);
}

.nav-symbol {
  color: #a6d8c5;
  font-size: 17px;
  text-align: center;
  width: 17px;
}

.nav-badge {
  background: #d3a644;
  border-radius: 10px;
  color: var(--deep);
  font-size: 9px;
  font-weight: 700;
  margin-left: auto;
  padding: 2px 6px;
}

.sidebar-bottom {
  margin-top: 25px;
}

.help-card {
  align-items: center;
  background: rgba(255, 255, 255, .05);
  border-radius: 9px;
  display: flex;
  gap: 9px;
  margin-bottom: 15px;
  padding: 12px 10px;
}

.help-card>span {
  color: #dfbb61;
  font-size: 22px;
}

.help-card strong,
.help-card small {
  display: block;
}

.help-card strong {
  color: #fff;
  font-size: 10px;
}

.help-card small {
  color: rgba(255, 255, 255, .42);
  font-size: 9px;
  margin-top: 3px;
}

.logout-link {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .6);
  display: flex;
  font-size: 11px;
  gap: 10px;
  padding: 19px 12px 0;
}

.logout-link:hover {
  color: #fff;
}

.main-panel {
  margin-left: 244px;
  min-width: 0;
  width: calc(100% - 244px);
}

.topbar {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 76px;
  justify-content: space-between;
  padding: 0 clamp(22px, 3vw, 42px);
}

.topbar-search {
  align-items: center;
  background: #f7f9f7;
  border: 1px solid #edf1ee;
  border-radius: 8px;
  color: #8e9c96;
  display: flex;
  gap: 9px;
  max-width: 275px;
  padding: 0 12px;
  width: 100%;
}

.topbar-search span {
  font-size: 23px;
}

.topbar-search input {
  background: transparent;
  border: 0;
  color: var(--ink);
  outline: 0;
  padding: 10px 0;
  width: 100%;
}

.topbar-actions {
  align-items: center;
  display: flex;
  gap: 19px;
}

.icon-button {
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 22px;
  position: relative;
}

.icon-button i {
  background: #d25c58;
  border: 2px solid #fff;
  border-radius: 50%;
  color: white;
  font-size: 8px;
  font-style: normal;
  padding: 2px 4px;
  position: absolute;
  right: -7px;
  top: -5px;
}

.parent-topbar-tool {
  position: relative;
}

.parent-notification-popover {
  background: #fff;
  border: 1px solid #dce9e2;
  border-radius: 13px;
  box-shadow: 0 18px 45px rgba(16, 67, 57, .18);
  position: absolute;
  right: -8px;
  top: calc(100% + 13px);
  width: 320px;
  z-index: 90;
}

.parent-notification-popover[hidden],
.parent-search-backdrop[hidden] {
  display: none;
}

.parent-popover-heading {
  align-items: flex-start;
  border-bottom: 1px solid #edf2ef;
  display: flex;
  justify-content: space-between;
  padding: 14px 15px 11px;
}

.parent-popover-heading strong,
.parent-popover-heading small {
  display: block;
}

.parent-popover-heading strong {
  color: #174c42;
  font-size: 12px;
}

.parent-popover-heading small {
  color: #829389;
  font-size: 9px;
  margin-top: 4px;
}

.parent-popover-heading > button {
  background: transparent;
  border: 0;
  color: #829389;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
}

.parent-notification-list {
  max-height: 330px;
  overflow-y: auto;
  padding: 5px 8px;
}

.parent-notification-item {
  align-items: flex-start;
  border-bottom: 1px solid #f0f4f1;
  display: flex;
  gap: 9px;
  padding: 10px 7px;
}

.parent-notification-item:last-child {
  border-bottom: 0;
}

.parent-notification-item:hover {
  background: #f6fbf8;
  border-radius: 8px;
}

.parent-notification-icon,
.parent-notification-empty > span {
  align-items: center;
  background: #e6f5ec;
  border-radius: 8px;
  color: #27845c;
  display: inline-flex;
  flex: 0 0 auto;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.parent-notification-item > span:last-child {
  min-width: 0;
}

.parent-notification-item strong,
.parent-notification-item small,
.parent-notification-item em {
  display: block;
}

.parent-notification-item strong {
  color: #365c4d;
  font-size: 10px;
}

.parent-notification-item small {
  color: #71847a;
  font-size: 9px;
  line-height: 1.45;
  margin-top: 3px;
  max-height: 27px;
  overflow: hidden;
}

.parent-notification-item em {
  color: #9aa9a0;
  font-size: 8px;
  font-style: normal;
  margin-top: 4px;
}

.parent-notification-empty {
  align-items: center;
  display: flex;
  gap: 9px;
  padding: 15px 7px;
}

.parent-notification-empty p {
  margin: 0;
}

.parent-notification-empty strong,
.parent-notification-empty small {
  display: block;
}

.parent-notification-empty strong {
  color: #365c4d;
  font-size: 10px;
}

.parent-notification-empty small {
  color: #829389;
  font-size: 9px;
  margin-top: 3px;
}

.parent-notification-clear {
  background: #f4faf6;
  border: 0;
  border-top: 1px solid #edf2ef;
  color: #27845c;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  padding: 10px;
  width: 100%;
}

.parent-search-backdrop {
  align-items: flex-start;
  background: rgba(8, 34, 26, .58);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 90px 18px 20px;
  position: fixed;
  z-index: 150;
}

.parent-search-dialog {
  background: #fff;
  border: 1px solid #dbe8e0;
  border-radius: 15px;
  box-shadow: 0 24px 70px rgba(13, 53, 40, .25);
  max-height: calc(100vh - 120px);
  max-width: 540px;
  overflow: hidden;
  width: 100%;
}

.parent-search-input {
  align-items: center;
  background: #f5faf7;
  border: 1px solid #dceae2;
  border-radius: 9px;
  color: #27845c;
  display: flex;
  gap: 8px;
  margin: 13px 15px 9px;
  padding: 9px 11px;
}

.parent-search-input input {
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  outline: 0;
  width: 100%;
}

.parent-search-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 0 8px 8px;
}

.parent-search-results a {
  align-items: center;
  border-bottom: 1px solid #f0f4f1;
  display: flex;
  gap: 10px;
  padding: 10px 8px;
}

.parent-search-results a:hover {
  background: #f4faf6;
  border-radius: 8px;
}

.parent-search-result-icon {
  align-items: center;
  background: #e5f2ff;
  border-radius: 7px;
  color: #347cc6;
  display: inline-flex;
  flex: 0 0 auto;
  height: 27px;
  justify-content: center;
  width: 27px;
}

.parent-search-results a > span:nth-child(2) {
  min-width: 0;
}

.parent-search-results strong,
.parent-search-results small {
  display: block;
}

.parent-search-results strong {
  color: #365c4d;
  font-size: 10px;
}

.parent-search-results small {
  color: #829389;
  font-size: 9px;
  margin-top: 3px;
}

.parent-search-results b {
  color: #27845c;
  font-size: 16px;
  margin-left: auto;
}

.parent-search-no-result {
  color: #829389;
  font-size: 10px;
  margin: 15px;
  text-align: center;
}

.parent-search-open {
  overflow: hidden;
}

.topbar-divider {
  background: var(--line);
  height: 30px;
  width: 1px;
}

.profile-menu {
  align-items: center;
  display: flex;
  gap: 9px;
}

.profile-copy strong,
.profile-copy small {
  display: block;
}

.profile-copy strong {
  color: var(--ink);
  font-size: 11px;
}

.profile-copy small {
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}

.chevron {
  color: var(--muted);
}

.avatar {
  align-items: center;
  background: #dbf0e7;
  border-radius: 50%;
  color: var(--forest);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  height: 37px;
  justify-content: center;
  width: 37px;
}

.avatar-green {
  background: #d6ece3;
}

.avatar-small {
  font-size: 8px;
  height: 25px;
  margin-right: 7px;
  vertical-align: middle;
  width: 25px;
}

.avatar-pink {
  background: #f7dfdf;
  color: #ad5d5b;
}

.avatar-blue {
  background: #dbeafa;
  color: #3971a6;
}

.mobile-menu {
  background: none;
  border: 0;
  color: var(--forest);
  display: none;
  font-size: 20px;
  padding: 4px;
}

.content {
  margin: 0 auto;
  max-width: 1500px;
  padding: 34px clamp(22px, 3vw, 43px) 46px;
}

.page-heading {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 27px;
}

.page-heading h1 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 29px;
  letter-spacing: -.035em;
  margin: 0 0 8px;
}

.page-subtitle {
  color: var(--muted);
  margin: 0;
}

.wave {
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: 20px;
}

.stat-grid {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 22px;
}

.stat-card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  gap: 13px;
  min-height: 125px;
  overflow: hidden;
  padding: 20px;
  position: relative;
}

.stat-icon {
  align-items: center;
  border-radius: 10px;
  display: flex;
  flex: 0 0 auto;
  font-size: 25px;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.stat-card>div:nth-child(2) {
  position: relative;
  z-index: 1;
}

.stat-card span {
  color: var(--muted);
  display: block;
  font-size: 11px;
}

.stat-card strong {
  color: var(--ink);
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 29px;
  line-height: 1.2;
  margin: 4px 0;
}

.stat-card small {
  color: #9aa6a1;
  font-size: 9px;
}

.stat-card small b {
  color: #359267;
  font-weight: 700;
}

.stat-green .stat-icon {
  background: #e3f4eb;
  color: #279166;
}

.stat-blue .stat-icon {
  background: #e8f0fb;
  color: #4b81c1;
}

.stat-gold .stat-icon {
  background: #fff4df;
  color: #c58d27;
}

.stat-purple .stat-icon {
  background: #f0e8fc;
  color: #8359b8;
}

.stat-spark {
  border: 2px solid;
  border-color: currentColor transparent transparent;
  border-radius: 50%;
  bottom: -31px;
  height: 100px;
  opacity: .15;
  position: absolute;
  right: -24px;
  transform: rotate(-15deg);
  width: 145px;
}

.spark-green {
  color: #3a9c77;
}

.spark-blue {
  color: #4b81c1;
}

.spark-gold {
  color: #c58d27;
}

.spark-purple {
  color: #8359b8;
}

.dashboard-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1.22fr 1fr;
  margin-bottom: 20px;
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
}

.panel-heading {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.panel-heading h2 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  letter-spacing: -.025em;
  margin: 0;
}

.panel-heading a {
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  margin-top: 7px;
}

.progress-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.class-avatar {
  align-items: center;
  background: #e1f3e9;
  border-radius: 8px;
  color: var(--forest);
  display: flex;
  font-size: 11px;
  font-weight: 700;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.class-avatar.blue {
  background: #e5effb;
  color: #3977b8;
}

.class-avatar.gold {
  background: #fff2dd;
  color: #b17b20;
}

.class-avatar.purple {
  background: #f1eafa;
  color: #8059af;
}

.progress-name {
  flex: 0 0 155px;
}

.progress-name strong,
.progress-name small {
  display: block;
}

.progress-name strong {
  color: var(--ink);
  font-size: 11px;
}

.progress-name small {
  color: var(--muted);
  font-size: 9px;
  margin-top: 4px;
}

.progress-meter {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 9px;
}

.progress-meter>div {
  background: #e8eeeb;
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
  width: 100%;
}

.progress-meter span {
  background: var(--forest-2);
  border-radius: 4px;
  display: block;
  height: 100%;
}

.progress-meter .meter-warning {
  background: #d39b34;
}

.progress-meter strong {
  color: var(--ink);
  font-size: 10px;
}

.status-pill {
  border-radius: 5px;
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 5px 8px;
  white-space: nowrap;
}

.status-excellent {
  background: #e5f4e9;
  color: #31845c;
}

.status-good {
  background: #e8f4ed;
  color: #43855e;
}

.status-fair {
  background: #fff2d9;
  color: #be8123;
}

.status-review {
  background: #fff0df;
  color: #bd7b1e;
}

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

.agenda-item {
  align-items: center;
  border-bottom: 1px solid #edf1ee;
  display: flex;
  gap: 10px;
  padding: 10px 0;
}

.agenda-item:last-child {
  border-bottom: 0;
}

.agenda-icon {
  align-items: center;
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  font-size: 18px;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.agenda-icon.green {
  background: #e4f5eb;
  color: #30936b;
}

.agenda-icon.blue {
  background: #e7f0fb;
  color: #3f80c5;
}

.agenda-icon.gold {
  background: #fff1dc;
  color: #c28a2c;
}

.agenda-item>div {
  flex: 1;
  min-width: 0;
}

.agenda-item strong,
.agenda-item small {
  display: block;
}

.agenda-item strong {
  color: var(--ink);
  font-size: 10px;
}

.agenda-item small {
  color: var(--muted);
  font-size: 9px;
  margin-top: 4px;
}

.tag {
  border-radius: 5px;
  font-size: 8px;
  font-weight: 700;
  padding: 5px 7px;
}

.tag-green {
  background: #e5f4e9;
  color: #31845c;
}

.tag-blue {
  background: #e6f0fc;
  color: #3979ba;
}

.tag-gold {
  background: #fff1dd;
  color: #b57d20;
}

.lower-grid {
  grid-template-columns: 1.35fr .87fr;
}

.table-wrap {
  overflow-x: auto;
}

.activity-panel table {
  border-collapse: collapse;
  min-width: 560px;
  width: 100%;
}

.activity-panel th {
  color: #a0aba7;
  font-size: 9px;
  font-weight: 600;
  padding: 0 8px 10px;
  text-align: left;
}

.activity-panel td {
  border-top: 1px solid #eff2f0;
  color: #75827d;
  font-size: 10px;
  padding: 12px 8px;
  white-space: nowrap;
}

.activity-panel td strong {
  color: var(--ink);
  font-size: 10px;
  vertical-align: middle;
}

.week-chip {
  background: #f2f7f4;
  border-radius: 5px;
  color: var(--forest);
  font-size: 9px;
  font-weight: 700;
  padding: 6px 8px;
}

.focus-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.focus-item {
  align-items: center;
  border-bottom: 1px solid #edf1ee;
  display: flex;
  gap: 12px;
  padding: 11px 0;
}

.focus-item:last-child {
  border-bottom: 0;
}

.focus-number {
  color: var(--forest);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 21px;
}

.focus-item>div {
  flex: 1;
}

.focus-item strong,
.focus-item small {
  display: block;
}

.focus-item strong {
  color: var(--ink);
  font-size: 11px;
}

.focus-item small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
  margin-top: 3px;
}

.focus-arrow {
  color: var(--forest);
}

.blue-text {
  color: var(--blue);
}

.gold-text {
  color: #c7922d;
}

.quick-actions {
  margin-top: 0;
}

.quick-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}

.quick-card {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: flex;
  gap: 10px;
  padding: 13px;
}

.quick-card>span {
  align-items: center;
  border-radius: 7px;
  display: flex;
  flex: 0 0 auto;
  font-size: 20px;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.quick-card div {
  flex: 1;
}

.quick-card strong,
.quick-card small {
  display: block;
}

.quick-card strong {
  color: var(--ink);
  font-size: 10px;
}

.quick-card small {
  color: var(--muted);
  font-size: 9px;
  margin-top: 4px;
}

.quick-card b {
  color: var(--forest);
}

.quick-card.green>span {
  background: #e4f5eb;
  color: #319068;
}

.quick-card.purple>span {
  background: #f0e8fc;
  color: #7d59b3;
}

.quick-card.blue>span {
  background: #e7f0fb;
  color: #3d7abd;
}

.quick-card.gold>span {
  background: #fff1dc;
  color: #bd8426;
}

@media (max-width:1100px) {
  .sidebar {
    flex-basis: 215px;
  }

  .progress-name {
    flex-basis: 125px;
  }

  .status-pill {
    font-size: 8px;
    padding: 4px 5px;
  }

  .quick-card {
    padding: 10px;
  }
}

@media (max-width:900px) {
  .login-page {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }

  .login-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .login-visual {
    display: none;
  }

  .login-panel {
    min-height: 100vh;
    overflow: visible;
  }

  .mobile-logo {
    display: flex;
  }

  .sidebar {
    display: none;
  }

  .mobile-menu {
    display: block;
    color: var(--forest);
    font-size: 20px;
  }

  .topbar {
    padding: 0 22px;
  }

  .topbar-search {
    margin-left: 14px;
    margin-right: auto;
    max-width: 225px;
  }

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

  .dashboard-grid,
  .lower-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width:560px) {
  .login-panel {
    padding: 22px 15px;
  }

  .login-card {
    padding: 27px 20px;
  }

  .mobile-app-promo {
    align-items: flex-start;
    gap: 8px;
    padding: 15px 13px;
  }

  .mobile-app-promo h3 {
    font-size: 22px;
  }

  .mobile-app-promo-scan {
    flex-basis: 80px;
  }

  .mobile-app-qr {
    background-size: 11px 11px;
    height: 64px;
    width: 64px;
  }

  .login-heading h2 {
    font-size: 28px;
  }

  .login-slides {
    min-height: 555px;
  }

  .login-visual h1 {
    font-size: 34px;
  }

  .ayah-card {
    margin-top: 40px;
  }

  .captcha-challenge {
    align-items: stretch;
    flex-direction: column;
  }

  .captcha-challenge input {
    width: 100%;
  }

  .content {
    padding: 25px 15px 35px;
  }

  .topbar {
    height: 65px;
    padding: 0 15px;
  }

  .topbar-search {
    display: none;
  }

  .topbar-actions {
    gap: 10px;
  }

  .topbar-divider {
    display: none;
  }

  .profile-copy {
    display: none;
  }

  .page-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 17px;
  }

  .page-heading h1 {
    font-size: 25px;
  }

  .stat-grid {
    gap: 9px;
  }

  .stat-card {
    gap: 8px;
    min-height: 105px;
    padding: 13px 10px;
  }

  .stat-icon {
    font-size: 20px;
    height: 38px;
    width: 38px;
  }

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

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

  .stat-card small {
    font-size: 8px;
  }

  .panel {
    padding: 16px 13px;
  }

  .progress-row {
    flex-wrap: wrap;
  }

  .progress-name {
    flex: 1;
  }

  .progress-meter {
    flex-basis: calc(100% - 50px);
    margin-left: 50px;
  }

  .progress-row>.status-pill {
    margin-left: auto;
    margin-top: -20px;
  }

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

  .activity-panel table {
    min-width: 520px;
  }

  .forgot-card {
    min-height: auto;
    padding: 28px 24px 34px;
  }

  .forgot-brand {
    margin-bottom: 34px;
  }

  .forgot-heading h1 {
    font-size: 28px;
  }

  .role-choice {
    gap: 26px;
  }
}

/* Parent learning reports */
.parent-page-heading {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.parent-page-heading h1 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;
  margin: 5px 0 4px;
}

.parent-page-heading p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.parent-learning-context {
  margin-bottom: 20px;
}

.parent-learning-context .context-icon {
  align-items: center;
  background: #e2f4e8;
  border-radius: 10px;
  color: #27845c;
  display: inline-flex;
  flex: 0 0 35px;
  font-size: 20px;
  height: 35px;
  justify-content: center;
}

.parent-learning-context > div:nth-child(2) {
  flex: 1;
}

.parent-learning-context > div:nth-child(2) span,
.parent-learning-context > div:nth-child(2) small {
  color: #71837a;
  display: block;
  font-size: 10px;
}

.parent-learning-context > div:nth-child(2) strong {
  display: block;
  margin: 2px 0;
}

.parent-outline-button,
.parent-primary-button {
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  padding: 10px 14px;
  text-decoration: none;
}

.parent-outline-button {
  background: #fff;
  border: 1px solid #d8e6de;
  color: #23745b;
}

.parent-primary-button {
  background: #087b66;
  border: 1px solid #087b66;
  box-shadow: 0 8px 18px rgba(8, 123, 102, .14);
  color: #fff;
  cursor: pointer;
}

.parent-learning-panel {
  background: #fff;
  border: 1px solid #dfeae4;
  border-radius: 15px;
  margin-bottom: 20px;
  padding: 20px;
}

.parent-panel-heading {
  align-items: flex-start;
  border-bottom: 1px solid #edf2ef;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 15px;
}

.parent-panel-heading h2 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  margin: 4px 0;
}

.parent-panel-heading p {
  color: var(--muted);
  font-size: 11px;
  margin: 5px 0 0;
}

.parent-filter-form {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.parent-filter-form label {
  color: #72837b;
  display: grid;
  font-size: 9px;
  gap: 5px;
}

.parent-filter-form select,
.parent-filter-form input {
  background: #fff;
  border: 1px solid #d5e4dc;
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  min-height: 35px;
  outline: 0;
  padding: 8px 10px;
}

.parent-filter-form select {
  min-width: 115px;
}

.parent-filter-form input {
  width: 75px;
}

.parent-stat-grid.parent-attendance-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.parent-stat-card {
  background: #f7fbf8;
  border: 1px solid #e0eee6;
  border-radius: 11px;
  display: grid;
  gap: 2px;
  padding: 13px 14px;
}

.parent-stat-card span,
.parent-stat-card small {
  color: #6f8277;
  font-size: 10px;
}

.parent-stat-card strong {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
}

.parent-stat-card.is-green { background: #f1fbf4; border-color: #d7eddf; }
.parent-stat-card.is-blue { background: #f2f7ff; border-color: #d9e6f8; }
.parent-stat-card.is-yellow { background: #fffaf0; border-color: #f1e4c8; }
.parent-stat-card.is-red { background: #fff5f3; border-color: #f1dcd8; }

.parent-attendance-legend {
  align-items: center;
  color: #718178;
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  gap: 14px;
  margin-bottom: 12px;
}

.parent-attendance-legend span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.attendance-mark,
.attendance-status {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.attendance-mark {
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  height: 22px;
  width: 22px;
}

.attendance-mark.is-present,
.attendance-status.is-present { background: #e5f6ea; color: #2b9861; }
.attendance-mark.is-sick,
.attendance-status.is-sick { background: #e9f2ff; color: #3474c4; }
.attendance-mark.is-permit,
.attendance-status.is-permit { background: #fff4d8; color: #b47a18; }
.attendance-mark.is-absent,
.attendance-status.is-absent { background: #ffebea; color: #c94949; }
.attendance-mark.is-holiday,
.attendance-status.is-holiday { background: #f2f4f3; color: #8a9790; }

.parent-attendance-table-wrap {
  overflow-x: auto;
}

.parent-attendance-table {
  min-width: 650px;
}

.parent-attendance-table td {
  font-size: 11px;
  padding-bottom: 11px;
  padding-top: 11px;
}

.parent-attendance-table td:first-child strong {
  margin-right: 5px;
}

.attendance-status {
  border-radius: 999px;
  font-size: 10px;
  gap: 5px;
  padding: 5px 8px;
}

.attendance-status b {
  font-size: 9px;
}

.parent-attendance-table .is-holiday-row td {
  background: #fbfcfb;
  color: #9aa59f;
}

.parent-report-list {
  display: grid;
  gap: 12px;
}

.parent-report-card {
  background: #fbfefd;
  border: 1px solid #dfece5;
  border-radius: 12px;
  padding: 15px;
}

.parent-report-card-heading {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.parent-report-card h3 {
  color: var(--ink);
  font-size: 14px;
  margin: 4px 0;
}

.parent-report-card p {
  color: var(--muted);
  font-size: 10px;
  margin: 0;
}

.report-total-badge {
  background: #eaf7ee;
  border-radius: 999px;
  color: #277650;
  font-size: 9px;
  font-weight: 700;
  padding: 6px 9px;
  white-space: nowrap;
}

.parent-report-values {
  border-top: 1px solid #edf2ef;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-top: 13px;
  padding-top: 12px;
}

.parent-report-value {
  background: #fff;
  border: 1px solid #e3eee8;
  border-radius: 9px;
  display: grid;
  gap: 3px;
  padding: 10px;
}

.parent-report-value span,
.parent-report-value small,
.parent-report-note span {
  color: #77877f;
  font-size: 9px;
}

.parent-report-value .parent-report-description {
  color: #49695b;
  font-size: 9px;
  line-height: 1.45;
  margin-top: 2px;
}

.parent-report-value strong {
  color: #0a6f5f;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
}

.parent-report-note {
  background: #fffaf0;
  border: 1px solid #f0e4cb;
  border-radius: 9px;
  margin-top: 11px;
  padding: 10px 11px;
}

.parent-report-note p {
  color: #796c54;
  font-size: 10px;
  line-height: 1.55;
  margin-top: 4px;
}

.parent-report-empty {
  background: #f8fcfa;
  border-top: 1px solid #edf2ef;
  color: #7a8982;
  font-size: 10px;
  margin-top: 13px;
  padding: 14px 0 2px;
}

@media (max-width: 760px) {
  .parent-page-heading,
  .parent-panel-heading {
    display: block;
  }

  .parent-page-heading .parent-year-badge {
    display: inline-block;
    margin-top: 12px;
  }

  .parent-filter-form {
    margin-top: 15px;
  }

  .parent-stat-grid.parent-attendance-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parent-violation-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parent-learning-context .parent-outline-button {
    margin-left: 47px;
  }
}

@media (max-width: 520px) {
  .parent-learning-panel {
    padding: 15px;
  }

  .parent-violation-stats {
    grid-template-columns: 1fr;
  }

  .parent-filter-form label:first-of-type {
    flex: 1;
  }

  .parent-filter-form select {
    width: 100%;
  }

  .parent-filter-form .parent-primary-button {
    width: 100%;
  }
}

/* Parent point and CKHS */
.parent-poin-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0;
}

.parent-poin-list,
.parent-ckhs-list {
  display: grid;
  gap: 8px;
}

.parent-violation-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 20px;
}

.parent-violation-table-wrap {
  overflow-x: auto;
}

.parent-violation-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 780px;
  width: 100%;
}

.parent-violation-table th {
  background: #f7fbf8;
  border-bottom: 1px solid #e1ece6;
  color: #6d8077;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  padding: 10px 11px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.parent-violation-table th:first-child {
  border-radius: 8px 0 0 0;
  width: 42px;
}

.parent-violation-table th:last-child {
  border-radius: 0 8px 0 0;
}

.parent-violation-table td {
  border-bottom: 1px solid #edf2ef;
  color: #607169;
  font-size: 10px;
  padding: 12px 11px;
  vertical-align: middle;
}

.parent-violation-table tbody tr:hover td {
  background: #fbfefd;
}

.parent-violation-table td strong {
  color: #183f35;
  display: block;
  font-size: 10px;
  line-height: 1.45;
}

.parent-violation-table .is-number {
  text-align: right;
  white-space: nowrap;
}

.parent-violation-category {
  background: #fff0ed;
  border: 1px solid #f5d9d2;
  border-radius: 999px;
  color: #bb5a45;
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  padding: 5px 8px;
  white-space: nowrap;
}

.parent-violation-point {
  color: #c55248;
  font-size: 11px;
}

.parent-violation-pagination {
  border-top: 1px solid #edf2ef;
  margin-top: 12px;
  padding-top: 12px;
}

.parent-coaching-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 9px;
  font-weight: 800;
  padding: 5px 8px;
  white-space: nowrap;
}

.parent-coaching-status.is-belum {
  background: #fff1e5;
  color: #bd6734;
}

.parent-coaching-status.is-proses {
  background: #fff7d9;
  color: #a9791b;
}

.parent-coaching-status.is-selesai {
  background: #e6f7ec;
  color: #258354;
}

.parent-coaching-session-count {
  color: #86958e;
  display: block;
  font-size: 9px;
  margin-top: 4px;
}

.parent-page-heading-actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.parent-violation-detail-button {
  background: #e7f5ee;
  border: 1px solid #d2ebde;
  border-radius: 7px;
  color: #087958;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  padding: 6px 8px;
  white-space: nowrap;
}

.parent-violation-detail-button:hover {
  background: #d3eee1;
}

.parent-pelanggaran-detail-modal {
  align-items: center;
  background: rgba(7, 36, 29, .58);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 1600;
}

.parent-pelanggaran-detail-modal[hidden] {
  display: none !important;
}

.parent-pelanggaran-detail-dialog {
  background: #fff;
  border: 1px solid #dbe8e0;
  border-radius: 18px;
  box-shadow: 0 26px 80px rgba(8, 44, 34, .28);
  max-height: min(92vh, 860px);
  max-width: 820px;
  overflow: auto;
  width: 100%;
}

.parent-pelanggaran-detail-heading {
  align-items: flex-start;
  border-bottom: 1px solid #e5eee9;
  display: flex;
  justify-content: space-between;
  padding: 20px 22px 15px;
}

.parent-pelanggaran-detail-heading h2 {
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 23px;
  margin: 4px 0 0;
}

.parent-pelanggaran-detail-close {
  background: transparent;
  border: 0;
  color: #7b8e85;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.parent-pelanggaran-detail-body {
  display: grid;
  gap: 16px;
  padding: 20px 22px;
}

.parent-pelanggaran-summary {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.parent-pelanggaran-summary > div {
  background: #f8fcfa;
  border: 1px solid #e3eee8;
  border-radius: 9px;
  padding: 9px 10px;
}

.parent-pelanggaran-summary > div.is-wide {
  grid-column: span 3;
}

.parent-pelanggaran-summary span,
.parent-pelanggaran-coaching-item > div:not(.parent-pelanggaran-coaching-item-heading) span {
  color: #82938b;
  display: block;
  font-size: 9px;
}

.parent-pelanggaran-summary strong {
  color: var(--ink);
  display: block;
  font-size: 11px;
  line-height: 1.45;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.parent-pelanggaran-summary strong.is-negative,
.parent-pelanggaran-summary [data-parent-pelanggaran-point] {
  color: #c55248;
}

.parent-pelanggaran-coaching-section {
  border-top: 1px solid #e5eee9;
  padding-top: 15px;
}

.parent-pelanggaran-section-heading {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.parent-pelanggaran-section-heading h3 {
  color: var(--ink);
  font-size: 14px;
  margin: 4px 0 0;
}

.parent-pelanggaran-coaching-list {
  display: grid;
  gap: 9px;
}

.parent-pelanggaran-coaching-item {
  background: #fbfefd;
  border: 1px solid #e1ece6;
  border-radius: 10px;
  display: grid;
  gap: 7px;
  padding: 11px 12px;
}

.parent-pelanggaran-coaching-item-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.parent-pelanggaran-coaching-item-heading strong {
  color: #183f35;
  font-size: 11px;
}

.parent-pelanggaran-coaching-meta {
  color: #82938b;
  font-size: 9px;
}

.parent-pelanggaran-coaching-item > div:not(.parent-pelanggaran-coaching-item-heading) {
  border-top: 1px solid #edf2ef;
  padding-top: 7px;
}

.parent-pelanggaran-coaching-item > div:not(.parent-pelanggaran-coaching-item-heading) strong {
  color: #53665d;
  display: block;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.55;
  margin-top: 3px;
  white-space: pre-wrap;
}

.parent-pelanggaran-document-link {
  color: #087958;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}

.parent-pelanggaran-document-link:hover {
  text-decoration: underline;
}

.parent-pelanggaran-detail-actions {
  border-top: 1px solid #e5eee9;
  display: flex;
  justify-content: flex-end;
  padding: 13px 22px 17px;
}

.parent-pelanggaran-detail-modal-open {
  overflow: hidden;
}

.parent-pelanggaran-report-modal {
  align-items: center;
  background: rgba(7, 36, 29, .58);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 1600;
}

.parent-pelanggaran-report-modal[hidden] {
  display: none !important;
}

.parent-pelanggaran-report-dialog {
  background: #fff;
  border: 1px solid #dbe8e0;
  border-radius: 18px;
  box-shadow: 0 26px 80px rgba(8, 44, 34, .28);
  max-height: min(92vh, 860px);
  max-width: 760px;
  overflow: auto;
  width: 100%;
}

.parent-pelanggaran-report-form {
  padding: 18px 22px 0;
}

.parent-pelanggaran-report-student {
  background: #f5fbf7;
  border: 1px solid #deeee4;
  border-radius: 10px;
  display: grid;
  gap: 3px;
  margin-bottom: 13px;
  padding: 11px 12px;
}

.parent-pelanggaran-report-student span,
.parent-pelanggaran-report-student small,
.parent-pelanggaran-report-date span,
.parent-pelanggaran-report-rules small,
.parent-pelanggaran-report-note {
  color: #788a81;
  font-size: 10px;
}

.parent-pelanggaran-report-student strong {
  color: #173f35;
  font-size: 12px;
}

.parent-pelanggaran-report-date {
  color: #53665d;
  display: grid;
  font-size: 10px;
  font-weight: 700;
  gap: 5px;
  margin-bottom: 13px;
}

.parent-pelanggaran-report-date input {
  background: #fff;
  border: 1px solid #d5e4dc;
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  min-height: 37px;
  padding: 8px 10px;
}

.parent-pelanggaran-report-date input:focus {
  border-color: #087b66;
  box-shadow: 0 0 0 3px rgba(8, 123, 102, .1);
  outline: 0;
}

.parent-pelanggaran-report-rules {
  background: #f8fcfa;
  border: 1px solid #dfece5;
  border-radius: 11px;
  padding: 12px;
}

.parent-pelanggaran-report-rules .parent-pelanggaran-section-heading {
  margin-bottom: 9px;
}

.parent-pelanggaran-report-rules .parent-pelanggaran-section-heading h3 {
  font-size: 15px;
}

.parent-pelanggaran-report-rule-list {
  display: grid;
  gap: 7px;
}

.parent-pelanggaran-report-rule {
  align-items: center;
  background: #fff;
  border: 1px solid #dfece5;
  border-radius: 9px;
  cursor: pointer;
  display: grid;
  gap: 9px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 9px 10px;
}

.parent-pelanggaran-report-rule:has(input:checked) {
  background: #effaf3;
  border-color: #72c59a;
}

.parent-pelanggaran-report-rule input {
  accent-color: #087b66;
  height: 16px;
  width: 16px;
}

.parent-pelanggaran-report-rule span {
  display: grid;
  gap: 3px;
}

.parent-pelanggaran-report-rule strong {
  color: #183f35;
  font-size: 10px;
  line-height: 1.35;
}

.parent-pelanggaran-report-rule small {
  font-size: 9px;
}

.parent-pelanggaran-report-rule > b {
  color: #c55248;
  font-size: 11px;
  white-space: nowrap;
}

.parent-pelanggaran-report-error {
  color: #bd5b47 !important;
  display: block;
  margin-top: 8px;
}

.parent-pelanggaran-report-error[hidden] {
  display: none;
}

.parent-pelanggaran-report-note {
  align-items: flex-start;
  background: #fffaf0;
  border: 1px solid #f0e4cb;
  border-radius: 9px;
  display: flex;
  gap: 8px;
  line-height: 1.5;
  margin-top: 12px;
  padding: 9px 10px;
}

.parent-pelanggaran-report-note span {
  color: #b47a18;
  font-size: 13px;
}

.parent-pelanggaran-report-note p {
  margin: 0;
}

.parent-pelanggaran-report-form .parent-pelanggaran-detail-actions {
  margin: 17px -22px 0;
}

@media (max-width: 720px) {
  .parent-pelanggaran-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parent-pelanggaran-summary > div.is-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .parent-pelanggaran-detail-modal {
    padding: 10px;
  }

  .parent-pelanggaran-summary {
    grid-template-columns: 1fr;
  }

  .parent-pelanggaran-summary > div.is-wide {
    grid-column: auto;
  }

  .parent-pelanggaran-detail-heading,
  .parent-pelanggaran-detail-body,
  .parent-pelanggaran-detail-actions {
    padding-left: 15px;
    padding-right: 15px;
  }

  .parent-pelanggaran-report-form {
    padding-left: 15px;
    padding-right: 15px;
  }

  .parent-pelanggaran-report-form .parent-pelanggaran-detail-actions {
    margin-left: -15px;
    margin-right: -15px;
  }
}

.parent-history-actions {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.parent-history-filter {
  align-items: flex-end;
}

.parent-history-filter input[type="date"] {
  min-width: 145px;
}

.parent-filter-link {
  color: #277650;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.parent-filter-link:hover {
  text-decoration: underline;
}

.parent-poin-item {
  align-items: center;
  background: #fbfefd;
  border: 1px solid #e1ece6;
  border-radius: 11px;
  display: flex;
  gap: 11px;
  padding: 12px 13px;
}

.parent-prestasi-image {
  border: 1px solid #dceae3;
  border-radius: 8px;
  flex: 0 0 52px;
  height: 52px;
  object-fit: cover;
  width: 52px;
}

.parent-prestasi-item {
  align-items: center;
}

.parent-prestasi-detail-button {
  background: #e7f5ee;
  border: 0;
  border-radius: 7px;
  color: #087958;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  margin-top: 8px;
  padding: 6px 8px;
  white-space: nowrap;
}

.parent-prestasi-detail-button:hover {
  background: #d3eee1;
}

.parent-prestasi-detail-modal {
  align-items: center;
  background: rgba(7, 36, 29, .58);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 1600;
}

.parent-prestasi-detail-modal[hidden] {
  display: none !important;
}

.parent-prestasi-detail-dialog {
  background: #fff;
  border: 1px solid #dbe8e0;
  border-radius: 18px;
  box-shadow: 0 26px 80px rgba(8, 44, 34, .28);
  max-height: min(92vh, 860px);
  max-width: 760px;
  overflow: auto;
  width: 100%;
}

.parent-prestasi-detail-heading {
  align-items: flex-start;
  border-bottom: 1px solid #e5eee9;
  display: flex;
  justify-content: space-between;
  padding: 20px 22px 15px;
}

.parent-prestasi-detail-heading h2 {
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px;
  margin: 4px 0 0;
}

.parent-prestasi-detail-close {
  background: transparent;
  border: 0;
  color: #7b8e85;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.parent-prestasi-detail-body {
  display: grid;
  gap: 16px;
  padding: 20px 22px;
}

.parent-prestasi-detail-image-wrap {
  align-items: center;
  background: #f3f8f5;
  border: 1px solid #dceae3;
  border-radius: 13px;
  display: flex;
  justify-content: center;
  min-height: 180px;
  overflow: hidden;
  padding: 10px;
}

.parent-prestasi-detail-image-wrap[hidden] {
  display: none;
}

.parent-prestasi-detail-image-wrap img {
  display: block;
  max-height: min(62vh, 560px);
  max-width: 100%;
  object-fit: contain;
}

.parent-prestasi-detail-info {
  display: grid;
  gap: 12px;
}

.parent-prestasi-detail-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.parent-prestasi-detail-grid > div {
  background: #f8fcfa;
  border: 1px solid #e3eee8;
  border-radius: 9px;
  padding: 9px 10px;
}

.parent-prestasi-detail-grid span,
.parent-prestasi-detail-description > span {
  color: #82938b;
  display: block;
  font-size: 9px;
}

.parent-prestasi-detail-grid strong {
  color: var(--ink);
  display: block;
  font-size: 11px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.parent-prestasi-detail-description {
  border-top: 1px solid #e5eee9;
  padding-top: 13px;
}

.parent-prestasi-detail-description p {
  color: #52665d;
  font-size: 12px;
  line-height: 1.65;
  margin: 7px 0 0;
  white-space: pre-wrap;
}

.parent-prestasi-detail-actions {
  border-top: 1px solid #e5eee9;
  display: flex;
  justify-content: flex-end;
  padding: 13px 22px 17px;
}

.parent-prestasi-detail-modal-open {
  overflow: hidden;
}

@media (max-width: 560px) {
  .parent-prestasi-detail-modal {
    padding: 10px;
  }

  .parent-prestasi-detail-grid {
    grid-template-columns: 1fr;
  }

  .parent-prestasi-detail-heading,
  .parent-prestasi-detail-body,
  .parent-prestasi-detail-actions {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.poin-sign {
  align-items: center;
  border-radius: 9px;
  display: inline-flex;
  flex: 0 0 32px;
  font-size: 18px;
  font-weight: 800;
  height: 32px;
  justify-content: center;
}

.poin-sign.is-plus {
  background: #e5f6ea;
  color: #2b9861;
}

.poin-sign.is-minus {
  background: #ffebea;
  color: #c94949;
}

.parent-poin-copy {
  flex: 1;
  min-width: 0;
}

.parent-poin-copy strong,
.parent-poin-copy span,
.parent-poin-meta b,
.parent-poin-meta small {
  display: block;
}

.parent-poin-copy strong {
  color: var(--ink);
  font-size: 11px;
}

.parent-poin-copy span,
.parent-poin-meta small {
  color: #77877f;
  font-size: 9px;
  margin-top: 4px;
}

.parent-poin-meta {
  text-align: right;
}

.parent-poin-meta b {
  font-size: 12px;
}

.parent-poin-meta b.is-plus {
  color: #2b9861;
}

.parent-poin-meta b.is-minus {
  color: #c94949;
}

.parent-ckhs-summary {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ckhs-summary-card {
  background: #f7fbf8;
  border: 1px solid #dfede5;
  border-radius: 10px;
  display: grid;
  gap: 4px;
  min-height: 88px;
  padding: 11px;
}

.ckhs-summary-card span,
.ckhs-summary-card em {
  color: #72857a;
  font-size: 9px;
  font-style: normal;
}

.ckhs-summary-card strong {
  color: #0a6f5f;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 21px;
}

.ckhs-summary-card strong small {
  color: #7d8e85;
  font-family: inherit;
  font-size: 11px;
}

.parent-ckhs-item {
  align-items: flex-start;
  background: #fbfefd;
  border: 1px solid #e0ece6;
  border-radius: 11px 11px 0 0;
  display: flex;
  gap: 12px;
  padding: 13px;
}

.parent-ckhs-item-actions {
  align-items: flex-end;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 7px;
}

.parent-detail-button {
  background: transparent;
  border: 0;
  color: #19765c;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  padding: 0;
}

.parent-detail-button:hover {
  text-decoration: underline;
}

.ckhs-date-badge {
  background: #e4f5ea;
  border-radius: 9px;
  color: #287d59;
  display: grid;
  flex: 0 0 48px;
  padding: 7px 4px;
  text-align: center;
}

.ckhs-date-badge strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
}

.ckhs-date-badge small {
  font-size: 8px;
  text-transform: uppercase;
}

.parent-ckhs-copy {
  flex: 1;
  min-width: 0;
}

.parent-ckhs-copy > strong,
.parent-ckhs-copy > span {
  display: block;
}

.parent-ckhs-copy > strong {
  color: var(--ink);
  font-size: 12px;
}

.parent-ckhs-copy > span {
  color: #77877f;
  font-size: 9px;
  margin-top: 3px;
}

.ckhs-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.ckhs-category-pills span {
  background: #f0f7f3;
  border: 1px solid #dfebe4;
  border-radius: 999px;
  color: #628071;
  font-size: 8px;
  padding: 4px 7px;
}

.ckhs-category-pills b {
  color: #197555;
}

.ckhs-control-status {
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  padding: 6px 8px;
  white-space: nowrap;
}

.ckhs-control-status.is-done {
  background: #e4f5ea;
  color: #2b8a5f;
}

.ckhs-control-status.is-pending {
  background: #fff3df;
  color: #b47524;
}

.parent-ckhs-cleanliness {
  align-items: center;
  background: #f7fbf8;
  border: 1px solid #e0ece6;
  border-top: 0;
  border-radius: 0 0 11px 11px;
  color: #73867b;
  display: flex;
  flex-wrap: wrap;
  font-size: 9px;
  gap: 11px;
  padding: 9px 13px 10px 73px;
}

.parent-ckhs-item + .parent-ckhs-cleanliness {
  margin-top: -8px;
}

.parent-ckhs-cleanliness > span:not(:first-child) {
  border-left: 1px solid #dce8e0;
  padding-left: 11px;
}

.parent-ckhs-cleanliness b.is-good {
  color: #2b9861;
}

.parent-ckhs-cleanliness b.is-muted {
  color: #b77929;
}

.parent-ckhs-input-panel {
  background: linear-gradient(145deg, #fff 0%, #fbfefc 100%);
}

.parent-ckhs-launch {
  align-items: center;
  background: #f4faf6;
  border: 1px solid #deede4;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}

.parent-ckhs-launch strong,
.parent-ckhs-launch span {
  display: block;
}

.parent-ckhs-launch strong {
  color: #174c42;
  font-size: 12px;
}

.parent-ckhs-launch span {
  color: #71847a;
  font-size: 10px;
  margin-top: 4px;
}

.ckhs-filled-notice {
  align-items: center;
  background: #fff9ed;
  border: 1px solid #f1e2c5;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
  padding: 10px 12px;
}

.ckhs-filled-notice strong {
  color: #8b6422;
  font-size: 10px;
}

.ckhs-filled-notice span {
  color: #8b7b63;
  font-size: 9px;
}

.ckhs-filled-notice a {
  color: #19765c;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}

.ckhs-filled-notice a:hover {
  text-decoration: underline;
}

.ckhs-filled-notice.is-editing {
  background: #eefaf2;
  border-color: #d4ebdc;
}

.ckhs-filled-notice.is-editing strong,
.ckhs-existing-note.is-editing {
  color: #2d835b;
}

.parent-ckhs-backdrop {
  align-items: center;
  background: rgba(8, 34, 26, .64);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 120;
}

.parent-ckhs-backdrop[hidden] {
  display: none;
}

.parent-ckhs-dialog {
  background: #fff;
  border: 1px solid #dbe8e0;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(13, 53, 40, .24);
  max-height: calc(100vh - 40px);
  max-width: 780px;
  overflow-y: auto;
  padding: 22px;
  position: relative;
  width: 100%;
}

.parent-ckhs-dialog .parent-panel-heading {
  padding-right: 36px;
}

.parent-ckhs-close {
  background: transparent;
  border: 0;
  color: #7c8b84;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
  padding: 2px 5px;
  position: absolute;
  right: 15px;
  top: 15px;
}

.parent-ckhs-close:hover {
  color: #174c42;
}

.parent-ckhs-modal-open {
  overflow: hidden;
}

.parent-ckhs-detail-backdrop {
  align-items: center;
  background: rgba(8, 34, 26, .64);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 120;
}

.parent-ckhs-detail-dialog {
  background: #fff;
  border: 1px solid #dbe8e0;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(13, 53, 40, .24);
  max-height: calc(100vh - 40px);
  max-width: 700px;
  overflow-y: auto;
  padding: 22px;
  position: relative;
  width: 100%;
}

.parent-ckhs-detail-dialog .parent-panel-heading {
  padding-right: 20px;
}

.parent-detail-category-list {
  display: grid;
  gap: 14px;
}

.parent-detail-section {
  background: #f7fbf8;
  border: 1px solid #e0ece5;
  border-radius: 11px;
  padding: 12px;
}

.parent-ckhs-detail-dialog > .parent-detail-section {
  margin-top: 14px;
}

.parent-detail-section h3 {
  color: #174c42;
  font-size: 11px;
  margin: 0 0 9px;
}

.parent-detail-activity-list,
.parent-detail-rapi-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.parent-detail-activity,
.parent-detail-rapi {
  align-items: center;
  background: #fff;
  border: 1px solid #e4eee8;
  border-radius: 8px;
  display: flex;
  font-size: 9px;
  gap: 7px;
  justify-content: space-between;
  padding: 7px 8px;
}

.parent-detail-activity span,
.parent-detail-rapi span {
  color: #526e60;
}

.parent-detail-activity b,
.parent-detail-rapi b {
  border-radius: 999px;
  font-size: 8px;
  padding: 4px 6px;
  white-space: nowrap;
}

.parent-detail-activity b.is-done,
.parent-detail-rapi b.is-done {
  background: #e3f5e9;
  color: #2b8d5f;
}

.parent-detail-activity b.is-pending,
.parent-detail-rapi b.is-pending {
  background: #fff0e6;
  color: #bd6e2b;
}

.parent-detail-rapi-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.parent-detail-rapi {
  align-items: flex-start;
  flex-direction: column;
}

.parent-detail-rapi small {
  color: #8b7b63;
  font-size: 8px;
  line-height: 1.4;
}

.parent-detail-empty {
  color: #7a8982;
  font-size: 10px;
  margin: 0;
}

.parent-detail-message-list {
  display: grid;
  gap: 10px;
}

.parent-detail-message {
  align-items: flex-start;
  background: #f7fbf8;
  border: 1px solid #e0ece5;
  border-radius: 11px;
  display: flex;
  gap: 11px;
  padding: 13px;
}

.parent-detail-message .message-icon {
  align-items: center;
  background: #e5f2ff;
  border-radius: 8px;
  color: #347cc6;
  display: inline-flex;
  flex: 0 0 auto;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.parent-detail-message strong {
  color: #174c42;
  display: block;
  font-size: 11px;
}

.parent-detail-message p {
  color: #526e60;
  font-size: 10px;
  line-height: 1.6;
  margin: 5px 0;
  white-space: normal;
}

.parent-detail-message small {
  color: #829389;
  display: block;
  font-size: 9px;
}

.parent-detail-footer {
  align-items: center;
  border-top: 1px solid #edf2ef;
  color: #73867b;
  display: flex;
  font-size: 9px;
  gap: 12px;
  justify-content: space-between;
  margin-top: 13px;
  padding-top: 13px;
}

.ckhs-input-badge {
  background: #e7f6ec;
  border: 1px solid #d5ecdc;
  border-radius: 999px;
  color: #2d835b;
  font-size: 9px;
  font-weight: 700;
  padding: 6px 9px;
  white-space: nowrap;
}

.parent-ckhs-date-bar {
  align-items: center;
  background: #f4faf6;
  border: 1px solid #deede4;
  border-radius: 11px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 10px 12px;
}

.parent-ckhs-date-bar form {
  align-items: flex-end;
  display: flex;
  gap: 8px;
}

.parent-ckhs-date-bar label {
  color: #6e8277;
  display: grid;
  font-size: 9px;
  gap: 4px;
}

.parent-ckhs-date-bar input {
  background: #fff;
  border: 1px solid #d5e4dc;
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  min-height: 34px;
  padding: 8px 10px;
}

.ckhs-existing-note {
  color: #5f7b6b;
  font-size: 9px;
}

.ckhs-choice input:disabled + span {
  cursor: not-allowed;
  opacity: .72;
}

.parent-ckhs-input-form {
  display: grid;
  gap: 12px;
}

.parent-ckhs-fieldset {
  background: rgba(247, 252, 249, .9);
  border: 1px solid #e1eee7;
  border-radius: 12px;
  margin: 0;
  min-width: 0;
  padding: 13px;
}

.parent-ckhs-fieldset legend {
  align-items: center;
  color: #174c42;
  display: flex;
  float: none;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
  padding: 0 5px;
  width: auto;
}

.parent-ckhs-fieldset legend small {
  color: #8a9b91;
  font-size: 9px;
  font-weight: 500;
}

.ckhs-section-icon {
  align-items: center;
  background: #e1f3e8;
  border-radius: 7px;
  color: #27845c;
  display: inline-flex;
  height: 25px;
  justify-content: center;
  width: 25px;
}

.parent-ckhs-options {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 9px;
}

.parent-ckhs-option {
  align-items: center;
  background: #fff;
  border: 1px solid #e4eee8;
  border-radius: 9px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
  padding: 9px 10px;
}

.parent-ckhs-option > strong {
  color: #365c4d;
  font-size: 10px;
  font-weight: 600;
}

.ckhs-choice {
  background: #f3f7f4;
  border-radius: 999px;
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
}

.ckhs-choice label {
  border-radius: 999px;
  color: #788b80;
  cursor: pointer;
  font-size: 9px;
  padding: 5px 7px;
  transition: background .15s ease, color .15s ease;
}

.ckhs-choice input {
  opacity: 0;
  position: absolute;
}

.ckhs-choice label:has(input:checked).is-done {
  background: #dff3e5;
  color: #218054;
  font-weight: 700;
}

.ckhs-choice label:has(input:checked).is-not-done {
  background: #fff0e6;
  color: #bd6e2b;
  font-weight: 700;
}

.parent-ckhs-input-footer {
  align-items: center;
  border-top: 1px solid #e7efea;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-top: 13px;
}

.parent-ckhs-input-footer > span {
  color: #75877c;
  font-size: 10px;
}

@media (max-width: 840px) {
  .parent-ckhs-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .parent-poin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .parent-notification-popover {
    position: fixed;
    right: 12px;
    top: 64px;
    width: min(320px, calc(100vw - 24px));
  }

  .parent-search-backdrop {
    padding: 70px 12px 14px;
  }

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

  .parent-poin-item,
  .parent-ckhs-item {
    align-items: flex-start;
  }

  .parent-history-actions,
  .parent-history-filter {
    align-items: stretch;
    width: 100%;
  }

  .parent-history-filter label,
  .parent-history-filter input[type="date"] {
    width: 100%;
  }

  .parent-history-filter .parent-primary-button {
    width: 100%;
  }

  .parent-poin-meta {
    text-align: left;
  }

  .parent-ckhs-item {
    flex-wrap: wrap;
  }

  .parent-ckhs-item-actions {
    align-items: flex-start;
    flex-direction: row;
    margin-left: 60px;
  }

  .ckhs-control-status {
    margin-left: 60px;
  }

  .parent-ckhs-cleanliness {
    padding-left: 13px;
  }

  .parent-ckhs-cleanliness > span:not(:first-child) {
    border-left: 0;
    padding-left: 0;
  }

  .parent-ckhs-date-bar,
  .parent-ckhs-input-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .parent-ckhs-date-bar form {
    align-items: stretch;
    flex-direction: column;
  }

  .parent-ckhs-date-bar .parent-outline-button,
  .parent-ckhs-input-footer .parent-primary-button {
    text-align: center;
    width: 100%;
  }

  .parent-ckhs-options {
    grid-template-columns: 1fr;
  }

  .parent-ckhs-launch {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .parent-ckhs-launch .parent-primary-button {
    text-align: center;
    width: 100%;
  }

  .parent-ckhs-dialog {
    max-height: calc(100vh - 24px);
    padding: 18px;
  }

  .parent-ckhs-detail-dialog {
    max-height: calc(100vh - 24px);
    padding: 18px;
  }

  .parent-detail-activity-list,
  .parent-detail-rapi-list {
    grid-template-columns: 1fr;
  }
}

.parent-academic-heading {
  align-items: flex-start;
}

.parent-academic-context {
  align-items: center;
  background: rgba(238, 250, 245, .78);
  border: 1px solid rgba(45, 123, 82, .14);
  border-radius: 14px;
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  padding: 13px 16px;
}

.parent-academic-context > div {
  display: grid;
  gap: 2px;
}

.parent-academic-context small,
.academic-card-title span,
.academic-data-table small {
  color: #708276;
  font-size: 11px;
}

.parent-academic-context strong {
  color: #103f3b;
  font-size: 14px;
}

.academic-context-icon {
  align-items: center;
  background: #d9f0e4;
  border-radius: 10px;
  color: #087b66;
  display: inline-flex;
  font-size: 20px;
  height: 35px;
  justify-content: center;
  width: 35px;
}

.academic-context-class {
  background: #fff;
  border: 1px solid rgba(45, 123, 82, .12);
  border-radius: 999px;
  color: #477064;
  font-size: 11px;
  margin-left: auto;
  padding: 7px 11px;
}

.parent-academic-panel {
  margin-bottom: 20px;
}

.parent-schedule-image {
  border: 1px solid rgba(45, 123, 82, .12);
  border-radius: 13px;
  display: block;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  width: 100%;
}

.parent-academic-description {
  background: #f6fbf8;
  border: 1px solid rgba(45, 123, 82, .12);
  border-radius: 12px;
  color: #567266;
  margin-top: 15px;
  padding: 14px 16px;
}

.parent-academic-description strong {
  color: #0a6f5f;
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.parent-academic-description p,
.academic-card-copy {
  line-height: 1.65;
  margin: 0;
  white-space: normal;
}

.parent-empty-state {
  align-items: center;
  background: #f8fcfa;
  border: 1px dashed rgba(45, 123, 82, .22);
  border-radius: 13px;
  color: #72867b;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 42px 20px;
  text-align: center;
}

.parent-empty-state strong {
  color: #164c44;
  font-size: 14px;
}

.academic-card-list {
  display: grid;
  gap: 10px;
}

.academic-calendar-legend {
  align-items: center;
  color: #6e8177;
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  gap: 12px;
  margin: 0 0 12px;
}

.academic-calendar-legend span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.academic-calendar-legend i {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.academic-calendar-legend i.is-running { background: #48ad83; }
.academic-calendar-legend i.is-upcoming { background: #76a9dc; }
.academic-calendar-legend i.is-completed { background: #aebbb4; }

.parent-calendar {
  background: #fbfefd;
  border: 1px solid rgba(45, 123, 82, .13);
  border-radius: 14px;
  padding: 14px;
}

.parent-calendar-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.parent-calendar-month-nav {
  align-items: center;
  display: flex;
  gap: 10px;
}

.parent-calendar-month-nav strong {
  color: #153f3b;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  min-width: 145px;
  text-align: center;
}

.parent-calendar-nav,
.parent-calendar-today {
  background: #fff;
  border: 1px solid #cfe3d9;
  border-radius: 9px;
  color: #087b66;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  min-height: 32px;
  padding: 7px 11px;
}

.parent-calendar-nav {
  font-size: 20px;
  line-height: 1;
  padding: 4px 10px 6px;
}

.parent-calendar-nav:hover,
.parent-calendar-today:hover {
  background: #eef9f3;
  border-color: #9bcfb8;
}

.parent-calendar-weekdays,
.parent-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.parent-calendar-weekdays {
  color: #6f8278;
  font-size: 10px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: .05em;
  margin-bottom: 6px;
  text-align: center;
  text-transform: uppercase;
}

.parent-calendar-grid {
  border-left: 1px solid #e2ece6;
  border-top: 1px solid #e2ece6;
  gap: 0;
}

.parent-calendar-day {
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e2ece6;
  border-right: 1px solid #e2ece6;
  color: #375b50;
  cursor: pointer;
  font-family: inherit;
  min-height: 82px;
  overflow: hidden;
  padding: 7px;
  text-align: left;
  transition: background .16s ease, box-shadow .16s ease;
}

.parent-calendar-day:hover {
  background: #f1faf5;
}

.parent-calendar-day.is-other-month {
  background: #f8fbf9;
  color: #a7b5ae;
}

.parent-calendar-day.is-today .parent-calendar-day-number {
  background: #087b66;
  color: #fff;
}

.parent-calendar-day.is-selected {
  box-shadow: inset 0 0 0 2px #6bc39b;
  position: relative;
  z-index: 1;
}

.parent-calendar-day-number {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.parent-calendar-day-events {
  display: grid;
  gap: 3px;
  margin-top: 5px;
}

.parent-calendar-day-event {
  border-radius: 4px;
  display: block;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  padding: 3px 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parent-calendar-day-event.is-running {
  background: #def4e7;
  color: #167957;
}

.parent-calendar-day-event.is-upcoming {
  background: #e7f0ff;
  color: #336b9e;
}

.parent-calendar-day-event.is-completed {
  background: #edf1ef;
  color: #7d8b84;
}

.parent-calendar-day-more {
  color: #718079;
  font-size: 9px;
}

.parent-calendar-agenda {
  border-top: 1px solid #e2ece6;
  margin-top: 16px;
  padding-top: 15px;
}

.parent-calendar-agenda-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.parent-calendar-agenda-heading h3 {
  color: #153f3b;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  margin: 0;
}

.parent-calendar-agenda-list {
  display: grid;
  gap: 8px;
}

.parent-calendar-agenda-item {
  background: #fbfefd;
  border: 1px solid #dce9e1;
  border-left: 4px solid #76a9dc;
  border-radius: 9px;
  padding: 11px 13px;
}

.parent-calendar-agenda-item.is-running {
  background: #f0fbf5;
  border-color: #ccebd9;
  border-left-color: #48ad83;
}

.parent-calendar-agenda-item.is-completed {
  background: #f7faf8;
  border-color: #e1e8e4;
  border-left-color: #aebbb4;
  opacity: .72;
}

.parent-calendar-agenda-item-heading {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.parent-calendar-agenda-item-heading h4 {
  color: #214c43;
  font-size: 12px;
  margin: 0;
}

.parent-calendar-agenda-type {
  color: #71857a;
  display: block;
  font-size: 10px;
  margin-top: 5px;
}

.parent-calendar-agenda-detail {
  color: #5c756b;
  font-size: 11px;
  line-height: 1.55;
  margin: 7px 0 0;
  white-space: pre-line;
}

.parent-calendar-agenda-empty {
  align-items: center;
  background: #f8fcfa;
  border: 1px dashed rgba(45, 123, 82, .22);
  border-radius: 9px;
  color: #72867b;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  text-align: center;
}

.parent-calendar-agenda-empty strong {
  color: #164c44;
  font-size: 12px;
}

.parent-calendar-agenda-empty span {
  font-size: 10px;
}

.admin-calendar-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.admin-calendar-actions form {
  display: inline-flex;
  margin: 0;
}

.button-danger-outline {
  background: #fff7f5;
  border: 1px solid #efc5bd;
  color: #a75b4d;
}

.button-danger-outline:hover {
  background: #ffefeb;
  border-color: #d98b7e;
}

@media (max-width: 620px) {
  .parent-calendar {
    padding: 9px;
  }

  .parent-calendar-month-nav strong {
    font-size: 16px;
    min-width: 118px;
  }

  .parent-calendar-day {
    min-height: 58px;
    padding: 5px;
  }

  .parent-calendar-day-event {
    height: 5px;
    padding: 0;
    text-indent: -9999px;
  }

  .parent-calendar-day-more {
    display: none;
  }

  .parent-calendar-agenda-item-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

.academic-calendar-card {
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.academic-calendar-card.is-running {
  background: #f0fbf5;
  border-color: #ccebd9;
  border-left: 4px solid #48ad83;
}

.academic-calendar-card.is-upcoming {
  background: #f3f8ff;
  border-color: #d6e5f6;
  border-left: 4px solid #76a9dc;
}

.academic-calendar-card.is-completed {
  background: #f7faf8;
  border-color: #e1e8e4;
  border-left: 4px solid #aebbb4;
  filter: grayscale(.12);
  opacity: .62;
}

.academic-calendar-card.is-completed:hover {
  opacity: .8;
}

.academic-calendar-card.is-running .academic-card-icon {
  background: #dff4e8;
  color: #18805c;
}

.academic-calendar-card.is-upcoming .academic-card-icon {
  background: #e5f0ff;
  color: #3978b3;
}

.academic-calendar-card.is-completed .academic-card-icon {
  background: #edf1ef;
  color: #87958e;
}

.academic-calendar-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.academic-calendar-meta .academic-meta {
  margin: 5px 0 9px;
}

.academic-calendar-status {
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 9px;
}

.academic-calendar-status.is-running {
  background: #e0f5e9;
  color: #177957;
}

.academic-calendar-status.is-upcoming {
  background: #e7f0ff;
  color: #336b9e;
}

.academic-calendar-status.is-completed {
  background: #e9efeb;
  color: #718079;
}

.academic-card {
  background: #fbfefd;
  border: 1px solid rgba(45, 123, 82, .13);
  border-radius: 13px;
  display: flex;
  gap: 13px;
  padding: 15px;
}

.academic-card-icon {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  flex: 0 0 36px;
  font-size: 19px;
  height: 36px;
  justify-content: center;
}

.academic-icon-blue { background: #e7f0ff; color: #2b72d7; }
.academic-icon-gold { background: #fff2d8; color: #bf7b09; }

.academic-card-main {
  flex: 1;
  min-width: 0;
}

.academic-card-title {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.academic-card-title h3 {
  color: #153f3b;
  font-size: 15px;
  margin: 0;
}

.academic-meta {
  color: #5d776c;
  font-size: 12px;
  margin: 5px 0 9px;
}

.academic-card-copy {
  color: #5c756b;
  font-size: 12px;
}

.academic-attachments {
  border-top: 1px solid rgba(45, 123, 82, .1);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
}

.academic-attachments a,
.academic-attachments span {
  background: #eef7f2;
  border-radius: 7px;
  color: #087b66;
  font-size: 11px;
  padding: 6px 9px;
  text-decoration: none;
}

.academic-data-table-wrap {
  overflow-x: auto;
}

.academic-data-table {
  min-width: 760px;
}

.academic-data-table td strong,
.academic-data-table td small {
  display: block;
}

.academic-data-table td small {
  margin-top: 4px;
}

.academic-data-table td {
  vertical-align: top;
}

.academic-announcement-card .academic-card-copy {
  background: #fffaf0;
  border: 1px solid rgba(191, 123, 9, .13);
  border-radius: 9px;
  padding: 11px 12px;
}

.parent-ph-chart-card {
  background: #f8fcfa;
  border: 1px solid rgba(45, 123, 82, .13);
  border-radius: 13px;
  display: grid;
  gap: 18px;
  margin: 0 0 18px;
  padding: 16px;
}

.parent-ph-chart-card h3 {
  color: #164c44;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  margin: 3px 0 2px;
}

.parent-ph-chart-card small {
  color: #708276;
  font-size: 11px;
}

.parent-ph-chart {
  display: grid;
  gap: 10px;
}

.parent-ph-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(120px, 1fr) minmax(160px, 3fr) 45px;
}

.parent-ph-row > span,
.parent-ph-row > strong {
  color: #315c50;
  font-size: 11px;
}

.parent-ph-row > strong {
  text-align: right;
}

.parent-ph-track {
  background: #e4efe9;
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}

.parent-ph-track i {
  background: linear-gradient(90deg, #087b66, #42ad7a);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.parent-schedule-table {
  min-width: 680px;
}

@media (max-width: 620px) {
  .parent-ph-row {
    grid-template-columns: minmax(100px, 1fr) minmax(90px, 2fr) 38px;
  }
}

@media (max-width: 620px) {
  .parent-academic-context {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .academic-context-class {
    margin-left: 47px;
  }

  .academic-card-title {
    display: block;
  }

  .academic-card-title span {
    display: block;
    margin-top: 4px;
  }
}

/* Data-driven Parent Portal */
.parent-heading {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.parent-year-badge,
.parent-panel-note {
  background: #eaf7ee;
  border: 1px solid #d7ecdf;
  border-radius: 999px;
  color: #277650;
  font-size: 9px;
  font-weight: 700;
  padding: 6px 10px;
  white-space: nowrap;
}

.parent-child-picker {
  align-items: center;
  background: #fff;
  border: 1px solid #dce9e1;
  border-radius: 10px;
  box-shadow: 0 5px 18px rgba(17, 67, 49, .035);
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
  max-width: 610px;
  padding: 10px 12px;
}

.parent-child-picker label {
  color: #697a71;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.parent-child-picker select {
  background: #fff;
  border: 1px solid #cfe2d7;
  border-radius: 7px;
  color: #193b2d;
  font: inherit;
  font-size: 11px;
  min-height: 36px;
  min-width: 260px;
  outline: 0;
  padding: 8px 10px;
}

.parent-child-picker select:focus {
  border-color: #39916a;
  box-shadow: 0 0 0 3px rgba(57, 145, 106, .11);
}

.parent-child-picker small {
  color: #7b8b83;
  font-size: 9px;
  margin-left: auto;
  white-space: nowrap;
}

.parent-section-nav {
  align-items: center;
  border-bottom: 1px solid #e5ece8;
  display: flex;
  gap: 25px;
  min-height: 44px;
  overflow-x: auto;
  padding: 0 24px;
  white-space: nowrap;
}

.parent-section-nav a {
  align-items: center;
  border-bottom: 2px solid transparent;
  color: #697a71;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  min-height: 44px;
  text-decoration: none;
}

.parent-section-nav a:hover,
.parent-section-nav a.active {
  border-bottom-color: #267c59;
  color: #267c59;
}

.parent-empty-cell,
.parent-empty-copy {
  color: #7a8982;
  font-size: 10px;
  text-align: center;
}

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

.finance-panel > .panel-heading {
  margin-bottom: 0;
}

.parent-finance-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.finance-spp-box,
.finance-extra-box {
  margin-top: 0;
}

.finance-spp-box {
  background: #f7fbf8;
  border: 1px solid #e0eee6;
  border-radius: 10px;
  min-width: 0;
  padding: 13px;
}

.finance-spp-box h3,
.finance-extra-box h3 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  margin: 0 0 12px;
}

.finance-section-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.finance-section-heading > span {
  background: #f1f8f4;
  border: 1px solid #dcebe2;
  border-radius: 999px;
  color: #388064;
  font-size: 9px;
  font-weight: 700;
  padding: 5px 9px;
}

.finance-month-grid,
.finance-status-grid {
  align-items: stretch;
  display: grid;
  grid-template-columns: 70px repeat(12, minmax(48px, 1fr));
  overflow-x: auto;
}

.finance-month-grid {
  background: #f2f8f4;
  border: 1px solid #dcebe2;
  border-radius: 8px 8px 0 0;
  color: #285846;
  font-size: 10px;
  font-weight: 700;
  min-width: 650px;
  padding: 10px 0;
  text-align: center;
}

.finance-month-grid > div,
.finance-status-grid > div {
  padding: 0 5px;
}

.finance-month-grid strong {
  display: block;
  font-size: 10px;
}

.finance-month-label {
  text-align: left;
}

.finance-status-grid {
  border: 1px solid #dcebe2;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  color: #25392f;
  font-size: 11px;
  min-width: 650px;
  padding: 10px 0 2px;
  text-align: center;
}

.finance-status {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.finance-status.is-paid {
  color: #45b96a;
}

.finance-status.is-unpaid {
  color: #ff4b4b;
}

.finance-legend {
  align-items: center;
  color: #77857e;
  display: flex;
  font-size: 9px;
  gap: 14px;
  justify-content: flex-end;
  margin-top: 9px;
}

.finance-legend i {
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  margin-right: 3px;
  vertical-align: -1px;
}

.finance-legend i.is-paid {
  color: #45b96a;
}

.finance-legend i.is-unpaid {
  color: #ff4b4b;
}

.finance-extra-box {
  border-top: 1px solid #edf1ee;
  padding-top: 18px;
}

.finance-extra-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-extra-card {
  background: #f7fbf8;
  border: 1px solid #e0eee6;
  border-radius: 10px;
  color: var(--ink);
  min-height: 0;
  padding: 13px;
}

.finance-extra-card.blue {
  background: #f3f8ff;
  border-color: #dbe8f8;
}

.finance-extra-card.purple {
  background: #faf7ff;
  border-color: #e7ddf3;
}

.finance-extra-card header {
  align-items: center;
  display: flex;
  gap: 9px;
  margin-bottom: 12px;
}

.finance-card-icon {
  align-items: center;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(55, 102, 81, .1);
  border-radius: 8px;
  color: #398364;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.finance-extra-card strong,
.finance-extra-card small,
.finance-extra-card span,
.finance-extra-card b {
  display: block;
}

.finance-extra-card strong {
  color: var(--ink);
  font-size: 11px;
}

.finance-extra-card small {
  color: #6f7f77;
  font-size: 10px;
}

.finance-card-values {
  border-top: 1px solid rgba(55, 102, 81, .1);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 9px;
}

.finance-card-values span,
.finance-card-balance span {
  color: #6f7f77;
  font-size: 9px;
  margin-bottom: 3px;
}

.finance-card-values b {
  color: var(--ink);
  font-size: 12px;
}

.finance-card-balance {
  align-items: flex-end;
  border-top: 1px solid rgba(55, 102, 81, .1);
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
}

.finance-card-balance strong {
  font-size: 13px;
}

.finance-card-balance em {
  background: #e5f5e9;
  border-radius: 999px;
  color: #2d8a5c;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  padding: 4px 7px;
}

.finance-card-balance em.is-unpaid {
  background: #fff1df;
  color: #b66d28;
}

.finance-extra-card .finance-card-balance em {
  margin-left: auto;
}

.finance-extra-card .finance-card-balance em:not(:only-child) {
  white-space: nowrap;
}


.parent-empty-cell {
  padding: 24px 14px !important;
}

.parent-empty-copy {
  margin: 0;
  padding: 22px 14px;
}

.teacher-message-panel .parent-empty-copy {
  min-height: 80px;
}

@media (max-width:560px) {
  .parent-year-badge {
    align-self: flex-start;
  }

  .parent-child-picker {
    align-items: stretch;
    flex-direction: column;
    max-width: none;
  }

  .parent-child-picker select {
    min-width: 0;
    width: 100%;
  }

  .parent-child-picker small {
    margin-left: 0;
  }

  .parent-section-nav {
    gap: 18px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .finance-extra-grid {
    grid-template-columns: 1fr;
  }

  .parent-finance-grid {
    grid-template-columns: 1fr;
  }

  .parent-finance-grid .finance-spp-box {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-slide {
    transition: none;
    transform: none;
  }

  .slider-dot {
    transition: none;
  }
}

/* Parent portal */
.parent-page .sidebar-brand .brand-emblem {
  object-fit: contain;
}

.parent-topbar-title strong,
.parent-topbar-title small {
  display: block;
}

.parent-topbar-title strong {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
}

.parent-topbar-title small {
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}

.avatar-logo {
  background: #fff;
  border: 1px solid #e5dfbd;
  object-fit: contain;
  padding: 2px;
}

.parent-content {
  background: #fbfcfb;
}

.parent-heading {
  align-items: flex-start;
}

.parent-heading h1 {
  font-size: 30px;
}

.child-selector {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: flex;
  gap: 9px;
  min-width: 255px;
  padding: 8px 12px;
}

.child-selector .selector-label {
  color: var(--muted);
  font-size: 11px;
}

.child-selector strong {
  flex: 1;
  font-size: 11px;
}

.child-selector .avatar-small {
  margin: 0;
}

.parent-stat-grid {
  margin-bottom: 22px;
}

.parent-stat-grid .stat-card {
  min-height: 116px;
}

.parent-stat-grid .stat-card strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  white-space: nowrap;
}

.parent-stat-grid .stat-card span {
  font-size: 10px;
}

.parent-stat-grid .stat-card small {
  font-size: 9px;
}

.parent-grid {
  grid-template-columns: 1.05fr .95fr;
}

.parent-grid-equal {
  grid-template-columns: 1fr 1fr;
}

.parent-panel {
  min-width: 0;
}

.parent-dashboard-live-grid {
  margin-bottom: 20px;
}

.parent-dashboard-live-panel {
  min-width: 0;
}

.parent-dashboard-attendance-list,
.parent-dashboard-schedule-list {
  display: grid;
  gap: 8px;
}

.parent-dashboard-attendance-item {
  align-items: center;
  background: #f8fcfa;
  border: 1px solid #e3eee8;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 11px 12px;
}

.parent-dashboard-attendance-item > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.parent-dashboard-attendance-item > div > span,
.parent-dashboard-attendance-item > div > small {
  color: #77877f;
  font-size: 9px;
}

.parent-dashboard-attendance-item > div > strong {
  color: var(--ink);
  font-size: 11px;
}

.parent-dashboard-attendance-item > div > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parent-dashboard-attendance-item.is-present {
  background: #f1fbf4;
  border-color: #d7eddf;
}

.parent-dashboard-attendance-item.is-sick {
  background: #f2f7ff;
  border-color: #d9e6f8;
}

.parent-dashboard-attendance-item.is-permit {
  background: #fffaf0;
  border-color: #f1e4c8;
}

.parent-dashboard-attendance-item.is-absent {
  background: #fff5f3;
  border-color: #f1dcd8;
}

.parent-dashboard-attendance-item.is-holiday,
.parent-dashboard-attendance-item.is-empty {
  background: #fbfcfb;
  border-color: #e8eeeb;
}

.attendance-status.is-empty {
  background: #f2f4f3;
  color: #8a9790;
}

.parent-dashboard-schedule-item {
  margin-top: 0;
}

.parent-dashboard-schedule-item[hidden] {
  display: none !important;
}

.parent-dashboard-schedule-item.is-upcoming {
  background: #f8fbff;
  border-color: #dce8f8;
  border-left-color: #4d8fd4;
  box-shadow: none;
}

.parent-dashboard-schedule-item.is-upcoming:hover {
  background: #f1f7ff;
  border-color: #bdd5f0;
}

.parent-dashboard-schedule-item.is-upcoming .admin-schedule-live-status {
  color: #4d78ae;
}

.parent-dashboard-schedule-empty {
  border: 1px dashed #dce8e1;
  border-radius: 9px;
  color: #899891;
  font-size: 10px;
  margin: 0;
  padding: 18px 12px;
  text-align: center;
}

.parent-dashboard-schedule-empty[hidden] {
  display: none;
}

.parent-table-wrap,
.simple-table-wrap {
  overflow-x: auto;
}

.parent-table {
  border-collapse: collapse;
  min-width: 560px;
  width: 100%;
}

.parent-table th {
  color: #84918c;
  font-size: 9px;
  font-weight: 600;
  padding: 0 7px 11px;
  text-align: left;
  white-space: nowrap;
}

.parent-table td {
  border-top: 1px solid #edf1ee;
  color: #74817c;
  font-size: 10px;
  padding: 10px 7px;
  white-space: nowrap;
}

.parent-table td:first-child {
  color: var(--ink);
}

.activity-icon {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  font-size: 14px;
  height: 27px;
  justify-content: center;
  margin-right: 7px;
  vertical-align: middle;
  width: 27px;
}

.activity-icon.green {
  background: #e3f5e9;
  color: #2f946a;
}

.activity-icon.blue {
  background: #e7f1fc;
  color: #4583c0;
}

.activity-icon.purple {
  background: #f1eafa;
  color: #8056b3;
}

.activity-icon.gold {
  background: #fff1dc;
  color: #ba8126;
}

.teacher-message-panel {
  padding-bottom: 14px;
}

.featured-message {
  background: #fffaea;
  border: 1px solid #f3e9c9;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  padding: 14px;
}

.message-star {
  color: #ce9d26;
  font-size: 21px;
}

.featured-message strong {
  color: #634b18;
  display: block;
  font-size: 11px;
}

.featured-message p {
  color: #6f6c62;
  font-size: 10px;
  line-height: 1.55;
  margin: 7px 0;
}

.featured-message small {
  color: #918875;
  font-size: 9px;
  line-height: 1.55;
}

.message-list>div {
  align-items: flex-start;
  border-bottom: 1px solid #edf1ee;
  display: flex;
  gap: 10px;
  padding: 9px 0;
}

.message-list>div:last-child {
  border-bottom: 0;
}

.message-icon {
  align-items: center;
  background: #e8f1fb;
  border-radius: 7px;
  color: #3f80c3;
  display: flex;
  font-size: 12px;
  height: 29px;
  justify-content: center;
  letter-spacing: 1px;
  width: 29px;
}

.message-list p {
  color: var(--ink);
  font-size: 10px;
  line-height: 1.45;
  margin: 0;
}

.message-list small {
  color: var(--muted);
  display: block;
  font-size: 8px;
  margin-top: 4px;
}

.message-all {
  align-items: center;
  border: 1px solid #e5ebe7;
  border-radius: 7px;
  color: var(--ink);
  display: flex;
  font-size: 10px;
  font-weight: 700;
  justify-content: space-between;
  margin-top: 5px;
  padding: 9px 12px;
}

.message-all span {
  font-size: 17px;
}

.simple-table {
  min-width: 550px;
}

.simple-table td {
  padding: 10px 7px;
}

.certificate-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.certificate-list>div {
  align-items: center;
  border-bottom: 1px solid #edf1ee;
  display: flex;
  gap: 8px;
  padding: 9px 0;
}

.certificate-list>div:last-child {
  border-bottom: 0;
}

.certificate-icon {
  align-items: center;
  background: #e4f5e9;
  border-radius: 6px;
  color: #319268;
  display: flex;
  font-size: 15px;
  height: 27px;
  justify-content: center;
  width: 27px;
}

.certificate-list strong {
  color: var(--ink);
  flex: 1;
  font-size: 9px;
}

.certificate-list strong small {
  color: var(--muted);
  display: block;
  font-size: 8px;
  font-weight: 400;
  margin-top: 3px;
}

.certificate-list div>span:nth-last-of-type(1) {
  color: var(--muted);
  font-size: 8px;
}

.certificate-list b {
  background: #e6f5eb;
  border-radius: 5px;
  color: #338459;
  font-size: 8px;
  padding: 5px 7px;
}

.history-panel {
  margin-bottom: 20px;
}

.certificate-panel {
  margin-bottom: 20px;
}

.parent-history-filters {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin: 0 0 12px;
}

.parent-history-filters label {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 8px;
  font-weight: 700;
  gap: 4px;
}

.parent-history-filters select,
.parent-history-filters input {
  background: #fff;
  border: 1px solid #dce9e1;
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 9px;
  min-height: 29px;
  min-width: 115px;
  outline: 0;
  padding: 5px 8px;
}

.parent-history-filters select:focus,
.parent-history-filters input:focus {
  border-color: #39916a;
  box-shadow: 0 0 0 3px rgba(57, 145, 106, .1);
}

.parent-filter-reset {
  align-items: center;
  color: var(--forest);
  display: flex;
  font-size: 9px;
  font-weight: 700;
  min-height: 29px;
  padding: 0 5px;
  text-decoration: none;
}

.parent-pagination {
  align-items: center;
  display: flex;
  gap: 4px;
}

.parent-pagination a {
  align-items: center;
  border: 1px solid #dce9e1;
  border-radius: 5px;
  color: var(--muted);
  display: inline-flex;
  font-size: 9px;
  height: 25px;
  justify-content: center;
  min-width: 25px;
  text-decoration: none;
}

.parent-pagination a:hover,
.parent-pagination a.active {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}

.filter-row {
  display: flex;
  gap: 7px;
}

.filter-row button {
  background: #fff;
  border: 1px solid #e2ebe6;
  border-radius: 6px;
  color: #70807a;
  font-size: 9px;
  padding: 7px 9px;
}

.history-table {
  min-width: 820px;
}

.history-table td:last-child {
  color: var(--forest);
  font-size: 19px;
  text-align: right;
}

.table-footer {
  align-items: center;
  color: #9aa6a1;
  display: flex;
  font-size: 9px;
  justify-content: space-between;
  margin-top: 15px;
}

.table-footer span {
  color: #8a9691;
  word-spacing: 9px;
}

.table-footer b {
  background: var(--forest);
  border-radius: 5px;
  color: #fff;
  padding: 5px 8px;
}

.support-panel {
  margin-bottom: 0;
}

.parent-guidance-panel {
  margin-top: 20px;
}

.parent-guidance-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}

.parent-guidance-grid > a {
  border: 1px solid var(--line);
  border-radius: 9px;
  color: inherit;
  display: block;
  min-height: 120px;
  padding: 13px;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}

.parent-guidance-grid > a:hover {
  border-color: #b7d9c6;
  transform: translateY(-1px);
}

.parent-guidance-grid strong,
.parent-guidance-grid small {
  display: block;
}

.parent-guidance-grid strong {
  color: var(--ink);
  font-size: 10px;
  margin-top: 8px;
}

.parent-guidance-grid small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  margin-top: 5px;
}

.support-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}

.support-grid>div {
  border: 1px solid var(--line);
  border-radius: 9px;
  min-height: 120px;
  padding: 13px;
}

.support-icon {
  align-items: center;
  border-radius: 8px;
  display: flex;
  font-size: 22px;
  height: 38px;
  justify-content: center;
  margin-bottom: 9px;
  width: 38px;
}

.support-icon.green {
  background: #e3f5e9;
  color: #299066;
}

.support-icon.blue {
  background: #e7f1fc;
  color: #3e82c3;
}

.support-icon.purple {
  background: #f1eafa;
  color: #8059b6;
}

.support-icon.gold {
  background: #fff1dc;
  color: #bd8426;
}

.support-grid strong,
.support-grid small {
  display: block;
}

.support-grid strong {
  color: var(--ink);
  font-size: 10px;
}

.support-grid small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
  margin-top: 5px;
}

@media (max-width:900px) {

  .parent-grid,
  .parent-grid-equal {
    grid-template-columns: 1fr;
  }

  .parent-finance-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .parent-finance-grid .finance-spp-box {
    grid-column: 1 / -1;
  }

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

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

  .parent-heading {
    gap: 18px;
  }

  .child-selector {
    min-width: 220px;
  }
}

@media (max-width:560px) {
  .parent-topbar-title {
    display: none;
  }

  .parent-heading h1 {
    font-size: 25px;
  }

  .child-selector {
    min-width: 0;
    width: 100%;
  }

  .parent-heading {
    width: 100%;
  }

  .parent-stat-grid .stat-card strong {
    font-size: 16px;
  }

  .filter-row {
    display: none;
  }

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

  .parent-guidance-grid {
    grid-template-columns: 1fr;
  }

  .support-grid>div {
    min-height: auto;
  }

  .table-footer {
    gap: 7px;
  }

  .table-footer small:first-child {
    display: none;
  }
}

.parent-sidebar {
  overflow-y: auto;
}

.parent-menu-group {
  margin: 4px 0;
}

.parent-menu-group summary {
  align-items: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  gap: 11px;
  list-style: none;
  padding: 11px 12px;
  transition: .2s;
}

.parent-menu-group summary::-webkit-details-marker {
  display: none;
}

.parent-menu-group summary:hover,
.parent-menu-group summary.is-active {
  background: rgba(80, 196, 158, .17);
  color: #fff;
}

.parent-menu-group summary.is-active {
  box-shadow: inset 3px 0 var(--gold);
}

.menu-chevron {
  color: #a6d8c5;
  font-size: 15px;
  margin-left: auto;
  transition: transform .2s;
}

.parent-menu-group:not([open]) .menu-chevron {
  transform: rotate(180deg);
}

.parent-submenu {
  padding: 3px 0 5px 40px;
}

.parent-submenu a {
  align-items: flex-start;
  color: rgba(255, 255, 255, .68);
  display: flex;
  font-size: 11px;
  gap: 10px;
  line-height: 1.35;
  padding: 7px 8px;
}

.parent-submenu a:hover,
.parent-submenu a.active {
  color: #fff;
}

.parent-submenu a>span:first-child {
  color: #a6d8c5;
  font-size: 15px;
  line-height: 12px;
}

.parent-submenu a.active>span:first-child {
  color: var(--gold);
}

.parent-submenu a small {
  color: rgba(255, 255, 255, .45);
  display: block;
  font-size: 9px;
  margin-top: 2px;
}

.parent-badge-item b {
  background: #4eb45d;
  border-radius: 13px;
  color: #fff;
  font-size: 10px;
  margin-left: auto;
  padding: 5px 9px;
}

.parent-badge-item:hover b {
  background: #65c873;
}

.profile-dropdown {
  position: relative;
}

.profile-dropdown summary {
  list-style: none;
}

.profile-dropdown summary::-webkit-details-marker {
  display: none;
}

.profile-dropdown-menu {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 14px 28px rgba(16, 67, 57, .12);
  min-width: 165px;
  padding: 7px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
}

.profile-dropdown-menu a {
  align-items: center;
  border-radius: 6px;
  color: var(--ink);
  display: flex;
  font-size: 11px;
  gap: 10px;
  padding: 10px 11px;
}

.profile-dropdown-menu a:hover {
  background: #f1f7f4;
  color: var(--forest);
}

.profile-dropdown-menu a span {
  color: var(--forest);
  font-size: 16px;
  width: 17px;
}

.nav-icon,
.logout-icon,
.dropdown-icon,
.header-icon,
.card-icon,
.table-icon,
.filter-icon {
  display: inline-block;
  flex: 0 0 auto;
}

.nav-icon {
  color: #a6d8c5;
  height: 17px;
  width: 17px;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon,
.parent-menu-group summary:hover .nav-icon,
.parent-menu-group[open] summary .nav-icon {
  color: #d7f2e7;
}

.header-icon {
  height: 20px;
  width: 20px;
}

.card-icon {
  height: 23px;
  width: 23px;
}

.table-icon {
  height: 15px;
  width: 15px;
}

.guru-topbar-tool {
  position: relative;
}

.guru-notification-popover {
  background: #fff;
  border: 1px solid #dce9e2;
  border-radius: 13px;
  box-shadow: 0 18px 45px rgba(16, 67, 57, .18);
  position: absolute;
  right: -8px;
  top: calc(100% + 13px);
  width: 320px;
  z-index: 90;
}

.guru-notification-popover[hidden],
.guru-search-backdrop[hidden] {
  display: none;
}

.guru-popover-heading {
  align-items: flex-start;
  border-bottom: 1px solid #edf2ef;
  display: flex;
  justify-content: space-between;
  padding: 14px 15px 11px;
}

.guru-popover-heading strong,
.guru-popover-heading small {
  display: block;
}

.guru-popover-heading strong {
  color: #174c42;
  font-size: 12px;
}

.guru-popover-heading small {
  color: #829389;
  font-size: 9px;
  margin-top: 4px;
}

.guru-popover-heading > button {
  background: transparent;
  border: 0;
  color: #829389;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
}

.guru-notification-list {
  max-height: 330px;
  overflow-y: auto;
  padding: 5px 8px;
}

.guru-notification-item {
  align-items: flex-start;
  border-bottom: 1px solid #f0f4f1;
  display: flex;
  gap: 9px;
  padding: 10px 7px;
}

.guru-notification-item:hover {
  background: #f6fbf8;
  border-radius: 8px;
}

.guru-notification-icon {
  align-items: center;
  background: #e5f2ff;
  border-radius: 8px;
  color: #347cc6;
  display: inline-flex;
  flex: 0 0 auto;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.guru-notification-item > span:last-child {
  min-width: 0;
}

.guru-notification-item strong,
.guru-notification-item small,
.guru-notification-item em {
  display: block;
}

.guru-notification-item strong {
  color: #365c4d;
  font-size: 10px;
}

.guru-notification-item small {
  color: #71847a;
  font-size: 9px;
  line-height: 1.45;
  margin-top: 3px;
  max-height: 28px;
  overflow: hidden;
}

.guru-notification-item em {
  color: #9aa9a0;
  font-size: 8px;
  font-style: normal;
  margin-top: 4px;
}

.guru-notification-empty {
  color: #829389;
  padding: 17px 8px;
}

.guru-notification-empty strong,
.guru-notification-empty small {
  display: block;
}

.guru-notification-empty strong {
  color: #365c4d;
  font-size: 10px;
}

.guru-notification-empty small {
  font-size: 9px;
  margin-top: 4px;
}

.guru-notification-clear {
  background: #f4faf6;
  border: 0;
  border-top: 1px solid #edf2ef;
  color: #27845c;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  padding: 10px;
  width: 100%;
}

.guru-search-backdrop {
  align-items: flex-start;
  background: rgba(8, 34, 26, .58);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 90px 18px 20px;
  position: fixed;
  z-index: 150;
}

.guru-search-dialog {
  background: #fff;
  border: 1px solid #dbe8e0;
  border-radius: 15px;
  box-shadow: 0 24px 70px rgba(13, 53, 40, .25);
  max-height: calc(100vh - 120px);
  max-width: 540px;
  overflow: hidden;
  width: 100%;
}

.guru-search-input {
  align-items: center;
  background: #f5faf7;
  border: 1px solid #dceae2;
  border-radius: 9px;
  color: #27845c;
  display: flex;
  gap: 8px;
  margin: 13px 15px 9px;
  padding: 9px 11px;
}

.guru-search-input input {
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  outline: 0;
  width: 100%;
}

.guru-search-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 0 8px 8px;
}

.guru-search-results a {
  align-items: center;
  border-bottom: 1px solid #f0f4f1;
  display: flex;
  gap: 10px;
  padding: 10px 8px;
}

.guru-search-results a:hover {
  background: #f4faf6;
  border-radius: 8px;
}

.guru-search-result-icon {
  align-items: center;
  background: #e5f2ff;
  border-radius: 7px;
  color: #347cc6;
  display: inline-flex;
  flex: 0 0 auto;
  height: 27px;
  justify-content: center;
  width: 27px;
}

.guru-search-results a > span:nth-child(2),
.guru-profile-grid > div {
  min-width: 0;
}

.guru-search-results strong,
.guru-search-results small {
  display: block;
}

.guru-search-results strong {
  color: #365c4d;
  font-size: 10px;
}

.guru-search-results small {
  color: #829389;
  font-size: 9px;
  margin-top: 3px;
}

.guru-search-results b {
  color: #27845c;
  font-size: 16px;
  margin-left: auto;
}

.guru-search-empty {
  color: #829389;
  font-size: 10px;
  margin: 15px;
  text-align: center;
}

.guru-search-open {
  overflow: hidden;
}

.guru-profile-link {
  border-top: 0;
  padding-top: 10px;
}

.guru-profile-panel {
  max-width: 1120px;
  padding: 28px 30px;
}

.guru-profile-columns {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.guru-profile-column {
  min-width: 0;
}

.guru-profile-column-personal .guru-profile-grid {
  grid-template-columns: 1fr;
}

.guru-profile-column-personal .guru-profile-social-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guru-profile-column-assignment .guru-profile-assignment-heading {
  margin-top: 0;
}

.guru-profile-header {
  align-items: center;
  background: linear-gradient(135deg, #f3fbf6, #fbfdfb);
  border: 1px solid #deede4;
  border-radius: 16px;
  display: flex;
  gap: 15px;
  min-height: 112px;
  padding: 20px 22px;
}

.guru-profile-avatar {
  align-items: center;
  background: #dff3e7;
  border: 1px solid #c9e7d5;
  border-radius: 50%;
  color: #27845c;
  display: inline-flex;
  font-size: 18px;
  font-weight: 800;
  flex: 0 0 68px;
  height: 68px;
  justify-content: center;
  width: 68px;
}

.guru-avatar-image {
  object-fit: cover;
  overflow: hidden;
}

.guru-avatar-fallback[hidden],
.guru-profile-avatar-fallback[hidden] {
  display: none !important;
}

.guru-profile-avatar-image {
  object-fit: cover;
  overflow: hidden;
}

.guru-profile-header h2 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.12;
  margin: 4px 0 0;
}

.guru-profile-header p {
  color: var(--muted);
  font-size: 11px;
  margin: 5px 0 0;
}

.guru-profile-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

.guru-profile-grid > div {
  background: #fbfdfb;
  border: 1px solid #e1eee7;
  border-radius: 11px;
  min-height: 61px;
  padding: 11px 13px;
}

.guru-profile-grid span,
.guru-profile-grid strong {
  display: block;
}

.guru-profile-grid span {
  color: #829389;
  font-size: 9px;
}

.guru-profile-grid strong {
  color: #365c4d;
  font-size: 11px;
  line-height: 1.45;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.guru-profile-grid .profile-status {
  color: #27845c;
}

.guru-profile-note {
  background: #f4faf6;
  border: 1px solid #deede4;
  border-radius: 9px;
  color: #71847a;
  font-size: 10px;
  margin-top: 16px;
  padding: 11px 12px;
}

.guru-profile-section-heading {
  align-items: flex-end;
  border-bottom: 1px solid #edf2ef;
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  padding-bottom: 10px;
}

.guru-profile-section-heading h3,
.guru-profile-social h3 {
  color: #174c42;
  font-size: 15px;
  margin: 3px 0 0;
}

.guru-profile-grid-wide {
  grid-column: 1 / -1;
}

.guru-profile-assignment-heading {
  margin-top: 26px;
}

.guru-profile-assignment-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.guru-profile-assignment-card {
  background: #fbfdfb;
  border: 1px solid #deede4;
  border-radius: 12px;
  min-width: 0;
  padding: 13px;
}

.guru-profile-assignment-title {
  align-items: center;
  border-bottom: 1px solid #e7f0ea;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding-bottom: 9px;
}

.guru-profile-assignment-title strong {
  color: #275f4f;
  font-size: 11px;
}

.guru-profile-assignment-title span {
  background: #e4f3e9;
  border-radius: 999px;
  color: #27845c;
  font-size: 9px;
  padding: 4px 7px;
  white-space: nowrap;
}

.guru-profile-assignment-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.guru-profile-assignment-list div {
  border-bottom: 1px solid #edf3ef;
  padding-bottom: 7px;
}

.guru-profile-assignment-list div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.guru-profile-assignment-list strong,
.guru-profile-assignment-list small,
.guru-profile-empty,
.guru-profile-more {
  display: block;
}

.guru-profile-assignment-list strong {
  color: #365c4d;
  font-size: 10px;
}

.guru-profile-assignment-list small,
.guru-profile-empty,
.guru-profile-more {
  color: #829389;
  font-size: 9px;
  line-height: 1.5;
  margin: 3px 0 0;
}

.guru-profile-empty {
  margin-top: 13px;
}

.guru-profile-more {
  color: #27845c;
  font-weight: 700;
}

.guru-profile-social {
  border-top: 1px solid #edf2ef;
  margin-top: 24px;
  padding-top: 18px;
}

.guru-profile-social-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 13px;
}

.guru-profile-social-grid div {
  background: #f8fcf9;
  border: 1px solid #e2eee7;
  border-radius: 9px;
  padding: 10px;
}

.guru-profile-social-grid span,
.guru-profile-social-grid strong {
  display: block;
}

.guru-profile-social-grid span {
  color: #829389;
  font-size: 9px;
}

.guru-profile-social-grid strong {
  color: #365c4d;
  font-size: 10px;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

@media (max-width: 860px) {
  .guru-profile-panel {
    padding: 22px;
  }

  .guru-profile-columns {
    grid-template-columns: 1fr;
  }

  .guru-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guru-profile-assignment-grid {
    grid-template-columns: 1fr;
  }

  .guru-profile-social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .guru-notification-popover {
    position: fixed;
    right: 12px;
    top: 64px;
    width: min(320px, calc(100vw - 24px));
  }

  .guru-search-backdrop {
    padding: 70px 12px 14px;
  }

  .guru-profile-grid {
    grid-template-columns: 1fr;
  }

  .guru-profile-column-personal .guru-profile-grid {
    grid-template-columns: 1fr;
  }

  .guru-profile-assignment-grid,
  .guru-profile-social-grid {
    grid-template-columns: 1fr;
  }

  .guru-profile-grid-wide {
    grid-column: auto;
  }
}

.logout-icon {
  height: 16px;
  width: 16px;
}

.dropdown-icon {
  color: var(--forest);
  height: 16px;
  width: 16px;
}

.profile-dropdown-menu a:hover .dropdown-icon {
  color: var(--forest-2);
}

.message-star-icon {
  color: var(--gold);
  height: 20px;
  width: 20px;
}

.filter-icon {
  height: 12px;
  margin-right: 4px;
  vertical-align: -2px;
  width: 12px;
}

.search-icon {
  color: #8e9c96;
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

.help-icon {
  color: #dfbb61;
  flex: 0 0 auto;
  height: 20px;
  width: 20px;
}

.help-card .help-icon {
  margin-right: 0;
}

.button-icon {
  height: 16px;
  width: 16px;
}

/* Sidebar drawer on small screens: the navigation remains fixed while the page scrolls. */
.sidebar-overlay {
  display: none;
}

@media (max-width:900px) {
  .sidebar {
    display: flex;
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 244px;
  }

  .sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-overlay {
    background: rgba(4, 33, 30, .48);
    display: block;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .25s ease;
    z-index: 30;
  }

  .sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-open {
    overflow: hidden;
  }

  .mobile-menu {
    align-items: center;
    display: inline-flex;
    justify-content: center;
  }

  .main-panel {
    margin-left: 0;
    width: 100%;
  }
}

/* Role-aware MVP modules */
.module-heading {
  margin-bottom: 22px;
}

.module-hero {
  align-items: center;
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding: 20px 22px;
}

.module-hero-icon,
.module-empty-icon {
  align-items: center;
  background: #e3f4eb;
  border-radius: 12px;
  color: var(--forest);
  display: flex;
  flex: 0 0 auto;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.module-hero h2,
.module-empty h3 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  margin: 0;
}

.module-hero p:last-child,
.module-empty p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  margin: 5px 0 0;
}

.module-status {
  color: #31845c;
  font-size: 10px;
  font-weight: 700;
  margin-left: auto;
  white-space: nowrap;
}

.module-status i {
  background: #45a873;
  border-radius: 50%;
  display: inline-block;
  height: 7px;
  margin-right: 5px;
  width: 7px;
}

.module-stat-grid {
  margin-bottom: 20px;
}

.module-content-panel {
  margin-bottom: 20px;
}

.psychologist-development-panel {
  margin-bottom: 20px;
}

.panel-heading-copy {
  color: var(--muted);
  font-size: 11px;
  margin: 4px 0 0;
}

.psychologist-development-toolbar {
  margin: 16px 0;
}

.psychologist-development-table-wrap {
  overflow-x: auto;
}

.psychologist-development-table-wrap table {
  min-width: 980px;
}

.psychologist-development-table-wrap td,
.psychologist-development-table-wrap th {
  vertical-align: middle;
}

.psychologist-development-table-wrap td strong,
.psychologist-development-table-wrap td small {
  display: block;
}

.psychologist-development-table-wrap td small {
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}

.psychologist-development-footer {
  margin-top: 14px;
}

.psychologist-development-modal {
  align-items: center;
  background: rgba(7, 35, 31, .64);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 1500;
}

.psychologist-development-modal[hidden] {
  display: none;
}

.psychologist-development-dialog {
  background: #fff;
  border: 1px solid #d8e9e0;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(7, 55, 43, .27);
  max-width: 620px;
  width: 100%;
}

.psychologist-development-detail {
  padding: 20px 24px;
}

.psychologist-development-profile {
  border-bottom: 1px solid #e7efeb;
  padding-bottom: 15px;
}

.psychologist-development-profile strong,
.psychologist-development-profile small {
  display: block;
}

.psychologist-development-profile strong {
  color: var(--ink);
  font-family: var(--font-display, Georgia, serif);
  font-size: 22px;
}

.psychologist-development-profile small,
.psychologist-development-summary small,
.psychologist-development-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.psychologist-development-metrics {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 16px 0;
}

.psychologist-development-metrics div {
  background: #f1f8f4;
  border: 1px solid #dcebe4;
  border-radius: 9px;
  padding: 11px;
}

.psychologist-development-metrics span,
.psychologist-development-metrics strong,
.psychologist-development-summary span,
.psychologist-development-summary strong {
  display: block;
}

.psychologist-development-metrics span,
.psychologist-development-summary span {
  color: var(--muted);
  font-size: 10px;
}

.psychologist-development-metrics strong {
  color: var(--ink);
  font-size: 20px;
  margin-top: 4px;
}

.psychologist-development-summary {
  background: #fbf8ed;
  border: 1px solid #efe2b8;
  border-radius: 10px;
  padding: 13px;
}

.psychologist-development-summary strong {
  color: var(--ink);
  margin: 4px 0;
}

.psychologist-development-latest-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.psychologist-development-latest {
  background: #fbfdfc;
  border: 1px solid #e1eee8;
  border-radius: 10px;
  padding: 11px 13px;
}

.psychologist-development-latest > div {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.psychologist-development-latest strong {
  color: var(--ink);
  font-size: 12px;
}

.psychologist-development-latest small {
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

.psychologist-development-latest p {
  color: #365b53;
  font-size: 11px;
  line-height: 1.55;
  margin: 7px 0 0;
}

.psychologist-development-note {
  margin: 16px 0 0;
}

.psychologist-development-dialog .psychologist-dialog-actions {
  border-top: 1px solid #e7efeb;
  display: flex;
  justify-content: flex-end;
  padding: 14px 24px;
}

.psychologist-development-modal-open {
  overflow: hidden;
}

.psychologist-report-tabs {
  border-bottom: 1px solid #dceae5;
  display: flex;
  gap: 18px;
  margin: 0 0 16px;
}

.psychologist-report-tabs a,
.psychologist-report-tabs span {
  color: var(--muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  padding: 0 2px 10px;
  text-decoration: none;
}

.psychologist-report-tabs a:hover,
.psychologist-report-tabs a.is-active,
.psychologist-report-tabs span.is-active {
  border-bottom: 2px solid #07866d;
  color: #087f61;
}

.psychologist-report-subtabs {
  border-bottom: 0;
  gap: 12px;
  margin: 0 0 12px;
}

.psychologist-report-subtabs span,
.psychologist-report-subtabs a {
  background: #f1f8f4;
  border: 1px solid #dcebe4;
  border-radius: 999px;
  padding: 7px 10px;
}

.psychologist-report-subtabs a.is-active,
.psychologist-report-subtabs span.is-active {
  background: #e1f4ec;
  border-color: #bde3d3;
  border-bottom-width: 1px;
}

.psychologist-monthly-report-panel {
  margin-bottom: 20px;
}

.psychologist-monthly-report-filters {
  align-items: flex-end;
  background: #f8fbfa;
  border: 1px solid #e1eee8;
  border-radius: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr .7fr 1fr 1.7fr auto;
  margin-bottom: 14px;
  padding: 12px;
}

.psychologist-monthly-report-filters label {
  display: grid;
  gap: 5px;
}

.psychologist-monthly-report-filters label > span {
  color: #37655c;
  font-size: 10px;
  font-weight: 700;
}

.psychologist-monthly-report-filters input,
.psychologist-monthly-report-filters select {
  min-height: 34px;
}

.psychologist-monthly-report-search {
  min-width: 0;
}

.psychologist-monthly-report-summary {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 14px;
}

.psychologist-monthly-report-summary div {
  background: #f4faf7;
  border: 1px solid #deede7;
  border-radius: 10px;
  padding: 10px 12px;
}

.psychologist-monthly-report-summary span,
.psychologist-monthly-report-summary strong {
  display: block;
}

.psychologist-monthly-report-summary span {
  color: var(--muted);
  font-size: 10px;
}

.psychologist-monthly-report-summary strong {
  color: var(--ink);
  font-family: var(--font-display, Georgia, serif);
  font-size: 20px;
  margin-top: 4px;
}

.psychologist-monthly-report-table-wrap {
  overflow-x: auto;
}

.psychologist-monthly-report-table-wrap table {
  min-width: 1120px;
}

.psychologist-monthly-report-table-wrap td {
  line-height: 1.45;
  max-width: 220px;
  vertical-align: top;
  white-space: normal;
}

.psychologist-monthly-report-table-wrap td strong,
.psychologist-monthly-report-table-wrap td small {
  display: block;
}

.psychologist-monthly-report-table-wrap td small {
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}

.psychologist-monthly-report-footer {
  margin-top: 14px;
}

@media (max-width: 640px) {
  .psychologist-development-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .psychologist-development-latest > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .psychologist-development-latest small {
    text-align: left;
  }

  .psychologist-monthly-report-filters {
    grid-template-columns: 1fr 1fr;
  }

  .psychologist-monthly-report-search {
    grid-column: span 2;
  }

  .psychologist-monthly-report-filters > .button {
    width: 100%;
  }

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

@media print {
  body.psychologist-monthly-report-printing * {
    visibility: hidden;
  }

  body.psychologist-monthly-report-printing .psychologist-monthly-report-panel,
  body.psychologist-monthly-report-printing .psychologist-monthly-report-panel * {
    visibility: visible;
  }

  body.psychologist-monthly-report-printing .psychologist-monthly-report-panel {
    display: block !important;
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: auto;
  }

  body.psychologist-monthly-report-printing .psychologist-monthly-report-panel .panel-heading-actions,
  body.psychologist-monthly-report-printing .psychologist-report-tabs,
  body.psychologist-monthly-report-printing .psychologist-report-subtabs,
  body.psychologist-monthly-report-printing .psychologist-monthly-report-filters,
  body.psychologist-monthly-report-printing .psychologist-monthly-report-footer {
    display: none !important;
  }

  body.psychologist-monthly-report-printing .psychologist-monthly-report-table-wrap {
    overflow: visible;
  }

  body.psychologist-monthly-report-printing .psychologist-monthly-report-table-wrap table {
    min-width: 0;
  }
}

.psychologist-scope-panel,
.psychologist-input-panel,
.psychologist-records-panel {
  margin-bottom: 20px;
}

.psychologist-input-source {
  display: none !important;
}

.psychologist-input-panel,
.psychologist-records-panel {
  padding: 20px 22px;
}

.psychologist-module-form {
  max-width: none;
}

.panel-heading-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: flex-end;
}

.psychologist-module-modal {
  align-items: center;
  background: rgba(7, 35, 31, .64);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 1500;
}

.psychologist-module-modal[hidden] {
  display: none;
}

.psychologist-module-dialog {
  background: #fff;
  border: 1px solid #d8e9e0;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(7, 55, 43, .27);
  max-height: min(88vh, 720px);
  max-width: 780px;
  overflow: auto;
  width: calc(100vw - 40px);
}

.psychologist-module-form-body {
  padding: 20px 24px 22px;
}

.psychologist-module-form-body .psychologist-module-form {
  max-width: none;
}

.psychologist-module-modal-open {
  overflow: hidden;
}

.psychologist-module-form select {
  background: #fff;
  border: 1px solid #dfe9e3;
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  min-height: 40px;
  outline: 0;
  padding: 10px 12px;
}

.psychologist-module-form select:focus {
  border-color: #6bad8d;
  box-shadow: 0 0 0 3px rgba(48, 145, 104, .1);
}

.psychologist-student-picker {
  background: #f7fbf9;
  border: 1px solid #dcebe4;
  border-radius: 12px;
  padding: 14px;
}

.psychologist-student-picker-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, .85fr) minmax(260px, 1.15fr);
}

.psychologist-autocomplete {
  position: relative;
}

.psychologist-autocomplete input[data-student-search] {
  width: 100%;
}

.psychologist-autocomplete-list {
  background: #fff;
  border: 1px solid #cfe3d9;
  border-radius: 9px;
  box-shadow: 0 14px 28px rgba(7, 55, 43, .14);
  left: 0;
  max-height: 250px;
  overflow-y: auto;
  padding: 5px;
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  z-index: 12;
}

.psychologist-autocomplete-list[hidden] {
  display: none;
}

.psychologist-autocomplete-option {
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--ink);
  cursor: pointer;
  display: block;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}

.psychologist-autocomplete-option:hover,
.psychologist-autocomplete-option:focus {
  background: #edf8f2;
  outline: 0;
}

.psychologist-autocomplete-option strong,
.psychologist-autocomplete-option small {
  display: block;
}

.psychologist-autocomplete-option strong {
  font-size: 12px;
}

.psychologist-autocomplete-option small {
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
}

@media (max-width: 680px) {
  .psychologist-student-picker-grid {
    grid-template-columns: 1fr;
  }
}

.psychologist-record-table {
  overflow-x: auto;
}

.psychologist-record-table table {
  min-width: 920px;
  width: 100%;
  table-layout: fixed;
}

.psychologist-record-table thead th {
  background: #f3f9f6;
  border-bottom: 1px solid #dcebe4;
  color: #5b746a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 11px 12px;
  text-transform: uppercase;
}

.psychologist-record-table tbody td {
  border-bottom: 1px solid #e7efeb;
  color: #25483d;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 13px 12px;
  vertical-align: middle;
}

.psychologist-assessment-input-source .psychologist-module-form {
    max-width: none;
}

.psychologist-assessment-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
}

.psychologist-assessment-card {
    background: #f7fbf9;
    border: 1px solid #dcebe4;
    border-radius: 12px;
    display: grid;
    gap: 9px;
    min-width: 0;
    overflow: hidden;
    padding: 13px;
}

.psychologist-assessment-card > div,
.psychologist-assessment-card label,
.psychologist-assessment-card input,
.psychologist-assessment-card select,
.psychologist-assessment-card textarea {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.psychologist-assessment-card strong,
.psychologist-assessment-card small {
    display: block;
}

.psychologist-assessment-card strong {
    color: #174e43;
    font-size: 12px;
}

.psychologist-assessment-card small {
    color: #71847e;
    font-size: 10px;
    line-height: 1.45;
    margin-top: 4px;
}

.psychologist-assessment-card label {
    display: grid;
    gap: 5px;
}

.psychologist-assessment-card label > span {
    color: #5b746a;
    font-size: 10px;
    font-weight: 800;
}

.psychologist-assessment-card textarea {
    min-height: 56px;
}

.psychologist-module-dialog,
.psychologist-module-form-body,
.psychologist-module-form,
.psychologist-module-form .form-grid {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.psychologist-assessment-count {
    border-radius: 999px;
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    margin: 2px 4px 2px 0;
    padding: 4px 7px;
}

.psychologist-assessment-count-pb {
    background: #fff0e6;
    color: #a65f28;
}

.psychologist-assessment-count-rr {
    background: #eef3ff;
    color: #4269a8;
}

.psychologist-assessment-count-b {
    background: #e4f5ec;
    color: #147453;
}

.psychologist-assessment-records-panel .panel-heading-copy {
    margin-top: 4px;
}

@media (max-width: 980px) {
    .psychologist-assessment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .psychologist-assessment-grid {
        grid-template-columns: 1fr;
    }
}

.psychologist-record-table tbody tr:last-child td {
  border-bottom: 0;
}

.psychologist-record-table tbody tr:hover {
  background: #fbfefc;
}

.psychologist-record-table td strong,
.psychologist-record-table td small {
  display: block;
}

.psychologist-record-table td small {
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}

.psychologist-record-actions {
  min-width: 132px;
  vertical-align: middle;
  white-space: nowrap;
}

.psychologist-record-actions-inner {
  align-items: center;
  display: flex;
  gap: 6px;
  min-height: 44px;
}

.psychologist-record-actions form {
  margin: 0;
}

.psychologist-list-footer {
  align-items: center;
  border-top: 1px solid #e7efeb;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
}

.psychologist-list-footer > small {
  color: var(--muted);
  font-size: 10px;
}

.psychologist-pagination {
  display: flex;
  gap: 5px;
}

.psychologist-pagination .pagination-button {
  align-items: center;
  background: #fff;
  border: 1px solid #d9e9e1;
  border-radius: 7px;
  color: #167b67;
  display: inline-flex;
  font-size: 11px;
  height: 30px;
  justify-content: center;
  min-width: 30px;
  padding: 0 8px;
  text-decoration: none;
}

.psychologist-pagination .pagination-button:hover,
.psychologist-pagination .pagination-button.is-active {
  background: #087f6b;
  border-color: #087f6b;
  color: #fff;
}

@media (max-width: 640px) {
  .psychologist-list-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.module-empty {
  align-items: center;
  background: #f8fbf9;
  border: 1px dashed #d6e7de;
  border-radius: 10px;
  display: flex;
  gap: 14px;
  padding: 19px;
}

.module-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 24px;
  margin-top: 17px;
}

.module-checklist span {
  color: #4c8d6b;
  font-size: 10px;
}

.module-menu-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}

.module-menu-card {
  align-items: center;
  background: #fbfdfc;
  border: 1px solid #e6eee9;
  border-radius: 9px;
  color: var(--ink);
  display: flex;
  gap: 10px;
  padding: 12px;
  transition: .2s ease;
}

.module-menu-card:hover {
  border-color: #9dcdb8;
  box-shadow: 0 5px 15px rgba(11, 104, 88, .08);
  transform: translateY(-1px);
}

.module-menu-icon {
  align-items: center;
  background: #e3f4eb;
  border-radius: 7px;
  color: var(--forest);
  display: flex;
  font-size: 13px;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.module-menu-card span:nth-child(2) {
  flex: 1;
}

.module-menu-card strong,
.module-menu-card small {
  display: block;
}

.module-menu-card strong {
  font-size: 11px;
}

.module-menu-card small {
  color: var(--muted);
  font-size: 9px;
  margin-top: 3px;
}

.module-menu-card b {
  color: var(--forest);
}

.workflow-panel {
  margin-bottom: 0;
}

.admin-dashboard-tasmi-panel {
  margin-bottom: 20px;
}

.admin-dashboard-tasmi-link {
  font-size: 10px;
  min-height: 36px;
  padding: 8px 12px;
  text-decoration: none;
}

.admin-dashboard-tasmi-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-dashboard-tasmi-grid > div {
  background: #f8fbf9;
  border: 1px solid #e2eee8;
  border-radius: 10px;
  padding: 13px;
}

.admin-dashboard-tasmi-grid span,
.admin-dashboard-tasmi-grid strong,
.admin-dashboard-tasmi-grid small {
  display: block;
}

.admin-dashboard-tasmi-grid span {
  color: var(--muted);
  font-size: 10px;
}

.admin-dashboard-tasmi-grid strong {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  line-height: 1.15;
  margin: 5px 0 3px;
}

.admin-dashboard-tasmi-grid small,
.admin-dashboard-tasmi-note {
  color: #7d9088;
  font-size: 9px;
  line-height: 1.45;
}

.admin-dashboard-tasmi-note {
  background: #f4faf7;
  border-left: 3px solid var(--forest-2);
  border-radius: 6px;
  margin: 12px 0 0;
  padding: 9px 11px;
}

.admin-dashboard-tasmi-note strong {
  color: var(--forest);
}

@media (max-width: 760px) {
  .admin-dashboard-tasmi-panel .panel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .admin-dashboard-tasmi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .admin-dashboard-tasmi-grid {
    grid-template-columns: 1fr;
  }
}

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

.workflow-grid>div {
  background: #fbfdfc;
  border-left: 3px solid var(--forest-2);
  border-radius: 7px;
  padding: 13px;
}

.workflow-grid b,
.workflow-grid strong,
.workflow-grid small {
  display: block;
}

.workflow-grid b {
  color: var(--gold);
  font-size: 10px;
}

.workflow-grid strong {
  color: var(--ink);
  font-size: 12px;
  margin: 5px 0;
}

.workflow-grid small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.infografis-page {
  background: #edf2ef;
  color: var(--ink);
  min-height: 100vh;
  padding: 20px;
}

.infografis-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 16px;
  max-width: 820px;
}

.infografis-toolbar a {
  color: var(--forest);
  font-size: 12px;
  font-weight: 700;
}

.infografis-sheet {
  background: #fffaf0;
  box-shadow: 0 12px 30px rgba(5, 48, 40, .12);
  margin: 0 auto;
  max-width: 820px;
  overflow: hidden;
  padding: 36px;
}

.infografis-cover {
  align-items: center;
  background: #f8ead2;
  border: 2px solid #e3c98e;
  border-radius: 18px;
  display: flex;
  gap: 25px;
  padding: 28px;
}

.infografis-cover img {
  background: #fff;
  border-radius: 50%;
  height: 105px;
  object-fit: contain;
  padding: 4px;
  width: 105px;
}

.infografis-cover h1 {
  color: #075d4e;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  line-height: 1.1;
  margin: 7px 0 12px;
}

.infografis-cover p:last-child {
  color: #725d3d;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

.infografis-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
}

.infografis-grid article {
  background: #fff;
  border: 1px solid #e3d7be;
  border-radius: 12px;
  min-height: 145px;
  padding: 17px;
}

.infografis-grid b,
.infografis-tips b {
  align-items: center;
  background: #0d765f;
  border-radius: 50%;
  color: #fff;
  display: flex;
  float: left;
  font-size: 18px;
  height: 32px;
  justify-content: center;
  margin: 0 8px 7px 0;
  width: 32px;
}

.infografis-grid h2,
.infografis-tips h2 {
  color: #075d4e;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  margin: 0 0 8px;
}

.infografis-grid p,
.infografis-tips p {
  clear: both;
  color: #5e625e;
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
}

.infografis-tips {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin-top: 14px;
}

.infografis-tips>div {
  background: #eef7ee;
  border: 1px solid #cde0c9;
  border-radius: 12px;
  min-height: 120px;
  padding: 18px;
}

.infografis-tips>div:last-child {
  background: #f9edda;
  border-color: #e7d2a9;
}

.infografis-sheet footer {
  border-top: 2px solid #e2c88c;
  color: #075d4e;
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  margin-top: 16px;
  padding-top: 15px;
  text-align: center;
}

@media (max-width:700px) {
  .module-hero {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .module-status {
    margin-left: 68px;
  }

  .module-menu-grid,
  .workflow-grid,
  .infografis-grid,
  .infografis-tips {
    grid-template-columns: 1fr;
  }

  .infografis-page {
    padding: 10px;
  }

  .infografis-sheet {
    padding: 18px;
  }

  .infografis-cover {
    align-items: flex-start;
    flex-direction: column;
  }

  .infografis-cover h1 {
    font-size: 26px;
  }
}

@media print {
  .infografis-page {
    background: #fff;
    padding: 0;
  }

  .infografis-toolbar {
    display: none;
  }

  .infografis-sheet {
    box-shadow: none;
    max-width: none;
  }
}

/* Data master and institution profile */
.data-panel {
  margin-bottom: 20px;
}

.data-source-badge {
  display: none !important;
}

.data-toolbar {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.data-search {
  align-items: center;
  border: 1px solid #dfe9e3;
  border-radius: 8px;
  display: flex;
  flex: 1;
  gap: 8px;
  padding: 0 12px;
}

.data-search span {
  color: var(--forest);
  font-size: 20px;
}

.data-search input {
  border: 0;
  color: var(--ink);
  font-size: 11px;
  outline: 0;
  padding: 12px 0;
  width: 100%;
}

.data-table-wrap {
  overflow-x: auto;
}

.data-table {
  border-collapse: collapse;
  min-width: 760px;
  width: 100%;
}

.data-table th {
  background: #f8fbf9;
  color: #7d8d85;
  font-size: 9px;
  font-weight: 700;
  padding: 11px 10px;
  text-align: left;
  white-space: nowrap;
}

.data-table td {
  border-top: 1px solid #edf1ee;
  color: #74817c;
  font-size: 10px;
  padding: 12px 10px;
  white-space: nowrap;
}

.data-table td strong {
  color: var(--ink);
}

.table-empty {
  padding: 35px !important;
  text-align: center;
}

.data-footer {
  align-items: center;
  color: #8a9791;
  display: flex;
  font-size: 10px;
  justify-content: space-between;
  margin-top: 17px;
}

.pagination {
  align-items: center;
  display: flex;
  gap: 6px;
}

.pagination a,
.pagination b {
  align-items: center;
  border: 1px solid #e0e9e4;
  border-radius: 6px;
  color: var(--forest);
  display: flex;
  height: 28px;
  justify-content: center;
  text-decoration: none;
  width: 28px;
}

.pagination b {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}

.profile-form {
  max-width: 900px;
}

.form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-grid label.full {
  grid-column: 1 / -1;
}

.form-grid label span {
  color: #65756d;
  font-size: 10px;
  font-weight: 700;
}

.form-grid input,
.form-grid textarea {
  border: 1px solid #dfe9e3;
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  outline: 0;
  padding: 11px 12px;
  resize: vertical;
}

.form-grid select {
  background: #fff;
  border: 1px solid #dfe9e3;
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  min-height: 40px;
  outline: 0;
  padding: 10px 12px;
}

.form-grid select:focus {
  border-color: #6bad8d;
  box-shadow: 0 0 0 3px rgba(48, 145, 104, .1);
}

.form-grid input:focus,
.form-grid textarea:focus {
  border-color: #6bad8d;
  box-shadow: 0 0 0 3px rgba(48, 145, 104, .1);
}

.form-actions {
  border-top: 1px solid #edf1ee;
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 18px;
}

@media (max-width:560px) {
  .data-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .data-toolbar .button {
    width: 100%;
  }

  .data-source-badge {
    display: none;
  }

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

  .form-grid label.full {
    grid-column: auto;
  }

  .form-actions {
    flex-direction: column-reverse;
  }

  .form-actions .button {
    width: 100%;
  }

  .panel-heading-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .psychologist-module-dialog {
    border-radius: 16px;
    max-height: 92vh;
  }

  .psychologist-module-form-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.data-page-heading {
  margin-bottom: 16px;
}

.class-cell strong,
.class-cell small {
  display: block;
}

.class-cell strong {
  color: var(--ink);
  font-size: 10px;
}

.class-cell small {
  color: var(--muted);
  font-size: 9px;
  margin-top: 3px;
}

.action-confirm-backdrop {
  align-items: center;
  background: rgba(7, 35, 31, .58);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  /* Harus berada di atas dialog detail CKHS yang memakai z-index 130. */
  z-index: 1600;
}

.action-confirm-backdrop[hidden] {
  display: none;
}

.action-confirm-dialog {
  animation: confirm-dialog-in .18s ease-out;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(3, 31, 27, .25);
  max-width: 430px;
  padding: 28px 30px 25px;
  text-align: center;
  width: 100%;
}

.action-confirm-icon {
  align-items: center;
  background: #fff5df;
  border: 1px solid #f0d38b;
  border-radius: 50%;
  color: #b27b1c;
  display: flex;
  font-family: Georgia, serif;
  font-size: 22px;
  height: 52px;
  justify-content: center;
  margin: 0 auto 13px;
  width: 52px;
}

.action-confirm-dialog h2 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 21px;
  margin: 0 0 8px;
}

.action-confirm-dialog p {
  color: #718079;
  font-size: 12px;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 340px;
}

.action-confirm-actions {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 23px;
}

.action-confirm-actions .button {
  min-width: 122px;
}

.action-confirm-actions .button-outline {
  color: #64736d;
}

.action-confirm-open {
  overflow: hidden;
}

@keyframes confirm-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }

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

.action-loading-backdrop {
  align-items: center;
  background: rgba(7, 35, 31, .64);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  /* Loading juga harus menutup seluruh dialog yang sedang terbuka. */
  z-index: 1610;
}

.action-loading-backdrop[hidden] {
  display: none;
}

.action-loading-dialog {
  animation: confirm-dialog-in .18s ease-out;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(3, 31, 27, .28);
  max-width: 330px;
  padding: 27px 28px 25px;
  text-align: center;
  width: 100%;
}

.action-loading-spinner {
  animation: action-loading-spin .8s linear infinite;
  border: 3px solid #dceee4;
  border-radius: 50%;
  border-top-color: #08755e;
  height: 38px;
  margin: 0 auto 14px;
  width: 38px;
}

.action-loading-dialog h2 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  margin: 0 0 7px;
}

.action-loading-dialog p {
  color: #718079;
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}

.action-loading-open {
  overflow: hidden;
}

.action-form-processing button,
.action-form-processing input[type="submit"],
.action-form-processing input[type="button"] {
  cursor: wait;
  opacity: .65;
}

@keyframes action-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width:560px) {
  .action-confirm-dialog {
    padding: 25px 20px 21px;
  }

  .action-confirm-actions {
    flex-direction: column-reverse;
  }

  .action-confirm-actions .button {
    width: 100%;
  }
}

.js-notification-source {
  display: none !important;
}

.notification-popup {
  align-items: flex-start;
  animation: notification-in .26s ease-out;
  background: #fff;
  border: 1px solid #e1ece6;
  border-left: 4px solid #38a171;
  border-radius: 12px;
  box-shadow: 0 14px 35px rgba(6, 46, 38, .16);
  display: flex;
  gap: 11px;
  max-width: 380px;
  min-width: 290px;
  padding: 15px 38px 15px 14px;
  position: fixed;
  right: 22px;
  top: 22px;
  z-index: 120;
}

.notification-popup-error {
  border-left-color: #d05d59;
}

.notification-popup-icon {
  align-items: center;
  background: #e5f6eb;
  border-radius: 50%;
  color: #2b9162;
  display: flex;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.notification-popup-error .notification-popup-icon {
  background: #fff0ef;
  color: #c24f4b;
}

.notification-popup-copy {
  min-width: 0;
}

.notification-popup-copy strong {
  color: var(--ink);
  display: block;
  font-size: 12px;
  margin: 1px 0 4px;
}

.notification-popup-copy p {
  color: #71817a;
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
}

.notification-popup-close {
  background: none;
  border: 0;
  color: #98a49f;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 11px;
  top: 10px;
}

.notification-popup-close:hover {
  color: var(--ink);
}

.notification-popup-progress {
  animation: notification-progress 5.2s linear forwards;
  background: #79c59f;
  bottom: 0;
  height: 2px;
  left: 0;
  position: absolute;
}

.notification-popup-error .notification-popup-progress {
  background: #df837e;
}

.notification-popup-hide {
  animation: notification-out .22s ease-in forwards;
}

@keyframes notification-in {
  from {
    opacity: 0;
    transform: translate3d(18px, -8px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes notification-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(18px, -8px, 0);
  }
}

@keyframes notification-progress {
  from {
    width: 100%;
  }

  to {
    width: 0;
  }
}

@media (max-width:560px) {
  .notification-popup {
    left: 15px;
    max-width: none;
    min-width: 0;
    right: 15px;
    top: 15px;
  }
}

/* Setoran Hafalan */
.setoran-stat-grid {
  margin-bottom: 20px;
}

.setoran-panel {
  margin-bottom: 20px;
}

.setoran-panel-heading {
  margin-bottom: 18px;
}

.setoran-meeting-toolbar {
  align-items: center;
  background: #f7fbf8;
  border: 1px solid #dfece4;
  border-radius: 10px;
  display: grid;
  gap: 14px 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0 0 16px;
  padding: 14px 16px;
}

.setoran-meeting-toolbar > div:first-child {
  min-width: 0;
}

.setoran-meeting-toolbar > div:first-child strong,
.setoran-meeting-toolbar > div:first-child small {
  display: block;
}

.setoran-meeting-toolbar > div:first-child strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.setoran-meeting-toolbar > div:first-child small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  margin-top: 4px;
}

.setoran-meeting-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.setoran-meeting-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 170px;
}

.setoran-meeting-form label span {
  color: #65756d;
  font-size: 9px;
  font-weight: 700;
}

.setoran-meeting-form input[type="date"] {
  background: #fff;
  border: 1px solid #dfe9e3;
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  min-height: 40px;
  outline: 0;
  padding: 9px 10px;
  width: 170px;
}

.setoran-meeting-form input[type="date"]:focus {
  border-color: #6bad8d;
  box-shadow: 0 0 0 3px rgba(48, 145, 104, .1);
}

.setoran-meeting-form .button {
  min-height: 40px;
  white-space: nowrap;
}

.setoran-filter-grid {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1.6fr) repeat(5, minmax(110px, 1fr)) auto;
  margin-bottom: 18px;
}

.setoran-filter-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setoran-filter-grid label span {
  color: #65756d;
  font-size: 9px;
  font-weight: 700;
}

.setoran-filter-grid input,
.setoran-filter-grid select,
.setoran-form select,
.setoran-form input[type=file] {
  background: #fff;
  border: 1px solid #dfe9e3;
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  min-height: 40px;
  outline: 0;
  padding: 9px 10px;
  width: 100%;
}

.setoran-filter-grid input:focus,
.setoran-filter-grid select:focus,
.setoran-form select:focus {
  border-color: #6bad8d;
  box-shadow: 0 0 0 3px rgba(48, 145, 104, .1);
}

.setoran-filter-grid .data-search {
  min-height: 40px;
}

.setoran-filter-grid .button {
  min-height: 40px;
  white-space: nowrap;
}

.setoran-table {
  min-width: 980px;
}

.setoran-table td {
  vertical-align: middle;
}

.setoran-table td small,
.setoran-table td strong {
  display: block;
}

.setoran-table td small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  margin-top: 3px;
  white-space: normal;
}

@media (max-width: 900px) {
  .setoran-meeting-toolbar {
    grid-template-columns: 1fr;
  }

  .setoran-meeting-form {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .setoran-meeting-toolbar {
    padding: 12px;
  }

  .setoran-meeting-form {
    align-items: stretch;
    flex-direction: column;
  }

  .setoran-meeting-form label,
  .setoran-meeting-form input[type="date"],
  .setoran-meeting-form .button {
    width: 100%;
  }
}

.table-actions {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 70px;
}

.table-action-link {
  background: none;
  border: 0;
  color: var(--forest);
  cursor: pointer;
  font-size: 10px;
  padding: 0;
  text-align: left;
}

.table-action-link:hover {
  color: var(--deep);
  text-decoration: underline;
}

.table-action-success {
  color: #2f8c5a;
}

.table-action-danger {
  color: var(--red);
}

.status-pending {
  background: #fff4dd;
  color: #ad781d;
}

.status-warning {
  background: #fff0df;
  color: #bb6c25;
}

.status-error {
  background: #fff0ef;
  color: #b34d49;
}

.heading-actions {
  align-items: center;
  display: flex;
  gap: 9px;
}

.setoran-form {
  max-width: 1000px;
}

.setoran-form small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
}

.existing-audio,
.detail-note {
  background: #f8fbf9;
  border: 1px solid #e2eee7;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  padding: 13px 15px;
}

.existing-audio span {
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}

.existing-audio audio,
.detail-note audio {
  max-width: 100%;
  width: 370px;
}

.setoran-detail-panel {
  max-width: 1000px;
}

.detail-identity {
  align-items: center;
  border-bottom: 1px solid #edf1ee;
  display: flex;
  gap: 13px;
  padding-bottom: 20px;
}

.detail-identity h2 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  margin: 0 0 3px;
}

.detail-identity small {
  color: var(--muted);
  font-size: 11px;
}

.detail-identity .status-pill {
  margin-left: auto;
}

.detail-grid {
  display: grid;
  gap: 18px 24px;
  grid-template-columns: repeat(4, 1fr);
  padding: 23px 0 3px;
}

.detail-grid span,
.detail-grid strong {
  display: block;
}

.detail-grid span {
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 5px;
}

.detail-grid strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.detail-note {
  margin-top: 22px;
}

.detail-note .eyebrow {
  margin-bottom: 0;
}

.detail-note p:last-child {
  color: #64746d;
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
}

.detail-note small {
  color: var(--muted);
  font-size: 10px;
}

.detail-verification {
  border-top: 1px solid #edf1ee;
  margin-top: 22px;
  padding-top: 20px;
}

.detail-verification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.button-danger {
  background: #fff0ef;
  border: 1px solid #f0cecb;
  color: #b34d49;
}

.button-danger:hover {
  background: #ffe2df;
}

.status-pill {
  border-radius: 12px;
  display: inline-block;
  font-size: 9px;
  padding: 5px 9px;
  white-space: nowrap;
}

.status-good {
  background: #e7f5eb;
  color: #2f8c5a;
}

.setoran-form .form-actions {
  margin-top: 22px;
}

.school-form {
  max-width: 1050px;
}

.school-form select:disabled {
  background: #f8faf8;
  color: var(--ink);
  opacity: 1;
}

.school-form input[readonly],
.school-form textarea[readonly] {
  background: #fbfcfb;
  color: #50635b;
}

.school-form small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
}

.school-meta {
  align-items: center;
  background: #f8fbf9;
  border: 1px solid #e2eee7;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  margin-top: 20px;
  padding: 11px 13px;
}

.school-meta span {
  color: var(--muted);
  font-size: 10px;
}

.school-meta strong {
  color: var(--ink);
  font-size: 11px;
}

.school-view-panel {
  max-width: 1100px;
}

.school-view-section,
.school-edit-section {
  border-top: 1px solid #edf1ee;
  margin-top: 20px;
  padding-top: 20px;
}

.school-view-section:first-of-type,
.school-edit-section:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.school-section-heading {
  margin-bottom: 13px;
}

.school-section-heading .eyebrow {
  margin-bottom: 0;
}

.school-info-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}

.school-info-item {
  background: #f8fbf9;
  border: 1px solid #e4eee8;
  border-radius: 8px;
  min-width: 0;
  padding: 11px 13px;
}

.school-info-wide {
  grid-column: 1 / -1;
}

.school-info-item>span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  margin-bottom: 6px;
}

.school-info-item>strong {
  color: var(--ink);
  display: block;
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.school-info-item>strong small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
}

.school-value-long {
  max-height: 220px;
  overflow: auto;
}

.school-edit-section .form-grid {
  margin-top: 0;
}

@media (max-width:1100px) {
  .setoran-filter-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .setoran-filter-grid .data-search {
    grid-column: 1 / -1;
  }

  .setoran-filter-grid .button {
    width: 100%;
  }
}

@media (max-width:700px) {
  .setoran-filter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .setoran-filter-grid .data-search {
    grid-column: 1 / -1;
  }

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

  .detail-identity {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .detail-identity .status-pill {
    margin-left: 0;
  }

  .heading-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width:480px) {
  .setoran-filter-grid {
    grid-template-columns: 1fr;
  }

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

  .detail-verification-actions,
  .detail-verification-actions .button {
    width: 100%;
  }

  .detail-verification-actions form {
    width: 100%;
  }

  .detail-verification-actions .button {
    justify-content: center;
  }
}

@media (max-width:700px) {
  .school-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:480px) {
  .school-info-grid {
    grid-template-columns: 1fr;
  }
}

.activity-readonly-panel {
  margin-bottom: 10px;
}

.activity-readonly-panel:last-child {
  margin-bottom: 0;
}

.presensi-stat-grid {
  margin-bottom: 20px;
}

.presensi-panel,
.presensi-detail-panel {
  margin-bottom: 20px;
}

.presensi-class-table {
  min-width: 760px;
}

.presensi-class-table td {
  vertical-align: middle;
}

.presensi-class-card-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.presensi-class-card {
  background: #fbfefd;
  border: 1px solid #e0ece5;
  border-radius: 12px;
  display: grid;
  gap: 12px;
  padding: 14px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.presensi-class-card:hover {
  border-color: #9ed8ba;
  box-shadow: 0 8px 20px rgba(20, 105, 77, .08);
  transform: translateY(-1px);
}

.presensi-class-card-head {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.presensi-class-card-kicker {
  color: #087e61;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.presensi-class-card h3 {
  color: var(--ink);
  font-size: 14px;
  margin: 4px 0 0;
}

.presensi-class-card-student {
  background: #eaf7ee;
  border-radius: 999px;
  color: #277650;
  font-size: 9px;
  font-weight: 700;
  padding: 6px 8px;
  white-space: nowrap;
}

.presensi-class-card-body {
  border-top: 1px solid #edf2ef;
  display: grid;
  gap: 10px;
  padding-top: 11px;
}

.presensi-class-card-status {
  align-items: center;
  border-radius: 10px;
  display: flex;
  gap: 9px;
  padding: 9px 10px;
}

.presensi-class-card-status.is-good {
  background: #edf9f2;
  color: #16805f;
}

.presensi-class-card-status.is-muted {
  background: #f4f6f5;
  color: #788780;
}

.presensi-status-dot {
  background: currentColor;
  border-radius: 50%;
  flex: 0 0 auto;
  height: 9px;
  width: 9px;
}

.presensi-class-card-status small,
.presensi-class-card-teacher > span {
  color: #77877f;
  display: block;
  font-size: 9px;
}

.presensi-class-card-status strong {
  color: inherit;
  display: block;
  font-size: 11px;
  margin-top: 2px;
}

.presensi-class-card-teacher {
  border-top: 1px dashed #e1ebe5;
  padding-top: 9px;
}

.presensi-class-card-teacher strong {
  color: var(--ink);
  display: block;
  font-size: 10px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presensi-class-card-action {
  align-items: center;
  justify-content: center;
  width: 100%;
}

.presensi-card-empty {
  grid-column: 1 / -1;
}

.presensi-empty-search {
  color: var(--muted);
  font-size: 10px;
  margin: 16px 0 0;
  text-align: center;
}

.presensi-period-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.presensi-period-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
}

.presensi-period-form label span {
  color: #65756d;
  font-size: 9px;
  font-weight: 700;
}

.presensi-period-form input,
.presensi-period-form select {
  background: #fff;
  border: 1px solid #dfe9e3;
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  min-height: 40px;
  outline: 0;
  padding: 9px 10px;
}

.presensi-period-form .button {
  min-height: 40px;
}

.presensi-legend {
  align-items: center;
  border-bottom: 1px solid #edf1ee;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.presensi-legend span {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 9px;
  gap: 5px;
}

.presensi-dot {
  align-items: center;
  border-radius: 5px;
  display: inline-flex;
  font-size: 9px;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.presensi-dot.hadir {
  background: #e5f4e9;
  color: #31845c;
}

.presensi-dot.sakit {
  background: #fff2d9;
  color: #be8123;
}

.presensi-dot.izin {
  background: #e6f0fc;
  color: #3979ba;
}

.presensi-dot.alpa {
  background: #fff0ef;
  color: #b34d49;
}

.presensi-dot.libur {
  background: #f0f2f1;
  color: #8a9691;
}

.presensi-table-wrap {
  overflow-x: auto;
}

.presensi-table {
  min-width: 1180px;
}

.presensi-table th {
  padding: 9px 7px;
  text-align: center;
}

.presensi-table td {
  padding: 10px 7px;
  text-align: center;
}

.presensi-table td:nth-child(4) {
  text-align: left;
}

.presensi-table th small {
  color: #9aa6a1;
  display: block;
  font-size: 7px;
  font-weight: 600;
  margin-bottom: 2px;
}

.presensi-sticky-heading,
.presensi-month-heading,
.presensi-rekap-heading {
  background: #f4faf6 !important;
  color: var(--forest) !important;
  text-align: center !important;
}

.presensi-month-heading {
  background: #edf7f1 !important;
}

.presensi-rekap-heading {
  background: #fff9eb !important;
  color: #a77720 !important;
}

.weekend-heading {
  background: #fff0ef !important;
  color: #b34d49 !important;
}

.presensi-cell {
  font-size: 10px !important;
  font-weight: 700;
  min-width: 29px;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.presensi-cell.hadir {
  background: #e5f4e9;
  color: #31845c;
}

.presensi-cell.sakit,
.sakit-total {
  background: #fff2d9;
  color: #be8123;
}

.presensi-cell.izin,
.izin-total {
  background: #e6f0fc;
  color: #3979ba;
}

.presensi-cell.alpa,
.alpa-total {
  background: #fff0ef;
  color: #b34d49;
}

.presensi-cell.libur {
  background: #f0f2f1;
  color: #8a9691;
}

.presensi-cell.kosong {
  color: #b0bbb6;
}

.presensi-total {
  font-weight: 700;
}

.presensi-detail-stat-grid .stat-card strong {
  font-family: 'Playfair Display', Georgia, serif;
}

.presensi-heading-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.presensi-heading-actions .button-small {
  min-height: 32px;
  padding: 7px 11px;
}

.presensi-legend small {
  color: #74847c;
  font-size: 9px;
  margin-left: auto;
}

.presensi-edit-backdrop {
  align-items: center;
  background: rgba(8, 34, 26, .64);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  /* Tetap berada di bawah dialog konfirmasi dan loading global. */
  z-index: 120;
}

.presensi-edit-backdrop[hidden] {
  display: none;
}

.presensi-edit-dialog {
  background: #fff;
  border: 1px solid #dbe8e0;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(13, 53, 40, .24);
  max-width: 560px;
  padding: 26px;
  position: relative;
  width: 100%;
}

.presensi-edit-dialog h2 {
  color: var(--forest);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 25px;
  margin: 0 0 5px;
}

.presensi-edit-close {
  background: transparent;
  border: 0;
  color: #7c8b84;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
  padding: 4px;
  position: absolute;
  right: 17px;
  top: 15px;
}

.presensi-edit-date {
  color: #718078;
  font-size: 11px;
  margin: 0 0 20px;
}

.presensi-edit-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.presensi-bulk-list {
  border: 1px solid #dbe8e0;
  border-radius: 10px;
  margin-top: 15px;
  max-height: 360px;
  overflow: auto;
}

.presensi-readonly-date {
  background: #f4faf7;
  border: 1px solid #d7e8df;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
  padding: 10px 12px;
}

.presensi-readonly-date span,
.presensi-readonly-date small {
  color: #6c7e75;
  font-size: 9px;
}

.presensi-readonly-date strong {
  color: var(--forest);
  font-size: 14px;
}

.presensi-holiday-choice {
  align-items: center;
  color: var(--forest);
  cursor: pointer;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  gap: 7px;
  margin-top: 12px;
}

.presensi-holiday-choice input {
  accent-color: var(--forest);
  height: 16px;
  width: 16px;
}

.presensi-holiday-reason {
  margin-top: 10px;
}

.presensi-holiday-reason[hidden],
.presensi-holiday-info[hidden] {
  display: none;
}

.presensi-holiday-info {
  background: #fff8e8;
  border: 1px solid #f2dfae;
  border-radius: 8px;
  color: #7a5a1d;
  font-size: 10px;
  margin: 10px 0 0;
  padding: 9px 10px;
}

.presensi-student-search {
  margin-top: 12px;
}

.presensi-search-empty {
  color: #9a5b32;
  font-size: 10px;
  margin: 10px 0 0;
}

.presensi-search-empty[hidden] {
  display: none;
}

.presensi-bulk-row {
  align-items: center;
  border-bottom: 1px solid #edf1ee;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
}

.presensi-bulk-row-holiday {
  background: #fffaf0;
}

.presensi-bulk-row:last-child {
  border-bottom: 0;
}

.presensi-bulk-student {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.presensi-bulk-student strong {
  color: var(--forest);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presensi-bulk-student small {
  color: #75847c;
  font-size: 9px;
}

.presensi-hadir-choice {
  align-items: center;
  color: var(--forest);
  cursor: pointer;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  gap: 6px;
  white-space: nowrap;
}

.presensi-hadir-choice input {
  accent-color: var(--forest);
  height: 16px;
  width: 16px;
}

.presensi-bulk-nonhadir {
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  grid-template-columns: 150px minmax(0, 1fr);
}

.presensi-bulk-nonhadir[hidden] {
  display: none;
}

.presensi-edit-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
}

.presensi-edit-field span {
  color: #53675d;
  font-size: 10px;
  font-weight: 700;
}

.presensi-edit-field input,
.presensi-edit-field select,
.presensi-edit-field textarea {
  background: #fff;
  border: 1px solid #d7e4dc;
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  outline: 0;
  padding: 11px 12px;
}

.presensi-edit-field input:focus,
.presensi-edit-field select:focus,
.presensi-edit-field textarea:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(19, 127, 103, .12);
}

.presensi-edit-actions {
  border-top: 1px solid #edf1ee;
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 17px;
}

@media (max-width:560px) {
  .presensi-period-form {
    align-items: stretch;
    flex-direction: column;
  }

  .presensi-period-form label,
  .presensi-period-form .button {
    width: 100%;
  }

  .presensi-legend {
    gap: 8px 12px;
  }

  .presensi-legend small {
    margin-left: 0;
    width: 100%;
  }

  .presensi-edit-dialog {
    padding: 22px;
  }

  .presensi-edit-grid {
    grid-template-columns: 1fr;
  }

  .presensi-bulk-nonhadir {
    grid-template-columns: 1fr;
  }
}

.sidebar-menu-group {
  margin: 4px 0;
}

.sidebar-menu-group summary {
  align-items: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  gap: 11px;
  list-style: none;
  padding: 11px 12px;
  transition: .2s;
}

.sidebar-menu-group summary::-webkit-details-marker {
  display: none;
}

.sidebar-menu-group summary:hover,
.sidebar-menu-group[open] summary {
  background: rgba(80, 196, 158, .17);
  color: #fff;
}

.sidebar-menu-group[open] summary {
  box-shadow: inset 3px 0 var(--gold);
}

.sidebar-menu-group .menu-chevron {
  color: #a6d8c5;
  font-size: 15px;
  margin-left: auto;
  transition: transform .2s;
}

.sidebar-menu-group:not([open]) .menu-chevron {
  transform: rotate(180deg);
}

.sidebar-submenu {
  padding: 3px 0 5px 40px;
}

.sidebar-submenu-link {
  align-items: flex-start;
  color: rgba(255, 255, 255, .68);
  display: flex;
  font-size: 11px;
  gap: 10px;
  line-height: 1.35;
  padding: 7px 8px;
}

.sidebar-submenu-link:hover,
.sidebar-submenu-link.active {
  color: #fff;
}

.sidebar-submenu-link>span:first-child {
  color: #a6d8c5;
  font-size: 15px;
  line-height: 12px;
}

.sidebar-submenu-link.active>span:first-child {
  color: var(--gold);
}

.sidebar-submenu-children {
  border-left: 1px solid rgba(166, 216, 197, .28);
  margin: 0 0 5px 10px;
  padding: 1px 0 2px 10px;
}

.sidebar-submenu-child {
  align-items: flex-start;
  color: rgba(255, 255, 255, .52);
  display: flex;
  font-size: 9px;
  gap: 6px;
  line-height: 1.3;
  padding: 4px 6px;
  text-decoration: none;
}

.sidebar-submenu-child:hover,
.sidebar-submenu-child.active {
  color: #fff;
}

.sidebar-submenu-child>span:first-child {
  color: #a6d8c5;
  flex: 0 0 auto;
}

.sidebar-direct-item {
  margin-top: 2px;
}

.admin-page .sidebar-submenu-direct {
  margin-left: 25px;
  padding: 1px 0 5px 15px;
}

.sidebar-submenu-child-direct {
  font-size: 9px;
  padding-bottom: 3px;
  padding-top: 3px;
}

.sidebar-menu-badge {
  background: #4eb45d;
  border-radius: 13px;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  margin-left: auto;
  padding: 4px 8px;
}

.sidebar-menu-group summary .sidebar-menu-badge+.menu-chevron {
  margin-left: 0;
}

.report-stat-grid {
  margin-bottom: 20px;
}

.report-panel {
  overflow: hidden;
}

.report-filter-row {
  align-items: end;
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.report-filter-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
}

.report-filter-row label span {
  color: #65756d;
  font-size: 10px;
  font-weight: 700;
}

.report-filter-row select {
  background: #fff;
  border: 1px solid #dfe9e3;
  border-radius: 7px;
  color: var(--ink);
  font-size: 11px;
  padding: 11px 12px;
}

.report-guide {
  margin-top: 18px;
}

.report-guide-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

.report-guide-grid>div {
  align-items: flex-start;
  background: #f7fbf8;
  border: 1px solid #e1ebe4;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  padding: 15px;
}

.report-guide-grid strong,
.report-guide-grid small {
  display: block;
}

.report-guide-grid strong {
  color: var(--ink);
  font-size: 12px;
  margin-bottom: 4px;
}

.report-guide-grid small {
  color: #718078;
  font-size: 10px;
  line-height: 1.5;
}

.report-guide-icon {
  align-items: center;
  background: #e2f2e8;
  border-radius: 9px;
  color: var(--forest);
  display: flex;
  font-size: 18px;
  height: 34px;
  justify-content: center;
  width: 34px;
}

@media (max-width:700px) {

  .report-filter-row,
  .report-guide-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .report-filter-row label {
    min-width: 0;
  }

  .report-filter-row select {
    width: 100%;
  }
}

.guru-topbar-title {
  display: flex;
  flex-direction: column;
  margin-right: auto;
}

.guru-topbar-title strong {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
}

.guru-topbar-title small {
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
}

.guru-heading {
  margin-bottom: 22px;
}

.guru-stat-grid {
  margin-bottom: 20px;
}

.guru-dashboard-grid {
  align-items: start;
  margin-bottom: 20px;
}

.guru-schedule-list,
.guru-activity-list,
.guru-student-list,
.priority-list {
  display: flex;
  flex-direction: column;
}

.guru-schedule-item,
.guru-activity-item,
.guru-student-item {
  align-items: center;
  border-bottom: 1px solid #edf1ee;
  display: flex;
  gap: 11px;
  min-height: 58px;
  padding: 9px 0;
}

.guru-schedule-item:last-child,
.guru-activity-item:last-child,
.guru-student-item:last-child {
  border-bottom: 0;
}

.schedule-time {
  color: var(--forest);
  font-size: 9px;
  font-weight: 700;
  min-width: 42px;
}

.guru-schedule-item strong,
.guru-activity-item strong,
.guru-student-item strong {
  color: var(--ink);
  display: block;
  font-size: 11px;
}

.guru-schedule-item small,
.guru-activity-item small,
.guru-student-item small {
  color: #718078;
  display: block;
  font-size: 9px;
  line-height: 1.4;
  margin-top: 3px;
}

.guru-schedule-item .tag {
  margin-left: auto;
}

.priority-list a {
  align-items: center;
  border-bottom: 1px solid #edf1ee;
  color: inherit;
  display: flex;
  gap: 10px;
  min-height: 61px;
  text-decoration: none;
}

.priority-list a:last-child {
  border-bottom: 0;
}

.priority-list a>div {
  flex: 1;
}

.priority-list strong {
  color: var(--ink);
  display: block;
  font-size: 11px;
}

.priority-list small {
  color: #718078;
  display: block;
  font-size: 9px;
  margin-top: 3px;
}

.priority-list b {
  background: #f1f5f2;
  border-radius: 8px;
  color: var(--forest);
  font-size: 11px;
  min-width: 28px;
  padding: 7px;
  text-align: center;
}

.priority-icon {
  align-items: center;
  border-radius: 9px;
  display: flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.priority-icon .card-icon {
  height: 18px;
  width: 18px;
}

.priority-gold {
  background: #fff4df;
  color: #b47a1e;
}

.priority-purple {
  background: #f4eafd;
  color: #8254be;
}

.priority-green {
  background: #e4f3e8;
  color: #31845c;
}

.activity-icon {
  align-items: center;
  background: #e8f3ec;
  border-radius: 8px;
  color: var(--forest);
  display: flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.activity-icon .card-icon {
  height: 16px;
  width: 16px;
}

.activity-meta {
  color: var(--forest);
  font-size: 9px;
  margin-left: auto;
  text-align: right;
}

.activity-meta small {
  color: var(--muted);
}

.avatar-soft {
  align-items: center;
  background: #e7f2ec;
  color: var(--forest);
  display: flex;
  font-size: 11px;
  font-weight: 700;
  justify-content: center;
}

.guru-student-item>div {
  flex: 1;
}

.guru-student-item>.tag {
  font-size: 8px;
}

.empty-copy {
  color: var(--muted);
  font-size: 11px;
  padding: 16px 0;
  text-align: center;
}

.quick-actions-panel {
  margin-bottom: 20px;
}

.guru-quick-actions {
  grid-template-columns: repeat(4, 1fr);
}

.guru-quick-actions .quick-action-icon {
  font-size: 22px;
}

/* Kartu pilihan kelas pada Lap Pembelajaran Guru. */
.module-group-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
}

/* Halaman grup laporan admin: kartu dibuat lebih informatif tanpa mengubah
   tujuan tautan maupun isi data pada submenu. */
.module-group-heading {
  align-items: flex-end;
  display: flex;
  gap: 22px;
  justify-content: space-between;
}

.module-group-heading-copy {
  align-items: center;
  display: flex;
  gap: 14px;
  min-width: 0;
}

.module-group-heading-icon {
  align-items: center;
  background: linear-gradient(145deg, #e7f7ed, #d4eee1);
  border: 1px solid #c8e8d7;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(17, 91, 67, .08);
  color: #087e61;
  display: flex;
  flex: 0 0 auto;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.module-group-heading-icon .card-icon {
  height: 24px;
  width: 24px;
}

.module-group-heading-summary {
  align-items: flex-end;
  color: #6e8178;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  font-size: 10px;
  gap: 3px;
  padding-bottom: 4px;
}

.module-group-heading-summary strong {
  color: #087e61;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  line-height: 1;
}

.module-group-panel {
  background: linear-gradient(180deg, #fff 0%, #fbfefd 100%);
  overflow: hidden;
}

.module-group-panel-heading {
  align-items: flex-start;
  border-bottom: 1px solid #e6efe9;
  margin-bottom: 18px;
  padding-bottom: 17px;
}

.module-group-panel-heading .panel-heading-copy {
  line-height: 1.5;
  margin-top: 6px;
}

.admin-module-cards {
  gap: 15px;
}

.module-group-panel .admin-module-cards .admin-module-card {
  min-height: 142px;
  padding: 17px;
}

.module-group-panel .admin-module-cards .admin-module-card::after {
  font-size: 28px;
  right: 16px;
  top: 15px;
}

.module-group-panel .admin-module-cards .admin-module-card .quick-action-icon {
  height: 46px;
  width: 46px;
}

.module-group-panel .admin-module-cards .admin-module-card .quick-action-icon .card-icon {
  height: 22px;
  width: 22px;
}

.module-group-panel .admin-module-card .lap-card-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-right: 24px;
}

.module-group-panel .admin-module-card .module-card-kicker {
  color: #168068;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 1px 0 6px;
  text-transform: uppercase;
}

.module-group-panel .admin-module-card strong {
  font-size: 16px;
  line-height: 1.3;
}

.module-group-panel .admin-module-card .module-card-description {
  color: #6b7d75;
  font-size: 10px;
  line-height: 1.5;
  margin-top: 6px;
}

.module-group-panel .module-card-link {
  align-items: center;
  color: #087e61;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  gap: 5px;
  margin-top: auto;
  padding-top: 10px;
}

.module-group-panel .module-card-arrow {
  height: 13px;
  width: 13px;
}

.module-group-panel .module-group-empty {
  align-items: center;
  background: #f7fbf8;
  border: 1px dashed #cfe3d7;
  border-radius: 12px;
  color: #718179;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 28px 18px;
  text-align: center;
}

.module-group-panel .module-group-empty > span {
  align-items: center;
  background: #e4f5eb;
  border-radius: 10px;
  color: #168068;
  display: flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.module-group-panel .module-group-empty strong {
  color: #123f34;
  font-size: 12px;
}

.module-group-panel .module-group-empty small {
  font-size: 10px;
}

.lap-pembelajaran-cards .quick-action {
  align-items: flex-start;
  background: linear-gradient(135deg, #fff 0%, #fbfefd 100%);
  border: 1px solid #e0ebe5;
  border-radius: 13px;
  box-shadow: 0 5px 16px rgba(17, 67, 49, .045);
  color: inherit;
  display: flex;
  gap: 12px;
  min-height: 96px;
  padding: 15px;
  position: relative;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lap-pembelajaran-cards .quick-action::after {
  color: #168068;
  content: '›';
  font-family: Georgia, serif;
  font-size: 24px;
  line-height: 1;
  position: absolute;
  right: 13px;
  top: 13px;
}

.lap-pembelajaran-cards .quick-action:hover {
  border-color: #83c4ad;
  box-shadow: 0 11px 25px rgba(17, 91, 67, .11);
  color: inherit;
  transform: translateY(-2px);
}

.lap-pembelajaran-cards .quick-action-icon {
  align-items: center;
  background: #e4f5eb;
  border: 1px solid #d4ecdf;
  border-radius: 11px;
  color: #168068;
  display: flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.lap-pembelajaran-cards .quick-action-icon .card-icon {
  height: 20px;
  width: 20px;
}

.lap-pembelajaran-cards .quick-action strong,
.lap-pembelajaran-cards .quick-action small {
  display: block;
  padding-right: 18px;
}

.lap-pembelajaran-cards .quick-action strong {
  color: #123f34;
  font-size: 13px;
  line-height: 1.35;
  margin-top: 2px;
}

.lap-pembelajaran-cards .quick-action small {
  color: #63766d;
  font-size: 10px;
  line-height: 1.5;
  margin-top: 6px;
}

.lap-card-copy {
  display: block;
  flex: 1;
  min-width: 0;
  padding-right: 12px;
}

.lap-card-subject {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lap-card-meta {
  align-items: center;
  color: #168068;
  display: inline-flex;
  font-size: 9px;
  gap: 5px;
  margin-top: 8px;
}

.lap-card-meta-icon {
  height: 13px;
  width: 13px;
}

.lap-pembelajaran-cards {
  margin-top: 4px;
}

/* Presensi Wali Kelas/Dosen Wali: daftar relasi dibuat ringkas agar kelas
   dapat dipilih cepat tanpa kartu besar yang membuang ruang. */
.presensi-relasi-cards {
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.presensi-relasi-cards .quick-action {
  border-radius: 10px;
  gap: 8px;
  min-height: 64px;
  padding: 9px 10px;
}

.presensi-relasi-cards .quick-action::after {
  font-size: 19px;
  right: 9px;
  top: 9px;
}

.presensi-relasi-cards .quick-action-icon {
  border-radius: 8px;
  height: 30px;
  width: 30px;
}

.presensi-relasi-cards .quick-action-icon .card-icon {
  height: 15px;
  width: 15px;
}

.presensi-relasi-cards .quick-action strong {
  font-size: 11px;
  line-height: 1.25;
  margin-top: 0;
}

.presensi-relasi-cards .quick-action small {
  font-size: 9px;
  line-height: 1.3;
  margin-top: 2px;
}

.presensi-relasi-cards .lap-card-meta {
  font-size: 8px;
  gap: 3px;
  margin-top: 3px;
}

.presensi-relasi-cards .lap-card-meta-icon {
  height: 10px;
  width: 10px;
}

.presensi-input-guide {
  color: #6f8179;
  display: block;
  font-size: .72rem;
  line-height: 1.5;
  margin: 0 0 10px;
}

.presensi-legend .presensi-input-guide {
  flex-basis: 100%;
  margin: 0;
}

.presensi-detail-stat-grid {
  gap: 8px;
}

.presensi-detail-stat-grid .stat-card {
  min-height: 74px;
  padding: 10px 12px;
}

.presensi-detail-stat-grid .stat-card .stat-icon {
  height: 32px;
  width: 32px;
}

.lap-pembelajaran-card:nth-child(3n + 2) .quick-action-icon {
  background: #edf0fc;
  border-color: #dfe4fa;
  color: #5f6fc0;
}

.lap-pembelajaran-card:nth-child(3n) .quick-action-icon {
  background: #fff3dd;
  border-color: #f5e5c5;
  color: #b57c22;
}

@media (max-width:700px) {
  .module-group-cards {
    grid-template-columns: 1fr;
  }

  .lap-pembelajaran-cards .quick-action {
    min-height: 82px;
  }
}

@media (max-width:700px) {
  .guru-topbar-title small {
    display: none;
  }

  .guru-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .guru-quick-actions {
    grid-template-columns: 1fr 1fr;
  }

  .guru-schedule-item,
  .guru-activity-item,
  .guru-student-item {
    min-height: 54px;
  }
}

/* Dashboard Guru - layout mengikuti panel referensi Guru */
.guru-content {
  padding: 20px clamp(22px, 3vw, 43px) 64px;
}

.guru-section-nav {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e7eee9;
  display: flex;
  gap: 24px;
  min-height: 42px;
  overflow-x: auto;
  padding: 0 24px;
  white-space: nowrap;
}

.guru-section-nav a {
  align-items: center;
  border-bottom: 2px solid transparent;
  color: #687a71;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  min-height: 42px;
  text-decoration: none;
}

.guru-section-nav a:hover {
  color: #236c4e;
}

.guru-section-nav a.active {
  border-bottom-color: #247b57;
  color: #247b57;
}

.guru-page-heading {
  margin: 0 0 14px;
}

.guru-page-heading h1 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 25px;
  letter-spacing: -.4px;
  line-height: 1.2;
  margin: 0 0 5px;
}

.guru-page-heading .eyebrow {
  margin-bottom: 5px;
}

.guru-page-heading .page-subtitle {
  color: #68776f;
  font-size: 11px;
  line-height: 1.35;
  margin: 0;
}

.guru-stat-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.guru-stat-card {
  align-items: center;
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(17, 67, 49, .035);
  display: flex;
  gap: 10px;
  min-height: 78px;
  padding: 11px 12px;
}

.guru-stat-icon {
  align-items: center;
  border-radius: 10px;
  display: flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.guru-stat-icon .card-icon {
  height: 23px;
  width: 23px;
}

.guru-stat-card>div {
  min-width: 0;
}

.guru-stat-card>div>span,
.guru-stat-card strong,
.guru-stat-card small {
  display: block;
}

.guru-stat-card>div>span {
  color: #697870;
  font-size: 10px;
  line-height: 1.25;
}

.guru-stat-card strong {
  color: #182b25;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  line-height: 1.15;
  margin: 3px 0 2px;
}

.guru-stat-card small {
  color: #8b9892;
  font-size: 9px;
}

.guru-stat-green .guru-stat-icon {
  background: #e5f5e9;
  color: #319061;
}

.guru-stat-blue .guru-stat-icon {
  background: #e9f1fd;
  color: #3979d3;
}

.guru-stat-orange .guru-stat-icon {
  background: #fff0dc;
  color: #c78521;
}

.guru-stat-purple .guru-stat-icon {
  background: #f2e9fc;
  color: #8056bf;
}

.guru-main-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  margin-bottom: 12px;
}

.guru-secondary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guru-panel {
  border-color: #e1eae5;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(17, 67, 49, .025);
  margin: 0;
  overflow: hidden;
}

.guru-panel .panel-heading {
  align-items: center;
  margin-bottom: 0;
  min-height: 44px;
  padding: 0 14px;
}

.guru-panel .panel-heading h2 {
  color: #1c2d27;
  font-family: inherit;
  font-size: 14px;
  font-weight: 750;
  margin: 0;
}

.guru-panel .panel-link {
  color: #2d7656;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.guru-panel .panel-link:hover {
  text-decoration: underline;
}

/* Komponen halaman detail rapor Guru. */
.rapor-detail-panel { margin-bottom: 20px; }
.panel-subtitle { color: var(--muted); font-size: 10px; margin: 5px 0 0; }
.info-grid { background: #f7fbf8; border: 1px solid #e0ebe5; border-radius: 10px; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px; padding: 13px 14px; }
.info-grid span { color: var(--muted); display: block; font-size: 9px; }
.info-grid strong { color: var(--ink); display: block; font-size: 11px; margin-top: 4px; }
.guru-panel > form { padding: 14px; }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid select { background: #fff; border: 1px solid #dfe9e3; border-radius: 7px; color: var(--ink); font: inherit; font-size: 11px; min-height: 40px; outline: 0; padding: 10px 12px; }
.inline-edit-form { align-items: center; display: flex; gap: 6px; padding: 0 !important; }
.inline-edit-form select, .inline-edit-form input { background: #fff; border: 1px solid #dfe9e3; border-radius: 6px; color: var(--ink); font: inherit; font-size: 10px; min-height: 32px; padding: 6px 8px; }
.inline-edit-form input { max-width: 66px; }
.score-value { color: var(--ink); font-size: 15px; font-weight: 800; }
.guru-panel textarea { background: #fff; border: 1px solid #dfe9e3; border-radius: 7px; color: var(--ink); font: inherit; font-size: 11px; outline: 0; padding: 11px 12px; resize: vertical; width: 100%; }
.guru-panel > form > label { color: #65756d; display: flex; flex-direction: column; font-size: 10px; font-weight: 700; gap: 7px; }
.guru-panel > form > label textarea { font-weight: 400; }
.guru-panel .form-actions { padding-top: 14px; }
.guru-panel .table-wrap { padding: 0 14px 14px; }
.guru-panel .data-table { min-width: 720px; }
@media (max-width: 700px) {
  .info-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .inline-edit-form { align-items: stretch; flex-wrap: wrap; }
  .inline-edit-form input { max-width: none; width: 80px; }
}

.guru-table-scroll {
  overflow-x: auto;
  width: 100%;
}

.guru-schedule-table,
.guru-student-table {
  border-collapse: collapse;
  min-width: 700px;
  width: 100%;
}

.guru-schedule-table th,
.guru-student-table th {
  background: #f8fbf9;
  color: #62736b;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .02em;
  padding: 8px 9px;
  text-align: left;
  white-space: nowrap;
}

.guru-schedule-table td {
  border-top: 1px solid #edf1ee;
  color: #334d42;
  font-size: 11px;
  line-height: 1.3;
  padding: 8px 9px;
  vertical-align: middle;
  white-space: nowrap;
}

.guru-schedule-table td strong {
  color: #203b30;
  font-size: 11px;
}

.guru-time-cell {
  color: #3d574b !important;
  font-variant-numeric: tabular-nums;
}

.guru-schedule-table th:first-child,
.guru-schedule-table td:first-child {
  padding-left: 14px;
}

.guru-schedule-table th:last-child,
.guru-schedule-table td:last-child {
  padding-right: 14px;
}

.guru-zoom-link {
  background: #eaf2ff;
  border-radius: 5px;
  color: #3e77c5;
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  margin-right: 5px;
  padding: 4px 6px;
}

.guru-status {
  border-radius: 5px;
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 6px;
}

.guru-status-live {
  background: #e4f4e9;
  color: #34865c;
}

.guru-status-scheduled {
  background: #f0f3f2;
  color: #75827c;
}

.guru-status-good {
  background: #e5f4e9;
  color: #34865c;
}

.guru-status-empty {
  background: #f1f3f2;
  color: #919d97;
}

.guru-status-warning {
  background: #fff2d8;
  color: #9a681b;
}

.guru-table-foot {
  align-items: center;
  color: #66786f;
  display: flex;
  font-size: 10px;
  justify-content: space-between;
  margin: 0;
  min-height: 34px;
  padding: 0 14px;
}

.guru-empty-cell {
  color: #687b71 !important;
  padding: 20px 14px !important;
  text-align: center;
}

.guru-empty-copy {
  color: #687b71;
  font-size: 11px;
  margin: 0;
  padding: 20px 14px;
  text-align: center;
}

.guru-priority-list {
  padding: 0 10px 5px;
}

.guru-priority-list a {
  align-items: center;
  border-top: 1px solid #edf1ee;
  color: inherit;
  display: flex;
  gap: 9px;
  min-height: 53px;
  padding: 6px 4px;
  text-decoration: none;
}

.guru-priority-list a:first-child {
  border-top: 0;
}

.guru-priority-icon {
  align-items: center;
  border-radius: 9px;
  display: flex;
  flex: 0 0 auto;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.guru-priority-icon .card-icon {
  height: 17px;
  width: 17px;
}

.guru-priority-orange {
  background: #fff0df;
  color: #c47e1c;
}

.guru-priority-purple {
  background: #f1e7fb;
  color: #8255bd;
}

.guru-priority-green {
  background: #e4f4e9;
  color: #31895c;
}

.guru-priority-yellow {
  background: #fff4dc;
  color: #bf861e;
}

.guru-priority-copy {
  flex: 1;
  min-width: 0;
}

.guru-priority-copy strong,
.guru-priority-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guru-priority-copy strong {
  color: #213b30;
  font-size: 11px;
}

.guru-priority-copy small {
  color: #64776d;
  font-size: 10px;
  margin-top: 2px;
}

.guru-priority-list b {
  background: #edf4ef;
  border-radius: 6px;
  color: #37855b;
  font-size: 10px;
  min-width: 25px;
  padding: 5px 4px;
  text-align: center;
}

.guru-arrow {
  color: #8a9891;
  font-size: 19px;
  line-height: 1;
}

.guru-feed-list {
  padding: 0 14px 5px;
}

.guru-feed-item {
  align-items: center;
  border-top: 1px solid #edf1ee;
  display: flex;
  gap: 9px;
  min-height: 48px;
  padding: 6px 0;
}

.guru-feed-item:first-child {
  border-top: 0;
}

.guru-feed-icon {
  align-items: center;
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  height: 27px;
  justify-content: center;
  width: 27px;
}

.guru-feed-icon .card-icon {
  height: 14px;
  width: 14px;
}

.guru-feed-green {
  background: #e5f4e9;
  color: #34885c;
}

.guru-feed-purple {
  background: #f1e7fb;
  color: #8255bd;
}

.guru-feed-orange {
  background: #fff0df;
  color: #bd7d20;
}

.guru-feed-copy {
  flex: 1;
  min-width: 0;
}

.guru-feed-copy strong,
.guru-feed-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guru-feed-copy strong {
  color: #243d32;
  font-size: 11px;
}

.guru-feed-copy small {
  color: #64776d;
  font-size: 10px;
  margin-top: 2px;
}

.guru-feed-item time {
  color: #64776d;
  font-size: 9px;
  white-space: nowrap;
}

.guru-feed-label {
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 6px;
}

.guru-feed-tahfizh {
  background: #e7f2ec;
  color: #34865c;
}

.guru-feed-ckhs {
  background: #eaf1fc;
  color: #3c77bd;
}

.guru-student-panel {
  margin-bottom: 12px;
}

.guru-student-panel .panel-heading {
  gap: 10px;
}

.guru-panel-tools {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.guru-panel-tools select,
.guru-panel-tools input,
.guru-student-foot select {
  background: #fff;
  border: 1px solid #dfe9e3;
  border-radius: 6px;
  color: #68776f;
  font: inherit;
  font-size: 9px;
  min-height: 27px;
  outline: 0;
  padding: 4px 6px;
}

.guru-panel-tools input {
  min-width: 135px;
}

.guru-student-table {
  min-width: 1000px;
}

.guru-student-table th {
  padding: 8px 8px;
}

.guru-student-table td {
  border-top: 1px solid #edf1ee;
  color: #334d42;
  font-size: 11px;
  line-height: 1.3;
  padding: 7px 8px;
  white-space: nowrap;
}

.guru-student-table th:first-child,
.guru-student-table td:first-child {
  padding-left: 14px;
}

.guru-student-table th:last-child,
.guru-student-table td:last-child {
  padding-right: 14px;
}

.guru-student-name {
  align-items: center;
  display: flex;
  gap: 7px;
}

.guru-avatar {
  align-items: center;
  background: #e3f2e8;
  border-radius: 50%;
  color: #31885d;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 8px;
  font-weight: 800;
  height: 23px;
  justify-content: center;
  width: 23px;
}

.guru-student-name strong {
  color: #203b30;
  font-size: 11px;
}

.guru-progress-copy {
  color: #3d574b;
  display: block;
  font-size: 10px;
  margin-bottom: 4px;
}

.guru-progress {
  background: #e7ece9;
  border-radius: 3px;
  display: block;
  height: 4px;
  overflow: hidden;
  width: 82px;
}

.guru-progress i {
  background: #3a9665;
  border-radius: 3px;
  display: block;
  height: 100%;
}

.guru-view-link {
  color: #2f7657;
  font-size: 10px;
  text-decoration: none;
}

.guru-more {
  color: #728079;
  font-size: 16px;
  margin-left: 9px;
  vertical-align: -2px;
}

.guru-student-foot {
  border-top: 1px solid #edf1ee;
}

.guru-pagination {
  align-items: center;
  display: flex;
  gap: 5px;
  margin-left: auto;
  margin-right: auto;
}

.guru-pagination button {
  background: #fff;
  border: 1px solid #e0e9e4;
  border-radius: 5px;
  color: #63736b;
  cursor: pointer;
  font-size: 9px;
  height: 24px;
  min-width: 24px;
}

.guru-pagination button.active {
  background: #075b49;
  border-color: #075b49;
  color: #fff;
}

.guru-actions-panel {
  margin-bottom: 12px;
}

.guru-actions-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0 14px 14px;
}

.guru-actions-grid a {
  align-items: center;
  background: #fff;
  border: 1px solid #e5ece8;
  border-radius: 9px;
  display: grid;
  gap: 2px 8px;
  grid-template-columns: 32px 1fr;
  padding: 9px 8px;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}

.guru-actions-grid a:hover {
  box-shadow: 0 8px 20px rgba(20, 78, 55, .08);
  transform: translateY(-2px);
}

.guru-action-icon {
  align-items: center;
  border-radius: 8px;
  display: flex;
  grid-row: span 2;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.guru-action-icon .card-icon {
  height: 17px;
  width: 17px;
}

.guru-action-green {
  background: #e5f4e9;
  color: #31885d;
}

.guru-action-purple {
  background: #f1e7fb;
  color: #8255bd;
}

.guru-action-blue {
  background: #e9f1fd;
  color: #3979d3;
  font-size: 20px;
}

.guru-action-orange {
  background: #fff0df;
  color: #c27e1e;
}

.guru-actions-grid strong {
  color: #243d32;
  font-size: 10px;
}

.guru-actions-grid small {
  color: #64776d;
  font-size: 9px;
}

@media (max-width:1050px) {
  .guru-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .guru-panel-tools select:nth-child(2),
  .guru-panel-tools select:nth-child(3) {
    display: none;
  }

  .guru-actions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:760px) {
  .guru-section-nav {
    gap: 18px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .guru-content {
    padding: 22px 15px 42px;
  }

  .guru-page-heading h1 {
    font-size: 23px;
  }

  .guru-main-grid,
  .guru-secondary-grid {
    grid-template-columns: 1fr;
  }

  .guru-panel-tools input {
    min-width: 100px;
  }

  .guru-actions-grid {
    grid-template-columns: repeat(2, 1fr);
    padding-left: 12px;
    padding-right: 12px;
  }

  .guru-panel .panel-heading {
    padding-left: 13px;
    padding-right: 13px;
  }

  .guru-table-foot {
    padding-left: 13px;
    padding-right: 13px;
  }
}

@media (max-width:450px) {
  .guru-stat-grid {
    gap: 9px;
    grid-template-columns: 1fr 1fr;
  }

  .guru-stat-card {
    gap: 8px;
    min-height: 79px;
    padding: 10px;
  }

  .guru-stat-icon {
    height: 35px;
    width: 35px;
  }

  .guru-stat-icon .card-icon {
    height: 18px;
    width: 18px;
  }

  .guru-stat-card strong {
    font-size: 20px;
  }

  .guru-stat-card>div>span {
    font-size: 8px;
  }

  .guru-stat-card small {
    font-size: 8px;
  }

  .guru-page-heading .page-subtitle {
    line-height: 1.5;
  }

  .guru-panel-tools select {
    display: none;
  }

  .guru-panel-tools input {
    max-width: 110px;
    min-width: 0;
  }

  .guru-student-foot {
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 8px;
    padding-top: 8px;
  }

  .guru-pagination {
    margin-left: auto;
    margin-right: 0;
    order: 3;
    width: 100%;
  }

  .guru-student-foot select {
    margin-left: auto;
  }
}

/* Ringkasan modul dashboard Guru */
.guru-dashboard-heading {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.guru-year-badge,
.guru-panel-note {
  background: #e9f6ee;
  border: 1px solid #d7ede0;
  border-radius: 999px;
  color: #2b7957;
  font-size: 9px;
  font-weight: 700;
  padding: 6px 9px;
  white-space: nowrap;
}

.guru-stat-grid-secondary {
  margin-top: -4px;
}

.guru-stat-link {
  color: inherit;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.guru-stat-link:hover {
  border-color: #acd8c0;
  box-shadow: 0 10px 24px rgba(17, 67, 49, .09);
  transform: translateY(-2px);
}

.guru-qurani-panel {
  margin-bottom: 12px;
}

.guru-panel-heading-note {
  color: #7b8982;
  display: block;
  font-size: 9px;
  margin-top: 3px;
}

.guru-qurani-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 14px 14px;
}

.guru-qurani-card {
  align-items: flex-start;
  background: #f8fcfa;
  border: 1px solid #e1ece6;
  border-radius: 10px;
  color: inherit;
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.guru-qurani-card:hover {
  border-color: #abd9c0;
  box-shadow: 0 9px 20px rgba(17, 67, 49, .08);
  transform: translateY(-2px);
}

.guru-qurani-card-icon {
  align-items: center;
  border-radius: 9px;
  display: flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.guru-qurani-card-icon .card-icon {
  height: 17px;
  width: 17px;
}

.guru-qurani-card-copy {
  display: block;
  min-width: 0;
}

.guru-qurani-card-copy strong,
.guru-qurani-card-copy small,
.guru-qurani-card-copy b {
  display: block;
}

.guru-qurani-card-copy strong {
  color: #203b30;
  font-size: 11px;
}

.guru-qurani-card-copy small {
  color: #6f8077;
  font-size: 9px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guru-qurani-card-copy b {
  color: #19382c;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  line-height: 1.1;
  margin-top: 9px;
}

.guru-qurani-card-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.guru-qurani-card-meta em {
  background: #fff;
  border: 1px solid #e0ebe5;
  border-radius: 999px;
  color: #63786d;
  font-size: 8px;
  font-style: normal;
  padding: 3px 6px;
  white-space: nowrap;
}

.guru-qurani-card > .guru-arrow {
  color: #91a198;
  font-size: 19px;
  line-height: 1;
  margin-left: auto;
}

.guru-qurani-green .guru-qurani-card-icon {
  background: #e2f4e8;
  color: #2f8a5e;
}

.guru-qurani-purple .guru-qurani-card-icon {
  background: #f0e7fb;
  color: #8157bd;
}

.guru-qurani-orange .guru-qurani-card-icon {
  background: #fff0dc;
  color: #c48120;
}

.guru-priority-blue {
  background: #e8f1fd;
  color: #3979d3;
}

.guru-module-grid {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

.guru-module-summary,
.guru-message-list {
  padding: 0 14px 9px;
}

.guru-module-summary a,
.guru-message-item {
  align-items: center;
  border-top: 1px solid #edf1ee;
  color: inherit;
  display: flex;
  gap: 9px;
  min-height: 53px;
  padding: 7px 0;
  text-decoration: none;
}

.guru-module-summary a:first-child,
.guru-message-item:first-child {
  border-top: 0;
}

.guru-module-icon {
  align-items: center;
  border-radius: 9px;
  display: flex;
  flex: 0 0 auto;
  height: 31px;
  justify-content: center;
  width: 31px;
}

.guru-module-icon .card-icon {
  height: 16px;
  width: 16px;
}

.guru-module-green {
  background: #e5f4e9;
  color: #31885d;
}

.guru-module-orange {
  background: #fff0df;
  color: #c27e1e;
}

.guru-module-purple {
  background: #f1e7fb;
  color: #8255bd;
}

.guru-module-blue {
  background: #e8f1fd;
  color: #3979d3;
}

.guru-module-summary a > span:nth-child(2),
.guru-message-item > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.guru-module-summary strong,
.guru-module-summary small,
.guru-message-item strong,
.guru-message-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guru-module-summary strong,
.guru-message-item strong {
  color: #213b30;
  font-size: 11px;
}

.guru-module-summary small,
.guru-message-item small {
  color: #64776d;
  font-size: 10px;
  margin-top: 2px;
}

.guru-module-summary b {
  color: #8a9891;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}

.guru-message-item time {
  color: #819088;
  flex: 0 0 auto;
  font-size: 9px;
}

/* Panel berpasangan memakai tinggi baris yang sama agar tidak ada kotak yang menggantung. */
.guru-secondary-grid,
.guru-module-grid {
  align-items: stretch;
}

.guru-main-grid {
  align-items: stretch;
}

.guru-main-grid > .guru-panel {
  height: 100%;
}

.guru-secondary-grid > .guru-panel,
.guru-module-grid > .guru-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.guru-secondary-grid .guru-feed-list,
.guru-module-grid .guru-module-summary,
.guru-module-grid .guru-message-list {
  flex: 1;
}

.guru-secondary-grid .guru-empty-copy,
.guru-module-grid .guru-empty-copy {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 112px;
}

@media (max-width:760px) {
  .guru-dashboard-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .guru-module-grid {
    grid-template-columns: 1fr;
  }

  .guru-qurani-grid {
    grid-template-columns: 1fr;
  }
}

@font-face {
  font-display: swap;
  font-family: 'LPMQ';
  src: url('../assets/fonts/lpmq/lpmq.ttf') format('truetype');
}

.quran-input-section {
  border-top: 1px solid #edf1ee;
  margin-top: 2px;
  padding-top: 16px;
}

.quran-selection-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr);
}

.quran-fields {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.quran-fields label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.quran-fields label span {
  color: #65756d;
  font-size: 10px;
  font-weight: 700;
}

.quran-fields select {
  background: #fff;
  border: 1px solid #dfe9e3;
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  min-height: 40px;
  outline: 0;
  padding: 9px 10px;
  width: 100%;
}

.quran-fields select:focus {
  border-color: #6bad8d;
  box-shadow: 0 0 0 3px rgba(48, 145, 104, .1);
}

.quran-fields select:disabled {
  background: #f6faf7;
  color: #86938d;
  cursor: not-allowed;
}

.quran-checklist-toolbar {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 240px) 1fr;
  margin-top: 16px;
}

.quran-checklist-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.quran-checklist-toolbar label span {
  color: #65756d;
  font-size: 10px;
  font-weight: 700;
}

.quran-checklist-toolbar select {
  background: #fff;
  border: 1px solid #dfe9e3;
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  min-height: 40px;
  padding: 9px 10px;
}

.quran-checklist-toolbar small {
  color: #71817a;
  font-size: 10px;
}

.quran-checklist-summary {
  align-self: center;
  background: #f3faf5;
  border: 1px solid #dcece1;
  border-radius: 8px;
  color: #347556;
  font-size: 11px;
  font-weight: 700;
  min-height: 40px;
  padding: 11px 13px;
}

.quran-surat-status {
  align-self: center;
  color: #158264;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  min-height: 18px;
}

.quran-surat-status:empty {
  display: none;
}

.quran-checklist {
  background: #fbfefc;
  border: 1px solid #e1eee5;
  border-radius: 10px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  margin-top: 14px;
  max-height: 245px;
  overflow-y: auto;
  padding: 12px;
}

.quran-checklist-empty {
  color: #71817a;
  font-size: 11px;
  grid-column: 1 / -1;
  padding: 8px;
}

.quran-checklist-item {
  align-items: center;
  background: #fff;
  border: 1px solid #dcece1;
  border-radius: 8px;
  color: #285940;
  cursor: pointer;
  display: flex;
  font-size: 11px;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
}

.quran-checklist-item:hover {
  border-color: #70b28f;
  background: #f3faf5;
}

.quran-checklist-item input {
  accent-color: #087f62;
  height: 16px;
  width: 16px;
}

.quran-checklist-item.is-locked {
  background: #f1f6f2;
  color: #8a9890;
}

.has-ayat-checklist [data-quran-range-selects] {
  margin-bottom: 2px;
}

.quran-range-preview {
  align-self: stretch;
  background: linear-gradient(145deg, #f4fbf6, #eef8f0);
  border: 1px solid #dcece1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  padding: 20px;
}

.quran-range-preview .eyebrow {
  color: #37845d;
  margin-bottom: 8px;
}

.quran-range-preview strong {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  line-height: 1.35;
}

.quran-range-preview span {
  color: #37604d;
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
}

.quran-range-preview small {
  color: #71817a;
  font-size: 10px;
  margin-top: 5px;
}

.setoran-form-layout {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
}

.setoran-form-layout>.setoran-form {
  max-width: none;
}

.quran-range-preview-external {
  align-self: stretch;
  box-sizing: border-box;
  height: auto;
  justify-content: flex-start;
  min-height: 0;
  position: relative;
  top: auto;
}

.quran-preview-verses {
  box-sizing: border-box;
  flex: 1 1 0;
  height: auto;
  max-height: none;
  min-height: 0;
}

.quran-preview-verses {
  border-top: 1px solid rgba(45, 123, 82, .16);
  color: #49685a;
  font-size: 10px;
  line-height: 1.55;
  margin-top: 13px;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 10px;
  scrollbar-width: thin;
}

.quran-preview-verses p {
  margin: 0 0 7px;
}

.quran-preview-verses b {
  color: #187652;
  margin-right: 3px;
}

.quran-verse-item {
  border-bottom: 1px solid rgba(45, 123, 82, .12);
  padding: 0 0 11px;
}

.quran-verse-item+.quran-verse-item {
  padding-top: 11px;
}

.quran-verse-item:last-child {
  border-bottom: 0;
}

.quran-verse-number {
  color: #187652;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 5px;
}

.quran-verse-arab {
  color: #173f31;
  direction: rtl;
  font-family: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', Tahoma, serif;
  font-size: 19px;
  line-height: 2;
  margin: 0 0 5px;
  text-align: right;
}

.quran-verse-translation-label {
  color: #37845d;
  display: block;
  font-size: 9px;
  font-weight: 800;
  margin-bottom: 2px;
}

.quran-verse-translation {
  color: #49685a;
  font-size: 10px;
  line-height: 1.55;
  margin: 0;
}

/* Form Tasmi’ memakai kontrol dan grid yang sama dengan modul Qurani. */
.tasmi-form .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tasmi-form .form-field-wide {
  grid-column: 1 / -1;
}

.tasmi-form select,
.tasmi-form input[type='datetime-local'],
.tasmi-form input[type='url'],
.tasmi-form input[type='text'] {
  appearance: none;
  background: #fff;
  border: 1px solid #dfe9e3;
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  min-height: 40px;
  outline: 0;
  padding: 10px 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
  width: 100%;
}

.tasmi-form select {
  background-image: linear-gradient(45deg, transparent 50%, #087461 50%), linear-gradient(135deg, #087461 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 32px;
}

.tasmi-form select:focus,
.tasmi-form input:focus,
.tasmi-form textarea:focus {
  border-color: #6bad8d;
  box-shadow: 0 0 0 3px rgba(48, 145, 104, .1);
}

.tasmi-form textarea {
  min-height: 120px;
}

.tasmi-form .form-field small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
}

.tasmi-form .form-readonly {
  align-items: center;
  background: #f2f8f4;
  border: 1px solid #d5e8dc;
  border-radius: 8px;
  color: #397260;
  display: flex;
  font-size: 11px;
  line-height: 1.45;
  min-height: 40px;
  padding: 10px 12px;
}

.tasmi-detail-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tasmi-detail-page > .page-heading {
  margin-bottom: 0;
}

.tasmi-detail-page > .panel {
  margin: 0;
}

/* Pengaturan slot jadwal Tasmi’ Admin Sekolah. */
.slot-tasmi-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slot-tasmi-panel { margin-top: 20px; }
.slot-tasmi-note { color: var(--muted); font-size: 10px; margin: 4px 0 0; }
.slot-tasmi-table { min-width: 920px; }
.slot-tasmi-table td { vertical-align: middle; }
.slot-tasmi-table td > strong, .slot-tasmi-table td > small { display: block; }
.slot-tasmi-capacity { color: var(--muted); font-size: 9px; margin-top: 3px; }
.slot-tasmi-status { border-radius: 999px; display: inline-block; font-size: 9px; font-weight: 800; padding: 5px 8px; white-space: nowrap; }
.slot-tasmi-status.is-available { background: #e5f7ed; color: #137453; }
.slot-tasmi-status.is-closed { background: #f3f5f4; color: #7b8983; }
.slot-tasmi-note-cell { color: var(--muted); max-width: 220px; }
.slot-tasmi-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.slot-tasmi-actions form { margin: 0; }
.slot-tasmi-warning { align-items: flex-start; background: #fff9ed; border-color: #f0d9a9; color: #75591d; display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; }
.slot-tasmi-warning code { background: rgba(117, 89, 29, .08); border-radius: 4px; font-size: 10px; padding: 2px 4px; }
.slot-tasmi-dialog { border: 0; border-radius: 16px; box-shadow: 0 24px 80px rgba(7, 55, 43, .28); max-height: min(90vh, 720px); max-width: min(680px, calc(100vw - 28px)); padding: 0; width: 680px; }
.slot-tasmi-dialog::backdrop { background: rgba(8, 42, 32, .48); }
.slot-tasmi-dialog > form { max-height: min(90vh, 720px); overflow-y: auto; padding: 22px; position: relative; }
.slot-tasmi-dialog-heading { align-items: flex-start; border-bottom: 1px solid #e5eee9; display: flex; justify-content: space-between; margin-bottom: 16px; padding-bottom: 13px; }
.slot-tasmi-dialog-heading h2 { color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: 21px; margin: 4px 0 0; }
.slot-tasmi-dialog-heading p:not(.eyebrow) { color: var(--muted); font-size: 10px; margin: 5px 0 0; }
.slot-tasmi-close { background: transparent; border: 0; color: #82918a; cursor: pointer; font-size: 25px; line-height: 1; padding: 0 2px; }
.slot-tasmi-dialog .form-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slot-tasmi-dialog label { color: #527067; display: flex; flex-direction: column; font-size: 9px; font-weight: 700; gap: 5px; min-width: 0; }
.slot-tasmi-dialog label span b { color: #d45f55; }
.slot-tasmi-dialog input, .slot-tasmi-dialog select, .slot-tasmi-dialog textarea { background: #fff; border: 1px solid #d3e5db; border-radius: 7px; color: var(--ink); font: inherit; font-size: 10px; min-height: 36px; padding: 8px 9px; width: 100%; }
.slot-tasmi-dialog textarea { min-height: 84px; resize: vertical; }
.slot-tasmi-dialog label small { color: var(--muted); font-size: 8px; font-weight: 400; line-height: 1.35; }
.slot-tasmi-dialog .form-span-full { grid-column: 1 / -1; }
.slot-tasmi-dialog-actions { border-top: 1px solid #e5eee9; display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; padding-top: 15px; }
.slot-tasmi-confirm, .slot-tasmi-progress { align-items: center; background: rgba(8, 42, 32, .48); display: flex; inset: 0; justify-content: center; padding: 18px; position: absolute; z-index: 5; }
.slot-tasmi-confirm[hidden], .slot-tasmi-progress[hidden] { display: none; }
.slot-tasmi-confirm-card, .slot-tasmi-progress-card { background: #fff; border: 1px solid #dcebe3; border-radius: 15px; box-shadow: 0 22px 60px rgba(3, 31, 27, .25); max-width: 360px; padding: 25px 24px 22px; text-align: center; width: 100%; }
.slot-tasmi-confirm-icon { align-items: center; background: #fff5df; border: 1px solid #f0d38b; border-radius: 50%; color: #b27b1c; display: flex; font-family: Georgia, serif; font-size: 21px; height: 48px; justify-content: center; margin: 0 auto 12px; width: 48px; }
.slot-tasmi-confirm-card h3, .slot-tasmi-progress-card h3 { color: var(--ink); font-family: 'Playfair Display', Georgia, serif; font-size: 19px; margin: 0 0 7px; }
.slot-tasmi-confirm-card p, .slot-tasmi-progress-card p { color: var(--muted); font-size: 11px; line-height: 1.55; margin: 0 auto; }
.slot-tasmi-confirm-actions { display: flex; gap: 9px; justify-content: center; margin-top: 20px; }
.slot-tasmi-confirm-actions .button { min-width: 116px; }
.slot-tasmi-spinner { animation: action-loading-spin .8s linear infinite; border: 3px solid #dceee4; border-radius: 50%; border-top-color: #08755e; height: 36px; margin: 0 auto 13px; width: 36px; }

@media (max-width: 720px) {
  .slot-tasmi-stat-grid { grid-template-columns: 1fr; }
  .slot-tasmi-dialog .form-grid { grid-template-columns: 1fr; }
  .slot-tasmi-dialog .form-span-full { grid-column: auto; }
  .slot-tasmi-dialog-actions { flex-direction: column-reverse; }
  .slot-tasmi-dialog-actions .button { width: 100%; }
}

@media (max-width: 560px) {
  .tasmi-form .form-grid {
    grid-template-columns: 1fr;
  }

  .tasmi-form .form-field-wide {
    grid-column: auto;
  }
}

@media (max-width:1000px) {
  .setoran-form-layout {
    grid-template-columns: 1fr;
  }

  .quran-range-preview-external {
    height: auto;
    min-height: 170px;
    position: static;
  }

  .quran-range-preview-external .quran-preview-verses {
    flex: 0 1 auto;
    height: auto;
    max-height: 260px;
  }

  .setoran-form-layout>.quran-range-preview {
    order: 2;
  }
}

@media (max-width:700px) {
  .quran-selection-grid {
    grid-template-columns: 1fr;
  }

  .quran-range-preview {
    min-height: 120px;
  }

  .quran-fields {
    gap: 12px;
  }
}

@media (max-width:460px) {
  .quran-fields {
    grid-template-columns: 1fr;
  }
}

.ckhs-check-button {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  margin-top: 5px;
  color: #2f6fb8;
}

.ckhs-check-backdrop {
  align-items: center;
  background: rgba(7, 35, 31, .62);
  display: flex;
  inset: 0;
  justify-content: center;
  overflow-y: auto;
  padding: 18px;
  position: fixed;
  z-index: 130;
}

.ckhs-check-open {
  overflow: hidden;
}

.ckhs-check-dialog {
  animation: confirm-dialog-in .18s ease-out;
  background: #fff;
  border: 1px solid #dcebe3;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(3, 31, 27, .28);
  max-height: min(720px, calc(100vh - 36px));
  max-width: 660px;
  overflow-y: auto;
  padding: 27px 30px 25px;
  position: relative;
  width: 100%;
}

.ckhs-check-dialog h2 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  margin: 0 0 8px;
}

.ckhs-check-close {
  background: #f1f7f3;
  border: 0;
  border-radius: 50%;
  color: var(--forest);
  cursor: pointer;
  font-size: 23px;
  height: 32px;
  line-height: 1;
  position: absolute;
  right: 20px;
  top: 19px;
  width: 32px;
}

.ckhs-check-student {
  border-bottom: 1px solid #e6eee9;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 11px;
  gap: 3px;
  margin: 0 0 17px;
  padding-bottom: 15px;
}

.ckhs-check-student strong {
  color: var(--ink);
  font-size: 13px;
}

.ckhs-check-section {
  background: #f7fbf8;
  border: 1px solid #e0eee5;
  border-radius: 12px;
  margin-top: 12px;
  padding: 14px 16px;
}

.ckhs-check-section h3 {
  color: var(--forest);
  font-size: 12px;
  margin: 0 0 10px;
}

.ckhs-check-category {
  border-top: 1px solid #e5eee8;
  padding: 9px 0 2px;
}

.ckhs-check-category:first-child {
  border-top: 0;
  padding-top: 0;
}

.ckhs-check-category strong {
  color: var(--ink);
  font-size: 11px;
}

.ckhs-check-category ul {
  color: #4e675c;
  columns: 2;
  font-size: 10px;
  line-height: 1.6;
  margin: 5px 0 0;
  padding-left: 18px;
}

.ckhs-check-category li {
  align-items: center;
  display: flex;
  gap: 7px;
  list-style: none;
  margin-bottom: 3px;
}

.ckhs-check-value-icon {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  height: 17px;
  justify-content: center;
  width: 17px;
}

.ckhs-check-value-icon.is-yes {
  background: #dcf3e4;
  color: #16804d;
}

.ckhs-check-value-icon.is-no {
  background: #fde4e3;
  color: #c34e4a;
}

.ckhs-check-category li b {
  color: var(--forest);
}

.ckhs-check-meta {
  background: #eaf7ee;
  border-radius: 9px;
  color: #26734d;
  display: flex;
  flex-direction: column;
  font-size: 10px;
  gap: 4px;
  padding: 11px 12px;
}

.ckhs-check-meta.is-warning,
.ckhs-check-rapi-status.is-warning {
  background: #fff3e3;
  color: #a76722;
}

.ckhs-check-rapi-status {
  background: #eaf7ee;
  border-radius: 9px;
  color: #26734d;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
  padding: 7px 10px;
}

.ckhs-check-rapi-list {
  display: grid;
  gap: 7px;
}

.ckhs-check-rapi-list>div {
  align-items: center;
  background: #fff;
  border: 1px solid #e7eee9;
  border-radius: 8px;
  display: grid;
  gap: 4px 10px;
  grid-template-columns: 1fr auto;
  padding: 8px 10px;
}

.ckhs-check-rapi-list span {
  color: var(--ink);
  font-size: 10px;
}

.ckhs-check-rapi-list b {
  color: var(--forest);
  font-size: 10px;
  text-transform: capitalize;
}

.ckhs-check-rapi-list small {
  color: var(--muted);
  font-size: 9px;
  grid-column: 1 / -1;
}

.ckhs-rapi-form {
  border-top: 1px solid #e5eee8;
  margin-top: 13px;
  padding-top: 13px;
}

.ckhs-rapi-form-help {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  margin: 0 0 10px;
}

.ckhs-rapi-form-row {
  background: #fff;
  border: 1px solid #e7eee9;
  border-radius: 9px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(120px, .65fr) minmax(210px, 1.35fr);
  margin-top: 8px;
  padding: 9px 10px;
}

.ckhs-rapi-form-row label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ckhs-rapi-form-row label>span {
  color: var(--muted);
  font-size: 9px;
}

.ckhs-rapi-form-row select,
.ckhs-rapi-form-row input {
  background: #fff;
  border: 1px solid #d9e7df;
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  min-height: 34px;
  outline: 0;
  padding: 8px 10px;
  width: 100%;
}

.ckhs-rapi-form-row select:focus,
.ckhs-rapi-form-row input:focus {
  border-color: #62a987;
  box-shadow: 0 0 0 3px rgba(48, 145, 104, .1);
}

.ckhs-check-empty {
  color: var(--muted);
  font-size: 10px;
  margin: 0;
}

.ckhs-check-actions {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  margin-top: 18px;
}

.ckhs-do-control {
  margin-right: auto;
}

.ckhs-fill-rapi {
  margin-right: auto;
}

@media (max-width:560px) {
  .ckhs-check-dialog {
    padding: 23px 18px 20px;
  }

  .ckhs-check-category ul {
    columns: 1;
  }

  .ckhs-check-actions {
    flex-wrap: wrap;
  }

  .ckhs-do-control,
  .ckhs-fill-rapi {
    margin-right: 0;
    width: 100%;
  }

  .ckhs-rapi-form-row {
    grid-template-columns: 1fr;
  }
}
.data-identity { align-items:center; display:inline-flex; gap:8px; min-width:0; }
.data-identity > span:last-child { min-width:0; }
.data-identity strong, .data-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.data-avatar-image, .data-avatar-fallback { align-items:center; border-radius:50%; flex:0 0 32px; height:32px; justify-content:center; object-fit:cover; overflow:hidden; width:32px; }
.data-avatar-fallback { background:#e1f2e9; color:#087958; display:inline-flex; font-size:10px; font-weight:800; }
.data-avatar-image[hidden], .data-avatar-fallback[hidden] { display:none !important; }
.data-detail-name-trigger { background:transparent; border:0; cursor:pointer; display:inline-flex; padding:0; text-align:left; }
.data-detail-name-trigger:hover strong { color:#087958; text-decoration:underline; }
.data-detail-modal { align-items:center; background:rgba(7, 36, 29, .56); display:flex; inset:0; justify-content:center; padding:22px; position:fixed; z-index:1400; }
.data-detail-modal[hidden] { display:none !important; }
.data-detail-dialog { background:#fff; border:1px solid #dbe8e0; border-radius:20px; box-shadow:0 28px 80px rgba(8, 44, 34, .24); max-height:min(88vh, 760px); max-width:880px; overflow:auto; width:100%; }
.data-detail-heading { align-items:flex-start; border-bottom:1px solid #e5eee9; display:flex; justify-content:space-between; padding:24px 28px 18px; }
.data-detail-heading h2 { color:var(--ink); font-family:Georgia, 'Times New Roman', serif; font-size:28px; margin:5px 0 0; }
.data-detail-close { background:#f2f7f4; border:0; border-radius:50%; color:#62736b; cursor:pointer; font-size:24px; height:34px; line-height:1; width:34px; }
.data-detail-body { padding:24px 28px; }
.data-detail-profile { align-items:center; display:flex; gap:14px; }
.data-detail-avatar, .data-detail-avatar-fallback { align-items:center; border-radius:50%; display:flex; flex:0 0 64px; height:64px; justify-content:center; object-fit:cover; overflow:hidden; width:64px; }
.data-detail-avatar-fallback { background:#dff3e8; color:#087958; font-size:18px; font-weight:800; }
.data-detail-avatar[hidden], .data-detail-avatar-fallback[hidden] { display:none !important; }
.data-detail-profile h3 { color:var(--ink); font-size:22px; margin:4px 0; }
.data-detail-profile p:last-child { color:#7b8a83; font-size:12px; margin:0; }
.data-detail-stats { display:grid; gap:10px; grid-template-columns:repeat(4, minmax(0, 1fr)); margin:22px 0; }
.data-detail-stat { background:#f4faf6; border:1px solid #e1eee7; border-radius:13px; padding:13px 14px; }
.data-detail-stat small { color:#74877d; display:block; font-size:10px; }
.data-detail-stat strong { color:#087958; display:block; font-size:21px; margin-top:4px; }
.data-detail-grid { display:grid; gap:18px; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.data-detail-grid section { background:#fbfdfc; border:1px solid #e5eee9; border-radius:14px; padding:17px; }
.data-detail-info-grid { display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:12px; }
.data-detail-info-grid span { color:#84948c; display:block; font-size:10px; }
.data-detail-info-grid strong { color:var(--ink); display:block; font-size:12px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.data-detail-assignment h4 { color:var(--ink); font-size:12px; margin:14px 0 7px; }
.data-detail-assignment h4:first-child { margin-top:12px; }
.data-detail-assignment ul { list-style:none; margin:0; padding:0; }
.data-detail-assignment li { border-top:1px solid #e8f0eb; display:flex; gap:12px; justify-content:space-between; padding:8px 0; }
.data-detail-assignment li strong { color:var(--ink); font-size:11px; }
.data-detail-assignment li span { color:#778880; font-size:11px; text-align:right; }
.data-detail-assignment li.is-empty { color:#83918b; display:block; font-size:11px; }
.data-detail-footnote { color:#6f8078; font-size:11px; margin-top:18px; }
.data-prestasi-detail-hero { align-items:center; display:flex; gap:16px; margin-bottom:20px; }
.data-prestasi-detail-hero h3 { color:var(--ink); font-size:22px; margin:4px 0 9px; }
.data-prestasi-detail-image { background:#f1f8f4; border:1px solid #dceae3; border-radius:13px; flex:0 0 150px; height:115px; object-fit:cover; width:150px; }
.data-prestasi-detail-image-empty { align-items:center; color:#83918b; display:flex; font-size:10px; justify-content:center; text-align:center; }
.data-prestasi-detail-copy { color:#50655b; font-size:12px; line-height:1.7; margin:12px 0 0; white-space:normal; }
.data-detail-actions { border-top:1px solid #e5eee9; display:flex; justify-content:flex-end; padding:14px 28px 20px; }
@media (max-width:700px) { .data-detail-grid, .data-detail-stats { grid-template-columns:1fr 1fr; } .data-detail-info-grid { grid-template-columns:1fr; } .data-detail-heading, .data-detail-body { padding-left:18px; padding-right:18px; } .data-detail-actions { padding-left:18px; padding-right:18px; } }
@media (max-width:700px) { .data-prestasi-detail-hero { align-items:flex-start; flex-direction:column; } .data-prestasi-detail-image { flex-basis:auto; height:150px; width:100%; } }
.student-detail-modal { align-items:center; background:rgba(7, 36, 29, .56); display:flex; inset:0; justify-content:center; padding:22px; position:fixed; z-index:1400; }
.student-detail-modal[hidden] { display:none !important; }
.student-detail-dialog { background:#fff; border:1px solid #dbe8e0; border-radius:20px; box-shadow:0 28px 80px rgba(8, 44, 34, .24); max-height:min(88vh, 760px); max-width:880px; overflow:auto; width:100%; }
.student-detail-heading { align-items:flex-start; border-bottom:1px solid #e5eee9; display:flex; justify-content:space-between; padding:24px 28px 18px; }
.student-detail-heading h2 { color:var(--ink); font-family:Georgia, 'Times New Roman', serif; font-size:28px; margin:5px 0 0; }
.student-detail-close { background:#f2f7f4; border:0; border-radius:50%; color:#62736b; cursor:pointer; font-size:24px; height:34px; line-height:1; width:34px; }
.student-detail-body { padding:24px 28px; }
.student-detail-profile { align-items:center; display:flex; gap:14px; }
.student-detail-avatar, .student-detail-avatar-fallback { align-items:center; border-radius:50%; display:flex; flex:0 0 64px; height:64px; justify-content:center; object-fit:cover; overflow:hidden; width:64px; }
.student-detail-avatar-fallback { background:#dff3e8; color:#087958; font-size:18px; font-weight:800; }
.student-detail-avatar[hidden], .student-detail-avatar-fallback[hidden] { display:none !important; }
.student-detail-profile h3 { color:var(--ink); font-size:22px; margin:4px 0; }
.student-detail-profile p:last-child { color:#7b8a83; font-size:12px; margin:0; }
.student-detail-stats { display:grid; gap:10px; grid-template-columns:repeat(6, minmax(0, 1fr)); margin:22px 0; }
.student-detail-stat { background:#f4faf6; border:1px solid #e1eee7; border-radius:13px; padding:13px 12px; }
.student-detail-stat small { color:#74877d; display:block; font-size:10px; }
.student-detail-stat strong { color:#087958; display:block; font-size:19px; margin-top:4px; }
.student-detail-grid { display:grid; gap:18px; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.student-detail-grid section { background:#fbfdfc; border:1px solid #e5eee9; border-radius:14px; padding:17px; }
.student-detail-info-grid { display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:12px; }
.student-detail-info-grid span, .student-detail-progress span { color:#84948c; display:block; font-size:10px; }
.student-detail-info-grid strong, .student-detail-progress strong { color:var(--ink); display:block; font-size:12px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.student-detail-progress { display:grid; gap:13px; grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:14px; }
.student-detail-footnote { color:#6f8078; font-size:11px; margin-top:18px; }
.student-detail-actions { border-top:1px solid #e5eee9; display:flex; justify-content:flex-end; padding:14px 28px 20px; }
@media (max-width:700px) { .student-detail-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); } .student-detail-grid, .student-detail-info-grid, .student-detail-progress { grid-template-columns:1fr; } .student-detail-heading, .student-detail-body { padding-left:18px; padding-right:18px; } .student-detail-actions { padding-left:18px; padding-right:18px; } }
.student-detail-section-wide { grid-column:1 / -1; }
.student-detail-info-grid strong { overflow-wrap:anywhere; text-overflow:clip; white-space:normal; }
.student-detail-summary-line { border-top:1px solid #e5eee9; color:#6f8078; font-size:11px; margin-top:17px; padding-top:13px; }
.student-detail-summary-line strong { color:var(--ink); font-size:13px; margin:0 3px; }
.student-detail-history { display:grid; gap:8px; grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:13px; }
.student-detail-history > div { align-items:center; background:#f4faf6; border:1px solid #e1eee7; border-radius:9px; display:flex; gap:12px; justify-content:space-between; padding:10px 12px; }
.student-detail-history span { color:#7a8b83; font-size:10px; }
.student-detail-history strong { color:var(--ink); font-size:11px; text-align:right; }
.student-detail-muted { color:#7c8b84; font-size:11px; margin:13px 0 0; }
.student-detail-status-note { background:#fffaf0; border:1px solid #f2e2bc; border-radius:8px; color:#806a3d; font-size:11px; line-height:1.5; margin:13px 0 0; padding:9px 11px; }
.student-detail-status-note strong { color:#624d25; }
@media (max-width:700px) { .student-detail-section-wide { grid-column:auto; } .student-detail-history { grid-template-columns:1fr; } .student-detail-history > div { align-items:flex-start; flex-direction:column; gap:4px; } .student-detail-history strong { text-align:left; } }

/* Header admin: notifikasi server dan profil akun aktif. */
.admin-topbar-tool { position:relative; }
.admin-notification-popover { background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:0 16px 36px rgba(16,67,57,.16); overflow:hidden; position:absolute; right:0; top:calc(100% + 12px); width:330px; z-index:80; }
.admin-notification-popover[hidden] { display:none; }
.admin-popover-heading { align-items:flex-start; border-bottom:1px solid #edf1ee; display:flex; justify-content:space-between; padding:15px 15px 12px; }
.admin-popover-heading strong,.admin-popover-heading small { display:block; }
.admin-popover-heading strong { color:var(--ink); font-size:12px; }
.admin-popover-heading small { color:var(--muted); font-size:9px; margin-top:4px; }
.admin-popover-heading button { background:none; border:0; color:#9aa7a1; font-size:19px; line-height:1; padding:0 0 0 10px; }
.admin-notification-list { max-height:335px; overflow-y:auto; padding:5px 8px; }
.admin-notification-item { align-items:flex-start; border-radius:9px; display:flex; gap:9px; padding:10px 8px; }
.admin-notification-item:hover { background:#f4f9f6; }
.admin-notification-icon { align-items:center; background:#e5f5ec; border-radius:8px; color:var(--forest); display:flex; flex:0 0 auto; height:30px; justify-content:center; width:30px; }
.admin-notification-item > span:last-child { min-width:0; }
.admin-notification-item strong,.admin-notification-item small,.admin-notification-item em { display:block; }
.admin-notification-item strong { color:var(--ink); font-size:10px; line-height:1.35; }
.admin-notification-item small { color:#6e7d76; font-size:9px; line-height:1.45; margin-top:3px; overflow-wrap:anywhere; }
.admin-notification-item em { color:#a0aba6; font-size:8px; font-style:normal; margin-top:5px; }
.admin-notification-empty { padding:24px 12px; text-align:center; }
.admin-notification-empty strong,.admin-notification-empty small { display:block; }
.admin-notification-empty strong { color:var(--ink); font-size:11px; }
.admin-notification-empty small { color:var(--muted); font-size:9px; line-height:1.5; margin-top:5px; }
.admin-notification-clear { background:#f7fbf8; border:0; border-top:1px solid #edf1ee; color:var(--forest); font-size:9px; font-weight:700; padding:11px; width:100%; }
.admin-notification-clear:hover { background:#edf7f1; }
.admin-profile-summary { border-bottom:1px solid #edf1ee; margin:0 4px 5px; padding:7px 8px 11px; }
.admin-profile-summary strong,.admin-profile-summary small { display:block; }
.admin-profile-summary strong { color:var(--ink); font-size:11px; }
.admin-profile-summary small { color:var(--muted); font-size:9px; margin-top:4px; overflow-wrap:anywhere; }
@media (max-width:560px) { .admin-notification-popover { position:fixed; right:12px; top:65px; width:min(330px,calc(100vw - 24px)); } }

.admin-account-panel { max-width:900px; }
.admin-account-hero { align-items:center; background:#f4faf6; border:1px solid #e1eee6; border-radius:12px; display:flex; gap:14px; padding:20px; }
.admin-account-avatar { font-size:16px; height:56px; width:56px; }
.admin-account-hero h2 { color:var(--ink); font-family:'Playfair Display',Georgia,serif; font-size:24px; margin:0; }
.admin-account-hero p:last-child { color:var(--muted); font-size:11px; margin:5px 0 0; }
.admin-account-grid { display:grid; gap:12px; grid-template-columns:repeat(2,1fr); margin-top:18px; }
.admin-account-grid > div { background:#fbfdfc; border:1px solid #e6eee9; border-radius:9px; padding:14px; }
.admin-account-grid span,.admin-account-grid strong { display:block; }
.admin-account-grid span { color:var(--muted); font-size:10px; }
.admin-account-grid strong { color:var(--ink); font-size:12px; margin-top:6px; overflow-wrap:anywhere; }
@media (max-width:560px) { .admin-account-grid { grid-template-columns:1fr; }.admin-account-hero h2 { font-size:20px; } }

.kontrol-dashboard-grid { grid-template-columns:1.35fr .65fr; }
.kontrol-table { border-collapse:collapse; min-width:620px; width:100%; }
.kontrol-table th { color:#8a9991; font-size:9px; font-weight:700; padding:0 8px 11px; text-align:left; white-space:nowrap; }
.kontrol-table td { border-top:1px solid #edf1ee; color:#718079; font-size:10px; padding:12px 8px; white-space:nowrap; }
.kontrol-table strong,.kontrol-table small { display:block; }
.kontrol-table strong { color:var(--ink); font-size:11px; }
.kontrol-table small { color:var(--muted); font-size:9px; margin-top:4px; }
.kontrol-table b { color:var(--forest); font-size:11px; }
.kontrol-progress { align-items:center; display:flex; gap:8px; min-width:120px; }
.kontrol-progress > div { background:#e7efea; border-radius:5px; height:6px; overflow:hidden; width:100px; }
.kontrol-progress span { background:var(--forest-2); border-radius:5px; display:block; height:100%; }
.kontrol-progress b { color:var(--ink); font-size:10px; }
.kontrol-action-panel { display:flex; flex-direction:column; gap:10px; }
.kontrol-action-card { align-items:center; border:1px solid var(--line); border-radius:10px; display:flex; gap:10px; padding:13px; }
.kontrol-action-card:hover { background:#f6faf8; border-color:#a6d4bd; }
.kontrol-action-card > span:nth-child(2) { flex:1; }
.kontrol-action-card strong,.kontrol-action-card small { display:block; }
.kontrol-action-card strong { color:var(--ink); font-size:11px; }
.kontrol-action-card small { color:var(--muted); font-size:9px; line-height:1.45; margin-top:4px; }
.kontrol-action-card > b { color:var(--forest); font-size:17px; }
.kontrol-action-icon { align-items:center; border-radius:8px; display:flex; height:38px; justify-content:center; width:38px; }
.kontrol-action-icon.gold { background:#fff1dc; color:#bd8426; }
.kontrol-action-icon.purple { background:#f0e8fc; color:#7c58b2; }
@media (max-width:1000px) { .kontrol-dashboard-grid { grid-template-columns:1fr; } }
.data-date-filter {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.data-date-filter label {
    color: #708079;
    display: flex;
    flex-direction: column;
    font-size: 9px;
    font-weight: 700;
    gap: 5px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.data-date-filter input {
    background: #fff;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    color: var(--ink, #123f3b);
    font-size: 11px;
    min-height: 38px;
    padding: 8px 10px;
}

.data-date-filter .button {
    min-height: 38px;
    padding: 9px 14px;
}

@media (max-width: 560px) {
    .data-date-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .data-date-filter input,
    .data-date-filter .button {
        width: 100%;
    }
}

.kontrol-ckhs-detail-hero { background:linear-gradient(135deg,#f3faf6,#fff); margin-bottom:14px; }
.kontrol-ckhs-detail-hero .data-detail-profile { margin:0; }
.kontrol-ckhs-detail-hero h2 { color:var(--ink); font-family:'Playfair Display',Georgia,serif; font-size:25px; margin:0; }
.kontrol-ckhs-detail-hero p:last-child { color:var(--muted); font-size:11px; margin:5px 0 0; }
.kontrol-ckhs-detail-table { min-width:900px; }
.kontrol-ckhs-detail-table td { vertical-align:top; }
.kontrol-ckhs-activity-list { display:flex; flex-wrap:wrap; gap:5px; max-width:360px; }
.kontrol-ckhs-activity-list span { background:#f1f8f3; border:1px solid #dcece1; border-radius:6px; color:var(--ink); font-size:9px; padding:4px 6px; }
.kontrol-ckhs-activity-list b { color:var(--forest); margin-left:3px; }

/* --------------------------------------------------------------------------
 * Workspace shell refresh
 * Visual direction follows the compact yayasan reference: a cleaner left
 * navigation, stronger active state, and a contextual top bar. The existing
 * markup and role-aware menu rules remain unchanged.
 * -------------------------------------------------------------------------- */
.admin-page {
  --shell-sidebar-width: 250px;
  background: #f3f7f4;
}

.admin-page .sidebar {
  background: linear-gradient(180deg, #02312b 0%, #03483d 66%, #012b26 100%);
  box-shadow: 8px 0 28px rgba(9, 57, 47, .08);
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: 18px 12px 16px;
  width: var(--shell-sidebar-width);
  scrollbar-color: rgba(185, 229, 207, .42) transparent;
  scrollbar-width: thin;
}

.admin-page .sidebar::-webkit-scrollbar {
  width: 5px;
}

.admin-page .sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.admin-page .sidebar::-webkit-scrollbar-thumb {
  background: rgba(185, 229, 207, .42);
  border-radius: 999px;
}

.admin-page .sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(220, 244, 230, .7);
}

.admin-page .sidebar::after {
  background-image: linear-gradient(180deg, rgba(2, 49, 43, .18) 0%, rgba(1, 34, 31, .42) 52%, rgba(1, 34, 31, .76) 100%), url('../assets/images/mosque-login-bg.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  content: '';
  height: 100vh;
  left: 0;
  opacity: .32;
  pointer-events: none;
  position: fixed;
  right: auto;
  width: var(--shell-sidebar-width);
  z-index: 0;
}

.admin-page .sidebar > * {
  position: relative;
  z-index: 1;
}

.admin-page .sidebar-brand {
  gap: 9px;
  padding: 0 9px 18px;
}

.admin-page .sidebar-brand .brand-emblem {
  border-radius: 10px;
  height: 36px;
  width: 36px;
}

.admin-page .sidebar-brand strong {
  font-size: 15px;
  letter-spacing: .1em;
}

.admin-page .sidebar-context {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  margin: 16px 1px 19px;
  padding: 10px;
}

.admin-page .sidebar-context strong {
  font-size: 10px;
}

.admin-page .nav-label {
  font-size: 8px;
  margin: 0 10px 7px;
}

.admin-page .nav-item,
.admin-page .sidebar-menu-group summary {
  border-radius: 7px;
  font-size: 11px;
  min-height: 37px;
  padding: 9px 10px;
}

.admin-page .nav-item:hover,
.admin-page .nav-item.active,
.admin-page .sidebar-menu-group summary:hover,
.admin-page .sidebar-menu-group[open] summary {
  background: rgba(73, 190, 151, .19);
}

.admin-page .nav-item.active {
  box-shadow: inset 3px 0 #e0b85a;
}

.admin-page .nav-icon {
  height: 16px;
  width: 16px;
}

.admin-page .sidebar-submenu {
  margin-left: 25px;
}

.admin-page .sidebar-submenu-link {
  font-size: 10px;
  padding: 7px 8px;
}

.admin-page .sidebar-bottom {
  margin-top: 18px;
}

.admin-page .help-card {
  background: rgba(255, 255, 255, .07);
  margin-bottom: 10px;
  padding: 10px 9px;
}

.admin-page .logout-link {
  font-size: 10px;
  padding: 14px 10px 0;
}

.admin-page .main-panel {
  margin-left: var(--shell-sidebar-width);
  width: calc(100% - var(--shell-sidebar-width));
}

.admin-page .topbar {
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 1px 0 rgba(15, 71, 58, .05);
  gap: 18px;
  height: 78px;
  padding: 0 clamp(14px, 2vw, 28px);
  position: relative;
}

.admin-page .topbar::after {
  background: url('../assets/images/mosque-topbar-bg.png') center bottom / cover no-repeat;
  content: '';
  inset: 0 0 0 auto;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, #000 28%, #000 100%);
  opacity: .2;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.admin-page .topbar > * {
  position: relative;
  z-index: 1;
}

.admin-topbar-title {
  display: block;
  min-width: 285px;
  padding-right: 8px;
}

.admin-topbar-title .admin-topbar-eyebrow,
.admin-topbar-title strong,
.admin-topbar-title small {
  display: block;
}

.admin-topbar-title .admin-topbar-eyebrow {
  color: #0b806d;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.admin-topbar-title strong {
  color: #102b4a;
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.admin-topbar-title small {
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}

.admin-topbar-context {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-right: auto;
}

.admin-school-switcher {
  align-items: center;
  background: #f7faf8;
  border: 1px solid #e2ece6;
  border-radius: 8px;
  display: flex;
  min-width: 150px;
  padding: 5px 9px;
}

.admin-school-switcher label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.admin-school-switcher small {
  color: #7b8c85;
  font-size: 8px;
  line-height: 1;
}

.admin-school-switcher select {
  background: transparent;
  border: 0;
  color: #163c50;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  max-width: 175px;
  outline: 0;
  padding: 0;
}

.admin-context-chip {
  background: #f7faf8;
  border: 1px solid #e2ece6;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 116px;
  padding: 7px 10px;
}

.admin-context-chip small,
.admin-context-chip strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-context-chip small {
  color: #7b8c85;
  font-size: 8px;
  line-height: 1;
}

.admin-context-chip strong {
  color: #163c50;
  font-size: 10px;
  line-height: 1.1;
}

.admin-page .topbar-search {
  max-width: 190px;
}

.admin-page .topbar-actions {
  gap: 16px;
}

.admin-page .content {
  padding: 26px clamp(16px, 2vw, 30px) 36px;
}

.admin-page .page-heading {
  margin-bottom: 20px;
}

.admin-page .admin-account-panel {
  padding: 16px;
}

.admin-page .admin-account-hero {
  gap: 12px;
  padding: 16px;
}

.admin-page .admin-account-grid {
  gap: 10px;
  margin-top: 14px;
}

.admin-page .admin-account-grid > div {
  padding: 11px 12px;
}

@media (max-width: 560px) {
  .admin-page .content {
    padding: 20px 14px 30px;
  }
}

@media (max-width: 900px) {
  .admin-page .sidebar {
    width: 244px;
  }

  .admin-page .sidebar::after {
    width: 244px;
  }

  .admin-page .main-panel {
    margin-left: 0;
    width: 100%;
  }

  .admin-topbar-title {
    min-width: 0;
    padding-right: 12px;
  }

  .admin-topbar-context {
    display: none;
  }

  .admin-topbar-context.has-school-switcher {
    display: flex;
    margin-right: 0;
  }

  .admin-topbar-context.has-school-switcher .admin-context-chip {
    display: none;
  }

  .admin-school-switcher {
    min-width: 0;
    width: min(180px, 42vw);
  }

  .admin-school-switcher select {
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .admin-topbar-title {
    display: none;
  }
}

/* Dashboard Guru: gunakan lebar penuh saat kartu aktif tidak mencapai empat item. */
.guru-stat-grid.guru-stat-grid-count-1 {
  grid-template-columns: minmax(0, 1fr);
}

.guru-stat-grid.guru-stat-grid-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guru-stat-grid.guru-stat-grid-count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .guru-stat-grid.guru-stat-grid-count-3,
  .guru-stat-grid.guru-stat-grid-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 450px) {
  .guru-stat-grid.guru-stat-grid-count-3,
  .guru-stat-grid.guru-stat-grid-count-2 {
    grid-template-columns: 1fr 1fr;
  }
}
.guru-assessment-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid #dcebe4;
    border-radius: 14px;
    background: #f8fcfa;
}

.guru-assessment-summary > div:first-child,
.guru-assessment-metrics span {
    display: grid;
    gap: 3px;
}

.guru-assessment-summary strong,
.guru-assessment-metrics b {
    color: #123f36;
}

.guru-assessment-summary small,
.guru-assessment-metrics small {
    color: #72857f;
    font-size: 11px;
}

.guru-assessment-metrics {
    display: flex;
    align-items: center;
    gap: 22px;
    text-align: right;
}

@media (max-width: 760px) {
    .guru-assessment-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .guru-assessment-metrics {
        width: 100%;
        justify-content: space-between;
        text-align: left;
    }
}

/* Manajemen Psikolog & Penugasan */
.psychologist-info-panel {
    margin-bottom: 18px;
}

.psychologist-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.psychologist-info-grid > div {
    display: grid;
    gap: 5px;
    padding: 13px 15px;
    border: 1px solid #dbece5;
    border-radius: 12px;
    background: #f7fcfa;
}

.psychologist-info-grid strong {
    color: #064d40;
    font-size: 13px;
}

.psychologist-info-grid span,
.psychologist-table small,
.psychologist-assignment-list small {
    display: block;
    color: #71847e;
    font-size: 11px;
    line-height: 1.45;
}

.psychologist-management-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 18px;
    align-items: start;
}

.psychologist-management-grid > .panel {
    min-width: 0;
    overflow: hidden;
}

.psychologist-table td strong,
.psychologist-table td > span {
    display: block;
}

.psychologist-table .table-actions,
.psychologist-assignment-list .table-actions {
    white-space: nowrap;
}

.table-actions form {
    display: inline-block;
    margin: 0;
}

.button-danger {
    color: #a73b3b;
    border-color: #f0caca;
    background: #fff7f7;
}

.button-danger:hover {
    color: #862b2b;
    background: #ffeded;
}

.status-success,
.status-danger {
    display: inline-flex !important;
    width: fit-content;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 700;
}

.status-success {
    color: #087b5d;
    background: #e6f7ef;
}

.status-danger {
    color: #b33d42;
    background: #ffeded;
}

.psychologist-assignment-panel {
    min-width: 0;
}

.psychologist-assignment-form {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #dcebe5;
    border-radius: 13px;
    background: #f8fcfa;
}

.psychologist-assignment-form label,
.psychologist-account-form label {
    display: grid;
    gap: 6px;
}

.psychologist-assignment-form label > span,
.psychologist-account-form label > span {
    color: #174e43;
    font-size: 12px;
    font-weight: 700;
}

.psychologist-assignment-form select,
.psychologist-account-form input:not([type="checkbox"]),
.psychologist-account-form select {
    appearance: none;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, #0b806d 50%), linear-gradient(135deg, #0b806d 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    border: 1px solid #d7e6df;
    border-radius: 9px;
    box-sizing: border-box;
    color: #174e43;
    font: inherit;
    font-size: 12px;
    line-height: 1.25;
    min-height: 40px;
    outline: 0;
    padding: 9px 36px 9px 12px;
    width: 100%;
}

.psychologist-assignment-form select:focus,
.psychologist-account-form input:not([type="checkbox"]):focus,
.psychologist-account-form select:focus {
    border-color: #2c9c7d;
    box-shadow: 0 0 0 3px rgba(44, 156, 125, .12);
}

.psychologist-assignment-form select:disabled,
.psychologist-account-form input:not([type="checkbox"]):disabled,
.psychologist-account-form select:disabled {
    background-color: #f1f6f3;
    color: #8a9992;
    cursor: not-allowed;
}

.psychologist-assignment-form > .button {
    justify-content: center;
    min-height: 42px;
    width: 100%;
}

.psychologist-modal {
    align-items: center;
    background: rgba(4, 39, 34, .58);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: fixed;
    z-index: 1450;
}

.psychologist-modal[hidden] {
    display: none !important;
}

.psychologist-modal-open {
    overflow: hidden;
}

.psychologist-dashboard-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.psychologist-class-scope {
  background: #f7fbf9;
  border: 1px solid #e0ece5;
  border-radius: 11px;
  margin: 0 0 14px;
  padding: 10px 12px;
}

.psychologist-class-scope .eyebrow {
  margin: 0 0 7px;
}

.psychologist-class-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.psychologist-class-empty {
  color: var(--muted);
  font-size: 10px;
}

.psychologist-dialog {
    background: #fff;
    border: 1px solid #d8e9e0;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(7, 55, 43, .27);
    max-height: min(90vh, 650px);
    max-width: 650px;
    overflow: auto;
    width: 100%;
}

.psychologist-dialog-heading {
    align-items: flex-start;
    border-bottom: 1px solid #e6efeb;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 22px 24px 17px;
}

.psychologist-dialog-heading h2 {
    color: #123f36;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    letter-spacing: -.025em;
    margin: 0 0 5px;
}

.psychologist-dialog-heading p:last-child {
    color: #75857e;
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
}

.psychologist-dialog-close {
    align-items: center;
    background: #f1f7f4;
    border: 0;
    border-radius: 50%;
    color: #4a7467;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 21px;
    height: 32px;
    justify-content: center;
    line-height: 1;
    width: 32px;
}

.psychologist-dialog-close:hover {
    background: #e2f2ea;
    color: #075b49;
}

.psychologist-dialog-form {
    padding: 20px 24px 22px;
}

.psychologist-dialog-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.psychologist-dialog-grid label {
    display: grid;
    gap: 6px;
}

.psychologist-dialog-grid label.full {
    grid-column: 1 / -1;
}

.psychologist-dialog-grid label > span {
    color: #174e43;
    font-size: 11px;
    font-weight: 700;
}

.psychologist-dialog-grid label > span small {
    color: #81928b;
    font-size: 10px;
    font-weight: 500;
}

.psychologist-dialog-grid input:not([type="checkbox"]) {
    background: #fff;
    border: 1px solid #d7e6df;
    border-radius: 9px;
    box-sizing: border-box;
    color: #174e43;
    font: inherit;
    font-size: 12px;
    min-height: 40px;
    outline: 0;
    padding: 9px 12px;
    width: 100%;
}

.psychologist-dialog-grid input:not([type="checkbox"]):focus {
    border-color: #2c9c7d;
    box-shadow: 0 0 0 3px rgba(44, 156, 125, .12);
}

.psychologist-dialog-grid label > small {
    color: #7a8b84;
    font-size: 10px;
    line-height: 1.45;
}

.psychologist-check-field {
    align-items: center;
    display: flex !important;
    gap: 8px !important;
    min-height: 40px;
}

.psychologist-check-field input[type="checkbox"] {
    accent-color: #087e68;
    height: 16px;
    width: 16px;
}

.psychologist-dialog-actions {
    border-top: 1px solid #edf2ef;
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
}

@media (max-width: 600px) {
    .psychologist-modal {
        align-items: flex-end;
        padding: 10px;
    }

    .psychologist-dialog {
        border-radius: 16px;
        max-height: 92vh;
    }

    .psychologist-dialog-heading,
    .psychologist-dialog-form {
        padding-left: 16px;
        padding-right: 16px;
    }

    .psychologist-dialog-grid {
        grid-template-columns: 1fr;
    }

    .psychologist-dialog-grid label.full {
        grid-column: auto;
    }

    .psychologist-dialog-actions {
        flex-direction: column-reverse;
    }

    .psychologist-dialog-actions .button {
        justify-content: center;
        width: 100%;
    }
}

.psychologist-assignment-form small {
    color: #71847e;
    font-size: 11px;
}

.psychologist-assignment-form small.is-warning {
    color: #a66a12;
    font-weight: 700;
}

.psychologist-assignment-list {
    max-height: 330px;
    overflow: auto;
}

.psychologist-assignment-list table {
    min-width: 480px;
}

.notice-box {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
}

.notice-warning {
    color: #8a5a13;
    border: 1px solid #f2dfb7;
    background: #fff9ec;
}

.empty-state {
    display: grid;
    gap: 4px;
    padding: 18px 8px;
    color: #71847e;
    text-align: center;
}

.empty-state strong {
    color: #174e43;
}

@media (max-width: 980px) {
    .psychologist-management-grid,
    .psychologist-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .psychologist-management-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 620px) {
    .psychologist-table,
    .psychologist-table thead,
    .psychologist-table tbody,
    .psychologist-table tr,
    .psychologist-table th,
    .psychologist-table td {
        display: block;
    }

    .psychologist-table thead {
        display: none;
    }

    .psychologist-table tr {
        padding: 11px 0;
        border-bottom: 1px solid #e7efeb;
    }

    .psychologist-table td {
        padding: 5px 0;
        border: 0;
    }
}

/* Laporan bulanan psikologi: ruang teks harus membungkus tanpa menimpa kolom lain. */
.psychologist-monthly-report-panel {
    overflow: hidden;
    padding: 24px;
}

.psychologist-monthly-report-panel .panel-heading {
    align-items: center;
    border-bottom: 1px solid #e3eee9;
    gap: 20px;
    margin-bottom: 18px;
    padding-bottom: 17px;
}

.psychologist-monthly-report-panel .panel-heading a {
    margin-top: 0;
}

.psychologist-monthly-report-panel .panel-heading-actions a.button-primary {
    color: #fff !important;
}

.psychologist-monthly-report-panel .panel-heading-actions .button {
    font-size: 11px;
    min-height: 40px;
    padding: 10px 15px;
}

.psychologist-monthly-report-panel .panel-heading > div:first-child {
    min-width: 0;
}

.psychologist-monthly-report-panel .panel-heading-actions {
    flex: 0 0 auto;
    max-width: 100%;
}

.psychologist-monthly-report-panel .panel-heading-actions .button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.psychologist-monthly-report-filters {
    grid-template-columns: minmax(110px, 1fr) minmax(80px, .7fr) minmax(130px, 1fr) minmax(190px, 1.7fr) minmax(92px, auto);
}

.psychologist-monthly-report-filters label,
.psychologist-monthly-report-filters input,
.psychologist-monthly-report-filters select {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

.psychologist-monthly-report-filters input,
.psychologist-monthly-report-filters select {
    background: #fff;
    border: 1px solid #d7e6df;
    border-radius: 8px;
    color: var(--ink);
    font-size: 11px;
    min-height: 38px;
    outline: 0;
    padding: 8px 10px;
}

.psychologist-monthly-report-filters input:focus,
.psychologist-monthly-report-filters select:focus {
    border-color: #62a98c;
    box-shadow: 0 0 0 3px rgba(34, 139, 98, .1);
}

.psychologist-monthly-report-table-wrap .data-table {
    min-width: 1180px;
    table-layout: fixed;
}

.psychologist-monthly-report-table-wrap .data-table th,
.psychologist-monthly-report-table-wrap .data-table td {
    overflow-wrap: anywhere;
    white-space: normal !important;
    word-break: break-word;
}

.psychologist-monthly-report-table-wrap .data-table th:nth-child(1),
.psychologist-monthly-report-table-wrap .data-table td:nth-child(1) { width: 4%; }
.psychologist-monthly-report-table-wrap .data-table th:nth-child(2),
.psychologist-monthly-report-table-wrap .data-table td:nth-child(2) { width: 10%; }
.psychologist-monthly-report-table-wrap .data-table th:nth-child(3),
.psychologist-monthly-report-table-wrap .data-table td:nth-child(3) { width: 13%; }
.psychologist-monthly-report-table-wrap .data-table th:nth-child(4),
.psychologist-monthly-report-table-wrap .data-table td:nth-child(4) { width: 9%; }
.psychologist-monthly-report-table-wrap .data-table th:nth-child(5),
.psychologist-monthly-report-table-wrap .data-table td:nth-child(5) { width: 16%; }
.psychologist-monthly-report-table-wrap .data-table th:nth-child(6),
.psychologist-monthly-report-table-wrap .data-table td:nth-child(6) { width: 23%; }
.psychologist-monthly-report-table-wrap .data-table th:nth-child(7),
.psychologist-monthly-report-table-wrap .data-table td:nth-child(7) { width: 18%; }
.psychologist-monthly-report-table-wrap .data-table th:nth-child(8),
.psychologist-monthly-report-table-wrap .data-table td:nth-child(8) { width: 7%; }

@media (max-width: 900px) {
    .psychologist-monthly-report-panel .panel-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .psychologist-monthly-report-panel .panel-heading-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .psychologist-monthly-report-filters {
        grid-template-columns: 1fr 1fr;
    }

    .psychologist-monthly-report-search,
    .psychologist-monthly-report-filters > .button {
        grid-column: span 2;
    }
}

/* Portal Orang Tua - Karakter Baik */
.parent-character-launch {
  align-items: center;
  background: #f5fbf7;
  border: 1px dashed #cfe5d8;
  border-radius: 12px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 15px;
}

.parent-character-launch > div {
  display: grid;
  gap: 5px;
}

.parent-character-launch strong {
  color: #174c42;
  font-size: 13px;
}

.parent-character-launch span {
  color: #6f8277;
  font-size: 10px;
}

.parent-character-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.parent-character-pills span {
  background: #eef8f2;
  border: 1px solid #dceee3;
  border-radius: 999px;
  color: #4b6d5d;
  font-size: 9px;
  padding: 5px 8px;
}

.parent-character-pills b {
  color: #087b66;
  font-weight: 700;
}

.parent-karakter-backdrop {
  align-items: center;
  background: rgba(8, 34, 26, .64);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 120;
}

.parent-karakter-backdrop[hidden] {
  display: none;
}

.parent-karakter-dialog {
  background: #fff;
  border: 1px solid #dbe8e0;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(13, 53, 40, .24);
  max-height: calc(100vh - 24px);
  max-width: 760px;
  overflow-y: auto;
  padding: 15px;
  position: relative;
  width: 100%;
}

.parent-karakter-dialog .parent-panel-heading {
  padding-right: 36px;
}

.parent-karakter-form {
  display: grid;
  gap: 8px;
}

.parent-karakter-student {
  background: #f2faf6;
  border: 1px solid #d8ebe1;
  border-radius: 10px;
  display: grid;
  gap: 3px;
  padding: 7px 9px;
}

.parent-karakter-student span,
.parent-karakter-student small {
  color: #6f8277;
  font-size: 10px;
}

.parent-karakter-student strong {
  color: #174c42;
  font-size: 12px;
}

.parent-karakter-point-section {
  background: #f5fbf7;
  border: 1px solid #d6e9df;
  border-radius: 10px;
  padding: 8px;
}

.parent-karakter-point-heading {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 6px;
}

.parent-karakter-point-heading > div {
  display: grid;
  gap: 2px;
}

.parent-karakter-point-heading .eyebrow {
  margin: 0;
}

.parent-karakter-point-heading strong {
  color: #174c42;
  font-size: 12px;
}

.parent-karakter-point-heading small {
  color: #6f8277;
  font-size: 9px;
}

.parent-karakter-point-heading > b {
  background: #dff5e8;
  border-radius: 999px;
  color: #087b66;
  font-size: 10px;
  padding: 4px 7px;
  white-space: nowrap;
}

.parent-karakter-point-list {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.parent-karakter-point-item {
  align-items: center;
  background: #fff;
  border: 1px solid #dcebe3;
  border-radius: 7px;
  cursor: pointer;
  display: grid;
  gap: 5px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
  padding: 6px 7px;
}

.parent-karakter-point-item:has(input:checked) {
  background: #eaf8ef;
  border-color: #16a477;
  box-shadow: 0 0 0 2px rgba(22, 164, 119, .08);
}

.parent-karakter-point-item input {
  accent-color: #07846d;
  height: 14px;
  width: 14px;
}

.parent-karakter-point-item > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.parent-karakter-point-item strong {
  color: #174c42;
  font-size: 9px;
  line-height: 1.25;
}

.parent-karakter-point-item small {
  color: #7a8c84;
  font-size: 7px;
}

.parent-karakter-point-item > b {
  color: #07846d;
  font-size: 10px;
  white-space: nowrap;
}

.parent-karakter-point-error {
  color: #bb5a43;
  display: block;
  font-size: 10px;
  margin-top: 8px;
}

.parent-karakter-point-error[hidden] {
  display: none;
}

.parent-karakter-date {
  color: #527063;
  font-size: 9px;
  font-weight: 700;
}

.parent-karakter-date input {
  background: #fff;
  border: 1px solid #dbe9e1;
  border-radius: 9px;
  color: #244f43;
  font: inherit;
  margin-top: 5px;
  outline: none;
  padding: 7px 9px;
  width: 100%;
}

.parent-karakter-date input:focus {
  border-color: #159477;
  box-shadow: 0 0 0 3px rgba(21, 148, 119, .1);
}

.parent-karakter-form .parent-ckhs-input-footer {
  border-top: 0;
  justify-content: flex-end;
  padding-top: 2px;
}

.parent-character-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.parent-character-card {
  background: #f7fcf9;
  border: 1px solid #deede5;
  border-radius: 11px;
  min-width: 0;
  padding: 12px;
}

.parent-character-card legend {
  color: #174c42;
  font-size: 12px;
  font-weight: 800;
  padding: 0;
}

.parent-character-scale {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

.parent-character-scale label {
  position: relative;
}

.parent-character-scale input {
  opacity: 0;
  position: absolute;
}

.parent-character-scale span {
  background: #fff;
  border: 1px solid #e0ece5;
  border-radius: 7px;
  color: #678074;
  cursor: pointer;
  display: block;
  font-size: 9px;
  padding: 7px 6px;
  text-align: center;
}

.parent-character-scale input:checked + span {
  background: #e5f6ec;
  border-color: #55ae7e;
  color: #087b66;
  font-weight: 800;
}

.parent-character-history {
  display: grid;
  gap: 6px;
}

.parent-character-history-panel {
  margin-bottom: 16px;
  padding: 15px;
}

.parent-character-history-panel .parent-panel-heading {
  margin-bottom: 11px;
  padding-bottom: 10px;
}

.parent-character-history-item {
  align-items: flex-start;
  background: #fbfefd;
  border: 1px solid #dfece5;
  border-radius: 9px;
  display: flex;
  gap: 10px;
  padding: 8px 10px;
}

.parent-character-history-item > div:last-child {
  min-width: 0;
}

.parent-character-history-item > div:last-child > strong {
  color: #174c42;
  font-size: 11px;
  line-height: 1.35;
}

.parent-character-history-meta {
  color: #82928b;
  display: block;
  font-size: 8px;
  margin-top: 2px;
}

.parent-character-history-item p {
  color: #6e8177;
  font-size: 9px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.parent-character-history-panel .ckhs-date-badge {
  border-radius: 7px;
  flex-basis: 42px;
  padding: 5px 3px;
}

.parent-character-history-panel .ckhs-date-badge strong {
  font-size: 16px;
}

.parent-character-history-panel .ckhs-date-badge small {
  font-size: 7px;
}

.parent-character-pagination {
  border-top: 1px solid #edf2ef;
  margin-top: 10px;
  padding-top: 9px;
}

.parent-character-pagination small {
  color: #71827b;
  font-size: 9px;
}

.parent-pagination .pagination-ellipsis {
  align-items: center;
  color: #8a9992;
  display: inline-flex;
  font-size: 10px;
  height: 25px;
  justify-content: center;
  min-width: 13px;
}

@media (max-width: 640px) {
  .parent-character-launch,
  .parent-character-history-item {
    align-items: stretch;
    flex-direction: column;
  }

  .parent-character-grid {
    grid-template-columns: 1fr;
  }
}
/* Pelaporan perhatian siswa: dipakai oleh portal orang tua, guru, psikolog,
   dan monitoring Kepala Sekolah. */
.parent-report-heading { align-items: flex-end; gap: 24px; }
.parent-report-heading .button { flex: 0 0 auto; }
.parent-report-guide, .parent-report-list { margin-top: 20px; }
.parent-report-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.parent-report-guide-grid > div { border: 1px solid var(--line, #d7e6df); border-radius: 14px; padding: 15px; background: #f8fcfa; }
.parent-report-guide-grid strong, .parent-report-guide-grid span { display: block; }
.parent-report-guide-grid strong { color: #064d43; font-size: .9rem; }
.parent-report-guide-grid span { color: #71817b; font-size: .78rem; line-height: 1.55; margin-top: 5px; }
.parent-report-cards { display: grid; gap: 12px; }
.parent-report-card { border: 1px solid #d8e7e0; border-radius: 16px; padding: 18px; background: #fff; }
.parent-report-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.parent-report-card-top strong, .parent-report-card-top small { display: block; }
.parent-report-card-top strong { color: #064d43; font-size: .98rem; }
.parent-report-card-top small { color: #7a8984; font-size: .76rem; margin-top: 5px; }
.parent-report-card > p { color: #455b56; line-height: 1.65; margin: 16px 0 0; white-space: normal; }
.parent-report-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #7a8984; font-size: .75rem; margin-top: 12px; }
.parent-report-response { margin-top: 14px; border-left: 3px solid #0d846f; border-radius: 8px; background: #f0f9f5; padding: 10px 13px; }
.parent-report-response strong { color: #0d6659; font-size: .78rem; }
.parent-report-response p { color: #4b6861; font-size: .82rem; line-height: 1.55; margin: 5px 0 0; }
.parent-report-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.button-small { min-height: 34px; padding: 7px 12px; font-size: .76rem; }
.report-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.report-status-baru, .report-status-menunggu_routing { color: #98610e; background: #fff1d8; }
.report-status-dibaca { color: #356b9b; background: #e7f1fc; }
.report-status-ditindaklanjuti, .report-status-dirujuk { color: #0c6c5d; background: #e2f5ed; }
.report-status-selesai { color: #4b6259; background: #edf2ef; }
.pelaporan-modal-open { overflow: hidden; }
.pelaporan-modal-backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 22px; background: rgba(4, 42, 36, .48); }
.pelaporan-modal-backdrop[hidden] { display: none; }
.pelaporan-modal { width: min(720px, 100%); max-height: min(90vh, 760px); overflow-y: auto; border: 1px solid #d2e4dc; border-radius: 20px; background: #fff; box-shadow: 0 25px 70px rgba(0, 55, 45, .2); padding: 24px; }
.pelaporan-modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e4eee9; padding-bottom: 16px; }
.pelaporan-modal-heading h2 { margin: 4px 0 0; color: #064d43; }
.pelaporan-modal-close { border: 0; background: transparent; color: #7b8c86; cursor: pointer; font-size: 1.6rem; line-height: 1; }
.pelaporan-form { display: grid; gap: 14px; padding-top: 18px; }
.pelaporan-form label { display: grid; gap: 6px; }
.pelaporan-form label > span { color: #375b53; font-size: .78rem; font-weight: 700; }
.pelaporan-form input, .pelaporan-form select, .pelaporan-form textarea { width: 100%; border: 1px solid #cfe1d9; border-radius: 10px; background: #fbfefd; color: #234740; padding: 11px 12px; font: inherit; font-size: .84rem; box-sizing: border-box; }
.pelaporan-form input:focus, .pelaporan-form select:focus, .pelaporan-form textarea:focus { border-color: #0e8b73; outline: 3px solid rgba(14, 139, 115, .12); }
.pelaporan-form textarea { min-height: 90px; resize: vertical; }
.pelaporan-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pelaporan-form select:disabled { cursor: not-allowed; opacity: .65; }
.pelaporan-point-section { border: 1px solid #d7ebe1; border-radius: 12px; background: #f5fbf7; padding: 12px; }
.pelaporan-point-section[hidden] { display: none; }
.pelaporan-point-help, .pelaporan-point-empty { color: #73867f; font-size: .73rem; line-height: 1.5; }
.pelaporan-point-empty { color: #a16d2b; }
.report-point-label { color: #0b806a; font-weight: 700; }
.pelaporan-modal-wide { width: min(900px, 100%); }
.pelaporan-modal-wide .pelaporan-form[data-pelaporan-form] > .pelaporan-form-grid,
.pelaporan-modal-wide .pelaporan-form[data-pelaporan-form] > label { display: none !important; }
.pelaporan-step { display: grid; gap: 12px; }
.pelaporan-step-heading { align-items: center; display: flex; gap: 10px; }
.pelaporan-step-heading .eyebrow { margin: 0; }
.pelaporan-step-heading h3 { color: #064d43; font-size: 1rem; margin: 2px 0 0; }
.pelaporan-step-heading p:not(.eyebrow) { color: #788a83; font-size: .74rem; margin: 4px 0 0; }
.pelaporan-step-number { align-items: center; background: #dff4ea; border-radius: 999px; color: #087a64; display: inline-flex; flex: 0 0 30px; font-size: .86rem; font-weight: 800; height: 30px; justify-content: center; }
.pelaporan-point-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pelaporan-point-type { align-items: center; background: #f8fcfa; border: 1px solid #d4e6dd; border-radius: 12px; color: #164b40; cursor: pointer; display: flex; gap: 10px; min-height: 58px; padding: 10px 12px; text-align: left; }
.pelaporan-point-type:disabled { cursor: not-allowed; opacity: .55; }
.pelaporan-point-type.is-active { background: #e5f7ed; border-color: #16a477; box-shadow: 0 0 0 2px rgba(22, 164, 119, .1); }
.pelaporan-point-type-icon { align-items: center; background: #d9f4e5; border-radius: 9px; color: #068465; display: inline-flex; flex: 0 0 34px; font-size: 1.3rem; font-weight: 800; height: 34px; justify-content: center; }
.pelaporan-point-type-icon.is-minus { background: #ffe5e1; color: #c85c4c; }
.pelaporan-point-type strong, .pelaporan-point-type small { display: block; }
.pelaporan-point-type strong { font-size: .78rem; }
.pelaporan-point-type small { color: #7d8d87; font-size: .68rem; margin-top: 2px; }
.pelaporan-point-instruction { color: #768981; font-size: .72rem; margin: 0; }
.pelaporan-point-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pelaporan-point-rule { align-items: center; background: #f8fcfa; border: 1px solid #d7e9e0; border-radius: 11px; cursor: pointer; display: grid; gap: 9px; grid-template-columns: auto minmax(0, 1fr) auto auto; min-height: 54px; padding: 9px 11px; }
.pelaporan-point-rule[hidden] { display: none; }
.pelaporan-point-rule.is-selected { background: #e9f8ef; border-color: #73caa5; }
.pelaporan-point-rule input { accent-color: #087f68; height: 16px; width: 16px; }
.pelaporan-point-rule-copy { min-width: 0; }
.pelaporan-point-rule-copy strong, .pelaporan-point-rule-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pelaporan-point-rule-copy strong { color: #164b40; font-size: .73rem; }
.pelaporan-point-rule-copy small { color: #84948d; font-size: .64rem; margin-top: 3px; }
.pelaporan-point-rule-value { color: #087f68; font-size: .78rem; white-space: nowrap; }
.pelaporan-point-rule em { background: #def3e6; border-radius: 999px; color: #087f68; font-size: .62rem; font-style: normal; font-weight: 700; padding: 4px 7px; white-space: nowrap; }
.parent-report-cards { gap: 0; border-top: 1px solid #e3eee8; }
.parent-report-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 16px; padding: 12px 4px; border: 0; border-bottom: 1px solid #e3eee8; border-radius: 0; background: transparent; }
.parent-report-card:last-child { border-bottom: 0; }
.parent-report-card-top { grid-column: 1; min-width: 0; }
.parent-report-card-top strong { font-size: .86rem; }
.parent-report-card-top small { font-size: .7rem; margin-top: 3px; }
.parent-report-card .parent-report-meta { grid-column: 1; margin-top: 2px; }
.parent-report-card .parent-report-meta span:last-child { color: #0b806a; font-weight: 700; }
.parent-report-card > p { grid-column: 1; color: #526a62; font-size: .76rem; line-height: 1.45; margin: 3px 0 0; }
.parent-report-card .parent-report-response { grid-column: 1; margin-top: 5px; padding: 7px 10px; }
.parent-report-timeline { grid-column: 1; border-top: 1px dashed #dcebe4; margin-top: 6px; padding-top: 7px; }
.parent-report-timeline > strong { color: #0b6f5d; display: block; font-size: .68rem; margin-bottom: 3px; }
.parent-report-timeline-item { align-items: flex-start; display: flex; gap: 7px; padding: 4px 0; }
.parent-report-timeline-dot { background: #159477; border: 2px solid #d9f2e7; border-radius: 50%; flex: 0 0 8px; height: 8px; margin-top: 3px; width: 8px; }
.parent-report-timeline-item > div { min-width: 0; }
.parent-report-timeline-item b { color: #315c52; display: inline-block; font-size: .7rem; margin-right: 7px; }
.parent-report-timeline-item small { color: #879791; font-size: .65rem; }
.parent-report-timeline-item p { color: #5d746d; font-size: .7rem; line-height: 1.4; margin: 2px 0 0; }
.parent-report-timeline-note { color: #8a6b3e !important; }
.parent-report-card-actions { grid-column: 2; grid-row: 1 / span 4; align-items: center; margin: 0; }
.parent-report-card-actions .button-small { min-height: 30px; padding: 6px 10px; }
.parent-report-pagination { border-top: 1px solid #e3eee8; margin-top: 10px; padding-top: 10px; }
.parent-report-pagination small { color: #71827b; }
.pelaporan-modal-actions { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #e4eee9; padding-top: 16px; margin-top: 2px; }
@media (max-width: 720px) { .parent-report-heading { align-items: flex-start; flex-direction: column; } .parent-report-guide-grid, .pelaporan-form-grid, .pelaporan-point-types, .pelaporan-point-rule-grid, .parent-karakter-point-list { grid-template-columns: 1fr; } .parent-report-card { grid-template-columns: minmax(0, 1fr); } .parent-report-card-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 4px; } .pelaporan-point-rule { grid-template-columns: auto minmax(0, 1fr) auto; } .pelaporan-point-rule em { grid-column: 2 / -1; justify-self: start; } .pelaporan-modal { padding: 18px; } }

/* Penilaian Keagamaan Guru: tetap berada di dalam panel dan nyaman untuk
   tabel indikator yang kolomnya cukup banyak. */
.keagamaan-page-heading {
  align-items: flex-end;
  gap: 22px;
}

.keagamaan-page-heading > div {
  min-width: 0;
}

.keagamaan-page-heading > .tag {
  flex: 0 0 auto;
  white-space: nowrap;
}

.keagamaan-panel {
  min-width: 0;
  overflow: hidden;
}

.keagamaan-filter-toolbar {
  align-items: flex-end;
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(180px, 220px) auto;
  gap: 14px;
  padding: 18px 0 2px;
}

.keagamaan-filter-field {
  align-items: stretch;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.keagamaan-filter-field > span {
  color: #557069;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.keagamaan-filter-field select,
.keagamaan-filter-field input {
  background: #fbfefd;
  border: 1px solid #cfe1d9;
  border-radius: 10px;
  box-sizing: border-box;
  color: #214c44;
  font: inherit;
  font-size: .84rem;
  min-height: 42px;
  padding: 10px 12px;
  width: 100%;
}

.keagamaan-filter-field select:focus,
.keagamaan-filter-field input:focus,
.keagamaan-score-select:focus,
.keagamaan-note-input:focus {
  border-color: #0b806c;
  box-shadow: 0 0 0 3px rgba(11, 128, 108, .12);
  outline: 0;
}

.keagamaan-filter-submit {
  min-height: 42px;
  white-space: nowrap;
}

.keagamaan-panel-description {
  color: #7b8d86;
  font-size: .78rem;
  line-height: 1.55;
  margin: 7px 0 0;
}

.keagamaan-scale-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  max-width: 390px;
}

.keagamaan-scale-legend span {
  align-items: center;
  background: #f1f8f5;
  border: 1px solid #d9e9e2;
  border-radius: 999px;
  color: #61766e;
  display: inline-flex;
  font-size: .68rem;
  gap: 5px;
  padding: 5px 9px;
  white-space: nowrap;
}

.keagamaan-scale-legend b {
  color: #087963;
  font-size: .72rem;
}

.keagamaan-table-wrap {
  border: 1px solid #dceae4;
  border-radius: 12px;
  margin-top: 3px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.keagamaan-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1420px;
  table-layout: fixed;
  width: 100%;
}

.keagamaan-table th,
.keagamaan-table td {
  border-bottom: 1px solid #e2eee9;
  box-sizing: border-box;
  vertical-align: middle;
}

.keagamaan-table thead th {
  background: #f2f8f5;
  color: #557069;
  font-size: .67rem;
  letter-spacing: .06em;
  line-height: 1.3;
  padding: 13px 10px;
  text-align: left;
  white-space: normal;
}

.keagamaan-table tbody td {
  background: #fff;
  color: #35574f;
  font-size: .78rem;
  padding: 12px 10px;
}

.keagamaan-table tbody tr:last-child td {
  border-bottom: 0;
}

.keagamaan-table tbody tr:hover td {
  background: #fbfefd;
}

.keagamaan-col-number { width: 48px; }
.keagamaan-col-student { width: 230px; }
.keagamaan-col-class { width: 180px; }
.keagamaan-col-score { width: 170px; }
.keagamaan-col-note { width: 260px; }

.keagamaan-student-cell strong,
.keagamaan-student-cell small {
  display: block;
}

.keagamaan-student-cell strong {
  color: #0b554b;
  font-size: .78rem;
  line-height: 1.35;
}

.keagamaan-student-cell small {
  margin-top: 4px;
}

.keagamaan-class-cell {
  color: #60776f;
  line-height: 1.45;
}

.keagamaan-score-cell {
  padding: 10px 9px !important;
}

.keagamaan-score-select,
.keagamaan-note-input {
  background: #fbfefd;
  border: 1px solid #d2e3dc;
  border-radius: 9px;
  box-sizing: border-box;
  color: #315a51;
  font: inherit;
  font-size: .76rem;
  width: 100%;
}

.keagamaan-score-select {
  min-height: 40px;
  padding: 8px 9px;
}

.keagamaan-note-input {
  display: block;
  line-height: 1.45;
  min-height: 58px;
  padding: 9px 10px;
  resize: vertical;
}

.keagamaan-form-footer {
  align-items: center;
  gap: 14px;
  padding-top: 18px;
}

.keagamaan-form-footer small {
  color: #748880;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .keagamaan-page-heading,
  .keagamaan-filter-toolbar,
  .keagamaan-form-footer {
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }

  .keagamaan-page-heading > .tag {
    align-self: flex-start;
  }

  .keagamaan-filter-submit {
    width: 100%;
  }

  .keagamaan-scale-legend {
    justify-content: flex-start;
    max-width: none;
  }

  .keagamaan-form-footer .button {
    width: 100%;
  }
}
.parent-tilawah-detail { background: #f4fbf7; border: 1px solid #d6e9df; border-radius: 9px; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -2px 0 4px; padding: 9px 10px; }
.parent-tilawah-detail[hidden] { display: none; }
.parent-tilawah-detail label { color: #527063; display: grid; font-size: 9px; font-weight: 700; gap: 5px; }
.parent-tilawah-detail input { background: #fff; border: 1px solid #d5e5dc; border-radius: 7px; color: #244f43; font: inherit; font-size: 10px; min-height: 34px; padding: 7px 8px; width: 100%; }
.parent-tilawah-detail input:focus { border-color: #159477; box-shadow: 0 0 0 3px rgba(21, 148, 119, .1); outline: 0; }
.parent-tilawah-summary { color: #0b806a; display: block; font-size: 9px; font-weight: 700; margin-top: 7px; }
.parent-detail-tilawah { background: #f4fbf7; border: 1px solid #dbece3; border-radius: 8px; color: #2d6556; font-size: 10px; margin: 0; padding: 9px 10px; }

.pelaporan-form textarea[data-pelaporan-editable] { cursor: text; pointer-events: auto; user-select: text; }

.admin-prestasi-modal-open { overflow: hidden; }
.admin-prestasi-backdrop { align-items: center; background: rgba(8, 47, 39, .48); display: flex; inset: 0; justify-content: center; padding: 22px; position: fixed; z-index: 1600; }
.admin-prestasi-backdrop[hidden] { display: none; }
.admin-prestasi-dialog { background: #fff; border: 1px solid #d7e8df; border-radius: 18px; box-shadow: 0 26px 80px rgba(7, 55, 43, .28); max-height: calc(100vh - 44px); max-width: 820px; overflow-y: auto; position: relative; width: min(100%, 820px); }
.admin-prestasi-dialog-heading { align-items: flex-start; border-bottom: 1px solid #e7efeb; display: flex; justify-content: space-between; padding: 22px 24px 17px; }
.admin-prestasi-dialog-heading h2 { color: var(--deep); font-family: Georgia, 'Times New Roman', serif; font-size: 23px; margin: 5px 0 4px; }
.admin-prestasi-dialog-heading p { color: var(--muted); font-size: 11px; margin: 0; }
.admin-prestasi-close { background: transparent; border: 0; color: #7b8e85; cursor: pointer; font-size: 25px; line-height: 1; padding: 0 2px; }
.admin-prestasi-close:hover { color: var(--deep); }
.admin-prestasi-form { padding: 20px 24px 22px; }
.admin-prestasi-category-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.admin-prestasi-category-card { align-items: flex-start; background: #f8fbf9; border: 1px solid #dceae3; border-radius: 11px; cursor: pointer; display: flex; gap: 9px; padding: 12px; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.admin-prestasi-category-card.is-selected { background: #effaf4; border-color: #1a9a76; box-shadow: 0 0 0 2px rgba(26, 154, 118, .1); }
.admin-prestasi-category-card input { accent-color: #07866f; margin: 2px 0 0; }
.admin-prestasi-category-card span { display: grid; gap: 3px; }
.admin-prestasi-category-card strong { color: var(--deep); font-size: 12px; }
.admin-prestasi-category-card small, .admin-prestasi-help { color: var(--muted); font-size: 10px; line-height: 1.45; }
.admin-prestasi-student-fields { background: #f4fbf7; border: 1px solid #d9ebe1; border-radius: 11px; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; padding: 13px; }
.admin-prestasi-student-fields[hidden] { display: none; }
.admin-prestasi-form-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-prestasi-form-grid label, .admin-prestasi-student-fields label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.admin-prestasi-form-grid label.is-full { grid-column: 1 / -1; }
.admin-prestasi-form-grid label > span, .admin-prestasi-student-fields label > span { color: #527063; font-size: 10px; font-weight: 700; }
.admin-prestasi-form-grid label > span b, .admin-prestasi-student-fields label > span b { color: #d06d45; }
.admin-prestasi-form-grid input, .admin-prestasi-form-grid select, .admin-prestasi-form-grid textarea, .admin-prestasi-student-fields select { background: #fff; border: 1px solid #d5e5dc; border-radius: 8px; color: var(--ink); font: inherit; font-size: 11px; min-height: 39px; outline: 0; padding: 9px 10px; width: 100%; }
.admin-prestasi-form-grid textarea { min-height: 94px; resize: vertical; }
.admin-prestasi-form-grid input:focus, .admin-prestasi-form-grid select:focus, .admin-prestasi-form-grid textarea:focus, .admin-prestasi-student-fields select:focus { border-color: #159477; box-shadow: 0 0 0 3px rgba(21, 148, 119, .1); }
.admin-prestasi-dialog-actions { border-top: 1px solid #e7efeb; display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; }

@media (max-width: 620px) {
  .admin-prestasi-backdrop { padding: 10px; }
  .admin-prestasi-dialog { max-height: calc(100vh - 20px); }
  .admin-prestasi-dialog-heading, .admin-prestasi-form { padding-left: 16px; padding-right: 16px; }
  .admin-prestasi-category-grid, .admin-prestasi-student-fields, .admin-prestasi-form-grid { grid-template-columns: 1fr; }
  .admin-prestasi-form-grid label.is-full { grid-column: auto; }
  .admin-prestasi-dialog-actions { flex-direction: column-reverse; }
  .admin-prestasi-dialog-actions .button { width: 100%; }
}

/* Portal Orang Tua - Rapor Presentation Day.
   Scope khusus agar perbaikan jarak dan hierarki visual tidak mengubah
   kartu nilai, materi, atau laporan akademik lainnya. */
.parent-page .presentation-day-report-list {
  gap: 16px;
}

.parent-page .presentation-day-report-card {
  background: linear-gradient(145deg, #ffffff 0%, #fbfefd 100%);
  border-color: #d4e7de;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(11, 91, 72, .06);
  display: block;
  padding: 22px 24px 24px;
}

.parent-page .presentation-day-report-card .parent-report-card-heading {
  align-items: flex-start;
  border-bottom: 1px solid #e7f0eb;
  padding-bottom: 16px;
}

.parent-page .presentation-day-report-card .parent-report-card-heading > div {
  min-width: 0;
}

.parent-page .presentation-day-report-card .parent-report-card-heading h3 {
  color: #064d43;
  font-size: 17px;
  line-height: 1.3;
  margin: 6px 0 5px;
}

.parent-page .presentation-day-report-card .parent-report-card-heading p {
  color: #71857d;
  font-size: 11px;
  line-height: 1.5;
}

.parent-page .presentation-day-report-card .report-total-badge {
  flex: 0 0 auto;
  font-size: 10px;
  padding: 7px 11px;
}

.parent-page .presentation-day-report-card .academic-card-copy {
  color: #506961;
  font-size: 11px;
  line-height: 1.65;
  margin: 16px 0 0;
}

.parent-page .presentation-day-report-card .academic-card-copy strong {
  color: #17644f;
}

.parent-page .presentation-day-report-card .presentation-day-summary {
  background: #f1faf5;
  border: 1px solid #d7ece0;
  border-left: 4px solid #159477;
  border-radius: 12px;
  margin-top: 18px;
  padding: 13px 16px;
}

.parent-page .presentation-day-report-card .presentation-day-summary {
  display: none;
}

.parent-page .presentation-day-report-card .presentation-day-summary small {
  color: #0b806a;
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.parent-page .presentation-day-report-card .presentation-day-summary p {
  color: #425f56;
  font-size: 11px;
  line-height: 1.65;
  margin: 6px 0 0;
}

.parent-page .presentation-day-report-card .presentation-day-rubric {
  border-top: 1px solid #e7f0eb;
  margin-top: 20px;
  padding-top: 18px;
}

.parent-page .presentation-day-report-card .presentation-day-rubric > strong {
  color: #064d43;
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

.parent-page .presentation-day-report-card .presentation-day-rubric ul {
  display: grid;
  gap: 9px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.parent-page .presentation-day-report-card .presentation-day-rubric li {
  align-items: center;
  background: #f9fcfa;
  border: 1px solid #dfede6;
  border-radius: 10px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 12px;
}

.parent-page .presentation-day-report-card .presentation-day-rubric li span {
  color: #42645a;
  font-size: 11px;
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
}

.parent-page .presentation-day-report-card .presentation-day-rubric li b {
  background: #dff4e8;
  border-radius: 999px;
  color: #087e61;
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: .03em;
  min-width: 38px;
  padding: 5px 8px;
  text-align: center;
}

@media (max-width: 620px) {
  .parent-page .presentation-day-report-card {
    padding: 18px 16px 20px;
  }

  .parent-page .presentation-day-report-card .parent-report-card-heading {
    gap: 10px;
  }

  .parent-page .presentation-day-report-card .parent-report-card-heading h3 {
    font-size: 15px;
  }

  .parent-page .presentation-day-report-card .presentation-day-rubric ul {
    grid-template-columns: 1fr;
  }
}

/* Responsif untuk halaman grup laporan admin. */
@media (max-width: 700px) {
  .module-group-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .module-group-heading-summary {
    align-items: flex-start;
    flex-direction: row;
    gap: 7px;
  }

  .module-group-heading-summary strong {
    font-size: 22px;
  }

  .module-group-panel .admin-module-cards .admin-module-card {
    min-height: 126px;
  }
}

/* Pusat berkas admin: tampilan terisolasi dari panel dan tabel modul lain. */
.download-berkas-page {
  color: var(--ink);
}

.download-berkas-hero {
  align-items: flex-end;
  background: linear-gradient(135deg, #edf9f3 0%, #ffffff 62%, #fffaf0 100%);
  border: 1px solid #d5e8de;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(14, 83, 63, .06);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 18px;
  overflow: hidden;
  padding: 25px 26px 23px;
  position: relative;
}

.download-berkas-hero::after {
  background: radial-gradient(circle, rgba(196, 156, 67, .13) 0 2px, transparent 2.5px) 0 0 / 18px 18px;
  content: '';
  height: 100px;
  opacity: .5;
  pointer-events: none;
  position: absolute;
  right: -10px;
  top: -22px;
  transform: rotate(15deg);
  width: 180px;
}

.download-berkas-hero-main {
  align-items: flex-start;
  display: flex;
  gap: 15px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.download-berkas-hero-icon {
  align-items: center;
  background: #d9f1e3;
  border: 1px solid #c2e6d2;
  border-radius: 14px;
  color: #087e61;
  display: inline-flex;
  flex: 0 0 48px;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.download-berkas-hero-icon .card-icon {
  height: 23px;
  width: 23px;
}

.download-berkas-hero h1 {
  color: #064d43;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(25px, 3vw, 36px);
  letter-spacing: -.025em;
  line-height: 1.12;
  margin: 5px 0 8px;
}

.download-berkas-hero p:not(.eyebrow) {
  color: #667e74;
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
  max-width: 650px;
}

.download-berkas-hero-actions {
  align-items: flex-end;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.download-berkas-count {
  align-items: baseline;
  color: #72867d;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.download-berkas-count span {
  font-size: 10px;
}

.download-berkas-count strong {
  color: #087e61;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 25px;
  line-height: 1;
}

.download-all-button {
  box-shadow: 0 9px 18px rgba(8, 126, 97, .18);
  gap: 7px;
  min-height: 40px;
  padding: 10px 15px;
  white-space: nowrap;
}

.download-all-button .button-icon {
  height: 15px;
  width: 15px;
}

.download-back-link {
  color: #087e61;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

.download-back-link:hover {
  color: #064d43;
  text-decoration: underline;
}

.download-berkas-panel {
  border: 1px solid #d6e8df;
  border-radius: 18px;
  margin-bottom: 20px;
  overflow: hidden;
  padding: 0;
}

.download-berkas-panel-heading {
  align-items: flex-start;
  border-bottom: 1px solid #e5efe9;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 22px 24px 17px;
}

.download-berkas-panel-heading h2 {
  color: #064d43;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px;
  margin: 4px 0 5px;
}

.download-berkas-note {
  color: #788c83;
  font-size: 10px;
  line-height: 1.5;
  margin: 0;
}

.download-berkas-status {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  gap: 6px;
  padding: 6px 9px;
  white-space: nowrap;
}

.download-berkas-status i {
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
  height: 6px;
  width: 6px;
}

.download-berkas-status.is-ready {
  background: #e4f6eb;
  color: #087e61;
}

.download-berkas-status.is-empty {
  background: #fff4df;
  color: #a27025;
}

.download-berkas-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 18px 24px 2px;
}

.download-summary-card {
  align-items: center;
  background: #f8fcfa;
  border: 1px solid #e0eee7;
  border-radius: 12px;
  display: flex;
  gap: 11px;
  padding: 12px 13px;
}

.download-summary-icon {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  flex: 0 0 35px;
  height: 35px;
  justify-content: center;
  width: 35px;
}

.download-summary-icon.is-green {
  background: #dff4e9;
  color: #087e61;
}

.download-summary-icon.is-gold {
  background: #fff0d5;
  color: #a9751d;
}

.download-summary-icon .card-icon {
  height: 17px;
  width: 17px;
}

.download-summary-card div {
  min-width: 0;
}

.download-summary-card small,
.download-summary-card strong,
.download-summary-card div > span {
  display: block;
}

.download-summary-card small {
  color: #788c83;
  font-size: 9px;
}

.download-summary-card strong {
  color: #123f34;
  font-size: 20px;
  line-height: 1.1;
  margin: 3px 0;
}

.download-summary-card div > span {
  color: #82948b;
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-berkas-table-heading {
  align-items: flex-end;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 21px 24px 11px;
}

.download-berkas-table-heading div {
  display: grid;
  gap: 4px;
}

.download-berkas-table-heading strong {
  color: #123f34;
  font-size: 12px;
}

.download-berkas-table-heading div span,
.download-berkas-table-heading > span {
  color: #84958d;
  font-size: 9px;
}

.download-berkas-table-heading > span {
  background: #eef8f2;
  border-radius: 999px;
  color: #087e61;
  font-weight: 700;
  padding: 5px 8px;
}

.download-berkas-table-wrap {
  margin: 0 24px 24px;
  overflow-x: auto;
}

.download-berkas-table {
  min-width: 680px;
}

.download-berkas-table th {
  background: #eff8f3;
  color: #56736a;
  font-size: 9px;
  letter-spacing: .08em;
}

.download-berkas-table td {
  color: #48675c;
  font-size: 10px;
  vertical-align: middle;
}

.download-berkas-table tbody tr:hover td {
  background: #fbfefc;
}

.download-berkas-number {
  align-items: center;
  background: #eef8f2;
  border-radius: 7px;
  color: #087e61;
  display: inline-flex;
  font-size: 9px;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.download-source-tag {
  background: #f6f8fc;
  border: 1px solid #e0e7f0;
  border-radius: 999px;
  color: #5f6f86;
  display: inline-block;
  font-size: 9px;
  padding: 5px 8px;
}

.download-file-name,
.download-file-path {
  display: block;
}

.download-file-name {
  color: #123f34;
  font-size: 10px;
  line-height: 1.4;
}

.download-file-path {
  color: #899991;
  font-size: 9px;
  line-height: 1.4;
  margin-top: 3px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-file-size {
  color: #087e61;
  font-weight: 700;
  white-space: nowrap;
}

.download-berkas-empty {
  padding: 34px 18px !important;
}

.download-berkas-empty > span,
.download-berkas-empty strong,
.download-berkas-empty small {
  display: block;
}

.download-berkas-empty > span {
  align-items: center;
  background: #e9f6ef;
  border-radius: 50%;
  color: #168068;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  margin: 0 auto 9px;
  width: 38px;
}

.download-berkas-empty > span .card-icon {
  height: 18px;
  width: 18px;
}

.download-berkas-empty strong {
  color: #214d42;
  font-size: 11px;
}

.download-berkas-empty small {
  color: #87978f;
  font-size: 9px;
  margin-top: 4px;
}

@media (max-width: 760px) {
  .download-berkas-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 20px 18px;
  }

  .download-berkas-hero-actions {
    align-items: flex-start;
    width: 100%;
  }

  .download-berkas-count {
    justify-content: flex-start;
  }

  .download-all-button {
    justify-content: center;
    width: 100%;
  }

  .download-berkas-panel-heading {
    flex-direction: column;
    padding: 18px 17px 15px;
  }

  .download-berkas-summary {
    grid-template-columns: 1fr;
    padding-left: 17px;
    padding-right: 17px;
  }

  .download-berkas-table-heading {
    align-items: flex-start;
    padding-left: 17px;
    padding-right: 17px;
  }

  .download-berkas-table-wrap {
    margin-left: 17px;
    margin-right: 17px;
  }
}

/* Dashboard Admin Sekolah: ringkasan pengguna, jadwal, kalender, analitik,
   dan motivasi. Seluruh selector dibuat scoped agar dashboard role lain aman. */
.admin-dashboard-heading {
  align-items: flex-end;
  margin-bottom: 20px;
}

.admin-dashboard-heading .button {
  gap: 7px;
  min-height: 38px;
}

.admin-user-overview {
  margin-bottom: 20px;
}

.admin-dashboard-section-heading {
  align-items: flex-start;
  gap: 14px;
}

.admin-dashboard-section-heading h2 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  margin: 4px 0 0;
}

.admin-dashboard-note {
  color: #81928a;
  font-size: 10px;
  line-height: 1.5;
  margin: 5px 0 0;
}

.admin-user-stat-grid {
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-user-stat-card {
  align-items: flex-start;
  background: linear-gradient(145deg, #fff, #f8fcfa);
  border: 1px solid #deece5;
  border-radius: 13px;
  display: flex;
  gap: 11px;
  min-height: 100px;
  padding: 13px;
  position: relative;
}

.admin-user-stat-card:nth-child(3),
.admin-user-stat-card:nth-child(4) {
  grid-column: span 1;
}

.admin-user-stat-icon {
  align-items: center;
  background: #e2f5e9;
  border-radius: 10px;
  color: #087e61;
  display: inline-flex;
  flex: 0 0 35px;
  height: 35px;
  justify-content: center;
  width: 35px;
}

.admin-user-stat-card.stat-blue .admin-user-stat-icon {
  background: #e8f0fc;
  color: #4d74b5;
}

.admin-user-stat-card.stat-purple .admin-user-stat-icon {
  background: #f0eafa;
  color: #7656aa;
}

.admin-user-stat-card.stat-gold .admin-user-stat-icon {
  background: #fff2d9;
  color: #a9751d;
}

.admin-user-stat-icon .card-icon {
  height: 17px;
  width: 17px;
}

.admin-user-stat-card > div {
  min-width: 0;
}

.admin-user-stat-card span:not(.admin-user-stat-icon),
.admin-user-stat-card strong,
.admin-user-stat-card small {
  display: block;
}

.admin-user-stat-card span:not(.admin-user-stat-icon) {
  color: #71857c;
  font-size: 9px;
  line-height: 1.35;
}

.admin-user-stat-card strong {
  color: #123f34;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  line-height: 1.15;
  margin: 4px 0 3px;
}

.admin-user-stat-card small {
  color: #899991;
  font-size: 9px;
  line-height: 1.35;
}

.admin-dashboard-main-grid {
  align-items: stretch;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr);
  margin-bottom: 20px;
}

.admin-schedule-panel,
.admin-calendar-panel,
.admin-visits-panel,
.admin-motivation-panel {
  min-width: 0;
}

.admin-schedule-week-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-day-column {
  background: #f8fcfa;
  border: 1px solid #e3eee8;
  border-radius: 10px;
  min-width: 0;
  padding: 9px;
}

.admin-day-column.is-today {
  background: #effaf4;
  border-color: #9ed8ba;
  box-shadow: 0 0 0 2px rgba(21, 148, 119, .08);
}

.admin-day-heading {
  align-items: center;
  border-bottom: 1px solid #e2eee8;
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  padding-bottom: 7px;
}

.admin-day-heading strong {
  color: #1c5647;
  font-size: 10px;
}

.admin-day-heading span {
  color: #83958c;
  font-size: 8px;
  white-space: nowrap;
}

.admin-day-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: space-between;
  margin: -4px;
  padding: 4px;
  text-align: left;
  width: calc(100% + 8px);
}

.admin-day-trigger:hover,
.admin-day-trigger:focus-visible {
  background: #e8f7ee;
  outline: none;
}

.admin-day-trigger:focus-visible {
  box-shadow: 0 0 0 2px rgba(21, 148, 119, .22);
}

.admin-day-column.is-selected {
  border-color: #59b890;
  box-shadow: 0 0 0 2px rgba(21, 148, 119, .13);
}

.admin-schedule-item {
  background: #fff;
  border: 1px solid #e5eee9;
  border-left: 3px solid #159477;
  border-radius: 8px;
  display: block;
  margin-top: 6px;
  padding: 7px 8px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.admin-schedule-item.is-schedule-extra {
  display: none;
}

.admin-schedule-item:hover {
  background: #f7fcf9;
  border-color: #b9dfca;
  box-shadow: 0 4px 12px rgba(8, 126, 97, .08);
}

.admin-schedule-item > span,
.admin-schedule-item > strong,
.admin-schedule-item > small,
.admin-schedule-item > em {
  display: block;
}

.admin-schedule-time {
  color: #087e61;
  font-size: 8px;
  font-weight: 700;
  margin-bottom: 3px;
}

.admin-schedule-live-status {
  color: #b06d17;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .01em;
  margin: -1px 0 3px;
}

.admin-schedule-live-status[hidden] {
  display: none;
}

.admin-schedule-item.is-live {
  background: #fff8e7;
  border-color: #e7c36f;
  border-left-color: #d18a22;
  box-shadow: 0 5px 15px rgba(183, 123, 25, .14);
}

.admin-schedule-item.is-live:hover {
  background: #fff4d5;
  border-color: #dca94d;
}

.admin-schedule-teacher {
  align-items: center;
  display: flex !important;
  gap: 5px;
  min-width: 0;
}

.admin-schedule-avatar {
  align-items: center;
  background: #e4f4eb;
  border-radius: 50%;
  color: #087e61;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 7px;
  font-weight: 800;
  height: 19px;
  justify-content: center;
  overflow: hidden;
  width: 19px;
}

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

.admin-schedule-teacher small {
  color: #7d8e86;
  font-size: 8px;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-schedule-item.is-live .admin-schedule-avatar {
  background: #ffe6b5;
  color: #a96813;
}

.admin-schedule-item > strong {
  color: #214d42;
  font-size: 9px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-schedule-item > small,
.admin-schedule-item > em {
  color: #7d8e86;
  font-size: 8px;
  line-height: 1.35;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-schedule-item > em {
  color: #a17731;
  font-style: normal;
}

.admin-dashboard-empty {
  color: #9aa9a2;
  font-size: 9px;
  margin: 11px 0 5px;
  text-align: center;
}

.admin-schedule-more {
  color: #087e61;
  display: block;
  font-size: 8px;
  font-weight: 700;
  margin: 7px 0 1px;
  text-align: center;
}

.admin-schedule-more[hidden] {
  display: none !important;
}

.admin-schedule-dialog-open {
  overflow: hidden;
}

.admin-schedule-detail-dialog {
  background: transparent;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  max-width: min(560px, calc(100vw - 28px));
  padding: 0;
  width: 560px;
}

.admin-schedule-detail-dialog::backdrop {
  background: rgba(5, 48, 40, .48);
}

.admin-schedule-detail-shell {
  background: #fff;
  border: 1px solid #d8e9df;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(5, 54, 42, .24);
  padding: 20px;
}

.admin-schedule-detail-heading {
  align-items: flex-start;
  border-bottom: 1px solid #e5eee9;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding-bottom: 13px;
}

.admin-schedule-detail-heading h2 {
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  margin: 4px 0 3px;
}

.admin-schedule-detail-heading p:last-child {
  color: var(--muted);
  font-size: 10px;
  margin: 0;
}

.admin-schedule-detail-close {
  align-items: center;
  background: #f0f7f3;
  border: 0;
  border-radius: 50%;
  color: #6d857a;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-size: 21px;
  height: 31px;
  justify-content: center;
  line-height: 1;
  width: 31px;
}

.admin-schedule-detail-close:hover {
  background: #dff2e7;
  color: #087e61;
}

.admin-schedule-detail-day {
  margin: 17px 0 0;
}

.admin-day-dialog-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: min(58vh, 520px);
  overflow-y: auto;
  padding-right: 3px;
}

.admin-day-dialog-row {
  align-items: center;
  background: #f7fbf8;
  border: 1px solid #e3eee8;
  border-left: 3px solid #159477;
  border-radius: 9px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(84px, .7fr) minmax(120px, 1.15fr) minmax(120px, 1.1fr) minmax(90px, .8fr);
  padding: 10px 11px;
}

.admin-day-dialog-row > div {
  min-width: 0;
}

.admin-day-dialog-row strong,
.admin-day-dialog-row small {
  display: block;
  overflow-wrap: anywhere;
}

.admin-day-dialog-row strong {
  color: var(--ink);
  font-size: 10px;
  line-height: 1.35;
}

.admin-day-dialog-row small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
  margin-top: 3px;
}

.admin-day-dialog-time {
  color: #087e61;
  font-size: 10px;
  font-weight: 700;
}

.admin-schedule-detail-actions {
  border-top: 1px solid #e5eee9;
  display: flex;
  justify-content: flex-end;
  margin-top: 17px;
  padding-top: 13px;
}

@media (max-width: 560px) {
  .admin-day-dialog-row {
    align-items: flex-start;
    grid-template-columns: 1fr 1fr;
  }

  .admin-day-dialog-time {
    grid-column: 1 / -1;
  }
}

.admin-dashboard-link {
  color: #087e61;
  font-size: 10px;
  font-weight: 700;
  margin-top: 4px;
  text-decoration: none;
  white-space: nowrap;
}

.admin-dashboard-link:hover {
  text-decoration: underline;
}

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

.admin-calendar-item {
  align-items: center;
  background: #f8fcfa;
  border: 1px solid #e2eee8;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  padding: 10px;
}

.admin-calendar-date {
  align-items: center;
  background: #e5f6eb;
  border-radius: 8px;
  color: #087e61;
  display: inline-flex;
  flex: 0 0 58px;
  font-size: 9px;
  font-weight: 700;
  justify-content: center;
  min-height: 31px;
  padding: 4px;
  text-align: center;
}

.admin-calendar-item div {
  min-width: 0;
}

.admin-calendar-item strong,
.admin-calendar-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-calendar-item strong {
  color: #214d42;
  font-size: 10px;
}

.admin-calendar-item small {
  color: #879890;
  font-size: 9px;
  margin-top: 4px;
}

.admin-dashboard-secondary-grid {
  align-items: stretch;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  margin-bottom: 20px;
}

.admin-visits-chart {
  align-items: flex-end;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  height: 165px;
  padding: 10px 3px 0;
}

.admin-visit-column {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  min-width: 0;
}

.admin-visit-value {
  color: #087e61;
  font-size: 9px;
  font-weight: 700;
  height: 14px;
}

.admin-visit-track {
  align-items: flex-end;
  background: #edf6f1;
  border-radius: 7px 7px 3px 3px;
  display: flex;
  height: 100px;
  justify-content: center;
  overflow: hidden;
  width: 22px;
}

.admin-visit-track span {
  background: linear-gradient(180deg, #36ad83, #087e61);
  border-radius: 7px 7px 2px 2px;
  display: block;
  min-height: 3px;
  width: 100%;
}

.admin-visit-column strong,
.admin-visit-column small {
  display: block;
  white-space: nowrap;
}

.admin-visit-column strong {
  color: #527069;
  font-size: 9px;
  margin-top: 7px;
}

.admin-visit-column small {
  color: #99a8a1;
  font-size: 8px;
  margin-top: 2px;
}

.admin-dashboard-empty-state {
  align-items: center;
  background: #f8fcfa;
  border: 1px dashed #cfe3d8;
  border-radius: 11px;
  color: #81928a;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 3px;
  padding: 28px 16px;
  text-align: center;
}

.admin-dashboard-empty-state.compact {
  margin-top: 0;
  min-height: 165px;
}

.admin-dashboard-empty-state > span {
  align-items: center;
  background: #e4f5eb;
  border-radius: 50%;
  color: #168068;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.admin-dashboard-empty-state > span .card-icon {
  height: 17px;
  width: 17px;
}

.admin-dashboard-empty-state strong {
  color: #214d42;
  font-size: 11px;
}

.admin-dashboard-empty-state small {
  font-size: 9px;
  line-height: 1.45;
}

.motivation-star {
  color: #c79c43;
  font-size: 20px;
}

.admin-motivation-content {
  background: linear-gradient(145deg, #f4fbf7, #fffaf0);
  border: 1px solid #e2eee7;
  border-radius: 12px;
  min-height: 165px;
  padding: 20px 22px 16px;
  position: relative;
}

.admin-motivation-carousel {
  min-width: 0;
}

.admin-motivation-slides {
  min-height: 165px;
}

.admin-motivation-content[hidden] {
  display: none;
}

.admin-motivation-controls {
  align-items: center;
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 11px;
}

.admin-motivation-arrow {
  align-items: center;
  background: #edf8f2;
  border: 1px solid #cfe7d9;
  border-radius: 50%;
  color: #087e61;
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  height: 27px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 2px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  width: 27px;
}

.admin-motivation-arrow:hover,
.admin-motivation-arrow:focus-visible {
  background: #087e61;
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.admin-motivation-dots {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  max-width: 220px;
}

.admin-motivation-dot {
  background: #cfe4d8;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 6px;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
  width: 6px;
}

.admin-motivation-dot:hover,
.admin-motivation-dot:focus-visible,
.admin-motivation-dot.is-active {
  background: #087e61;
  outline: none;
  transform: scale(1.35);
}

.admin-motivation-quote {
  color: #b99036;
  font-family: Georgia, serif;
  font-size: 44px;
  left: 15px;
  line-height: 1;
  position: absolute;
  top: 12px;
}

.admin-motivation-content blockquote {
  color: #31594d;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  line-height: 1.55;
  margin: 14px 0 12px 21px;
}

.admin-motivation-content cite {
  color: #8b7444;
  display: block;
  font-size: 10px;
  font-style: normal;
  margin-left: 21px;
}

@media (max-width: 1100px) {
  .admin-user-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-dashboard-main-grid,
  .admin-dashboard-secondary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .admin-dashboard-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .admin-user-stat-grid {
    grid-template-columns: 1fr;
  }

  .admin-schedule-week-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-dashboard-section-heading {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .admin-schedule-week-grid {
    grid-template-columns: 1fr;
  }

  .admin-visits-chart {
    gap: 6px;
  }
}