/* ระบบจองห้องเรียน: ฟอนต์ Anuphan สีหลักเขียวเข้มโทนเดียวทั้งเว็บ (is-green) ใช้ร่วมกับ Bulma */
:root {
    --room-today: var(--green);
    --room-today-row: #dcece7;
    --room-found: #3273dc;
    --room-found-row: #dbe7fa;
    --room-border: #dbdbdb;

    /* สีหลักแบบ asset ใช้ผ่านคลาส is-green และตัวแปรด้านล่าง */
    --green: #0B6E5F;
    --green-dark: #08584C;
    --green-light: #e6f2ef;
    --green-light-text: #08584C;
    --green-ring: rgba(11, 110, 95, .25);
}

/* ---------- scrollbar ทุกส่วนของเว็บ: เส้นบางสีเขียวอ่อน ปลายมน ไม่มีปุ่มลูกศร (แบบรายการกำหนดการ 7 วัน) ---------- */
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* scrollbar ของทั้งหน้ากว้างกว่าเล็กน้อยให้จับลากได้ง่าย */
html::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #b9d6ce;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--green);
}

*::-webkit-scrollbar-button {
    display: none;
}

/* Firefox ไม่มี ::-webkit-scrollbar ใช้ค่ามาตรฐานแทน (Chrome จะไม่ใช้ส่วนนี้ จึงไม่มีปุ่มลูกศรหัวท้าย) */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #b9d6ce transparent;
    }
}

/* ---------- ปุ่ม dropdown และช่องกรอกบรรทัดเดียวโค้งมนเต็มแบบแคปซูล เข้ากับการ์ดและหน้าต่างมุมโค้ง ---------- */
/* ขนาด is-small ของ Bulma กำหนดมุมเองจึงต้องระบุด้วย กลุ่มปุ่มติดกัน (has-addons เช่น - 0 + ของ iPad) Bulma ตัดมุมด้านในเอง จึงโค้งเฉพาะหัวท้ายกลุ่ม */
.button,
.button.is-small:not(.is-rounded),
.button.is-medium,
.button.is-large,
.select select,
.input,
.input.is-small,
.input.is-medium,
.input.is-large,
.file-cta,
.file-name {
    border-radius: 999px;
}

.input {
    padding-left: 1em;
}

.select:not(.is-multiple) select {
    padding-left: 1em;
    padding-right: 2.75em;
}

/* ช่องกรอกทุกช่องหน้าตาเดียวกับ select ที่วาดเอง (Tom Select): พื้นเทาอมเขียวไม่มีเส้นขอบ
   ตอนพิมพ์พื้นเป็นขาวมีวงเขียวจาง (เขียนซ้ำ :hover/:focus เพราะ Bulma ใส่สีขอบในสถานะเหล่านั้น) */
.input,
.textarea,
.select select,
.input:hover,
.textarea:hover,
.select select:hover {
    border-color: transparent;
    background-color: #f2f5f4;
    box-shadow: none;
}

.input:focus,
.input:active,
.textarea:focus,
.textarea:active,
.select select:focus,
.select select:active {
    border-color: transparent;
    background-color: #fff;
    box-shadow: 0 0 0 .125em var(--green-ring);
}

.input[disabled],
.textarea[disabled],
.select select[disabled] {
    border-color: transparent;
    background-color: #f5f5f5;
    box-shadow: none;
    opacity: .6;
}

.select:not(.is-multiple):not(.is-loading)::after {
    right: 1.25em;
}

/* เมนูของแถบนำทาง: ด้านบนติดแถบเมนูจึงไม่โค้ง ด้านล่างโค้ง */
.navbar-dropdown {
    overflow: hidden;
    border-radius: 0 0 14px 14px;
}

/* ---------- select ที่วาดเอง (Tom Select): ช่องเป็นแคปซูลพื้นเทาอมเขียวไม่มีเส้นขอบ รายการตัวเลือกเป็นกล่องโค้งมีเงา ---------- */
.select:has(.ts-wrapper) {
    height: auto;
}

.select:has(.ts-wrapper)::after {
    display: none;
}

.ts-wrapper.single .ts-control {
    min-height: 2.5em;
    padding: .45em 2.5em .45em 1em;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #f2f5f4;
    box-shadow: none;
    color: #363636;
    font-size: inherit;
    line-height: 1.5;
}

.ts-wrapper.single .ts-control::after {
    right: 1.1em;
    border-color: var(--green) transparent transparent;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
    border-color: transparent transparent var(--green);
}

.ts-wrapper.focus .ts-control {
    background: #fff;
    box-shadow: 0 0 0 .125em var(--green-ring);
}

.ts-wrapper.disabled .ts-control {
    background: #f5f5f5;
    opacity: .6;
}

.control.has-icons-left .ts-wrapper.single .ts-control {
    padding-left: 2.5em;
}

.control.has-icons-left .icon {
    z-index: 5;
}

/* เขียน .ts-dropdown ซ้ำสองครั้งให้ชนะไฟล์ CSS ของ Tom Select ที่โหลดทีหลัง */
.ts-dropdown.ts-dropdown {
    margin-top: 6px;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    font-size: .875rem;
}

.ts-dropdown.ts-dropdown .option {
    padding: .45rem 1rem;
}

.ts-dropdown.ts-dropdown .active {
    background: var(--green-light);
    color: var(--green-dark);
}

.ts-dropdown.ts-dropdown .selected {
    color: var(--green-dark);
    font-weight: 600;
}

.ts-dropdown.ts-dropdown .no-results {
    padding: .45rem 1rem;
    color: #8a9390;
}

/* ---------- สี is-green ใช้แทน is-primary, is-success และ is-info ของ Bulma 0.9 (ไม่มีตัวแปรสีให้เปลี่ยน) ---------- */
.button.is-green {
    border-color: transparent;
    background-color: var(--green);
    color: #fff;
}

.button.is-green:hover {
    background-color: var(--green-dark);
    color: #fff;
}

.button.is-green:focus:not(:active) {
    box-shadow: 0 0 0 .125em var(--green-ring);
    color: #fff;
}

.button.is-green[disabled] {
    background-color: var(--green);
    box-shadow: none;
}

.button.is-green.is-loading::after {
    border-color: transparent transparent #fff #fff !important;
}

.button.is-green.is-light {
    background-color: var(--green-light);
    color: var(--green-light-text);
}

.button.is-green.is-light:hover {
    background-color: #d9ece6;
    color: var(--green-light-text);
}

.select.is-green:not(:hover)::after,
.select.is-green:hover::after {
    border-color: var(--green);
}

/* tag ทุกตัวโค้งเต็มแบบ is-rounded ของ Bulma รวมถึง tag ที่ JS สร้างภายหลัง (:not(body) ให้ชนะกฎเดิมของ Bulma) */
.tag:not(body) {
    border-radius: 9999px;
}

.tag.is-green {
    background-color: var(--green);
    color: #fff;
}

.tag.is-green.is-light {
    background-color: var(--green-light);
    color: var(--green-light-text);
}

.has-text-green {
    color: var(--green) !important;
}

html,
body,
button,
input,
select,
textarea,
.title,
.subtitle {
    font-family: 'Anuphan', sans-serif;
}

body {
    background: #fff;
}

[hidden] {
    display: none !important;
}

/* ---------- เมนูและโครงหน้า ---------- */
/* navbar พื้นขาว ตัวอักษรสีเดียว หน้าปัจจุบันสีเขียว แบบเดียวกับ asset */
.navbar.site-nav {
    box-shadow: 0 1px 0 #dfe5e2;
}

.navbar.site-nav a.navbar-item,
.navbar.site-nav .navbar-link {
    color: #2b2f2e;
}

.navbar.site-nav a.navbar-item:hover,
.navbar.site-nav .navbar-link:hover,
.navbar.site-nav .has-dropdown:hover .navbar-link {
    background-color: #f2f7f5;
    color: var(--green-dark);
}

.navbar.site-nav a.navbar-item.is-current {
    color: var(--green-dark);
    font-weight: 600;
}

.navbar.site-nav .navbar-link:not(.is-arrowless)::after {
    border-color: var(--green);
}

/* เมนูย่อย: ไอคอนหรือโลโก้เล็กหน้าชื่อ หัวข้อหมวดตัวเล็กสีเทา ไอคอนลิงก์ภายนอกชิดขวา */
.nav-menu .navbar-item {
    gap: .6rem;
    min-width: 13rem;
}

.nav-menu .navbar-item img,
.nav-menu .navbar-item > .ti:first-child {
    flex: none;
    width: 24px;
    max-height: 24px;
    object-fit: contain;
}

.nav-menu .navbar-item > .ti:first-child {
    height: 1.1rem;
    color: var(--green);
}

.nav-menu .nav-menu-out {
    margin-left: auto;
    color: #8a9390;
}

/* เมนูย่อยทุกขนาดจอ (รวมเมนูแฮมเบอร์เกอร์บนมือถือที่ Bulma ใช้ display: block) เรียงแนวนอน ไอคอนกับชื่ออยู่กึ่งกลางแนวเดียวกัน
   ไอคอนลิงก์ภายนอกชิดขวา */
.nav-menu a.navbar-item,
.nav-menu .navbar-item:is(a, button) {
    display: flex;
    align-items: center;
}

.nav-menu .navbar-item .ti {
    vertical-align: 0;
}

.nav-menu-heading {
    padding: .35rem 1rem .15rem;
    color: #8a9390;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.navbar.site-nav .navbar-link.is-current {
    color: var(--green-dark);
    font-weight: 600;
}

.site-logo {
    display: block;
    width: 28px;
    height: 28px;
    background-color: var(--green);
    -webkit-mask: url("../images/IT_text.png") center / contain no-repeat;
    mask: url("../images/IT_text.png") center / contain no-repeat;
}

/* จอคอม: เส้นใต้เมนูหน้าปัจจุบัน */
@media screen and (min-width: 1024px) {
    .navbar.site-nav .navbar-start > a.navbar-item.is-current,
    .navbar.site-nav .navbar-end > a.navbar-item.is-current,
    .navbar.site-nav .has-dropdown > .navbar-link.is-current {
        box-shadow: inset 0 -3px 0 var(--green);
    }
}

/* มือถือ: แถบสีหน้าปัจจุบัน และแยกส่วนบัญชีผู้ใช้ */
@media screen and (max-width: 1023px) {
    .navbar.site-nav a.navbar-item.is-current {
        background-color: #e6f2ef;
    }

    .navbar.site-nav .navbar-end {
        border-top: 1px solid #e3e7e5;
        margin-top: .5rem;
        padding-top: .5rem;
    }

    .navbar.site-nav .has-dropdown > .navbar-link {
        color: #5f6664;
        font-size: .8125rem;
        pointer-events: none;
    }

    .navbar.site-nav .has-dropdown > .navbar-link::after {
        display: none;
    }
}

/* footer อยู่ล่างสุดของจอเสมอแม้หน้ามีเนื้อหาน้อย: body เป็นคอลัมน์สูงเต็มจอ main ยืดเต็มที่ว่าง
   และ section สุดท้ายของหน้ายืดตามด้วย พื้นหลังของ section (เช่น แถบเทาด้านล่าง) จึงต่อถึง footer พอดี */
body:has(> .site-main) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    padding-top: 3.25rem;
}

.site-main > section:last-of-type {
    flex-grow: 1;
}

.site-footer {
    background: #ededed;
    padding: 2.5rem 1rem;
}

.site-footer img {
    max-width: 100%;
    height: auto;
}

/* คำว่า AND คั่นกลางระหว่างชื่อผู้พัฒนาสองฝั่ง มีเส้นตั้งด้านบนและล่าง */
.footer-and {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1.5rem;
    color: #7a7a7a;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .5px;
}

.footer-and::before,
.footer-and::after {
    content: '';
    flex: 1;
    width: 1px;
    background: #b5b5b5;
}

.footer-and::before {
    margin-bottom: 8px;
}

.footer-and::after {
    margin-top: 8px;
}

.link-button {
    padding: 0 .1rem;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    line-height: inherit;
}

.link-button:hover {
    opacity: .7;
}

.ti {
    vertical-align: -.15em;
}

