/* ═══════════════════════════════════════════════════════════════════════
   TeacherSchedules.php — ภาระงานสอนและตารางสอนรายสัปดาห์
   ใช้คู่กับ css/tb1-curriculum.css ซึ่งถือโทเคนและคอมโพเนนต์กระดาษไว้
   ตารางสอนวาดเป็น <table> ของช่วงเวลาจริง ไม่มีไลบรารีภายนอก ไม่มี JavaScript
   ═══════════════════════════════════════════════════════════════════════ */

/* WCAG 2.2 (2.4.11) แถบเมนูเป็น sticky สูง 57px ถ้าไม่กันที่ไว้
   โฟกัสของคีย์บอร์ดจะไปหลบใต้แถบเมนูตอนไล่ Tab ลงมา
   scroll-margin-top ที่ตัวเป้าหมายช่วยเฉพาะการกระโดดตาม anchor คนละเส้นทางกัน */
html {
    scroll-padding-top: 4.5rem;
}

.cs {
    --ts-subject: var(--cs-mark);
    --ts-home: var(--tb1-text-info, #0E7490);
    --ts-develop: var(--tb1-text-warning, #B45309);
    --ts-work: var(--cs-ink-3);
    --ts-tone: var(--cs-ink-3);
    --ts-lift: 0 12px 30px -22px rgba(15, 23, 42, .5);
    --ts-lift-s: 0 5px 16px -11px rgba(15, 23, 42, .38);
    --ts-edge: inset 0 1px 0 rgba(255, 255, 255, .6);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .cs {
    --ts-lift: 0 16px 36px -24px rgba(0, 0, 0, .9);
    --ts-lift-s: 0 7px 20px -13px rgba(0, 0, 0, .75);
    --ts-edge: inset 0 1px 0 rgba(255, 255, 255, .055);
}

.cs .is-subject {
    --ts-tone: var(--ts-subject);
}

.cs .is-home {
    --ts-tone: var(--ts-home);
}

.cs .is-develop {
    --ts-tone: var(--ts-develop);
}

.cs .is-work {
    --ts-tone: var(--ts-work);
}

body.teacher-schedules .cs-paper {
    box-shadow: var(--ts-edge), var(--ts-lift);
}

/* ── ตัวเลือกภาคเรียน ─────────────────────────────────────────────── */
.ts-terms {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: baseline;
    margin-bottom: 1.35rem;
}

.ts-terms-label {
    font-size: .84rem;
    color: var(--cs-ink-2);
    margin-right: .3rem;
}

.cs .ts-term {
    font: inherit;
    font-size: .86rem;
    /* WCAG 2.2 (2.5.8) เป้ากดต้องไม่เล็กกว่า 24 CSS px ทั้งกว้างและสูง */
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    padding: .4rem .95rem;
    border: 1px solid var(--cs-rule-bold);
    border-radius: 999px;
    background: var(--cs-paper);
    color: var(--cs-ink-2);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: border-color .18s ease, color .18s ease,
        box-shadow .18s ease, transform .12s ease;
}

.cs .ts-term:hover {
    border-color: var(--cs-mark);
    color: var(--cs-mark);
    box-shadow: var(--ts-lift-s);
}

.cs .ts-term:active {
    transform: translateY(1px) scale(.985);
    box-shadow: none;
}

.cs .ts-term[aria-current] {
    background: var(--cs-mark);
    border-color: var(--cs-mark);
    color: var(--cs-on-mark);
    font-weight: 500;
    box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--cs-mark) 65%, transparent);
}

.ts-term-n {
    display: inline-block;
    margin-left: .45rem;
    padding-left: .45rem;
    border-left: 1px solid currentColor;
}

/* ── ผังภาระงานรายครู ─────────────────────────────────────────────── */
.ts-dept {
    position: relative;
    margin: 1.7rem 0 .15rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--cs-ink);
    font-family: var(--tb1-font-display, 'Noto Serif Thai', Georgia, serif);
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: baseline;
}

/* เส้นคาดสองโทน ท่อนแรกใช้สีรองของธีม ไม่ใช่สีแบรนด์ */
.ts-dept::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 2.75rem;
    height: 2px;
    background: var(--ts-home);
}

