/*
 * themes/pp/public/pp.css — class ของแอป · 53 §7.3
 *
 * 🔴 ทุก class ในไฟล์นี้มีอยู่เพราะ CSP ที่ ship คือ `script-src 'self'; style-src 'self'`
 *    → **ห้ามมี `style=` inline ในเทมเพลตของ component ใด ๆ** (53 §0.10 · §10.2)
 *    ถ้าหน้าจอไหนต้องการรูปแบบใหม่ ให้เพิ่ม class ที่นี่ ไม่ใช่ใส่ style ที่ template
 * 🔴 ห้าม hardcode สี — ใช้ตัวแปรจาก pp-tokens.css เท่านั้น
 */

/* ── พื้นฐาน ──────────────────────────────────────────────────────────── */
.pp-body {
    margin: 0;
    background: var(--pp-bg);
    color: var(--pp-text);
    font-family: var(--pp-font);
    font-size: var(--pp-font-size);
    line-height: var(--pp-line-height);
}

.pp-body--public {
    /* หน้าคนขับใช้บนมือถือเสมอ — เผื่อขอบจอที่มี notch */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/*
 * 🔴 เกณฑ์มือถือของ [23 §0.1] — ทุกปุ่มของ SCR-05/06/P-01/P-02 ต้องแตะได้ ≥ 44px
 *    ใส่ผ่าน `extendTheme` part ของ ui ด้วย (bootstrap.ts) จึงครอบคลุมปุ่มของ library ด้วย
 */
.pp-tap {
    min-width: var(--pp-tap-size);
    min-height: var(--pp-tap-size);
}

/* ── shell ────────────────────────────────────────────────────────────── */
.pp-shell { display: flex; flex-direction: column; min-height: 100vh; }

.pp-shell__bar {
    display: flex;
    align-items: center;
    gap: var(--pp-space-3);
    min-height: var(--pp-bar-height);
    padding: 0 var(--pp-space-4);
    background: var(--pp-surface);
    border-bottom: 1px solid var(--pp-border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.pp-shell__title { font-weight: 600; flex: 1 1 auto; }
.pp-shell__user { color: var(--pp-text-muted); font-size: var(--pp-font-size-sm); }
.pp-shell__body { display: flex; flex: 1 1 auto; min-height: 0; }
.pp-shell__main { flex: 1 1 auto; min-width: 0; padding: var(--pp-space-4); }

.pp-shell__error,
.pp-shell__frozen {
    margin: 0;
    padding: var(--pp-space-3) var(--pp-space-4);
    background: var(--pp-danger-bg);
    color: var(--pp-danger);
    font-weight: 600;
}

/* แถบ write-freeze ต้องค้างบนสุดทุกหน้า [48 §2.2] */
.pp-shell__frozen { background: var(--pp-warning-bg); color: var(--pp-warning); }

/* ── สวมสิทธิ์ (SCR-36) — ต้องเด่นจนมองข้ามไม่ได้ ─────────────────────── */
.pp-impersonation {
    display: flex;
    align-items: center;
    gap: var(--pp-space-3);
    padding: var(--pp-space-2) var(--pp-space-4);
    background: var(--pp-impersonate-bg);
    color: var(--pp-impersonate-text);
    font-weight: 600;
}
.pp-impersonation__text { flex: 1 1 auto; }
.pp-impersonation__error { color: var(--pp-danger-bg); font-weight: 400; }

/* ── เมนูข้าง ─────────────────────────────────────────────────────────── */
.pp-sidemenu {
    flex: 0 0 var(--pp-sidemenu-width);
    background: var(--pp-surface);
    border-right: 1px solid var(--pp-border);
    padding: var(--pp-space-3) 0;
    overflow-y: auto;
}
.pp-sidemenu__group { padding: var(--pp-space-2) 0; }
.pp-sidemenu__group-title {
    margin: 0;
    padding: var(--pp-space-2) var(--pp-space-4);
    font-size: var(--pp-font-size-sm);
    color: var(--pp-text-muted);
    text-transform: none;
}
.pp-sidemenu__list { list-style: none; margin: 0; padding: 0; }
.pp-sidemenu__link {
    display: flex;
    align-items: center;
    padding: var(--pp-space-3) var(--pp-space-4);
    color: var(--pp-text);
    text-decoration: none;
}
.pp-sidemenu__link:hover,
.pp-sidemenu__link:focus-visible { background: var(--pp-surface-alt); }

@media (max-width: 768px) {
    /* มือถือ: เมนูทับเนื้อหาแทนที่จะเบียด */
    .pp-sidemenu {
        position: fixed;
        inset: var(--pp-bar-height) auto 0 0;
        width: var(--pp-sidemenu-width);
        z-index: 30;
    }
}

/* ── โครงหน้า (pp-page) ──────────────────────────────────────────────── */
.pp-page { display: flex; flex-direction: column; gap: var(--pp-space-4); }
.pp-page__head { display: flex; flex-direction: column; gap: var(--pp-space-1); }
.pp-page__crumbs { display: flex; flex-wrap: wrap; gap: var(--pp-space-2); font-size: var(--pp-font-size-sm); }
.pp-page__crumb { color: var(--pp-text-muted); }
.pp-page__title { margin: 0; font-size: 1.4rem; }
.pp-page__subtitle { margin: 0; color: var(--pp-text-muted); font-size: var(--pp-font-size-sm); }
.pp-page__body { display: flex; flex-direction: column; gap: var(--pp-space-4); }
.pp-page__actions,
.pp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pp-space-3);
    padding-top: var(--pp-space-3);
    border-top: 1px solid var(--pp-border);
}

/* ── ตัวเลข ───────────────────────────────────────────────────────────── */
.pp-num { font-variant-numeric: tabular-nums; }

/*
 * 🔴 DEF-077 — ค่าติดลบเป็นสีแดง **และแสดงตามจริง**
 *    ระบบเดิมใช้ Math.max(x, 0) ซ่อนยอดติดลบ ทำให้ −497,531 ชิ้นไม่มีใครเห็น
 */
.pp-num--neg { color: var(--pp-negative); font-weight: 600; }
.pp-num--empty { color: var(--pp-text-muted); }
.pp-num--invalid { color: var(--pp-warning); }
.pp-num__unit { color: var(--pp-text-muted); font-size: var(--pp-font-size-sm); }

/* ตัวเลขที่คลิกได้ → เปิด ledger drill · เป็น <button> จึงต้องล้างหน้าตาปุ่มทิ้ง */
.pp-linknum {
    background: none;
    border: 0;
    padding: 0;
    color: var(--pp-primary);
    text-decoration: underline;
    font: inherit;
    cursor: pointer;
}

/* ── เงิน (F-28) ─────────────────────────────────────────────────────── */
.pp-money { margin: 0; }
.pp-money__row { display: flex; justify-content: space-between; gap: var(--pp-space-4); }
.pp-money__row dt { color: var(--pp-text-muted); font-weight: 400; }
.pp-money__row dd { margin: 0; }
.pp-money__row--total { border-top: 1px solid var(--pp-border); padding-top: var(--pp-space-1); font-weight: 600; }

/* ── ลายเซ็น ─────────────────────────────────────────────────────────── */
.pp-sign { display: flex; flex-direction: column; gap: var(--pp-space-2); }
.pp-sign__label { font-weight: 600; }

/*
 * 🔴 touch-action:none จำเป็น — ถ้าไม่มี นิ้วจะเลื่อนหน้าจอแทนการวาด (53 §7.3)
 *    ใส่ที่นี่ไม่ใช่ที่ attribute เพราะ CSP `style-src 'self'` บล็อก inline style
 */
.pp-sign-pad {
    touch-action: none;
    width: 100%;
    height: var(--pp-sign-pad-height);
    background: var(--pp-surface);
    border: 1px dashed var(--pp-border);
    border-radius: var(--pp-radius);
}
.pp-sign__foot { display: flex; gap: var(--pp-space-2); }
.pp-sign__error { margin: 0; color: var(--pp-danger); }

/* ── อัปโหลดไฟล์ ─────────────────────────────────────────────────────── */
.pp-upload { display: flex; flex-direction: column; gap: var(--pp-space-2); }
.pp-upload__label { font-weight: 600; }
.pp-upload__count { margin: 0; color: var(--pp-text-muted); font-size: var(--pp-font-size-sm); }

/* 🔴 DEF-088 — ไฟล์ที่ถูกปฏิเสธต้องมีบรรทัดของตัวเอง ห้ามหายเงียบ */
.pp-upload__errors,
.pp-file-errors {
    margin: 0;
    padding-left: var(--pp-space-5);
    color: var(--pp-danger);
}

/* zone ของ ckn-file-upload (ผูกผ่าน extendTheme part `fileUpload.zone`) */
.pp-upload-zone {
    min-height: 96px;
    padding: var(--pp-space-4);
    border: 2px dashed var(--pp-border);
    border-radius: var(--pp-radius);
    text-align: center;
}

/* ── QR ──────────────────────────────────────────────────────────────── */
.pp-qr { display: flex; flex-direction: column; align-items: center; gap: var(--pp-space-3); }
.pp-qr__canvas { width: 240px; height: 240px; background: #ffffff; border-radius: var(--pp-radius); }
.pp-qr__value { margin: 0; word-break: break-all; font-family: var(--pp-font-mono); font-size: var(--pp-font-size-sm); }
.pp-qr__buttons { display: flex; gap: var(--pp-space-2); flex-wrap: wrap; justify-content: center; }
.pp-qr__error { margin: 0; color: var(--pp-warning); text-align: center; }
.pp-qr__copied { margin: 0; color: var(--pp-text-muted); }

/*
 * P-01 "แสดงให้เจ้าหน้าที่สแกน" — เต็มจอ พื้นขาวสูงสุดเพื่อให้สแกนติด
 * ❓ Q-F7 — เว็บมาตรฐานไม่มี API ปรับความสว่างจอ มีแค่ screen.wakeLock (ทำใน pp-qr-code.ts)
 */
.pp-qr--full {
    position: fixed;
    inset: 0;
    z-index: 100;
    justify-content: center;
    background: #ffffff;
    padding: var(--pp-space-4);
}
.pp-qr--full .pp-qr__canvas { width: min(88vw, 88vh); height: min(88vw, 88vh); }

/* ── แผงสิทธิ์ (SCR-15 ย่อ) ──────────────────────────────────────────── */
.pp-quota { display: flex; flex-direction: column; gap: var(--pp-space-3); }
.pp-quota__cache { margin: 0; color: var(--pp-warning); font-size: var(--pp-font-size-sm); }
.pp-quota__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--pp-space-3);
}
.pp-quota__card {
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    padding: var(--pp-space-3);
}
.pp-quota__title { margin: 0 0 var(--pp-space-1); font-size: 1rem; }
.pp-quota__material { margin: 0 0 var(--pp-space-2); color: var(--pp-text-muted); font-size: var(--pp-font-size-sm); }
.pp-quota__card dl { display: grid; grid-template-columns: 1fr auto; gap: var(--pp-space-1) var(--pp-space-3); margin: 0; }
.pp-quota__card dt { color: var(--pp-text-muted); font-weight: 400; }
.pp-quota__card dd { margin: 0; text-align: end; }
.pp-quota__unlimited { color: var(--pp-text-muted); }
.pp-quota__holding { margin: 0; }
.pp-quota__asof,
.pp-asof { margin: 0; color: var(--pp-text-muted); font-size: var(--pp-font-size-sm); }

