@font-face {
  font-family: 'Napuya Thai';
  src: url('/fonts/NotoSansThai-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --pool: #1979ad;
  --pool-dark: #125d86;
  --ink: #183d52;
  --muted: #617781;
  --canvas: #f2f6f8;
  --line: #dce6eb;
  --pool-light: #eaf4fa;
  --font: 'Napuya Thai','Segoe UI',sans-serif;
}

body {
  font-family: var(--font);
}

button,input,select,textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

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

:where(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid var(--pool);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -6rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: white;
  color: var(--ink);
  border: 2px solid var(--pool);
  border-radius: 8px;
}

.skip-link:focus {
  top: 1rem;
}

.ui-icon {
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: middle;
}

.app-shell {
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.65;
}

.app-shell :is(.tracking-wide,.tracking-wider,.tracking-widest) {
  letter-spacing: normal;
}

.app-shell .uppercase {
  text-transform: none;
}

.app-shell :is(.text-slate-400,.text-gray-400) {
  color: var(--muted);
}

.app-shell :is(.rounded-3xl,.rounded-2xl) {
  border-radius: 12px;
}

.app-shell [class*="shadow"] {
  box-shadow: none;
}

.app-shell :is(.card,.premium-card) {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
  transition: none;
}

.app-shell :is(.card,.premium-card):hover {
  transform: none;
  box-shadow: none;
}

.app-shell h2 {
  letter-spacing: -.035em;
}

.app-shell .btn-primary {
  background: var(--pool);
  box-shadow: none;
  border-radius: 8px;
  padding: .65rem 1.1rem;
  min-height: 44px;
  font-weight: 600;
  transition: background-color .15s;
}

.app-shell .btn-primary:hover {
  background: var(--pool-dark);
  transform: none;
  box-shadow: none;
}

.app-shell :is(.btn-primary:active,.btn-sm:active,.btn-sm:hover) {
  transform: none;
}

.app-shell .btn-sm {
  min-height: 36px;
  border-radius: 6px;
}

.app-shell :is(.input,.filter-select) {
  border: 1px solid #c9d7df;
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font-family: var(--font);
  min-height: 42px;
  font-size: .875rem;
  transition: border-color .15s;
}

.app-shell :is(.input,.filter-select):focus {
  border-color: var(--pool);
  box-shadow: 0 0 0 3px #1979ad18;
}

.app-shell .label {
  font-size: .8125rem;
  color: var(--ink);
}

.app-shell .badge {
  font-size: .75rem;
  font-weight: 500;
}

.app-shell th {
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: 0;
  text-transform: none;
}

.app-shell tbody tr:hover {
  background: #f6fafc;
}

.app-shell .modal-backdrop {
  backdrop-filter: none;
  background: #183d5270;
}

.app-shell .modal-box {
  border-radius: 14px;
  box-shadow: 0 16px 64px #183d5230;
}

.app-shell .day-pill.active {
  background: var(--pool);
  border-color: var(--pool);
  box-shadow: none;
  transform: none;
}

/* A quiet workspace rail lets the school's whale mark carry the personality. */
.app-shell .app-sidebar {
  background: white;
  border-right: 1px solid var(--line);
  height: 100dvh;
  min-height: 0;
  box-shadow: none;
}

.app-sidebar>div:first-child {
  padding: 28px 22px;
  border-color: var(--line);
}

.app-sidebar>div:first-child>div:first-child {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 0;
}

.app-sidebar>div:first-child .text-white {
  color: var(--ink);
  font-size: 17px;
}

.app-sidebar>div:first-child .text-slate-400 {
  color: var(--muted);
  font-size: 12px;
}

.app-sidebar nav {
  padding: 16px 12px;
}

.app-shell .sidebar-item {
  width: 100%;
  text-align: left;
  min-height: 46px;
  padding: 10px 14px;
  color: #526c7a;
  border-radius: 8px;
  font-weight: 400;
  gap: 12px;
  border: 0;
  background: transparent;
}

.app-shell .sidebar-item:hover {
  background: #f2f6f8;
  color: var(--ink);
}

.app-shell .sidebar-item.active {
  background: var(--pool-light);
  color: var(--pool-dark);
  font-weight: 600;
}

.app-sidebar>div:last-child {
  border-color: var(--line);
}

.app-sidebar>div:last-child :is(.text-slate-300,.text-slate-400) {
  color: var(--muted);
}

.app-sidebar>div:last-child button {
  background: #f2f6f8;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.app-sidebar>div:last-child button:hover {
  background: #fcefeb;
  color: #a2392b;
}

.app-shell>header {
  background: white;
  backdrop-filter: none;
  border-color: var(--line);
  box-shadow: none;
}

.app-shell>header button[onclick="logout()"] {
  background: white;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 36px;
}

.workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.workspace-header h2 {
  font-size: clamp(1.5rem,2.2vw,2rem);
  font-weight: 600;
  color: var(--ink);
}

.workspace-header p {
  color: var(--muted);
  font-size: .875rem;
  margin-top: 4px;
}

.workspace-header time {
  font-size: .8125rem;
  color: var(--muted);
  text-align: right;
}

.workspace-actions {
  display: flex;
  gap: 8px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .65rem 1rem;
  border: 1px solid #c9d7df;
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font-size: .875rem;
  min-height: 44px;
}

.btn-secondary:hover {
  background: var(--pool-light);
  border-color: #91bdd5;
}

.workspace-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.app-shell :is(#statsCards,#teacherStatsCards) {
  gap: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.app-shell .stat-item {
  padding: 20px 24px;
  border-right: 1px solid var(--line);
}

.app-shell .stat-item:last-child {
  border-right: 0;
}

.stat-item dt {
  font-size: .8125rem;
  color: var(--muted);
}

.stat-item dd {
  font-size: 2rem;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.stat-item dd small {
  font-size: .75rem;
  font-weight: 400;
  margin-left: 8px;
  color: var(--muted);
}

.stat-item.is-today dd {
  color: var(--pool);
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.panel-heading h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink);
}

.panel-heading button {
  color: var(--pool-dark);
  font-size: .8125rem;
  white-space: nowrap;
}

.renewal-panel {
  border-left: 3px solid #d58245!important;
}

.app-shell #todayClassesList>div,.app-shell #teacherTodayClassesList>.space-y-3>div {
  border-radius: 0;
  border-width: 0 0 1px;
  border-color: var(--line);
  padding: 16px 0;
  box-shadow: none;
}

.app-shell #todayClassesList>div:last-child,.app-shell #teacherTodayClassesList>.space-y-3>div:last-child {
  border-bottom: 0;
}

