/* =====================================================================
   KUN — CENTRAL STYLESHEET
   ไฟล์ CSS กลางไฟล์เดียวของทั้งระบบ:
     • Portal     (Views/Shared/_Layout.cshtml — โหลดคู่กับ Bootstrap)
     • Login      (Views/Account/Login.cshtml   — โหลดคู่กับ Bootstrap)
     • KUN_Move   (Views/Move/_MoveLayout.cshtml — ไม่โหลด Bootstrap)

   ชุดสี/ฟอนต์ อ้างอิง "Kunalai Manual Guidelines" (Color น.44–47, Typography น.38–41)
   สรุปการ map ไว้ที่ docs/design/KUN_THEME.md

   กติกา:
     1. ห้ามใส่ <style> หรือ style="" ใน view — เพิ่ม class ที่ไฟล์นี้แทน
        (ยกเว้น JS ที่สลับ el.style.display ตอนรันเท่านั้น)
     2. สีทุกสีอ้างตัวแปรในหมวด 1 — เปลี่ยนสีแก้ที่ :root จุดเดียว
        dark mode = เปลี่ยนค่าตัวแปรใน body.theme-dark ไม่ต้องไล่แก้ทีละ component
     3. ห้ามใส่ font-family ตรงๆ — ใช้ --font-heading / --font-body / --font-script
     4. class ที่เฉพาะหน้า ให้ขึ้นต้นด้วย prefix ของหน้านั้น (cp-, move-, session-, login-)

   สารบัญ
      0. BRAND FONTS (@font-face)
      1. THEME TOKENS
      2. BASE + TYPOGRAPHY + BOOTSTRAP PATCHES
     2B. BOOTSTRAP BRAND MAPPING (--bs-* → KUN tokens)
      3. DARK MODE — BOOTSTRAP OVERRIDES
      4. UTILITIES (kun-*)
      5. PORTAL COMPONENTS (logo, app card, theme switch)
      6. PAGE: LOGIN
      7. SESSION TIMEOUT MODAL
      8. PAGE: APP MANAGEMENT
      9. PAGE: CONTRACT PROJECT DETAIL
     10. AUTOCOMPLETE DROPDOWNS
     11. KUN_MOVE
     12. KUN_MOVE ADMIN
     13. RESPONSIVE — PORTAL SHELL
     14. PAGE: EXECUTIVE DASHBOARD
   ===================================================================== */


/* =====================================================================
   0. BRAND FONTS  (Kunalai Manual Guidelines — Typography)
      Primary   : Bai Jamjuree        → หัวข้อ ปุ่ม ตัวเลขเด่น (Bold/SemiBold/Medium/Regular)
      Secondary : IBM Plex Sans Thai  → body text + caption (ฟอนต์ไม่มีหัว)
      Decorative: Worasait            → ลายมือ ใช้เฉพาะคำสั้นๆ (class .kun-font-script)

      .woff2 แปลงจาก .ttf ต้นฉบับในโฟลเดอร์ "KUN Theme" — ลิขสิทธิ์ดู assets/fonts/OFL.txt
      โฮสต์เองทั้งหมด ไม่ใช้ CDN (CSP: font-src 'self')
   ===================================================================== */
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/BaiJamjuree-Regular.woff2') format('woff2')}
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/BaiJamjuree-Medium.woff2') format('woff2')}
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/BaiJamjuree-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/BaiJamjuree-Bold.woff2') format('woff2')}

@font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/IBMPlexSansThai-Regular.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/IBMPlexSansThai-Medium.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/IBMPlexSansThai-SemiBold.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/IBMPlexSansThai-Bold.woff2') format('woff2')}

@font-face{font-family:'Worasait';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Worasait-Regular.woff2') format('woff2')}


/* =====================================================================
   1. THEME TOKENS
   ===================================================================== */
:root {
    /* ---- ชุดสีหลัก Primary (Manual Guidelines น.44) ------------------ */
    --kun-magenta:   #78184a;   /* Pantone 235  — สีหลักของแบรนด์      */
    --kun-raisin:    #1c1f2a;   /* Pantone 532  — ตัวอักษร / พื้นเข้ม   */
    --kun-porcelain: #f0eeea;   /* Pantone 7534 Tint30 — พื้นหลัง       */
    --kun-pink:      #e50695;   /* Rhodamine Red — สีเน้น ใช้ทีละจุด   */

    /* ---- ชุดสีรอง Secondary (น.45) — ใช้กับ status / กราฟ ---------- */
    --kun-wood:        #5d3e26;
    --kun-clementine:  #e96e00;
    --kun-bubblegum:   #d478aa;  /* อ่านจาก swatch จริง (HEX ในเล่มพิมพ์ผิด — ดู docs/design/KUN_THEME.md) */
    --kun-canary:      #f8cf3f;
    --kun-ecru:        #c3b78a;
    --kun-sea-green:   #5c9266;
    --kun-soft-purple: #a6a4db;
    --kun-pastel-blue: #acc2e3;

    /* ---- Typography (น.38–41) — leading ภาษาไทย 1 : 1.2 ------------ */
    --font-heading: 'Bai Jamjuree', 'IBM Plex Sans Thai', 'Segoe UI', Tahoma, sans-serif;
    --font-body: 'IBM Plex Sans Thai', 'Bai Jamjuree', 'Segoe UI', Tahoma, sans-serif;
    --font-script: 'Worasait', 'Bai Jamjuree', cursive;
    --leading-head: 1.2;
    --leading-body: 1.6;

    /* ---- พื้นผิว / ตัวอักษร (Porcelain based 60:40) ----------------- */
    --bg: #f0eeea;
    --surface: #ffffff;
    --surface-2: #faf8f5;
    --text: #1c1f2a;
    --muted: #5f6472;
    --border: rgba(28,31,42,.14);
    --border-strong: rgba(28,31,42,.30);
    --hover: rgba(120,24,74,.06);

    /* ---- Brand = Bootstrap primary — ประกาศเองเพราะ KUN_Move ไม่โหลด Bootstrap
           ใช้แบบโปร่งแสงด้วย rgba(var(--brand-rgb), .25) ---------------- */
    --brand: #78184a;
    --brand-rgb: 120,24,74;
    --brand-hover: #5e1239;
    --brand-hover-border: #4b0e2d;
    --brand-text: #78184a;
    --brand-bg: #f5eaef;
    --brand-border: #e0c6d3;
    --accent: #e50695;          /* Pink — เน้นไม่เกิน 1 จุดต่อหน้าจอ */
    --accent-rgb: 229,6,149;
    --focus-border: rgba(120,24,74,.55);
    --focus-ring: 0 0 0 .2rem rgba(var(--brand-rgb),.25);

    /* ---- สีสถานะ — ไล่ความเข้มจากชุดสีรองให้ contrast ผ่าน WCAG AA --- */
    --success: #47764f;         /* Sea Green เข้มพอให้ตัวอักษรขาวอ่านออก */
    --success-hover: #3a6242;
    --success-hover-border: #2f5236;
    --warning: #f8cf3f;         /* Canary — คู่กับตัวอักษรสีเข้มเท่านั้น */
    --orange: #e96e00;          /* Clementine */
    --danger: #c8362a;
    --danger-hover: #a92c22;
    --danger-hover-border: #92261d;
    --secondary: #565b6b;       /* Raisin โทนอ่อน */
    --secondary-hover: #444856;
    --info: #3a6591;            /* Pastel Blue โทนเข้ม — ใช้กับตัวอักษร/เส้นขอบ */
    --info-fill: #acc2e3;       /* Pastel Blue ตามเล่ม — ใช้เป็นพื้น คู่กับตัวอักษรสีเข้ม */

    /* สีอ่อนสำหรับ status / alert (คู่กับ Bootstrap 5.3 *-subtle) */
    --info-bg: #eaf0f8;     --info-border: #c6d6ec;     --info-text: #2b5580;
    --success-bg: #e8f0e9;  --success-border: #bed6c3;  --success-text: #2f5c3b;
    --warning-bg: #fdf3d8;  --warning-border: #f4e09c;  --warning-text: #6b5207;
    --danger-bg: #fae9e6;   --danger-border: #eec4bd;   --danger-text: #8c2318;

    --shadow-sm: 0 4px 16px rgba(28,31,42,.06);
    --shadow-lg: 0 10px 24px rgba(28,31,42,.14);
}

/* theme-dark-pre = ตั้งก่อน paint กันจอขาวแวบ (script ใน <head> ของ _Layout/Login)
   ต้องประกาศทั้งบน html และ body — การ map --bs-* บน :root อ้างโทเคนเหล่านี้ */
html.theme-dark-pre,
html.theme-dark,
body.theme-dark {
    /* Raisin Black based — พื้นเข้ม ตัวอักษร Porcelain */
    --bg: #14161e;
    --surface: #1c1f2a;
    --surface-2: #232734;
    --text: #f0eeea;
    --muted: #a5a9b6;
    --border: rgba(240,238,234,.14);
    --border-strong: rgba(240,238,234,.32);
    --hover: rgba(240,238,234,.07);

    /* Magenta เข้มเกินไปเมื่ออยู่บนพื้นดำ — ใช้โทนสว่างขึ้น และใช้ Bubblegum เป็นสีตัวอักษร */
    --brand: #9e2a5f;
    --brand-rgb: 158,42,95;
    --brand-hover: #b4336e;
    --brand-hover-border: #c23a76;
    --brand-text: #d478aa;
    --brand-bg: rgba(158,42,95,.18);
    --brand-border: rgba(158,42,95,.42);
    --accent: #ff4fb2;
    --accent-rgb: 255,79,178;
    --focus-border: rgba(212,120,170,.7);

    --success: #4d8058;
    --success-hover: #3f6d49;
    --success-hover-border: #38623f;
    --danger: #cf3b2d;
    --danger-hover: #b93225;
    --danger-hover-border: #a62c21;
    --secondary: #6d7382;
    --secondary-hover: #7c8291;
    --info: #7ea6d8;
    --info-fill: #acc2e3;

    --info-bg: rgba(172,194,227,.14);   --info-border: rgba(172,194,227,.32);   --info-text: #bcd2ee;
    --success-bg: rgba(92,146,102,.16); --success-border: rgba(92,146,102,.36); --success-text: #96c9a1;
    --warning-bg: rgba(248,207,63,.14); --warning-border: rgba(248,207,63,.34); --warning-text: #f5da7d;
    --danger-bg: rgba(217,72,58,.16);   --danger-border: rgba(217,72,58,.36);   --danger-text: #f3a79d;

    --shadow-sm: 0 4px 16px rgba(0,0,0,.35);
    --shadow-lg: 0 10px 24px rgba(0,0,0,.5);
}


/* =====================================================================
   2. BASE + TYPOGRAPHY + BOOTSTRAP PATCHES
   ===================================================================== */
*{box-sizing:border-box}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* หัวข้อใช้ฟอนต์หลัก Bai Jamjuree + leading 1:1.2 ตาม Manual Guidelines */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .modal-title, .offcanvas-title, .navbar-brand, legend {
    font-family: var(--font-heading);
    line-height: var(--leading-head);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--text);
}

