:root {
  --admin-navy: #06274d;
  --admin-blue: #0877eb;
  --admin-sky: #15a7f4;
  --admin-gold: #f4c54d;
  --admin-ink: #0d315b;
  --admin-muted: #69809b;
  --admin-line: #dce8f4;
  --admin-surface: rgba(255, 255, 255, .94);
  --admin-shadow: 0 18px 48px rgba(6, 39, 77, .10);
}

body.hkw-admin-themed {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--admin-ink);
  font-family: HKWChulaText, Prompt, Tahoma, sans-serif;
  background:
    radial-gradient(circle at 10% 8%, rgba(244, 197, 77, .15), transparent 24rem),
    radial-gradient(circle at 92% 18%, rgba(21, 167, 244, .13), transparent 28rem),
    linear-gradient(180deg, #f7fbff 0, #edf5fc 52%, #f4f8fc 100%);
}

.hkw-admin-themed .hkw-admin-main {
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  margin: 0 auto;
  padding: 34px 0 54px;
  position: relative;
}

.hkw-admin-themed .hkw-admin-main::before {
  content: "ADMINISTRATION  •  HUAIKROT WITTAYA SCHOOL";
  display: block;
  margin: 0 0 9px;
  color: #9b7215;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.45px;
}

.hkw-admin-themed h1,
.hkw-admin-themed h2 {
  font-family: HKWChulaDisplay, HKWChulaText, Prompt, sans-serif;
  color: var(--admin-navy);
  line-height: 1.25;
}

.hkw-admin-themed h1 {
  margin: 0 0 22px;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -.4px;
}

.hkw-admin-themed h2 {
  margin-top: 0;
  font-size: 21px;
}

.hkw-admin-themed a {
  color: #076dce;
}

.hkw-admin-themed .hkw-admin-nav {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 32px;
  padding: 9px;
  border: 1px solid rgba(211, 226, 240, .9);
  border-top: 2px solid rgba(244, 197, 77, .9);
  border-radius: 17px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 12px 35px rgba(6, 39, 77, .08);
  backdrop-filter: blur(12px);
}

.hkw-admin-themed .hkw-admin-nav > a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  color: #294d70;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  transition: transform .2s, background .2s, color .2s, box-shadow .2s;
}

.hkw-admin-themed .hkw-admin-nav > a:hover,
.hkw-admin-themed .hkw-admin-nav > a:focus-visible {
  color: #075cac;
  background: #edf7ff;
  transform: translateY(-1px);
}

.hkw-admin-themed .hkw-admin-nav > a.sel {
  color: #fff;
  background: linear-gradient(145deg, #1597ff, #075ee8);
  box-shadow: 0 8px 18px rgba(8, 110, 226, .27), inset 0 1px rgba(255, 255, 255, .45);
}

.hkw-admin-themed .hkw-logout-form {
  margin-left: auto;
}

.hkw-admin-themed .hkw-logout-button {
  min-height: 42px;
  border-radius: 10px;
  box-shadow: none;
}

.hkw-admin-themed .card {
  position: relative;
  margin: 18px 0;
  padding: 27px;
  overflow: hidden;
  border: 1px solid rgba(218, 231, 244, .95);
  border-radius: 20px;
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow);
}

.hkw-admin-themed .card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--admin-gold), #ffdd7e 28%, var(--admin-blue) 70%, var(--admin-sky));
}

.hkw-admin-themed .auth {
  width: min(100%, 520px);
  max-width: none;
  margin: 38px auto 62px;
  padding: 34px 38px 38px;
}

