/* ──────────────────────────────────────────────────────────────────────────
   view_directive.php — คำสั่งปฏิบัติงานหนึ่งฉบับ (29 ก.ย. 2569)

   หน้าตาแบบหน้าข่าว/ทะเบียนคำสั่ง:
     attendance/assets/css/attendance-dashboard.css  หัวน้ำเงิน การ์ดสรุป แผงลอย (ad-*)
     css/tb1-directives.css                          หน้าหนังสือ ไฟล์ บัญชีรายชื่อ ยืนยันลบ หน้าต่างดูหน้า (dr-*)
   ไฟล์นี้เหลือเฉพาะการประกอบสองชุด (dv-*) สีมาจากโทเคน --ad-* / --dr-* โหมดมืดตามเอง
   ────────────────────────────────────────────────────────────────────────── */

main.dv-main {
    display: block;
    padding-bottom: 3rem;
}

main.dv-main:focus {
    outline: none;
}

/* .dr :focus-visible (สีน้ำเงิน) มาทีหลังไฟล์แดชบอร์ด บนหัวน้ำเงินต้องเป็นขาว */
.dv .ad-hero :focus-visible {
    outline-color: #ffffff;
}

/* เรื่องของคำสั่งยาวได้ถึง 255 ตัวอักษร ตัวหัวจึงเล็กกว่าชื่อหน้าทั่วไป */
.dv .dv-title {
    font-size: clamp(1.45rem, 1rem + 1.6vw, 2.3rem);
    line-height: 1.35;
    max-width: 48rem;
}

/* ★ 4 พ.ย. 2569 (ครูหนึ่ง: หัวข้อยาวเต็มพื้นที่): เรื่อง 70 ตัวขึ้นไป (is-long) / 130 ตัวขึ้นไป (is-xlong · view_directive.php)
   ใช้ความกว้างทั้งคอลัมน์จนถึงการ์ดสรุป ตัวเล็กลงตามความยาว บรรทัดไม่ถูกบีบให้เท่ากัน (balance ทิ้งที่ว่างท้ายบรรทัด)
   เดิมเรื่องยาว 166 ตัวขึ้น 5 บรรทัดตัวใหญ่ในกรอบ 48rem · ตอนนี้ราว 3 บรรทัด */
.dv .dv-title.is-long,
.dv .dv-title.is-xlong {
    max-width: none;
    text-wrap: pretty;
}

.dv .dv-title.is-long {
    font-size: clamp(1.3rem, .95rem + 1.1vw, 2rem);
    line-height: 1.4;
}

.dv .dv-title.is-xlong {
    font-size: clamp(1.2rem, .9rem + .8vw, 1.75rem);
    line-height: 1.5;
}

/* สถานะช่วงปฏิบัติงานบนหัวน้ำเงิน: จุดสี + ข้อความขาว */
.dv .dv-phase {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding: .3rem .85rem .3rem .7rem;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
}

.dv .dv-phase-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
}

.dv .dv-phase.is-active .dv-phase-dot {
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .3);
}

.dv .dv-phase.is-upcoming .dv-phase-dot {
    background: #fbbf24;
}

.dv .dv-hero .ad-hero-acts {
    margin-top: 1.1rem;
}

.dv .dv-btn-delete i {
    color: #fda4af;
}

.dv .dv-card .ad-today-sub {
    white-space: normal;
}

/* ★ 4 พ.ย. 2569 (ครูหนึ่ง: "มีที่ว่างมากเกินไป"): หัวคำสั่งคอลัมน์เดียว การ์ดสรุปเป็นแถบแนวนอนใต้ปุ่ม
   เดิมการ์ดสรุป 4 แถวอยู่ขวาและสูงกว่าเรื่องคำสั่ง ฝั่งซ้ายถูกจัดกึ่งกลางแนวตั้งจึงว่างทั้งบนและล่าง
   ตอนนี้เรื่องคำสั่งกว้างเต็มแถว · ช่องสรุปเรียงตามที่ว่าง: จอคอม 4 ช่อง แท็บเล็ต 2 ช่อง โทรศัพท์ 1 ช่อง
   หัวการ์ด (สรุปคำสั่ง) ซ่อนจากตา ยังเป็นชื่อของแถบสำหรับโปรแกรมอ่านหน้าจอ */