/* ตัวเลข/ตารางอ่านง่ายขึ้นเมื่อความกว้างตัวเลขเท่ากัน */
.table, .dash-kpi-value, .move-field dd, code, .kun-num {
    font-variant-numeric: tabular-nums;
}

small, .small, .form-text, figcaption { line-height: 1.5; }

/* ฟอนต์ตกแต่ง — ใช้กับคำสั้นๆ เท่านั้น (Manual Guidelines น.41) */
.kun-font-script { font-family: var(--font-script); font-weight: 400; }

.bg-surface {
    background: var(--surface) !important;
}

.border-theme {
    border-color: var(--border) !important;
}

.text-muted {
    color: var(--muted) !important;
}

.card, .list-group-item, .dropdown-menu, .offcanvas {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

.list-group-item:hover {
    background: var(--hover);
}

.dropdown-item {
    color: var(--text);
    text-decoration: none;
}

.dropdown-item:hover {
    background: var(--hover);
    color: var(--text);
}

.dropdown-divider {
    border-top-color: var(--border);
}

.vr {
    opacity: 1;
    background-color: var(--border);
}


/* =====================================================================
   2B. BOOTSTRAP BRAND MAPPING  (--bs-* → KUN tokens)
   Bootstrap 5.3 คอมไพล์ค่าสีเป็นตัวเลขตรงๆ ไว้ใน component (เช่น .btn-primary)
   การเปลี่ยน --bs-primary เฉยๆ จึงไม่พอ ต้อง map ตัวแปรระดับ component ด้วย
   เพิ่ม component ใหม่ → เพิ่ม mapping ตรงนี้ ห้ามไปแก้ไฟล์ bootstrap.min.css
   ===================================================================== */
:root,
[data-bs-theme="light"],
body {
    --bs-body-font-family: var(--font-body);
    --bs-body-bg: var(--bg);
    --bs-body-bg-rgb: 240,238,234;
    --bs-body-color: var(--text);
    --bs-body-color-rgb: 28,31,42;
    --bs-emphasis-color: var(--text);
    --bs-secondary-color: var(--muted);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface-2);
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-heading-color: var(--text);
    --bs-code-color: var(--brand-text);
    --bs-highlight-bg: var(--warning-bg);

    /* มุมโค้งของทั้งระบบ — เดิม Bootstrap .375rem ดูแข็งกว่าการ์ดที่ใช้ 12–16px */
    --bs-border-radius: .625rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: .875rem;
    --bs-border-radius-xl: 1.25rem;

    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-primary-text-emphasis: var(--brand-text);
    --bs-primary-bg-subtle: var(--brand-bg);
    --bs-primary-border-subtle: var(--brand-border);

    --bs-secondary: var(--secondary);
    --bs-secondary-rgb: 86,91,107;
    --bs-secondary-color-rgb: 95,100,114;
    --bs-secondary-text-emphasis: var(--muted);
    --bs-secondary-bg-subtle: var(--surface-2);
    --bs-secondary-border-subtle: var(--border);

    --bs-success: var(--success);
    --bs-success-rgb: 71,118,79;
    --bs-success-text-emphasis: var(--success-text);
    --bs-success-bg-subtle: var(--success-bg);
    --bs-success-border-subtle: var(--success-border);

    --bs-danger: var(--danger);
    --bs-danger-rgb: 200,54,42;
    --bs-danger-text-emphasis: var(--danger-text);
    --bs-danger-bg-subtle: var(--danger-bg);
    --bs-danger-border-subtle: var(--danger-border);

    --bs-warning: var(--warning);
    --bs-warning-rgb: 248,207,63;
    --bs-warning-text-emphasis: var(--warning-text);
    --bs-warning-bg-subtle: var(--warning-bg);
    --bs-warning-border-subtle: var(--warning-border);

    /* .bg-info / .btn-info เป็นพื้นสีอ่อน — ตัวอักษรบนพื้นนี้ต้องเป็นสีเข้มเสมอ */
    --bs-info: var(--info-fill);
    --bs-info-rgb: 172,194,227;
    --bs-info-text-emphasis: var(--info-text);
    --bs-info-bg-subtle: var(--info-bg);
    --bs-info-border-subtle: var(--info-border);

    --bs-link-color: var(--brand-text);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-link-hover-color: var(--brand-hover);
    --bs-link-hover-color-rgb: 75,14,45;

    --bs-focus-ring-color: rgba(var(--brand-rgb),.25);
}

body.theme-dark {
    --bs-body-bg-rgb: 20,22,30;
    --bs-body-color-rgb: 240,238,234;
    --bs-secondary-rgb: 109,115,130;
    --bs-secondary-color-rgb: 165,169,182;
    --bs-success-rgb: 77,128,88;
    --bs-danger-rgb: 207,59,45;
    --bs-link-color-rgb: 212,120,170;
    --bs-link-hover-color-rgb: 226,146,190;
    --bs-link-color: var(--brand-text);
    --bs-link-hover-color: #e292be;
    --bs-emphasis-color: var(--text);
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
}

/* --- Buttons ------------------------------------------------------- */
.btn { font-family: var(--font-heading); font-weight: 500; }