/* วงหมุนระหว่างรอภาพกล้องหรือรายละเอียดการจอง (หน้าจอกำลังโหลดทั้งหน้าใช้ Notiflix.Loading) */
.loader-inline {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border: 4px solid rgba(0, 0, 0, .15);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* หน้าต่างทุกตัวของเว็บ (sheet-modal): การ์ดกลางจอหัวเขียว เนื้อหา ปุ่มด้านล่าง บนมือถือเลื่อนขึ้นจากขอบล่าง */
.sheet-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

/* หน้าต่างชวนติดตั้งแอป (schedule/install.js): ไม่มีหัวเขียว มีขีดจับด้านบน ไอคอนแอป รายการประโยชน์หรือขั้นตอน และปุ่ม */
.install-body {
    gap: .8rem;
    padding-top: .5rem;
}

.install-grab {
    width: 38px;
    height: 4px;
    margin: 0 auto;
    border-radius: 999px;
    background: #cfd6d3;
}

.install-app {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.install-app img {
    flex: none;
    border-radius: 13px;
    box-shadow: 0 3px 8px rgba(11, 110, 95, .3);
}

.install-name {
    font-size: 1rem;
    font-weight: 700;
}

.install-sub {
    color: #6b7471;
    font-size: .75rem;
}

.install-perks,
.install-steps {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
}

.install-perks {
    padding: .65rem .8rem;
    border-radius: 12px;
    background: #f2f5f4;
}

.install-perks li {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.install-perks .ti {
    color: var(--green);
}

.install-steps {
    counter-reset: install-step;
}

.install-steps li {
    display: grid;
    grid-template-columns: 1.4rem 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .5rem .65rem;
    border-radius: 12px;
    background: #f2f5f4;
    counter-increment: install-step;
}

.install-steps li[hidden] {
    display: none;
}

.install-steps li::before {
    content: counter(install-step);
    display: grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.install-chip {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    color: #0a84ff;
    font-size: 1.05rem;
}

.install-chip.is-dark {
    color: #1f2624;
}

.install-buttons {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: .5rem;
}

.install-modal.is-ios .install-buttons {
    grid-template-columns: 1fr;
}

/* ส่วนของอีกระบบปฏิบัติการซ่อนด้วย hidden (.button ของ Bulma ตั้ง display เองจึงต้องบังคับ) */
.install-modal [hidden] {
    display: none !important;
}

/* พื้นขาวอยู่ที่ส่วนเนื้อหา ไม่ใช่ที่กรอบ ถ้ากรอบเป็นสีขาว ขอบโค้งของหัวสีเขียวจะผสมกับสีขาวจนเห็นเป็นเส้นที่มุม */
.sheet-body,
.sheet-foot,
.sheet-loading {
    background: #fff;
}

/* ภาพกล้องและข้อมูล Telemedicine ต้องการพื้นที่กว้างกว่า */
.sheet-panel.is-wide {
    width: min(860px, calc(100vw - 32px));
}

#booking-sheet {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sheet-loading {
    padding: 2rem;
}

.sheet-head {
    position: relative;
    padding: 1.25rem 1.5rem;
    background: var(--green);
    color: #fff;
}

.sheet-close {
    position: absolute;
    top: .85rem;
    right: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.sheet-id {
    padding-right: 2.5rem;
    font-size: .75rem;
}

.sheet-room {
    margin-top: .1rem;
    font-size: 1.375rem;
    font-weight: 700;
}

.sheet-when {
    margin-top: .2rem;
    font-size: .875rem;
}

.sheet-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .75rem;
}

.sheet-tags span {
    padding: .1rem .65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: .75rem;
    font-weight: 600;
}

.sheet-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    overflow-y: auto;
}

.sheet-teacher {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* รูปอาจารย์เป็นแนวตั้ง ใบหน้าอยู่ด้านบน: ตัดเป็นวงกลมโดยยึดด้านบนของรูป (เหมือนรูปอาจารย์ในจอ dashboard และการ์ดอาจารย์) */
.sheet-teacher img {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
}

.sheet-label {
    margin-bottom: .35rem;
    color: #4d5653;
    font-size: .75rem;
    font-weight: 600;
}

.sheet-muted {
    color: #4d5653;
    font-size: .8125rem;
}

.sheet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.sheet-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .65rem;
    border: 1px solid #cfe3dc;
    border-radius: 999px;
    background: #f2f7f5;
    color: var(--green-dark);
    font-size: .8125rem;
}

/* iPad ใช้สีเดียวกับป้ายในตาราง: EXAM+ แดง อื่นๆ ดำ */
.sheet-chip.is-exam {
    border-color: #f14668;
    background: #f14668;
    color: #fff;
}

.sheet-chip.is-ipad {
    border-color: #363636;
    background: #363636;
    color: #fff;
}

.sheet-note {
    font-size: .875rem;
    line-height: 1.65;
}

/* ใบยืมแต่ละชุด: เลขใบยืม ผู้ยืม และเอกสาร PDF ที่มี (ที่ยังไม่มีเป็นสีเทาขีดฆ่า) */
.sheet-order {
    padding: .75rem .85rem;
    border: 1px solid #dfe5e2;
    border-radius: 12px;
}

.sheet-order-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
}

.sheet-order-title .ti {
    color: var(--green);
}

a.sheet-chip.is-link:hover {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.sheet-chip.is-missing {
    border-color: #e3e7e5;
    background: #f5f7f6;
    color: #8a9390;
    text-decoration: line-through;
}

.sheet-file {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--green);
    font-size: .875rem;
}

.sheet-zoom {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .85rem;
    border: 1px solid #dfe5e2;
    border-radius: 12px;
}

.sheet-zoom-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.sheet-zoom-join {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 2.4rem;
    padding: 0 .9rem;
    border-radius: 999px;
    background: #2D8CFF;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
}

.sheet-zoom-join:hover {
    background: #1c6fd6;
    color: #fff;
}

/* โลโก้ Zoom วงกลมฟ้า (zoom-circle.png ตัดให้วงกลมอยู่กลางภาพ) ล้อมด้วยขอบขาว ให้แยกจากพื้นปุ่มสีฟ้า */
.sheet-zoom-join img {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0 .45rem 0 -.55rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
}

.sheet-copies {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.sheet-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    padding: .45rem .6rem;
    border-radius: 8px;
    background: #f5f7f6;
}

.sheet-copy small {
    display: block;
    color: #4d5653;
    font-size: .6875rem;
}

.sheet-copy strong {
    font-size: .9375rem;
}

.sheet-icon-button {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: var(--green);
    cursor: pointer;
}

.sheet-report {
    color: var(--green);
    font-size: .75rem;
}

.sheet-foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border-top: 1px solid #edf1ef;
}

/* ปุ่มท้ายหน้าต่าง (ลบ แก้ไข) โค้งมนเต็มแบบแคปซูล */
.sheet-foot .button {
    min-width: 6rem;
    border-radius: 999px;
}

@media screen and (max-width: 768px) {
    .sheet-modal {
        justify-content: flex-end;
    }

    .sheet-panel,
    .sheet-panel.is-wide {
        width: 100%;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
    }

    .sheet-head {
        padding: 1.1rem 1.1rem 1rem;
    }

    .sheet-body {
        padding: 1rem 1.1rem;
    }

    .sheet-foot {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: .75rem 1.1rem 1.1rem;
    }

    .sheet-foot.is-single {
        grid-template-columns: minmax(0, 1fr);
    }

    .sheet-foot .button {
        height: 2.875rem;
    }

    /* รายละเอียดการจองและใบยืมบนมือถือเปิดเต็มจอ หัวเขียวเว้นแถบสถานะ เนื้อหาเลื่อนได้ ปุ่มอยู่ล่างสุด */
    #modal-booking .sheet-panel {
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }

    #modal-booking #booking-sheet {
        flex: 1;
    }

    #modal-booking .sheet-head {
        padding-top: calc(1.1rem + env(safe-area-inset-top, 0px));
    }

    #modal-booking .sheet-close {
        top: calc(.85rem + env(safe-area-inset-top, 0px));
    }

    #modal-booking .sheet-body {
        flex: 1;
    }

    #modal-booking .sheet-foot {
        padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* เนื้อหาของหน้าต่าง Telegram และกล้อง */
.telegram-qr {
    text-align: center;
}

.sheet-body .store-qr {
    display: block;
    text-align: center;
}

.modal {
    z-index: 15000;
}

.tox-tinymce-aux {
    z-index: 16000 !important;
}

/* ---------- เข้าสู่ระบบ: ฟอร์มซ้าย ภาพห้องเรียนในกรอบโค้งขวา บนมือถือภาพเป็นแถบด้านบน ---------- */
.login-layout {
    display: flex;
    gap: 24px;
    min-height: 100vh;
    padding: 24px;
}

.login-panel {
    flex: none;
    display: flex;
    flex-direction: column;
    width: 500px;
    padding: 16px 40px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-brand img {
    flex: none;
    width: auto;
    height: 76px;
}

.login-brand h1 {
    color: var(--green-dark);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.login-brand p {
    color: #4d5653;
    font-size: 13px;
}

.login-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

/* กว้าง 300px เท่ากับ Cloudflare Turnstile ขนาดปกติ */
.login-body {
    width: 300px;
}

.login-body h2 {
    margin-bottom: 24px;
    color: #1f2624;
    font-size: 30px;
    font-weight: 600;
}

.login-body .notification {
    padding: 12px 14px;
    font-size: 14px;
}

.login-body form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.login-field label {
    display: block;
    margin-bottom: 6px;
    color: #1f2624;
    font-size: 14px;
    font-weight: 500;
}

.login-page .input {
    height: 46px;
    padding: 0 14px;
    border-radius: 10px;
}

.login-password {
    position: relative;
}

.login-password .input {
    padding-right: 48px;
}

.login-password button {
    position: absolute;
    top: 1px;
    right: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: #4d5653;
    font-size: 20px;
    cursor: pointer;
}

.login-password button:hover {
    color: var(--green);
}

/* จองความสูงของ Turnstile ไว้ก่อนโหลด ปุ่มจะได้ไม่ขยับ */
.turnstile-field {
    min-height: 65px;
}

#login-submit {
    height: 48px;
    border-radius: 10px;
    font-weight: 600;
}

.login-home {
    color: var(--green);
    font-size: 14px;
}

.login-home:hover {
    color: var(--green-dark);
}

.login-photo {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    border-radius: 20px;
}

.login-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% center;
}

@media screen and (max-width: 768px) {
    .login-layout {
        flex-direction: column;
        gap: 14px;
        padding: 14px;
    }

    .login-photo {
        order: -1;
        flex: none;
        height: 130px;
        border-radius: 16px;
    }

    .login-panel {
        align-items: center;
        width: 100%;
        padding: 0;
    }

    .login-brand {
        width: 300px;
    }

    .login-main {
        flex: none;
        padding: 14px 0;
    }

    .login-body h2 {
        margin-bottom: 12px;
        font-size: 22px;
    }

    .login-body form {
        gap: 12px;
    }

    .login-page .input {
        height: 44px;
    }

    .login-password button {
        width: 42px;
        height: 42px;
    }

    #login-submit {
        height: 46px;
    }
}

/* จอกว้างไม่ถึง 328px ลดขอบให้ Turnstile กว้าง 300px พอดี */
@media screen and (max-width: 340px) {
    .login-layout {
        padding: 10px;
    }
}