/* ── แผง Order (SCR-32) ──────────────────────────────────────────────── */
.pp-order {
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    padding: var(--pp-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--pp-space-2);
}
.pp-order__heading { margin: 0; font-size: 1.05rem; }
.pp-order__items-heading { margin: var(--pp-space-2) 0 0; font-size: 0.95rem; }
.pp-order__summary { display: grid; grid-template-columns: auto 1fr; gap: var(--pp-space-1) var(--pp-space-3); margin: 0; }
.pp-order__summary dt { color: var(--pp-text-muted); font-weight: 400; }
.pp-order__summary dd { margin: 0; }
.pp-order__missing { margin: 0; color: var(--pp-text-muted); }
.pp-order__assumed { margin: 0; color: var(--pp-warning); }
.pp-order__table { width: 100%; }

/* ── ledger drill ────────────────────────────────────────────────────── */
.pp-drill__subtitle { margin: 0 0 var(--pp-space-2); color: var(--pp-text-muted); }
.pp-drill__table { width: 100%; }
.pp-drill__total,
.pp-drill__asof { margin: 0; color: var(--pp-text-muted); font-size: var(--pp-font-size-sm); }

/* ── กล่อง error มาตรฐาน [48 §1.1] ──────────────────────────────────── */
.pp-problem { display: flex; flex-direction: column; gap: var(--pp-space-2); }
.pp-problem__title { margin: 0; font-weight: 600; }
.pp-problem__headline { margin: 0; font-weight: 600; }
.pp-problem__action { margin: 0; }
.pp-problem__buttons { display: flex; gap: var(--pp-space-2); flex-wrap: wrap; }
.pp-problem__tech { font-size: var(--pp-font-size-sm); }
.pp-problem__dl { display: grid; grid-template-columns: auto 1fr; gap: var(--pp-space-1) var(--pp-space-3); margin: var(--pp-space-2) 0 0; }
.pp-problem__dl dt { color: var(--pp-text-muted); font-weight: 400; }
.pp-problem__dl dd { margin: 0; display: flex; align-items: center; gap: var(--pp-space-2); flex-wrap: wrap; }
.pp-problem__rid { font-family: var(--pp-font-mono); word-break: break-all; }
.pp-problem__copied { color: var(--pp-text-muted); }

