/* css/tb1-directive-landing.css — แลนดิ้งเพจของระบบคำสั่งปฏิบัติงาน (directive_list.php) · body.dla-page · ทุกกฎขึ้นต้น dla-
 * ★ 9 พ.ย. 2569 ครูหนึ่ง "จัดทำหน้า landing pages สำหรับระบบคำสั่งปฏิบัติงาน tb/directive_list.php"
 * โหลดต่อจาก attendance-dashboard.css (ad-*) · tb1-directives.css (dr-*) · tb1-directive-list.css (dl-*)
 * ใช้โทเคน --ad-* ของโมดูล โหมดมืดตามไปเอง · markup อยู่ใน includes/directive_landing_view.php
 * 1 หัวน้ำเงิน: ช่องค้นหาคำสั่ง · แผงกระจกตัวเลข 2 คอลัมน์ (แทนการ์ดภาพรวมเดิม)
 * 2 งานของฉัน · 3 เรียกดูทะเบียน (แท็บ) · 4 ระบบทั้งหมด (แท็บกลุ่ม ค้นหา) — แผงแบบ ad-panel ชุดเดียวกับทะเบียน
 * แอนิเมชันเล่นครั้งเดียวตอนโหลด ไม่มีวงวน ไม่มีตัวเลขนับขึ้น · ปิดเมื่อผู้ใช้ขอลดการเคลื่อนไหว */

.dla-page {
    --dla-t1: #1d4ed8;
    --dla-t3: #6d28d9;
    --dla-t4: #15803d;
    --dla-t5: #b45309;
    --dla-on: #ffffff;
    --dla-late: #b91c1c;
    --dla-soon: #b45309;
    --dla-ok: #15803d;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], html.tb1-contrast-dark) .dla-page {
    --dla-t1: #8ab4f8;
    --dla-t3: #c4b5fd;
    --dla-t4: #86efac;
    --dla-t5: #fcd34d;
    --dla-on: #0e1622;
    --dla-late: #fca5a5;
    --dla-soon: #fcd34d;
    --dla-ok: #86efac;
}

.dla-page .t1 { --t: var(--dla-t1); }
.dla-page .t3 { --t: var(--dla-t3); }
.dla-page .t4 { --t: var(--dla-t4); }
.dla-page .t5 { --t: var(--dla-t5); }

/* ═══ 1 หัวน้ำเงิน ═══════════════════════════════════════════════════════ */

/* ช่องค้นหาคำสั่ง (แบบช่องค้นหาของศูนย์ข้อมูลนักเรียน) */
.dla-find {
    align-self: stretch;
    width: 100%;
    max-width: 42rem;
    margin: 18px 0 0;
}

.dla-find-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 46px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 34px -18px rgba(2, 6, 23, .65), 0 0 0 1px rgba(255, 255, 255, .5);
    transition: box-shadow .25s ease;
}

.dla-find-box:focus-within {
    box-shadow: 0 16px 38px -16px rgba(2, 6, 23, .75), 0 0 0 3px rgba(147, 197, 253, .9);
}

.dla-find-box > i {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: #475569;
}

.dla-page .dla-find-box input {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #0f172a;
    font: inherit;
    font-size: 1rem;
    outline: none;
}

.dla-find-box input::placeholder {
    color: #64748b;
}

