/* ฟอนต์หลักของแอป: IBM Plex Sans Thai (self-host จาก Google Fonts, thai + latin, 400/500/700, SIL OFL)
   ไม่มีไฟล์น้ำหนัก 600: ไฟล์ 500 ประกาศรับช่วง 500-600 ไว้ เพราะถ้าปล่อยไว้ เบราว์เซอร์จะวาด 600 ด้วยไฟล์ 700
   หัวข้อ หัวตาราง ปุ่ม ที่ตั้ง 600 เลยหนาเต็มทั้งเว็บ (เจอ 2026-10-10 ผู้ใช้ติว่าปุ่มหนา) ตัวหนาจริงให้ใช้ 700
   ตัวเลขของ Plex กว้างเท่ากันทุกหลักอยู่แล้ว (advance 600 ทุกตัว) คอลัมน์เงินจึงเรียงตรงโดยไม่ต้องมีฟอนต์ตัวเลขเสริม
   เปลี่ยนฟอนต์ = แก้ --kk-font ด้านล่าง + KkTheme.Typography ให้ตรงกัน
   ถ้าฟอนต์ใหม่ตัวเลขกว้างไม่เท่ากัน (เช่น Prompt, LINE Seed) ต้องทำฟอนต์ตัวเลขแยกมาวางหน้ามัน
   ไม่งั้นคอลัมน์เงินจะไม่ตรงกัน ดู docs/progress.md หัวข้อ KkNum */
@font-face {
    font-family: 'IBM Plex Sans Thai';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/plexthai-400-thai.woff2') format('woff2');
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
    font-family: 'IBM Plex Sans Thai';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/plexthai-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Thai';
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url('fonts/plexthai-500-thai.woff2') format('woff2');
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
    font-family: 'IBM Plex Sans Thai';
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url('fonts/plexthai-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Thai';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/plexthai-700-thai.woff2') format('woff2');
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
    font-family: 'IBM Plex Sans Thai';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/plexthai-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --kk-font: 'IBM Plex Sans Thai', sans-serif;

    /* สีกลางและมุมโค้งที่ class kk-* ใช้ร่วมกัน แก้ที่นี่ที่เดียว (เดิมเขียนค่าตายตัวซ้ำกันราว 180 จุด)
       ค่าสีต้องตรงกับ KkTheme.PaletteLight */
    --kk-ink: #292928;       /* ตัวอักษรหลัก แถบบน */
    --kk-text-2: #6F726F;    /* ตัวอักษรรอง */
    --kk-text-3: #44464A;    /* ตัวอักษรเมนู หัวตาราง */
    --kk-line: #E4E5E7;      /* เส้นขอบ เส้นคั่น */
    --kk-fill: #F2F3F4;      /* พื้นเทาอ่อนของป้าย รูปย่อ แถว hover */
    --kk-page: #FFFFFF;      /* พื้นหน้า */
    --kk-accent: #0F6CBD;    /* สีเน้นสีเดียวของเว็บ = Primary ใน KkTheme */
    --kk-selected: #EBF3FC;  /* พื้นของรายการที่เลือก (ฟ้าอ่อน) */
    --kk-radius: 4px;        /* การ์ด ช่องกรอก ปุ่ม */
    --kk-radius-sm: 2px;     /* ของชิ้นเล็ก */
}

html, body {
    font-family: var(--kk-font);
    background-color: var(--kk-page);
}

/* ช่องกรอกตัวเลขชิดขวา (มาตรฐาน ERP — ตัวเลขอ่านจากหลักขวาเข้ามา)

   เดิมในตารางคีย์เอกสารหัวคอลัมน์ "จำนวน / ราคา/หน่วย / ส่วนลด" ชิดขวา (`<td style="text-align:right">`)
   แต่ค่าที่พิมพ์ชิดซ้าย เพราะ MudBlazor ตั้ง text-align ของ `.mud-input-root` เอง
   ตัว `<input>` จึงไม่รับ text-align ที่ตกทอดมาจาก `<td>` — หัวกับค่าเลยไม่ตรงกันทั้ง 6 หน้า
   (ใบเสนอราคา · ใบกำกับภาษี · ขาย · รับ · เบิกภายใน · ปรับยอด)

   เลือกด้วย `inputmode` ไม่ใช่ class เพราะ **MudNumericField ไม่มี class เฉพาะของตัวเอง**
   (ตรวจ DOM แล้ว: ได้ `mud-input-root mud-input-root-text` เหมือน MudTextField เป๊ะ)
   ที่ต่างคือ MudBlazor ใส่ inputmode="decimal" ให้ชนิดทศนิยม และ "numeric" ให้ชนิดจำนวนเต็ม
   ส่วน MudTextField/MudSelect เป็น "text" จึงไม่โดน — ครอบคลุมทั้งในตารางและในฟอร์ม */
.mud-input input[inputmode="decimal"],
.mud-input input[inputmode="numeric"] {
    text-align: right;
}

/* ===== ดีไซน์ KongKlung (port จาก mobile_android / flutter viewer) ===== */

/* --- หน้า login (mirror cloud_activity_login.xml) --- */
.kk-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--kk-fill);
}

.kk-auth-card {
    background: #FFFFFF;
    width: 100%;
    max-width: 400px;
    border-radius: var(--kk-radius);
    padding: 32px 28px 24px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.kk-auth-logo {
    height: 92px;
    object-fit: contain;
    align-self: center;
}

/* เส้นสีเน้นใต้โลโก้ (เดิมเขียวมะนาวตามแอปมือถือ เปลี่ยนเป็นสีเน้นของเว็บ 2026-10-10) */
.kk-accent-rule {
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--kk-accent);
    align-self: center;
    margin-top: 18px;
}

/* กล่องร้านที่เชื่อมต่อ (Cloud mode) เหนือช่องกรอก ใช้พื้น/ขอบ/radius เดียวกับช่องกรอก */
.kk-auth-shop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--kk-fill);
    border: 1px solid var(--kk-line);
    border-radius: var(--kk-radius);
    padding: 10px 14px;
    margin-top: 4px;
}

.kk-auth-shop-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kk-auth-shop-label {
    font-family: var(--kk-font);
    font-size: 11px;
    color: var(--kk-text-2);
    line-height: 1.3;
}

.kk-auth-shop-name {
    font-family: var(--kk-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--kk-ink);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ปุ่มไอคอนสลับร้าน ขวาของกล่องร้าน */
.kk-auth-shop-switch {
    color: var(--kk-ink);
    flex-shrink: 0;
    margin-right: -6px;
}

.kk-auth-shop-switch:hover {
    background: rgba(41, 41, 40, 0.06);
}

/* ช่องกรอก (bg_auth_field: พื้น #F2F3F4 radius 12 ขอบ #E4E5E7 → focus #292928)
   font-size ห้ามต่ำกว่า 16px: iOS Safari ซูมเข้าเองเมื่อแตะช่องกรอกที่ตัวเล็กกว่านั้น แล้วไม่ซูมกลับ
   หลัง login หน้าเลยค้างขยายราว 115% ล้นจอ แถบล่างหลุดขอบ ต้องจีบนิ้วซูมออกเอง (เจอบน iPhone 2026-10-06) */
.kk-auth-field {
    font-family: var(--kk-font);
    font-size: 16px;
    color: var(--kk-ink);
    background: var(--kk-fill);
    border: 1px solid var(--kk-line);
    border-radius: var(--kk-radius);
    padding: 14px;
    margin-top: 12px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.kk-auth-field::placeholder {
    color: var(--kk-text-2);
}

.kk-auth-field:focus {
    border: 1.5px solid var(--kk-ink);
    padding: 13.5px;
}

/* ปุ่มหลัก (สูง 52 สีเน้น ตัวหนังสือขาว เดิมเขียวมะนาว) */
.kk-auth-button {
    font-family: var(--kk-font);
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--kk-accent);
    border: none;
    border-radius: var(--kk-radius);
    height: 52px;
    width: 100%;
    margin-top: 24px;
    cursor: pointer;
    transition: background 120ms;
}

.kk-auth-button:hover:not(:disabled) {
    background: #0C5AA0;
}

.kk-auth-button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ลิงก์ใต้ปุ่มหลักของหน้า login (เปลี่ยนอีเมล ส่งรหัสอีกครั้ง ใช้รหัสลงทะเบียนแทน) */
.kk-auth-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 14px;
}

.kk-auth-links-center {
    justify-content: center;
}

.kk-auth-link {
    font-family: var(--kk-font);
    font-size: 14px;
    color: var(--kk-accent);
    background: none;
    border: none;
    padding: 6px 0;
    cursor: pointer;
}

.kk-auth-link:hover:not(:disabled) {
    text-decoration: underline;
}

.kk-auth-link:disabled {
    opacity: 0.6;
    cursor: default;
}

.kk-auth-link-muted {
    font-family: var(--kk-font);
    font-size: 14px;
    color: var(--kk-text-2);
    padding: 6px 0;
}

/* ข้อความเล็กใต้ช่องกรอก (แจ้งการใช้อีเมล ดูกล่องจดหมายขยะ) */
.kk-auth-note {
    font-family: var(--kk-font);
    font-size: 12px;
    line-height: 1.5;
    color: var(--kk-text-2);
    margin-top: 8px;
}

/* ช่องรหัส 6 หลัก: ตัวใหญ่ เว้นระยะ กึ่งกลาง อ่านเทียบกับเมลง่าย */
.kk-auth-code {
    font-size: 22px;
    letter-spacing: 8px;
    text-align: center;
}

.kk-auth-code::placeholder {
    font-size: 16px;
    letter-spacing: normal;
}

/* --- โลโก้บน appbar ดำ: wordmark ดำ → กลับสีเป็นขาว --- */
.kk-appbar-logo {
    height: 26px;
    filter: invert(1) brightness(2);
}

/* ปุ่มผู้ใช้บน appbar: ทรงเม็ดยา (มุมมน) แต่เป็น MudButton เพราะ MudChip ใช้เป็น activator ของ MudMenu ไม่ได้
   สีเป็นขาวโปร่งบนแถบดำ ไม่ใช่เขียวมะนาว (user เคาะ 2026-09-30: ไลม์บนแถบดำแย่งสายตาจากปุ่มบันทึก
   ซึ่งควรเป็นจุดเด่นจุดเดียวของหน้า) */
.kk-appbar-user {
    border-radius: 999px;
    text-transform: none;
    padding-inline: 12px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .20);
}

.kk-appbar-user:hover {
    background: rgba(255, 255, 255, .16);
}

/* ปุ่มบันทึกในแถบหัวหน้า: ปุ่มหลักสีเน้น (Color.Primary) กว้างกว่าปุ่มอื่นเล็กน้อย
   เดิมพื้นดำ ไอคอนเขียวมะนาว มีเงา เปลี่ยนตอนปรับโฉมแบบ Azure: สีเน้นสีเดียว ไม่ใช้เงา */
.kk-save-btn {
    padding-inline: 16px;
}

/* --- เมนูข้างสไตล์ Clean ERP: ไอคอน outlined เทา + active = แถบเขียวมะนาว 3px --- */
.mud-drawer .mud-nav-link {
    border-radius: 0;
    margin: 0;
    min-height: 36px;
    font-size: 0.8125rem;
    color: var(--kk-text-3);
    position: relative;
    transition: background 120ms;
}

.mud-drawer .mud-nav-link .mud-nav-link-icon,
.mud-drawer .mud-nav-link .mud-icon-root {
    color: var(--kk-text-2);
    font-size: 18px;
}

.mud-drawer .mud-nav-link:hover {
    background: var(--kk-fill);
}

/* active = พื้นเทา + ตัวหนา + ขีดสีเน้น 3px ชิดซ้าย แบบเมนูของ Azure portal
   (2026-08-06 user เคยไม่เอาแถบสีตอนเป็นเขียวมะนาว รอบปรับโฉม 2026-10-10 ใส่กลับเป็นสีเน้น) */
.mud-drawer .mud-nav-link.active,
.mud-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: #EDEEEF;
    color: var(--kk-ink);
    font-weight: 600;
}

.mud-drawer .mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--kk-accent);
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon,
.mud-drawer .mud-nav-link.active .mud-icon-root {
    color: var(--kk-ink);
}

/* หัวกลุ่ม: น้ำหนักกลาง + เว้นระยะระหว่างกลุ่ม */
.mud-drawer .mud-nav-group > .mud-nav-link {
    font-weight: 500;
}

.mud-drawer .mud-navmenu > .mud-nav-group {
    margin-top: 4px;
}

/* รายการชั้นใน: เตี้ยกว่าหัวกลุ่มเล็กน้อย (ความหนาแน่นแบบ ERP) */
.mud-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
    font-size: 0.8125rem;
    min-height: 34px;
}

/* --- โครงเมนูข้าง: เมนูหลักดันปุ่มออกจากระบบลงล่างสุด --- */
.kk-nav-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kk-nav-wrap > .mud-navmenu {
    flex: 1;
    overflow-y: auto;
}

.kk-nav-bottom {
    padding-bottom: 8px;
}

/* --- หัวเมนู: ผู้ใช้ + คลัง (mirror _NavHeader ของ flutter viewer) --- */
.kk-nav-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.kk-nav-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--kk-radius);
    background: var(--kk-fill);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kk-nav-header-text {
    min-width: 0;
}