/* ── หน้า error เต็มจอ (SCR-34) ──────────────────────────────────────── */
.pp-error {
    max-width: 640px;
    margin: var(--pp-space-6) auto;
    display: flex;
    flex-direction: column;
    gap: var(--pp-space-3);
    text-align: center;
}
.pp-error__status { margin: 0; font-size: 3rem; font-weight: 700; color: var(--pp-text-muted); }
.pp-error__headline { margin: 0; font-size: 1.3rem; }
.pp-error__action { margin: 0; color: var(--pp-text-muted); }
.pp-error__scopes { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--pp-space-2); justify-content: center; flex-wrap: wrap; }
.pp-error__scopes li {
    padding: var(--pp-space-1) var(--pp-space-2);
    background: var(--pp-surface-alt);
    border-radius: var(--pp-radius);
    font-family: var(--pp-font-mono);
    font-size: var(--pp-font-size-sm);
}
.pp-error__buttons { display: flex; gap: var(--pp-space-3); justify-content: center; flex-wrap: wrap; }
.pp-error__search { margin: 0 auto; width: 100%; max-width: 420px; }
.pp-error__rid { margin: 0; color: var(--pp-text-muted); font-size: var(--pp-font-size-sm); }

/* ── หน้า login (server-rendered ล้วน · src/modules/main/views/main.login.cknhtml) ── */
.pp-login {
    max-width: 380px;
    margin: var(--pp-space-6) auto;
    padding: var(--pp-space-5);
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
}
.pp-login__title { margin: 0 0 var(--pp-space-1); font-size: 1.25rem; }
.pp-login__subtitle { margin: 0 0 var(--pp-space-4); color: var(--pp-text-muted); }
.pp-login__form { display: flex; flex-direction: column; gap: var(--pp-space-2); }
.pp-login__form button { margin-top: var(--pp-space-3); }
.pp-login__help { margin: var(--pp-space-4) 0 0; color: var(--pp-text-muted); font-size: var(--pp-font-size-sm); }

