/* Portal Sekolah v207 — rekap pendaftar rata penuh dan tab Langganan pada Dasbor. */

#content .eskul-v207-registration-panel {
  display: block;
  width: 100%;
  max-width: none;
  padding: 22px;
}

.eskul-v207-registration-panel > .school-v204-toolbar { margin-bottom: 0; }

.eskul-v207-class-filter {
  display: flex;
  width: 100%;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: 16px 0;
  border-top: 1px solid #e7eeeb;
  border-bottom: 1px solid #e7eeeb;
}

.eskul-v207-class-filter label {
  display: grid;
  width: min(380px, 100%);
  gap: 7px;
}

.eskul-v207-class-filter label > span {
  color: #4d635b;
  font-size: 11px;
  font-weight: 900;
}

.eskul-v207-class-filter select {
  width: 100%;
  min-height: 46px;
  padding: 0 42px 0 14px;
  border: 1px solid #cbded7;
  border-radius: 13px;
  outline: 0;
  background: #fff;
  color: #173c31;
  font-weight: 850;
  box-shadow: 0 4px 14px rgba(8, 116, 93, .05);
}

.eskul-v207-class-filter select:focus {
  border-color: #18aa80;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .11);
}

.eskul-v207-class-filter > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #718078;
}
.eskul-v207-class-filter > div b { color: #08745d; font-size: 16px; }
.eskul-v207-class-filter > div small { font-size: 10px; }

.eskul-v207-flat-list {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.eskul-v207-registration-columns,
.eskul-v207-registration-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) minmax(220px, 1.35fr) minmax(95px, .45fr) minmax(210px, auto);
  width: 100%;
  align-items: center;
  gap: 18px;
}

.eskul-v207-registration-columns {
  min-height: 42px;
  padding: 11px 4px;
  border-bottom: 1px solid #e7eeeb;
  color: #87948f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.eskul-v207-registration-row {
  min-height: 72px;
  padding: 13px 4px;
  border-bottom: 1px solid #edf2f0;
}
.eskul-v207-registration-row:last-child { border-bottom: 0; }

.eskul-v207-student,
.eskul-v207-program { display: grid; min-width: 0; gap: 4px; }
.eskul-v207-student b,
.eskul-v207-program b {
  overflow: hidden;
  color: #243a33;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eskul-v207-student small,
.eskul-v207-program small {
  overflow: hidden;
  color: #76837d;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eskul-v207-registration-row > .eskul-v203-status { justify-self: start; }
.eskul-v207-registration-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.eskul-v207-registration-actions .eskul-v203-decisions { display: flex; gap: 5px; }

.eskul-v207-registration-actions .eskul-v205-row-delete {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fff1f2;
  color: #c42630;
  font-size: 9px;
}

.app #subNav.subnav > button[data-page="subscription"] {
  border: 2px solid #e8ac14 !important;
  border-left: 9px solid #bd7900 !important;
  background: #fff3b8 !important;
  color: #754a00 !important;
  box-shadow: 0 7px 18px rgba(180, 116, 0, .17) !important;
}
.app #subNav.subnav > button[data-page="subscription"]:hover,
.app #subNav.subnav > button[data-page="subscription"]:focus-visible {
  border-color: #d79400 !important;
  background: #ffe681 !important;
  color: #664000 !important;
}
.app #subNav.subnav > button[data-page="subscription"].active {
  border-color: #c48100 !important;
  border-left-color: #845300 !important;
  background: linear-gradient(135deg, #f7c526, #e4a700) !important;
  color: #fff !important;
  box-shadow: 0 9px 22px rgba(192, 126, 0, .27) !important;
}
.app #subNav.subnav > button[data-page="subscription"].active::before { background: #754700 !important; }

.app #subNav.subnav > button[data-page="dashboard"] { order: 1; }
.app #subNav.subnav > button[data-page="subscription"] { order: 2; }

.eskul-v205-danger-button {
  border-color: #b91c1c !important;
  background: #dc2626 !important;
  color: #fff !important;
  box-shadow: 0 8px 19px rgba(220, 38, 38, .18) !important;
}
.eskul-v205-danger-button:hover { background: #b91c1c !important; }

@media (max-width: 900px) {
  .eskul-v207-registration-columns { display: none; }
  .eskul-v207-registration-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    padding: 15px 2px;
  }
  .eskul-v207-program { grid-column: 1; grid-row: 2; }
  .eskul-v207-registration-row > .eskul-v203-status { grid-column: 2; grid-row: 1; justify-self: end; }
  .eskul-v207-registration-actions { grid-column: 2; grid-row: 2; }
}

@media (max-width: 680px) {
  #content .eskul-v207-registration-panel { padding: 16px; }
  .eskul-v207-class-filter { align-items: stretch; flex-direction: column; gap: 11px; }
  .eskul-v207-class-filter label { width: 100%; }
  .eskul-v207-class-filter > div { justify-content: space-between; }
  .eskul-v207-registration-row { grid-template-columns: minmax(0, 1fr); }
  .eskul-v207-student,
  .eskul-v207-program,
  .eskul-v207-registration-row > .eskul-v203-status,
  .eskul-v207-registration-actions { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .eskul-v207-registration-actions { justify-content: space-between; }
  .eskul-v207-registration-actions .eskul-v203-decisions { flex: 1; }
  .eskul-v207-registration-actions .eskul-v203-decisions button { flex: 1; }
}