.kk-nav-header-title {
    font-weight: 600;
    color: var(--kk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-nav-header-sub {
    font-size: 12px;
    color: var(--kk-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ซ่อนหัวเมนูตอน drawer ยุบเป็น mini rail (เหลือแค่ไอคอน) */
.mud-drawer--closed .kk-nav-header {
    display: none;
}

/* --- โหมด mini rail (แท็บเลต ยุบอยู่): ต้องเหลือแค่ไอคอน ---
   MudBlazor 9.7 ไม่ซ่อน .mud-nav-link-text ให้เองตอน mini ปล่อยไว้ข้อความไทยจะ wrap
   2 บรรทัดใน rail กว้าง 68px แล้วโดน overflow:hidden ตัดครึ่ง (เห็นเป็น "ข้อ/หล" "ตั้/ค่")
   และดัน .mud-navmenu ให้กว้าง 76px > 68px = มี scrollbar แนวนอนโผล่ใต้เมนู */
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-text,
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-expand-icon {
    display: none;
}

/* ไม่เหลือข้อความแล้ว จัดไอคอนให้อยู่กลาง rail */
.mud-drawer-mini.mud-drawer--closed .mud-nav-link {
    justify-content: center;
}

.mud-drawer-mini.mud-drawer--closed .mud-nav-link .mud-nav-link-icon {
    margin-right: 0;
}

/* กันสกรอลล์แนวนอนตอน transition ยุบ/กางยังไม่จบ (ความกว้างยังไม่นิ่ง) */
.mud-drawer-mini .mud-navmenu {
    overflow-x: hidden;
}

/* --- แถบล่างมือถือ (mirror BottomNavigationBar ของ responsive_scaffold.dart) --- */
.kk-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200; /* เหนือเนื้อหา แต่ต่ำกว่า MudOverlay จอ DB version (1400) */
    display: flex;
    background: #FFFFFF;
    border-top: 1px solid var(--kk-line);
    box-shadow: 0 -1px 4px rgba(41, 41, 40, 0.06);
    padding-bottom: env(safe-area-inset-bottom); /* กัน gesture bar ทับปุ่ม */
}

.kk-bottom-item {
    flex: 1;
    min-width: 0;
    height: 56px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 2px;
    color: var(--kk-text-2);
    font-family: inherit;
}

.kk-bottom-item span {
    font-size: 11px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-bottom-item.active {
    color: var(--kk-ink);
    font-weight: 600;
}

.kk-bottom-item.active .mud-icon-root {
    color: var(--kk-ink);
}

/* sheet "เพิ่มเติม" — เมนูเต็มเลื่อนได้ในตัว */
.kk-more-sheet .kk-nav-wrap {
    overflow-y: auto;
}

/* !important จำเป็น: div เดียวกันมี pa-3 ของ MudBlazor (padding 12px !important) ซึ่งเคยทับค่านี้เงียบๆ
   ของล่างสุดของทุกหน้าเลยจมใต้แถบล่างราวหนึ่งบรรทัด (เจอบน iPhone 2026-09-30) */
.kk-content-mobile {
    padding-bottom: 76px !important; /* ความสูงแถบล่าง + ระยะหายใจ */
}

/* --- กล่องตัวกรอง (FilterPanel): จอเล็กยุบได้, >=600px กางค้างและซ่อนปุ่มยุบ ---
   ห้ามกลับไปใช้ <details>: Chrome รุ่นใหม่ render ผ่าน ::details-content + content-visibility
   ตัว UA ซ่อนเนื้อในเองเมื่อไม่มี [open] และ display ที่ลูกไม่ชนะ → กล่องตัวกรองกลายเป็นกล่องเปล่า */
.kk-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    color: var(--kk-ink);
    text-align: left;
}

.kk-filter-caret {
    margin-left: auto;
    color: var(--kk-text-2);
}

.kk-filter-note {
    margin-left: auto;
    font-size: 13px;
    font-weight: 400;
    color: var(--kk-text-2);
    white-space: nowrap;
}

.kk-filter-note + .kk-filter-caret {
    margin-left: 8px;
}

.kk-filter-body {
    display: none;
    padding-top: 8px;
}

.kk-filter-body.kk-filter-open {
    display: block;
}

/* มือถือ: ช่องกรองเรียงแถวละช่อง MudGrid เว้น 12px บนล่างทุกช่อง บวกที่ว่างเหนือช่องสำหรับ label
   ได้ช่องห่างกันราว 80px ต้องเลื่อนผ่านที่ว่างกว่าจะถึงรายการ (ผู้ใช้ติจาก iPhone 2026-09-30) ใช้กับทุกหน้ารายการ */
@media (max-width: 599.98px) {
    .kk-filter-body .mud-grid > .mud-grid-item {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

@media (min-width: 600px) {
    .kk-filter-toggle {
        display: none;
    }

    .kk-filter-body {
        display: block;
        padding-top: 0;
    }
}

/* --- จอสัมผัส: เป้ากดต้องใหญ่พอสำหรับนิ้ว (เมนูชั้นในตั้งไว้ 36px สำหรับเมาส์) --- */
@media (pointer: coarse) {
    .mud-drawer .mud-nav-link,
    .mud-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
        min-height: 48px;
    }
}

/* ข้อความที่โชว์เฉพาะจอสัมผัส — แทนข้อมูลที่เมาส์เห็นจาก tooltip (hover ไม่มีบนจอสัมผัส) */
.kk-touch-only {
    display: none;
}

@media (pointer: coarse) {
    .kk-touch-only {
        display: block;
    }
}

/* --- รูปสินค้าในตาราง (ItemThumbnail: 48x48 radius 10 พื้น #F2F3F4) --- */
.kk-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--kk-radius);
    background: var(--kk-fill);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.kk-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- dialog ยอดคงเหลือตามที่จัดเก็บ (StockLocationDialog: หัวรูปสินค้า + แถบต่ำสุด/สูงสุด
       ตาม stockbalance_location_dialog.dart ของ flutter viewer) --- */
.kk-stockloc-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kk-stockloc-thumb {
    width: 56px;
    height: 56px;
}

.kk-stockloc-zoom {
    display: block;
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: var(--kk-radius);
    background: var(--kk-fill);
    margin-bottom: 12px;
    cursor: zoom-out;
}

.kk-stockloc-minmax {
    display: flex;
    align-items: center;
    margin: 12px 0;
    padding: 10px 0;
    border-top: 1px solid var(--kk-line);
    border-bottom: 1px solid var(--kk-line);
}

.kk-stockloc-unset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--kk-text-2);
}

.kk-stockloc-stat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.kk-stockloc-stat-cap {
    font-size: 12px;
    color: var(--kk-text-2);
}

.kk-stockloc-stat-val {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.kk-stockloc-sep {
    width: 1px;
    height: 32px;
    background: var(--kk-line);
}

/* --- badge สถานะสต๊อก (StockHealth: พื้น soft + ตัวหนังสือสีสถานะ radius 10) --- */
.kk-health-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: var(--kk-radius);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* --- การ์ดรายการเคลื่อนไหว (port จาก CleanListCard/MovementItem ของ flutter viewer):
       แถบสีชนิดรายการด้านซ้าย + มุมโค้งใหญ่ + เงานุ่ม --- */
.kk-move-card {
    background: #FFFFFF;
    border-radius: var(--kk-radius);
    /* ขอบบางแทนเงา (ดู "การ์ดแบน" ท้ายไฟล์) — ตั้งทีละด้าน ไม่งั้นทับแถบสีซ้าย */
    border-top: 1px solid var(--kk-line);
    border-right: 1px solid var(--kk-line);
    border-bottom: 1px solid var(--kk-line);
    border-left: 5px solid #6F726F; /* สีจริงกำหนดจาก KkOperationStyle ที่ inline style */
    padding: 14px 16px 12px 16px;
    margin-bottom: 10px;
    transition: box-shadow .15s ease, transform .15s ease;
}

.kk-move-card:hover {
    box-shadow: 0 4px 12px rgba(41, 41, 40, 0.10);
    transform: translateY(-1px);
}

.kk-move-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.kk-move-main {
    flex: 1;
    min-width: 0; /* ให้ ellipsis ทำงานในกล่อง flex */
}

.kk-move-title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
    color: var(--kk-ink);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kk-move-sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--kk-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-move-sub .kk-dot {
    margin: 0 6px;
}

.kk-move-value {
    text-align: right;
    flex-shrink: 0;
}

.kk-move-qty {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.kk-move-qty-cap {
    font-size: 12px;
    color: var(--kk-text-2);
    white-space: nowrap;
}

.kk-move-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #EEF0F3;
}

/* ป้ายชนิดรายการ: พื้นสี soft + ตัวหนังสือสีชนิดรายการ (สีมาจาก KkOperationStyle) */
.kk-op-badge,
.kk-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--kk-radius);
    font-size: 12px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-op-badge {
    font-weight: 600;
}

.kk-meta-chip {
    background: #F7F8FA;
    color: var(--kk-text-2);
}

/* หน้าสินค้าเคลื่อนไหว: แถวข้อมูลเป็นข้อความ ไม่ใช่ป้าย (StockMovement.razor) */
.kk-move-meta-text {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
}

.kk-move-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.kk-move-info {
    font-size: 13px;
    color: var(--kk-text-2);
    line-height: 1.45;
}

/* แถบสรุปด้านบน (รับเข้า/จ่ายออก/จำนวนรายการ) */
.kk-move-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kk-move-stat {
    background: #FFFFFF;
    border-radius: var(--kk-radius);
    padding: 10px 18px;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--kk-line);
}

.kk-move-stat-cap {
    font-size: 12px;
    color: var(--kk-text-2);
}

.kk-move-stat-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--kk-ink);
}

/* การ์ดที่กดได้ทั้งใบ (หน้าคงเหลือ: กดเพื่อดูยอดตามที่จัดเก็บ) */
.kk-move-card.kk-clickable {
    cursor: pointer;
}

/* --- แถบค้นหา + ตัวกรองหน้าคงเหลือ (port จาก process_stockbalance_screen ของ flutter viewer) --- */
.kk-stock-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kk-stock-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.kk-stock-search-row .kk-stock-search {
    flex: 1 1 320px;
}

.kk-stock-search-row .kk-stock-group {
    flex: 0 1 260px;
    min-width: 200px;
}

/* พื้นขาวใส่ที่กรอบช่องกรอก ไม่ใช่ทั้งคอมโพเนนต์ เดิมใส่ทั้งก้อนเลยเห็นมุมเหลี่ยมขาวโผล่นอกขอบโค้ง */
.kk-stock-search-row .mud-input-outlined {
    background: #FFFFFF;
    border-radius: var(--mud-default-borderradius);
}

.kk-stock-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kk-stock-view {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kk-stock-count {
    font-size: 13px;
    color: var(--kk-text-2);
    white-space: nowrap;
}

/* ปุ่มกรองเปิด/ปิด (FilterPill ของ flutter): ขอบบาง พื้นขาว; เลือกแล้ว = พื้นดำ ตัวขาว
   ปุ่มสถานะ (หมด/ใกล้หมด) ตอนเลือกใช้สีของสถานะแทน ผ่าน inline style */
.kk-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kk-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 17px;
    border: 1px solid var(--kk-line);
    background: #FFFFFF;
    color: var(--kk-ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.kk-pill .mud-icon-root {
    font-size: 16px;
}

.kk-pill:hover {
    border-color: #9A9C9A;
}

.kk-pill-on {
    background: var(--kk-selected);
    border-color: var(--kk-accent);
    color: var(--kk-accent);
    font-weight: 600;
}

/* แถวปุ่มช่วงวันที่สำเร็จรูป + ปุ่มค้นหา */
.kk-preset-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* --- Dashboard (layout จาก flutter dashboard, สี KongKlung) ---
   breakpoint 600 / 1024 / max-width 1440 ใช้เลขเดียวกับ AppTokens ฝั่ง flutter */

.kk-dash-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px;
}

@media (min-width: 900px) {
    .kk-dash-page {
        padding: 24px;
    }
}

/* มือถือ: ขอบซ้ายขวาเท่าหน้าอื่น (12px จาก pa-3 ใน MainLayout) เดิมบวกอีก 16px
   ที่จอ 320px การ์ด KPI เหลือที่ไม่พอให้ตัวเลขหลักสิบล้าน */
@media (max-width: 599.98px) {
    .kk-dash-page {
        padding: 8px 0;
    }
}

.kk-dash-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.kk-dash-head-date {
    font-size: 12px;
    color: var(--kk-text-2);
}

.kk-dash-section {
    margin-top: 24px;
}

/* flex-wrap: จอ 320px หัว "ยอดขาย" + คำอธิบาย + ยอดรวม ไม่พอแถวเดียว หัวข้อเคยถูกบีบจนแตกเป็น "ยอด / ขาย" */
.kk-dash-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    border-bottom: 1px solid var(--kk-line);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.kk-dash-section-head > .mud-typography-h6 {
    white-space: nowrap;
}

.kk-dash-total {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--kk-ink);
    white-space: nowrap;
}

/* การ์ด KPI — 1 / 2 / 4 คอลัมน์ */
.kk-kpi-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .kk-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .kk-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.kk-kpi-card {
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: var(--kk-radius);
    padding: 16px 18px;
    border: 1px solid var(--kk-line);
}

.kk-kpi-cap {
    font-size: 12px;
    color: var(--kk-text-2);
}

.kk-kpi-val {
    font-size: 24px;
    font-weight: 700;
    color: var(--kk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-kpi-sub {
    font-size: 12px;
    color: var(--kk-text-2);
    margin-top: 2px;
}


/* มือถือ: การ์ดละแถวเต็มจอ 4 ใบกินเกือบทั้งจอแรก วาง 2 คอลัมน์ ตัวเลขเล็กลง หน่วย (บาท) อยู่ในหัวการ์ด ตัวเลขหลักสิบล้านจึงไม่โดนตัด */
@media (max-width: 599.98px) {
    .kk-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .kk-kpi-card {
        padding: 12px 12px;
    }

    .kk-kpi-val {
        font-size: 18px;
    }


    .kk-kpi-cap {
        padding-right: 22px; /* เว้นที่ไอคอนลายน้ำมุมขวา */
    }

    .kk-kpi-icon {
        top: 10px;
        right: 8px;
    }
}

/* จอแคบกว่า 360px (Android จอเล็ก, iPhone SE รุ่นแรก) 2 คอลัมน์เหลือที่ให้ตัวเลขราว 120px
   "35,218,012.55" โดนตัดเป็น ... วัดได้ 2026-09-30 เลยกลับเป็นใบละแถว ตัวเลขห้ามถูกซ่อน */
@media (max-width: 359.98px) {
    .kk-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ไอคอนลายน้ำมุมขวา — ห้ามรับ pointer ไม่งั้นบังทูลทิป */
.kk-kpi-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    opacity: .12;
    pointer-events: none;
}

.kk-chart-wrap {
    background: #FFFFFF;
    border-radius: var(--kk-radius);
    padding: 12px;
    border: 1px solid var(--kk-line);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

/* แท่งแนวนอน top-10 — MudBlazor 9 ไม่มี bar แนวนอน และชื่อสินค้าไทยยาวเกินแกน X */
.kk-bar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kk-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 4px;
}

.kk-bar-label {
    font-size: 13px;
    color: var(--kk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-bar-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--kk-ink);
    white-space: nowrap;
}

.kk-bar-share {
    font-weight: 500;
    color: var(--kk-text-2);
    margin-left: 6px;
}

.kk-bar-track {
    grid-column: 1 / -1;
    height: 10px;
    border-radius: var(--kk-radius-sm);
    background: var(--kk-line);
    overflow: hidden;
}

.kk-bar-fill {
    height: 100%;
    border-radius: var(--kk-radius-sm);
    transition: width .2s ease;
}

/* แถบแจ้งเว็บทดลองใช้: ตัวอักษรน้ำตาลเข้มโทนเดียวกับไอคอน "สินค้าใกล้หมด" บนหน้าแรก
   สีส้มอ่อน default ของ MudAlert Warning อ่านยากบนพื้นครีม (ผู้ใช้ 2026-10-07) */
.kk-demo-notice .mud-alert-message {
    color: #B45309;
}

.kk-demo-notice .mud-alert-message strong {
    font-weight: 700;
    margin-right: 6px;
}

.kk-demo-notice .mud-alert-message .mud-link {
    color: #B45309;
}

/* การ์ด MIN/MAX บนมือถือ: คอลัมน์ขวา คงเหลือ + เกณฑ์ตัวเล็ก */
.kk-alert-side {
    flex-shrink: 0;
    text-align: right;
}

.kk-alert-rule {
    font-size: 12px;
    color: var(--kk-text-2);
    margin-top: 2px;
}

/* MIN/MAX — เคียงกันเฉพาะจอกว้าง */
.kk-dash-tables {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

/* ช่อง grid ค่าเริ่มต้น min-width: auto ชื่อสินค้ายาว (nowrap) ในการ์ดมือถือเลยดันการ์ดทั้งใบ
   จนหน้ากว้างเกินจอ 471px ที่จอ 402px ต้องปล่อยให้หดได้ ชื่อจะถูกตัด ... แทน */
.kk-dash-tables > * {
    min-width: 0;
}

/* กราฟยอดขาย (SalesTrendChart.razor): แกน Y | พื้นที่กราฟ แล้วป้ายวันที่อยู่แถวล่างใต้พื้นที่กราฟ
   พื้นใต้เส้นเป็นไลม์ไล่จางลงล่าง (ไลม์ใช้เป็นพื้นที่ใหญ่ได้ ห้ามเป็นเส้น ดู KkChartPalette) */
.kk-trend {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 8px;
    width: 100%;
    padding: 14px 10px 4px 4px;
}

.kk-trend-y {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    text-align: right;
    font-size: 12px;
    color: var(--kk-text-2);
}

/* สูง 0 เพื่อให้กึ่งกลางตัวเลขตรงเส้นตารางพอดี */
.kk-trend-y span {
    height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.kk-trend-plot {
    position: relative;
}

.kk-trend-plot svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* SVG ถูกยืดตามจอ non-scaling-stroke ทำให้ความหนาเส้นคงที่ ไม่หนาบางตามความกว้าง */
.kk-trend-plot svg line,
.kk-trend-plot svg path {
    vector-effect: non-scaling-stroke;
}

.kk-trend-grid {
    stroke: #EEF0F1;
    stroke-width: 1;
}

.kk-trend-base {
    stroke: #D5D7D9;
    stroke-width: 1;
}

.kk-trend-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kk-trend-cols {
    position: absolute;
    inset: 0;
    display: flex;
}

.kk-trend-col {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    outline: none;
}

/* เส้นนำสายตาของวันที่ชี้อยู่ */
.kk-trend-col::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #C3C6C1;
    opacity: 0;
}

.kk-trend-dot {
    position: absolute;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: 0 0 -5px -5px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid var(--kk-ink);
    opacity: 0;
}

.kk-trend-tip {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -12px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    border-radius: var(--kk-radius-sm);
    background: var(--kk-ink);
    color: #FFFFFF;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
}

.kk-trend-tip-below {
    transform: translate(-50%, calc(100% + 12px));
}

.kk-trend-tip-start {
    left: 0;
    transform: translate(0, -12px);
}

.kk-trend-tip-end {
    left: auto;
    right: 0;
    transform: translate(0, -12px);
}

.kk-trend-tip-start.kk-trend-tip-below,
.kk-trend-tip-end.kk-trend-tip-below {
    transform: translate(0, calc(100% + 12px));
}

.kk-trend-tip-date {
    font-size: 11px;
    opacity: .7;
}

.kk-trend-tip-value {
    font-size: 13px;
    font-weight: 700;
}

.kk-trend-col:hover::before,
.kk-trend-col:focus::before,
.kk-trend-col:hover > .kk-trend-dot,
.kk-trend-col:focus > .kk-trend-dot,
.kk-trend-col:hover > .kk-trend-tip,
.kk-trend-col:focus > .kk-trend-tip {
    opacity: 1;
}

/* คลิกแล้วช่องนั้นค้าง focus พอเมาส์ไปชี้วันอื่นต้องซ่อนของวันเดิม ไม่งั้นขึ้นสองกล่อง */
.kk-trend-cols:hover > .kk-trend-col:focus:not(:hover)::before,
.kk-trend-cols:hover > .kk-trend-col:focus:not(:hover) > * {
    opacity: 0;
}

.kk-trend-x {
    grid-column: 2;
    display: flex;
    height: 18px;
    font-size: 12px;
    color: var(--kk-text-2);
}

.kk-trend-x > div {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}

.kk-trend-x span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .kk-dash-tables {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- ผังคลังสินค้า (WarehouseMap.razor) ---
   สีพื้น tile มาจาก inline style (ramp น้ำเงินทางเดียว) — ตรงนี้กำหนดแค่รูปทรง สถานะ และตัวอักษร
   tile ต้องเป็น <button> เพื่อกด/โฟกัสด้วยคีย์บอร์ดได้ จึงต้องล้างหน้าตาปุ่มของเบราว์เซอร์เอง */
.kk-map-zone {
    background: #FFFFFF;
    border-radius: var(--kk-radius);
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--kk-line);
}

.kk-map-zone-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 8px;
}

.kk-map-zone-title {
    font-weight: 600;
    color: var(--kk-ink);
}

.kk-map-zone-sub {
    font-size: 12px;
    color: var(--kk-text-2);
}

.kk-map-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}

.kk-map-row-label {
    flex: 0 0 56px;
    font-size: 12px;
    color: var(--kk-text-2);
    line-height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-map-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-width: 0;
}

.kk-map-tile {
    position: relative;
    width: 64px;
    height: 44px;
    padding: 2px 4px;
    border: 0;
    border-radius: var(--kk-radius-sm);
    background: var(--kk-fill);
    color: var(--kk-ink);
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    transition: transform .1s ease, box-shadow .1s ease;
}

/* tile ที่โชว์รหัสเต็ม (ไม่ใช่เลขช่อง) — ยืดตามรหัสได้ถึงระดับหนึ่ง ที่เหลือตัด ... + ดูเต็มใน tooltip */
.kk-map-tile-wide {
    width: auto;
    min-width: 64px;
    max-width: 180px;
    padding-inline: 8px;
}

.kk-map-tile:hover,
.kk-map-tile:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(41, 41, 40, .18);
    outline: none;
    z-index: 1;
}