.btn-primary {
    --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover-border);
    --bs-btn-active-bg: var(--brand-hover-border); --bs-btn-active-border-color: var(--brand-hover-border);
    --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-text); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
    --bs-btn-disabled-color: var(--brand-text); --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.btn-success {
    --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: var(--success-hover); --bs-btn-hover-border-color: var(--success-hover-border);
    --bs-btn-active-bg: var(--success-hover-border); --bs-btn-active-border-color: var(--success-hover-border);
    --bs-btn-disabled-bg: var(--success); --bs-btn-disabled-border-color: var(--success);
    --bs-btn-focus-shadow-rgb: 71,118,79;
}
.btn-outline-success {
    --bs-btn-color: var(--success); --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: var(--success); --bs-btn-hover-border-color: var(--success);
    --bs-btn-active-bg: var(--success-hover); --bs-btn-active-border-color: var(--success-hover);
    --bs-btn-disabled-color: var(--success); --bs-btn-disabled-border-color: var(--success);
    --bs-btn-focus-shadow-rgb: 71,118,79;
}

.btn-danger {
    --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger-hover); --bs-btn-hover-border-color: var(--danger-hover-border);
    --bs-btn-active-bg: var(--danger-hover-border); --bs-btn-active-border-color: var(--danger-hover-border);
    --bs-btn-disabled-bg: var(--danger); --bs-btn-disabled-border-color: var(--danger);
    --bs-btn-focus-shadow-rgb: 200,54,42;
}
.btn-outline-danger {
    --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: var(--danger-hover); --bs-btn-active-border-color: var(--danger-hover);
    --bs-btn-disabled-color: var(--danger); --bs-btn-disabled-border-color: var(--danger);
    --bs-btn-focus-shadow-rgb: 200,54,42;
}

/* Canary สว่างมาก — ตัวอักษรต้องเป็นสีเข้มเสมอ */
.btn-warning {
    --bs-btn-color: var(--kun-raisin); --bs-btn-bg: var(--warning); --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: var(--kun-raisin); --bs-btn-hover-bg: #e9bd23; --bs-btn-hover-border-color: #dbb11c;
    --bs-btn-active-color: var(--kun-raisin); --bs-btn-active-bg: #dbb11c; --bs-btn-active-border-color: #cda516;
    --bs-btn-disabled-color: var(--kun-raisin); --bs-btn-disabled-bg: var(--warning); --bs-btn-disabled-border-color: var(--warning);
    --bs-btn-focus-shadow-rgb: 248,207,63;
}
.btn-outline-warning {
    --bs-btn-color: var(--warning-text); --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: var(--kun-raisin); --bs-btn-hover-bg: var(--warning); --bs-btn-hover-border-color: var(--warning);
    --bs-btn-active-color: var(--kun-raisin); --bs-btn-active-bg: var(--warning); --bs-btn-active-border-color: var(--warning);
    --bs-btn-disabled-color: var(--warning-text); --bs-btn-disabled-border-color: var(--warning);
    --bs-btn-focus-shadow-rgb: 248,207,63;
}

.btn-secondary {
    --bs-btn-bg: var(--secondary); --bs-btn-border-color: var(--secondary);
    --bs-btn-hover-bg: var(--secondary-hover); --bs-btn-hover-border-color: var(--secondary-hover);
    --bs-btn-active-bg: var(--secondary-hover); --bs-btn-active-border-color: var(--secondary-hover);
    --bs-btn-disabled-bg: var(--secondary); --bs-btn-disabled-border-color: var(--secondary);
    --bs-btn-focus-shadow-rgb: 86,91,107;
}
.btn-outline-secondary {
    --bs-btn-color: var(--muted); --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: var(--hover); --bs-btn-hover-border-color: var(--focus-border);
    --bs-btn-active-color: var(--text); --bs-btn-active-bg: var(--hover); --bs-btn-active-border-color: var(--focus-border);
    --bs-btn-disabled-color: var(--muted); --bs-btn-disabled-border-color: var(--border-strong);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.btn-info {
    --bs-btn-color: var(--kun-raisin); --bs-btn-bg: var(--info-fill); --bs-btn-border-color: var(--info-fill);
    --bs-btn-hover-color: var(--kun-raisin); --bs-btn-hover-bg: #9ab4dc; --bs-btn-hover-border-color: #8fabd6;
    --bs-btn-active-color: var(--kun-raisin); --bs-btn-active-bg: #8fabd6; --bs-btn-active-border-color: #83a2d0;
    --bs-btn-disabled-color: var(--kun-raisin); --bs-btn-disabled-bg: var(--info-fill); --bs-btn-disabled-border-color: var(--info-fill);
    --bs-btn-focus-shadow-rgb: 172,194,227;
}
.btn-outline-info {
    --bs-btn-color: var(--info); --bs-btn-border-color: var(--info);
    --bs-btn-hover-color: var(--kun-raisin); --bs-btn-hover-bg: var(--info-fill); --bs-btn-hover-border-color: var(--info-fill);
    --bs-btn-active-color: var(--kun-raisin); --bs-btn-active-bg: var(--info-fill); --bs-btn-active-border-color: var(--info-fill);
    --bs-btn-disabled-color: var(--info); --bs-btn-disabled-border-color: var(--info);
    --bs-btn-focus-shadow-rgb: 172,194,227;
}

.btn-link { --bs-btn-color: var(--brand-text); --bs-btn-hover-color: var(--brand-hover); --bs-btn-focus-shadow-rgb: var(--brand-rgb); }

/* --- Form controls ------------------------------------------------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--focus-border);
    box-shadow: var(--focus-ring);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2378184a'/%3e%3c/svg%3e");
}
.form-range::-webkit-slider-thumb { background-color: var(--brand); }
.form-range::-moz-range-thumb { background-color: var(--brand); }
.form-label { font-weight: 500; }

/* --- Navbar / nav / dropdown / list-group / pagination ------------- */
.navbar {
    --bs-navbar-color: var(--muted);
    --bs-navbar-hover-color: var(--brand-text);
    --bs-navbar-active-color: var(--brand-text);
    --bs-navbar-brand-color: var(--brand-text);
    --bs-navbar-brand-hover-color: var(--brand-text);
    --bs-navbar-toggler-border-color: var(--border);
    --bs-navbar-toggler-focus-width: .2rem;
}
.navbar .nav-link { font-family: var(--font-heading); font-weight: 500; }

.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--brand-text); --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface); }

.dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-color: var(--text);
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-link-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--hover);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-active-bg: var(--brand);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-header-color: var(--muted);
    --bs-dropdown-divider-bg: var(--border);
    box-shadow: var(--shadow-lg);
}

.list-group {
    --bs-list-group-bg: var(--surface);
    --bs-list-group-color: var(--text);
    --bs-list-group-border-color: var(--border);
    --bs-list-group-action-color: var(--text);
    --bs-list-group-action-hover-color: var(--brand-text);
    --bs-list-group-action-hover-bg: var(--hover);
    --bs-list-group-active-bg: var(--brand);
    --bs-list-group-active-border-color: var(--brand);
}

.pagination {
    --bs-pagination-color: var(--brand-text);
    --bs-pagination-bg: var(--surface);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-hover-color: var(--brand-hover);
    --bs-pagination-hover-bg: var(--hover);
    --bs-pagination-hover-border-color: var(--border);
    --bs-pagination-focus-color: var(--brand-hover);
    --bs-pagination-focus-bg: var(--hover);
    --bs-pagination-focus-box-shadow: var(--focus-ring);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
    --bs-pagination-disabled-color: var(--muted);
    --bs-pagination-disabled-bg: var(--surface-2);
    --bs-pagination-disabled-border-color: var(--border);
}

/* --- Card / modal / offcanvas / accordion / progress --------------- */
.card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--border); --bs-card-cap-bg: var(--surface-2); }
.modal { --bs-modal-bg: var(--surface); --bs-modal-color: var(--text); --bs-modal-border-color: var(--border); --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border); }
.offcanvas, .offcanvas-start, .offcanvas-end { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--text); --bs-offcanvas-border-color: var(--border); }
.accordion {
    --bs-accordion-bg: var(--surface);
    --bs-accordion-color: var(--text);
    --bs-accordion-border-color: var(--border);
    --bs-accordion-btn-color: var(--text);
    --bs-accordion-active-color: var(--brand-text);
    --bs-accordion-active-bg: var(--brand-bg);
    --bs-accordion-btn-focus-box-shadow: var(--focus-ring);
}
.progress, .progress-stacked { --bs-progress-bg: var(--hover); --bs-progress-bar-bg: var(--brand); }
.badge { --bs-badge-border-radius: .4rem; font-family: var(--font-heading); }