/* ---------- ส่วนบนของหน้าตารางจองห้อง ---------- */
.schedule-top {
    padding: 1.5rem 1rem;
    background: linear-gradient(180deg, #f5f5f5 60%, #fff 60%);
}

/* ฟอร์มจองห้องใช้หน้าตาเดียวกับส่วนบน: การ์ดขาวโค้งมนและเงาเดียวกัน
   พื้นขาวด้านบนสูงคงที่ (--band-top) ต่อจากตาราง ส่วนพื้นเทาด้านล่างยืดหดตามความสูงของฟอร์มต่อลงไปถึง footer
   เส้นแบ่งจึงอยู่ที่เดิมเมื่อการ์ดสูงขึ้น (เช่น เปิดช่องรายละเอียด) หรือการ์ดเรียงต่อกันบนมือถือ */
.schedule-form {
    --band-top: 15rem;
    padding: 1.5rem 1rem 3rem;
    background: linear-gradient(180deg, #fff var(--band-top), #ededed var(--band-top));
}

/* หน้าแก้ไขมีหัวข้อวันที่เหนือการ์ด เส้นแบ่งจึงต่ำลงตาม */
.schedule-form.is-edit {
    --band-top: 21rem;
}

/* ตัวแก้ไขข้อความ (TinyMCE): กรอบตอนพิมพ์ ปุ่มที่ focus และปุ่มที่เปิดใช้อยู่ (เช่น ตัวหนา) เป็นโทนเขียวของระบบแทนสีน้ำเงิน
   เขียน .tox ซ้ำให้ชนะ skin ของ TinyMCE ที่โหลดทีหลัง */
.tox.tox .tox-edit-area::before {
    border-color: var(--green);
}

.tox.tox .tox-tbtn:focus::after {
    box-shadow: 0 0 0 2px var(--green);
}

.tox.tox .tox-tbtn--active,
.tox.tox .tox-tbtn--enabled,
.tox.tox .tox-tbtn--enabled:focus,
.tox.tox .tox-tbtn--enabled:hover {
    background: var(--green-light);
    color: var(--green-dark);
}

.tox.tox .tox-tbtn--active svg,
.tox.tox .tox-tbtn--enabled svg,
.tox.tox .tox-tbtn--enabled:focus svg,
.tox.tox .tox-tbtn--enabled:hover svg {
    fill: var(--green-dark);
}

/* การ์ดในฟอร์มจองและหน้าแก้ไขเว้นขอบในน้อยกว่าค่าเริ่มต้นของ Bulma ให้ฟอร์มไม่สูงเกิน */
.schedule-form .card-content {
    padding: 1.1rem;
}

/* หน้าตารางดูอย่างเดียว (/room, /firewall): ส่วนบนพื้นขาว แถบเครื่องมือแถวเดียวชิดซ้าย แบนเนอร์ (PNG พื้นโปร่ง) ชิดขวา
   แถบเครื่องมือ: ตัวเลื่อนสัปดาห์แบบแคปซูลพื้นน้ำเงินอ่อน (โทนตัวหนังสือในแบนเนอร์ #26466f) สวิตช์ห้องเรียน/ห้องสมุด ไปวันที่
   จอเล็กแบนเนอร์อยู่บน ตัวเลื่อนสัปดาห์เต็มความกว้าง ตารางใช้กรอบเดียวกับหน้าจอง พื้นเทาครึ่งล่างของส่วนตารางต่อลงไปถึง footer */
.schedule-top.room-public-top {
    --navy: #26466f;
    padding-top: 2.25rem;
    padding-bottom: 2rem;
    background: #fff;
}

.room-public-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.25rem;
}

/* แบนเนอร์ชิดขวา หน้า /firewall มีข้อมูล IP อยู่ทางซ้ายของรูป */
.room-public-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    margin-left: auto;
}

/* แบนเนอร์ /room และ /firewall สูงเท่ากันเสมอ (สูงคงที่ กว้างตามสัดส่วนรูป 720x224) ส่วนหัวจึงสูงเท่ากันทั้งสองหน้า */
.room-public-banner {
    display: block;
    flex: none;
    width: auto;
    max-width: 100%;
    height: 5.8rem;
}

@media screen and (min-width: 769px) {
    .room-public-head {
        min-height: 5.8rem;
    }
}

.room-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.week-switch {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: 4px;
    border-radius: 999px;
    background: #e9eff7;
}

.week-switch-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    width: 3.2rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    color: var(--navy);
    font-size: .8125rem;
    font-weight: 700;
}

/* กว้างคงที่พอช่วงวันข้ามเดือน (เช่น 28 ก.ย. - 4 ต.ค.) และ "กลับปัจจุบัน" ตัวเลื่อนจึงไม่ยืดหดเมื่อเปลี่ยนสัปดาห์ */
.week-switch-now {
    display: grid;
    width: 9.5rem;
    padding: 0 .5rem;
    color: #1f2624;
    line-height: 1.2;
    text-align: center;
}

.week-switch-now strong {
    color: inherit;
    font-size: 1rem;
    white-space: nowrap;
}

.week-switch-now small {
    color: #6b7471;
    font-size: .6875rem;
}

.week-switch-now em {
    color: var(--navy);
    font-style: normal;
    font-weight: 600;
}

.week-switch-now em.is-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.week-switch-arrow:hover {
    background: #d8e3f1;
    color: var(--navy);
}

.week-switch-now:hover {
    color: var(--navy);
}

/* สวิตช์ห้องเรียน/ห้องสมุด แบบเดียวกับปุ่มวันเดียว/หลายวันในหน้าจอง ห้องที่ดูอยู่เป็นปุ่มขาว */
.room-switch {
    display: flex;
    gap: 3px;
    padding: 4px;
    border-radius: 999px;
    background: #f2f5f4;
}

.room-switch a {
    display: inline-flex;
    align-items: center;
    height: 2.4rem;
    padding: 0 1rem;
    border-radius: 999px;
    color: #4d5653;
    font-size: .8125rem;
}

.room-switch a:hover {
    color: var(--navy);
}

.room-switch a.is-active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    color: var(--navy);
    font-weight: 600;
}

.room-tool {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 3.2rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: #f2f5f4;
    color: #1f2624;
    font-size: .8125rem;
    cursor: pointer;
}

.room-tool:hover {
    background: #e7eeeb;
    color: var(--navy);
}

.room-tool input {
    width: 4.5rem;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.room-tool input::placeholder {
    color: inherit;
    opacity: 1;
}

/* ปุ่มไปวันที่: วงกลมมีแค่ไอคอนแว่นขยาย ช่องวันที่ (ใช้เปิดปฏิทิน) โปร่งใสวางทับเต็มปุ่ม */
.room-tool.is-icon {
    position: relative;
    justify-content: center;
    width: 3.2rem;
    padding: 0;
    font-size: 1.15rem;
}

.room-tool.is-icon input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

/* ปุ่มออกจากระบบ Firewall (เฉพาะ /firewall) สีแดง */
.room-tool.is-logout {
    background: #feecf0;
    color: #cc0f35;
    font-weight: 600;
}

.room-tool.is-logout:hover {
    background: #fcdbe2;
    color: #cc0f35;
}

/* เส้นขอบโฟกัสเฉพาะตอนใช้แป้นพิมพ์ ปุ่มไปวันที่ไม่มีเส้น (ช่องวันที่ด้านในถือว่าโฟกัสด้วยแป้นพิมพ์เสมอแม้คลิก) */
.week-switch a:focus-visible,
.room-switch a:focus-visible,
a.room-tool:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.room-tool input:focus {
    outline: 0;
}

/* /firewall: IP และคำอธิบายจากตาราง bypass ทางซ้ายของแบนเนอร์ 2 บรรทัดชิดขวา */
.firewall-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
    margin: 0;
}

/* คำอธิบายยาวตัดด้วย … (ชี้ดูข้อความเต็มได้) กล่องข้อมูลจึงไม่ดันแบนเนอร์ลงไปอีกแถว */
.firewall-info span {
    display: block;
    max-width: 12rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: #feecf0;
    color: #8a2a3d;
    font-size: .75rem;
    font-weight: 500;
}

.firewall-info .ti {
    margin-right: .3rem;
}

/* จอคอมและแท็บเล็ตแนวนอน: แถบเครื่องมือกับฝั่งขวาอยู่แถวเดียวเสมอ ฝั่งขวาหดแทนการตกไปอีกแถว
   (ข้อมูล IP ตัดด้วย … แบนเนอร์ย่อได้ถึง 150px) */
@media screen and (min-width: 1024px) {
    .room-public-head {
        flex-wrap: nowrap;
    }

    .room-toolbar {
        flex: none;
    }

    .room-public-side {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* หดได้แค่บรรทัดคำอธิบาย บรรทัด IP แสดงเต็มเสมอ (กว้างพอ IP ยาวสุด 255.255.255.255) */
    .firewall-info {
        flex: 0 1 auto;
        min-width: 9.5rem;
    }

    .firewall-info span {
        max-width: 100%;
    }

    .room-public-side .room-tool {
        flex: none;
    }

}

/* จอคอมแคบที่ไม่พอวางทุกอย่างแถวเดียว: 1024-1279px แบนเนอร์เตี้ยลงทั้งสองหน้า (ยังสูงเท่ากัน)
   1024-1439px ปุ่มออกจากระบบ Firewall เหลือแค่ไอคอนในวงกลม (ชี้ดูชื่อได้) */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .room-public-banner {
        height: 4.2rem;
    }

    .room-public-head {
        min-height: 4.2rem;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1439px) {
    .room-tool.is-logout {
        justify-content: center;
        width: 3.2rem;
        padding: 0;
        font-size: 1.15rem;
    }

    .room-tool.is-logout .room-tool-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
}

.room-public-grid {
    background: linear-gradient(180deg, #fff 50%, #ededed 50%);
}

@media screen and (max-width: 768px) {
    .room-public-head {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    /* มือถือที่ไม่พอวางข้างกัน: แบนเนอร์อยู่บน ข้อมูล IP เรียงแถวเดียวกลางใต้รูป */
    .room-public-side {
        flex-direction: column;
        gap: .35rem;
        margin-left: 0;
    }

    .room-public-side .room-public-banner {
        order: -1;
    }

    .firewall-info {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .room-toolbar {
        justify-content: center;
    }

    .week-switch {
        flex-basis: 100%;
        justify-content: space-between;
    }
}

/* การ์ดทุกใบในส่วนบน (ผู้ใช้, Planner/Note, ปฏิทิน) และในฟอร์มจอง โค้งมนและเงาเดียวกัน */

.schedule-top .card,
.schedule-form .card {
    height: 100%;
    overflow: hidden;
    border-radius: 22px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

/* การ์ดผู้ใช้: ภาพหน้าปก รูปกลมซ้อนขอบภาพ แถบความคืบหน้าของปีการศึกษา แถวสัปดาห์ และแถวปุ่มด้านล่าง */
.card.profile-card {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

/* รูปปกสูงอย่างน้อย 104px และยืดลงรับพื้นที่ที่เหลือเมื่อการ์ดสูงกว่าเนื้อหา (สูงเท่าการ์ดข้าง ๆ) ข้อมูลด้านล่างจึงไม่มีที่ว่างค้าง */
.profile-cover {
    position: relative;
    flex: 1 0 104px;
    min-height: 104px;
    overflow: hidden;
    border-radius: 16px;
}

.profile-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

.profile-telegram {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #1f2624;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}

.profile-telegram.is-linked {
    background: rgba(255, 255, 255, .92);
    cursor: default;
}

.profile-telegram .ti-brand-telegram {
    color: #229ED9;
}

.profile-telegram .ti-check {
    color: var(--green);
}

.profile-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin: -38px 12px 0 14px;
}

/* รูปโปรไฟล์เป็นปุ่ม คลิกเพื่อวนเปลี่ยนรูป */
.profile-avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    overflow: hidden;
    padding: 0;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--green-light);
    cursor: pointer;
    transition: transform .15s;
}

.profile-avatar:hover {
    transform: scale(1.05);
}

/* ตัดรูปเป็นวงกลมทั้งที่รูปและกรอบ (clip-path) เพราะ overflow + border-radius ของปุ่มที่ขยายตอนชี้ (transform)
   ใน Chrome ปล่อยมุมรูปล้นออกนอกวงกลมเป็นขอบไม่เรียบ */
.profile-avatar {
    clip-path: circle(50%);
}

.profile-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.profile-progress {
    flex: 1;
    min-width: 0;
    margin-bottom: 6px;
}

.profile-progress p {
    display: flex;
    justify-content: space-between;
    color: #4d5653;
    font-size: .6875rem;
}

.profile-segments {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2px;
    margin-top: 3px;
}

.profile-segments span {
    height: 5px;
    border-radius: 2px;
    background: #dfe5e2;
}

.profile-segments span.is-done {
    background: var(--green);
}

.profile-info {
    flex: none;
    padding: 10px 14px 14px;
}

.profile-fullname {
    color: #1f2624;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.profile-role {
    margin-top: 2px;
    color: #4d5653;
    font-size: .8125rem;
    line-height: 1.5;
}

/* หมายเลข VoIP ใต้ชื่อ แสดงเป็นไอคอนโทรศัพท์ตามด้วยเลข
   เป็น inline ปกติให้ตัวเลขอยู่บนฐานบรรทัดเดียวกับข้อความรอบข้าง (inline-flex จะยึดฐานของไอคอนจนตัวเลขลอยสูง) */
.profile-phone {
    white-space: nowrap;
}

.profile-phone .ti {
    margin-right: .2rem;
    color: var(--green);
    vertical-align: -.15em;
}

.profile-stats,
.profile-actions {
    display: grid;
    border-top: 1px solid #edf1ef;
}

.profile-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* การ์ดผู้ใช้หน้าจองมีระยะขอบใน 8px: แถวสัปดาห์และแถวปุ่มยืดออกชนขอบการ์ด พื้นตอนชี้จึงเต็มถึงขอบโค้ง (การ์ดตัดส่วนเกินตามมุมโค้ง) */
.card.profile-card > .profile-stats,
.card.profile-card > .profile-actions {
    margin-right: -8px;
    margin-left: -8px;
}

.card.profile-card > .profile-actions {
    margin-bottom: -8px;
}

.profile-actions {
    grid-template-columns: repeat(var(--profile-actions, 2), minmax(0, 1fr));
}

.profile-stats a,
.profile-actions > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 10px 2px;
    border: 0;
    border-right: 1px solid #edf1ef;
    background: none;
    color: #1f2624;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s;
}

.profile-stats a:last-child,
.profile-actions > :last-child {
    border-right: 0;
}

.profile-stats a:hover,
.profile-actions > :hover {
    background: #f2f7f5;
    color: var(--green-dark);
}

.profile-stats strong {
    color: inherit;
    font-size: 1rem;
    white-space: nowrap;
}

.profile-stats span {
    color: #4d5653;
    font-size: .75rem;
}

/* ช่องกลางของแถวสัปดาห์: "ปัจจุบัน" เมื่อดูสัปดาห์นี้ "กลับปัจจุบัน" เมื่อดูสัปดาห์อื่น */
.profile-now {
    color: var(--green);
    font-style: normal;
    font-weight: 600;
}

.profile-now.is-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.profile-actions > * {
    font-size: .6875rem;
}

.profile-actions .ti {
    font-size: 1.25rem;
}

.profile-actions .is-door {
    color: var(--green);
    font-weight: 600;
}

.profile-actions input {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.profile-actions input::placeholder {
    color: inherit;
    opacity: 1;
}

/* เส้นขอบโฟกัสเฉพาะตอนใช้แป้นพิมพ์ (Tab) คลิกแล้วไม่มีเส้น ช่อง "ไปวันที่" ไม่มีเส้นเลยเพราะช่องพิมพ์ถือว่าโฟกัสด้วยแป้นพิมพ์เสมอ */
.profile-telegram:focus-visible,
.profile-stats a:focus-visible,
.profile-actions > :focus-visible {
    outline: 2px solid var(--green);
    outline-offset: -2px;
}

.profile-stats a:focus:not(:focus-visible),
.profile-actions > :focus:not(:focus-visible),
.profile-actions input:focus {
    outline: 0;
}

.qr-large {
    width: 180px;
    display: block;
    margin: 0 auto;
}

/* การ์ด Planner / Post-it: ปุ่มแคปซูลสลับ ช่องวันที่และข้อความมุมโค้ง Post-it เป็นกระดาษโน้ตสีเหลืองอ่อน */
.note-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
}

.note-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border-radius: 999px;
    background: #f2f5f4;
}

.note-switch button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #4d5653;
    font-size: .8125rem;
    cursor: pointer;
}

.note-switch button.is-active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    color: var(--green-dark);
    font-weight: 600;
}