.hkw-admin-themed .auth::before {
  content: "";
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  border: 1px solid #d6e7f7;
  border-radius: 18px;
  background:
    radial-gradient(circle, #fff 0 17%, transparent 18%),
    linear-gradient(145deg, #f9d66f, #e6ad20 48%, #0877eb 49%, #07549f);
  box-shadow: 0 12px 25px rgba(6, 63, 121, .16);
}

.hkw-admin-themed .auth h1 {
  margin-bottom: 8px;
  font-size: clamp(27px, 4vw, 34px);
}

.hkw-admin-themed .auth .muted {
  margin: 0 0 25px;
  font-size: 13px;
}

.hkw-admin-themed label {
  margin: 16px 0 7px;
  color: #294e70;
  font-size: 13px;
  font-weight: 600;
}

.hkw-admin-themed input,
.hkw-admin-themed textarea,
.hkw-admin-themed select {
  min-height: 45px;
  border: 1px solid #d4e2ef;
  border-radius: 11px;
  color: #173b62;
  background: #fbfdff;
  box-shadow: inset 0 1px 2px rgba(7, 42, 76, .03);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.hkw-admin-themed textarea {
  min-height: 125px;
  resize: vertical;
}

.hkw-admin-themed input[type="checkbox"],
.hkw-admin-themed input[type="radio"] {
  width: auto;
  min-height: 0;
  box-shadow: none;
}

.hkw-admin-themed input:hover,
.hkw-admin-themed textarea:hover,
.hkw-admin-themed select:hover {
  border-color: #a9c9e7;
  background: #fff;
}

.hkw-admin-themed input:focus,
.hkw-admin-themed textarea:focus,
.hkw-admin-themed select:focus {
  outline: 0;
  border-color: #1688ed;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(21, 151, 255, .13);
}

.hkw-admin-themed button,
.hkw-admin-themed .primary {
  min-height: 42px;
  border-radius: 10px;
  background: linear-gradient(145deg, #1597ff, #075ee8);
  box-shadow: 0 8px 18px rgba(8, 110, 226, .22), inset 0 1px rgba(255, 255, 255, .45);
  font-weight: 600;
  transition: transform .2s, box-shadow .2s, filter .2s;
}

.hkw-admin-themed button:hover,
.hkw-admin-themed .primary:hover {
  transform: translateY(-1px);
  filter: saturate(1.06);
  box-shadow: 0 11px 24px rgba(8, 110, 226, .29), inset 0 1px rgba(255, 255, 255, .5);
}

.hkw-admin-themed button:disabled {
  cursor: not-allowed;
  opacity: .58;
  transform: none;
  box-shadow: none;
}

.hkw-admin-themed .danger {
  background: linear-gradient(145deg, #f45c69, #c52b49);
  box-shadow: 0 7px 17px rgba(190, 31, 67, .2);
}

.hkw-admin-themed .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.hkw-admin-themed .metric {
  position: relative;
  min-height: 142px;
  padding: 23px 22px;
  overflow: hidden;
  border: 1px solid rgba(213, 229, 243, .95);
  border-radius: 18px;
  color: #375b7b;
  background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(237, 247, 255, .95));
  box-shadow: 0 13px 32px rgba(6, 39, 77, .08);
}

.hkw-admin-themed .metric::before,
.hkw-admin-themed .metric::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.hkw-admin-themed .metric::before {
  width: 75px;
  height: 75px;
  right: -21px;
  top: -18px;
  background: rgba(21, 151, 255, .1);
}

.hkw-admin-themed .metric::after {
  width: 9px;
  height: 9px;
  right: 22px;
  bottom: 19px;
  background: var(--admin-gold);
  box-shadow: 0 0 0 6px rgba(244, 197, 77, .16);
}

.hkw-admin-themed .metric:nth-child(2) { background: linear-gradient(145deg, #fff, #fff5f8); }
.hkw-admin-themed .metric:nth-child(3) { background: linear-gradient(145deg, #fff, #f0fbf6); }
.hkw-admin-themed .metric:nth-child(4) { background: linear-gradient(145deg, #fff, #fff8ed); }

.hkw-admin-themed .metric span {
  display: block;
  min-height: 38px;
  font-size: 13px;
  font-weight: 600;
}

.hkw-admin-themed .metric strong {
  margin-top: 7px;
  color: #0759a8;
  font-family: HKWChulaDisplay, HKWChulaText, sans-serif;
  font-size: 38px;
  line-height: 1;
}

.hkw-admin-themed table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #e0eaf4;
  border-radius: 13px;
}

.hkw-admin-themed th {
  padding-block: 13px;
  color: #466783;
  background: #f2f7fc;
  font-weight: 700;
}

.hkw-admin-themed td {
  padding-block: 13px;
  background: rgba(255, 255, 255, .75);
}

.hkw-admin-themed tbody tr:hover td {
  background: #f8fbff;
}

.hkw-admin-themed .bar {
  min-height: 48px;
  margin-bottom: 16px;
}

.hkw-admin-themed .bar h1 {
  margin-bottom: 0;
}

.hkw-admin-themed .alert,
.hkw-admin-themed .ok {
  margin-bottom: 18px;
  padding: 14px 17px;
  border: 1px solid;
  border-radius: 12px;
  box-shadow: 0 7px 18px rgba(6, 39, 77, .06);
}

.hkw-admin-themed .alert {
  border-color: #f6c9cf;
  background: #fff3f4;
}

.hkw-admin-themed .ok {
  border-color: #ccebd6;
  background: #effbf3;
}

.hkw-admin-themed .muted {
  color: var(--admin-muted);
}

.hkw-admin-themed .actions {
  flex-wrap: wrap;
}

.hkw-admin-themed .form-inline {
  padding: 12px;
  border: 1px solid #e2ebf4;
  border-radius: 13px;
  background: #f8fbfe;
}

.hkw-admin-themed .hkw-cms-tabs {
  border-radius: 14px;
}

html[data-hkw-theme="dark"] body.hkw-admin-themed {
  --admin-ink: #e4f0f8;
  --admin-muted: #a9c0d2;
  --admin-line: #29475e;
  --admin-surface: rgba(14, 42, 64, .96);
  --admin-shadow: 0 18px 48px rgba(0, 0, 0, .22);
  background:
    radial-gradient(circle at 10% 8%, rgba(244, 197, 77, .08), transparent 24rem),
    radial-gradient(circle at 92% 18%, rgba(21, 167, 244, .09), transparent 28rem),
    #071a2b;
}

html[data-hkw-theme="dark"] .hkw-admin-themed h1,
html[data-hkw-theme="dark"] .hkw-admin-themed h2,
html[data-hkw-theme="dark"] .hkw-admin-themed label {
  color: #eaf4fb;
}

html[data-hkw-theme="dark"] .hkw-admin-themed .hkw-admin-nav,
html[data-hkw-theme="dark"] .hkw-admin-themed .card {
  border-color: #29475e;
  background: rgba(14, 42, 64, .96);
}

html[data-hkw-theme="dark"] .hkw-admin-themed .hkw-admin-nav > a {
  color: #c8dbea;
}

html[data-hkw-theme="dark"] .hkw-admin-themed .metric {
  border-color: #29475e;
  color: #b7ccdc;
  background: linear-gradient(145deg, #102e47, #0c263b);
}

html[data-hkw-theme="dark"] .hkw-admin-themed .metric strong {
  color: #67bafd;
}

html[data-hkw-theme="dark"] .hkw-admin-themed input,
html[data-hkw-theme="dark"] .hkw-admin-themed textarea,
html[data-hkw-theme="dark"] .hkw-admin-themed select,
html[data-hkw-theme="dark"] .hkw-admin-themed td,
html[data-hkw-theme="dark"] .hkw-admin-themed .form-inline {
  border-color: #31506a;
  color: #e7f2fa;
  background: #102e47;
}

html[data-hkw-theme="dark"] .hkw-admin-themed th {
  color: #bed2e2;
  background: #173852;
}

html[data-hkw-theme="dark"] .hkw-admin-themed tbody tr:hover td {
  background: #153650;
}

@media (max-width: 900px) {
  .hkw-admin-themed .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hkw-admin-themed .hkw-admin-nav {
    align-items: stretch;
  }

  .hkw-admin-themed .hkw-admin-nav > a {
    flex: 1 1 150px;
  }

  .hkw-admin-themed .hkw-logout-form {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .hkw-admin-themed .hkw-logout-button {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .hkw-admin-themed .hkw-admin-main {
    width: calc(100% - 24px);
    padding: 25px 0 36px;
  }

  .hkw-admin-themed .hkw-admin-main::before {
    font-size: 8px;
    letter-spacing: 1px;
  }

  .hkw-admin-themed .auth {
    margin: 20px auto 35px;
    padding: 26px 20px 28px;
    border-radius: 18px;
  }

  .hkw-admin-themed .auth::before {
    width: 50px;
    height: 50px;
    margin-bottom: 19px;
    border-radius: 15px;
  }

  .hkw-admin-themed .card {
    padding: 19px 16px;
    border-radius: 17px;
  }

  .hkw-admin-themed .hkw-admin-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 7px;
    border-radius: 14px;
  }

  .hkw-admin-themed .hkw-admin-nav > a {
    min-width: 0;
    padding-inline: 8px;
  }

  .hkw-admin-themed .hkw-logout-form {
    grid-column: 1 / -1;
  }

  .hkw-admin-themed .grid {
    grid-template-columns: 1fr;
  }

  .hkw-admin-themed .metric {
    min-height: 116px;
  }

  .hkw-admin-themed .scroll {
    margin-inline: -5px;
  }
}

.hkw-admin-themed .card.scroll {
  overflow: auto;
}

@media (prefers-reduced-motion: reduce) {
  .hkw-admin-themed * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}