/* ──────────────────────────────────────────────────────────────────────────
   css/tb1-directive-ack.css — การรับทราบคำสั่ง (เฟส 3 · 2 ต.ค. 2569)
   ใช้ในสองหน้า: view_directive.php (แผง #dr-ack ป้ายในบัญชีรายชื่อ) และ directive_ack_report.php
   โหลดต่อจาก attendance-dashboard.css + tb1-directives.css · สีจากโทเคน --dr-* เท่านั้น
   เขียว = รับทราบแล้ว (ชุดเดียวกับ "อยู่ในช่วงปฏิบัติงาน") · ส้มเข้ม = ยังไม่รับทราบ
   ────────────────────────────────────────────────────────────────────────── */

/* ── ป้ายสถานะ ─────────────────────────────────────────────────────────── */
.dr .ak-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0 .55rem;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.6;
    border: 1px solid currentColor;
    border-radius: 999px;
    white-space: nowrap;
}

.dr .ak-chip.is-done {
    color: var(--dr-ok);
}

.dr .ak-chip.is-pending {
    color: var(--dr-caution);
}

.dr .ak-chip i {
    font-size: .72rem;
}

/* ── บรรทัดบอกผู้จัดการว่ายังไม่ได้สร้างตาราง ─────────────────────────── */
.dr .ak-setup {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem 1rem;
    color: var(--dr-ink-2);
    background: var(--dr-paper);
    border: 1px solid var(--dr-line-bold);
    border-left: 4px solid var(--dr-caution);
    border-radius: 12px;
    box-shadow: var(--dr-lift);
    line-height: 1.6;
}

.dr .ak-setup i {
    margin-top: .25rem;
    color: var(--dr-caution);
}

.dr .ak-setup code {
    font-size: .85em;
    overflow-wrap: anywhere;
}

/* ── แผงรับทราบในหน้าคำสั่ง ───────────────────────────────────────────── */
.dr .ak-panel.is-pending {
    border-left: 4px solid var(--dr-caution);
}

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

.dr .ak-panel:focus {
    outline: none;
}

.dr .ak-panel:focus-visible {
    outline: 3px solid var(--dr-brand);
    outline-offset: 2px;
}

.dr .ak-body {
    display: grid;
    gap: .75rem;
}

.dr .ak-text {
    color: var(--dr-ink-2);
    max-width: 60rem;
}

.dr .ak-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
}

.dr .ak-btn {
    min-height: 48px;
    padding-inline: 1.4rem;
    font-size: 1.02rem;
}

.dr .ak-when {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: var(--dr-ink-2);
}

.dr .ak-when i {
    margin-top: .3rem;
    color: var(--dr-ok);
}

.dr .ak-when b {
    color: var(--dr-ink);
}

/* ── หน้ารายงาน ───────────────────────────────────────────────────────── */
.ak .ak-stack {
    display: grid;
    gap: var(--ad-gap, 20px);
}

.ak .ak-title {
    font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.1rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ak .ak-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-left: auto;
}

.ak .ak-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 36px;
    padding: .2rem .85rem;
    color: var(--dr-ink-2);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--dr-paper);
    border: 1px solid var(--dr-line-bold);
    border-radius: 999px;
}

.ak .ak-filter-chip span {
    font-variant-numeric: tabular-nums;
    color: var(--dr-muted);
}

.ak .ak-filter-chip:hover {
    color: var(--dr-brand);
    border-color: var(--dr-brand);
}

.ak .ak-filter-chip.is-on {
    color: #ffffff;
    background: var(--dr-navy);
    border-color: var(--dr-navy);
}

.ak .ak-filter-chip.is-on span {
    color: #ffffff;
}

/* ตารางรายชื่อ */
.ak .ak-table-wrap {
    overflow-x: auto;
    position: relative;
}

.ak .ak-table {
    width: 100%;
    border-collapse: collapse;
}

.ak .ak-table th,
.ak .ak-table td {
    padding: .7rem .7rem;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--dr-line);
}

.ak .ak-table thead th {
    padding-block: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--dr-muted);
    border-top: 0;
    border-bottom: 2px solid var(--dr-line-bold);
}

.ak .ak-table tr.is-pending td:nth-child(1) {
    box-shadow: inset 3px 0 0 var(--dr-caution);
}

.ak .ak-table tr.is-done td:nth-child(1) {
    box-shadow: inset 3px 0 0 var(--dr-ok-mark);
}

.ak .ak-col-pick {
    width: 2.75rem;
    text-align: center !important;
}

.ak .ak-col-no {
    width: 3rem;
    color: var(--dr-muted);
    font-variant-numeric: tabular-nums;
}

.ak .ak-col-pos {
    color: var(--dr-ink-2);
}

.ak .ak-col-state {
    width: 15rem;
}

.ak .ak-col-sign {
    display: none;
}

.ak .ak-pick,
.ak .ak-pick-all {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.ak .ak-pick input,
.ak .ak-pick-all input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--dr-brand);
}