/* --- Tables (variant แต่ละสีถูก compile เป็นค่าคงที่ ต้อง map ใหม่) -- */
.table { --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--hover); --bs-table-hover-color: var(--text); }
.table > thead { font-family: var(--font-heading); }
.table-light { --bs-table-bg: var(--surface-2); --bs-table-color: var(--muted); --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--hover); --bs-table-hover-color: var(--text); }
.table-primary { --bs-table-bg: var(--brand-bg); --bs-table-color: var(--brand-text); --bs-table-border-color: var(--brand-border); --bs-table-striped-bg: var(--brand-bg); --bs-table-striped-color: var(--brand-text); --bs-table-active-bg: var(--brand-border); --bs-table-active-color: var(--brand-text); --bs-table-hover-bg: var(--brand-border); --bs-table-hover-color: var(--brand-text); }
.table-success { --bs-table-bg: var(--success-bg); --bs-table-color: var(--success-text); --bs-table-border-color: var(--success-border); --bs-table-striped-bg: var(--success-bg); --bs-table-striped-color: var(--success-text); --bs-table-active-bg: var(--success-border); --bs-table-active-color: var(--success-text); --bs-table-hover-bg: var(--success-border); --bs-table-hover-color: var(--success-text); }
.table-danger { --bs-table-bg: var(--danger-bg); --bs-table-color: var(--danger-text); --bs-table-border-color: var(--danger-border); --bs-table-striped-bg: var(--danger-bg); --bs-table-striped-color: var(--danger-text); --bs-table-active-bg: var(--danger-border); --bs-table-active-color: var(--danger-text); --bs-table-hover-bg: var(--danger-border); --bs-table-hover-color: var(--danger-text); }
.table-warning { --bs-table-bg: var(--warning-bg); --bs-table-color: var(--warning-text); --bs-table-border-color: var(--warning-border); --bs-table-striped-bg: var(--warning-bg); --bs-table-striped-color: var(--warning-text); --bs-table-active-bg: var(--warning-border); --bs-table-active-color: var(--warning-text); --bs-table-hover-bg: var(--warning-border); --bs-table-hover-color: var(--warning-text); }
.table-info { --bs-table-bg: var(--info-bg); --bs-table-color: var(--info-text); --bs-table-border-color: var(--info-border); --bs-table-striped-bg: var(--info-bg); --bs-table-striped-color: var(--info-text); --bs-table-active-bg: var(--info-border); --bs-table-active-color: var(--info-text); --bs-table-hover-bg: var(--info-border); --bs-table-hover-color: var(--info-text); }
.table-secondary { --bs-table-bg: var(--surface-2); --bs-table-color: var(--muted); --bs-table-border-color: var(--border); --bs-table-striped-bg: var(--surface-2); --bs-table-striped-color: var(--muted); --bs-table-active-bg: var(--hover); --bs-table-active-color: var(--text); --bs-table-hover-bg: var(--hover); --bs-table-hover-color: var(--text); }

/* --- Utility background ที่ Bootstrap compile ค่าคงที่ไว้ ----------- */
.bg-light { background-color: var(--surface-2) !important; }
.bg-white { background-color: var(--surface) !important; }
.bg-dark  { background-color: var(--kun-raisin) !important; }
.text-body-secondary { color: var(--muted) !important; }
.link-primary { color: var(--brand-text) !important; }
.text-bg-light { background-color: var(--surface-2) !important; color: var(--text) !important; }

/* .text-dark = "ตัวอักษรสีเข้ม" — view ใช้คู่กับ badge พื้นอ่อน (bg-warning/bg-info)
   จึงต้องเข้มเสมอทั้งสองโหมด ห้าม map เป็น var(--text) */
.text-dark { color: var(--kun-raisin) !important; }

/* พื้น Canary / Pastel Blue สว่างมาก — บังคับตัวอักษรเข้มแม้ view ลืมใส่ .text-dark */
.badge.bg-warning, .badge.bg-info,
.text-bg-warning, .text-bg-info { color: var(--kun-raisin) !important; }

/* .text-* ใช้เขียนบนพื้นหน้าเว็บ ไม่ใช่บนพื้นสีทึบ — จึงต้องใช้เฉดที่ contrast ผ่าน
   (Bootstrap ใช้ตัวแปรตัวเดียวกับสีพื้น ทำให้ .text-warning/.text-info อ่านไม่ออก) */
.text-warning { color: var(--warning-text) !important; }
.text-info    { color: var(--info) !important; }

body.theme-dark .text-primary { color: var(--brand-text) !important; }
body.theme-dark .text-danger  { color: var(--danger-text) !important; }
body.theme-dark .text-success { color: var(--success-text) !important; }
body.theme-dark .text-info    { color: var(--info-text) !important; }
body.theme-dark .text-secondary { color: var(--muted) !important; }

/* ปุ่ม outline ในโหมดมืด: ใช้เฉดสว่างของสถานะ ไม่งั้นตัวอักษรจมพื้นดำ */
body.theme-dark .btn-outline-danger  { --bs-btn-color: var(--danger-text);  --bs-btn-disabled-color: var(--danger-text); }
body.theme-dark .btn-outline-success { --bs-btn-color: var(--success-text); --bs-btn-disabled-color: var(--success-text); }
body.theme-dark .btn-outline-info    { --bs-btn-color: var(--info-text);    --bs-btn-disabled-color: var(--info-text); }

::selection { background: rgba(var(--brand-rgb),.18); }



/* =====================================================================
   3. DARK MODE — BOOTSTRAP OVERRIDES
   (สีส่วนใหญ่มาจากตัวแปรในหมวด 1 — ตรงนี้แค่บอกว่า component ไหนใช้ตัวแปรไหน)
   ===================================================================== */

/* --- Utility --- */
body.theme-dark .btn-close {
    filter: invert(1);
}

body.theme-dark .border,
body.theme-dark .border-bottom,
body.theme-dark .border-top,
body.theme-dark .border-start,
body.theme-dark .border-end {
    border-color: var(--border) !important;
}