.kk-map-tile-code {
    max-width: 100%;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-map-tile-val {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* ขั้นเข้มของ ramp: ตัวหนังสือขาว (ดำบนน้ำเงินเข้มได้ต่ำกว่า 4.5:1) */
.kk-map-tile-light {
    color: #FFFFFF;
}

.kk-map-tile-empty {
    background: #F7F8FA;
    color: #898781;
    box-shadow: inset 0 0 0 1px var(--kk-line);
}

.kk-map-tile-inactive {
    opacity: .6;
}

/* ติดลบ = กรอบแดง + ป้าย "!" มุมขวาบน (สีไม่ใช่ตัวบอกอย่างเดียว) */
.kk-map-tile-negative {
    box-shadow: inset 0 0 0 2px #d03b3b;
}

.kk-map-tile-neg {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #d03b3b;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* ผลค้นหา: กรอบเขียวมะนาวแบรนด์ + กระพริบเบาๆ — แยกขาดจาก ramp น้ำเงินและแดงของสถานะ */
.kk-map-tile-hit {
    outline: 3px solid #C3F832;
    outline-offset: 1px;
    z-index: 2;
    animation: kk-map-pulse 1.4s ease-in-out infinite;
}

@keyframes kk-map-pulse {
    50% { outline-color: #292928; }
}

@media (prefers-reduced-motion: reduce) {
    .kk-map-tile-hit {
        animation: none;
    }
}

.kk-map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--kk-text-3);
}

.kk-map-legend-sep {
    width: 12px;
}

/* แถวปุ่มมุมมอง (ของแน่น / เข้าออกบ่อย / ของนิ่ง) + สลับ ผัง/ตาราง ชิดขวา มือถือขึ้นบรรทัดใหม่ได้ */
.kk-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ประโยคอธิบายมุมมองที่เลือก: สีเข้มแปลว่าอะไร เอาไปทำอะไรต่อ */
.kk-map-explain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 13px;
    color: var(--kk-text-3);
}

.kk-map-explain > .mud-icon-root {
    flex-shrink: 0;
    color: var(--kk-text-2);
}

/* ข้อความยืดกินที่ที่เหลือ ไม่งั้นมือถือไอคอนค้างบรรทัดเดียวแล้วข้อความตกลงบรรทัดใหม่ */
.kk-map-explain > span {
    flex: 1 1 200px;
    min-width: 0;
}

/* ช่องเลือกจำนวนวัน: MudSelect กว้าง 100% เป็นค่าเริ่มต้น บนมือถือเคยยืดเต็มจอ */
.kk-map-explain .kk-map-days {
    flex: 0 0 120px;
    width: 120px;
    max-width: 120px;
    margin: 0;
    background: #FFFFFF;
    border-radius: var(--mud-default-borderradius);
}

/* จอ 320px ปุ่มมุมมองใบที่สาม "ของนิ่ง" ตกบรรทัดสองคนเดียว */
@media (max-width: 359.98px) {
    .kk-map-toolbar .kk-pill-row {
        gap: 6px;
    }

    .kk-map-toolbar .kk-pill {
        padding: 0 9px;
        gap: 4px;
    }
}

.kk-map-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
}

/* คำแนะนำให้ตั้งรหัสเป็นโซน-แถว-ช่อง แสดงเมื่อผังไม่มีโซนที่เป็นตารางเลย */
.kk-map-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--kk-radius);
    background: #F4FDDC;
    border: 1px solid #DDF59A;
    font-size: 13px;
    color: var(--kk-ink);
    line-height: 1.5;
}

.kk-map-tip > .mud-icon-root {
    flex-shrink: 0;
    margin-top: 1px;
}

.kk-map-swatch {
    display: inline-block;
    width: 22px;
    height: 14px;
    border-radius: 3px;
}

.kk-map-swatch-empty {
    background: #F7F8FA;
    box-shadow: inset 0 0 0 1px var(--kk-line);
}

.kk-map-swatch-neg {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 2px #d03b3b;
    color: #d03b3b;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

/* --- แถวสินค้าในหน้าบันทึกเอกสาร (Receive.razor) ---
   grid ชุดเดียว: กล่องกว้างพอเป็นตาราง กล่องแคบ (มือถือ, แท็บเล็ตแนวตั้งที่มีคอลัมน์ขวา) เป็นการ์ด
   ใช้ container query ไม่ใช่ media query เพราะกล่องนี้อยู่ในคอลัมน์ lg=8 ความกว้างจอไม่ได้บอกความกว้างกล่อง */
.kk-lines {
    container-type: inline-size;
    border: 1px solid var(--kk-line);
    border-radius: var(--kk-radius);
    overflow: hidden;
}

.kk-line {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(150px, 200px) 72px 104px 88px 96px 32px;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}

.kk-line + .kk-line {
    border-top: 1px solid var(--kk-line);
}

.kk-line-head {
    font-size: 13px;
    font-weight: 600;
    color: var(--kk-text-3);
    background: #F7F8FA;
}

.kk-line-head > .kk-line-qty,
.kk-line-head > .kk-line-cost,
.kk-line-head > .kk-line-disc,
.kk-line-head > .kk-line-total {
    text-align: right;
}

.kk-line-name {
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* ชื่อสินค้ากับเมนูสามจุดของแถว (ใบเสนอราคา ใบกำกับภาษี): ชื่อกินที่ที่เหลือ ปุ่มชิดขวาบน */
.kk-line-namerow {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.kk-line-namerow .kk-line-name {
    flex: 1 1 auto;
    min-width: 0;
}

.kk-line-namerow .mud-menu {
    flex: none;
    margin: -4px 0;
}

.kk-line-sub {
    font-size: 12px;
    color: var(--kk-text-2);
    margin-top: 2px;
}

.kk-line-total {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

.kk-line .mud-input-control {
    margin-top: 0;
}

.kk-line-qty input,
.kk-line-cost input,
.kk-line-disc input {
    text-align: right;
}

/* หัวช่องเล็กๆ เหนือช่องกรอก ใช้เฉพาะแบบการ์ด แบบตารางมีแถวหัวแล้ว */
.kk-line-cap {
    display: none;
    font-size: 12px;
    color: var(--kk-text-2);
}

/* หน้าขาย (Issue.razor): ที่จัดเก็บเป็นข้อความ (เลือกมาตั้งแต่ค้นสินค้า) แต่ราคา/ส่วนลดเป็นปุ่มที่กว้างกว่า */
.kk-lines-issue .kk-line {
    grid-template-columns: minmax(150px, 1fr) 96px 72px 110px 120px 96px 36px;
}

/* หน้าปรับยอด (Adjustment.razor): ที่จัดเก็บเป็นข้อความ มียอดในระบบ/ยอดใหม่เป็นตัวเลขอ่านอย่างเดียว และหมายเหตุ
   ผลรวมคอลัมน์ขั้นต่ำ + ช่องไฟ + padding = 782px ต้องไม่เกินจุดตัด 790px ข้างล่าง */
.kk-lines-adjust .kk-line {
    grid-template-columns: minmax(120px, 1fr) 96px 80px 104px 80px 100px minmax(90px, 180px) 32px;
}

.kk-line-onhand,
.kk-line-newqty {
    text-align: right;
    white-space: nowrap;
}

/* หน้าโอนย้าย (Transfer.razor): ที่จัดเก็บต้นทางเป็นข้อความ ทุน/หน่วยเป็นตัวเลขอ่านอย่างเดียว */
.kk-lines-transfer .kk-line {
    grid-template-columns: minmax(150px, 1fr) 150px 96px 110px 32px;
}

.kk-lines-transfer .kk-line-cost {
    text-align: right;
    white-space: nowrap;
}

/* ใบเสนอราคา (QuotationEdit.razor) และใบกำกับภาษี (InvoiceEdit.razor): ไม่มีที่จัดเก็บ (ไม่ขยับสต็อก) */
.kk-lines-quote .kk-line {
    grid-template-columns: minmax(150px, 1fr) 80px 120px 104px 104px 32px;
}

/* แถวที่ถูกปิดใช้งาน (ใบกำกับภาษี: บรรทัดที่บันทึกแล้วลบจริงไม่ได้ ปิด IsActive แทน) ไม่นับในยอดรวม
   ปุ่มนำกลับต้องยังเห็นชัด จึงจางเฉพาะเนื้อหา ไม่จางช่องปุ่ม */
.kk-line-off > :not(.kk-line-del) {
    text-decoration: line-through;
    opacity: .55;
}

/* หน้าเบิกภายใน (InternalIssue.razor): ใช้คู่กับ .kk-lines-issue (ที่จัดเก็บเป็นข้อความแบบหน้าขาย)
   ไม่มีส่วนลด มีหมายเหตุเป็นช่องกรอก ต้องอยู่หลังกฎของ .kk-lines-issue เพราะเฉพาะเจาะจงเท่ากัน */
.kk-lines-internal .kk-line {
    grid-template-columns: minmax(150px, 1fr) 96px 72px 110px 96px minmax(90px, 160px) 32px;
}

.kk-line-item-thumb {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.kk-line-item-thumb > .kk-thumb {
    flex-shrink: 0;
}

.kk-line-item-thumb > div:last-child {
    min-width: 0;
}

.kk-line-loc-code {
    display: block;
    overflow-wrap: anywhere;
}

/* ราคา (ร้านที่พิมพ์ราคาเองไม่ได้) และส่วนลด: ตัวเลขที่กดได้ หน้าตาเหมือนช่องกรอกแบบขีดเส้นใต้ข้างๆ
   กดแล้วเปิดหน้าต่างเลือกราคา/ส่วนลด คำสั่งเดียวกับเมนู ⋮ ท้ายแถว */
.kk-line-val {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 32px;
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .42);
    background: none;
    font: inherit;
    color: var(--kk-ink);
    text-align: right;
    white-space: nowrap;
    cursor: pointer;
}

.kk-line-val:disabled {
    cursor: default;
    color: #898781;
    border-bottom-style: dotted;
}

.kk-line-val-empty {
    color: #898781;
}

/* จุดตัด = ผลรวมคอลัมน์ขั้นต่ำ + ช่องไฟ + padding: รับ ~730px ขาย ~780px ใช้ค่าเดียว
   กล่องรายการที่จอคอม 1280px กว้างราว 610px จึงเป็นการ์ด จอ 1600px ขึ้นไปเป็นตาราง */
@container (max-width: 789.98px) {
    .kk-line-head {
        display: none;
    }

    /* ชื่อสินค้าเต็มบรรทัดบน + ปุ่มลบขวาบน / ที่จัดเก็บเต็มบรรทัด / จำนวน ทุน ส่วนลด สามช่องแถวเดียว / ยอดรวมขวา */
    .kk-line {
        grid-template-columns: 1fr 1fr 1fr auto;
        grid-template-areas:
            "item item item del"
            "loc  loc  loc  loc"
            "qty  cost disc disc"
            "total total total total";
        align-items: end;
        gap: 6px 10px;
        padding: 12px 14px;
    }

    .kk-line-item  { grid-area: item; align-self: start; }
    .kk-line-del   { grid-area: del; align-self: start; margin: -6px -8px 0 0; }
    .kk-line-loc   { grid-area: loc; }
    .kk-line-qty   { grid-area: qty; }
    .kk-line-cost  { grid-area: cost; }
    .kk-line-disc  { grid-area: disc; }

    .kk-line-total {
        grid-area: total;
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        gap: 8px;
        font-size: 15px;
    }

    .kk-line-cap {
        display: block;
    }

    .kk-line-name {
        font-size: 15px;
    }

    /* ต้องเขียนซ้ำ: .kk-lines-issue .kk-line (ตาราง) เฉพาะเจาะจงกว่า .kk-line ในบล็อกนี้
       หน้าขาย: ส่วนลดไม่ต้องเป็นช่อง (แก้ผ่านเมนู ⋮) ลงไปเป็นตัวเล็กซ้ายมือแถวเดียวกับ "รวม"
       จำนวนกับราคาได้ครึ่งละครึ่ง (ผู้ใช้ขอ 2026-10-01) */
    .kk-lines-issue .kk-line {
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
            "item item del"
            "loc  loc  loc"
            "qty  cost cost"
            "disc total total";
    }

    .kk-lines-issue .kk-line-disc {
        display: flex;
        align-items: baseline;
        gap: 4px;
        align-self: center;
        min-width: 0;
    }

    .kk-lines-issue .kk-line-disc .kk-line-cap {
        display: inline;
    }

    .kk-lines-issue .kk-line-disc .kk-line-val {
        width: auto;
        min-height: 0;
        padding: 0;
        border: 0;
        font-size: 13px;
        color: var(--kk-text-3);
    }

    /* ไม่มีส่วนลด = ไม่ต้องโชว์อะไรเลย */
    .kk-lines-issue .kk-line-disc:has(.kk-line-val-empty) {
        visibility: hidden;
    }

    /* หน้าขาย: ที่จัดเก็บเป็นข้อความบรรทัดเดียว "MAIN · คงเหลือ 23" ไม่ต้องมีหัวช่อง */
    .kk-lines-issue .kk-line-loc {
        display: flex;
        align-items: baseline;
        gap: 6px;
        font-size: 13px;
    }

    .kk-lines-issue .kk-line-loc::before {
        content: "ที่จัดเก็บ";
        color: var(--kk-text-2);
        font-size: 12px;
    }

    .kk-lines-issue .kk-line-loc-code {
        font-weight: 600;
    }

    /* หน้าเบิกภายใน: จำนวนกับราคาอ้างอิงครึ่งละครึ่งแบบหน้าขาย หมายเหตุเต็มแถว ยอดรวมขวาล่าง */
    .kk-lines-internal .kk-line {
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
            "item   item   del"
            "loc    loc    loc"
            "qty    cost   cost"
            "remark remark remark"
            "total  total  total";
    }

    /* หน้าปรับยอด: ยอดในระบบ | ปรับ | ยอดใหม่ อยู่แถวเดียวกันให้เห็นว่าบวกลบแล้วได้เท่าไร ต้นทุนกับหมายเหตุอยู่แถวล่าง */
    .kk-lines-adjust .kk-line {
        grid-template-columns: 1fr 1fr 1fr auto;
        grid-template-areas:
            "item   item   item   del"
            "loc    loc    loc    loc"
            "onhand qty    newqty newqty"
            "cost   remark remark remark";
    }

    .kk-line-onhand { grid-area: onhand; }
    .kk-line-newqty { grid-area: newqty; }
    .kk-line-remark { grid-area: remark; }

    .kk-lines-adjust .kk-line-onhand,
    .kk-lines-adjust .kk-line-newqty {
        display: flex;
        flex-direction: column;
        align-self: start;
        font-size: 15px;
    }

    .kk-lines-adjust .kk-line-loc {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 13px;
    }

    .kk-lines-adjust .kk-line-loc-code {
        font-weight: 600;
    }

    .kk-lines-adjust .kk-line-loc .kk-line-sub {
        margin-top: 0;
    }

    /* หน้าโอนย้าย: จำนวนโอนครึ่งซ้าย ทุน/หน่วย (อ่านอย่างเดียว) ครึ่งขวา */
    .kk-lines-transfer .kk-line {
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
            "item item del"
            "loc  loc  loc"
            "qty  cost cost";
    }

    .kk-lines-transfer .kk-line-cost {
        display: flex;
        flex-direction: column;
        align-self: start;
        font-size: 15px;
    }

    .kk-lines-transfer .kk-line-loc {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 13px;
    }

    .kk-lines-transfer .kk-line-loc-code {
        font-weight: 600;
    }

    .kk-lines-transfer .kk-line-loc .kk-line-sub {
        margin-top: 0;
    }

    /* ใบเสนอราคา/ใบกำกับภาษี: เหมือนหน้ารับแต่ไม่มีบรรทัดที่จัดเก็บ */
    .kk-lines-quote .kk-line {
        grid-template-columns: 1fr 1fr 1fr auto;
        grid-template-areas:
            "item item item del"
            "qty  cost disc disc"
            "total total total total";
    }
}

/* รายการสินค้าใน dialog รายละเอียดเอกสาร (รับ ขาย เบิกภายใน ปรับยอด โอนย้าย): ชื่อ + ยอดบรรทัด / รายละเอียดตัวเล็ก */
.kk-doc-lines {
    border: 1px solid var(--kk-line);
    border-radius: var(--kk-radius);
}

.kk-doc-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    padding: 10px 14px;
}

.kk-doc-line + .kk-doc-line {
    border-top: 1px solid var(--kk-line);
}

.kk-doc-line-name {
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.kk-doc-line-total {
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
}

.kk-doc-line-sub {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--kk-text-2);
}

/* บรรทัดล่างของการ์ดที่มีปุ่มหรือป้ายชิดขวา (IssueDocDialog: ทุน/กำไร + ยกเลิกรายการ) */
.kk-doc-line-foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    font-size: 13px;
    color: var(--kk-text-2);
}

/* รายการที่ถูกยกเลิกรายบรรทัด ขีดฆ่าเนื้อหา ไม่ขีดป้ายยกเลิก */
.kk-doc-line-off > :not(.kk-doc-line-foot),
.kk-doc-line-off > .kk-doc-line-foot > span {
    text-decoration: line-through;
    opacity: .6;
}

/* เหตุผลที่ยกเลิกรายบรรทัด ต้องอ่านออก จึงไม่ขีดฆ่าและไม่จางเหมือนเนื้อหาที่เหลือของการ์ด */
.kk-doc-line-note {
    grid-column: 1 / -1;
    font-size: 13px;
    color: #B3261E;
}

.kk-doc-line-off > .kk-doc-line-note {
    text-decoration: none;
    opacity: 1;
}

/* ช่องกรอกเต็มความกว้างใต้ชื่อสินค้า (DocEditDialog: หมายเหตุรายบรรทัด) */
.kk-doc-line-edit {
    grid-column: 1 / -1;
    margin-top: 4px;
}

/* แถวที่กดเลือกได้ใน StockItemSearchDialog ใช้โครง kk-doc-line แต่เป็น <button> ต้องล้างหน้าตาปุ่มเอง */
.kk-pick-line {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.kk-pick-lines .kk-pick-line + .kk-pick-line {
    border-top: 1px solid var(--kk-line);
}

.kk-pick-line:hover,
.kk-pick-line:focus-visible {
    background: var(--kk-fill);
    outline: none;
}

/* คอลัมน์ขวา (ราคาหรือคงเหลือ + บรรทัดเล็กใต้) กินสองแถว บรรทัดรายละเอียดจึงอยู่ใต้ชื่อพอดี
   ไม่ถูกดันลงไปใต้คอลัมน์ขวาที่สูงสองบรรทัด */
.kk-pick-line > .kk-doc-line-total {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.kk-pick-line > .kk-doc-line-sub {
    grid-column: 1;
}

/* ราคาขายแบบป้ายราคา: ตัวใหญ่สีเข้ม ตากวาดลงแนวขวาเห็นราคาทุกตัวเรียงกัน */
.kk-pick-price {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--kk-ink);
}

.kk-pick-unit {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--kk-text-2);
}

.kk-pick-loc {
    color: var(--kk-ink);
    font-weight: 600;
}

.kk-pick-locname {
    margin-left: 4px;
}

.kk-pick-pin {
    font-size: 15px !important;
    vertical-align: -3px;
}

/* ตัวเลือกใน LocationPicker: รหัสหนา ชื่อจางต่อท้าย (ชื่อที่ซ้ำกับรหัสไม่โชว์) */
.kk-loc-opt {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    line-height: 1.35;
}

.kk-loc-opt-code {
    font-weight: 600;
}

.kk-loc-opt-name {
    color: var(--kk-text-2);
}


/* ผลค้นหา "อยู่ที่ไหน" อยู่ใต้ช่องค้นหาบนสุด เป็นการ์ดขาวแบนแบบหน้าอื่น */
.kk-map-hits {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid var(--kk-line);
    border-radius: var(--kk-radius);
}

.kk-map-hits > .mud-typography {
    padding: 0 8px 4px;
}

.kk-map-hit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--kk-radius-sm);
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--kk-ink);
    text-align: left;
    cursor: pointer;
}