.dla-kbd {
    flex: none;
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;
    border-radius: 7px;
    background: #f8fafc;
    color: #475569;
    font: 600 .8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dla-find-box:focus-within .dla-kbd {
    display: none;
}

.dla-find-go {
    flex: none;
    min-height: 46px;
    padding: 8px 22px;
    border: 0;
    border-radius: 12px;
    background: #1d4ed8;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

.dla-find-go:hover {
    background: #1e40af;
}

.dla-find-go:focus-visible {
    outline: 3px solid #1e3a8a;
    outline-offset: 2px;
}

/* แผงกระจกตัวเลข: อยู่ช่องขวาของ .ad-hero-top (ช่องเดียวกับการ์ดภาพรวมเดิม) */
.dla-figs {
    min-width: 0;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: 0 26px 50px -30px rgba(2, 6, 23, .85), inset 0 1px 0 rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.dla-figs-h {
    /* ★ 9 พ.ย. 2569 รอบกระชับ: หัวแผงไม่แสดง (ป้ายในช่องบอกอยู่แล้ว) คงไว้ให้โปรแกรมอ่านหน้าจอ */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.dla-fig-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dla-fig {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ic k" "v v" "s s";
    align-items: center;
    column-gap: 7px;
    height: 100%;
    padding: 9px 11px 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .09);
    color: #ffffff;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

a.dla-fig:hover {
    background: rgba(255, 255, 255, .17);
    border-color: rgba(255, 255, 255, .42);
}

a.dla-fig:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

a.dla-fig::after {
    content: "\f061";
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .72rem;
    color: rgba(255, 255, 255, .55);
    transition: transform .2s ease, color .2s ease;
}

/* ช่องที่ไม่ใช่ลิงก์ไม่มีลูกศร ป้ายใช้ที่ได้เต็ม */
span.dla-fig .dla-fig-k {
    padding-right: 0;
}

a.dla-fig:hover::after {
    color: #ffffff;
    transform: translateX(2px);
}

.dla-fig-ic {
    grid-area: ic;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: .72rem;
    color: #1d4ed8;
    background: linear-gradient(150deg, #ffffff 0%, #dbeafe 100%);
}

.dla-fig-k {
    grid-area: k;
    min-width: 0;
    padding-right: 12px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ad-on-hero-2, #dbeafe);
}

.dla-fig-v {
    grid-area: v;
    margin-top: 4px;
    font-family: var(--ad-serif);
    font-size: clamp(1.35rem, 1.05rem + .6vw, 1.6rem);
    font-weight: 600;
    line-height: 1.15;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.dla-fig-v small {
    font-family: var(--ad-sans);
    font-size: .78rem;
    font-weight: 400;
    color: var(--ad-on-hero-2, #dbeafe);
}

.dla-fig-s {
    grid-area: s;
    display: block;
    margin-top: 1px;
    font-size: .72rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ad-on-hero-2, #dbeafe);
}

/* รอรับทราบ: ขอบทอง ไอคอนทอง — สิ่งที่ต้องทำ */
.dla-fig.is-urgent {
    border-color: rgba(251, 191, 36, .75);
    background: rgba(251, 191, 36, .14);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .35);
}

.dla-fig.is-urgent .dla-fig-ic {
    color: #78350f;
    background: linear-gradient(150deg, #fde68a 0%, #fbbf24 100%);
}

a.dla-fig.is-urgent:hover {
    background: rgba(251, 191, 36, .22);
    border-color: #fbbf24;
}

.dla-fig.is-ok .dla-fig-s i {
    margin-right: 4px;
    color: #86efac;
}

/* มีผลวันนี้: จุดเขียวหน้าตัวเลข (นิ่ง ไม่กะพริบ) */
.dla-fig.is-live .dla-fig-v::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 8px .3em 0;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .25);
    vertical-align: middle;
}

/* ช่องของมุมมองนี้ */
.dla-fig.is-current {
    border-color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .16);
}

/* ★ 9 พ.ย. 2569 รอบกระชับ (ครูหนึ่ง "มีที่ว่างมากเกินไป"): แผงตัวเลขเดิม 2×3 สูง 376 px ขณะที่ฝั่งซ้ายสูง 216 px
   ฝั่งซ้ายจึงลอยกลางมีช่องว่างบนล่าง → แผง 3×2 คอลัมน์ขวากว้างขึ้น สูงพอ ๆ กับฝั่งซ้าย · หัวเว้นที่ด้านล่างน้อยลง */
@media (min-width: 1024px) {
    .dla-page .dl-hero .ad-hero-top {
        /* สัดส่วนแทน rem: ผู้ใช้ตั้งตัวอักษรเล็ก (rem ~13px) แล้ว 35rem เหลือ 454 px ป้ายในช่องถูกตัด */
        grid-template-columns: minmax(0, 1fr) minmax(400px, .8fr);
        column-gap: clamp(24px, 3vw, 48px);
    }

    .dla-page .dl-hero.has-float {
        padding-bottom: clamp(92px, 7vw, 112px); /* แผงงานของฉันลอยทับ 62–86 px เหลือช่องฟ้า ~17–26 px */
    }
}

/* จอ 1024–1279: ช่องกว้าง ~128 px ป้ายข้างไอคอนไม่พอ → ไม่แสดงไอคอนเล็กในช่อง ป้ายเต็มความกว้าง */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .dla-fig {
        grid-template-areas: "k k" "v v" "s s";
    }

    .dla-fig-ic {
        display: none;
    }
}

/* ═══ 2–4 แผงแลนดิ้ง ═══════════════════════════════════════════════════ */

.dla-sec {
    scroll-margin-top: 90px;
}

.dla-h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 9px;
    margin: 0 0 10px;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ad-ink);
}

.dla-h3 > i {
    color: var(--ad-brand);
}

.dla-badge {
    padding: 1px 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--ad-brand);
    background: var(--ad-brand-soft);
}