/* ── cell แก้ยอดในตาราง (SCR-09) ────────────────────────────────────── */
.pp-swapqty { min-width: 96px; }

/* ── บล็อกอ่านอย่างเดียวที่หลายหน้าใช้ ───────────────────────────────── */
.pp-readonly { display: grid; grid-template-columns: auto 1fr; gap: var(--pp-space-1) var(--pp-space-3); margin: 0; }
.pp-readonly dt { color: var(--pp-text-muted); font-weight: 400; }
.pp-readonly dd { margin: 0; }
.pp-readonly__line { margin: 0; }

/* ── พิมพ์ ───────────────────────────────────────────────────────────── */
@media print {
    /* ใบ POD เป็น A5 แนวนอน — 53 §7.3 */
    @page { size: A5 landscape; margin: 8mm; }

    .pp-shell__bar,
    .pp-sidemenu,
    .pp-page__actions,
    .pp-impersonation { display: none; }

    .pp-body { background: #ffffff; }
}

/* ── หน้า skeleton (UW-00) — ใช้ชั่วคราวจนกว่าหน้าจะถูก implement ───────────── */
.pp-todo {
    margin: 0;
    padding: var(--pp-space-4);
    border: 1px dashed var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-surface-alt);
    color: var(--pp-text-muted);
}

/* ── ckn-modal / ckn-confirm (ธีม bootstrap ของ ui) ────────────────────────────
 * ui ใช้ <dialog> ของเบราว์เซอร์ + markup Bootstrap (.modal-dialog/.modal-content) แต่ไม่มี `.modal` ครอบ
 * ตัวแปร `--bs-modal-*` ที่ Bootstrap กำหนดบน `.modal` จึงไม่มี → กล่องโปร่งใสไม่มีขอบ
 * ที่นี่กำหนดตัวแปรเหล่านั้นจาก token ของ PP (ใช้ได้ทั้งโหมดสว่าง/มืดโดยไม่ hardcode สี) */