.kk-map-hit-row:hover {
    background: var(--kk-fill);
}

.kk-map-hit-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-map-hit-loc {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    white-space: nowrap;
}

.kk-map-hit-qty {
    color: var(--kk-text-2);
    white-space: nowrap;
}

h1:focus {
    outline: none;
}

#blazor-error-ui {
    color-scheme: light only;
    background: #FFFFC8;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* --- ยอดรวมหน้ารับสินค้า: ป้ายซ้าย ตัวเลขขวา ตัวเลขต้องเรียงหลักตรงกัน --- */
.kk-recv-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    font-size: .875rem;
    color: var(--kk-text-3);
}

.kk-recv-total > span:last-child {
}

.kk-recv-grand {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #E3E5E4;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--kk-ink);
}

/* แถวตารางที่กดเปิดรายละเอียดได้ — ต้องบอกด้วยเคอร์เซอร์ ไม่งั้นไม่มีใครรู้ว่ากดได้ */
.kk-clickable-rows tbody tr {
    cursor: pointer;
}

/* แผงยอดที่ต้องชำระในจอรับเงิน — พื้นฟ้าอ่อนของรายการที่เลือก มีแถบสีเน้นชิดซ้าย ตัวเลขเป็นดำหมึก
   (เดิมพื้นเขียวมะนาว เปลี่ยน 2026-10-10) ต้องบังคับสีลูกทุกตัว เพราะ MudText ใส่คลาสสีของตัวเองมาทับ */
.kk-pay-amount {
    background: var(--kk-selected);
    border-left: 4px solid var(--kk-accent);
    color: var(--kk-ink);
}

.kk-pay-amount .mud-typography {
    color: var(--kk-ink);
}

.kk-pay-amount .kk-pay-amount-sub {
    color: var(--kk-text-3);
}

/* ป้าย "ลด 10%" บนปุ่มส่วนลด — บอกว่าตัวเลขข้างหน้ามาจาก % ไม่ใช่บาทที่พิมพ์ไว้ตรงๆ
   (ต่างกันตรงที่ตัวเลข % จะขยับเองเมื่อจำนวน/ราคาเปลี่ยน ส่วนบาทอยู่นิ่ง) */
.kk-discount-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--kk-radius-sm);
    background: var(--kk-selected);
    color: var(--kk-accent);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* --- หน้าตั้งค่าระบบ: ป้ายชื่อซ้าย / ตัวควบคุมขวา เลียนผังของ frmConfig บนพีซี ---
   จอแคบให้ตกลงมาเป็นสองบรรทัดแทน ไม่งั้นช่องกรอกจะแคบจนพิมพ์ไม่ได้ */
.kk-config-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.kk-config-row:last-child {
    border-bottom: 0;
}

.kk-config-label {
    flex: 1 1 260px;
    min-width: 0;
}

.kk-config-editor {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 480px;
}

/* หัวเรื่อง + ปุ่มบันทึก ค้างไว้บนสุดเสมอ — ใช้ร่วมกันในหน้าที่ยาวหลายจอและมีปุ่มบันทึกเดียว
   (ตั้งค่าระบบ, กำหนดสิทธิการใช้งาน) ถ้าปล่อยให้เลื่อนหาย คนแก้ของแถวล่างๆ
   จะไม่เห็นว่ามีของค้างไม่ได้บันทึก
   top ต้องเผื่อความสูง appbar ที่ position:fixed อยู่ ไม่งั้นแถบนี้มุดใต้แถบดำ */
.kk-page-bar {
    position: sticky;
    top: var(--mud-appbar-height, 64px);
    z-index: 3;
    padding: 12px 0;
    margin-bottom: 8px;
    background: var(--mud-palette-background, #FFFFFF);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* ค่าแบบหลายแถวชื่อเดียวกัน (IssueHeaderTextReport ฯลฯ) — อ่านอย่างเดียว */
.kk-config-multi {
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 4px;
    background: rgba(0, 0, 0, .02);
    font-size: .875rem;
}

/* หัวกล่องรายการที่มีปุ่มหลายปุ่ม (InvoiceEdit: ดึงจากบิลขาย / ดึงจากใบเสนอราคา / เพิ่มสินค้าเอง)
   จอกว้าง: หัวข้อซ้าย ปุ่มขวา แถวเดียว / จอแคบ: ปุ่มลงมาเป็นแถวของตัวเอง แบ่งความกว้างกัน
   ปุ่มห้ามตัดคำ ถ้าแถวเดียวไม่พอให้ปุ่มตกไปแถวใหม่ทั้งปุ่ม */
.kk-list-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 8px;
}

.kk-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.kk-list-actions .mud-button-root {
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .kk-list-actions {
        width: 100%;
        margin-left: 0;
    }

    .kk-list-actions .mud-button-root {
        flex: 1 1 auto;
        min-height: 40px;
    }
}

/* ===== หน้าต่างดูเอกสาร (PdfViewerDialog) =====
   ปุ่มแชร์/คัดลอกต้องเป็น <button> ธรรมดาที่ JS ผูก listener เอง (ใช้ MudButton + @onclick ไม่ได้
   คลิปบอร์ดและแผ่นแชร์ต้องอยู่ใน user gesture ดู wwwroot/js/print.js) จึงแต่งเองทั้งชุด
   ปุ่มหลักสามปุ่ม (แชร์ คัดลอกเป็นรูป ดาวน์โหลด) เด่น ส่วน "เปิดในแท็บใหม่"/"ปิด" เป็นตัวรอง
   (ผู้ใช้ติจาก iPhone 2026-10-04: เดิมเป็นลิงก์ตัวหนังสือเรียงกัน ตัดบรรทัดบนจอแคบ) */
.kk-pdf-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    width: 100%;
}

.kk-pdf-main {
    display: flex;
    gap: 8px;
}

.kk-pdf-minor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    font-size: .875rem;
}

.kk-pdf-btn {
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--kk-radius);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: filter .12s ease;
}

.kk-pdf-btn[hidden] {
    display: none;
}

/* แชร์: พื้นสีเน้น ไอคอนกับตัวหนังสือสีเดียวกัน (ไอคอนรับสีจากปุ่ม).
   เดิมบังคับไอคอนเป็น --mud-palette-secondary ตอนธีมยังเป็นพื้นดำ ไอคอนไลม์ พอปรับโฉมแบบ Azure
   primary กับ secondary เป็นสีเน้นสีเดียวกัน (KkTheme.cs) ไอคอนเลยกลืนกับพื้นปุ่มจนมองไม่เห็น */
.kk-pdf-btn-share {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.kk-pdf-btn-copy {
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

.kk-pdf-btn-download {
    background: #fff;
    color: var(--mud-palette-text-primary);
    border-color: #C9CBCE;
}

.kk-pdf-btn:hover:not(:disabled) {
    filter: brightness(.94);
}

.kk-pdf-btn:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.kk-pdf-btn:disabled {
    opacity: .5;
    cursor: default;
}

/* พรีวิวแบบรูป (จอสัมผัส): กว้างเต็มกล่อง เลื่อนลงดูได้ */
.kk-pdf-image {
    max-height: 62vh;
    overflow-y: auto;
    border: 1px solid var(--kk-line);
    border-radius: var(--kk-radius);
    background: #F1F2F4;
    -webkit-overflow-scrolling: touch;
}

.kk-pdf-image img {
    display: block;
    width: 100%;
    height: auto;
}

.kk-pdf-image-wait {
    padding: 48px 16px;
    text-align: center;
    font-size: .875rem;
    color: var(--kk-text-2);
}

/* จอแคบ: ปุ่มหลักแบ่งความกว้างเท่ากัน ไอคอนอยู่บนข้อความ ตัวรองลงไปอยู่บรรทัดล่าง */
@media (max-width: 599.98px) {
    .kk-pdf-main {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        width: 100%;
    }

    .kk-pdf-btn {
        flex-direction: column;
        gap: 4px;
        min-height: 60px;
        padding: 8px 4px;
        font-size: .8rem;
    }

    .kk-pdf-minor {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }
}

/* ===== หน้าตาแบบ admin เว็บสมัยใหม่ (user เคาะ 2026-09-30) =====
   ค่าเริ่มต้นของ MudBlazor เป็น Material รุ่นเก่า: การ์ดมีเงา ช่องกรอกสูง 56px
   แก้ที่นี่ที่เดียวให้มีผลทุกหน้า (หัวข้อ h4/h5/h6 ย่อไว้ใน KkTheme.Typography) */

/* การ์ดแบน: ขอบเทาบาง 1px แทนเงา
   จำกัดไว้ใน .mud-main-content เพราะ popover/เมนู/dialog render นอกนั้น (provider อยู่นอก MudLayout)
   ของที่ลอยเหนือหน้าจึงยังมีเงาอยู่ตามเดิม */
.mud-main-content .mud-paper:not(.mud-paper-outlined),
.mud-main-content .mud-table:not(.mud-table-outlined) {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    border: 1px solid var(--kk-line);
    border-radius: var(--kk-radius);
}

/* MudTable ไม่ใช่ mud-paper (ตรวจ DOM แล้ว: mud-table + mud-elevation-1) จึงต้องอยู่ใน rule ข้างบนเอง
   overflow: hidden กันแถวล่างสุดทับขอบโค้ง */
.mud-main-content .mud-table {
    overflow: hidden;
}

/* หัวคอลัมน์บรรทัดเดียว: หน้ารายการใช้คอลัมน์ตาม PC (สินค้ามี 20 คอลัมน์) หัวแตก 3 บรรทัดอ่านยาก
   ตารางกว้างเกินจอให้เลื่อนแนวนอนเอา (HorizontalScrollbar) */
.mud-main-content .mud-table th {
    white-space: nowrap;
}

/* ตัวนอกตัดมุมโค้ง (overflow: hidden) ตารางที่กว้างกว่าจอ (จอแท็บเล็ต) จึงต้องเลื่อนในตัวเอง ไม่งั้นคอลัมน์ขวาโดนตัดหาย */
.mud-main-content .mud-table-container {
    overflow-x: auto;
}

/* หน้ารายการ (ตารางอยู่ใน kk-hide-xs ใต้กล่องเนื้อหาโดยตรง): ตารางสูงเท่าที่เหลือในจอแล้วเลื่อนในตัวเอง
   เดิมตารางสูงตามจำนวนแถว แถบเลื่อนแนวนอนเลยไปอยู่ท้ายตาราง ต้องเลื่อนหน้าลงสุดก่อนถึงจะเลื่อนไปคอลัมน์ขวาได้
   กล่องเนื้อหาสูงเท่าจอ (ลบ appbar) เรียงลูกแนวตั้ง ตารางกินที่ที่เหลือ ตัวกรองจะสูงเท่าไรก็ปรับตามเอง
   จอเตี้ยจนเหลือไม่ถึง 320px ตารางคงไว้ 320px แล้วทั้งหน้าเลื่อนแทน
   มือถือ (<600px) ไม่เกี่ยว เพราะ kk-hide-xs ซ่อนตารางแล้วใช้การ์ดแทน
   หน้าที่มือถือก็ใช้ตารางเดียวกัน (คงเหลือ นำเข้าลูกค้า) ครอบด้วย kk-table-fill แทน */
@media (min-width: 600px) {
    .mud-main-content > div:has(> :is(.kk-hide-xs, .kk-table-fill) > .mud-table) {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--mud-appbar-height, 64px));
    }

    .mud-main-content > div:has(> :is(.kk-hide-xs, .kk-table-fill) > .mud-table) > * {
        flex: 0 0 auto;
    }

    .mud-main-content > div > :is(.kk-hide-xs, .kk-table-fill):has(> .mud-table) {
        flex: 1 1 0;
        min-height: 320px;
        display: flex;
        flex-direction: column;
    }

    .mud-main-content > div > :is(.kk-hide-xs, .kk-table-fill) > .mud-table {
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: 100%;
    }

    .mud-main-content > div > :is(.kk-hide-xs, .kk-table-fill) > .mud-table > .mud-table-container {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    /* หัวตารางกับแถวรวมค้างไว้ขณะเลื่อนแถว */
    .mud-main-content > div > :is(.kk-hide-xs, .kk-table-fill) > .mud-table > .mud-table-container thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: var(--mud-palette-surface, #FFFFFF);
    }

    .mud-main-content > div > :is(.kk-hide-xs, .kk-table-fill) > .mud-table > .mud-table-container tfoot td {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background-color: var(--mud-palette-surface, #FFFFFF);
    }
}

/* ตารางตัวอย่างหน้านำเข้า Excel (23 คอลัมน์): สูงเท่าที่เหลือในจอ ไม่ใช่สูงตายตัว
   แถบเลื่อนแนวนอนอยู่ขอบล่างของกล่องนี้ ถ้ากล่องสูงเลยจอ ต้องเลื่อนหน้าลงสุดก่อนถึงจะเลื่อนไปขวาได้
   450px = แถบบน + หัวหน้า + กล่องเลือกไฟล์ + แถบสรุป + แถบแบ่งหน้าของตาราง (วัดที่จอ 1366x768 ทั้งหน้าพอดีจอ) */
.kk-import-table .mud-table-container {
    max-height: max(220px, calc(100vh - 450px));
    overflow: auto;
}

/* กล่องกลางจอขณะรอ (อ่านไฟล์ บันทึก) */
.kk-busy-box {
    width: min(360px, calc(100vw - 32px));
    text-align: center;
}

/* หน่วง 0.25 วินาทีก่อนปรากฏ งานที่เสร็จเร็วจอจึงไม่วูบ (ตัวแผ่นกันคลิกตั้งแต่แรก) */
.kk-busy-overlay {
    animation: kk-busy-in .15s ease .25s both;
}

@keyframes kk-busy-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* แถบสรุปของหน้านำเข้า: ตัวเลขซ้าย ปุ่มบันทึกขวา */
.kk-import-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
}

/* ข้อความยาวในการ์ดมือถือ: ไม่เกิน 2 บรรทัด */
.kk-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

@media (max-width: 599.98px) {
    .kk-import-summary {
        display: block;
    }

    .kk-import-summary .kk-save-btn {
        width: 100%;
        margin-top: 12px;
    }

    /* ปุ่มดาวน์โหลดไฟล์ตัวอย่างกับปุ่มเลือกไฟล์: เต็มความกว้าง ขนาดเท่ากัน */
    .kk-import-actions > .mud-button-root {
        width: 100%;
        min-height: 44px;
    }
}

/* sidebar: เส้นขอบแทนเงา ให้เข้าชุดกับการ์ด */
.mud-drawer {
    box-shadow: none !important;
    border-right: 1px solid var(--kk-line);
}

/* ช่องกรอกแบบ outlined: เตี้ยลงจาก 56px เหลือราว 44px
   ต้องขยับ label ตอนยังไม่ย่อ (ยังไม่มีค่า) ให้อยู่กลางช่องใหม่ด้วย ไม่งั้นตัวหนังสือล้นขอบล่าง
   ช่อง dense (Margin.Dense) มี rule ของ MudBlazor เองที่เจาะจงกว่า จึงไม่โดนทับ
   textarea (Lines > 1) ไม่แตะ ใช้ padding ชุดอื่นของ MudBlazor */
.mud-input > input.mud-input-root-outlined:not(.mud-input-root-margin-dense),
div.mud-input-slot.mud-input-root-outlined:not(.mud-input-root-margin-dense) {
    padding-top: 12.5px;
    padding-bottom: 12.5px;
}

.mud-input:not(:has(textarea)) ~ .mud-input-label-outlined:not(.mud-input-label-margin-dense) {
    transform: translate(14px, 14px) scale(1);
}

/* เส้นคั่นใต้หัวเมนู (ผู้ใช้/คลัง) ใน sheet มือถือ: MudDivider เป็นลูกของ flex column จึงถูกยืดสูง
   ครึ่งหนึ่งของจอ ดันเมนูทั้งหมดไปกองล่าง (เจอบน iPhone 2026-09-30) ตรึงให้สูงเท่าตัวเอง */
.kk-nav-wrap > .mud-divider {
    flex: 0 0 auto;
}

/* ลิงก์เมนูมี margin ข้าง 8px บวกความกว้าง 100% เลยล้น drawer 8px เกิด scrollbar แนวนอนใต้เมนู
   (แบบ mini ตั้งไว้แล้วข้างบน ตรงนี้ครอบ sheet มือถือกับ sidebar เต็มด้วย) */
.kk-nav-wrap > .mud-navmenu {
    overflow-x: hidden;
}

/* --- มือถือ (< 600px) --- */
@media (max-width: 599.98px) {
    /* appbar บนมือถือสูง 56px แต่ --mud-appbar-height ยังเป็น 64px
       แถบหัวที่ค้างไว้เลยลอยห่าง appbar 8px และเห็นเนื้อหาเลื่อนผ่านช่องนั้น */
    .kk-page-bar {
        top: 56px;
        padding: 8px 0;
    }

    /* จอแคบ: คำอธิบายใต้หัวหน้ากินที่สองบรรทัด ซ่อนไว้ ชื่อหน้าพอแล้ว */
    .kk-page-bar .mud-typography-body2,
    .kk-page-bar .mud-typography-caption {
        display: none;
    }

    .kk-page-bar .mud-typography-h4 {
        font-size: 1.25rem;
    }

    /* ปุ่มบันทึก: ขนาดปกติ บรรทัดเดียว ("บันทึก / ข้อมูล" แตกสองบรรทัดจนปุ่มสูงเท่าหัว) */
    .kk-save-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding-inline: 14px;
    }

    .kk-save-btn.mud-button-filled-size-large {
        font-size: .875rem;
        padding-block: 6px;
    }

    /* การ์ด pa-6 (24px) กินความกว้างช่องกรอกไปเยอะบนมือถือ */
    .mud-main-content .mud-paper.pa-6 {
        padding: 16px !important;
    }
}