.note-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .5rem;
}

.note-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    font-weight: 700;
}

.note-status {
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--green-light);
    color: var(--green-dark);
    font-size: .6875rem;
    font-weight: 600;
}

.note-date {
    display: flex;
    align-items: center;
    gap: .4rem;
    height: 2.25rem;
    padding: 0 .75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #f2f5f4;
    color: #4d5653;
    cursor: pointer;
}

.note-date input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    color: #1f2624;
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
}

.note-form textarea {
    flex: 1;
    width: 100%;
    min-height: 7rem;
    padding: .6rem .75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #f2f5f4;
    font: inherit;
    font-size: .875rem;
    line-height: 1.5;
    resize: vertical;
}

/* ช่องวันที่และช่องข้อความไม่มีเส้นขอบ แบบเดียวกับช่องกรอกอื่น ตอนพิมพ์พื้นเป็นขาวมีวงเขียวจาง */
.note-date:focus-within,
.note-form textarea:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 0 .125em var(--green-ring);
}

.note-form.is-postit textarea {
    background: #fff8dc;
}

.note-form.is-postit textarea:focus {
    background: #fff8dc;
    box-shadow: 0 0 0 .125em rgba(217, 164, 0, .25);
}

.note-count {
    margin-top: -.35rem;
    color: #8a9390;
    font-size: .6875rem;
    text-align: right;
}

.note-buttons {
    display: flex;
    gap: .4rem;
}

.note-buttons .button {
    flex: 1;
    height: 2.25rem;
    border-radius: 999px;
    font-size: .875rem;
}

.note-buttons .button.is-green {
    font-weight: 600;
}

.note-buttons .button[data-note-delete] {
    flex: 0 0 auto;
}

/* การ์ดปฏิทิน Year Planner: ปฏิทินซ้าย กำหนดการ 7 วันนับจากวันที่เลือกทางขวา
   บนปฏิทิน ช่วง 7 วันระบายเขียวอ่อน วันที่มีกิจกรรมขีดเส้นใต้ */
.planner-calendar-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
}

/* ปฏิทินในการ์ด (Year Planner และเลือกช่วงวันจอง): ไม่มีกรอบ ปุ่มเลื่อนเดือนเป็นวงกลมเทา ช่องวันมุมโค้งเว้นระยะ */
#planner-calendar .air-datepicker,
.booking-dates .air-datepicker {
    --adp-border-color: transparent;
    --adp-border-color-inner: transparent;
    --adp-padding: 0;
    --adp-day-cell-height: 38px;
    --adp-cell-border-radius: 8px;
    --adp-cell-background-color-hover: #f2f7f5;
    --adp-color-current-date: var(--green);
    max-width: none;
    border: 0;
}

#planner-calendar .air-datepicker-nav,
.booking-dates .air-datepicker-nav {
    align-items: center;
    margin-bottom: .25rem;
}

#planner-calendar .air-datepicker-nav--title,
.booking-dates .air-datepicker-nav--title {
    color: #1f2624;
    font-size: .9375rem;
    font-weight: 700;
}

#planner-calendar .air-datepicker-nav--title i,
.booking-dates .air-datepicker-nav--title i {
    color: inherit;
}

#planner-calendar .air-datepicker-nav--action,
.booking-dates .air-datepicker-nav--action {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f2f5f4;
}

#planner-calendar .air-datepicker-body--day-names,
.booking-dates .air-datepicker-body--day-names {
    margin: 0 0 4px;
}

#planner-calendar .air-datepicker-body--day-name,
.booking-dates .air-datepicker-body--day-name {
    font-size: .6875rem;
}

#planner-calendar .air-datepicker-body--cells.-days-,
.booking-dates .air-datepicker-body--cells.-days- {
    gap: 2px;
}

#planner-calendar .air-datepicker-cell.-day-,
.booking-dates .air-datepicker-cell.-day- {
    font-size: .8125rem;
}

#planner-calendar .air-datepicker-cell.-current-,
.booking-dates .air-datepicker-cell.-current- {
    font-weight: 700;
}

.air-datepicker-cell.-day-.is-planner-range:not(.-selected-) {
    background: var(--green-light);
}

.air-datepicker-cell.-day-.has-planner {
    text-decoration: underline;
    text-decoration-color: var(--green);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ปุ่มใต้ปฏิทิน: 7 วันก่อน · วันนี้ · 7 วันถัดไป */
.planner-shift {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .35rem;
    margin-top: .6rem;
}

.planner-shift .button.is-small {
    gap: .2rem;
    border-radius: 999px;
    font-size: .75rem;
}

.planner-agenda {
    display: flex;
    flex-direction: column;
    min-height: 0;
    font-size: .875rem;
}

.planner-agenda-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.planner-agenda-head strong {
    font-size: 1.05rem;
}

.planner-agenda-head span {
    color: #4d5653;
    font-size: .75rem;
}

/* รายการยาวเลื่อนในกล่อง แถบเลื่อนบางสีเขียวอ่อน ขอบล่างจางลงเมื่อยังมีรายการต่อ */
.planner-agenda-list {
    max-height: 14rem;
    padding-right: .35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5rem), transparent);
}

.planner-agenda-list.is-end {
    -webkit-mask-image: none;
    mask-image: none;
}


.planner-agenda-day {
    display: flex;
    gap: .85rem;
    padding: .5rem 0;
    border-top: 1px solid #edf1ef;
}

.planner-agenda-date {
    flex: none;
    width: 2.75rem;
    text-align: center;
}

.planner-agenda-date small {
    display: block;
    color: #4d5653;
    font-size: .6875rem;
}

.planner-agenda-date strong {
    font-size: 1.35rem;
    line-height: 1.1;
}

.planner-agenda-date.is-today strong {
    color: var(--green);
}

.planner-agenda-items {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    min-width: 0;
}

.planner-agenda-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* จุดใช้สีตัวอักษรของคลาส week-ภาควิชา */
.planner-agenda-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.planner-agenda-item b {
    flex: none;
    width: 2.6rem;
    color: #4d5653;
    font-size: .75rem;
}

.planner-agenda-item span:last-child {
    min-width: 0;
    color: #1f2624;
}

.planner-agenda-empty {
    padding-top: .5rem;
    border-top: 1px solid #edf1ef;
    color: #4d5653;
}

/* จอคอม: คอลัมน์ปฏิทินกว้างคงที่ ไม่ยืดหดตามชื่อเดือน กำหนดการสูงเท่าปฏิทิน */
@media screen and (min-width: 1024px) {
    .planner-calendar-card {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 1.25rem;
        align-items: stretch;
    }

    /* กำหนดการไม่ขยายความสูงการ์ด (contain: size) สูงเท่าคอลัมน์ปฏิทิน รายการที่เกินเลื่อนดูในกล่อง */
    .planner-agenda {
        contain: size;
        padding-left: 1.25rem;
        border-left: 1px solid #edf1ef;
    }

    .planner-agenda-list {
        flex: 1;
        min-height: 0;
        max-height: none;
    }
}

.planner-line {
    display: block;
    text-align: left;
    line-height: 1.4;
}

/* แถบสัปดาห์ของปีการศึกษา จัดกลุ่มตามเดือน: จอคอมเห็นครบทุกสัปดาห์ ช่องเป็นจัตุรัสเท่ากันทุกช่อง ลูกศรเลื่อนทีละสัปดาห์
   จอเล็กแสดงทีละเดือน ลูกศรเปลี่ยนเดือน ตัวเลขกิจกรรมอยู่กึ่งกลางขอบบนของช่อง รายละเอียดแสดงด้วย tippy */
.academic-weeks {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.week-arrow {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--green);
    border-radius: 50%;
    color: var(--green);
    transition: background-color .15s, color .15s;
}

.week-arrow:hover {
    background: var(--green);
    color: #fff;
}

.week-arrow.is-month,
.week-month-title {
    display: none;
}

.week-arrow.is-disabled,
.week-arrow.is-disabled:hover {
    border-color: #dfe5e2;
    background: none;
    color: #c7cfcc;
}

.week-grid {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(var(--week-count, 47), minmax(0, 1fr));
    gap: .75rem 2px;
}

.week-month {
    margin-right: 4px;
    padding-bottom: .15rem;
    border-bottom: 2px solid #dfe5e2;
    color: #4d5653;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}

.week-month.is-active {
    border-bottom-color: var(--green);
    color: var(--green-dark);
    font-weight: 700;
}

.week-item {
    position: relative;
    min-width: 0;
}

.week-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border: 1px solid #dfe5e2;
    border-radius: 5px;
    background: #fff;
    color: #2b2f2e;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: background-color .15s, border-color .15s, color .15s;
}

.week-cell:hover {
    border-color: var(--green);
    background: #f2f7f5;
    color: var(--green-dark);
}

.week-cell.is-current {
    border: 2px solid #000;
    font-weight: 600;
}

.week-cell.is-selected {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
    font-weight: 600;
}

.week-cell.is-selected.is-current {
    border-color: #000;
}

.week-count {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: .95rem;
    height: .95rem;
    padding: 0 .2rem;
    border: 1px solid #fff;
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    font-size: .55rem;
    font-weight: 600;
    line-height: calc(.95rem - 2px);
    text-align: center;
    cursor: default;
}