.ckn-modal__modal,
.ckn-confirm__modal,
.ckn-conflict-dialog {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 520px;
    --bs-modal-padding: var(--pp-space-4, 1rem);
    --bs-modal-margin: 0.5rem;
    --bs-modal-color: var(--pp-text);
    --bs-modal-bg: var(--pp-surface);
    --bs-modal-border-color: var(--pp-border);
    --bs-modal-border-width: 1px;
    --bs-modal-border-radius: var(--pp-radius, 8px);
    --bs-modal-box-shadow: 0 12px 40px rgb(0 0 0 / 35%);
    --bs-modal-inner-border-radius: calc(var(--pp-radius, 8px) - 1px);
    --bs-modal-header-padding-x: var(--pp-space-4, 1rem);
    --bs-modal-header-padding-y: var(--pp-space-3, 0.75rem);
    --bs-modal-header-padding: var(--pp-space-3, 0.75rem) var(--pp-space-4, 1rem);
    --bs-modal-header-border-color: var(--pp-border-soft);
    --bs-modal-header-border-width: 1px;
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg: transparent;
    --bs-modal-footer-border-color: var(--pp-border-soft);
    --bs-modal-footer-border-width: 1px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pp-text);
    max-width: 100vw;
    max-height: 100vh;
}
.ckn-modal__modal::backdrop,
.ckn-confirm__modal::backdrop,
.ckn-conflict-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.ckn-modal__modal .modal-content,
.ckn-confirm__modal .modal-content { max-height: calc(100vh - 2rem); }
.ckn-modal__modal .modal-body { overflow: auto; }
.ckn-modal__modal .modal-title { font-size: 1.125rem; font-weight: 600; }
/* ปุ่มปิด (×) ของ Bootstrap เป็น SVG ดำ — ในโหมดมืดต้องกลับสี */
:root[data-theme="dark"] .ckn-modal__modal .btn-close,
:root[data-theme="dark"] .ckn-confirm__modal .btn-close { filter: invert(1) grayscale(1); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ckn-modal__modal .btn-close,
    :root:not([data-theme="light"]) .ckn-confirm__modal .btn-close { filter: invert(1) grayscale(1); }
}

/* ── SCR-33 · สถานะกำลังโหลดระหว่างเปลี่ยนหน้า ──────────────────────────────────
 * router ใส่ `.ckn-router-loading` ให้ outlet ชั้นนอกเมื่อ navigation นานเกิน `loading.delayMs` (200 ms · index.ts)
 * แสดงแถบความคืบหน้าบางที่ขอบบน — ไม่บังหน้า ไม่ขยับ layout และไม่ใช้ `style=` (CSP) */
.ckn-router-loading::before {
    content: "";
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1100;
    background: linear-gradient(90deg, transparent 0, var(--pp-accent) 40%, var(--pp-accent) 60%, transparent 100%);
    background-size: 40% 100%; background-repeat: no-repeat;
    animation: pp-route-loading 1.1s ease-in-out infinite;
}
@keyframes pp-route-loading { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) {
    .ckn-router-loading::before { animation: none; background-size: 100% 100%; opacity: 0.6; }
}

/* แถวห่อของ .pp-dl / .pp-chain ที่ต้อง loop ด้วย :for โดยไม่ทำลาย grid ของแม่ */
.pp-dl__row { display: contents; }

/* ── sprint 1: ชิ้นส่วนกลาง (doc 57 กลุ่ม 0) ── */
.pp-tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--pp-border, #d0d5dd); }
.pp-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: .5rem .875rem; cursor: pointer; font: inherit; color: inherit; }
.pp-tab--active { border-bottom-color: var(--pp-primary, #0b5cab); font-weight: 600; }
.pp-tab .pp-badge { margin-left: .375rem; }
.pp-kpi { border: 1px solid var(--pp-border, #d0d5dd); border-radius: .5rem; padding: .75rem 1rem; display: grid; gap: .25rem; }
.pp-kpi__label { font-size: .8125rem; opacity: .75; }
.pp-kpi__value { font-size: 1.5rem; font-weight: 700; }
.pp-kpi__unit { font-size: .875rem; font-weight: 400; }
.pp-kpi__delta { font-size: .8125rem; }
.pp-kpi--good { border-left: 4px solid #12805c; } .pp-kpi--warn { border-left: 4px solid #b54708; } .pp-kpi--bad { border-left: 4px solid #b42318; }
.pp-multi { position: relative; display: inline-block; }
.pp-multi__panel { position: absolute; z-index: 20; background: var(--pp-bg, #fff); border: 1px solid var(--pp-border, #d0d5dd); border-radius: .5rem; padding: .5rem; min-width: 14rem; max-height: 16rem; overflow: auto; }
.pp-date-range { align-items: center; flex-wrap: wrap; }
@media (max-width: 720px) {
  .pp-table--cards thead { display: none; }
  .pp-table--cards tr { display: block; border: 1px solid var(--pp-border, #d0d5dd); border-radius: .5rem; margin-bottom: .5rem; padding: .25rem .5rem; }
  .pp-table--cards td { display: flex; justify-content: space-between; gap: 1rem; border: 0; }
  .pp-table--cards td[data-label]::before { content: attr(data-label); opacity: .7; }
}