/* กล่องตัวอย่างรูป (โลโก้ร้าน/รูปธนาคาร): พื้นขาว ขอบบาง รูปมุมมน
   ของเดิมเป็นกล่องเทาทึบกับรูปมุมเหลี่ยม ดูแข็ง */
.kk-image-preview {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
    padding: 12px;
    border: 1px solid var(--kk-line);
    border-radius: var(--kk-radius);
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kk-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--kk-radius-sm);
}

/* ===== หน้ารายการข้อมูลหลัก (ต้นแบบ: Masters/Warehouses.razor, 2026-09-30) ===== */

/* หัวหน้าที่ไม่ต้องค้าง (ไม่มีปุ่มบันทึก): ชื่อ + คำอธิบายซ้าย ปุ่มหลักขวา
   ปุ่มห้ามแตกบรรทัด ("เพิ่ม / คลัง / สินค้า" สามบรรทัดบน iPhone) */
.kk-page-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.kk-page-head-text {
    flex: 1;
    min-width: 0;
}

.kk-page-head > .mud-button-root {
    white-space: nowrap;
    flex-shrink: 0;
}

/* แถวค้นหา + ปุ่มกรอง + จำนวน อยู่นอกการ์ด ไม่ต้องมีกล่องใหญ่ครอบ */
.kk-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.kk-list-toolbar .kk-list-search {
    flex: 1 1 280px;
    max-width: 420px;
    margin: 0;
}

/* พื้นขาวต้องโค้งตามกรอบ ไม่งั้นเห็นมุมเหลี่ยมสีขาวโผล่นอกขอบโค้ง */
.kk-list-toolbar .kk-list-search .mud-input {
    background: #FFFFFF;
    border-radius: var(--mud-default-borderradius);
}

.kk-list-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--kk-text-2);
    white-space: nowrap;
}

/* สลับตาราง/การ์ดตามจอ (breakpoint เดียวกับ Xs ของ MudBlazor) */
.kk-show-xs {
    display: none;
}

/* การ์ดรายการบนมือถือ: กลุ่มเดียวขอบโค้ง คั่นแถวด้วยเส้นบาง */
.kk-list-cards {
    background: #FFFFFF;
    border: 1px solid var(--kk-line);
    border-radius: var(--kk-radius);
    overflow: hidden;
}

.kk-list-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 16px;
    min-height: 60px;
    border-bottom: 1px solid #EEF0F3;
}

.kk-list-card:last-child {
    border-bottom: 0;
}

.kk-list-card.kk-clickable {
    cursor: pointer;
}

.kk-list-card.kk-clickable:active {
    background: #F7F8FA;
}

.kk-list-card-main {
    flex: 1;
    min-width: 0;
}

