/* ──────────────────────────────────────────────────────────────────────────
   directive_list.php — ทะเบียนคำสั่งปฏิบัติงาน (29 ก.ย. 2569)

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

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

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

.dl .dl-hero-sub {
    max-width: 40rem;
}

/* แผงเรียงลงมา ห่างเท่ากัน */
.dl .dl-stack {
    display: grid;
    gap: clamp(16px, 1.6vw, 22px);
}

.dl .dl-stack > .dr-flash {
    margin: 0;
    box-shadow: var(--ad-shadow);
}

/* ── แผงค้นหา: ตัวกรองไม่ต้องมีกล่องซ้อนในแผงอีกชั้น ───────────────────── */
.dl .dl-panel .dr-filter {
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
}

.dl .dl-panel .dr-locked {
    margin: 0 0 14px;
}

.dl .dl-checks {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    flex-basis: 100%;
}

.dl .dl-checks .dr-check {
    min-height: 2.5rem;
}

/* ── แผงทะเบียน ────────────────────────────────────────────────────────── */
.dl .ad-panel-sub.dr-result {
    margin-top: 0;
    color: var(--ad-muted);
}

.dl .ad-panel-sub.dr-result b {
    color: var(--ad-ink);
}

.dl .dl-panel .dr-ledger-wrap {
    margin-top: 0;
}

.dl .dl-panel .dr-empty {
    margin-top: 0;
}

/* ป้ายตัวกรองที่ใช้อยู่ กดเพื่อเอาออก */
.dl .dl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    flex-basis: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl .dl-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2rem;
    padding: .15rem .55rem .15rem .8rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ad-brand);
    background: var(--ad-brand-soft);
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.dl .dl-chip i {
    font-size: .8rem;
    opacity: .85;
}

.dl .dl-chip:hover {
    border-color: currentColor;
}

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

/* การ์ดภาพรวม: บรรทัดย่อยยาวได้สองบรรทัด */
.dl .dl-card .ad-today-sub {
    white-space: normal;
}

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

html.tb1-contrast-high .dl .dl-chip i {
    color: #facc15 !important;
    opacity: 1;
}

html.tb1-contrast-high .dl .ad-panel-sub.dr-result,
html.tb1-contrast-high .dl .ad-panel-sub.dr-result b {
    color: #ffffff !important;
}

@media print {
    .dl .ad-hero,
    .dl .dl-panel:first-of-type,
    .dl .dl-chips,
    .dl .dr-foot {
        display: none !important;
    }

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

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

/* ── 20 ต.ค. 2569 ตัวกรองกระชับ: ช่องค้นหา ปี วัตถุประสงค์ และปุ่มอยู่แถวเดียว ติ๊กเลือกอยู่แถวถัดไป ── */
.dl .dl-panel .dr-filter {
    gap: .6rem .75rem;
}

.dl .dr-filter-actions {
    flex: none;
}

.dl .dl-checks {
    gap: 0 1.25rem;
}

.dl .dl-checks .dr-check {
    min-height: 2.25rem;
}

@media (max-width: 640px) {
    /* มือถือ: ช่องค้นหาเต็มแถว ปีกับวัตถุประสงค์ครึ่งแถวคู่กัน ปุ่มเต็มแถว */
    .dl .dl-panel .dr-filter .dr-field {
        flex: 1 1 calc(50% - .4rem);
    }

    .dl .dl-panel .dr-filter .dr-field-search,
    .dl .dr-filter-actions {
        flex: 1 1 100%;
    }

    .dl .dr-filter-actions .dr-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}