/* --- Navbar --- */
body.theme-dark .navbar {
    --bs-navbar-color: rgba(240,238,234,.78);
    --bs-navbar-hover-color: var(--brand-text);
    --bs-navbar-active-color: var(--brand-text);
    --bs-navbar-brand-color: var(--brand-text);
    --bs-navbar-brand-hover-color: var(--brand-text);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28240, 238, 234, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Form inputs --- */
body.theme-dark .form-control,
body.theme-dark .form-select {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

body.theme-dark .form-control::placeholder {
    color: var(--muted);
}

body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
    background-color: var(--surface-2);
    border-color: var(--focus-border);
    color: var(--text);
    box-shadow: var(--focus-ring);
}

body.theme-dark .form-select option {
    background-color: var(--surface-2);
    color: var(--text);
}

body.theme-dark .form-check-input {
    background-color: var(--surface-2);
    border-color: var(--border);
}

body.theme-dark .input-group-text {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

/* --- Card header/footer --- */
body.theme-dark .card-header,
body.theme-dark .card-footer {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

/* --- Tables --- */
body.theme-dark .table {
    --bs-table-color: var(--text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--hover);
    color: var(--text);
    border-color: var(--border);
}

body.theme-dark .table > :not(caption) > * > * {
    border-bottom-color: var(--border);
}

body.theme-dark .table-light {
    --bs-table-bg: var(--surface-2);
    --bs-table-color: var(--muted);
    --bs-table-border-color: var(--border);
}

body.theme-dark .table-hover > tbody > tr:hover > * {
    background-color: var(--hover);
    color: var(--text);
}

/* variant สีอ่อนในโหมดมืดใช้ token *-bg/-border ที่เป็น rgba อยู่แล้ว
   เหลือแค่บังคับสีตัวอักษรให้เป็นสีตัวอักษรหลัก จะได้ไม่จมพื้น */
body.theme-dark .table-danger,
body.theme-dark .table-warning,
body.theme-dark .table-success,
body.theme-dark .table-info,
body.theme-dark .table-primary {
    --bs-table-color: var(--text);
    --bs-table-striped-color: var(--text);
    --bs-table-hover-color: var(--text);
    --bs-table-active-color: var(--text);
}

body.theme-dark .table-secondary {
    --bs-table-bg: var(--surface-2);
    --bs-table-color: var(--muted);
    --bs-table-border-color: var(--border);
}

/* --- Alerts --- */
body.theme-dark .alert {
    border-color: var(--border);
}

body.theme-dark .alert-info {
    background-color: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text);
}

body.theme-dark .alert-warning {
    background-color: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

body.theme-dark .alert-danger {
    background-color: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);
}

body.theme-dark .alert-success {
    background-color: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

/* --- Badges --- */
body.theme-dark .badge.bg-light {
    background-color: var(--surface-2) !important;
    color: var(--muted) !important;
}

/* --- Modal --- */
body.theme-dark .modal-content {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

body.theme-dark .modal-header,
body.theme-dark .modal-footer {
    border-color: var(--border);
}

/* --- Pagination --- */
body.theme-dark .page-link {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

body.theme-dark .page-link:hover {
    background-color: var(--hover);
    border-color: var(--border);
    color: var(--text);
}


/* =====================================================================
   4. UTILITIES (kun-*) — ใช้ได้ทั้ง Portal และ KUN_Move
   ===================================================================== */

/* max-width ของ container/card */
.kun-mw-420  { max-width: 420px; }
.kun-mw-560  { max-width: 560px; }
.kun-mw-640  { max-width: 640px; }
.kun-mw-720  { max-width: 720px; }
.kun-mw-760  { max-width: 760px; }
.kun-mw-1100 { max-width: 1100px; }

/* ความกว้าง column ของตาราง */
.kun-w-20  { width: 20px; }
.kun-w-28  { width: 28px; }
.kun-w-50  { width: 50px; }
.kun-w-90  { width: 90px; }
.kun-w-110 { width: 110px; }
.kun-w-120 { width: 120px; }
.kun-w-140 { width: 140px; }
.kun-w-160 { width: 160px; }
.kun-w-170 { width: 170px; }

/* ขนาดตัวอักษรเล็ก (badge / label รอง) */
.kun-fs-60   { font-size: .6rem; }
.kun-fs-65   { font-size: .65rem; }
.kun-fs-70   { font-size: .7rem; }
.kun-fs-75   { font-size: .75rem; }
.kun-fs-80   { font-size: .8rem; }
.kun-fs-85   { font-size: .85rem; }
.kun-fs-13px { font-size: 13px; }

/* ระยะห่าง (KUN_Move ไม่มี Bootstrap spacing utilities) */
.kun-mt-12 { margin-top: 12px; }
.kun-mt-24 { margin-top: 24px; }

.kun-cursor-pointer { cursor: pointer; }
.kun-scroll-600     { max-height: 600px; overflow-y: auto; }
.kun-hr-theme       { border-color: var(--border); }
.kun-span-2         { grid-column: span 2; }
.kun-hover-item:hover { background: var(--hover); }

/* ไม่มี !important (ต่างจาก Bootstrap .d-none) — JS สั่ง el.style.display = 'block' ทับได้ */
.kun-hidden { display: none; }

/* ไฮไลต์ชั่วคราว (JS เพิ่ม/ลบ class) */
.kun-flash {
    outline: 3px solid rgba(var(--brand-rgb),.5);
    transition: outline .1s ease;
}

/* --- Brand utilities --- */
.kun-font-heading { font-family: var(--font-heading); }
.kun-font-body    { font-family: var(--font-body); }
.kun-text-brand   { color: var(--brand-text) !important; }
.kun-text-accent  { color: var(--accent) !important; }
.kun-bg-brand     { background: var(--brand) !important; color: #fff !important; }
.kun-bg-porcelain { background: var(--surface-2) !important; }

/* แถบสี Magenta คั่นหัวข้อ — ใช้แทนเส้นคั่นเทาๆ เพื่อให้จำแบรนด์ได้ */
.kun-rule-brand {
    border: 0;
    height: 3px;
    width: 48px;
    opacity: 1;
    border-radius: 999px;
    background: var(--brand);
}


/* =====================================================================
   5. PORTAL COMPONENTS
   ===================================================================== */

/* --- Navbar: เส้น Magenta ใต้แถบเมนูเป็นลายเซ็นของแบรนด์ --- */
.navbar.sticky-top {
    box-shadow: 0 2px 0 0 var(--brand), 0 6px 18px rgba(28,31,42,.05);
    z-index: 1020;
}

/* --- Sidebar --- */
.portal-sidebar .list-group-item-action.active,
.portal-sidebar .list-group-item-action:focus-visible {
    color: var(--brand-text);
}

/* --- Logo --- */
.portal-logo {
    height: 28px;
    width: auto;
    object-fit: contain;
}

@media(min-width:1200px) {
    .portal-logo {
        height: 36px;
    }
}

/* --- App card (หน้า Home) --- */
.portal-app-card {
    border-radius: var(--bs-border-radius-lg);
    border-top: 3px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    cursor: pointer;
}

.portal-app-card:hover {
    transform: translateY(-3px);
    border-top-color: var(--brand);
    box-shadow: 0 10px 26px rgba(var(--brand-rgb),.16) !important;
}

.portal-app-card .card-title {
    color: var(--text);
    font-weight: 600;
}

.portal-app-card:hover .card-title {
    color: var(--brand-text);
}

@media (prefers-reduced-motion: reduce) {
    .portal-app-card { transition: none; }
    .portal-app-card:hover { transform: none; }
}

/* --- iOS dark mode switch (ใช้ทั้ง Portal และ KUN_Move) --- */
.ios-switch {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
}

.ios-switch input {
    display: none;
}

.ios-switch .track {
    width: 52px;
    height: 28px;
    border-radius: 999px;
    background: rgba(0,0,0,.18);
    border: 1px solid var(--border);
    position: relative;
    transition: background .2s ease, border-color .2s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}

body.theme-dark .ios-switch .track {
    background: var(--kun-sea-green);
    border-color: rgba(92,146,102,.55);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}

.ios-switch .thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: left .2s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

.ios-switch input:checked + .track .thumb {
    left: 27px;
}

.icon-moon {
    display: none;
}

.ios-switch input:checked + .track .icon-sun {
    display: none;
}

.ios-switch input:checked + .track .icon-moon {
    display: block;
}

.ios-switch input:focus-visible + .track {
    outline: 3px solid rgba(var(--brand-rgb),.35);
    outline-offset: 2px;
}


/* =====================================================================
   6. PAGE: LOGIN
   ===================================================================== */
body.login-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Porcelain 60 : Magenta 40 — ไล่เฉดมุมล่างขวาตาม Primary Palette Guideline */
    background: var(--bg);
    background-image: radial-gradient(120% 90% at 100% 100%, rgba(var(--brand-rgb),.16) 0%, rgba(var(--brand-rgb),0) 60%);
    background-attachment: fixed;
}

.login-card {
    min-width: min(340px, 100%);
    max-width: 420px;
    width: 100%;
    border-radius: 18px;
    border-top: 4px solid var(--brand);
    box-shadow: 0 10px 30px rgba(28,31,42,.10);
}

body.theme-dark .login-card {
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.login-logo {
    height: 48px;
    object-fit: contain;
}

.toggle-pw {
    cursor: pointer;
    user-select: none;
}

.toggle-pw:hover {
    color: var(--text);
}

/* ก่อน site.js ใส่ body.theme-dark (กันจอขาวแวบตอนโหลด) */
html.theme-dark-pre .login-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

html.theme-dark-pre .login-card label,
html.theme-dark-pre .login-card h5,
html.theme-dark-pre .login-card small {
    color: var(--text);
}

html.theme-dark-pre .form-control {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html.theme-dark-pre .input-group-text {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--muted) !important;
}


/* =====================================================================
   7. SESSION TIMEOUT MODAL (สร้างด้วย JS ใน _Layout.cshtml)
   JS สลับ el.style.display = 'block' / 'none' — class ตั้งค่าเริ่มต้นเป็นซ่อน
   ===================================================================== */
.session-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9998;
}

.session-box {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: 1.5rem 2rem;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    text-align: center;
}

.session-icon    { font-size: 2rem; }
.session-title   { margin: .5rem 0; }
.session-text    { color: var(--muted); font-size: .9rem; }
.session-actions { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; }

.session-btn {
    padding: .4rem 1.2rem;
    background: var(--secondary);
    color: #fff;
    border: none;
    border-radius: .375rem;
    cursor: pointer;
    font-size: .9rem;
}

.session-btn.primary {
    background: var(--brand);
}


/* =====================================================================
   8. PAGE: APP MANAGEMENT (Views/MenuManagement/AppEdit.cshtml)
   ===================================================================== */
.kun-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.kun-page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.kun-page-title h2 {
    margin: 0;
}

.kun-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.kun-btn {
    height: 40px;
    border-radius: 12px !important;
    padding: 0 14px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.kun-spinner {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    display: inline-block;
    animation: kun-spin .8s linear infinite;
}

@keyframes kun-spin {
    to {
        transform: rotate(360deg);
    }
}

.kun-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 1000px;
}

.kun-grid input[type="text"],
.kun-grid input[type="number"],
.kun-grid input:not([type]) {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    padding: 10px 12px;
    outline: none;
}

.kun-grid input:focus {
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12);
    border-color: rgba(var(--brand-rgb),.5);
}

.kun-inline-check {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kun-alert {
    border-radius: 12px;
    padding: 10px 12px;
    margin: 10px 0;
    border: 1px solid;
    font-weight: 600;
}

.kun-alert.success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.kun-alert.error   { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text); }
.kun-alert.warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.kun-alert.info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-text); }

/* จำกัดเฉพาะฟอร์มหน้า AppEdit — ไม่ให้มุมโค้งไปกระทบ input ทั้งระบบ */
#appForm select.form-select,
#appForm input.form-control {
    border-radius: 12px;
}


/* =====================================================================
   9. PAGE: CONTRACT PROJECT DETAIL (Views/ContractProject/Detail.cshtml)
   ===================================================================== */

/* ให้ Bootstrap collapse ทำงานกับ <tr> ได้ถูกต้อง */
#contractTable .contract-group > tr.collapse.show {
    display: table-row;
}