@media (min-width: 1024px) {
    .dv .dv-hero .ad-hero-top {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* display: block — จอ 680–1023px ไฟล์แดชบอร์ดแบ่งการ์ดเป็นสองคอลัมน์ (หัวการ์ด | รายการ) หัวการ์ดซ่อนแล้ว รายการจะตกไปช่องแคบ */
.dv .dv-hero .dv-card {
    display: block;
    padding: 10px;
    border-radius: 20px;
}

.dv .dv-card .ad-today-head {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 18.5rem: จอคอมได้ 4 ช่องแถวเดียว แท็บเล็ตได้ 2×2 (ไม่เหลือช่องเดียวค้างแถวล่าง) โทรศัพท์ 1 ช่อง · คนนอกมี 3 ช่องก็เต็มแถว (auto-fit) */
.dv .dv-card .ad-today {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr));
}

.dv .dv-card .ad-today-row,
.dv .dv-card .ad-today-link {
    height: 100%;
}

/* ── แผงเรียงลงมา ─────────────────────────────────────────────────────── */
.dv .dv-stack {
    display: grid;
    gap: clamp(16px, 1.6vw, 22px);
}

.dv .dv-stack > :is(.dr-flash, .dr-confirm, .dr-mine-line) {
    margin: 0;
    box-shadow: var(--ad-shadow), inset 4px 0 0 var(--dr-brand);
}

.dv .dv-stack > .dr-flash.is-success {
    box-shadow: var(--ad-shadow), inset 4px 0 0 var(--dr-ok-mark, #047857);
}

.dv .dv-stack > .dr-confirm {
    box-shadow: var(--ad-shadow), inset 4px 0 0 var(--dr-warn);
}

/* รายละเอียด + หมายเหตุ วางคู่กันบนจอกว้าง */
.dv .dv-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: clamp(16px, 1.6vw, 22px);
    align-items: start;
}

.dv .dv-panel {
    scroll-margin-top: 5rem;
}

.dv .dv-panel .dr-facts {
    margin-top: 0;
}

.dv .dv-panel .dr-docs:last-child,
.dv .dv-panel .dr-more-pages:last-child {
    margin-bottom: 0;
}

.dv .dv-locked p + p {
    margin-top: .6rem;
}

.dv .dv-locked p {
    color: var(--dr-ink-2);
}

.dv .dr-back {
    margin: 0;
    padding-top: 0;
    border-top: 0;
}

/* ── ความคมชัดสูง: ดำ ขาว เหลือง ───────────────────────────────────────── */
html.tb1-contrast-high .dv .dv-phase {
    color: #ffffff !important;
    background: #000000 !important;
    border: 2px solid #facc15 !important;
}

html.tb1-contrast-high .dv .dv-phase-dot {
    background: #facc15 !important;
    box-shadow: none !important;
}

html.tb1-contrast-high .dv .dv-btn-delete i {
    color: #facc15 !important;
}

/* ── พิมพ์: หัวคำสั่งเป็นตัวดำบนขาว ไม่พิมพ์ปุ่ม ─────────────────────────── */
@media print {
    .dv .dv-title,
    .dv .dv-phase {
        color: #000000 !important;
        text-shadow: none !important;
    }

    .dv .dv-phase {
        background: none !important;
        border-color: #000000 !important;
    }

    .dv .ad-float-sec {
        margin-top: 0;
    }

    .dv .dv-panel,
    .dv .dv-stack > * {
        box-shadow: none !important;
    }

    .dv .dv-panel {
        break-inside: auto;
    }
}

/* ── 20 ต.ค. 2569 ไปราชการในระบบลงเวลา: แถบสีซ้ายแบบแผงรับทราบ · แถบความคืบหน้า · รายชื่อที่ยังขาด ── */
.dv .dv-travel.is-pending {
    border-left: 4px solid var(--dr-caution);
}

.dv .dv-travel.is-done {
    border-left: 4px solid var(--dr-ok-mark);
}

.dv .dv-travel-meter {
    height: 8px;
    overflow: hidden;
    background: var(--dr-paper-alt);
    border-radius: 999px;
}

.dv .dv-travel-meter span {
    display: block;
    height: 100%;
    background: var(--dr-caution);
    border-radius: inherit;
}

.dv .dv-travel.is-done .dv-travel-meter span {
    background: var(--dr-ok-mark);
}

.dv .dv-travel-text,
.dv .dv-travel-who,
.dv .dv-travel-hint {
    margin: .6rem 0 0;
    line-height: 1.6;
}

.dv .dv-travel-who b {
    color: var(--dr-caution);
}

.dv .dv-travel-hint,
.dv .dv-travel-sub {
    font-size: .85rem;
    color: var(--dr-muted);
}

.dv .dv-travel-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: .85rem 0 0;
}

.dv .dv-travel-acts .dv-travel-hint {
    margin: 0;
    flex: 1 1 16rem;
}

.dv .dv-travel-links {
    margin: .85rem 0 0;
    padding: .6rem 0 0;
    list-style: none;
    border-top: 1px solid var(--dr-line);
}

.dv .dv-travel-links li + li {
    margin-top: .35rem;
}

.dv .dv-travel-sub {
    display: block;
}

html.tb1-contrast-high .dv .dv-travel-meter span {
    background: #facc15 !important;
}