.ak .ak-name {
    color: var(--dr-ink);
    font-weight: 600;
    text-decoration: none;
    margin-right: .4rem;
}

.ak .ak-name:hover {
    color: var(--dr-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ak .ak-dept,
.ak .ak-when-sm,
.ak .ak-row-sub {
    display: block;
    font-size: .84rem;
    color: var(--dr-muted);
}

.ak .ak-undo {
    margin-top: .3rem;
    padding: .1rem .7rem;
    min-height: 30px;
    font: inherit;
    font-size: .82rem;
    color: var(--dr-warn);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
}

.ak .ak-undo:hover {
    color: #ffffff;
    background: var(--dr-danger-fill);
    border-color: var(--dr-danger-fill);
}

.ak .ak-record-bar {
    position: sticky;
    bottom: 12px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin-top: 1rem;
    padding: .8rem 1rem;
    background: var(--dr-paper);
    border: 1px solid var(--dr-line-bold);
    border-left: 4px solid var(--dr-brand);
    border-radius: 14px;
    box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .45);
}

.ak .ak-record-text {
    flex: 1 1 16rem;
    color: var(--dr-ink-2);
}

.ak .ak-record-text b {
    color: var(--dr-ink);
}

.ak .ak-record-text [data-ak-count] {
    font-weight: 700;
    color: var(--dr-brand);
}

.ak .ak-note {
    flex: 1 1 16rem;
}

.ak .ak-note .dr-input {
    width: 100%;
}

.ak .ak-foot {
    margin-top: .9rem;
    font-size: .86rem;
    color: var(--dr-muted);
}

/* ภาพรวม */
.ak .ak-ovfilter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}

.ak .ak-ovfilter .dr-field {
    min-width: 12rem;
}

.ak .ak-list {
    display: grid;
    gap: .6rem;
}

.ak .ak-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem);
    align-items: center;
    gap: .75rem 1.25rem;
    padding: .85rem 1rem;
    background: var(--dr-paper);
    border: 1px solid var(--dr-line);
    border-left: 4px solid var(--dr-caution);
    border-radius: 14px;
}

.ak .ak-row.is-done {
    border-left-color: var(--dr-ok-mark);
}