/* ขนาด column — ใช้ทั้ง <col>, <th>, <td> ของตารางหลักและตารางอนุสัญญา */
.cp-col-toggle  { width: 48px; }
.cp-col-date    { width: 155px; }
.cp-col-value   { width: 140px; }
.cp-col-actions { width: 162px; }

.cp-filter-type   { min-width: 148px; }
.cp-filter-status { min-width: 155px; }
.cp-toggle-btn    { min-height: 56px; }

/* แถบสีด้านซ้ายบอกสถานะสัญญา */
#contractTable .contract-group > tr.main-row > td:first-child {
    border-left-width: 4px;
    border-left-style: solid;
}

#contractTable .main-row > td.cp-bar-expired   { border-left-color: var(--danger); }
#contractTable .main-row > td.cp-bar-urgent    { border-left-color: var(--orange); }
#contractTable .main-row > td.cp-bar-warning   { border-left-color: var(--warning); }
#contractTable .main-row > td.cp-bar-active    { border-left-color: var(--success); }
#contractTable .main-row > td.cp-bar-completed { border-left-color: var(--secondary); }
#contractTable .main-row > td.cp-bar-other     { border-left-color: var(--border); }

/* chevron หมุนเมื่อเปิดรายการอนุสัญญา (JS สลับ class is-open) */
.toggle-chevron {
    transition: transform .2s ease;
}

.toggle-chevron.is-open {
    transform: rotate(180deg);
}

#filterKeyword:focus {
    box-shadow: none;
    border-color: var(--focus-border);
}


/* =====================================================================
   10. AUTOCOMPLETE DROPDOWNS (Vendor / AD user search)
   ===================================================================== */

/* ProjectContract/CreateEdit — ค้นหา Vendor */
.kun-ac-dropdown {
    z-index: 1000;
    max-height: 220px;
    overflow-y: auto;
    top: 100%;
    left: 0;
}

/* ProjectContract/CreateEdit — ค้นหาผู้รับแจ้งเตือน AD */
.kun-ac-dropdown-sm {
    z-index: 1050;
    max-height: 200px;
    overflow-y: auto;
    top: calc(100% + 2px);
}

/* UserRole/Create — ค้นหาผู้ใช้ AD */
.kun-ad-dropdown {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-width: 496px;
    max-height: 220px;
    overflow-y: auto;
}


/* =====================================================================
   11. KUN_MOVE (Views/Move — ไม่มี Bootstrap ใช้ class move-* ทั้งหมด)
   ===================================================================== */

/* --- Page shell --- */
.move-app{margin:0;font:400 16px/var(--leading-body) var(--font-body);color:var(--text);background:var(--bg)}
.move-app a{color:var(--brand);text-decoration:none}

.move-top{height:70px;background:var(--surface);color:var(--text);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1180px)/2));gap:20px}
.move-top a{color:var(--text);opacity:.85}
.move-top a:hover{opacity:1}
.move-brand{font-family:var(--font-heading);font-size:24px;font-weight:700;letter-spacing:1px;color:var(--text)}
.move-brand span{color:var(--brand)}
.move-top nav{display:flex;gap:24px;align-items:center;font-size:14px}

.move-wrap{max-width:1180px;margin:auto;padding:30px 24px 60px}
.move-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:18px 0 26px}
.move-app h1{font-size:28px;line-height:1.35;margin:8px 0 12px;overflow-wrap:anywhere}
.move-app h2{font-size:19px;margin:0 0 18px}
.move-app p{margin:0 0 14px}
.move-muted,.move-app small{color:var(--muted)}
.move-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(270px,1fr);gap:22px;align-items:start}

/* --- Cards --- */
.move-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:20px;box-shadow:var(--shadow-sm);min-width:0}
.move-card h2{padding-bottom:12px;border-bottom:1px solid var(--border)}

.move-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.move-field{min-width:0}
.move-field dt{font-size:13px;color:var(--muted);margin-bottom:5px}
.move-field dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.move-wide{grid-column:1/-1}
.move-text{white-space:pre-wrap;overflow-wrap:anywhere}

/* --- Status / notes (สีจากตัวแปร semantic — dark mode เปลี่ยนเอง) --- */
.move-status{display:inline-block;border-radius:999px;padding:5px 13px;background:var(--info-bg);color:var(--info-text);font-size:13px;font-weight:700}
.move-status.closed{background:var(--success-bg);color:var(--success-text)}
.move-status.pendingreview{background:var(--warning-bg);color:var(--warning-text)}

.move-note{background:var(--info-bg);border-left:3px solid var(--brand);padding:12px 16px;border-radius:8px;font-size:14px;margin:12px 0;color:var(--text)}
.move-warning{background:var(--warning-bg);border-left-color:var(--warning)}

/* --- Form controls --- */
.move-app label{display:block;font-weight:600;margin-bottom:7px}
.move-app input,.move-app textarea,.move-app select{font:inherit;width:100%;border:1px solid var(--border);border-radius:9px;padding:11px 13px;background:var(--surface-2);color:var(--text)}
.move-app textarea{resize:vertical;min-height:120px}
.move-app input:focus,.move-app select:focus,.move-app textarea:focus{outline:0;border-color:var(--focus-border);box-shadow:var(--focus-ring)}
.move-form-row{margin-bottom:22px}

/* --- Buttons --- */
.move-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.move-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);border-radius:9px;padding:10px 18px;background:var(--surface);color:var(--brand-text);font:600 15px/1.5 var(--font-heading);cursor:pointer}
.move-btn:hover{background:var(--hover)}
.move-btn.primary{background:var(--brand);color:white;border-color:var(--brand)}
.move-btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover-border)}
.move-btn.success{background:var(--success);color:white;border-color:var(--success)}
.move-btn.success:hover{background:var(--success-hover);border-color:var(--success-hover-border)}
.move-btn:disabled{opacity:.55;cursor:not-allowed}

.move-errors{color:var(--danger)}
.move-errors:empty{display:none}

/* --- Combo / dropdown --- */
.move-combo{position:relative}
.move-options{position:absolute;z-index:30;left:0;right:0;top:100%;max-height:270px;overflow:auto;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);border-radius:9px;margin-top:4px;padding:5px}
.move-option{padding:10px;border-radius:6px;cursor:pointer;color:var(--text)}
.move-option[aria-selected=true]{background:rgba(var(--brand-rgb),.15)}
.move-option[aria-disabled=true]{opacity:.65;cursor:not-allowed}
.move-options[hidden]{display:none}
.move-search-note{font-size:13px;color:var(--muted);margin-top:6px}
.move-search-note.is-error{color:var(--danger)}