/* จอเล็กกว่าจอคอม: แสดงทีละเดือน */
@media screen and (max-width: 1023px) {
    .academic-weeks {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .week-arrow.is-week,
    .week-month,
    .week-item:not(.is-active) {
        display: none;
    }

    .week-arrow.is-month {
        display: inline-flex;
        width: 2.75rem;
        height: 2.75rem;
    }

    .week-month-title {
        display: block;
        color: var(--green-dark);
    }

    /* มือถือแสดงทีละเดือน สัปดาห์ของเดือนอยู่กึ่งกลางไม่ว่าเดือนนั้นมีกี่สัปดาห์ */
    .week-grid {
        display: flex;
        flex: 0 0 100%;
        justify-content: center;
        gap: .5rem;
    }

    /* ช่องหดเท่ากันจนพอดีแถวเดียว กว้างสุด 72px */
    .week-item {
        flex: 1 1 0;
        max-width: 72px;
    }

    .week-cell {
        border-radius: 8px;
        font-size: .95rem;
    }

    .week-count {
        min-width: 1.15rem;
        height: 1.15rem;
        font-size: .65rem;
        line-height: calc(1.15rem - 2px);
    }
}

/* ธีม tippy พื้นขาว ให้จุดสีภาควิชาอ่านออก */
.tippy-box[data-theme~='room'] {
    border: 1px solid #dfe5e2;
    background: #fff;
    color: #2b2f2e;
    box-shadow: 0 6px 18px rgba(10, 10, 10, .12);
}

.tippy-box[data-theme~='room'] > .tippy-arrow {
    color: #fff;
}

.tippy-box[data-theme~='room'] .tippy-content {
    padding: .5rem .65rem;
}

/* สถานะ PC / VoIP: สีเดียวกับ has-background-success-light และ has-background-danger-light ของ Bulma */
.tippy-box[data-theme~='online'] {
    border-color: #c8eedb;
    background: #effaf5;
    color: #257953;
}

.tippy-box[data-theme~='online'] > .tippy-arrow {
    color: #effaf5;
}

.tippy-box[data-theme~='offline'] {
    border-color: #fbcdd8;
    background: #feecf0;
    color: #cc0f35;
}

.tippy-box[data-theme~='offline'] > .tippy-arrow {
    color: #feecf0;
}

.tippy-box .planner-line {
    font-size: .8rem;
}

/* ระหว่างโหลดสัปดาห์ใหม่ในหน้าเดิม ส่วนเดิมจางลงเล็กน้อยแทนการกระพริบทั้งหน้า */
.is-week-loading {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s;
}

/* ---------- ตารางจองห้อง ---------- */
/* ตารางเป็นการ์ดขาว ขอบบาง โค้งมนและเงาเท่าการ์ดด้านบน ไม่มีกรอบเทา เส้นขอบนอกของตารางใช้ขอบการ์ดแทน */
.schedule-scroll {
    padding: 0;
    border: 1px solid #dfe5e2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.schedule-scroll .schedule-grid {
    border: 0;
}

.schedule-grid tr > :first-child {
    border-left: 0;
}

.schedule-grid tr > :last-child {
    border-right: 0;
}

.schedule-grid thead tr:first-child > * {
    border-top: 0;
}

.schedule-grid tbody tr:last-child > * {
    border-bottom: 0;
}

/* แถบสัปดาห์และตารางกว้างสุด 1760px ระยะขอบข้างละ 1rem (การ์ดด้านบนและฟอร์มใช้ container ปกติของ Bulma) */
/* selector ต้องหนักกว่ากฎ .container:not(.is-max-desktop):not(.is-max-widescreen) ของ Bulma ที่จอกว้าง */
.container.is-schedule:not(.is-max-desktop):not(.is-max-widescreen) {
    max-width: 1760px;
}

.schedule-week-section {
    padding: 0 1rem;
}

.schedule-grid-section {
    padding: 0 1rem 1.5rem;
}

/* เต็มความกว้างกรอบ ทุกช่องเวลากว้างเท่ากัน จอแคบกว่าความกว้างขั้นต่ำเลื่อนดูในกรอบ */
.schedule-grid {
    width: 100%;
    min-width: calc(6.5rem + var(--slots, 24) * 3.5rem);
    font-size: .8rem;
    table-layout: fixed;
}

.grid-corner-col {
    width: 6.5rem;
}

/* ทุกช่องจัดกลาง ต้องมี :not([align]) ให้หนักกว่ากฎ .table th:not([align]) ของ Bulma ที่ให้ชิดซ้าย */
.schedule-grid th:not([align]),
.schedule-grid td:not([align]) {
    text-align: center;
}

.schedule-grid th,
.schedule-grid td {
    padding: .3rem .25rem;
    vertical-align: middle;
    border-color: var(--room-border);
}

.schedule-grid thead th {
    font-weight: 600;
}

.grid-corner {
    width: 6.5rem;
    background: #fff;
    font-size: .65rem;
}

/* แถวชื่อห้องสูงเท่ากันทุกหน้าและทั้งห้องเรียน/ห้องสมุด (ชื่อ 2 บรรทัด หรือชื่อกับคำอธิบายใต้ชื่อ) จอ dashboard คงเดิม */
.schedule-grid-section .schedule-grid .room-head {
    height: 3.6rem;
}

/* มือถือคอลัมน์แคบ ชื่อห้องสมุดกับคำอธิบายตัดหลายบรรทัด ใช้ความสูงที่พอทั้งห้องเรียนและห้องสมุด */
@media screen and (max-width: 768px) {
    .schedule-grid-section .schedule-grid .room-head {
        height: 4.9rem;
    }
}

.room-head.is-floor2 {
    background: var(--green-light);
}

.room-head.is-floor3 {
    background: #feecf0;
}

.room-head.is-other {
    background: #fffaeb;
}

/* คำอธิบายใต้ชื่อห้อง (ห้องสมุด): เขียวเทาโทนเดียวกับหัวคอลัมน์ อ่านง่ายบนพื้นเขียวอ่อน */
.room-note {
    display: block;
    color: #4f7069;
    font-weight: 400;
    font-size: .62rem;
}

/* หัวแถว BANDWIDTH: ไอคอน speedtest อยู่เหนือคำ */
.bandwidth-head .ti {
    display: block;
    margin: 0 auto .15rem;
    font-size: 1.35rem;
}

.grid-status td {
    background: #fff;
    font-size: .62rem;
}

.status-line {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-icons {
    display: inline-flex;
    gap: .25rem;
    margin-top: .15rem;
}

/* ไอคอนสถานะในแถว BANDWIDTH: เส้นหนา (ti-thick) ไม่มีพื้น สีเทาเมื่อออฟไลน์ สีเขียวเมื่อออนไลน์ ปุ่มกล้องสีเขียวเข้ม */
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: #a3aba8;
    font-size: .85rem;
    line-height: 1;
}

.status-pill.is-on {
    color: #18a058;
}

.status-pill img {
    width: 14px;
    height: 14px;
}

.status-pill.is-action {
    color: var(--green);
    cursor: pointer;
}

.status-pill.is-action:hover {
    color: var(--green-dark);
}

.status-icons img {
    vertical-align: middle;
}

.room-status.cctv {
    background: #ededed;
}

.day-head {
    position: relative;
    background: #fff;
    font-weight: 500;
}

.day-name,
.day-date {
    display: block;
}

.day-notes {
    display: inline-flex;
    gap: .3rem;
    font-size: .85rem;
}

.is-today .day-head {
    background: var(--room-today);
    color: #fff;
}

/* พื้นแถววันนี้และวันที่ค้นหาใช้กับช่องว่างเท่านั้น ช่องที่มีการจองคงสีของภาควิชาไว้ */
.is-today td:not(.booking-cell) {
    background-color: var(--room-today-row);
}

.is-found .day-head {
    background: var(--room-found);
    color: #fff;
}

.is-found td:not(.booking-cell) {
    background-color: var(--room-found-row);
}

/* ช่องที่มีการจอง: ตัวเล็กลง จัดกลางชิดบน ตัวอักษรทุกตัวใช้สีของภาควิชา (strong ของ Bulma มีสีของตัวเอง) */
.schedule-grid td.booking-cell {
    position: relative;
    /* ระยะขอบในช่องน้อยที่สุด ให้มีที่แสดงข้อมูลมากขึ้น */
    padding: 2px 1px;
    font-size: .7rem;
    line-height: 1.3;
    text-align: center;
    vertical-align: top;
}

/* ข้อความในหน้าต่างชวนทำแบบประเมิน (schedule/index.js) จัดกึ่งกลางทุกบรรทัด
   ดาวเส้นสีเหลืองทอง 5 ดวงคั่นระหว่างคำเชิญกับชื่อแบบประเมิน */
.survey-message {
    display: grid;
    justify-items: center;
    gap: .55rem;
    text-align: center;
}

.survey-stars {
    display: flex;
    gap: .3rem;
    color: #f2b705;
    font-size: 1.35rem;
}

/* เวลาที่โหลดตารางล่าสุด ใต้ตารางชิดขวา (หน้าจองและหน้าดูอย่างเดียวโหลดตารางใหม่เองทุก 5 นาที) */
.grid-updated {
    margin-top: .4rem;
    color: #6b7471;
    font-size: .7rem;
    text-align: right;
}

/* หน้าดูอย่างเดียว ใต้ตาราง (บนพื้นหน้า ไม่มีการ์ด): คำอธิบายสีภาควิชาที่มีการจองในสัปดาห์นี้ เรียงเป็นคอลัมน์
   ป้ายรหัสกว้างเท่ากัน ชื่อจึงเริ่มตรงกันทุกแถว (จอคอมตามความกว้าง มือถือ 2 คอลัมน์) เวลาอัปเดตชิดขวาใต้เส้นคั่น */
.grid-foot {
    display: grid;
    gap: .5rem;
    margin-top: .7rem;
    padding: 0 .8rem;
}

.grid-foot .grid-updated {
    margin: 0;
}

.grid-foot:has(.dept-legend) .grid-updated {
    padding-top: .45rem;
    border-top: 1px solid #d9dfdd;
}

.dept-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .4rem .9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dept-legend li {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    color: #363636;
    font-size: .75rem;
}

/* ชื่อยาวเกินช่อง (มือถือ) ตัดด้วย … ชี้ดูชื่อเต็มได้ */
.dept-legend-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* กว้างพอรหัสที่ยาวที่สุด (Postgrad, Research, Tutoring) ทุกป้ายกว้างเท่ากัน ชื่อจึงยังตรงกันทุกแถว */
.dept-legend-code {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 4.1rem;
    height: 1.2rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
}

@media screen and (max-width: 768px) {
    .dept-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .4rem .6rem;
    }
}

/* หน้าจองและหน้าดูอย่างเดียว: ช่องการจองสูงขั้นต่ำ 4.25rem ข้อมูลชิดบน แถวแรกของทุกช่องจึงตรงกัน
   หน้าจองสัญลักษณ์กำลังใช้งาน (live-dot) อยู่หน้าปุ่มลบ / แก้ไขในแถวแรก
   หน้าดูอย่างเดียว (room-public-grid) มีแค่ 2 บรรทัด ใช้แถวเตี้ยกว่า live-dot อยู่หน้าชื่อภาควิชา
   (จอ dashboard ไม่อยู่ใน schedule-grid-section จึงคงแบบเดิมให้พอดีจอ) */
.schedule-grid-section .schedule-grid td.booking-cell {
    height: 4.25rem;
    padding: 6px 1px;
    vertical-align: top;
}

/* ทุกแถววันสูงขั้นต่ำเท่าช่องการจอง วันที่ไม่มีการจองจึงไม่เตี้ยกว่าวันอื่น */
.schedule-grid-section .schedule-grid tbody tr {
    height: 4.25rem;
}

.room-public-grid .schedule-grid tbody tr,
.room-public-grid .schedule-grid td.booking-cell {
    height: 3rem;
}

.room-public-grid .schedule-grid td.booking-cell {
    vertical-align: middle;
}

.booking-cell strong {
    color: inherit;
}

.schedule-grid td.booking-cell {
    font-weight: 500;
}

/* แถว 1 ปุ่มลบ แก้ไข รูปอาจารย์ / แถว 2 ภาควิชา กลุ่ม / แถว 3 วัตถุประสงค์ / แถว 4 ไอคอนความต้องการ */
/* แถวแรก (กำลังใช้งาน ลบ แก้ไข) อยู่บรรทัดเดียวเสมอ ช่องแคบใช้ระยะห่างน้อยลงแทนการขึ้นบรรทัดใหม่ */
.booking-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-height: 1.15rem;
}