.dla-badge.is-urgent {
    color: #78350f;
    background: #fef3c7;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"]) .dla-badge.is-urgent {
    color: #fde68a;
    background: rgba(251, 191, 36, .16);
}

.dla-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-top: 6px;
    padding: 4px 2px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ad-brand);
    text-decoration: none;
}

.dla-more:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dla-more i {
    font-size: .78rem;
    transition: transform .2s ease;
}

.dla-more:hover i {
    transform: translateX(3px);
}

.dla-more:focus-visible {
    outline: 3px solid var(--ad-brand);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── 2 งานของฉัน ── */
.dla-mine-grid {
    display: grid;
    gap: 16px 22px;
}

/* ★ รอบกระชับ: เดิมสองคอลัมน์ รอรับทราบ 1 ฉบับแล้วเหลือที่ว่างใต้รายการ ~100 px → เรียงลง ปุ่มลัดแถวเดียว */
.dla-acts-wrap {
    padding-top: 14px;
    border-top: 1px solid var(--ad-line);
}

@media (min-width: 960px) {
    .dla-todo-end {
        grid-auto-flow: column;
        align-items: center;
        gap: 14px;
    }
}

.dla-todo-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dla-todo-it {
    --a: var(--ad-brand);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--ad-line);
    border-left: 4px solid var(--a);
    border-radius: 13px;
    background: var(--ad-paper);
    color: var(--ad-ink);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.dla-todo-it.is-late { --a: var(--dla-late); }
.dla-todo-it.is-soon { --a: var(--dla-soon); }

.dla-todo-it:hover,
.dla-todo-it:focus-visible {
    background: color-mix(in srgb, var(--a) 5%, var(--ad-paper));
    box-shadow: 0 12px 26px -20px color-mix(in srgb, var(--a) 80%, transparent);
}

.dla-todo-it:focus-visible {
    outline: 3px solid var(--ad-brand);
    outline-offset: 2px;
}

.dla-todo-ic {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: var(--a);
    background: color-mix(in srgb, var(--a) 11%, var(--ad-paper));
}

.dla-todo-tx {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.dla-todo-tx b {
    font-size: .93rem;
    font-weight: 600;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dla-todo-tx small {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--ad-muted);
}

.dla-todo-end {
    display: grid;
    justify-items: end;
    gap: 4px;
    text-align: right;
}

.dla-when {
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--a);
    white-space: nowrap;
}

.dla-todo-it:not(.is-late):not(.is-soon) .dla-when {
    color: var(--ad-muted);
    font-weight: 600;
}

.dla-todo-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    color: #ffffff;
    background: var(--ad-navy, #1d4ed8);
    transition: background .2s ease;
}

.dla-todo-go i {
    font-size: .72rem;
}

.dla-todo-it:hover .dla-todo-go {
    background: color-mix(in srgb, var(--ad-navy, #1d4ed8) 84%, #000000);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"]) .dla-todo-go {
    background: #2563eb;
}

/* รับทราบครบแล้ว */
.dla-todo.is-clear {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--dla-ok) 30%, var(--ad-line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--dla-ok) 6%, var(--ad-paper));
}

.dla-todo.is-clear.is-plain {
    border-color: var(--ad-line);
    background: var(--ad-paper-alt);
}

.dla-clear-ic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #ffffff;
    background: var(--dla-ok);
}