.kk-list-card-title {
    font-weight: 600;
    color: var(--kk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-list-card-code {
    color: var(--kk-text-2);
    font-weight: 500;
    margin-right: 4px;
}

.kk-list-card-sub {
    margin-top: 2px;
    font-size: 13px;
    color: var(--kk-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ยอดเงินชิดขวาของการ์ดรายการ */
.kk-list-card-amount {
    flex-shrink: 0;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* การ์ดที่ข้อความยาว (ชื่อสินค้า สถานะ) ให้ขึ้นบรรทัดใหม่แทนการตัดด้วยจุดสามจุด ยอดเงินอยู่ชิดบน */
.kk-list-card.kk-list-card-wrap {
    align-items: flex-start;
}

.kk-list-card-wrap .kk-list-card-title,
.kk-list-card-wrap .kk-list-card-sub {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* แถบสรุปตัวเลข: จอกว้างเรียงเป็นแถว จอมือถือเป็นรายการ ป้ายซ้าย ตัวเลขชิดขวา */
.kk-stat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
}

.kk-stat {
    display: flex;
    flex-direction: column;
}

.kk-stat-label {
    font-size: 12px;
    color: var(--kk-text-2);
}

.kk-stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--kk-ink);
    font-variant-numeric: tabular-nums;
}

.kk-stat-refs {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #EEF0F3;
    align-items: baseline;
    gap: 4px 24px;
}

.kk-stat-refs-title {
    font-size: 12px;
    color: var(--kk-text-2);
}

.kk-stat-refs .kk-stat {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
}

.kk-stat-refs .kk-stat-label,
.kk-stat-refs .kk-stat-value {
    font-size: 12px;
    font-weight: 400;
    color: var(--kk-ink);
}

@media (max-width: 599.98px) {
    .kk-stat-list {
        display: block;
    }

    .kk-stat,
    .kk-stat-refs .kk-stat {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
    }

    .kk-stat-label {
        font-size: 14px;
    }

    .kk-stat-value {
        font-size: 15px;
        white-space: nowrap;
    }

    .kk-stat-total {
        margin-top: 4px;
        padding-top: 11px;
        border-top: 1px solid #EEF0F3;
    }

    .kk-stat-total .kk-stat-label {
        font-weight: 600;
        color: var(--kk-ink);
    }

    .kk-stat-total .kk-stat-value {
        font-size: 1.25rem;
    }

    .kk-stat-refs-title {
        padding-bottom: 2px;
    }

    .kk-stat-refs .kk-stat {
        padding: 3px 0;
    }

    .kk-stat-refs .kk-stat-label,
    .kk-stat-refs .kk-stat-value {
        font-size: 13px;
        color: var(--kk-text-2);
    }
}

.kk-list-card-chevron {
    color: #9A9C9A;
    flex-shrink: 0;
}

@media (max-width: 599.98px) {
    .kk-hide-xs {
        display: none;
    }

    .kk-show-xs {
        display: block;
    }

    .kk-page-head .mud-typography-h4 {
        font-size: 1.25rem;
    }

    .kk-page-head .mud-typography-body2 {
        display: none;
    }

    /* ช่องค้นหาเต็มแถว ปุ่มกรองกับจำนวนลงไปแถวสอง */
    .kk-list-toolbar .kk-list-search {
        flex-basis: 100%;
        max-width: none;
    }
}

/* แถบหัวของหน้าแก้ไข (ต้นแบบ: Masters/ItemEdit.razor) ใช้ภายใน kk-page-bar
   ย้อนกลับ | ชื่อ (ยืดได้ ตัด ... เมื่อยาว) | ปุ่มรอง | บันทึก */
.kk-edit-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kk-edit-bar-title {
    flex: 1;
    min-width: 0;
}

.kk-edit-bar-title .mud-typography-h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-edit-bar > .mud-button-root {
    white-space: nowrap;
    flex-shrink: 0;
}

/* บรรทัดสรุปใต้ชื่อในแถบหัวของหน้าเอกสาร (จำนวนรายการ · ยอดสุทธิ) แสดงทุกจอ
   ไม่ใช้ caption เพราะ kk-page-bar ซ่อน caption บนมือถือ แต่ยอดคือสิ่งที่ต้องเห็นก่อนกดบันทึก */
.kk-edit-bar-summary {
    font-size: 13px;
    color: var(--kk-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-edit-bar > .mud-icon-button {
    flex-shrink: 0;
}

/* หน้าเพิ่มสินค้า: แถวเลือกวิธีตั้งรหัส (อัตโนมัติ / กำหนดเอง) เหนือช่องรหัสสินค้า
   ป้ายซ้าย ตัวเลือกขวา ช่องรหัสด้านล่างกว้างเต็มแถว จอแคบมากตัวเลือกตกลงมาเต็มความกว้าง */
.kk-code-mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.kk-code-mode-label {
    font-size: 13px;
    color: var(--kk-text-3);
}

.kk-code-mode .mud-toggle-group {
    flex: 0 0 auto;
    min-width: 200px;
}

.kk-code-mode .mud-toggle-item {
    white-space: nowrap;
}

@media (max-width: 359.98px) {
    .kk-code-mode .mud-toggle-group {
        flex: 1 1 100%;
    }
}

/* กลุ่มปุ่มท้ายแถบหัว (พิมพ์ + บันทึก) จอคอมเรียงต่อกันตามปกติ
   มือถือตกลงมาเป็นแถวที่สองเต็มความกว้าง แบ่งครึ่ง ให้บรรทัดชื่อมีที่พอเห็นเลขที่เอกสาร
   และปุ่มพิมพ์ไม่ต้องไปซ่อนในเมนู (หน้าใบเสนอราคา ผู้ใช้ 2026-10-07) */
.kk-edit-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.kk-edit-bar-actions > .mud-button-root {
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .kk-edit-bar {
        flex-wrap: wrap;
    }

    .kk-edit-bar-actions {
        flex: 0 0 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .kk-edit-bar-actions > :only-child {
        grid-column: 1 / -1;
    }

    /* ชื่อในแถบหัวตัด ... ไม่ได้บนจอแคบ เลขที่เอกสารคือสิ่งที่ต้องเห็น ให้ขึ้นบรรทัดใหม่ได้ไม่เกิน 2 บรรทัด */
    .kk-edit-bar-title .mud-typography-h4 {
        white-space: normal;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

/* kk-show-xs ใส่ display:block ซึ่งทำให้ปุ่มไอคอน (inline-flex) ไอคอนไม่อยู่กลาง */
@media (max-width: 599.98px) {
    .kk-show-xs.mud-icon-button,
    .kk-show-xs.mud-button-root {
        display: inline-flex;
    }
}

/* รายการ หัวข้อ : ค่า ในหน้าต่างรายละเอียด (StockMovementDetailDialog.razor) หัวข้อเทาซ้าย ค่าขวา */
.kk-detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    font-size: 14px;
}

.kk-detail-list > :nth-child(odd) {
    color: var(--kk-text-2);
    white-space: nowrap;
}

.kk-detail-list > :nth-child(even) {
    text-align: right;
    overflow-wrap: anywhere;
}

.kk-move-card.kk-clickable {
    cursor: pointer;
}

/* ช่องสแกน + ปุ่มคีย์บอร์ด + ปุ่มกล้อง (ScanBox.razor) */
.kk-scanbox {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* ปุ่มซ้อนในกรอบช่องด้านขวา เป็นช่องพื้นเทาติดขอบขวาแบบเดียวกับไอคอนท้ายช่องกรอกอื่น
   กรอบช่องเริ่มที่ 8px สูง 44px (จอเมาส์ 32px ดูด้านล่าง) ช่องปุ่มเว้นจากกรอบ 2px ทุกด้าน */
.kk-scanbox-actions {
    position: absolute;
    top: 10px;
    right: 2px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 3px;
    background: #F3F2F1;
    border-left: 1px solid var(--kk-line);
    border-radius: 0 2px 2px 0;
}

@media (hover: hover) and (pointer: fine) {
    .kk-scanbox-actions {
        height: 28px;
    }

    .kk-scanbox-actions .mud-icon-button {
        padding: 2px;
    }
}

.kk-scanbox .mud-input-slot {
    padding-right: 66px !important;
}

/* ภาพจากกล้อง (CameraScanDialog.razor) ไลบรารีใส่ <video> ลงมาเอง */
.kk-camscan {
    position: relative;
    width: 100%;
    border-radius: var(--kk-radius);
    overflow: hidden;
    background: #000;
}

.kk-camscan:empty {
    display: none;
}

.kk-camscan video {
    display: block;
    width: 100% !important;
}

/* กรอบเล็ง ตรงกับแถบกลางภาพ (สูง 60%) ที่ camscan.js ส่งไปถอดรหัส นอกกรอบมืดลง */
.kk-camscan-guide {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 20%;
    bottom: 20%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* ปุ่มข้างช่องสแกน แบบปุ่มรองของ Azure: พื้นขาว ขอบเทา ตัวหนังสือดำ สูงเท่ากรอบช่อง (44px จอเมาส์ 32px)
   ให้ดูเป็นคู่กับช่องสแกน ใช้กับ MudButton Variant.Outlined ที่มี Class mt-2 (กรอบช่องเริ่มที่ 8px)
   kk-btn-search เพิ่มไอคอนสีเน้นตอนเป็นปุ่มขอบ (หน้าขายสลับปุ่มนี้เป็นปุ่มทึบตอนบิลยังว่าง ดู Issue.razor)
   (รอบแรกลองพื้นฟ้าอ่อน ผู้ใช้ไม่ชอบ 2026-10-17) */
.mud-button-root.kk-btn-field {
    min-height: 44px;
    padding-left: 14px;
    padding-right: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .mud-button-root.kk-btn-field {
        min-height: 32px;
        height: 32px;
    }
}

.mud-button-root.kk-btn-search:not(.mud-button-disabled):not(.mud-button-filled) .mud-button-icon-start {
    color: var(--kk-accent);
}

/* แถวสแกนบาร์โค้ด + ปุ่มค้นหาของหน้าเอกสาร: บนมือถือช่องสแกนเต็มแถว ปุ่มลงแถวสองแบ่งครึ่ง
   (เดิมอัดแถวเดียว ปุ่ม "ค้นหาสินค้า / ออเดอร์มือถือ" โดนตัดครึ่งบน iPhone) */
@media (max-width: 599.98px) {
    .kk-scan-row {
        flex-wrap: wrap;
    }

    .kk-scan-row > .kk-scanbox,
    .kk-scan-row > .mud-input-control {
        flex-basis: 100%;
    }

    .kk-scan-row > .mud-button-root {
        flex: 1 1 0;
        margin-top: 0 !important;
    }
}

/* หัวหน้ารายการบนมือถือ: ชิปคลังซ้ำกับไอคอนคลังบนแถบดำ ซ่อนไป
   และให้กลุ่มปุ่มขวาตกลงบรรทัดใหม่ได้ ไม่งั้นหน้าที่มีหลายปุ่ม (พิมพ์สรุป 2 ปุ่ม)
   บีบชื่อหน้าเหลือบรรทัดละคำ และชิปทับชื่อ (เจอบนจอ 402px 2026-09-30) */
@media (max-width: 599.98px) {
    .kk-page-head {
        flex-wrap: wrap;
    }

    .kk-page-head-text {
        flex: 1 1 55%;
    }

    .kk-page-head .mud-chip {
        display: none;
    }
}

/* dialog บนมือถือ: MudBlazor เว้นขอบข้างละ 32px + เนื้อหาในอีก 24px ช่องกรอกเหลือกว้างไม่ถึง 3/4 ของจอ
   ลดเหลือขอบ 12px (เท่าขอบหน้า) เนื้อหา 16px หัว dialog เล็กลงให้เลขรหัสยาวๆ อยู่บรรทัดเดียว
   ตัวอักษรในช่องกรอกคงไว้ 16px: ต่ำกว่านี้ Safari บน iPhone จะซูมทั้งหน้าตอนแตะช่อง */
@media (max-width: 599.98px) {
    .mud-dialog-width-full {
        width: calc(100% - 24px);
    }

    .mud-dialog .mud-dialog-title {
        padding: 12px 16px;
    }

    .mud-dialog .mud-dialog-title .mud-typography-h6 {
        font-size: 1.05rem;
    }

    .mud-dialog .mud-dialog-content {
        padding: 8px 16px;
    }

    .mud-dialog .mud-dialog-actions {
        padding: 8px 16px;
    }
}

/* ข้อความที่มีเฉพาะบนมือถือ (เช่น ที่เก็บใต้ชื่อสินค้าในหน้าคงเหลือ) */
.kk-xs-only {
    display: none;
}

/* หน้าคงเหลือบนมือถือ */
@media (max-width: 599.98px) {
    /* ปุ่มกรองแถวเดียวเลื่อนข้าง แทนการตกบรรทัด ("ใกล้หมด" เคยหล่นไปอยู่แถวสองคนเดียว) */
    .kk-stock-toolbar .kk-pill-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        max-width: 100%;
    }

    .kk-stock-toolbar .kk-pill-row::-webkit-scrollbar {
        display: none;
    }

    .kk-stock-toolbar .kk-pill {
        flex-shrink: 0;
    }

    .kk-stock-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    /* ตัวสลับมุมมองเต็มความกว้าง 4 ช่องเท่ากัน ข้อความไม่หักบรรทัด จำนวนรายการขึ้นไปอยู่บรรทัดบน */
    .kk-stock-view {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .kk-stock-view .mud-toggle-group {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .kk-stock-view .mud-toggle-item {
        padding-left: 4px;
        padding-right: 4px;
        white-space: nowrap;
        font-size: 13px;
    }

    .kk-stock-count {
        text-align: right;
    }

    /* คอลัมน์รองของตารางที่ซ่อนบนมือถือ (StockBalance.XsHide) */
    .mud-table .kk-xs-hide {
        display: none;
    }

    .kk-xs-only {
        display: block;
    }
}

/* แถบสรุปบนมือถือ (หน้าเคลื่อนไหว ผังคลัง): 3 ช่องแถวเดียว เดิม min-width 150px ทำให้ใบที่สามตกแถวสองคนเดียว */
@media (max-width: 599.98px) {
    .kk-move-summary {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .kk-move-stat {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 10px;
    }

    .kk-move-stat-cap {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kk-move-stat-val {
        font-size: 17px;
        white-space: nowrap;
    }
}

/* จอ 320px ตัวสลับมุมมองหน้าคงเหลือ "ตามที่จัดเก็บ" ชนขอบช่องทั้งสองข้าง */
@media (max-width: 359.98px) {
    .kk-stock-view .mud-toggle-item {
        font-size: 12px;
        padding-left: 2px;
        padding-right: 2px;
    }
}

/* จอแคบกว่า 400px หัว "จ่ายออก (หน้านี้)" โดนตัดเหลือ "จ่ายออก (หน..." ให้ขึ้นบรรทัดสองแทน */
@media (max-width: 399.98px) {
    .kk-move-stat-cap {
        white-space: normal;
        line-height: 1.3;
    }
}

/* หน้ากำหนดสิทธิ์: ต่ำกว่า md (960px) MudGrid เรียงเป็นคอลัมน์เดียว ย้ายกล่องคลัง + สิทธิเพิ่มเติมขึ้นบนสุด
   ไม่งั้นต้องเลื่อนผ่านรายการฟังก์ชัน 34 แถวกว่าจะถึง */
@media (max-width: 959.98px) {
    .kk-perm-side {
        order: -1;
    }
}

/* --- จอรับชำระเงิน (IssuePaymentDialog): ช่องทางชำระเป็นปุ่ม chip เห็นครบ 4 ปุ่ม ---
   จอแคบ 2x2 จอกว้าง 4 ปุ่มแถวเดียว ปุ่มที่เลือก = พื้นอ่อน + กรอบ 2px + ตัวหนังสือสีประจำช่องทาง
   (สีเข้มบนพื้นอ่อน คอนทราสต์เกิน 4.5:1 ทุกคู่) ไลม์ยังสงวนไว้ให้ปุ่มยืนยันชำระเงินปุ่มเดียว */
.kk-pay-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (min-width: 560px) {
    .kk-pay-methods {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.kk-pay-method {
    --kk-pay-fg: #292928;
    --kk-pay-bg: #F2F3F4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 6px 10px;
    border: 1px solid #D5D7DA;
    border-radius: var(--kk-radius);
    background: #FFFFFF;
    color: var(--kk-text-3);
    font: inherit;
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.kk-pay-method .mud-icon-root {
    flex-shrink: 0;
    color: var(--kk-text-2);
}

.kk-pay-method:hover {
    border-color: #9A9C9A;
}

.kk-pay-method-on,
.kk-pay-method-on:hover {
    background: var(--kk-pay-bg);
    border: 2px solid var(--kk-pay-fg);
    padding: 5px 9px; /* ชดเชยกรอบที่หนาขึ้น 1px ปุ่มจะได้ไม่ขยับ */
    color: var(--kk-pay-fg);
    font-weight: 600;
}

.kk-pay-method-on .mud-icon-root {
    color: var(--kk-pay-fg);
}

.kk-pay-cash { --kk-pay-fg: #1E7B45; --kk-pay-bg: #E7F5EC; }
.kk-pay-bank { --kk-pay-fg: #1D5FB8; --kk-pay-bg: #E6EFFB; }
.kk-pay-card { --kk-pay-fg: #6B3FA0; --kk-pay-bg: #F0EAF8; }
.kk-pay-debt { --kk-pay-fg: #B4520A; --kk-pay-bg: #FDF0E3; }

/* ปุ่มลัดเงินสด: +100 / +500 / +1,000 แถวบน, เต็มจำนวน (2 ช่อง) + ล้าง แถวล่าง */
.kk-cash-quick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.kk-cash-quick > .mud-button-root {
    min-width: 0;
    min-height: 44px;
}

.kk-cash-quick > .kk-cash-full {
    grid-column: span 2;
}

/* ===== ปฏิทินเลือกวันที่บนมือถือ (MudDatePicker / MudDateRangePicker ทุกหน้า) =====
   ปฏิทินช่วงวันที่มีสองเดือนเรียงลงล่าง สูงราว 716px และเปิดใต้ช่องกรอก บนมือถือจึงล้นขอบล่างของจอ
   ตัว popover เป็น position: fixed เลื่อนตามหน้าไม่ได้ เดือนที่สองและวันท้ายเดือนกดไม่ถึง
   (ผู้ใช้เจอใน dialog ดึงบิลขายของใบกำกับภาษี จาก iPhone 2026-10-05)
   จอแคบ: ยึดปฏิทินไว้บนสุดกลางจอ สูงไม่เกินจอ แล้วให้เลื่อนภายในตัวเองได้ */
@media (max-width: 599.98px) {
    .mud-popover.mud-picker-popover {
        top: 12px !important;
        left: 0 !important;
        right: 0 !important;
        margin-inline: auto;
        width: fit-content;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* แถบหัวสีเข้มเดิมสูง 100px ตัวหนังสือใหญ่จนช่วงวันที่ตัดสองบรรทัด ย่อลงให้เหลือที่กับปฏิทิน */
    .mud-picker-popover .mud-picker-datepicker-toolbar {
        height: auto;
        min-height: 0;
        padding-block: 8px;
    }

    .mud-picker-popover .mud-picker-datepicker-toolbar .mud-button-date {
        font-size: 1.25rem;
        line-height: 1.4;
    }
}

/* ===== หน้าแรก (Home.razor): หัวทักทาย + ตัวเลขวันนี้ + ไทล์ทางลัด =====
   จอกว้างจำกัดไว้ 960px ไม่งั้นไทล์ 12 ใบเรียงแถวเดียวยาวสุดจอ อ่านเป็นแถบเมนู ไม่ใช่หน้าแรก */
.kk-home-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--kk-text-2);
}

.kk-home-section {
    margin: 24px 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--kk-ink);
}

/* ---- หน้าแรก (Home.razor) โครงแบบหน้า Home ของ Azure portal (2026-10-10) ----
   คอลัมน์เดียว ไม่มีกรอบการ์ด แบ่งส่วนด้วยหัวข้อตัวหนากับเส้นบาง: เมนูลัด / วันนี้ / ล่าสุด / ดูข้อมูล / เครื่องมือ / ตั้งค่า
   เดิมเป็นการ์ดยอดขายใหญ่กับเส้นแนวโน้ม การ์ดตัวเลขสองใบ และการ์ดรายการสองใบ */
.kk-h2 {
    max-width: 1040px;
}

.kk-h2-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 4px;
}

/* ปุ่มงานหลักของวันอยู่ขวาของหัวหน้า: ปุ่มทึบหนึ่งปุ่ม ที่เหลือเป็นปุ่มขอบ */
.kk-h2-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.kk-h2-sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 28px 0 8px;
}

.kk-h2-sechead .kk-home-section {
    margin: 0;
    font-size: 16px;
}

.kk-h2-sechead a,
.kk-h2-seeall {
    font-size: 13px;
    color: var(--kk-accent);
    text-decoration: none;
}

.kk-h2-sechead a:hover,
.kk-h2-seeall:hover {
    text-decoration: underline;
}

.kk-h2-seeall {
    display: inline-block;
    margin-top: 10px;
}

/* แถบตัวเลขของวันนี้: บรรทัดเดียว คั่นด้วยเส้นตั้งบาง ทั้งแถบกดไปหน้าสรุปข้อมูล */
.kk-h2-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border-top: 1px solid var(--kk-line);
    border-bottom: 1px solid var(--kk-line);
    color: var(--kk-ink);
    text-decoration: none;
}

.kk-h2-stats:hover,
.kk-h2-stats:focus-visible {
    background: var(--kk-fill);
    outline: none;
}

.kk-h2-statc {
    padding: 12px 16px;
    border-left: 1px solid var(--kk-line);
    min-width: 0;
}

.kk-h2-statc:first-child {
    border-left: 0;
    padding-left: 4px;
}

.kk-h2-statc-cap,
.kk-h2-statc-sub {
    font-size: 12px;
    color: var(--kk-text-2);
}

.kk-h2-statc-val {
    margin: 2px 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.kk-h2-statc-val small {
    font-size: 12px;
    font-weight: 400;
    color: var(--kk-text-2);
}

.kk-h2-statc-warn {
    color: #B45309;
}

/* กำลังโหลด: แถบเทาวิ่งแสงแทนตัวเลขและแทนแถวตาราง ไม่ใช้ขีด เพราะขีดอ่านเป็น "ไม่มีข้อมูล" */
.kk-h2-skel {
    display: inline-block;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(90deg, #EDEEEF 25%, #F7F7F8 37%, #EDEEEF 63%);
    background-size: 400% 100%;
    animation: kk-h2-skel 1.4s ease infinite;
}

.kk-h2-skel-val {
    width: 84px;
    height: 20px;
    vertical-align: middle;
}

.kk-h2-skelrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 4px;
    border-bottom: 1px solid #F0F1F2;
}

@keyframes kk-h2-skel {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .kk-h2-skel { animation: none; }
}

.kk-h2-loadfail {
    margin-top: 8px;
    font-size: 13px;
    color: #A4262C;
}

.kk-h2-retry {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--kk-accent);
    cursor: pointer;
}

.kk-h2-retry:hover {
    text-decoration: underline;
}

.kk-h2-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px 1px 4px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.kk-h2-chip-up {
    background: #DFF6DD;
    color: #107C10;
}

.kk-h2-chip-down {
    background: #FDE7E9;
    color: #A4262C;
}

/* โทนสีไอคอนตามกลุ่มงาน */
.kk-h2-tone-brand { color: #0F6CBD; }
.kk-h2-tone-doc { color: #038387; }
.kk-h2-tone-view { color: #3A96DD; }
.kk-h2-tone-master { color: #8764B8; }
.kk-h2-tone-acc { color: #CA5010; }
.kk-h2-tone-warn-ink { color: #B45309; }
.kk-h2-tone-good-ink { color: #107C10; }

/* ทางลัดแบบแถว "Azure services": ไอคอนสี 32px ไม่มีพื้น ชื่ออยู่ใต้ไอคอน ทุกใบเท่ากัน ไม่มีกรอบ ชี้แล้วพื้นเทา */
.kk-h2-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 4px;
}

.kk-h2-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 6px 12px;
    border-radius: var(--kk-radius);
    color: var(--kk-ink);
    text-align: center;
    text-decoration: none;
}

.kk-h2-tile:hover,
.kk-h2-tile:focus-visible,
.kk-h2-navlink:hover,
.kk-h2-navlink:focus-visible,
.kk-h2-tool:hover,
.kk-h2-tool:focus-visible,
.kk-h2-trow:hover,
.kk-h2-trow:focus-visible {
    background: var(--kk-fill);
    outline: none;
}

.kk-h2-tile-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kk-h2-tile-icon .mud-icon-root {
    font-size: 32px;
}

.kk-h2-tile-label {
    font-size: 13px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* ส่วน "ล่าสุด": แท็บ + ตารางแบบ Resources ของ Azure (หัวตัวหนา แถวเตี้ย เส้นคั่นบาง เลขที่เป็นลิงก์สีฟ้า) */
.kk-az-tabs.kk-h2-tabs {
    margin: 0 0 4px;
}

.kk-h2-thead,
.kk-h2-trow {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) 120px minmax(0, 1.4fr) 110px 130px;
    gap: 0 16px;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid #F0F1F2;
    font-size: 13px;
}

.kk-h2-thead {
    font-weight: 600;
    border-bottom-color: var(--kk-line);
}

.kk-h2-trow {
    color: var(--kk-ink);
    text-decoration: none;
}

.kk-h2-tno {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--kk-accent);
}

.kk-h2-tno .mud-icon-root {
    flex: none;
    font-size: 18px;
}

.kk-h2-tno span,
.kk-h2-tparty {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.kk-h2-tamt {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.kk-h2-ttime {
    text-align: right;
    color: var(--kk-text-2);
}

.kk-h2-thead .kk-h2-ttime {
    color: inherit;
}

/* แถวสินค้าใกล้หมด */
.kk-h2-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid #F0F1F2;
}

.kk-h2-row-main {
    min-width: 0;
}

.kk-h2-row-title {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-h2-row-sub {
    font-size: 12px;
    color: var(--kk-text-2);
}

.kk-h2-row-end {
    flex: none;
    text-align: right;
}

.kk-h2-row-num {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.kk-h2-bar {
    width: 120px;
    height: 4px;
    margin: 6px 0 0 auto;
    border-radius: 2px;
    background: #F0F1F2;
    overflow: hidden;
}

.kk-h2-bar span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: #F59E0B;
}

.kk-h2-empty {
    padding: 22px 0 18px;
    border-bottom: 1px solid #F0F1F2;
    font-size: 13px;
    color: var(--kk-text-2);
    text-align: center;
}

/* ดูข้อมูล (Navigate) กับเครื่องมือ (Tools): ไอคอนสี + ชื่อ เครื่องมือมีคำอธิบายบรรทัดเดียวใต้ชื่อ */
.kk-h2-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 16px;
}

.kk-h2-navlink,
.kk-h2-tool {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: var(--kk-radius);
    color: var(--kk-ink);
    font-size: 14px;
    text-decoration: none;
}

.kk-h2-navlink .mud-icon-root,
.kk-h2-tool .mud-icon-root {
    flex: none;
    font-size: 28px;
}

.kk-h2-tool {
    align-items: flex-start;
}

.kk-h2-tool-name,
.kk-h2-tool-desc {
    display: block;
}

.kk-h2-tool-name {
    color: var(--kk-accent);
}

.kk-h2-tool-desc {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--kk-text-2);
}

.kk-h2-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding: 0 4px 8px;
}

.kk-h2-links a {
    font-size: 13px;
    color: var(--kk-accent);
    text-decoration: none;
}

/* ---- หน้ารายงาน (เริ่มที่รายงานภาษีขาย): แถบตัวกรองบรรทัดเดียว แถบสรุปเต็มความกว้าง แล้วตาราง ---- */
.kk-rpt-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 4px 0 16px;
}

.kk-rpt-bar .kk-rpt-date {
    flex: 0 1 350px;
    min-width: 330px;
}

/* ช่องวันที่ป้ายซ้าย (kk-fbar-item) นอกแถบ kk-fbar ต้องตัดระยะบนล่างของช่องเอง */
.kk-rpt-bar .kk-rpt-date .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.kk-rpt-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.kk-rpt-group + .kk-rpt-group {
    padding-left: 16px;
    border-left: 1px solid var(--kk-line);
}

/* แถบสรุปที่ไม่ใช่ลิงก์ ชี้แล้วไม่เปลี่ยนพื้น */
.kk-h2-stats.kk-h2-stats-static:hover {
    background: none;
}

.kk-rpt-total {
    color: var(--kk-accent);
}

.kk-rpt-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 20px;
    margin: 8px 4px 0;
    font-size: 12px;
    color: var(--kk-text-2);
}

.kk-rpt-refs b {
    font-weight: 600;
    color: var(--kk-ink);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .kk-rpt-bar .kk-rpt-date {
        flex: 1 1 100%;
        min-width: 0;
    }

    .kk-rpt-group + .kk-rpt-group {
        padding-left: 0;
        border-left: 0;
    }
}

.kk-h2-links a:hover {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .kk-h2-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kk-h2-statc,
    .kk-h2-statc:first-child {
        padding: 10px 4px;
        border-left: 0;
    }

    .kk-h2-statc-val {
        font-size: 20px;
    }

    .kk-h2-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .kk-h2-tile {
        padding: 12px 2px;
    }

    .kk-h2-tile-label {
        font-size: 12px;
    }

    /* ตารางเอกสารล่าสุดเป็นรายการสองบรรทัด: เลขที่กับยอด แล้วประเภทกับเวลา */
    .kk-h2-thead,
    .kk-h2-tparty {
        display: none;
    }

    .kk-h2-trow {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "no amt" "type time";
        gap: 2px 12px;
        padding: 10px 4px;
    }

    .kk-h2-tno { grid-area: no; font-size: 14px; }
    .kk-h2-tamt { grid-area: amt; font-size: 14px; }
    .kk-h2-ttype { grid-area: type; padding-left: 26px; font-size: 12px; color: var(--kk-text-2); }
    .kk-h2-ttime { grid-area: time; font-size: 12px; }

    .kk-h2-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 8px;
    }

    .kk-h2-navlink .mud-icon-root,
    .kk-h2-tool .mud-icon-root {
        font-size: 24px;
    }

    .kk-h2-bar {
        width: 84px;
    }
}

/* การ์ดการชำระเงินในใบกำกับภาษีและใบเสนอราคา: พื้นฟ้าอ่อน + แถบซ้ายสีน้ำเงิน
   แยกให้เห็นชัดจากการ์ดเอกสาร เพราะมีช่องหมายเหตุสองช่อง คนกรอกสลับกันบ่อย */
.kk-paybox {
    background: #EEF4FC !important;
    border-color: #BFD3F0 !important;
    border-left: 4px solid #1D5FB8 !important;
}

.kk-paybox-title {
    color: #1D5FB8;
    display: flex;
    align-items: center;
}

/* ===== โฉมแบบ Azure portal (branch style/azure-look 2026-10-10) =====
   สิ่งที่ทำให้ดูนิ่งและเป็นระบบมี 4 อย่าง: แน่น (ตัวเล็ก แถวเตี้ย) / มุมเกือบเหลี่ยม / สีเน้นสีเดียว /
   แบ่งลำดับชั้นด้วยน้ำหนักตัวอักษรกับเส้นบาง ไม่ใช้เงา
   สีกับมุมโค้งมาจาก KkTheme + ตัวแปร --kk-* บนสุดของไฟล์ ตรงนี้คือส่วนที่ธีมของ MudBlazor ตั้งไม่ได้
   ความแน่นใส่เฉพาะจอเมาส์ (hover + pointer: fine) จอสัมผัสต้องคงเป้ากดใหญ่และช่องกรอก 16px ไว้
   (ต่ำกว่า 16px iOS Safari ซูมเข้าเองแล้วไม่ซูมกลับ เจอ 2026-10-06) */

/* ปุ่มทึบ (ปุ่มสำคัญของหน้า): หนากว่าปุ่มทั่วไปหนึ่งขั้น ตัวขาวบนพื้นสีอ่านชัดขึ้น */
.mud-button-filled {
    font-weight: 500;
}

/* ปุ่มทึบ: ไม่มีเงา ทั้งตอนปกติ ชี้ และกด */
.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-filled:hover,
.mud-button-root.mud-button-filled:focus-visible,
.mud-button-root.mud-button-filled:active {
    box-shadow: none;
}

/* ป้าย (MudChip): มุมเดียวกับปุ่ม ค่าเดิมเป็นเม็ดยา */
.mud-chip.mud-chip-size-small,
.mud-chip.mud-chip-size-medium,
.mud-chip.mud-chip-size-large {
    border-radius: var(--kk-radius);
}

/* แท็บ: ตัวธรรมดา ตัวที่เลือกหนา + เส้นใต้สีเน้น 2px มีเส้นคั่นบางใต้ทั้งแถบ */
.mud-tabs .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--kk-line);
}

.mud-tabs .mud-tabs-tabbar .mud-tabs-tabbar-inner {
    min-height: 40px;
}

.mud-tabs .mud-tab {
    min-height: 40px;
    min-width: 0;
    padding: 6px 14px;
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--kk-ink);
}

.mud-tabs .mud-tab.mud-tab-active {
    font-weight: 600;
    color: var(--kk-ink);
}

.mud-tabs .mud-tab-slider {
    background: var(--kk-accent);
}

/* หัวตาราง: ตัวเล็ก หนา สีเทาเข้ม พื้นเทาจางมาก ให้แยกจากแถวข้อมูลโดยไม่ต้องมีสี */
.mud-table-root .mud-table-head .mud-table-cell {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--kk-text-3);
    background-color: #FFFFFF;
    border-bottom: 1px solid #C8C9CB;
}

/* ปุ่มผู้ใช้บนแถบบน: ข้อความเรียบ ไม่มีกรอบเม็ดยา */
.kk-appbar-user {
    border: 0;
    border-radius: var(--kk-radius-sm);
    background: transparent;
}

/* แถบบนเตี้ยแบบ Azure (48px) ตั้งแต่จอ 600px ขึ้นไป มือถือคง 56px ตามเดิม
   เปลี่ยนที่ตัวแปรของ MudBlazor เพราะ padding ของเนื้อหา แถบหัวหน้าที่ค้างไว้ (kk-page-bar)
   และความสูงตารางเต็มจอ คิดจากตัวแปรนี้ทั้งหมด
   html:root ชนะ :root ที่ MudThemeProvider เขียนไว้ */
@media (min-width: 600px) {
    html:root {
        --mud-appbar-height: 48px;
    }

    .kk-appbar-logo {
        height: 22px;
    }

    .mud-appbar .mud-button-root {
        font-size: .8125rem;
    }
}

@media (hover: hover) and (pointer: fine) {
    /* ปุ่มเรียบแบบ Azure: ตัว 13px น้ำหนักปกติ สูงราว 28px ไอคอน 16px (ผู้ใช้ติ 2026-10-10 ว่าปุ่มใหญ่และหนาเกิน)
       รอบแรกตั้งไว้ 32px ตัว 14px หนา 600 */
    .mud-button {
        font-size: .8125rem;
        line-height: 1.6;
    }

    .mud-button-filled-size-medium,
    .mud-button-filled-size-small {
        padding: 3px 12px;
    }

    .mud-button-outlined-size-medium,
    .mud-button-outlined-size-small {
        padding: 2px 11px;
    }

    .mud-button-text-size-medium,
    .mud-button-text-size-small {
        padding: 3px 8px;
    }

    .mud-button .mud-button-icon-start > .mud-icon-root,
    .mud-button .mud-button-icon-end > .mud-icon-root {
        font-size: 16px;
    }

    .mud-button .mud-button-icon-start {
        margin-inline-end: 6px;
    }

    /* ช่องกรอก outlined ทุกช่องสูงราว 36px ตัวอักษร 14px (เดิม 44px แบบปกติ / 40px แบบ dense ตัว 16px)
       ต้องเขียนทั้งแบบ :not(dense) และ dense เพราะ rule เดิมด้านบนกับของ MudBlazor เจาะจงคนละชุด
       label ตอนยังไม่มีค่าต้องขยับตามให้อยู่กลางช่อง textarea ไม่แตะ */
    .mud-input,
    .mud-input-label-inputcontrol {
        font-size: .875rem;
    }

    .mud-input > input.mud-input-root-outlined:not(.mud-input-root-margin-dense),
    div.mud-input-slot.mud-input-root-outlined:not(.mud-input-root-margin-dense),
    .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
    div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
        padding-top: 9.5px;
        padding-bottom: 9.5px;
    }

    .mud-input:not(:has(textarea)) ~ .mud-input-label-outlined:not(.mud-input-label-margin-dense),
    .mud-input:not(:has(textarea)) ~ .mud-input-label-outlined.mud-input-label-margin-dense {
        transform: translate(14px, 10px) scale(1);
    }
}

/* ===== หน้าแบบ Azure portal: โครงที่หน้าอื่นหยิบไปใช้ต่อได้ (เริ่มที่ Dashboard.razor) =====
   หัวหน้า kk-az-head / แถวแท็บ kk-az-tabs / ตารางการ์ด kk-az-grid + kk-az-card
   ในการ์ด: หัว kk-az-card-title, ตัวเลขใหญ่ kk-az-big, คู่ชื่อกับค่า kk-az-pairs,
   แถวปุ่มชิดล่าง kk-az-actions (ปุ่มหลักทึบ ปุ่มทั่วไปเป็นขอบ ใช้ Size.Small), รายการลิงก์ kk-az-links */
.kk-az-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kk-az-head-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--kk-radius);
    background: var(--kk-selected);
    color: var(--kk-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kk-az-head-text {
    min-width: 0;
}

.kk-az-head-sub {
    font-size: 12px;
    color: var(--kk-text-2);
}

/* แท็บ: ตัวธรรมดา ตัวที่เลือกหนา + เส้นใต้สีเน้น 2px (หน้าตาเดียวกับ MudTabs ที่ปรับไว้ด้านบน) */
.kk-az-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 4px;
    margin: 10px 0 16px;
    border-bottom: 1px solid var(--kk-line);
}

.kk-az-tab {
    position: relative;
    padding: 9px 12px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--kk-ink);
    cursor: pointer;
    white-space: nowrap;
}

.kk-az-tab:hover {
    background: var(--kk-fill);
}

.kk-az-tab.active {
    font-weight: 600;
}

.kk-az-tab.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: var(--kk-accent);
}

.kk-az-tabs-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 6px 0;
}

.kk-az-tabs-tools .kk-az-date {
    width: 180px;
    margin: 0;
}

/* ตารางการ์ด 4 ช่อง จอกลาง 2 ช่อง มือถือช่องเดียว */
.kk-az-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kk-az-span2 {
    grid-column: span 2;
    align-self: start; /* การ์ดกว้างสูงตามเนื้อหา ไม่ยืดตามใบข้างๆ จนเหลือที่ว่าง */
}

.kk-az-span4 {
    grid-column: 1 / -1;
}

@media (max-width: 1199.98px) {
    .kk-az-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599.98px) {
    .kk-az-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .kk-az-span2 {
        grid-column: auto;
    }

    .kk-az-tabs-tools {
        width: 100%;
        margin-left: 0;
    }

    .kk-az-tabs-tools .kk-az-date {
        flex: 1;
        width: auto;
    }
}

.kk-az-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 18px;
    background: #FFFFFF;
    border: 1px solid var(--kk-line);
    border-radius: var(--kk-radius);
    box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .08), 0 .3px .9px rgba(0, 0, 0, .06);
}

.kk-az-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--kk-ink);
}

.kk-az-title-info {
    color: var(--kk-text-2);
}

.kk-az-big {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--kk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-az-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--kk-text-3);
}