.app-shell #todayClassesList>div>.flex {
  min-width: 0;
}

.app-shell #todayClassesList>div>.flex>div:first-child,.app-shell #teacherTodayClassesList .w-12 {
  background: var(--pool-light);
  color: var(--pool-dark);
  border: 0;
  border-radius: 8px;
  width: 58px;
  height: 44px;
}

.app-shell #todayClassesList.space-y-3>:not([hidden])~:not([hidden]),.app-shell #teacherTodayClassesList .space-y-3>:not([hidden])~:not([hidden]) {
  margin-top: 0;
}

.app-shell #branchStats>div {
  background: white;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 0;
}

.app-shell #branchStats>div:last-child {
  border-bottom: 0;
}

.app-shell #branchStats>div>span:last-child {
  background: transparent;
  color: var(--ink);
  font-weight: 500;
}

.app-shell .nav-item {
  min-height: 64px;
  color: var(--muted);
  font-size: .6875rem;
  min-width: 0;
  gap: 4px;
}

.app-shell .nav-item.active {
  color: var(--pool-dark);
  background: var(--pool-light);
}

.app-shell .nav-item .icon,.app-shell .nav-item.active .icon {
  transform: none;
  font-size: inherit;
}

.app-shell>nav {
  background: white;
  border-color: var(--line);
  backdrop-filter: none;
  box-shadow: none;
}

.mobile-more-layer {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: #183d5266;
}

.mobile-more-panel {
  max-height: calc(100dvh - env(safe-area-inset-top));
  overflow-y: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px max(24px,env(safe-area-inset-bottom));
  background: white;
  border-radius: 16px 16px 0 0;
}

.mobile-more-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 8px 12px;
  font-weight: 600;
}

.mobile-more-heading button {
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

.mobile-more-panel .sidebar-item {
  min-height: 48px;
}

/* Personal portals share the hierarchy; the level map remains a school feature. */
.portal-greeting {
  padding: 26px 28px;
  background: var(--pool-light);
  border: 1px solid #d2e6f0;
  border-radius: 12px;
  color: var(--ink);
}

.portal-greeting h1 {
  font-size: clamp(1.3rem,2vw,1.75rem);
  font-weight: 600;
  margin-top: 0;
}

.portal-greeting p {
  color: var(--muted);
  font-size: .875rem;
  opacity: 1;
  margin-top: 8px;
}

.app-shell #nextClassAlert,.parent-next-class {
  background: var(--ink);
  color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: none;
}

.app-shell #nextClassAlert:hover {
  transform: none;
}