.dla-todo.is-plain .dla-clear-ic {
    color: var(--ad-brand);
    background: var(--ad-brand-soft);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"]) .dla-clear-ic {
    color: #052e16;
}

.dla-todo.is-clear .dla-h3 {
    margin: 0;
}

.dla-todo.is-clear p {
    margin: 2px 0 0;
    font-size: .86rem;
    color: var(--ad-muted);
}

.dla-todo.is-clear .dla-more {
    margin-top: 4px;
}

/* ปุ่มลัด: แถวเท่ากันตามจำนวน (6 = 3+3 หรือแถวเดียว · 4 = 2+2 บนจอกลาง ไม่ใช่ 5+1 / 3+1) */
@media (min-width: 641px) {
    .dla-acts[data-n="6"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .dla-acts[data-n="6"] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (min-width: 641px) and (max-width: 899.98px) {
    .dla-acts[data-n="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ปุ่มลัด (แบบงานของฉันของระบบเช็คชื่อ) */
.dla-sr-sm {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.dla-acts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 178px), 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dla-act {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    height: 100%;
    min-height: 54px;
    padding: 7px 11px;
    border: 1px solid var(--ad-line);
    border-radius: 13px;
    background: var(--ad-paper);
    color: var(--ad-ink);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.dla-act > i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: .92rem;
    color: var(--ad-brand);
    background: var(--ad-brand-soft);
    transition: background .2s ease, color .2s ease;
}

.dla-act > span {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.dla-act b {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
}

.dla-act small {
    font-size: .76rem;
    line-height: 1.4;
    color: var(--ad-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dla-act:hover,
.dla-act:focus-visible {
    border-color: color-mix(in srgb, var(--ad-brand) 45%, var(--ad-line));
    box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ad-brand) 70%, transparent);
}

.dla-act:hover > i,
.dla-act:focus-visible > i {
    background: var(--ad-brand);
    color: var(--ad-on-brand, #ffffff);
}

.dla-act:focus-visible {
    outline: 3px solid var(--ad-brand);
    outline-offset: 2px;
}

/* ── แท็บ (เรียกดูทะเบียน + ระบบทั้งหมด) แบบแท็บกลุ่มของศูนย์ข้อมูลนักเรียน ── */
.dla-tabs {
    --t: var(--ad-brand);
    display: flex;
    gap: 4px;
    margin: 0 0 14px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 14px;
    background: var(--ad-paper-alt);
}

.dla-tabs::-webkit-scrollbar {
    display: none;
}

.dla-tabs button {
    display: inline-flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 14px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--ad-muted);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.dla-tabs button > i {
    color: var(--t);
}

.dla-tabs button > small {
    min-width: 24px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
    color: var(--t);
    background: color-mix(in srgb, var(--t) 13%, transparent);
}

.dla-tabs button:hover {
    color: var(--ad-ink);
    background: var(--ad-paper);
}

.dla-tabs button[aria-selected="true"] {
    color: var(--ad-ink);
    background: var(--ad-paper);
    box-shadow: inset 0 -3px 0 var(--t), 0 1px 2px rgba(15, 23, 42, .08), 0 6px 16px -12px rgba(15, 23, 42, .5);
}

.dla-tabs button[aria-selected="true"] > small {
    background: var(--t);
    color: var(--dla-on);
}

.dla-tabs button:focus-visible {
    outline: 2px solid var(--t);
    outline-offset: -2px;
}

.dla-tabs button.is-empty {
    opacity: .45;
}

/* แท็บใช้งานได้เมื่อมีสคริปต์ · ไม่มีสคริปต์ = เห็นทุกแผงเรียงลงมา แถบแท็บซ่อน */
.dla-page:not(.dla-js) .dla-tabs {
    display: none;
}

.dla-page.dla-js [data-dla-off] {
    display: none;
}

.dla-page.dla-js .dla-dir.is-search .dla-group[data-dla-off]:not([hidden]) {
    display: grid;
}

.dla-dir.is-search .dla-tabs button[aria-selected="true"] {
    background: transparent;
    box-shadow: none;
}

.dla-pane:focus-visible,
.dla-group:focus-visible {
    outline: 2px solid var(--ad-brand);
    outline-offset: 4px;
    border-radius: 12px;
}

.dla-page:not(.dla-js) .dla-pane + .dla-pane {
    margin-top: 18px;
}

/* ── 3 มีผลวันนี้: การ์ดพร้อมแถบความคืบหน้า ── */
.dla-runs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 6 ใบ = 3×2 หรือ 2×3 เต็มแถวเสมอ */
@media (min-width: 641px) {
    .dla-runs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .dla-runs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.dla-run {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 10px 13px 11px;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-paper);
    color: var(--ad-ink);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.dla-run:hover,
.dla-run:focus-visible {
    border-color: color-mix(in srgb, var(--ad-brand) 45%, var(--ad-line));
    box-shadow: 0 14px 30px -22px color-mix(in srgb, var(--ad-brand) 80%, transparent);
}

.dla-run:focus-visible {
    outline: 3px solid var(--ad-brand);
    outline-offset: 2px;
}

.dla-run.is-mine {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ad-brand) 5%, var(--ad-paper)), var(--ad-paper) 70px);
}

.dla-run-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.dla-run-pur {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: .76rem;
    font-weight: 600;
    color: var(--ad-muted);
}

.dla-run-pur i {
    color: var(--ad-brand);
}

.dla-run-mine {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--ad-brand);
    background: var(--ad-brand-soft);
    white-space: nowrap;
}

.dla-run-title {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dla-run-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--ad-muted);
}

.dla-run-meta i {
    font-size: .72rem;
}

.dla-run-bar {
    position: relative;
    display: block;
    height: 6px;
    margin-top: auto;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ad-brand) 12%, var(--ad-paper-alt));
    overflow: hidden;
}