.move-app details summary{cursor:pointer;font-weight:600}
.move-app details pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 monospace;max-height:400px;overflow:auto;color:var(--text)}

/* --- Timeline / tabs / search / ticket list --- */
.move-timeline{list-style:none;padding:0}
.move-timeline li{border-left:2px solid var(--border);padding:0 0 22px 18px;margin-left:5px}
.move-timeline strong{display:block}

.move-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.move-tabs a{padding:9px 15px;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--text)}
.move-tabs .active{background:var(--brand);color:white;border-color:var(--brand)}

.move-search{display:flex;gap:10px;margin-bottom:20px}
.move-ticket{display:block;color:inherit!important}
.move-ticket:hover{border-color:rgba(var(--brand-rgb),.5)}
.move-ticket-head{display:flex;justify-content:space-between;gap:10px}
.move-card h2.move-ticket-title{border:0;margin:12px 0;padding:0}
.move-empty{text-align:center;padding:36px;color:var(--muted)}

/* --- Misc --- */
.move-app progress{width:100%;height:12px;accent-color:var(--success)}
.move-app .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip-path:inset(50%)}

@media(max-width:720px){
    .move-top{padding:12px 18px;height:auto;min-height:64px}
    .move-top nav span{display:none}
    .move-wrap{padding:20px 16px 40px}
    .move-grid,.move-fields{grid-template-columns:1fr}
    .move-wide{grid-column:auto}
    .move-head{flex-direction:column;gap:8px}
    .move-app h1{font-size:24px}
    .move-card{padding:20px}
    .move-actions .move-btn{flex:1}
    .move-search{flex-wrap:wrap}
    .move-search input{min-width:0}
    .move-option{padding:12px}
}


/* =====================================================================
   12. KUN_MOVE ADMIN (จัดการฝ่าย + drag & drop สมาชิก)
   ===================================================================== */
.move-team-list{display:flex;flex-direction:column;gap:10px}
.move-team-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.move-team-row.is-inactive{opacity:.6;background:var(--bg)}
.move-team-info{min-width:0}
.move-team-name{font-weight:600;font-size:16px;overflow-wrap:anywhere}
.move-team-meta{font-size:13px;margin-top:2px}
.move-team-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.move-team-actions form{margin:0}

.move-dnd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.move-dnd-pane{transition:border-color .15s,background .15s}
.move-dnd-pane.is-over{border-color:var(--brand);background:rgba(var(--brand-rgb),.06)}
.move-dnd-list{display:flex;flex-direction:column;gap:8px;min-height:120px;max-height:460px;overflow-y:auto;padding:4px}
.move-dnd-list.is-dropzone{border:2px dashed var(--border);border-radius:12px;padding:10px;transition:border-color .15s,background .15s}
.move-dnd-list.is-over{border-color:var(--brand);background:rgba(var(--brand-rgb),.08)}
.move-dnd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:grab}
.move-dnd-item:active{cursor:grabbing}
.move-dnd-item.is-dragging{opacity:.45}
.move-dnd-item.is-disabled{background:var(--bg);cursor:not-allowed;opacity:.7}
.move-dnd-item-main{display:flex;flex-direction:column;min-width:0;flex:1}
.move-dnd-item-main .move-muted{font-size:12px;overflow-wrap:anywhere}
.move-dnd-name{font-weight:600;overflow-wrap:anywhere}
.move-dnd-item .move-btn{flex-shrink:0;padding:4px 10px;font-size:13px}
.move-badge-lead{flex-shrink:0;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;background:rgba(var(--brand-rgb),.12);color:var(--brand-text)}

@media(max-width:860px){
    .move-dnd{grid-template-columns:1fr}
    .move-team-row{flex-direction:column;align-items:stretch}
}

/* Move filters and image evidence, scoped away from the shared Portal navbar. */
main.move-app.move-wrap { margin: 0 auto; }
.move-search { flex-wrap: wrap; align-items: end; gap: 12px; }
.move-search > input[name=q] { flex: 1 1 220px; }
.move-search > label { flex: 0 1 auto; margin: 0; }
.move-search .move-check { display:flex; align-items:center; gap:8px; padding:12px 0; white-space:nowrap; }
.move-app .move-check input { width:18px; height:18px; margin:0; }
.move-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-top:14px; }
.move-gallery a, .move-gallery figure { min-width:0; margin:0; }
.move-gallery img { width:100%; height:120px; object-fit:cover; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.move-gallery small, .move-gallery figcaption { display:block; overflow-wrap:anywhere; font-size:12px; margin-top:6px; }
.move-upload-message { color:var(--text); font-size:13px; }
@media(max-width:600px) { .move-search > label { flex:1 1 140px; } .move-search > button { width:100%; } }

.move-gallery figure{margin:0}.move-gallery figure img{width:100%;height:140px;object-fit:contain}.move-gallery figure button{overflow-wrap:anywhere;max-width:100%}

/* Move content sits inside the shared Portal main column and sidebar. */
main > .move-app.move-wrap { max-width:none; margin:0; padding:0 0 36px; min-width:0; }

/* Keep two-column Move forms comfortable after the shared sidebar consumes space. */
@media(min-width:721px) and (max-width:1199.98px){.move-grid{grid-template-columns:1fr}}
@media(max-width:575.98px){
 .container-fluid > .row > main.p-4{padding:1rem!important}
 .move-card{padding:16px}.move-fields{gap:14px}.move-tabs a{flex:1 1 calc(50% - 8px);text-align:center}
 .move-dnd-item{flex-wrap:wrap}.move-dnd-item-main{flex-basis:100%}
 .move-actions .move-btn{min-height:44px}.move-ticket-head{flex-wrap:wrap}
}


/* =====================================================================
   13. RESPONSIVE — Portal shell (navbar + sidebar) และฟอร์มบนจอสัมผัส
   Navbar/sidebar ขยายเต็มที่ xl (1200px); ต่ำกว่านั้นใช้ toggler + offcanvas
   ===================================================================== */
@media (min-width:1200px) {
    .navbar-expand-xl .navbar-nav .nav-link { white-space: nowrap; }
    .portal-nav-search .form-control { width: 200px; }
    .portal-account-name {
        display: inline-block;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
}

/* 1200–1919px: เมนูครบทุกสิทธิ์ (SUPER_ADMIN) ยาวเกินจอ → ลิงก์รองเหลือไอคอน, ซ่อนช่องค้นหา
   วัดจริงแล้ว: เมนูเต็ม + ช่องค้นหา ต้องใช้ ~1,830px */
@media (min-width:1200px) and (max-width:1919.98px) {
    .nav-text-optional { display: none; }
    .portal-nav-search { display: none !important; }
}

@media (min-width:1200px) and (max-width:1399.98px) {
    .navbar-expand-xl .navbar-nav .nav-link { padding-left: .35rem; padding-right: .35rem; }
    .portal-logo { height: 28px; }
    .portal-account-name { max-width: 110px; }
}

@media (min-width:1200px) and (max-width:1299.98px) {
    .navbar-expand-xl .navbar-nav .nav-link { padding-left: .25rem; padding-right: .25rem; }
}

/* จอสัมผัส: ตัวอักษรในช่องกรอก < 16px ทำให้ iOS zoom อัตโนมัติตอนแตะ */
@media (max-width:1199.98px) and (pointer:coarse) {
    .form-control, .form-select { font-size: 16px; }
}


/* =====================================================================
   14. PAGE: EXECUTIVE DASHBOARD (dash-)
   กราฟทำด้วย HTML/CSS ล้วน (ไม่มี chart library และ CSP อนุญาตแค่ script 'self')
   ===================================================================== */
.dash-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px; }

.dash-tabs { display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--border); margin-bottom:20px; scrollbar-width:thin; }
.dash-tab { flex:0 0 auto; padding:10px 16px; border-bottom:3px solid transparent; color:var(--muted); font-family:var(--font-heading); font-weight:600; text-decoration:none; white-space:nowrap; }
.dash-tab:hover { color:var(--text); background:var(--hover); }
.dash-tab.active { color:var(--brand-text); border-bottom-color:var(--brand); }