.ts-dept span {
    font-family: var(--tb1-font-body, 'Sarabun', sans-serif);
    font-size: .8rem;
    font-weight: 400;
    color: var(--cs-ink-3);
    font-variant-numeric: tabular-nums;
}

.ts-rows {
    margin-top: .2rem;
}

.ts-row {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) minmax(6rem, 1fr) 2.6rem;
    grid-template-areas: "who bar num" "sub bar num";
    align-items: center;
    gap: 0 .9rem;
    padding: .5rem .1rem .5rem .7rem;
    border-bottom: 1px solid var(--cs-rule);
    border-left: 3px solid transparent;
    transition: border-left-color .2s ease, background-color .2s ease;
}

.ts-row:hover {
    border-left-color: var(--cs-rule-bold);
    background: var(--cs-paper-alt);
}

.cs .ts-who {
    grid-area: who;
    align-self: end;
    min-height: 1.6rem;
    display: flex;
    align-items: flex-end;
    font-size: .95rem;
    color: var(--cs-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.cs a.ts-who {
    text-decoration: underline;
    text-decoration-color: var(--cs-rule-bold);
    text-underline-offset: 3px;
}

.cs a.ts-who:hover,
.cs a.ts-who:focus-visible {
    color: var(--cs-mark);
    text-decoration-color: currentColor;
}

.ts-sub {
    grid-area: sub;
    align-self: start;
    font-size: .74rem;
    color: var(--cs-ink-3);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* รางของแท่งคือ "คาบมากที่สุดในโรงเรียน" จึงเทียบกันได้ทุกกลุ่มสาระ */
.ts-bar {
    grid-area: bar;
    position: relative;
    height: 1.15rem;
    border: 1px solid var(--cs-rule);
    border-radius: 3px;
    background: var(--cs-paper);
    overflow: visible;
}

.ts-fill {
    display: block;
    height: 100%;
    background: var(--cs-mark);
    border-radius: 2px 0 0 2px;
    transition: filter .2s ease;
}

.ts-row:hover .ts-fill {
    filter: saturate(1.25);
}

/* ขีดค่ากลางบนราง มีรางของตัวเองทางขวาเสมอ จึงไม่ถูกแท่งกลืน */
.ts-median {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 50%;
    width: 0;
    border-left: 1px dashed var(--cs-ink-3);
}

.ts-n {
    grid-area: num;
    text-align: right;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cs-ink);
    font-variant-numeric: tabular-nums;
}

.ts-row.is-current {
    border-left-color: var(--cs-mark);
    background: color-mix(in srgb, var(--cs-mark) 5%, var(--cs-paper));
}

/* ครูกลุ่มสาระที่ยังไม่มีตาราง คือ "สิ่งที่ยังขาด" ของหน้านี้
   ทำเครื่องหมายที่ขอบ ไม่ลงพื้นทั้งแถว คอนทราสต์ของชื่อจึงไม่เสีย */
.ts-row.is-missing {
    border-left-color: var(--cs-short);
}

.ts-row.is-missing .ts-sub {
    color: var(--cs-short);
}

.ts-row.is-nonteaching .ts-bar {
    border: 0;
    background: none;
}

.ts-row.is-nonteaching .ts-median {
    display: none;
}

.ts-row.is-nonteaching .ts-n,
.ts-row.is-missing .ts-n {
    color: var(--cs-ink-3);
    font-weight: 400;
}

/* ── ตารางสอนรายสัปดาห์ ───────────────────────────────────────────── */
.ts-scroll {
    overflow-x: auto;
    margin-top: 1rem;
}

.ts-grid {
    width: 100%;
    min-width: 56rem;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.ts-grid th,
.ts-grid td {
    border: 1px solid var(--cs-rule);
    padding: 0;
    vertical-align: top;
}

.ts-grid thead th {
    padding: .35rem .3rem .4rem;
    text-align: center;
    background: var(--cs-paper-alt);
    border-bottom: 2px solid var(--cs-rule-bold);
}

.ts-th-p {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--cs-ink);
}

.ts-th-t {
    display: block;
    font-size: .68rem;
    font-weight: 400;
    color: var(--cs-ink-3);
}

.ts-grid thead th.is-break {
    background: var(--cs-paper);
}

/* คอลัมน์ชื่อวันตรึงไว้ทางซ้าย ไม่ตรึงหัวตารางแนวตั้งเพราะจะซ้อนใต้แถบเมนู */
.ts-day {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 6.5rem;
    padding: .5rem .55rem;
    text-align: left;
    background: var(--cs-paper);
    font-size: .9rem;
    font-weight: 600;
    color: var(--cs-ink);
    border-right: 2px solid var(--cs-rule-bold);
}

.ts-day-n {
    display: block;
    font-size: .7rem;
    font-weight: 400;
    color: var(--cs-ink-3);
}

.ts-cell {
    min-width: 5.5rem;
}

.ts-cell.is-break {
    background: var(--cs-paper-alt);
}

.ts-blk {
    padding: .35rem .45rem .4rem;
    border-left: 3px solid var(--ts-tone);
    min-height: 3.4rem;
}

/* ★ ช่องที่มีมากกว่าหนึ่งใบ คือครูคนเดียวถูกจองซ้อนเวลาในช่วงเดียวกัน
   ต้องมองออกว่ามีสองใบจริง ไม่ใช่ใบเดียวที่บังเอิญยาวกว่าปกติ
   เส้นประคั่นทำงานได้ทุกโหมดรวมทั้งคอนทราสต์สูง ต่างจากการใช้สีพื้น */
.ts-cell.is-multi .ts-blk + .ts-blk {
    margin-top: .3rem;
    padding-top: .45rem;
    border-top: 1px dashed var(--cs-rule-bold);
}

.ts-blk-t {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cs-ink);
    overflow-wrap: anywhere;
}

.ts-blk-m {
    display: block;
    font-size: .72rem;
    color: var(--cs-ink-2);
    overflow-wrap: anywhere;
}

.ts-blk-k {
    display: block;
    margin-top: .15rem;
    font-size: .7rem;
    color: var(--ts-tone);
}

/* "ไม่นับภาระงาน" ต้องอยู่บรรทัดของตัวเอง ไม่งั้นจะตัดกลางคำเป็น "ไม่นับภาระ / งาน" */
.ts-off {
    display: block;
    color: var(--cs-ink-3);
}

.ts-flag {
    display: block;
    margin-top: .2rem;
    font-size: .68rem;
    color: var(--cs-short);
}

.cs a.ts-act {
    display: inline-flex;
    align-items: center;
    margin-top: .3rem;
    min-height: 1.6rem;
    padding: .1rem .5rem;
    border: 1px solid var(--cs-rule-bold);
    border-radius: 999px;
    font-size: .7rem;
    color: var(--cs-mark);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.cs a.ts-act:hover,
.cs a.ts-act:focus-visible {
    border-color: var(--cs-mark);
    box-shadow: var(--ts-lift-s);
}

/* ── คำอธิบายสัญลักษณ์ ────────────────────────────────────────────── */
/* สัญลักษณ์สี่กลุ่มต้องต่างกันด้วยรูปทรงตั้งแต่โหมดปกติ ไม่ใช่ต่างกันแค่สี
   คำอธิบายสัญลักษณ์ที่แยกด้วยสีอย่างเดียวจะไร้ความหมายทันทีที่พิมพ์ขาวดำ */
.ts-key {
    width: 1.2rem;
    height: 5px;
    border-radius: 2px;
    background: var(--ts-tone);
    flex-shrink: 0;
}

.ts-key.is-home {
    background: repeating-linear-gradient(90deg,
            var(--ts-tone) 0 5px, transparent 5px 7px);
}

.ts-key.is-develop {
    background: repeating-linear-gradient(90deg,
            var(--ts-tone) 0 8px, transparent 8px 12px);
}

.ts-key.is-work {
    height: 3px;
    background: repeating-linear-gradient(90deg,
            var(--ts-tone) 0 2px, transparent 2px 5px);
}

/* ── ส่วนผสมของคาบ ────────────────────────────────────────────────── */
.ts-mix {
    width: 100%;
    border-collapse: collapse;
    margin-top: .8rem;
}

.ts-mix th,
.ts-mix td {
    padding: .5rem .6rem .5rem 0;
    border-bottom: 1px solid var(--cs-rule);
    text-align: left;
    font-size: .88rem;
}

.ts-mix thead th {
    font-size: .76rem;
    font-weight: 500;
    color: var(--cs-ink-3);
    border-bottom: 2px solid var(--cs-rule-bold);
}

.ts-mix tbody th {
    font-weight: 600;
    color: var(--cs-ink);
    overflow-wrap: anywhere;
}

.ts-mix td {
    color: var(--cs-ink-2);
}

.ts-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ts-mix-bar {
    display: inline-block;
    vertical-align: middle;
    width: min(14rem, 42vw);
    height: .55rem;
    border: 1px solid var(--cs-rule);
    border-radius: 3px;
    background: var(--cs-paper);
}

.ts-mix-fill {
    display: block;
    height: 100%;
    background: var(--ts-tone);
    border-radius: 2px 0 0 2px;
}

.ts-mix-pct {
    margin-left: .5rem;
    font-size: .78rem;
    color: var(--cs-ink-3);
    font-variant-numeric: tabular-nums;
}

/* แถวที่ใช้น้อยผิดปกติ ทำเครื่องหมายที่ขอบ ไม่ลงพื้นทั้งแถว */
.ts-slots tr.is-thin th[scope="row"] {
    box-shadow: inset 3px 0 0 var(--cs-short);
    padding-left: .6rem;
}

.ts-mix-fill.is-thin {
    background: var(--cs-short);
}

html.tb1-contrast-high .ts-slots tr.is-thin th[scope="row"] {
    box-shadow: inset 3px 0 0 #FFD400;
}

html.tb1-contrast-high .ts-mix-fill.is-thin {
    background: repeating-linear-gradient(135deg, #FFD400 0 3px, transparent 3px 6px);
}

@media (max-width: 640px) {
    .ts-row {
        grid-template-columns: 1fr 2.6rem;
        grid-template-areas: "who num" "bar num" "sub num";
        gap: .15rem .7rem;
    }

    .ts-bar {
        margin: .2rem 0;
    }

    .ts-mix-bar {
        width: 100%;
        display: block;
        margin-bottom: .25rem;
    }

    .ts-mix-pct {
        margin-left: 0;
    }
}

/* ── โหมดคอนทราสต์สูง ─────────────────────────────────────────────── */
html.tb1-contrast-high .cs .ts-term {
    background: #000000;
    border-color: #FFD400;
    box-shadow: none !important;
}

html.tb1-contrast-high .cs .ts-term[aria-current] {
    background: #FFD400 !important;
    border-color: #FFD400 !important;
    color: #000000 !important;
}

html.tb1-contrast-high .cs .ts-term[aria-current] .ts-term-n {
    color: #000000 !important;
}

html.tb1-contrast-high .ts-dept::after {
    background: #FFD400;
}

html.tb1-contrast-high .ts-bar,
html.tb1-contrast-high .ts-mix-bar {
    border-color: #FFFFFF;
    background: #000000;
}

html.tb1-contrast-high .ts-fill,
html.tb1-contrast-high .ts-mix-fill,
html.tb1-contrast-high .ts-key {
    background: #FFD400;
}

html.tb1-contrast-high .ts-median {
    border-left-color: #FFFFFF;
}

html.tb1-contrast-high .ts-row {
    border-left-color: transparent;
    background: transparent !important;
}

html.tb1-contrast-high .ts-row.is-current,
html.tb1-contrast-high .ts-row.is-missing {
    border-left-color: #FFD400;
}

/* ชนิดคาบสี่กลุ่มยุบเหลือรูปทรง เพราะสีหายไปหมดในโหมดนี้
   สันซ้ายของช่องจึงต้องหนาบางต่างกัน ไม่ใช่สีต่างกัน */
html.tb1-contrast-high .ts-blk {
    border-left-color: #FFFFFF;
}

html.tb1-contrast-high .is-subject .ts-blk {
    border-left-width: 6px;
    border-left-color: #FFD400;
}

html.tb1-contrast-high .is-home .ts-blk {
    border-left-style: double;
    border-left-width: 6px;
}

html.tb1-contrast-high .is-develop .ts-blk {
    border-left-style: dashed;
}

html.tb1-contrast-high .is-work .ts-blk {
    border-left-style: dotted;
}

html.tb1-contrast-high .ts-key.is-subject {
    height: 6px;
}

html.tb1-contrast-high .ts-key.is-home {
    height: 6px;
    background: repeating-linear-gradient(90deg, #FFD400 0 4px, transparent 4px 6px);
}

html.tb1-contrast-high .ts-key.is-develop {
    background: repeating-linear-gradient(90deg, #FFD400 0 6px, transparent 6px 10px);
}

html.tb1-contrast-high .ts-key.is-work {
    background: repeating-linear-gradient(90deg, #FFFFFF 0 2px, transparent 2px 5px);
}

html.tb1-contrast-high .ts-grid thead th,
html.tb1-contrast-high .ts-day,
html.tb1-contrast-high .ts-cell.is-break {
    background: #000000;
    border-color: #FFFFFF;
}

html.tb1-contrast-high body.teacher-schedules .cs-paper,
html.tb1-contrast-high .cs a.ts-act {
    box-shadow: none !important;
}

html.tb1-contrast-high .cs a.ts-act {
    border-color: #FFD400;
}

/* ── ลดการเคลื่อนไหว ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .ts-row,
    .ts-fill,
    .cs .ts-term,
    .cs a.ts-act {
        transition: none !important;
    }

    .cs .ts-term:active {
        transform: none !important;
    }

    .ts-row:hover .ts-fill {
        filter: none !important;
    }
}

/* ── พิมพ์ ────────────────────────────────────────────────────────── */
@media print {

    .ts-terms {
        display: none !important;
    }

    body.teacher-schedules .cs-paper,
    .cs .ts-term,
    .cs a.ts-act {
        box-shadow: none !important;
    }

    .cs a.ts-act {
        display: none !important;
    }

    .ts-scroll {
        overflow: visible !important;
    }

    /* ตารางต้องหดให้พอดีหน้ากระดาษ ไม่ใช่ยื่นออกนอกขอบแล้วโดนตัด
       table-layout: fixed บังคับให้ทุกคอลัมน์แบ่งความกว้างเท่า ๆ กันตามที่เหลือจริง */
    .ts-grid {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed;
        font-size: 7.5pt;
    }

    .ts-grid td,
    .ts-grid th {
        overflow-wrap: anywhere;
    }

    .ts-blk {
        min-height: 0 !important;
        padding: .15rem .2rem .2rem !important;
    }

    .ts-th-t {
        font-size: 6.5pt;
    }

    /* ห้าวันต้องอยู่หน้าเดียวกัน ไม่งั้นครูต้องเอาสองแผ่นมาต่อกันถึงจะอ่านสัปดาห์ได้ครบ */
    .ts-grid {
        line-height: 1.22;
    }

    .ts-blk-t {
        font-size: 7.5pt;
    }

    .ts-blk-m,
    .ts-blk-k,
    .ts-day-n {
        font-size: 6.5pt;
    }

    #ts-sheet .cs-census {
        display: none;
    }

    .ts-scroll {
        margin-top: .4rem;
    }

    .ts-day {
        min-width: 0 !important;
    }

    /* ใบตารางสอนรายคนคือสิ่งที่ครูพิมพ์ไปติดบอร์ด ให้เริ่มหน้าใหม่ของตัวเอง
       ไม่ใช่ห้อยอยู่ครึ่งหน้าใต้สำมะโนของทั้งโรงเรียน */
    #ts-sheet {
        break-before: page;
    }

    .ts-day {
        position: static !important;
    }

    .ts-row,
    .ts-grid tr {
        break-inside: avoid;
    }

    /* สีสันหายบนกระดาษขาวดำ สันซ้ายจึงต้องต่างกันด้วยรูปทรง */
    .ts-blk {
        border-left-color: #000 !important;
    }

    .is-subject .ts-blk {
        border-left-width: 5px !important;
    }

    .is-home .ts-blk {
        border-left-style: double !important;
        border-left-width: 5px !important;
    }

    .is-develop .ts-blk {
        border-left-style: dashed !important;
    }

    .is-work .ts-blk {
        border-left-style: dotted !important;
    }

    .ts-fill,
    .ts-mix-fill,
    .ts-key {
        background: #333 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ts-key.is-home {
        background: repeating-linear-gradient(90deg, #333 0 4px, transparent 4px 6px) !important;
    }

    .ts-key.is-develop {
        background: repeating-linear-gradient(90deg, #333 0 6px, transparent 6px 10px) !important;
    }

    .ts-key.is-work {
        background: repeating-linear-gradient(90deg, #666 0 2px, transparent 2px 5px) !important;
    }

    .cs a.ts-who,
    .cs .cs-link {
        color: #000 !important;
        text-decoration: none !important;
    }
}