.dla-run-bar > i {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--p);
    border-radius: 999px;
    background: var(--ad-brand);
}

.dla-run.is-last .dla-run-bar > i {
    background: var(--dla-soon);
}

.dla-run-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
    font-size: .78rem;
    line-height: 1.4;
}

.dla-run-left {
    font-weight: 700;
    color: var(--ad-ink);
}

.dla-run.is-last .dla-run-left {
    color: var(--dla-soon);
}

.dla-run-ack {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ad-muted);
}

.dla-run-ack.is-done {
    color: var(--dla-ok);
    font-weight: 600;
}

.dla-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--ad-line-bold);
    border-radius: 14px;
    color: var(--ad-muted);
}

.dla-empty i {
    color: var(--ad-brand);
}

/* กำลังจะเริ่ม */
.dla-next {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ad-line);
}

.dla-next ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dla-next-it {
    display: grid;
    grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 12px;
    border-radius: 12px;
    color: var(--ad-ink);
    text-decoration: none;
    transition: background .2s ease;
}

.dla-next-it:hover {
    background: var(--ad-paper-alt);
}

.dla-next-it:focus-visible {
    outline: 3px solid var(--ad-brand);
    outline-offset: 1px;
}

.dla-next-d {
    display: grid;
    line-height: 1.35;
}

.dla-next-d b {
    font-size: .86rem;
    font-weight: 700;
}

.dla-next-d small {
    font-size: .74rem;
    color: var(--ad-brand);
    font-weight: 600;
}

.dla-next-t {
    min-width: 0;
    font-size: .9rem;
    line-height: 1.45;
}

.dla-next-it > i {
    font-size: .76rem;
    color: var(--ad-muted);
}

/* ช่องหมวด: วัตถุประสงค์ ฝ่าย ปีการศึกษา */
.dla-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dla-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 60px;
    padding: 10px 14px 10px 12px;
    border: 1px solid var(--ad-line);
    border-radius: 13px;
    background: var(--ad-paper);
    color: var(--ad-ink);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