.kk-az-note-icon {
    color: var(--kk-accent);
}

/* แถวปุ่มชิดขอบล่างของการ์ด การ์ดในแถวเดียวกันสูงเท่ากัน ปุ่มจึงอยู่ระดับเดียวกันทุกใบ */
.kk-az-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
}

.kk-az-actions:empty {
    display: none;
}

.kk-az-pairs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kk-az-pair-cap {
    font-size: 12px;
    color: var(--kk-text-2);
}

.kk-az-pair-val {
    font-size: 15px;
    font-weight: 600;
    color: var(--kk-ink);
}

/* ลิงก์สีเน้นมีไอคอนนำ ใช้ในการ์ดทางลัดและแถวแจ้งเตือน */
.kk-az-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kk-az-links a,
.kk-az-alert a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--kk-accent);
    text-decoration: none;
}

.kk-az-links a:hover,
.kk-az-alert a:hover {
    text-decoration: underline;
}

.kk-az-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--kk-line);
}

.kk-az-empty {
    padding: 24px 0;
    font-size: 13.5px;
    color: var(--kk-text-2);
}

/* ยอดรวมใต้กราฟ: แถบสีของชุดข้อมูลชิดซ้าย + ตัวเลขใหญ่ */
.kk-az-total {
    margin-top: 12px;
    padding-left: 10px;
    border-left: 4px solid;
}

.kk-az-total-cap {
    font-size: 11px;
    color: var(--kk-text-2);
}

.kk-az-total-val {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--kk-ink);
}

/* วงแหวนสัดส่วน + รายการกำกับ (แถบสีเดียวกับชิ้นในวง) */
.kk-az-donut-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.kk-az-donut {
    flex: none;
    width: 150px;
    height: 150px;
}

.kk-az-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    flex: 1 1 220px;
    min-width: 0;
}

.kk-az-legend-row {
    min-width: 0;
    padding-left: 8px;
    border-left: 4px solid;
}