.app-shell #questDetailedCard {
  background: white;
  border-color: var(--line);
  box-shadow: none;
}

.student-tabs {
  background: white!important;
  border: 1px solid var(--line)!important;
  border-radius: 10px!important;
  backdrop-filter: none!important;
}

.student-tabs button {
  min-height: 44px;
  font-size: .8125rem;
  border-radius: 7px;
  transition: background-color .15s;
}

.student-tabs button.bg-blue-600 {
  background: var(--pool);
}

.app-shell .sec-panel>h3 {
  font-size: .9375rem;
  color: var(--ink);
  font-weight: 600;
}

.app-shell .sec-panel>h3>span {
  display: none;
}

.app-shell .animate-scale-up {
  animation: none;
}

.app-shell :is(#courseCards,#kidsContainer) .progress-bar {
  background-image: none;
  background-color: var(--pool);
}

.app-shell :is(#courseCards,#kidsContainer) .progress-bar[class*="emerald"] {
  background-color: #298369;
}

.app-shell #questDetailedCard [class*="bg-gradient"] {
  background-image: none;
  background-color: var(--pool-light);
}

.app-shell #questDetailedCard :is(button,.text-white)[class*="bg-gradient"] {
  background-color: var(--pool);
}

.app-shell #questDetailedCard .group-hover\:scale-105 {
  transform: none;
}

.app-shell :is(#parentAvatar,#profileAvatar) {
  background-image: none;
  background-color: white;
}

.app-shell #kidCountDisplay {
  color: var(--pool-dark);
  font-size: 1rem;
}

.app-shell .portal-greeting .text-slate-400 {
  color: var(--muted);
}

.app-shell #kidsContainer {
  gap: 24px;
}

.app-shell #kidsContainer [class*="text-[9px]"],.app-shell #kidsContainer [class*="text-[10px]"] {
  font-size: 12px;
}

/* Temporarily hide the assistant UI. Remove this rule to show it again. */
#aiFabBtn,
#aiChatDrawer {
  display: none !important;
}

.app-shell .ai-fab {
  background: white;
  color: var(--pool-dark);
  width: auto;
  height: 44px;
  padding: 0 16px;
  gap: 8px;
  border: 1px solid #b7d0df;
  border-radius: 24px;
  box-shadow: 0 2px 8px #183d5212;
  font-size: .8125rem;
}

.app-shell .ai-fab:hover,.app-shell .ai-fab:active {
  transform: none;
  background: var(--pool-light);
  box-shadow: 0 2px 8px #183d5212;
}

.app-shell .ai-chat-drawer {
  background: white;
  backdrop-filter: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 40px #183d5224;
  transition: opacity .15s,transform .15s;
}

.app-shell .ai-chat-header,.app-shell .ai-bubble.user {
  background: var(--pool-dark);
  box-shadow: none;
}

.app-shell .ai-bubble {
  border-radius: 10px;
}

.app-shell .ai-action-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--pool);
  box-shadow: none;
  border-radius: 8px;
}

/* Entry page: pool lanes, a school wordmark, and a focused form. */
.login-page {
  margin: 0;
  background: white;
  color: var(--ink);
}

.login-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  min-height: 100dvh;
}