a.dla-tile:hover,
a.dla-tile:focus-visible {
    border-color: color-mix(in srgb, var(--ad-brand) 45%, var(--ad-line));
    box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ad-brand) 70%, transparent);
}

a.dla-tile:focus-visible {
    outline: 3px solid var(--ad-brand);
    outline-offset: 2px;
}

.dla-tile.is-zero {
    color: var(--ad-muted);
    background: var(--ad-paper-alt);
}

.dla-tile-ic {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: var(--ad-brand);
    background: var(--ad-brand-soft);
    transition: background .2s ease, color .2s ease;
}

a.dla-tile:hover .dla-tile-ic {
    color: var(--ad-on-brand, #ffffff);
    background: var(--ad-brand);
}

.dla-tile-tx {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.dla-tile-tx b {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.4;
}

.dla-tile-bar {
    position: relative;
    display: block;
    height: 4px;
    border-radius: 999px;
    background: var(--ad-paper-alt);
    overflow: hidden;
}

.dla-tile.is-zero .dla-tile-bar {
    background: var(--ad-line);
}

.dla-tile-bar > i {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--p);
    border-radius: 999px;
    background: var(--ad-brand);
}

.dla-tile-n {
    font-family: var(--ad-serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dla-tile-n small {
    font-family: var(--ad-sans);
    font-size: .74rem;
    font-weight: 400;
    color: var(--ad-muted);
}

/* ── 4 ระบบทั้งหมด (แบบศูนย์ข้อมูลนักเรียน) ── */
.dla-dir .ad-panel-title {
    flex: 1 1 18rem;
}

.dla-dir-find {
    position: relative;
    flex: 0 1 340px;
}

.dla-dir-find > i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ad-muted);
}

.dla-page .dla-dir-find input {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px 8px 38px;
    border: 1px solid var(--ad-line-bold);
    border-radius: 12px;
    background: var(--ad-paper);
    color: var(--ad-ink);
    font: inherit;
}

.dla-page .dla-dir-find input:focus-visible {
    outline: 3px solid var(--ad-brand);
    outline-offset: 1px;
}

.dla-msg {
    margin: 0 0 8px;
    font-size: .85rem;
    color: var(--ad-muted);
}

.dla-msg:empty {
    display: none;
}

.dla-groups {
    display: grid;
    gap: 12px;
}

.dla-group {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--ad-line);
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--t) 7%, var(--ad-paper)), var(--ad-paper) 90px);
}

.dla-group[hidden] {
    display: none;
}

.dla-group-h {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.dla-group-ic {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: .95rem;
    color: var(--dla-on);
    background: var(--t);
    box-shadow: 0 8px 18px -12px var(--t);
}

.dla-group-h > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    min-width: 0;
}

.dla-group-h h3 {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    color: var(--ad-ink);
}

.dla-group-h p {
    margin: 0;
    font-size: .82rem;
    color: var(--ad-muted);
}

.dla-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dla-tools li[hidden] {
    display: none;
}

.dla-tool {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    height: 100%;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--ad-line) 80%, transparent);
    border-radius: 13px;
    background: var(--ad-paper);
    color: var(--ad-ink);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.dla-tool-ic {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--t);
    background: color-mix(in srgb, var(--t) 12%, var(--ad-paper));
    transition: background .2s ease, color .2s ease;
}

.dla-tool-tx {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.dla-tool-tx b {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.4;
}

.dla-tool-tx > span {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--ad-muted);
}

.dla-tool-tx small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--t);
}

.dla-go {
    align-self: center;
    font-size: .78rem;
    color: var(--ad-muted);
    transition: transform .2s ease, color .2s ease;
}

.dla-tool:hover,
.dla-tool:focus-visible {
    border-color: color-mix(in srgb, var(--t) 45%, var(--ad-line));
    box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--t) 70%, transparent);
}

.dla-tool:hover .dla-tool-ic,
.dla-tool:focus-visible .dla-tool-ic {
    color: var(--dla-on);
    background: var(--t);
}

