/* Theme palette: change these values to recolor the application. */
:root {
  --pe-primary: #2563eb;
  --pe-primary-hover: #1d4ed8;
  --pe-navy: #1e3a8a;
  --pe-sky: #0284c7;
  --pe-soft: #eff6ff;
  --pe-surface: #ffffff;
  --pe-ink: #0f172a;
  --pe-muted: #64748b;
  --pe-line: #dbeafe;
  --pe-input-line: #93c5fd;
  --pe-bg: #f0f9ff;
  --pe-shadow: #1e3a8a10;
  --pe-day-0: #1e3a8a;
  --pe-day-1: #1d4ed8;
  --pe-day-2: #0369a1;
  --pe-day-3: #075985;
  --pe-day-4: #2563eb;
  --pe-day-5: #0284c7;
  --pe-day-6: #1e40af;
}

body[data-reservation-ui]{font-family:'Noto Sans Thai',Tahoma,Arial,sans-serif;color:var(--pe-ink);background:var(--pe-bg);font-size:15px;line-height:1.65}
body[data-reservation-ui] h1,body[data-reservation-ui] h2,body[data-reservation-ui] h3,body[data-reservation-ui] h4{font-family:inherit;line-height:1.4;font-weight:700}
body[data-reservation-ui] h2{font-size:1.65rem}
body[data-reservation-ui] h3{font-size:1.2rem}
body[data-reservation-ui] a{color:var(--pe-primary-hover);text-decoration:none}
body[data-reservation-ui] a:hover{text-decoration:underline}
.pe-muted{color:var(--pe-muted)}
.pe-brand-kicker{font-size:11px;letter-spacing:.18em;font-weight:700;margin-bottom:8px}
.pe-main{min-height:65vh}
.pe-main>.py-12,.pe-main .container.py-12{padding-top:28px;padding-bottom:40px}
.pe-main .container{max-width:1280px}
.pe-main .row{row-gap:20px}
.pe-main .card{border:1px solid var(--pe-line)!important;border-radius:16px!important;box-shadow:0 4px 18px var(--pe-shadow);margin-bottom:20px;overflow:hidden}
.pe-main .card-header,.pe-main .card-footer{background:var(--pe-surface);border-color:var(--pe-line);padding:18px 24px}
.pe-main .card-body{padding:24px}
.pe-main .card-header h3{margin:0;color:var(--pe-ink)!important}
.pe-main .card-title.bg-black{background:var(--pe-soft)!important;color:var(--pe-ink)!important;padding:12px;border-radius:8px}
.pe-main .fa-8x{font-size:2.5rem;color:var(--pe-primary)}
.pe-main .list-group-item{border-color:var(--pe-line);padding:14px 16px}
.pe-main .list-group-item p{margin-bottom:6px}
.pe-main .table{font-size:14px;margin-bottom:0;border-color:var(--pe-line);vertical-align:middle;min-width:620px}
.pe-main .table th{font-weight:600;white-space:nowrap}
.pe-main .table>thead>tr>*{background:var(--pe-soft)!important;color:var(--pe-navy)!important;border-bottom:1px solid var(--pe-line);padding:15px 14px}
.pe-main .table td{padding:14px;border-color:var(--pe-line)}
.pe-main .table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:var(--pe-bg)}
.pe-main .table-responsive{border:1px solid var(--pe-line);border-radius:10px;margin:12px 0;overflow-x:auto;max-width:100%}
.pe-table-help{font-size:12px;color:var(--pe-muted);margin:4px 0}
.pe-main .btn,.pe-auth button[type=submit]{border-radius:9px;padding:10px 17px;font-weight:600;min-height:44px}
.pe-main .btn-primary,.pe-main .btn-success,.pe-auth button[type=submit]{background:var(--pe-primary)!important;border-color:var(--pe-primary)!important;color:var(--pe-surface)!important}
.pe-main .btn-secondary{background:var(--pe-soft);color:var(--pe-navy);border-color:var(--pe-line)}
.pe-main .btn-danger{background:#b83240;border-color:#b83240;color:var(--pe-surface)}
.pe-main .btn-outline-primary{border-color:var(--pe-primary);color:var(--pe-primary)}
.pe-main .btn:disabled{opacity:.6}
.pe-main input:not([type=hidden]):not([type=checkbox]):not([type=radio]),.pe-main select,.pe-main textarea,.pe-auth input:not([type=checkbox]){border:1px solid var(--pe-input-line);border-radius:8px;min-height:44px;padding:9px 12px;background:var(--pe-surface);color:var(--pe-ink);max-width:100%;font:inherit}
.pe-main label,.pe-auth label{font-weight:600}
.pe-main [aria-invalid=true],.pe-auth [aria-invalid=true]{border-color:#bd3542!important;background:#fff8f8!important}
.pe-field-error{font-size:13px;color:#a62435;margin-top:5px}
body[data-reservation-ui] :focus-visible{outline:3px solid var(--pe-sky)!important;outline-offset:3px}
.pe-main .badge{padding:7px 11px;border-radius:100px;font-weight:600;font-size:12px}
.pe-main .badge.bg-success{background:#d9f2e8!important;color:#126345}
.pe-main .badge.bg-warning{background:#fff0cc!important;color:#815400}
.pe-main .badge.bg-danger{background:#fce3e7!important;color:#a62a3b}
.pe-main .alert{border:1px solid var(--pe-line);border-radius:12px;padding:20px}
.pe-main .alert-warning{background:#fff6e3;color:#795317}
.pe-main .alert-danger{background:#fff0f2;color:#9b2635}
.pe-main .alert-info,.pe-main .alert-primary{background:var(--pe-soft);color:var(--pe-navy)}
.pe-feedback{max-width:1232px;margin:20px auto}
.pe-section-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}
.pe-toolbar{display:flex;gap:20px;align-items:end;padding:20px;background:var(--pe-surface);border:1px solid var(--pe-line);border-radius:12px;margin:24px 0}
.pe-toolbar label{display:grid;gap:6px;flex:1}
.pe-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pe-course h3{min-height:3.2em;margin-top:22px}
.pe-course-code{font-weight:700;color:var(--pe-muted)}
.pe-seat{font-size:30px;color:var(--pe-primary)}
.pe-course progress{width:100%;height:8px;accent-color:var(--pe-primary)}
.pe-empty{text-align:center;padding:48px 24px;background:var(--pe-surface);border:1px dashed var(--pe-input-line);border-radius:16px}
.pe-empty[hidden],[data-course][hidden]{display:none!important}
.pe-metrics{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:20px;margin-bottom:24px}
.pe-metrics strong{font-size:30px}
.pe-metrics small{font-size:14px}
.pe-cta{padding:24px;background:var(--pe-primary)!important;color:var(--pe-surface)!important;font-size:20px;font-weight:700;justify-content:center}
.pe-cta span{display:block;font-size:14px;font-weight:400;margin-top:10px}
.pe-steps{list-style:none;display:flex;gap:12px;padding:0;margin-bottom:20px}
.pe-steps li{flex:1;padding:14px;background:var(--pe-soft);border-radius:8px}
.pe-steps [aria-current]{background:var(--pe-line);color:var(--pe-navy);font-weight:700}
.pe-footer{text-align:center;padding:30px;color:var(--pe-muted);font-size:12px}
.pe-skip{position:absolute;left:-10000px}
.pe-skip:focus{left:16px;top:16px;background:var(--pe-surface);padding:12px;z-index:9999}
.pe-action{display:inline-block;min-height:40px;padding:8px;font-weight:600}
.pe-danger{color:#b83240}
.pe-main canvas{max-width:100%}
body[data-reservation-ui] nav>.pe-brand-header{background:var(--pe-navy)!important;text-align:left!important;padding:26px max(24px,calc((100vw - 1232px)/2))!important}
body[data-reservation-ui] nav h1{font-size:25px;margin:0 0 6px}
body[data-reservation-ui] nav p{margin:0;font-size:13px;color:var(--pe-line)}
body[data-reservation-ui] header.shadow{box-shadow:none;border-bottom:1px solid var(--pe-line);background:var(--pe-surface)}
body[data-reservation-ui] header h2{margin:0;font-size:22px}
body[data-reservation-ui] header .float-end{font-size:14px;font-weight:400;color:var(--pe-muted)}
.pe-auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:1200px;margin:auto;padding:50px;gap:80px}




.pe-auth-panel{background:var(--pe-surface);padding:40px;border:1px solid var(--pe-line);border-radius:20px;box-shadow:0 20px 60px var(--pe-shadow)}
.pe-logo{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:800}
.pe-logo span{font-size:13px}
.pe-auth-logo{margin-bottom:30px}
.pe-auth-title{margin-bottom:8px}
.pe-auth button[type=submit]{font-size:14px}
.pe-auth input[type=checkbox]{accent-color:var(--pe-primary)}
.pe-main .text-warning{color:#8d640c!important}
.pe-main .text-secondary{color:var(--pe-muted)!important}

@media(max-width:1000px){.pe-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pe-auth{gap:32px;padding:32px}

.pe-metrics{grid-template-columns:1fr 1fr}
.pe-metrics .pe-cta{grid-column:1/-1}
body[data-reservation-ui] nav .space-x-8>:not([hidden])~:not([hidden]){margin-left:12px}
.pe-main .col{min-width:260px}
}

@media(max-width:640px){.pe-auth{display:block;padding:24px 16px}



.pe-auth-panel{padding:24px}
.pe-course-grid,.pe-metrics{grid-template-columns:1fr}
.pe-toolbar,.pe-section-head{align-items:stretch;flex-direction:column}
.pe-main .card-body{padding:16px}
.pe-main .container{padding-left:16px;padding-right:16px}
.pe-main .container .container{padding-left:0;padding-right:0}
.pe-main .row>.col{flex:0 0 100%;min-width:0}
.pe-steps{font-size:12px;gap:6px}
.pe-steps li{padding:10px}
.pe-main .card-footer .btn{margin:4px}
.pe-main header .float-end,body[data-reservation-ui] header .float-end{float:none!important;display:block;margin-top:8px}
.pe-main .py-12{padding-top:20px}
.pe-feedback{margin:16px}
.pe-main .form-group{display:flex;flex-wrap:wrap;gap:8px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}
@media print{nav,.pe-footer,.pe-skip{display:none!important}
.pe-main .card{box-shadow:none}
}

.pe-stat-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--pe-line)}
.pe-stat-row meter{flex:1;max-width:55%;height:14px;accent-color:var(--pe-primary)}
.pe-main .recent-activities .item{padding:18px;border-bottom:1px solid var(--pe-line)}
.pe-main .table100{overflow-x:auto;padding:20px;background:var(--pe-surface);border-radius:16px;margin:20px}
.pe-main .table100 table{width:100%}

/* Shared semantic classes also work with the existing compiled Tailwind bundle. */
.pe-page { background: var(--pe-bg); }
.pe-brand-text { color: var(--pe-primary) !important; }
.pe-brand-border { border-color: var(--pe-line) !important; }
body[data-reservation-ui] a.pe-nav-active { color: var(--pe-navy); border-color: var(--pe-primary); }
body[data-reservation-ui] a.pe-mobile-active { color: var(--pe-navy); background: var(--pe-soft); border-color: var(--pe-primary); }
body[data-reservation-ui] a.pe-mobile-active:focus { background: var(--pe-line); }
body[data-reservation-ui] .pe-input:focus { border-color: var(--pe-primary); --tw-ring-color: var(--pe-input-line); }
.pe-main input:not([type=hidden]):not([type=checkbox]):not([type=radio]):focus,
.pe-main select:focus,.pe-main textarea:focus,.pe-auth input:not([type=checkbox]):focus {
  border-color: var(--pe-primary); --tw-ring-color: var(--pe-input-line);
}
body[data-reservation-ui] .pe-checkbox { color: var(--pe-primary); accent-color: var(--pe-primary); }
body[data-reservation-ui] .pe-checkbox:focus { border-color: var(--pe-primary); --tw-ring-color: var(--pe-input-line); }
body[data-reservation-ui] .pe-primary-button { background: var(--pe-primary); color: var(--pe-surface); }
body[data-reservation-ui] .pe-primary-button:hover,
.pe-main .btn-primary:hover,.pe-main .btn-success:hover,.pe-auth button[type=submit]:hover,
body[data-reservation-ui] a.pe-cta:hover { background: var(--pe-primary-hover) !important; border-color: var(--pe-primary-hover) !important; }
body[data-reservation-ui] .pe-primary-button:active { background: var(--pe-navy); }
body[data-reservation-ui] .pe-primary-button:focus { border-color: var(--pe-navy); --tw-ring-color: var(--pe-input-line); }
.pe-main .btn-outline-primary:hover { background: var(--pe-primary); color: var(--pe-surface); }
.pe-main .btn-secondary:hover { background: var(--pe-line); color: var(--pe-navy); }
body[data-reservation-ui] .pe-banner-primary { background: var(--pe-primary); }
body[data-reservation-ui] .pe-banner-accent { background: var(--pe-primary-hover); }
body[data-reservation-ui] .pe-banner-action:hover,body[data-reservation-ui] .pe-banner-action:focus { background: var(--pe-primary-hover); }
body[data-reservation-ui] .pe-brand-header { color: var(--pe-surface); }
body[data-reservation-ui] .pe-main a.pe-danger { color: #b83240; }
.pe-stat-row meter::-webkit-meter-optimum-value { background: var(--pe-primary); }
.pe-stat-row meter::-moz-meter-bar { background: var(--pe-primary); }
.pe-course progress::-webkit-progress-value { background: var(--pe-primary); }
.pe-course progress::-moz-progress-bar { background: var(--pe-primary); }

/* Single centered authentication form. */
.pe-auth.pe-auth-login-only { display: flex; align-items: center; justify-content: center; max-width: 640px; padding: 32px 20px; gap: 0; }
.pe-auth-login-only .pe-auth-panel { width: 100%; min-width: 0; }
@media(max-width:640px) {
  .pe-auth.pe-auth-login-only { padding: 24px 16px; }
  .pe-auth-login-only .pe-logo { flex-wrap: wrap; }
}

/* Larger shared layout for both roles. */
.pe-main .pe-edit-account { max-width: 1100px; margin: 0 auto; background: var(--pe-surface); }
.pe-edit-account-heading { padding: 24px 28px; border-bottom: 1px solid var(--pe-line); }
.pe-edit-account-heading h3, .pe-edit-account-heading p { margin: 0; }
.pe-edit-account-heading p { margin-top: 6px; }
.pe-edit-account .pe-account-form { padding: 28px; align-items: start; gap: 24px 28px; }
.pe-edit-account-note { grid-column: 1 / -1; }
.pe-edit-account textarea { resize: vertical; }
.pe-main .pe-edit-account select:disabled { opacity: 1; background: var(--pe-soft); color: var(--pe-muted); cursor: not-allowed; }
.pe-edit-account-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 20px 28px; }
@media(max-width:640px) {
    .pe-edit-account-heading, .pe-edit-account .pe-account-form { padding: 20px; }
    .pe-edit-account-actions { padding: 20px; flex-wrap: wrap; }
    .pe-edit-account-actions .btn { flex: 1; }
}
:root { --pe-chart-capacity: #c2410c; }
body[data-reservation-ui] { font-size: 17px; }
.pe-main .container { width: calc(100% - 48px); max-width: 1800px; margin-left: auto; margin-right: auto; }
body[data-reservation-ui] nav > .max-w-7xl,
body[data-reservation-ui] header > .max-w-7xl { max-width: 1800px; width: calc(100% - 48px); }
body[data-reservation-ui] nav > .pe-brand-header { padding-left: max(24px, calc((100vw - 1800px) / 2)) !important; padding-right: 24px !important; }
body[data-reservation-ui] nav .text-sm { font-size: 16px; }
body[data-reservation-ui] header h2 { font-size: 26px; }
.pe-main .table { font-size: 16px; }
.pe-main .badge, .pe-main .pe-field-error { font-size: 14px; }
.pe-feedback { max-width: 1800px; width: calc(100% - 48px); }
.pe-account-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.pe-account-form label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pe-account-form input, .pe-account-form select, .pe-account-form textarea { width: 100%; }
@media(max-width:640px) {
    body[data-reservation-ui] { font-size: 16px; }
    .pe-main .container, .pe-feedback { width: calc(100% - 24px); }
    .pe-account-form { grid-template-columns: 1fr; }
    .pe-section-head { align-items: stretch; }
}

/* Academic term management */
.academic-page > * { margin-bottom: 24px; }
.academic-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:16px; }
.academic-toolbar label { display:flex; flex-direction:column; gap:8px; }
.academic-banner { padding:20px; border:1px solid var(--pe-line); border-radius:12px; background:white; }
.academic-banner p { margin:8px 0 0; }
.academic-bar { position:relative; min-height:34px; margin:6px 0; background:#eff6ff; border-radius:5px; overflow:hidden; }
.academic-bar::before { content:""; position:absolute; inset:0 auto 0 0; width:var(--bar); background:#93c5fd; }
.academic-bar.capacity::before,.academic-bar.Cancel::before { background:#fdba74; }
.academic-bar.Reject::before { background:#fca5a5; }
.academic-bar span { position:relative; display:block; padding:4px 10px; color:#172554; }
.academic-chart-row { margin:20px 0; }
.academic-page .card { background:white; }
.academic-page input[type=checkbox] { width:20px; height:20px; min-height:20px; align-self:flex-start; }
@media(max-width:640px) { .academic-toolbar > * { width:100%; } }

/* Simple admin term and course pages. */
.academic-term-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0; }
.academic-term-summary strong,.academic-term-summary span { display:block; }
.academic-term-summary strong { margin-top:6px; font-size:21px; color:var(--pe-navy); }
.academic-extra { margin-top:24px; }
.academic-extra[open] > summary { margin-bottom:16px; }
.academic-course-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.academic-course-grid progress { width:100%; height:12px; margin-bottom:16px; accent-color:var(--pe-primary); }
.academic-course-grid progress::-webkit-progress-bar { background:var(--pe-soft); border-radius:8px; }
.academic-course-grid progress::-webkit-progress-value { background:var(--pe-primary); border-radius:8px; }
.academic-course-grid progress::-moz-progress-bar { background:var(--pe-primary); }
.academic-course-grid .badge.bg-secondary { background:var(--pe-soft); color:var(--pe-muted); }
.academic-check { display:flex; gap:10px; align-items:center; margin-bottom:16px; }
.academic-page [hidden] { display:none !important; }
.academic-page summary { cursor:pointer; }
@media(max-width:640px) { .academic-term-summary { grid-template-columns:1fr; gap:12px; } .academic-course-grid { grid-template-columns:1fr; } }