.dash-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; margin-bottom:20px; box-shadow:var(--shadow-sm); min-width:0; }
.dash-card-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 16px; margin-bottom:12px; }
.dash-card-head .dash-section-title { margin-bottom:0; }
.dash-section-title { font-family:var(--font-heading); font-size:1rem; font-weight:700; margin:0 0 12px; }
.dash-empty { color:var(--muted); text-align:center; padding:20px 8px; }

.dash-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
.dash-grid-2 > .dash-card { margin-bottom:0; }

/* --- KPI cards --- */
.dash-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:20px; }
.dash-kpis-compact { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin-bottom:0; }
.dash-kpi { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--secondary); border-radius:10px; padding:12px 14px; box-shadow:var(--shadow-sm); min-width:0; }
.dash-kpis-compact .dash-kpi { background:var(--surface-2); box-shadow:none; }
.dash-kpi-label { font-size:.8rem; font-weight:600; color:var(--muted); }
.dash-kpi-value { font-family:var(--font-heading); font-size:1.6rem; font-weight:700; line-height:var(--leading-head); margin-top:2px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.dash-kpi-hint { font-size:.75rem; color:var(--muted); margin-top:2px; }
.dash-kpi.tone-danger  { border-left-color:var(--danger); }
.dash-kpi.tone-warning { border-left-color:var(--warning); }
.dash-kpi.tone-success { border-left-color:var(--success); }
.dash-kpi.tone-info    { border-left-color:var(--brand); }

/* --- attention list --- */
.dash-alert { display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:8px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--text); text-decoration:none; }
.dash-alert:last-child { margin-bottom:0; }
.dash-alert:hover { color:var(--text); box-shadow:var(--shadow-sm); }
.dash-alert-text { flex:1; min-width:0; }
.dash-alert-go { font-size:1.25rem; color:var(--muted); }
.dash-alert.tone-danger  { background:var(--danger-bg);  border-color:var(--danger-border); }
.dash-alert.tone-warning { background:var(--warning-bg); border-color:var(--warning-border); }
.dash-alert.tone-info    { background:var(--info-bg);    border-color:var(--info-border); }

/* --- tables --- */
.dash-table th, .dash-table td { white-space:nowrap; }
.dash-table .dash-cell-title { white-space:normal; min-width:220px; }
.dash-num { text-align:right; font-variant-numeric:tabular-nums; }
.dash-col-bar { min-width:140px; }
.dash-badge { display:inline-block; min-width:2rem; padding:1px 8px; border-radius:999px; background:var(--hover); color:var(--text); font-weight:700; font-size:.8rem; text-align:center; }
.dash-badge.tone-danger  { background:var(--danger-bg);  color:var(--danger-text); }
.dash-badge.tone-warning { background:var(--warning-bg); color:var(--warning-text); }

/* --- stacked bar (สัดส่วนสถานะ) --- */
.dash-stack { display:flex; height:10px; min-width:120px; border-radius:999px; overflow:hidden; background:var(--hover); }
.dash-stack > span { display:block; height:100%; }
.dash-seg-waiting  { background:var(--secondary); }
.dash-seg-progress { background:var(--brand); }
.dash-seg-review   { background:var(--warning); }
.dash-legend { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:.75rem; color:var(--muted); }
.dash-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.dash-pct-0{width:0}.dash-pct-5{width:5%}.dash-pct-10{width:10%}.dash-pct-15{width:15%}.dash-pct-20{width:20%}
.dash-pct-25{width:25%}.dash-pct-30{width:30%}.dash-pct-35{width:35%}.dash-pct-40{width:40%}.dash-pct-45{width:45%}
.dash-pct-50{width:50%}.dash-pct-55{width:55%}.dash-pct-60{width:60%}.dash-pct-65{width:65%}.dash-pct-70{width:70%}
.dash-pct-75{width:75%}.dash-pct-80{width:80%}.dash-pct-85{width:85%}.dash-pct-90{width:90%}.dash-pct-95{width:95%}
.dash-pct-100{width:100%}

/* --- meter (จำนวนตามช่วงวัน) --- */
.dash-meter { display:grid; grid-template-columns:110px minmax(0,1fr) 48px; align-items:center; gap:10px; margin-bottom:12px; }
.dash-meter:last-child { margin-bottom:0; }
.dash-meter progress { width:100%; height:12px; accent-color:var(--danger); }

@media (max-width:991.98px) {
    .dash-grid-2 { grid-template-columns:1fr; }
}
@media (max-width:575.98px) {
    .dash-card { padding:14px; }
    .dash-kpis, .dash-kpis-compact { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .dash-kpi { padding:10px 12px; }
    .dash-kpi-value { font-size:1.3rem; }
    .dash-meter { grid-template-columns:84px minmax(0,1fr) 40px; }
    .dash-table .dash-cell-title { min-width:180px; }
}

@media(min-width:1200px){
 .portal-sidebar{position:fixed;top:var(--portal-navbar-height,64px);bottom:0;left:0;width:16.666667%;min-height:0!important;overflow-y:auto;overscroll-behavior:contain;z-index:1010}
 .portal-content{margin-left:16.666667%;min-width:0}
}
.move-transfer-panel>summary{display:flex;justify-content:space-between;align-items:center;list-style:none;padding:4px 0;min-height:44px}
.move-transfer-panel>summary::after{content:'＋';font-size:20px}.move-transfer-panel[open]>summary::after{content:'−'}
.move-transfer-panel>form{margin-top:16px}

/* Ticket states remain identifiable by text as well as colour.
   สีมาจากชุดสีรองของแบรนด์ (Pastel Blue / Soft Purple / Clementine / Canary / Sea Green / Bubblegum / Porcelain) */
.move-status.new{background:#e7eefa;color:#2b5580}
.move-status.assigned{background:#ecebf7;color:#494587}
.move-status.inprogress{background:#fdead9;color:#9a4a00}
.move-status.pendingreview{background:#fdf3d8;color:#6b5207}
.move-status.closed{background:#e8f0e9;color:#2f5c3b}
.move-status.cancelrequested{background:#f9e8f0;color:#933060}
.move-status.cancelled{background:#e7e4df;color:#4b4f5b}

body.theme-dark .move-status.new{background:rgba(172,194,227,.16);color:#bcd2ee}
body.theme-dark .move-status.assigned{background:rgba(166,164,219,.16);color:#c2c0ea}
body.theme-dark .move-status.inprogress{background:rgba(233,110,0,.16);color:#f3ac63}
body.theme-dark .move-status.pendingreview{background:rgba(248,207,63,.14);color:#f5da7d}
body.theme-dark .move-status.closed{background:rgba(92,146,102,.16);color:#96c9a1}
body.theme-dark .move-status.cancelrequested{background:rgba(212,120,170,.16);color:#e3a3c4}
body.theme-dark .move-status.cancelled{background:rgba(240,238,234,.10);color:#b9bcc6}
.move-app details.move-card>summary{font-weight:700;font-size:1.1rem;cursor:pointer;min-height:44px;display:list-item}.move-app details.move-card[open]>summary{margin-bottom:16px}

.dash-seg-cancel { background: var(--kun-soft-purple); }

/* Unified disclosure headers: right chevron collapsed, down chevron expanded. */
body details {border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:0 3px 10px rgba(0,0,0,.05)}
body details > summary,body .move-app details.move-card > summary,body .move-transfer-panel > summary {display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;font-weight:600;min-height:48px;padding:12px 16px;border-inline-start:4px solid var(--brand);border-radius:8px;background:var(--hover)}
body details > summary::-webkit-details-marker {display:none}
body details > summary::marker {content:''}
body details > summary::after,body .move-transfer-panel > summary::after,body .move-transfer-panel[open] > summary::after {content:'';display:block;flex:0 0 8px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin:0 5px;transition:transform .15s ease}
body details[open] > summary::after,body .move-transfer-panel[open] > summary::after {transform:rotate(45deg)}
body details > summary:focus-visible {outline:3px solid var(--brand);outline-offset:3px}
body details[open] > summary {border-bottom:1px solid var(--border)}
@media(prefers-reduced-motion:reduce){body details > summary::after{transition:none}}

/* Case tags inherit the current light/dark theme tokens. */
.move-ticket-tags{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}
.move-case-tag{display:inline-flex;align-items:center;border:1px solid;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;white-space:nowrap;line-height:1.5}
.move-case-tag-new{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-text)}
.move-case-tag-overdue{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}

.move-case-tag-team{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}