.dla-tool:hover .dla-go {
    color: var(--t);
    transform: translateX(3px);
}

.dla-tool:focus-visible {
    outline: 3px solid var(--t);
    outline-offset: 2px;
}

.dla-none {
    margin: 4px 0 0;
    padding: 14px 16px;
    border: 1px dashed var(--ad-line-bold);
    border-radius: 14px;
    color: var(--ad-muted);
}

.dla-none[hidden] {
    display: none;
}

/* ── โหมดมืด: tb1-display-scale.css ทาลิงก์ทั้งเว็บเป็นฟ้า (:is(html.dark-mode) :where(a) = 0,1,1)
   การ์ดที่ทั้งใบเป็นลิงก์ใช้สีตัวอักษรปกติ ความเฉพาะ 0,2,0 จึงชนะ ── */
.dla-page :is(.dla-todo-it, .dla-act, .dla-run, .dla-tile, .dla-tool, .dla-next-it) {
    color: var(--ad-ink);
}

.dla-page a.dla-fig {
    color: #ffffff;
}

.dla-page a.dla-more {
    color: var(--ad-brand);
}

/* ═══ จอเล็ก ════════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
    .dla-figs {
        margin-top: 4px;
    }
}

/* คนนอก / ไม่มีตารางรับทราบ: 4 ช่อง = 2×2 */
.dla-fig-list[data-n="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    /* หัวน้ำเงินสั้นลง: คำอธิบายเหลือบรรทัดเดียว ปุ่ม / ไม่จำเป็นบนจอสัมผัส */
    .dla-page .dl-hero-sub {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dla-find {
        margin-top: 14px;
    }

    .dla-kbd {
        display: none;
    }

    .dla-find-go {
        padding-inline: 16px;
    }

    .dla-figs {
        padding: 10px 10px 12px;
        border-radius: 18px;
    }

    .dla-fig-list {
        gap: 6px;
    }

    .dla-fig {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "k" "v";
        padding: 8px 9px 9px;
        border-radius: 12px;
    }

    .dla-fig-ic,
    .dla-fig-s,
    a.dla-fig::after {
        display: none;
    }

    .dla-fig-k {
        padding-right: 0;
        font-size: .72rem;
    }

    .dla-fig-v {
        margin-top: 2px;
        font-size: 1.3rem;
    }

    .dla-fig-v small {
        display: none;
    }

    .dla-todo-it {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 10px 12px;
    }

    .dla-todo-ic {
        display: none;
    }

    .dla-todo-end {
        grid-auto-flow: column;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .dla-acts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    /* ปุ่มเป็นคี่: ปุ่มสุดท้ายเต็มแถว ไม่เหลือช่องว่าง */
    .dla-acts > li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* ปุ่มลัดบนโทรศัพท์: ไอคอนซ้าย ชื่อขวา แถวละสองปุ่ม ไม่มีบรรทัดรอง */
    .dla-act {
        gap: 8px;
        min-height: 48px;
        padding: 6px 8px;
        border-radius: 12px;
    }

    .dla-act > i {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: .82rem;
    }

    .dla-act b {
        font-size: .84rem;
    }

    .dla-act small {
        display: none;
    }

    /* รอรับทราบบนโทรศัพท์: 3 ฉบับ (ลิงก์ "ดูทั้งหมด" อยู่ใต้รายการ) */
    .dla-todo-list > li:nth-child(n+4) {
        display: none;
    }

    /* มีผลวันนี้บนโทรศัพท์: 4 ใบ (ลิงก์ "ดูทั้งหมด" อยู่ใต้การ์ดเสมอ) */
    .dla-runs > li:nth-child(n+5) {
        display: none;
    }

    .dla-next-it {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 10px;
        padding: 8px 10px;
    }

    .dla-next-d {
        grid-column: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 0 8px;
    }

    .dla-next-t {
        grid-column: 1;
    }

    .dla-next-it > i {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .dla-tabs button {
        min-height: 42px;
        padding: 6px 12px;
        font-size: .86rem;
    }

    .dla-dir-find {
        flex-basis: 100%;
    }

    .dla-group-h p {
        display: none;
    }
}

/* ═══ แอนิเมชันครั้งเดียวตอนโหลด ════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
    .dla-fig-list > li,
    .dla-sec,
    .dla-todo-list > li,
    .dla-acts > li,
    .dla-runs > li,
    .dla-tiles > li {
        animation: dla-rise .5s cubic-bezier(.2, .7, .2, 1) both;
        animation-delay: calc(var(--i, 0) * 45ms + 60ms);
    }

    .dla-sec {
        animation-delay: 80ms;
    }

    .dla-sec + .dla-sec {
        animation-delay: 160ms;
    }

    .dla-run-bar > i,
    .dla-tile-bar > i {
        animation: dla-grow .9s cubic-bezier(.2, .7, .2, 1) both;
        animation-delay: calc(var(--i, 0) * 45ms + 260ms);
        transform-origin: left center;
    }

    .dla-pane.is-shown > ul > li,
    .dla-group.is-shown {
        animation: dla-fade .3s ease both;
    }

    a.dla-fig:hover {
        transform: translateY(-1px);
    }
}

@keyframes dla-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes dla-grow {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes dla-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ═══ ความคมชัดสูง: ดำ ขาว เหลือง ═══════════════════════════════════════ */
html.tb1-contrast-high .dla-figs,
html.tb1-contrast-high .dla-fig,
html.tb1-contrast-high .dla-todo-it,
html.tb1-contrast-high .dla-act,
html.tb1-contrast-high .dla-run,
html.tb1-contrast-high .dla-tile,
html.tb1-contrast-high .dla-tool,
html.tb1-contrast-high .dla-group,
html.tb1-contrast-high .dla-todo.is-clear,
html.tb1-contrast-high .dla-tabs button[aria-selected="true"] {
    color: #ffffff !important;
    background: #000000 !important;
    border: 2px solid #facc15 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html.tb1-contrast-high .dla-fig :is(.dla-fig-k, .dla-fig-s, .dla-fig-v small),
html.tb1-contrast-high :is(.dla-todo-tx small, .dla-act small, .dla-run-meta, .dla-run-pur, .dla-tool-tx > span, .dla-tile-n small, .dla-group-h p, .dla-msg) {
    color: #ffffff !important;
}

html.tb1-contrast-high :is(.dla-fig-ic, .dla-todo-ic, .dla-act > i, .dla-tile-ic, .dla-tool-ic, .dla-group-ic, .dla-clear-ic) {
    color: #000000 !important;
    background: #facc15 !important;
}

/* ไอคอนในกล่องเหลือง: กฎกลาง html.tb1-contrast-high :where(a *) ทาเหลืองทั้งหมด จึงระบุ i ตรง ๆ */
html.tb1-contrast-high :is(.dla-fig-ic, .dla-todo-ic, .dla-tile-ic, .dla-tool-ic, .dla-group-ic, .dla-clear-ic) i,
html.tb1-contrast-high .dla-todo-go i {
    color: #000000 !important;
}

html.tb1-contrast-high :is(.dla-run-bar > i, .dla-tile-bar > i) {
    background: #facc15 !important;
}

html.tb1-contrast-high :is(.dla-when, .dla-run-left, .dla-more, .dla-run-mine, .dla-badge) {
    color: #facc15 !important;
    background: transparent !important;
}

html.tb1-contrast-high .dla-todo-go {
    color: #000000 !important;
    background: #facc15 !important;
}

/* ═══ พิมพ์: เหลือทะเบียนอย่างเดียว ═══════════════════════════════════ */
@media print {
    .dla-sec,
    .dla-find,
    .dla-figs {
        display: none !important;
    }
}

/* ★ tb1-directive-list.css ซ่อนแผงค้นหาตอนพิมพ์ด้วย .dl-panel:first-of-type — แผงแลนดิ้งมาก่อนแล้ว จึงระบุตรง ๆ */
@media print {
    .dla-page .dl-stack > .dl-panel:not(#dl-ledger) {
        display: none !important;
    }
}