.booking-actions > * {
    flex: none;
}
.booking-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* แถวภาควิชาและวัตถุประสงค์ไม่ตัดเป็น … แต่ย่อตัวอักษรจนพอดีช่อง (fitBookingLines ใน common.js) */
.booking-line.is-fit {
    text-overflow: clip;
}

.booking-line.is-wrapped {
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}

.booking + .booking {
    margin-top: .3rem;
    padding-top: .3rem;
    border-top: 1px dashed rgba(0, 0, 0, .25);
}

.booking.is-stacked {
    border-radius: 4px;
    padding: .2rem;
}

/* ปุ่มในแถวแรกไม่มี padding ระยะห่างระหว่างกราฟชีพจร ลบ และแก้ไข จึงเท่ากันตาม gap */
/* ปุ่มลบ / แก้ไข: ขนาดและเส้นหนา (icons.css) เท่าไอคอนในช่องการจอง ช่องไฟเท่ากัน */
.booking-actions .link-button {
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-size: .9rem;
    line-height: 1;
}

.booking-actions .ti {
    vertical-align: 0;
}

/* มือถือช่องแคบ: ไอคอนลบ / แก้ไข เล็กลงให้อยู่ในช่อง */
@media screen and (max-width: 768px) {
    .booking-actions .link-button {
        font-size: .8rem;
    }
}

/* ไอคอนความต้องการ / ใบยืม / รายละเอียด / เอกสาร: ทุกตัวเป็นกล่องแบบเดียวกัน (span, ปุ่ม, ลิงก์ไม่มีระยะขอบของตัวเอง)
   ช่องไฟระหว่างไอคอนเท่ากันด้วย gap ไอคอนเส้นหนา (icons.css) และใหญ่ขึ้นให้เห็นชัด */
.booking-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .15rem .2rem;
    margin-top: .15rem;
    font-size: .9rem;
}

.booking-icons > * {
    display: inline-flex;
    align-items: center;
    gap: .05rem;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.booking-icons .ti {
    vertical-align: 0;
}

/* จำนวน (Notebook, กล้องจุลทรรศน์) เป็นตัวเลขยกเล็กที่มุมขวาบนของไอคอน */
.booking-icons .need-count {
    align-self: flex-start;
    margin: -.2em 0 0 .05em;
    font-size: .62em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.booking-icons a {
    color: inherit;
}

.ipad-tag.tag {
    position: absolute;
    bottom: 30%;
    left: 0;
    z-index: 2;
    height: 1.4em;
    padding: 0 .45em;
    transform: translate(-50%, 50%);
    font-size: .65rem;
    box-shadow: 0 0 0 2px #fff;
}

/* กำลังใช้งาน: กราฟชีพจรสีแดงในวงกลมขาวหน้าปุ่มลบ เส้นวิ่งเหมือนจอวัดชีพจร (วาดเส้นแล้วลบจากต้นทาง วนซ้ำ)
   วิ่งเสมอแม้เครื่องตั้งค่าลดการเคลื่อนไหว (prefers-reduced-motion) เพราะเป็นสัญญาณสถานะ
   ป้าย iPad อยู่บนเส้นขอบซ้ายของช่อง สูงจากขอบล่าง 30% */
/* สัญลักษณ์กำลังใช้งาน: หน้าดูอย่างเดียวอยู่หน้าชื่อภาควิชาในบรรทัดเดียวกัน (หน้าจองและจอ dashboard อยู่ในแถวปุ่ม) */
.booking-line > .live-dot {
    margin-right: .25rem;
    vertical-align: -.2em;
}

.live-dot {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    color: #e0002a;
}

.live-dot svg {
    width: .8rem;
    height: .8rem;
    overflow: visible;
}

.live-dot path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100 100;
    animation: heartbeat-trace 1.6s linear infinite;
}

@keyframes heartbeat-trace {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: -100;
    }
}

/* กล่องข้อความที่แสดงเมื่อชี้หรือแตะ ใช้กับอาจารย์ผู้สอน, post-it และ Year Planner */
.popover-host {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.popover-body {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    z-index: 30;
    display: none;
    width: max-content;
    max-width: 320px;
    padding: .5rem .75rem;
    border-radius: 6px;
    background: #fff;
    color: #363636;
    box-shadow: 0 4px 14px rgba(10, 10, 10, .2);
    font-size: .8rem;
    font-weight: 400;
    text-align: left;
    transform: translateX(-50%);
    white-space: normal;
}

.popover-host:hover .popover-body,
.popover-host:focus-within .popover-body {
    display: block;
}

.day-note {
    cursor: pointer;
}

/* หัวแถววันนี้ (เขียว) และวันที่ค้นหา (น้ำเงิน): ไอคอน Post-it / Year Planner เป็นสีขาวให้มองเห็นบนพื้นสี
   (!important ชนะ has-text-warning / has-text-green ของ Bulma ที่ใช้ !important) */
:is(.is-today, .is-found) .day-note .ti {
    color: #fff !important;
}

.tippy-box[data-theme~='postit'] {
    background: #fff9c4;
}

.tippy-box[data-theme~='postit'] > .tippy-arrow {
    color: #fff9c4;
}

/* การ์ดอาจารย์ใน tippy: พื้นเขียว รูปชิดขอบซ้าย โค้งมนเท่าหน้าต่าง มีลูกศรชี้ช่อง
   กล่องนอกโปร่งใส (ไม่ตัดลูกศร) ส่วนเนื้อหาเป็นพื้นเขียวและตัดรูปตามมุมโค้ง ใต้มุมรูปจึงไม่มีสีอื่นผสม */
.tippy-box[data-theme~='teacher'] {
    border-radius: 16px;
    background: transparent;
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

/* ตัดมุมด้วย clip-path ด้วย เพราะ overflow + border-radius ระหว่าง tippy เคลื่อนไหว (transform) ใน Chrome ปล่อยมุมรูปล้นเป็นมุมเหลี่ยม
   พื้นเขียวอยู่ที่ส่วนข้อความเท่านั้น ใต้รูปไม่มีสีเขียว ขอบโค้งของรูปจึงไม่มีเส้นเขียวโผล่ */
.tippy-box[data-theme~='teacher'] .tippy-content {
    overflow: hidden;
    padding: 0;
    border-radius: 16px;
    background: transparent;
    clip-path: inset(0 round 16px);
}

.tippy-box[data-theme~='teacher'] > .tippy-arrow {
    color: var(--green);
}

.teacher-card {
    display: flex;
    align-items: stretch;
    min-height: 112px;
}

.teacher-card img {
    flex: none;
    width: 84px;
    object-fit: cover;
    object-position: top;
}

.teacher-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    padding: .75rem 1rem;
    background: var(--green);
    text-align: left;
}

.teacher-card-body strong {
    color: #fff;
    font-size: .95rem;
}

.teacher-card-body small {
    color: rgba(255, 255, 255, .85);
    font-size: .78rem;
}

.teacher-card-body em {
    color: #f6c453;
    font-size: .78rem;
    font-style: normal;
}

/* ---------- ฟอร์มจองห้อง ---------- */
/* นาฬิกา: แต่ละหลักกว้างคงที่ ไม่ขยับเมื่อตัวเลขเปลี่ยน */
.clock {
    display: flex;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.clock span {
    display: inline-block;
    width: .5em;
    text-align: center;
}

/* ฟอนต์วาง : ชิดเส้นฐาน (ต่ำกว่ากึ่งกลางตัวเลข) ยกขึ้นให้อยู่กึ่งกลางความสูงตัวเลข ใช้กับนาฬิกาทุกหน้า */
.clock .clock-sep {
    position: relative;
    top: -.11em;
    width: .25em;
}

/* ป้ายช่วงวันจอง: กว้างเต็มการ์ด สูงคงที่ ข้อความยาวตัดท้าย ปฏิทินด้านล่างจึงไม่ขยับเมื่อเลือกวัน */
.date-range-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    height: 2rem;
    margin-bottom: .75rem;
    padding: 0 .75rem;
    border-radius: 999px;
    background: var(--green-light);
    color: var(--green-dark);
    font-size: .8125rem;
    font-weight: 500;
}

.date-range-label span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.date-range-label.is-picked {
    background: var(--green);
    color: #fff;
}

.date-range-label.is-over {
    background: #feecf0;
    color: #cc0f35;
}

/* ปุ่มสลับโหมดเลือกวัน (วันเดียว / หลายวัน) หน้าตาเดียวกับปุ่มสลับ Planner / Post-it */
.date-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    margin-bottom: .75rem;
    padding: 3px;
    border-radius: 999px;
    background: #f2f5f4;
}

.date-mode button {
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #4d5653;
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
}

.date-mode button.is-active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    color: var(--green-dark);
    font-weight: 600;
}

/* ปฏิทินเลือกช่วงวันจองเต็มความกว้างการ์ด เหมือนปฏิทิน Year Planner */
.booking-dates {
    text-align: left;
}

/* ปฏิทิน Year Planner และปฏิทินเลือกวันจอง/คัดลอกถูกสร้างด้วย JavaScript หลังหน้าแสดงแล้ว จองความสูงไว้ก่อน การ์ดจึงไม่ยืดออกตอนเปิดหน้า
   ทุกปฏิทินจองเท่าเดือน 6 สัปดาห์ (296px) สูงคงที่ทุกเดือน เปลี่ยนเดือนแล้วการ์ดไม่ยืดหดและไม่ดันส่วนอื่น */
#planner-calendar,
.booking-dates {
    min-height: 296px;
}

/* ---------- ตัวเลือกในฟอร์มจองและหน้าแก้ไข: radio / checkbox เป็นแคปซูลพื้นเทาอมเขียวแบบเดียวกับช่องกรอก
   เลือกแล้วพื้นเขียวอ่อนตัวหนา วงกลม (radio เลือกได้ข้อเดียว) หรือสี่เหลี่ยมมุมมน (checkbox เลือกได้หลายข้อ) นำหน้า ---------- */
.schedule-form :is(label.radio, label.checkbox) {
    position: relative;
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .14rem .6rem .14rem .45rem;
    border-radius: 999px;
    background: #f2f5f4;
    color: #4d5653;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.schedule-form :is(label.radio, label.checkbox):hover {
    background: #e7eeeb;
    color: #1f2624;
}

.schedule-form :is(label.radio, label.checkbox) > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.schedule-form :is(label.radio, label.checkbox)::before {
    content: '';
    flex: none;
    box-sizing: border-box;
    width: .85rem;
    height: .85rem;
    border: 1.5px solid #aab5b1;
    border-radius: 50%;
    background: #fff;
}

.schedule-form label.checkbox::before {
    border-radius: 4px;
}

.schedule-form :is(label.radio, label.checkbox):has(> input:checked) {
    background: var(--green-light);
    color: var(--green-dark);
    font-weight: 600;
}

.schedule-form label.radio:has(> input:checked)::before {
    border: 3.5px solid var(--green);
}

.schedule-form label.checkbox:has(> input:checked)::before {
    border-color: var(--green);
    background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10-10'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.schedule-form :is(label.radio, label.checkbox):has(> input:focus-visible) {
    box-shadow: 0 0 0 .125em var(--green-ring);
}

.schedule-form :is(label.radio, label.checkbox):has(> input:disabled) {
    opacity: .5;
    cursor: default;
}

/* กลุ่มผู้เรียน / วัตถุประสงค์: แคปซูลกว้างตามข้อความไหลต่อกันจนเต็มแถว ไม่มีวงกลมนำหน้า (เลือกแล้วเป็นพื้นเขียวเข้ม)
   หัวข้อสีเข้มขนาดเดียวกับป้าย Notebook / กล้องจุลทรรศน์ (label is-small ของ Bulma) */
.choice-title {
    margin: .7rem 0 .3rem;
    color: #363636;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .02em;
}

.choice-title .ti {
    margin-right: .3rem;
}

/* หัวข้อแรกของการ์ด (วัตถุประสงค์ในหน้าแก้ไข) ไม่เว้นระยะด้านบน */
.card-content > .choice-title:first-child {
    margin-top: 0;
}


/* แคปซูลกว้างเท่ากันเรียงเป็นตาราง ข้อความกลางช่อง ขนาดช่องคงที่ เลือกแล้วตัวหนาก็ไม่ดันช่องอื่น */
.choice-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    gap: 3px;
}

