/* Central Identity - simple school CI: gold on charcoal/cream. No external fonts or images (CSP: self). */
:root {
  --bg: #F8F5EE; --surface: #fff; --ink: #29251F; --ink2: #5F594F; --line: #E4DCCB;
  --gold: #E5A910; --gold-dark: #C8910A; --gold-text: #7A5A05; --gold-tint: #FBF3DC;
  --focus: #24647F; --err: #A93C22; --err-bg: #FBEDE8; --err-line: #F0CBBE;
  --warn-bg: #FBF3DC; --warn-line: #EBD79B; --ok: #2F6B3A; --ok-bg: #EEF6EC;
  --font: 'Sarabun', 'Noto Sans Thai', 'Leelawadee UI', 'Thonburi', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--font); }
[hidden] { display: none !important; }
header.top { background: var(--ink); color: #F8F5EE; padding: 14px 18px; border-bottom: 4px solid var(--gold); }
header.top strong { font-size: 18px; }
main { max-width: 480px; margin: 0 auto; padding: 20px 16px 48px; }
main.wide { max-width: 980px; }
h1 { font-size: 24px; line-height: 1.3; margin: 8px 0 4px; }
h2 { font-size: 19px; margin: 28px 0 8px; }
.sub { color: var(--ink2); margin: 0 0 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 18px; margin-bottom: 16px; }
label { display: block; font-weight: 600; margin: 14px 0 6px; }
.hint { color: var(--ink2); font-size: 15px; font-weight: 400; }
input[type=text], input[type=tel], input[type=password], input[type=file], textarea, select {
  width: 100%; min-height: 56px; padding: 10px 14px; font: inherit; font-size: 24px; letter-spacing: .08em;
  border: 1.5px solid #8A8273; border-radius: 12px; background: #fff; color: var(--ink);
}
.admin input[type=text], .admin input[type=password], .admin textarea, .admin select, .admin input[type=file] { font-size: 16px; letter-spacing: 0; min-height: 44px; }
input[aria-invalid=true] { border-color: var(--err); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.field-err { color: var(--err); font-size: 15px; min-height: 1.4em; margin: 4px 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 20px;
  font: inherit; font-weight: 700; color: var(--ink); background: var(--gold); border: 0; border-radius: 12px;
  box-shadow: 0 2px 0 var(--gold-dark); cursor: pointer; margin-top: 16px; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-secondary { background: #fff; border: 1.5px solid var(--ink); box-shadow: none; margin-top: 10px; }
.btn-small { width: auto; min-height: 36px; padding: 0 12px; margin: 0 6px 0 0; font-size: 15px; }
.is-loading::before { content: ''; width: 20px; height: 20px; border: 3px solid rgba(41, 37, 31, .25); border-top-color: var(--ink);
  border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-loading::before { animation: none; } }
.alert { border-radius: 12px; padding: 12px 14px; margin: 14px 0; border: 1.5px solid; }
.alert strong { display: block; }
.alert.err { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.alert.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--ink); }
.alert.ok { background: var(--ok-bg); border-color: #BFD9BA; color: var(--ok); }
.notice { background: var(--gold-tint); border-left: 5px solid var(--gold); padding: 10px 14px; border-radius: 6px; margin: 12px 0; }
.privacy { font-size: 15px; color: var(--ink2); border-top: 1px solid var(--line); margin-top: 24px; padding-top: 14px; }
.privacy .todo { background: var(--gold-tint); border: 1px dashed var(--gold-dark); padding: 8px 10px; border-radius: 6px; }
.loading { text-align: center; padding: 32px 0; color: var(--ink2); }
.loading::before { content: ''; display: block; margin: 0 auto 10px; width: 28px; height: 28px; border: 3px solid var(--line);
  border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { margin: 0 0 8px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; word-break: break-word; }
.secret { font-family: ui-monospace, Consolas, monospace; background: #fff; border: 2px solid var(--gold); padding: 10px; word-break: break-all; }
.grid2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid2 { grid-template-columns: 1fr 1fr; } }

.footer-help { color: var(--ink2); font-size: 15px; text-align: center; margin-top: 28px; }

/* Google Identity Services button: its own stylesheet does not size the inline-rendered markup under our strict CSP
   (observed 2026-10-11: 910px logo). Minimal sizing so the button is usable; behaviour is Google's. */
#gis-btn { max-width: 360px; }
#gis-btn .nsm7Bb-HzV7m-LgbsSe { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; border: 1px solid #8e918f; border-radius: 6px; background: #131314; color: #e3e3e3; cursor: pointer; font: inherit; }
#gis-btn .nsm7Bb-HzV7m-LgbsSe-Bz112c { width: 20px; height: 20px; min-width: 20px; margin: 0; }
#gis-btn .nsm7Bb-HzV7m-LgbsSe-Bz112c svg { width: 20px; height: 20px; display: block; }
#gis-btn .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb { display: flex; align-items: center; gap: 10px; }
#gis-btn .nsm7Bb-HzV7m-LgbsSe-BPrWId { white-space: nowrap; }

/* ---- Login page (body.auth): card look taken from the school Back Office login (School-Website/public/admin/login.css).
   Scoped to body.auth so select/index/admin pages are unchanged. Fonts: system stack only (CSP font-src 'self'). */
body.auth { --yellow-soft: #FFEEBE; --yellow-deep: #B27D00; --ink3: #6F695F; }
.auth-screen { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: #26231E url('/assets/hero.webp') center / cover no-repeat; }
.auth-screen::before { content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle at 22% 16%, rgba(245,180,0,.20), transparent 48%), linear-gradient(180deg, rgba(26,20,8,.50) 0%, rgba(26,20,8,.74) 100%); }
.auth-screen > main { position: relative; z-index: 1; }
body.auth main.auth-card { width: min(430px, 100%); max-width: none; margin: 0; padding: 40px 28px 30px; text-align: center;
  background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.6); border-radius: 26px; box-shadow: 0 30px 72px rgba(18,12,4,.40); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }
.auth-logo { width: 94px; height: 94px; margin: 0 auto 20px; border-radius: 26px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 28px rgba(20,15,5,.16), inset 0 0 0 1px var(--line); }
.auth-logo img { width: 66px; height: 66px; object-fit: contain; }
.auth-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--yellow-deep); margin-bottom: 8px; }
body.auth h1 { font-size: 25px; font-weight: 800; margin: 0 0 4px; }
body.auth .sub { color: var(--ink3); font-weight: 600; margin: 0 0 22px; }
body.auth .sub:empty { margin: 0; }
body.auth .card { text-align: left; border: 0; padding: 0; background: transparent; margin-bottom: 0; }
body.auth .btn { border-radius: 100px; box-shadow: none; }
body.auth .btn:hover:not(:disabled) { background: var(--gold-dark); }
body.auth .btn-secondary { background: #fff; border: 1.5px solid #E0DACB; }
body.auth .privacy { text-align: left; }
body.auth .footer-help { margin-top: 18px; }
@media (max-width: 380px) { body.auth main.auth-card { padding: 32px 18px 24px; } }
body.auth ul.plain, body.auth #empty { text-align: left; }
body.auth ul.plain li .btn { margin-top: 0; }

/* ---- Admin (body.admin): Back Office look from School-Website/public/admin/admin.css (tokens, topbar, cards, pill buttons).
   Scoped to body.admin; system fonts only (CSP). Sign-in state shows the school hero like the login page (:has; plain page if unsupported). */
body.admin { --bg: #FBF7EE; --line: #ECE7DC; --line2: #E0DACB; --ink3: #8C857A; --yellow: #F5B400; --yellow-deep: #B27D00; --yellow-tint: #FFF7E0;
  --sh-sm: 0 2px 8px rgba(64,52,20,.06); font-size: 16px; }
body.admin .topbar { position: sticky; top: 0; z-index: 100; height: 72px; display: flex; align-items: center; gap: 18px; padding: 0 22px;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); }
body.admin .topbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.admin .tb-mark { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; flex: none; }
body.admin .tb-brand-txt { display: flex; flex-direction: column; min-width: 0; }
body.admin .tb-name { font-weight: 800; font-size: 18px; line-height: 1.15; }
body.admin .tb-sub { font-size: 12px; font-weight: 600; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.admin .topbar-spacer { flex: 1; }
body.admin .btn-signout { margin: 0; background: #F7F3EA; border: 1px solid var(--line2); color: var(--ink2); }
body.admin .btn-signout:hover { background: var(--err-bg); border-color: var(--err); color: var(--err); }
body.admin main.wide { max-width: 1080px; padding: 26px 18px 80px; }
body.admin .card { border-radius: 18px; border-color: var(--line); box-shadow: var(--sh-sm); padding: 22px 22px 20px; }
body.admin h2 { font-size: 19px; font-weight: 800; margin: 0 0 6px; }
body.admin .card > .sub { font-size: 14.5px; }
body.admin .btn { width: auto; min-height: 44px; padding: 0 20px; border-radius: 100px; box-shadow: none; margin: 12px 8px 0 0; font-size: 15px; }
body.admin .btn:hover:not(:disabled) { background: var(--gold-dark); }
body.admin .btn-secondary { background: #fff; border: 1.5px solid var(--line2); color: var(--ink); }
body.admin .btn-secondary:hover:not(:disabled) { background: var(--yellow-tint); border-color: var(--yellow); }
body.admin .btn-small { min-height: 34px; padding: 0 14px; font-size: 14px; margin: 0; }
body.admin input[type=text], body.admin input[type=password], body.admin textarea, body.admin select, body.admin input[type=file] { border: 1.5px solid var(--line2); border-radius: 12px; }
body.admin input:focus, body.admin select:focus, body.admin textarea:focus { border-color: var(--yellow); outline: 3px solid rgba(245,180,0,.35); outline-offset: 0; }
body.admin label:has(> input[type=checkbox]) { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; margin: 10px 0; }
body.admin input[type=checkbox] { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--yellow); flex: none; }
body.admin table { border: 1px solid var(--line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; margin: 12px 0; }
body.admin th { background: #F7F3EA; color: var(--ink3); font-size: 12.5px; font-weight: 700; letter-spacing: .03em; }
body.admin td, body.admin th { border-bottom: 1px solid var(--line); }
body.admin tbody tr:last-child td { border-bottom: 0; }
body.admin tbody tr:hover td { background: #FFFBEE; }
body.admin .alert { border-radius: 14px; }
body.admin #toast { position: sticky; top: 82px; z-index: 50; }
/* sign-in: auth-card on the school hero */
body.admin:has(#signin:not([hidden])) { background: #26231E url('/assets/hero.webp') center / cover fixed no-repeat; }
body.admin:has(#signin:not([hidden])) .topbar { display: none; }
body.admin:has(#signin:not([hidden])) main.wide { min-height: 100vh; display: flex; align-items: center; justify-content: center; max-width: none; padding: 24px 16px;
  background: radial-gradient(circle at 22% 16%, rgba(245,180,0,.20), transparent 48%), linear-gradient(180deg, rgba(26,20,8,.50) 0%, rgba(26,20,8,.74) 100%); }
body.admin #signin { width: min(430px, 100%); text-align: center; border-radius: 26px; padding: 40px 28px 30px; border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.94); box-shadow: 0 30px 72px rgba(18,12,4,.40); }
body.admin #signin .auth-logo { margin-bottom: 20px; }
body.admin #signin h1 { font-size: 25px; font-weight: 800; margin: 0 0 6px; }
body.admin #signin .sub { font-size: 14px; }
body.admin #signin #gis-btn { margin: 14px auto 0; }
body.admin #signin .btn { width: 100%; margin: 12px 0 0; }
body.admin #signin #dev-box { text-align: left; margin-top: 14px; }
@media (max-width: 560px) { body.admin .tb-sub { display: none; } body.admin .topbar { padding: 0 14px; } body.admin .card { padding: 18px 14px; } }