.login-brand {
  background: var(--pool);
  color: white;
  padding: clamp(32px,5vw,76px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.login-brand-header {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1rem;
}

.login-brand-header img {
  width: 62px;
  height: 62px;
  border-radius: 12px;
}

.login-wordmark {
  font-family: 'Segoe UI',sans-serif;
  font-size: clamp(64px,7.5vw,116px);
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: .95;
  margin: 70px 0 24px;
}

.login-brand p {
  font-size: 1rem;
  max-width: 340px;
  line-height: 1.8;
  color: #e4f3fc;
}

.pool-lanes {
  width: 100%;
  height: 180px;
  margin: auto 0 28px;
  color: #ffffff55;
  flex: none;
}

.login-brand-footer {
  font-size: .8125rem;
  color: #e4f3fc;
}

.login-form-side {
  display: flex;
  flex-direction: column;
  padding: 40px clamp(24px,5vw,76px);
}

.login-form-wrap {
  width: 100%;
  max-width: 370px;
  margin: auto;
  padding: 60px 0;
}

.login-form-wrap h1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 0 0 12px;
}

.login-form-intro {
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.8;
  margin-bottom: 32px;
}

.login-form-wrap label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.login-form-wrap .form-field {
  margin-bottom: 22px;
}

.input-field {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #bacdd9;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  color: var(--ink);
  min-height: 50px;
}

.input-field:focus {
  outline: 2px solid var(--pool);
  outline-offset: 2px;
}

.input-field::placeholder {
  color: #82959f;
  font-size: .875rem;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 70px;
}

.password-toggle {
  position: absolute;
  right: 6px;
  top: 6px;
  height: 38px;
  min-width: 56px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: .75rem;
  color: var(--pool-dark);
}

.password-toggle:hover {
  background: var(--pool-light);
}

.login-submit {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 8px;
  background: var(--pool);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 4px;
}

.login-submit:hover {
  background: var(--pool-dark);
}

.login-help {
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding-top: 22px;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.8;
}

.login-error {
  color: #9c3228;
  background: #fff0ee;
  border-left: 3px solid #c84936;
  padding: 12px 14px;
  font-size: .875rem;
  border-radius: 4px;
  margin-bottom: 20px;
}

.login-page .hidden {
  display: none;
}

.login-form-footer {
  text-align: center;
  font-size: .75rem;
  color: var(--muted);
}

@media(min-width:768px) {
  .workspace-shell>div {
    max-width: 1280px;
    padding: 40px clamp(24px,4vw,56px);
  }

}

@media(max-width:767px) {
  .workspace-header {
    display: block;
    margin-bottom: 20px;
  }

  .workspace-header time {
    display: block;
    margin-top: 10px;
    text-align: left;
    font-size: .75rem;
  }

  .workspace-actions {
    gap: 8px;
    margin-bottom: 20px;
  }

  .workspace-actions button {
    flex: 1;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    font-size: .8125rem;
  }

  .app-shell .stat-item {
    padding: 16px;
  }

  #statsCards .stat-item:nth-child(2) {
    border-right: 0;
  }

  #statsCards .stat-item:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .stat-item dd {
    font-size: 1.75rem;
  }

  .stat-item dd small {
    display: none;
  }

  .app-shell .btn-sm {
    min-height: 40px;
  }

  .app-shell :is(.input,.filter-select) {
    font-size: 16px;
    min-height: 44px;
  }

  .app-shell .modal-backdrop {
    padding: 0;
  }

  .panel-heading {
    padding: 14px 16px;
  }

  .panel-heading h3 {
    font-size: .875rem;
  }

  .portal-greeting {
    padding: 20px;
  }

  .app-shell .ai-fab {
    right: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom));
  }

  .app-shell .ai-chat-drawer {
    right: 12px;
    bottom: calc(132px + env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
    height: min(540px,calc(100dvh - 200px));
  }

  .login-layout {
    display: flex;
    flex-direction: column;
  }

  .login-brand {
    padding: 24px;
  }

  .login-brand-header {
    font-size: .875rem;
  }

  .login-brand-header img {
    width: 44px;
    height: 44px;
  }

  .login-wordmark {
    font-size: 48px;
    margin: 24px 0 16px;
  }

  .login-wordmark br {
    display: none;
  }

  .login-brand p,.pool-lanes,.login-brand-footer {
    display: none;
  }

  .login-form-side {
    padding: 32px 24px max(24px,env(safe-area-inset-bottom));
    flex: 1;
  }

  .login-form-wrap {
    padding: 0 0 36px;
  }

  .login-form-wrap h1 {
    font-size: 1.6rem;
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
    scroll-behavior: auto!important;
  }

}

.empty-note {
  padding: 8px 4px;
  color: var(--muted);
  font-size: .875rem;
}

.app-shell .workspace-shell {
  transition: none;
}

.app-shell #noNextClass.hidden {
  display: none;
}

.app-shell :is(#questDetailedCard, #profileLevel) [class*="text-[9px]"], .app-shell :is(#questDetailedCard, #profileLevel) [class*="text-[10px]"] {
  font-size: 12px;
}

.app-shell #kidsContainer [id^="scheduleList_"] > div {
  border-color: var(--line);
  --tw-ring-shadow: 0 0 transparent;
}

.app-shell #kidsContainer [id^="scheduleList_"] .bg-indigo-600 {
  background: var(--pool);
}

.app-shell #kidsContainer [id^="scheduleList_"] .text-indigo-600 {
  color: var(--pool-dark);
}


.app-shell .ai-chat-header, .app-shell .ai-chat-drawer > div:last-child {
  flex-shrink: 0;
}
.app-shell .ai-chat-messages {
  min-height: 0;
}
@media (max-width: 767px) and (max-height: 600px) {
  .app-shell .ai-chat-drawer {
    top: max(12px, env(safe-area-inset-top));
    bottom: calc(76px + env(safe-area-inset-bottom));
    height: auto;
  }
}