.schedule-form .choice-wrap label.radio {
    justify-content: center;
    min-width: 0;
    min-height: 1.5rem;
    padding: .08rem .35rem;
    font-size: .6875rem !important;
    white-space: nowrap;
}

/* ช่วงเวลา (เช้า / บ่าย / ทั้งวัน) และมีใบยืมหุ่นฯ หรือไม่ ใช้แคปซูลแบบเดียวกัน ข้อความอยู่กลางช่อง */
.schedule-form .time-choice label.radio,
.schedule-form .asset-choice label.radio {
    justify-content: center;
    padding: .14rem .6rem;
}

/* ปุ่มช่วงเวลาและใบยืมหุ่นฯ / ไม่มี สูงขึ้นให้กดง่าย ใกล้เคียงปุ่มสลับวันเดียว / หลายวัน */
.schedule-form .time-choice label.radio,
.schedule-form .asset-choice label.radio {
    min-height: 2rem;
    font-size: .8125rem;
}

.schedule-form .choice-wrap label.radio::before,
.schedule-form .time-choice label.radio::before,
.schedule-form .asset-choice label.radio::before {
    display: none;
}

/* ตัวที่เลือกเป็นพื้นเขียวตัวขาว สีเดียวกับปุ่มความต้องการที่เลือก */
.schedule-form .time-choice label.radio:has(> input:checked),
.schedule-form .asset-choice label.radio:has(> input:checked),
.schedule-form .choice-wrap label.radio:has(> input:checked) {
    background: var(--green);
    color: #fff;
}

/* ความกว้างคอลัมน์ฟอร์มจองบนจอกว้าง: การ์ดตัวเลือก (กลุ่มผู้เรียน/วัตถุประสงค์) แคบลง การ์ดความต้องการกว้างพอให้ชื่อบนปุ่มไม่ตัดคำ
   ปฏิทินและการ์ดรายละเอียดแบ่งพื้นที่ที่เหลือเท่ากัน */
@media screen and (min-width: 1024px) {
    .schedule-form .column.form-col-choices {
        flex: none;
        width: 24%;
    }

    .schedule-form .column.form-col-needs {
        flex: none;
        width: 21%;
    }

    /* หน้าแก้ไข: ฟอร์มแก้ไข 3 การ์ดรวมกัน 72.5% และการ์ดคัดลอกวันจอง 27.5% (เท่าการ์ดปฏิทินหน้าจอง)
       การ์ดภายในฟอร์มแก้ไขกว้างใกล้เคียงการ์ดตัวเลือก (24%) และความต้องการ (21%) ของหน้าจอง */
    /* ฟอร์มแก้ไขยืดเต็มความสูงแถว แถวการ์ดข้างในยืดตาม การ์ดทั้งสามจึงสูงเท่าการ์ดคัดลอกวันจองเสมอ
       ไม่ว่าการ์ดไหนสูงที่สุด (เช่น ปิด "รายละเอียด" แล้วการ์ดคัดลอกสูงกว่า) */
    .schedule-form .column.edit-main {
        display: flex;
        flex: none;
        flex-direction: column;
        width: 72.5%;
    }

    .schedule-form .column.edit-main > .columns {
        flex: 1;
    }

    .schedule-form .column.edit-col-main {
        flex: none;
        width: 33%;
    }

    .schedule-form .column.edit-col-needs {
        flex: none;
        width: 29%;
    }
}

/* หน้าแก้ไข: ปุ่มย้อนกลับ / ยกเลิก และอัปเดตข้อมูลอยู่ชิดล่างของการ์ดเสมอ แม้การ์ดยืดสูงกว่าเนื้อหา (ปิดรายละเอียด) */
.schedule-form .card:has(.edit-actions) {
    display: flex;
    flex-direction: column;
}

.schedule-form .card:has(.edit-actions) > .card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.edit-actions {
    margin-top: auto;
    padding-top: 1rem;
}

/* การ์ดคัดลอกวันจองสูงเต็มแถวเหมือนการ์ดอื่น */
#copy-form {
    height: 100%;
}

/* การ์ดคัดลอกวันจอง: พื้นแดงอ่อน (has-background-danger-light) เปลี่ยนสีหลักในการ์ดจากเขียวเป็นแดง
   ทั้งป้ายช่วงวัน ปุ่มสลับ ปฏิทิน ช่องสถานที่ (รวมรายการตัวเลือกที่ common.js ติดคลาส copy-card) และช่วงเวลา
   ช่องที่เคยเป็นพื้นเทาเปลี่ยนเป็นพื้นขาวให้เด่นบนพื้นแดงอ่อน */
.copy-card {
    --green: #e0335a;
    --green-dark: #cc0f35;
    --green-light: #fbd3dc;
    --green-ring: rgba(224, 51, 90, .25);
}

.copy-card .air-datepicker {
    --thai-date-green: #e0335a;
    --thai-date-green-dark: #cc0f35;
    --thai-date-green-rgb: 224, 51, 90;
    --adp-background-color: transparent;
    --adp-cell-background-color-hover: #fff;
    --adp-background-color-selected-other-month: #f29bae;
    --adp-background-color-selected-other-month-focused: #ea7590;
    background: transparent;
}

.copy-card .date-range-label:not(.is-picked):not(.is-over),
.copy-card .air-datepicker-nav--action,
.copy-card .ts-wrapper.single .ts-control,
.copy-card .select select,
.copy-card .time-choice label.radio:not(:has(> input:checked)) {
    background: #fff;
}

.copy-card .date-mode {
    background: #fbd3dc;
}

/* scrollbar ในการ์ดและรายการตัวเลือกสถานที่เป็นสีชมพู/แดงแทนเขียว */
.copy-card *::-webkit-scrollbar-thumb {
    background: #f29bae;
}

.copy-card *::-webkit-scrollbar-thumb:hover {
    background: #e0335a;
}

@supports not selector(::-webkit-scrollbar) {
    .copy-card * {
        scrollbar-color: #f29bae transparent;
    }
}

.copy-card .time-choice label.radio:not(:has(> input:checked)):hover {
    background: #fff5f7;
}
/* ความต้องการแบบมี/ไม่มี: ปุ่มสี่เหลี่ยมมีไอคอน เลือกได้หลายข้อ เลือกแล้วเป็นพื้นเขียวตัวขาว */
.need-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.need-tile {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-height: 3.6rem;
    padding: .45rem .25rem .35rem;
    border-radius: 12px;
    background: #f2f5f4;
    color: #4d5653;
    font-size: .6875rem;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.need-tile:hover {
    background: #e7eeeb;
}

.need-tile input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.need-tile .ti {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--green);
}

.need-tile:has(input:checked) {
    background: var(--green);
    color: #fff;
    font-weight: 600;
}

.need-tile:has(input:checked) .ti {
    color: #fff;
}

.need-tile:has(input:focus-visible) {
    box-shadow: 0 0 0 .125em var(--green-ring);
}

/* ช่วงเวลา เช้า / บ่าย / ทั้งวัน เต็มความกว้างสามช่องเท่ากัน */
.time-choice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    margin-top: .4rem;
}

/* สวิตช์เปิดช่อง รายละเอียด / เอกสารประกอบการสอน / อาจารย์ผู้สอน สูงเท่าปุ่มช่วงเวลา */
.schedule-form .card-content > label.checkbox,
.teacher-fields > label.checkbox {
    min-height: 2rem;
    margin-bottom: 4px !important;
    padding-left: .6rem;
    font-size: .8125rem !important;
}

/* มีใบยืมหุ่นฯ/ครุภัณฑ์หรือไม่: สองตัวเลือกในแถวเดียว */
.asset-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

/* ---------- กล่องยืม iPad: หัวกล่องบอกจำนวนว่าง ปุ่ม - จำนวน + และประเภทการใช้ (แสดงเมื่อยืม) ---------- */
.ipad-box {
    display: grid;
    gap: .4rem;
    margin-top: .75rem;
    padding: .55rem .65rem;
    border-radius: 14px;
    background: #f7f9f8;
    transition: opacity .2s;
}

.ipad-box.is-disabled {
    opacity: .55;
}

.ipad-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.ipad-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
}

.ipad-label .ti {
    color: var(--green);
}

.ipad-free {
    color: #5d6b67;
    font-size: .8125rem;
}

.ipad-free strong {
    color: var(--green-dark);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.ipad-stepper {
    display: grid;
    grid-template-columns: 2.25rem 1fr 2.25rem;
    align-items: center;
    height: 2.15rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.ipad-stepper button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--green);
    font-size: 1.1rem;
    cursor: pointer;
}

.ipad-stepper button:hover:not(:disabled) {
    background: var(--green-light);
}

.ipad-stepper button:disabled {
    color: #b9c2bf;
    cursor: default;
}

.ipad-count {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .3rem;
    color: #5d6b67;
    font-size: .8125rem;
}

.ipad-count input {
    width: 2.2rem;
    padding: 0;
    border: 0;
    background: none;
    color: #1f2624;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    -moz-appearance: textfield;
    appearance: textfield;
}

.ipad-count input::-webkit-inner-spin-button,
.ipad-count input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.ipad-count input:focus {
    outline: 0;
}

/* ประเภทการใช้ iPad เป็นปุ่มสลับ หน้าตาเดียวกับปุ่มวันเดียว / หลายวัน */
.ipad-exam {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border-radius: 999px;
    background: #e9eeec;
}

.ipad-exam label {
    position: relative;
    cursor: pointer;
}

.ipad-exam input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ipad-exam span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.65rem;
    border-radius: 999px;
    color: #4d5653;
    font-size: .8125rem;
}

.ipad-exam input:checked + span {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    color: var(--green-dark);
    font-weight: 600;
}

.ipad-exam input:focus-visible + span {
    box-shadow: 0 0 0 .125em var(--green-ring);
}

.ipad-note {
    color: #8a6d00;
    font-size: .75rem;
    text-align: center;
}

.sync-option {
    display: flex !important;
    align-items: center;
    gap: .35rem;
    margin-bottom: .25rem;
}

/* ---------- หน้าต่าง ---------- */
/* ภาพจากกล้องเต็มความกว้างหน้าต่าง ไม่มีขอบ ข้อความโหลดหรือแจ้งเตือนยังมีระยะขอบปกติ */
.sheet-body.camera-image {
    padding: 0;
}

.camera-image img {
    display: block;
    width: 100%;
    height: auto;
}

.camera-image > :not(img) {
    margin: 1.1rem 1.5rem;
}

.telegram-steps img {
    display: block;
    max-width: 300px;
    margin: .5rem auto 1rem;
}

.store-qr img {
    width: 180px;
    margin: .5rem auto;
}

/* ---------- หน้าจัดการ (อาจารย์, ประชาสัมพันธ์): หัวข้อหน้า แล้วการ์ดขาวบนแถบพื้นหลังแบบเดียวกับฟอร์มจอง ---------- */
/* พื้นขาวเฉพาะแถบหัวข้อหน้า (สูงตามหัวข้อจริงทุกขนาดจอ) เนื้อหาทั้งหมดอยู่บนพื้นเทา
   ส่วนที่ไม่มีพื้นการ์ดจึงอยู่บนพื้นสีเดียวกันทั้งหมด */
.schedule-form.app-page {
    padding-top: 2rem;
    overflow-x: clip;
    background: #ededed;
    isolation: isolate;
}

.page-head {
    margin-bottom: 1.25rem;
}

.app-page .page-head {
    position: relative;
    padding-bottom: 1.25rem;
}

.app-page .page-head::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -2rem;
    right: -100vw;
    bottom: 0;
    left: -100vw;
    background: #fff;
}

/* การ์ดในหน้าจัดการสูงตามเนื้อหา (ไม่ยืดเท่าการ์ดข้างๆ แบบฟอร์มจอง) */
.schedule-form.app-page .card {
    height: auto;
}

/* ส่วนด้านซ้ายของหน้าอาจารย์ / ประชาสัมพันธ์: โครงเดิมแต่ไม่มีพื้นการ์ด วางบนพื้นหลังหน้าโดยตรง
   ช่องกรอกเป็นพื้นขาวให้แยกจากพื้นหลังเทา */
.schedule-form .card.is-plain {
    overflow: visible;
    background: none;
    box-shadow: none;
}

.schedule-form .card.is-plain > .card-content {
    padding-right: 0;
    padding-left: 0;
}

.card.is-plain :is(.input, .textarea, .select select, .ts-wrapper.single .ts-control, .file-cta, .file-name) {
    background-color: #fff;
}