.kk-az-legend-cap {
    font-size: 12px;
    color: var(--kk-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kk-az-legend-val {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--kk-ink);
}

.kk-az-legend-val span {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 400;
    color: var(--kk-text-2);
}

/* ไอคอนเมนูข้างมีสีตามหมวด (Azure ใช้ไอคอนหลายสี เมนูเทาล้วนดูจืด)
   สีส่งผ่านตัวแปร จึงใช้ของหมวดที่อยู่ใกล้ที่สุด หมวดย่อยทับหมวดแม่ได้ ตั้งหมวดที่ NavCatalog (Tone) */
.kk-nav-tone-blue { --kk-nav-icon: #0F6CBD; }
.kk-nav-tone-sky { --kk-nav-icon: #3A96DD; }
.kk-nav-tone-teal { --kk-nav-icon: #038387; }
.kk-nav-tone-green { --kk-nav-icon: #107C10; }
.kk-nav-tone-orange { --kk-nav-icon: #CA5010; }
.kk-nav-tone-purple { --kk-nav-icon: #8764B8; }
.kk-nav-tone-magenta { --kk-nav-icon: #C239B3; }
.kk-nav-tone-grey { --kk-nav-icon: #69797E; }

.kk-nav-wrap [class*="kk-nav-tone-"] .mud-nav-link .mud-nav-link-icon {
    color: var(--kk-nav-icon);
}

/* ปุ่มขอบสีปกติ: ขอบเข้มแบบปุ่มรองของ Azure (ค่าเดิมของ MudBlazor ขอบจางจนเหมือนข้อความเฉยๆ) */
.mud-button-outlined.mud-button-outlined-default {
    border-color: #6B6E70;
    background-color: #FFFFFF;
}

.mud-button-outlined.mud-button-outlined-default:hover {
    background-color: var(--kk-fill);
}

/* ปุ่มในแถบล่างของ dialog (ผู้ใช้ติ 2026-10-10: "ปิด" กับ "พิมพ์" เป็นตัวหนังสือดำบนพื้นขาว นึกว่าเป็นข้อความธรรมดา)
   ปุ่มแบบตัวหนังสือล้วนได้ขอบเหมือนปุ่มรองของ Azure ทุกตัว ปุ่มหลักของ dialog เทสีฟ้าหนึ่งปุ่ม (Variant.Filled ในแต่ละไฟล์)
   ไม่ใช้ตัวหนังสือสีฟ้าไม่มีขอบ เพราะในเว็บนี้ตัวฟ้าไม่มีขอบคือลิงก์
   ทำที่ CSS จุดเดียว dialog ใหม่ที่เขียน <MudButton> เฉยๆ ในแถบล่างจึงได้ขอบเองโดยไม่ต้องจำ */
.mud-dialog .mud-dialog-actions .mud-button-text {
    padding: 5px 15px;
    border: 1px solid #6B6E70;
    background-color: #FFFFFF;
}

.mud-dialog .mud-dialog-actions .mud-button-text:hover {
    background-color: var(--kk-fill);
}

/* ปุ่มอันตราย (ยกเลิกเอกสาร) ขอบกับตัวหนังสือสีแดง */
.mud-dialog .mud-dialog-actions .mud-button-text.mud-button-text-error {
    border-color: var(--mud-palette-error);
}

.mud-dialog .mud-dialog-actions .mud-button-text.mud-button-text-error:hover {
    background-color: #FDE7E9;
}

.mud-dialog .mud-dialog-actions .mud-button-text.mud-disabled {
    border-color: var(--kk-line);
}

@media (hover: hover) and (pointer: fine) {
    .mud-dialog .mud-dialog-actions .mud-button-text {
        padding: 2px 11px;
    }
}

@media (hover: hover) and (pointer: fine) {
    /* ปุ่ม Size.Large (ปุ่มบันทึกหัวหน้า): สูงกว่าปุ่มปกติเล็กน้อย (ราว 32px) ตัวอักษรเท่ากัน
       ความสำคัญบอกด้วยการเทสีเต็ม ไม่ใช่ขนาด */
    .mud-button-filled-size-large,
    .mud-button-outlined-size-large {
        padding: 5px 16px;
        font-size: .8125rem;
    }

    .mud-button-filled-size-large .mud-button-icon-start > .mud-icon-root,
    .mud-button-outlined-size-large .mud-button-icon-start > .mud-icon-root {
        font-size: 18px;
    }
}

/* ===== หน้ารายการแบบ Azure portal (ต้นแบบ: Items.razor) =====
   ตารางเรียบไม่มีกรอบ มีแค่เส้นคั่นแถว หัวคอลัมน์หนา ช่องแรกของตารางที่กดแถวได้เป็นสีลิงก์
   แถบคำสั่ง kk-cmdbar ใต้หัวหน้า = ปุ่มข้อความ ไอคอนสีเน้น สำหรับคำสั่งรองของหน้า
   (ปุ่มหลักของหน้ายังเป็นปุ่มทึบอยู่ขวาของหัวหน้า) */
.mud-main-content .mud-table:not(.mud-table-outlined) {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ตารางที่กดแถวเพื่อเปิดรายการ: ช่องแรก (รหัส/เลขที่เอกสาร) เป็นสีลิงก์ ชี้แล้วขีดเส้นใต้ */
.kk-clickable-rows .mud-table-body .mud-table-row > td:first-child {
    color: var(--kk-accent);
}

.kk-clickable-rows .mud-table-body .mud-table-row:hover > td:first-child {
    text-decoration: underline;
}

.kk-cmdbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: -6px 0 12px -10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--kk-line);
}

.kk-cmdbar .mud-button-root {
    padding: 5px 10px;
    font-weight: 400;
    color: var(--kk-ink);
}

.kk-cmdbar .mud-button-root .mud-button-icon-start {
    color: var(--kk-accent);
}

.kk-cmdbar .mud-button-root.mud-disabled .mud-button-icon-start {
    color: inherit;
}

/* สถานะในตาราง: ไอคอนสี + ข้อความสีปกติ (แทนป้ายพื้นสี) สีอย่างเดียวไม่ใช่ตัวบอก มีคำกำกับเสมอ */
.kk-status {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
}

.kk-status .mud-icon-root {
    font-size: 16px;
}

.kk-page-head .mud-typography-body2 {
    font-size: 12.5px;
}

@media (hover: hover) and (pointer: fine) {
    .kk-pill {
        height: 28px;
        padding: 0 12px;
    }
}

/* ช่องกรอกในแถวรายการเอกสาร (kk-line): ช่องแคบ ลดระยะข้างในกรอบให้ตัวเลขมีที่พอ */
.kk-line .mud-input > input.mud-input-root-outlined {
    padding-left: 8px;
    padding-right: 8px;
}

/* หน่วยต่อท้ายช่องกรอก (เช่น "เปอร์เซ็นต์"): เว้นระยะจากตัวเลขที่ชิดขวา ไม่งั้นอ่านติดกันเป็น "7เปอร์เซ็นต์" */
.mud-input-outlined .mud-input-adornment-end > .mud-typography {
    margin-left: 8px;
}

/* ===== ช่องกรอกแบบ Azure portal (2026-10-10) =====
   สามอย่างที่ทำให้ช่องของ Azure ดูไม่เทอะทะ ไม่ใช่แค่เตี้ยกว่า:
   1) ปุ่มไอคอนท้ายช่องเป็นช่องสี่เหลี่ยมพื้นเทาติดขอบขวาของกรอบ ไม่ใช่ปุ่มกลมลอยอยู่ในช่อง
   2) ตอนคลิก กรอบเข้มขึ้นเป็นสีหมึก 2px ไม่เปลี่ยนเป็นสีเน้น
   3) ระยะข้างในกรอบแคบ ตัวอักษรชิดขอบซ้าย */

/* ท้ายช่อง: ไอคอน ปุ่มไอคอน หรือหน่วย อยู่ในช่องพื้นเทา สูงเต็มกรอบ มีเส้นคั่น */
.mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-right: 0;
    padding-inline-end: 0;
}

.mud-input.mud-input-outlined > .mud-input-adornment-end {
    align-self: stretch;
    display: flex;
    align-items: center;
    height: auto;
    max-height: none;
    margin: 2px 2px 2px 6px;
    padding: 0 3px;
    background: #F3F2F1;
    border-left: 1px solid var(--kk-line);
    border-radius: 0 2px 2px 0;
    color: var(--kk-text-3);
}

.mud-input.mud-input-outlined > .mud-input-adornment-end .mud-icon-button {
    margin: 0; /* ปุ่มของ date picker มี margin ติดลบ (edge end) ทำให้ไอคอนล้นขอบ */
    padding: 3px;
    border-radius: var(--kk-radius-sm);
}

.mud-input.mud-input-outlined > .mud-input-adornment-end .mud-icon-root {
    font-size: 18px;
}

.mud-input.mud-input-outlined > .mud-input-adornment-end > .mud-typography {
    margin: 0;
    padding: 0 6px;
    font-size: .8125rem;
}

/* ช่องเลือก (MudSelect) คงลูกศรเรียบๆ ไม่ต้องมีช่องพื้นเทา */
.mud-select .mud-input.mud-input-outlined > .mud-input-adornment-end {
    margin: 0 8px 0 4px;
    padding: 0;
    background: none;
    border-left: 0;
}

/* ตอนคลิก: กรอบสีหมึก 2px (ช่องที่มี error คงสีแดงของ MudBlazor) */
.mud-input.mud-input-outlined:not(.mud-input-error):focus-within > .mud-input-outlined-border,
.mud-input.mud-input-outlined:not(.mud-input-error):focus-within .mud-shrink > .mud-input-outlined-border {
    border-color: var(--kk-ink);
}

@media (hover: hover) and (pointer: fine) {
    /* สูงราว 32px (รอบแรกตั้ง 36px) ต่ำกว่านี้สระบนล่างของภาษาไทยเริ่มชิดกรอบ ระยะข้าง 10px เดิม 14px */
    .mud-input > input.mud-input-root-outlined:not(.mud-input-root-margin-dense),
    div.mud-input-slot.mud-input-root-outlined:not(.mud-input-root-margin-dense),
    .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
    div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
        padding-top: 7.5px;
        padding-bottom: 7.5px;
    }

    .mud-input > input.mud-input-root-outlined:not(.mud-input-root-adorned-start),
    div.mud-input-slot.mud-input-root-outlined:not(.mud-input-root-adorned-start) {
        padding-left: 10px;
    }

    .mud-input:not(:has(textarea)) ~ .mud-input-label-outlined:not(.mud-input-label-margin-dense),
    .mud-input:not(:has(textarea)) ~ .mud-input-label-outlined.mud-input-label-margin-dense {
        transform: translate(10px, 8px) scale(1);
    }
}

/* ===== ฟอร์มแบบหน้า Configuration ของ Azure portal (2026-10-10) =====
   ป้ายอยู่คอลัมน์ซ้าย ช่องกรอกอยู่ขวา ไม่มีป้ายลอยในช่อง (คอมโพเนนต์ KkFormRow)
   การ์ดที่ใส่ kk-fcard เป็น container: ถ้าการ์ดแคบกว่า 300px (มือถือ หรือคอลัมน์ข้าง) ป้ายขึ้นไปอยู่เหนือช่อง */
.kk-fcard {
    container-type: inline-size;
}

.kk-frow {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    margin-top: 10px;
}

/* ป้ายสูงเท่าช่องกรอกหนึ่งบรรทัด ตัวหนังสือจึงอยู่กลางช่องแม้ช่องขวาจะมีหลายบรรทัดหรือมีคำอธิบายใต้ช่อง */
.kk-frow-label {
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--kk-ink);
}

.kk-frow-req {
    margin-left: 3px;
    color: #C50F1F;
}

.kk-frow-control {
    min-width: 0;
    max-width: 480px;
}

.kk-frow-control .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.kk-frow-control .mud-switch,
.kk-frow-control .mud-checkbox {
    min-height: 40px;
    margin: 0;
}

/* ปุ่มไอคอนข้างช่อง (เช่นเพิ่มลูกค้า) ให้เล็กลง ต้องยกเว้นสวิตช์กับช่องติ๊ก: ตัวเลื่อนของสวิตช์เป็น
   .mud-icon-button เหมือนกัน ถ้าลดระยะขอบ ปุ่มกลมจะลอยขึ้นไม่ตรงกลางราง (ผู้ใช้เจอ 2026-10-10) */
.kk-frow-control .mud-icon-button:not(.mud-switch-base):not(.mud-checkbox *):not(.kk-scanbox-actions *) {
    padding: 4px;
}

/* ลิงก์ทางลัดใต้ช่อง เช่น "เพิ่มประเภทสินค้าใหม่" */
.kk-frow-link {
    display: inline-block;
    margin-top: 4px;
    cursor: pointer;
}

/* ลิงก์หลายตัวใต้ช่องเดียวกัน เรียงแนวนอน */
.kk-frow-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}

.kk-frow-hint {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--kk-text-2);
}

/* สวิตช์กับช่องติ๊กในการ์ดแคบ: ป้ายกินที่เท่าที่เหลือ ตัวสวิตช์ชิดขวา ป้ายยาวอย่าง "ปัดเศษเป็นจำนวนเต็ม"
   ไม่พอในคอลัมน์ป้าย 124px (การ์ดกว้างกลับไปเรียงตามคอลัมน์ ดูท้ายส่วนนี้) */
.kk-frow.kk-frow-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
}

/* แถวเดี่ยวนอกการ์ด (เช่นช่องสถานะใต้แถบหัว): ป้ายกว้างเท่าข้อความ ช่องไม่ยืดเต็มหน้า */
.kk-frow.kk-frow-solo {
    grid-template-columns: max-content minmax(0, 200px);
    align-items: center;
    margin-top: 0;
}

@media (hover: hover) and (pointer: fine) {
    .kk-frow-label,
    .kk-frow-control .mud-switch,
    .kk-frow-control .mud-checkbox {
        min-height: 32px;
    }
}

@container (max-width: 299px) {
    .kk-frow {
        grid-template-columns: minmax(0, 1fr);
    }

    .kk-frow-label {
        min-height: 0;
        margin-bottom: 4px;
    }

    /* สวิตช์กับช่องติ๊ก: ป้ายซ้าย ตัวสวิตช์ขวา ไม่ต้องขึ้นบรรทัดใหม่ */
    .kk-frow.kk-frow-toggle {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .kk-frow.kk-frow-toggle .kk-frow-label {
        margin-bottom: 0;
    }
}

/* มือถือ: ป้ายอยู่เหนือช่องเสมอ ไม่ขึ้นกับความกว้างการ์ด (จอ 375px การ์ดกว้าง 301px จะเฉียดเกณฑ์ข้างบน
   ทำให้มือถือบางรุ่นเรียงซ้ายขวา บางรุ่นเรียงบนล่าง) */
@media (max-width: 599.98px) {
    .kk-frow {
        grid-template-columns: minmax(0, 1fr);
    }

    .kk-frow-label {
        min-height: 0;
        margin-bottom: 4px;
    }

    .kk-frow.kk-frow-toggle {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .kk-frow.kk-frow-toggle .kk-frow-label,
    .kk-frow.kk-frow-solo .kk-frow-label {
        margin-bottom: 0;
    }
}

/* การ์ดกว้าง (คอลัมน์หลัก): คอลัมน์ป้ายกว้างขึ้นตามสัดส่วนของ Azure (วัดจากหน้าจริง 2026-10-10: ป้าย 250px ช่อง 480px) */
@container (min-width: 560px) {
    .kk-frow,
    .kk-frow.kk-frow-toggle {
        grid-template-columns: 200px minmax(0, 1fr);
    }
}

/* ===== หน้ากรอกข้อมูลแบบหน้า "Create" ของ Azure portal (2026-10-10) =====
   แท็บ (kk-az-tabs) + คอลัมน์เดียวกว้างไม่เกิน 760px + หัวข้อกับคำอธิบายสั้น ไม่มีกรอบการ์ด เริ่มที่หน้าแก้ไขสินค้า */
.kk-wiz {
    max-width: 760px;
}

.kk-wiz-section {
    margin-bottom: 28px;
}

.kk-wiz-h {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kk-ink);
}

.kk-wiz-desc,
.kk-wiz-lead {
    margin: 0 0 6px;
    max-width: 640px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--kk-text-3);
}

.kk-wiz-lead {
    margin-bottom: 18px;
}

.kk-wiz-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--kk-line);
}

/* ช่องสแกนในแถวฟอร์ม (ไม่มีป้ายลอย): กรอบช่องเริ่มที่ขอบบนพอดี ไม่ได้เว้น 8px ให้ป้ายแล้ว
   ช่องปุ่มท้ายจึงต้องเลื่อนขึ้นตาม ไม่งั้นจะห้อยต่ำกว่ากรอบ (ผู้ใช้เจอ 2026-10-10) */
.kk-scanbox-nolabel .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.kk-scanbox-nolabel .kk-scanbox-actions {
    top: 2px;
}

/* ===== dialog: พื้นหลังเบลอบางๆ และเงานุ่ม (2026-10-10) =====
   ผู้ใช้ติว่า dialog เด้งมาแล้วดูแข็ง พื้นหลังมืดลงเฉยๆ ให้มีมิติขึ้นด้วยเบลอ 3px กับเงากว้าง
   ไม่ขัดกับแบบ Azure: ยังเป็นกล่องขาวมุม 4px ไม่มีสีเพิ่ม เบลอแค่ช่วยแยกชั้นหน้ากับหลัง
   เครื่องที่ตั้งลดการเคลื่อนไหวไว้จะไม่มีภาพเคลื่อนตอนเปิด */
.mud-overlay.mud-overlay-dialog .mud-overlay-scrim {
    background-color: rgba(32, 31, 30, .38);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* position: relative ให้ปุ่มปิด (X) ซึ่งเป็น absolute เกาะมุมกล่อง dialog
   ไม่งั้นมันไปเกาะ .mud-dialog-container ที่เต็มจอ ปุ่มเลยลอยอยู่มุมขวาบนของจอ (วัดเจอ 2026-10-10) */
.mud-dialog {
    position: relative;
    box-shadow: 0 24px 56px rgba(0, 0, 0, .22), 0 6px 14px rgba(0, 0, 0, .12);
}

@media (prefers-reduced-motion: no-preference) {
    .mud-dialog {
        animation: kk-dialog-in .16s ease-out;
    }
}

@keyframes kk-dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

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

/* ค่าที่อ่านได้อย่างเดียวในแถวฟอร์ม (เช่นทุนเฉลี่ย ทุนล่าสุด): ป้ายเล็กกับตัวเลขบนพื้นเทาอ่อน ไม่มีกรอบ
   ต่างจากช่องกรอกชัดเจน ผู้ใช้จะไม่พยายามคลิกเข้าไปแก้ */
.kk-ro-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    min-height: 32px;
    align-items: center;
    padding: 5px 10px;
    background: #F3F2F1;
    border-radius: var(--kk-radius-sm);
}

.kk-ro-label {
    margin-right: 8px;
    font-size: 12px;
    color: var(--kk-text-3);
}

.kk-ro-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--kk-ink);
    font-variant-numeric: tabular-nums;
}

/* หัวส่วนที่พับได้ในฟอร์ม (เช่น "ราคาขายเพิ่มเติม"): ลิงก์สีเน้นมีลูกศร แบบ Show more ของ Azure */
.kk-expander {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 14px 0 0 -6px;
    padding: 6px 10px 6px 4px;
    border: 0;
    border-radius: var(--kk-radius-sm);
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--kk-accent);
    cursor: pointer;
}

.kk-expander:hover,
.kk-expander:focus-visible {
    background: var(--kk-fill);
    outline: none;
}

.kk-expander .mud-icon-root {
    font-size: 20px;
}

.kk-expander-note {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 400;
    color: var(--kk-text-2);
}

.kk-expander-body {
    padding-top: 6px;
}

/* แท็บใน dialog: ชิดขอบบนของเนื้อหา ไม่ต้องเว้นบนแบบแท็บของหน้า */
.kk-az-tabs.kk-az-tabs-dialog {
    margin-top: 0;
}

/* แท็บใน dialog สูงขั้นต่ำเท่ากัน แท็บที่เนื้อหาน้อย (เช่นสมาชิกตอนยังไม่เปิดใช้) จะไม่ทำให้กล่องหดแล้วกระโดดกลางจอ */
.mud-dialog .kk-wiz-panel {
    min-height: 340px;
}

/* หัวข้อสุดท้ายของแท็บใน dialog ไม่ต้องเว้นล่าง ปุ่มของ dialog อยู่ถัดไปแล้ว */
.mud-dialog .kk-wiz-panel > .kk-wiz-section:last-child,
.mud-dialog .kk-fcard > .kk-wiz-section:last-child {
    margin-bottom: 4px;
}

/* ===== แถบตัวกรองแบบ Azure portal (2026-10-16) =====
   ป้ายเล็กซ้าย ช่องขวา ไม่ใช้ป้ายลอยในช่อง (คอมโพเนนต์ KkFilterField, TimeRangeSwitch)
   วางเป็นตารางคอลัมน์กว้างเท่ากัน ป้ายกว้างคงที่ ขอบซ้ายของป้ายและของช่องจึงตรงกันทุกแถว
   รอบแรกเรียงแบบ flex ตามความกว้างของแต่ละช่อง แถวสองไม่ตรงกับแถวแรก ผู้ใช้ติว่าดูไม่เป็นระเบียบ
   ความสูงช่อง 32px มาจากกฎช่องกรอกแบบ Azure ด้านบนอยู่แล้ว */
.kk-fbar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
    gap: 10px 24px;
    align-items: center;
}

.kk-fbar-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
    min-width: 0;
}

.kk-fbar-label {
    font-size: 13px;
    line-height: 1.3;
    color: var(--kk-ink);
}

.kk-fbar-control {
    min-width: 0;
}

.kk-fbar .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.kk-fbar .mud-switch {
    margin: 0;
}

.kk-fbar .mud-switch .mud-typography {
    font-size: 13px;
}

/* ช่องที่ข้อความยาว (ช่องค้นหา) กินสองคอลัมน์บนจอที่กว้างพอจะมีสองคอลัมน์ขึ้นไป
   จอแคบเป็นคอลัมน์เดียว ถ้ายังสั่ง span 2 ตารางจะงอกคอลัมน์ที่สองจนล้นจอ */
@media (min-width: 1000px) {
    .kk-fbar-item.kk-fbar-wide {
        grid-column: span 2;
    }
}

/* ช่องเวลา: [สวิตช์] [เริ่ม] ถึง [สิ้นสุด] ในช่องเดียว */
.kk-fbar-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kk-fbar-inline .mud-switch {
    flex: none;
}

.kk-fbar-inline .kk-fbar-timebox {
    flex: 1 1 0;
    min-width: 0;
}

/* ช่องเวลาแคบ: ไอคอนนาฬิกาเล็กลง ระยะในกรอบแคบลง ไม่งั้นเหลือที่ให้ตัวเลขไม่ถึง "00:00" */
.kk-fbar-timebox .mud-input.mud-input-outlined > .mud-input-adornment-end {
    margin-left: 2px;
    padding: 0 1px;
}

.kk-fbar-timebox .mud-input.mud-input-outlined > .mud-input-adornment-end .mud-icon-root {
    font-size: 16px;
}

.kk-fbar-timebox .mud-input > input.mud-input-root-outlined {
    padding-left: 7px;
}

/* มือถือ: ป้ายขึ้นไปอยู่เหนือช่องแบบ KkFormRow ช่องได้กว้างเต็มแถว (ป้ายซ้าย 92px เหลือช่องราว 220px
   ช่วงวันที่ถูกตัดเป็น "31/10/202") แถวที่เป็นสวิตช์อย่างเดียวคงป้ายซ้าย สวิตช์ขวา ไม่ต้องเสียสองบรรทัด */
@media (max-width: 599.98px) {
    .kk-fbar {
        gap: 10px;
    }

    .kk-fbar-item {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 4px;
    }

    .kk-fbar-item:has(.mud-switch):not(:has(.kk-fbar-inline)) {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    /* จำนวนรายการขึ้นที่หัวกล่องตัวกรอง (FilterPanel Note) แล้ว ในแถวชิปไม่ต้องซ้ำ
       แถวที่มีแต่จำนวนอย่างเดียว (ไม่มีชิป) ซ่อนทั้งแถว */
    .kk-filter-body .kk-list-count {
        display: none;
    }

    .kk-filter-body .kk-preset-row:not(:has(.mud-chip)) {
        display: none;
    }
}

/* จำนวนรายการในการ์ด แทนแถวแยกเหนือตาราง (ผู้ใช้ขอ 2026-10-17 แถวนั้นกินที่แนวสูงและดูห่าง)
   การ์ดยอดรวม: ยอดอยู่ซ้าย จำนวนชิดขวาแนวเดียวกับบรรทัดตัวเลข / แถวชิปของการ์ดตัวกรอง: อยู่ก่อนชิปสถานะ */
.kk-sum-card {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.kk-preset-count {
    margin-right: 8px;
}