.ak .ak-row-t {
    display: block;
    color: var(--dr-ink);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ak .ak-row-t:hover {
    color: var(--dr-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ak .ak-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem 1rem;
    margin-top: .2rem;
    font-size: .86rem;
    color: var(--dr-muted);
}

.ak .ak-row-stat {
    display: grid;
    gap: .3rem;
}

.ak .ak-row-n {
    color: var(--dr-ink-2);
    font-variant-numeric: tabular-nums;
}

.ak .ak-row-n b {
    color: var(--dr-ink);
    font-size: 1.1rem;
}

.ak .ak-progress {
    display: block;
    height: 8px;
    overflow: hidden;
    background: var(--dr-paper-alt);
    border: 1px solid var(--dr-line-bold);
    border-radius: 999px;
}

.ak .ak-progress-fill {
    display: block;
    height: 100%;
    background: var(--dr-caution);
    border-radius: 999px;
}

.ak .ak-progress.is-done .ak-progress-fill {
    background: var(--dr-ok-mark);
}

/* หัวกระดาษใบลงชื่อ: เห็นเฉพาะตอนพิมพ์ */
.ak .ak-print-head {
    display: none;
}

@media screen and (max-width: 760px) {
    .ak .ak-row {
        grid-template-columns: 1fr;
    }

    .ak .ak-filter {
        margin-left: 0;
        width: 100%;
    }

    .ak .ak-table thead {
        display: none;
    }

    .ak .ak-table,
    .ak .ak-table tbody,
    .ak .ak-table tr,
    .ak .ak-table td {
        display: block;
        width: 100%;
    }

    .ak .ak-table tr {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: .1rem .6rem;
        padding: .7rem .4rem;
        border-top: 1px solid var(--dr-line);
    }

    .ak .ak-table td {
        padding: 0;
        border: 0;
        box-shadow: none !important;
    }

    .ak .ak-table td.ak-col-pick {
        grid-row: 1 / span 3;
        width: auto;
    }

    .ak .ak-table td.ak-col-no {
        width: auto;
    }

    .ak .ak-table td.ak-col-pos,
    .ak .ak-table td.ak-col-state {
        grid-column: 3;
        width: auto;
    }

    .ak .ak-table td.ak-col-sign {
        display: none !important;
    }

    .ak .ak-table tr.is-pending {
        box-shadow: inset 3px 0 0 var(--dr-caution);
    }

    .ak .ak-table tr.is-done {
        box-shadow: inset 3px 0 0 var(--dr-ok-mark);
    }

    .ak .ak-record-bar {
        bottom: 6px;
    }
}

/* ── คอนทราสต์สูง: ดำ ขาว เหลือง ─────────────────────────────────────── */
html.tb1-contrast-high .dr :where(.ak-setup, .ak-row, .ak-record-bar, .ak-filter-chip, .ak-progress) {
    background: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
}

html.tb1-contrast-high .dr :where(.ak-chip, .ak-setup i, .ak-when i, .ak-undo) {
    color: #facc15 !important;
    border-color: #facc15 !important;
}

html.tb1-contrast-high .dr :where(.ak-text, .ak-when, .ak-dept, .ak-when-sm, .ak-row-sub, .ak-row-meta, .ak-row-n, .ak-col-no,
    .ak-col-pos, .ak-foot, .ak-record-text, .ak-filter-chip span) {
    color: #ffffff !important;
}

html.tb1-contrast-high .dr .ak-filter-chip.is-on {
    color: #000000 !important;
    background: #facc15 !important;
    border-color: #facc15 !important;
}

html.tb1-contrast-high .dr .ak-filter-chip.is-on span {
    color: #000000 !important;
}

html.tb1-contrast-high .dr .ak-progress-fill {
    background: #facc15 !important;
}

html.tb1-contrast-high .dr :where(.ak-panel.is-pending, .ak-panel.is-done, .ak-row, .ak-record-bar) {
    border-left: 4px solid #facc15 !important;
}

html.tb1-contrast-high .dr .ak-table :where(th, td) {
    border-color: #ffffff !important;
    box-shadow: none !important;
}

/* ── พิมพ์: ใบลงชื่อรับทราบคำสั่ง ─────────────────────────────────────── */
@media print {
    body.ak-page {
        background: #ffffff !important;
    }

    .ak .ak-hero,
    .ak .dr-flash,
    .ak .ak-setup,
    .ak .ak-filter,
    .ak .ak-record-bar,
    .ak .ak-col-pick,
    .ak .ak-undo,
    .ak .ak-foot,
    .ak .ak-ovfilter,
    .ak .ad-panel-head {
        display: none !important;
    }

    .ak .ad-float-sec {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .ak .ad-panel,
    .ak .ak-panel {
        border: 0 !important;
        box-shadow: none !important;
        background: none !important;
    }

    .ak .ad-panel-body {
        padding: 0 !important;
    }

    .ak .ak-print-head {
        display: block;
        margin-bottom: 10pt;
        color: #000000;
        text-align: center;
        line-height: 1.5;
    }

    .ak .ak-print-school {
        font-weight: 700;
        font-size: 14pt;
    }

    .ak .ak-print-doc,
    .ak .ak-print-title {
        font-size: 12pt;
    }

    .ak .ak-print-meta {
        margin-top: 4pt;
        font-size: 10pt;
    }

    .ak .ak-table {
        display: table !important;
        font-size: 11pt;
        color: #000000;
    }

    .ak .ak-table thead {
        display: table-header-group !important;
    }

    .ak .ak-table tbody {
        display: table-row-group !important;
    }

    .ak .ak-table tr {
        display: table-row !important;
        break-inside: avoid;
        box-shadow: none !important;
    }

    .ak .ak-table th,
    .ak .ak-table td {
        display: table-cell !important;
        padding: 5pt 6pt !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
        box-shadow: none !important;
    }

    .ak .ak-col-sign {
        display: table-cell !important;
        width: 30%;
    }

    .ak .ak-chip {
        border: 0 !important;
        padding: 0 !important;
        color: #000000 !important;
    }

    .ak .ak-chip i {
        display: none;
    }

    .ak .ak-name {
        color: #000000 !important;
    }

    .ak .ak-row {
        break-inside: avoid;
        border: 1px solid #000000 !important;
    }

    /* ใบลงชื่อ: คอลัมน์คงที่ ช่องลายมือชื่อกว้างพอเซ็น ไม่มีช่องติ๊ก */
    .ak .ak-table {
        table-layout: fixed;
    }

    .ak .ak-table .ak-col-pick {
        display: none !important;
    }

    .ak .ak-table .ak-col-no {
        width: 7%;
        text-align: center;
    }

    .ak .ak-table th:nth-child(3),
    .ak .ak-table td.ak-col-name {
        width: 27%;
    }

    .ak .ak-table .ak-col-pos {
        width: 25%;
    }

    .ak .ak-table .ak-col-state {
        width: 17%;
    }

    .ak .ak-table .ak-col-sign {
        width: 24%;
    }

    .ak .ak-dept,
    .ak .ak-when-sm {
        color: #000000 !important;
        font-size: 9pt;
    }

    .ak .dr-removed {
        color: #000000 !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        font-size: 9pt;
    }
}

/* ── ทะเบียนคำสั่ง (directive_list.php) ───────────────────────────────── */
.dr a.ak-chip {
    text-decoration: none;
}

.dr a.ak-chip:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dr .ak-count {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--dr-caution);
    text-decoration: none;
    white-space: nowrap;
}

.dr .ak-count.is-done {
    color: var(--dr-ok);
}

.dr .ak-count:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html.tb1-contrast-high .dr .ak-count {
    color: #facc15 !important;
}