.card.is-plain .ts-wrapper.disabled .ts-control {
    background-color: #f5f5f5;
}

.card.is-plain .file-label:hover .file-cta {
    background-color: var(--green-light);
}

/* ตารางบนพื้นหลังหน้า (หน้าผู้ใช้): ตารางโปร่ง ป้ายภาควิชาพื้นขาว แถวที่ชี้หรือกำลังแก้ไขเป็นสีอ่อน */
.card.is-plain .table {
    background: transparent;
}

.card.is-plain .table td,
.card.is-plain .table th {
    border-color: #dcdfde;
}

.card.is-plain .table.is-hoverable tbody tr:not(.is-selected):hover {
    background-color: rgba(255, 255, 255, .6);
}

.card.is-plain .table .tag:not(.is-dark):not(.is-light) {
    background-color: #fff;
}

/* ปุ่มเลือกไฟล์และชื่อไฟล์ไม่มีเส้นขอบ แบบเดียวกับช่องกรอก */
.file-cta,
.file-name,
.file-label:hover .file-cta {
    border-color: transparent;
    background-color: #f2f5f4;
}

.file-label:hover .file-cta {
    background-color: #e7eeeb;
}

.page-head h1 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--green-dark);
    font-size: 1.5rem;
    font-weight: 700;
}

.page-head p {
    margin-top: .25rem;
    color: #5d6b67;
    font-size: .875rem;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1rem;
}

.empty-note {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 1.5rem 1rem;
    border-radius: 14px;
    background: #f7f9f8;
    color: #6b7672;
    font-size: .875rem;
}

.file.is-fullwidth .file-label,
.file.is-fullwidth .file-cta {
    width: 100%;
}

.file.is-fullwidth .file-cta {
    justify-content: center;
}

.file.has-name.is-fullwidth .file-cta {
    flex: none;
    width: auto;
}

.file.has-name.is-fullwidth .file-name {
    flex: 1;
    max-width: none;
}

/* อาจารย์: รูปแนวตั้งด้านซ้าย ช่องกรอกด้านขวา (มือถือเรียงลงมา) */
.teacher-editor {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.teacher-photo {
    display: grid;
    gap: .5rem;
}

.teacher-preview {
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #f2f5f4;
}

.teacher-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    object-position: top center;
}

/* ประชาสัมพันธ์: ตัวอย่างโปสเตอร์ด้านซ้ายของฟอร์ม รายการเป็นแถวมีรูปย่อ */
.poster-editor {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.poster-preview {
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #f2f5f4;
}

.poster-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.414;
    object-fit: cover;
}

.information-list {
    display: grid;
    gap: .5rem;
}

.information-item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: center;
    padding: .6rem;
    border-radius: 16px;
    background: #f7f9f8;
}

.information-item.is-expired {
    opacity: .6;
}

.poster-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.414;
    object-fit: cover;
    border-radius: 10px;
    background: #e9eeec;
}

.information-body {
    display: grid;
    gap: .25rem;
    min-width: 0;
}

.information-title {
    font-weight: 600;
    line-height: 1.35;
}

.information-link {
    overflow: hidden;
    color: var(--green);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.information-link .ti {
    margin-right: .25rem;
}

.information-body .tags {
    margin-bottom: 0;
}

.information-body .tag {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .teacher-editor,
    .poster-editor {
        grid-template-columns: 1fr;
    }

    .teacher-photo {
        grid-template-columns: 7rem 1fr;
        align-items: center;
    }

    .teacher-photo .teacher-preview {
        grid-row: span 2;
    }

    .poster-preview {
        max-width: 9rem;
    }

    .information-item {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    .information-item > .button {
        grid-column: 2;
        justify-self: start;
    }
}

/* ---------- LINE Connect: คอลัมน์ต่อชั้นปีบนพื้นหลังหน้า (ไม่มีพื้นการ์ด) แต่ละภาควิชาคั่นด้วยเส้นประ
   แต่ละคนเป็นรูปวงกลมเรียงเป็นตาราง ชื่ออยู่ใต้รูป อยู่ในตึกวันนี้มีวงแหวนสีเขียว LINE ---------- */
.student-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .45rem;
    border-bottom: 3px solid var(--green);
    color: var(--green-dark);
    font-size: 1.15rem;
    font-weight: 700;
}

.student-group .empty-note {
    margin-top: .9rem;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

.student-dept {
    margin-top: 1.1rem;
}

.student-dept + .student-dept {
    padding-top: 1.1rem;
    border-top: 1px dashed #cfd6d3;
}

.student-dept-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .6rem;
    color: #363636;
    font-size: .8125rem;
    font-weight: 700;
}

.student-dept-head span {
    display: inline-grid;
    place-items: center;
    min-width: 1.4rem;
    height: 1.25rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: #fff;
    color: var(--green-dark);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}

.line-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
    gap: .75rem .35rem;
}

.line-profile {
    display: grid;
    justify-items: center;
    gap: .3rem;
    min-width: 0;
    text-align: center;
}

.line-avatar {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

/* ไม่มีรูป: วงกลมดำ ไอคอนคนเส้นขาว วงแหวนแดงขนาดเดียวกับวงแหวนอยู่ในตึก
   (ถ้าอยู่ในตึกด้วย วงแหวนเขียวด้านล่างแสดงแทน) */
.line-avatar.is-empty {
    display: grid;
    place-items: center;
    background: #1f2523;
    box-shadow: 0 0 0 3px #ededed, 0 0 0 5.5px #e5484d;
    color: #fff;
    font-size: 1.6rem;
}

.line-profile.is-here .line-avatar {
    box-shadow: 0 0 0 3px #ededed, 0 0 0 5.5px #06c755;
}

.line-name {
    overflow: hidden;
    width: 100%;
    font-size: .75rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ผู้สมัครที่ line.mecutth.com ยังไม่ได้เก็บโปรไฟล์ (สมัครก่อนมีคอลัมน์โปรไฟล์ จะได้ชื่อหลัง cron รอบถัดไป) */
.line-profile.is-pending .line-name {
    color: #8a9390;
    font-weight: 400;
}

/* คำอธิบายวงแหวนในหัวข้อหน้า */
.line-here-legend {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0 .3rem;
    color: #058a3c;
    font-weight: 600;
}

.line-here-legend::before {
    content: '';
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #06c755;
}

/* ---------- เรียกเจ้าหน้าที่ ---------- */
.itcall-page {
    background: #eef3f2;
}

.itcall-box {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.itcall-icon {
    color: var(--green);
    font-size: 4rem;
}

/* ---------- สีภาควิชาในตาราง (dept-รหัส) และจุดสีใน Year Planner (week-รหัส) ----------
   ตัวอักษรมีแค่ขาวหรือดำ: ขาวเมื่อพื้นเข้มพอ (ความต่างกับสีขาวอย่างน้อย 3:1 ซึ่งพอสำหรับตัวหนา) และ OB, Postgrad ตามที่เลือก นอกนั้นดำ */
.dept-Other { background: #ffff00; color: #000; }
.dept-Research { background: #e18686; color: #000; }
.dept-Med { background: #0000ff; color: #fff; }
.dept-Surg { background: #a61c00; color: #fff; }
.dept-PED { background: #ff0000; color: #fff; }
.dept-OB { background: #00b050; color: #fff; }
.dept-Ortho { background: #ff00ff; color: #fff; }
.dept-ER { background: #9900ff; color: #fff; }
.dept-CF { background: #ff570f; color: #fff; }
.dept-ENG { background: #ff9dd9; color: #000; }
.dept-Psy { background: #bf9000; color: #fff; }
.dept-Anes { background: #00666a; color: #fff; }
.dept-X-ray { background: #fffe8a; color: #000; }
.dept-ENT { background: #624a00; color: #fff; }
.dept-Rehab { background: #36ff31; color: #000; }
.dept-EYE { background: #4593f8; color: #fff; }
.dept-Tutoring { background: #000; color: #fff; }
.dept-Postgrad { background: #25a8ae; color: #fff; }
.dept-Ability { background: #ff3472; color: #fff; }
.dept-General { background: #a2ff00; color: #000; }
.dept-IT { background: #8b8b8b; color: #fff; }
.dept-FRS { background: #c399f0; color: #000; }
.dept-AP { background: #76c2af; color: #000; }
.dept-Digital { background: #2d82b5; color: #fff; }
.dept-Lib { background: #0d5e6b; color: #fff; }
.dept-Quality { background: #ade0d6; color: #000; }
.dept-Hss { background: #fadcdc; color: #000; }
.dept-Occmed { background: #ffe2d1; color: #000; }
.dept-Fammed { background: #beaba7; color: #000; }
.dept-Study { background: #b0d0ff; color: #000; }
.booking-cell a { color: inherit; }

.week-Other { color: #e6c700; }
.week-Research { color: #e18686; }
.week-Med { color: #0000ff; }
.week-Surg { color: #a61c00; }
.week-PED { color: #ff0000; }
.week-OB { color: #00b050; }
.week-Ortho { color: #ff00ff; }
.week-ER { color: #9900ff; }
.week-CF { color: #ff570f; }
.week-ENG { color: #ff9dd9; }
.week-Psy { color: #bf9000; }
.week-Anes { color: #00666a; }
.week-X-ray { color: #d4d000; }
.week-ENT { color: #624a00; }
.week-Rehab { color: #22cc1e; }
.week-EYE { color: #4593f8; }
.week-Tutoring { color: #000; }
.week-Postgrad { color: #25a8ae; }
.week-Ability { color: #ff3472; }
.week-General { color: #7ccc00; }
.week-IT { color: #8b8b8b; }
.week-FRS { color: #c399f0; }
.week-AP { color: #76c2af; }
.week-Digital { color: #2d82b5; }
.week-Lib { color: #0d5e6b; }
.week-Quality { color: #6fbfaf; }
.week-Hss { color: #e8a5a5; }
.week-Occmed { color: #f0a77a; }
.week-Fammed { color: #9b847f; }
.week-Study { color: #5b8fd9; }

/* ---------- หน้าจัดการผู้ใช้ (ฝ่าย IT): รายชื่อเป็นตาราง แถวที่กำลังแก้ไขเป็นพื้นเขียวอ่อน ---------- */
.user-table td {
    vertical-align: middle;
}

.user-table .tags,
.user-table .tags .tag {
    margin-bottom: 0;
}

.user-table tr.is-selected {
    background: var(--green-light);
    color: inherit;
}

/* ภาควิชา / ฝ่ายเป็นแคปซูลเลือกได้หลายข้อ เรียงเป็นคอลัมน์กว้างเท่ากันให้ตรงแนว */
.user-titles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
    gap: 4px;
}

.schedule-form .user-titles label.checkbox {
    white-space: nowrap;
}

fieldset.field {
    min-width: 0;
    border: 0;
    padding: 0;
}

@media screen and (max-width: 768px) {
    /* มือถือ: การ์ดห่างขอบจอ 1rem (columns ของ Bulma ติดลบ .75rem และ column เติมคืน .75rem จึงเหลือเท่า padding นี้) */
    .schedule-top,
    .schedule-form {
        padding: 1rem;
    }

    .popover-body {
        max-width: 240px;
    }

    /* footer บนมือถือ: ชื่อผู้พัฒนาสองฝั่งอยู่บรรทัดเดียว ตัวอักษรย่อตามความกว้างจอแทนการขึ้นบรรทัดใหม่ */
    .site-footer {
        padding: 1.5rem .5rem;
    }

    .site-footer .columns.is-mobile {
        margin: 0 0 .75rem;
    }

    .site-footer .columns.is-mobile > .column {
        min-width: 0;
        padding: 0 .35rem;
    }

    .site-footer .footer-and {
        margin: 0;
        padding: 0 .35rem;
        font-size: min(2.2vw, .75rem);
    }

    .site-footer .title.is-6,
    .site-footer .subtitle.is-7 {
        white-space: nowrap;
    }

    .site-footer .title.is-6 {
        margin-bottom: .2rem;
        font-size: min(3.4vw, 1rem);
    }

    .site-footer .subtitle.is-7 {
        font-size: min(2.05vw, .75rem);
    }

    /* Bulma ดึง subtitle ขึ้นไปชิดหัวข้อด้วยระยะติดลบ ซึ่งทับกันเมื่อตัวอักษรย่อ */
    .site-footer .title.is-6 + .subtitle {
        margin-top: 0;
    }
}