/* ============================================================================
   DS Shell — navbar + sidebar chrome (redesign, ?shell=ds)
   ----------------------------------------------------------------------------
   ย้ายมาจาก inline <style> ใน resources/views-ds/layouts/{navheader,sidebar}.blade.php
   (PR #725 review Major #4 — Component-First / ADR-019: ห้าม hardcode CSS ใน Blade).
   ทุก selector scope ใต้ .ds-nb / .ds-sb → โหลดในทุกหน้าได้อย่างปลอดภัย
   (classic DOM ไม่มี class เหล่านี้ = rule ทั้งหมด inert เมื่อ shell ปิด).
   สี theme = CSS runtime var (--head_bg / --sidebar_bg / --menu_font ...) จาก DB theme ต่อ role.
   caret ของ selector (SVG data-uri) เป็นค่า dynamic ต่อ request → inject ผ่าน --ds-caret-img
   ที่ navheader partial กำหนด inline (fallback = caret ฟ้า #3193DC ตรงกับ safeHexCaret default).
   ============================================================================ */

/* ============================================================================
   NAVHEADER (.ds-nb)
   ============================================================================ */
/* navbar ขาวเสมอ (ทุก sb) ; ความสูง brand row = bar row = 62px ให้เท่ากัน */
.pcoded .pcoded-header.ds-nb { background: var(--ds-color-white, #fff) !important; height: 62px; min-height: 62px; box-shadow: 0 2px 6px rgba(0,0,0,.09); }
.ds-nb .navbar-logo.ds-nb__brand { height: 62px; }
/* NOTE: content-offset ของ .pcoded-inner-content.bb (margin-top ให้เท่าความสูง DS header) ไม่อยู่ไฟล์นี้ —
   .bb ไม่ใช่ descendant ของ .ds-nb/.ds-sb (scope ไม่ได้) และไฟล์นี้โหลดทุกหน้ารวม classic → จะ leak ทับ .bb ของ classic.
   จึงคงไว้ inline ใน navheader DS partial (render เฉพาะ ?shell=ds = gated). ดู resources/views-ds/layouts/navheader.blade.php */
/* avatar align ซ้ายเท่าไอคอนเมนู (~24px) ; hamburger ดันไปขวาสุด
   (ต้อง !important ทับ pcoded .navbar-logo padding + legacy avatar-upload2 margin) */
.ds-nb__brand { display: flex; align-items: center; gap: 12px; }
.pcoded .pcoded-header .navbar-logo.ds-nb__brand { padding-left: 24px !important; padding-right: 12px !important; }
/* ============ Bar layout (desktop) — flex เดี่ยว: title (ซ้าย ยืด) | right cluster (ขวา)
   เลิกพึ่ง Bootstrap .row/col ของ hr.bran (lg รวม 18 → wrap = R3 ; xl-2 แคบ → ตัด selector = R4)
   ห่อ hr.bran ใน .ds-nb__right แล้ว neutralize col → คุมความกว้างเอง ไม่มีวันตกบรรทัด ============ */
.ds-nb__bar { padding: 0; }
.ds-nb__barflex { display: flex; align-items: center; flex-wrap: nowrap; min-height: 62px; padding: 0 0 0 16px; gap: 16px; }
.ds-nb__title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 2; }
.ds-nb__right { position: relative; align-self: stretch; display: flex; align-items: center; gap: 16px; flex: 0 0 auto; margin-left: 12px; padding-right: 16px; }
/* neutralize คอลัมน์ Bootstrap ที่ hr.bran ส่งออกมา (col-sm-12 col-md-6 col-lg-6 col-xl-*) */
.ds-nb__right > [class*="col-"] { flex: 0 0 auto; width: auto; max-width: none; min-height: 0; padding: 0; margin: 0; }
/* right cluster order: วันเวลา(1) · กระดิ่ง desktop(2) · box-notify(3) — selector คือ col ถัดไป (ขวาสุด) */
.ds-nb__right div[align="right"] { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.ds-nb__right div[align="right"] > br { display: none; }
.ds-nb__right div[align="right"] .text-header2 { order: 1; margin: 0; white-space: nowrap; }
.ds-nb__right div[align="right"] .notify.popup.desktop { order: 2; margin: 0; }
.ds-nb__right div[align="right"] .box-notify { order: 3; }
/* desktop แคบ (994–1199): ซ่อนนาฬิกา decorative กันเบียด title/selector (แทน Bootstrap wrap เดิม) */
@media (min-width: 994px) and (max-width: 1199.98px) {
    .ds-nb__right div[align="right"] .text-header2 { display: none; }
}
.ds-nb__collapse { color: var(--head_bg, #0773DF) !important; font-size: 20px; padding: 6px 10px; border-radius: 8px; margin-left: auto; }
.ds-nb__collapse:hover { background: rgba(0,0,0,.06); }
/* เส้นขั้นแนวตั้งระหว่างแถบชื่อผู้ใช้ (brand) กับ nb bar — เว้นขอบบน/ล่างให้ดูสวย */
.ds-nb__brand { position: relative; }
.ds-nb__brand::after {
    content: ""; position: absolute; right: 0; top: 12px; bottom: 12px; width: 1px;
    background: var(--ds-color-border, #DEE2E6);
}
.ds-nb__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.ds-nb__logo-text { font-weight: 700; font-size: 17px; color: var(--head_bg, #0773DF); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* รูปโปรไฟล์วงกลม + ปุ่มแก้ไข (แทนไอคอนพืชเดิม) — override ขนาด avatar-upload2 legacy */
.ds-nb__avatar { position: relative; width: 40px; height: 40px; flex: 0 0 40px; margin: 0 !important; }
.ds-nb__avatar .avatar-preview {
    position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    border: 2px solid var(--head_bg, #3193DC); box-shadow: none;
}
/* placeholder (fa-user) อยู่ชั้นล่างเสมอ ; รูปจริงทับด้านบน ถ้ารูปว่าง/เสีย พื้นโปร่งใส → เห็น placeholder */
.ds-nb__avatar .ds-nb__avatar-ph {
    position: absolute; inset: 0; z-index: 0; display: grid; place-items: center;
    background: var(--ds-color-gray-200, #E5E7EB); border-radius: 50%;
}
.ds-nb__avatar .ds-nb__avatar-ph i { color: var(--ds-color-gray-500, #6B7280); font-size: 18px; }
.ds-nb__avatar #imagePreviewProfile {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border-radius: 50%;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* เปลี่ยนรูป: hover → วงในสีขาวทึบ (อยู่ "ในวงแหวน" #3193DC ให้ยังเห็นขอบเป็นกรอบ) + ดินสอตรงกลาง
   inset 2px = ให้อยู่ในเส้นขอบ 2px ของ .avatar-preview ; logic เปลี่ยนรูปเดิมไม่แตะ */
.ds-nb__avatar .avatar-edit {
    position: absolute; inset: 2px; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.ds-nb__avatar:hover .avatar-edit { opacity: 1; pointer-events: auto; }
.ds-nb__avatar .avatar-edit input { display: none; }
.ds-nb__avatar .avatar-edit label {
    display: flex; align-items: center; justify-content: center;
    width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
    border-radius: 50%; cursor: pointer; box-sizing: border-box;
    background: var(--ds-color-white, #fff) !important; color: var(--head_bg, #3193DC) !important; font-size: 16px;
}
.ds-nb__avatar .avatar-edit label i { color: var(--head_bg, #3193DC); line-height: 1; margin: 0 !important; vertical-align: middle; }

.ds-nb__title { font-size: 18px; font-weight: 700; color: var(--ds-color-text, #212529); margin: 0; line-height: 1.2; }
/* nb v3: ชื่อเมนู (title) 20px ตัวหนา สีดำ var(--ds-color-text, #212529) */
.ds-nb--nbv3 .ds-nb__title { color: var(--ds-color-text, #212529); font-size: 20px; }

/* ============ v3: brand row = พื้นขาว + ชื่อผู้ใช้/hamburger = สี theme ============ */
.pcoded .pcoded-header.ds-nb--v3 .navbar-logo.ds-nb__brand { background: var(--ds-color-white, #fff) !important; }
.ds-nb--v3 .ds-nb__logo-text { color: var(--head_bg, #0773DF); }
.ds-nb--v3 .ds-nb__collapse { color: var(--head_bg, #0773DF) !important; }
.ds-nb--v3 .ds-nb__collapse:hover { background: rgba(0,0,0,.06); }

/* v3 angled panel: สีเดียวกับ bg ของ sidebar (พีช) — bg บน .ds-nb__right::before
   ใช้ 2 class รวม (.ds-nb--angled.ds-nb--nbv3) เพื่อ specificity ชนะ .ds-nb--angled เดิม */
.ds-nb--angled.ds-nb--nbv3 .ds-nb__right::before {
    background: var(--sidebar_bg, #CAE8FF);
}
.ds-nb--angled.ds-nb--nbv3 .text-header2 { color: var(--menu_font, #3193DC); }
.ds-nb--angled.ds-nb--nbv3 .notify i { color: var(--menu_font, #3193DC); }
.ds-nb--angled.ds-nb--nbv3 .notify .badge { border-color: var(--sidebar_bg, #CAE8FF); }
.ds-nb--angled.ds-nb--nbv3 select.text-header4.round {
    background-color: rgba(255,255,255,.6) !important;
    color: var(--menu_font, #3193DC) !important;
}
/* caret สีน้ำเงินให้เข้ากับ text บนพื้นเอียงพีช (sb3+nb3) — สีจริงมาจาก --ds-caret-img (inject ที่ partial) */
.ds-nb--v3.ds-nb--nbv3 select.text-header4.round {
    background-image: var(--ds-caret-img, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233193DC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")) !important;
}
/* restyle ของ hr.bran ให้เข้ากับ DS (ไม่แตะ markup/JS) ; accent = สี theme ตาม role */
.ds-nb .notify.popup.desktop { cursor: pointer; }
.ds-nb .notify i { color: var(--head_bg, #0773DF); font-size: 22px; }
.ds-nb .notify .badge {
    background: var(--ds-color-danger, #DC3545) !important; color: var(--ds-color-white, #fff) !important;
    border: 2px solid var(--ds-color-white, #fff); font-size: var(--ds-font-size-11, 11px); padding: 2px 6px; border-radius: 9px;
    /* มุมซ้ายบนของกระดิ่ง + ยึดขอบขวา (right/left auto→right:12px) → เลขหลายหลักงอกไปทาง "ซ้าย" ไม่ทับกระดิ่ง */
    top: -9px; right: 12px; left: auto;
}
/* กระดิ่ง mobile (#btn-notify-3, โชว์ ≤991 แทน .notify.desktop) — ให้หน้าตา "ตรงกับ" กระดิ่ง desktop
   legacy .icon_noti = icon 30px + margin-left 15px + badge วงกลมสี head_bg(ฟ้า) 16px → ต่างจาก DS
   override ทั้งไอคอน+badge ให้เหมือน .ds-nb .notify (ไม่แตะ markup/JS ; hidden ที่ desktop อยู่แล้ว) */
.ds-nb .ds-nb__mobile-bell { cursor: pointer; }
/* icon margin-left 15px = สูตรเดียวกับ desktop .notify i → เว้นช่อง ดัน badge (child ตัวแรก) ไปอยู่ "ซ้าย" ของกระดิ่ง */
.ds-nb .ds-nb__mobile-bell i { color: var(--head_bg, #0773DF); font-size: 22px; margin-left: 15px; }
.ds-nb .ds-nb__mobile-bell .badge {
    background: var(--ds-color-danger, #DC3545) !important; color: var(--ds-color-white, #fff) !important;
    border: 2px solid var(--ds-color-white, #fff); font-size: var(--ds-font-size-11, 11px); padding: 2px 6px; border-radius: 9px; line-height: 1;
    /* มุมซ้ายบน (top:5px → dy=-9 เหนือ icon = ตรง desktop) + ยึดขอบขวา (right:12px, left:auto)
       → เลขหลายหลักงอกไปทาง "ซ้าย" (right เท่า desktop = 12px) */
    position: absolute; top: 5px; right: 12px; left: auto;
}
.ds-nb .text-header2 { font-size: 15px; color: var(--ds-color-gray-500, #6B7280); vertical-align: middle; }
/* dropdown เลือกบทบาท/ออกจากระบบ — ทรง DS (เท่า .ds-select-soft): appearance none + caret เทา + border gray-300 + radius-soft + focus brand glow */
.ds-nb select.text-header4.round {
    -webkit-appearance: none !important; appearance: none !important;
    width: auto !important; max-width: 260px;   /* พอดีข้อความ option ที่ยาวสุด → ไม่ตัด "ผู้ดูแลระบบ" (R4) */
    border: 1px solid var(--head_bg, #3193DC) !important;
    border-radius: var(--ds-radius-soft, 10px) !important;
    padding: 0 2.4rem 0 0.9rem !important;
    height: 40px !important; line-height: 38px; font-size: 18px; font-weight: 600;
    background-color: var(--ds-color-white, #fff) !important; color: var(--ds-color-gray-900, #111827) !important;
    background-image: var(--ds-caret-img, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233193DC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")) !important;
    background-repeat: no-repeat !important;
    background-position: right .8rem center !important;
    background-size: 16px 16px !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ds-nb select.text-header4.round:focus {
    outline: none !important;
    border-color: var(--head_bg, #0773DF) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--head_bg, #0773DF) 30%, transparent) !important;
}

/* ============ Navbar angled — แผงเอียงฝั่งขวา (desktop) ============
   ผูกกับ .ds-nb__right (หุ้มเฉพาะ cluster วันเวลา/กระดิ่ง/selector) → ความกว้างสัมพันธ์กับเนื้อหาเสมอ
   (เลิกใช้ left:% บน .row ที่ทำให้พื้นเอียงไม่พอดีข้อความ = R4) ; bleed ขวา -16px ถึงขอบ navbar */
.ds-nb--angled .ds-nb__right::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: -16px; left: -44px;
    background: var(--head_bg, #0773DF);
    background: linear-gradient(120deg, var(--head_bg, #0773DF) 0%, var(--head_bg2, #38a1ff) 100%);
    clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%);
    z-index: 0; pointer-events: none;
}
.ds-nb--angled .ds-nb__right > * { position: relative; z-index: 1; }
/* ข้อความ/คอนโทรลฝั่งขวา (hr.bran) อยู่บนแผงสี theme → ใช้ --head_font ให้อ่านออก */
.ds-nb--angled .text-header2 { color: var(--head_font, #fff); }
.ds-nb--angled .notify i { color: var(--head_font, #fff); }
.ds-nb--angled .notify .badge { border-color: var(--head_bg, #5442c9); }
.ds-nb--angled select.text-header4.round {
    background-color: rgba(255,255,255,.16) !important; color: var(--ds-color-white, #fff) !important;
}
.ds-nb--angled select.text-header4.round option { color: var(--ds-color-text, #212529); }

/* ============================================================
   RESPONSIVE — จอ ≤ 993px (tablet/mobile) — align เป๊ะกับ pcoded ที่ stack brand เต็มกว้างที่ max-width:993
   (pcoded CSS: .navbar-logo width:100% ที่ ≤993 ; 994–1024 = brand 340 side-by-side → คง desktop layout)
   เป้า: header สูงคงที่ ~103px, 2 แถวสะอาด align กัน (R1/R5) + sidebar ชิด navbar (R6)
   แถว 1 (52px): hamburger ซ้าย | ชื่อผู้ใช้ | กระดิ่งขวา  (mirror classic)
   แถว 2 (48px): ชื่อเมนู ซ้าย | role selector ขวา  (ซ่อนนาฬิกา, ซ่อนแผงเอียง)
   ============================================================ */
@media (max-width: 993px) {
    /* ซ่อนแผงเอียง (decorative desktop) + คืนสี text/icon/selector เป็นโทนปกติ */
    .ds-nb--angled .ds-nb__right::before { display: none !important; }
    .ds-nb--angled.ds-nb--nbv3 .text-header2,
    .ds-nb--angled .text-header2 { color: var(--ds-color-text-muted, #6B7280) !important; }
    .ds-nb--angled .notify i { color: var(--head_bg, #0773DF) !important; }
    .ds-nb--angled select.text-header4.round,
    .ds-nb--angled.ds-nb--nbv3 select.text-header4.round { background-color: var(--ds-color-white, #fff) !important; color: var(--menu_font, #3193DC) !important; } /* text สีเดียวกับ desktop (--menu_font) */
    .ds-nb--angled select.text-header4.round option { color: var(--ds-color-text, #212529); }

    /* header สูง auto (2 แถว) */
    .pcoded .pcoded-header.ds-nb { height: auto !important; min-height: 0 !important; }

    /* แถว 1 — brand เป็น flex row: hamburger | ชื่อ | กระดิ่ง */
    /* specificity ต้อง ≥ (0,4,0) เพื่อชนะ rule desktop (.pcoded .pcoded-header .navbar-logo.ds-nb__brand padding-left:24px) */
    .pcoded .pcoded-header.ds-nb .navbar-logo.ds-nb__brand {
        display: flex !important; align-items: center; gap: 10px;
        height: 52px !important; padding: 0 12px 0 6px !important; position: relative !important;
    }
    .ds-nb__avatar { display: none !important; }          /* ซ่อน avatar (mirror classic) */
    .ds-nb__brand::after { display: none !important; }    /* ซ่อนเส้นขั้น (desktop เท่านั้น) */
    /* hamburger: pcoded ตั้ง position:absolute right (≤tablet) → บังคับ static + id specificity ให้กลับเข้า flex ซ้ายสุด (R5) */
    .pcoded .pcoded-header.ds-nb #mobile-collapse.ds-nb__collapse {
        position: static !important; left: auto !important; right: auto !important; top: auto !important;
        order: 0; margin: 0 !important; flex: 0 0 auto; padding: 6px !important; /* ลด inset ให้ hamburger ชิดซ้าย align กับ title แถวล่าง */
    }
    .ds-nb__brand .ds-nb__logo { order: 1; flex: 1 1 auto; min-width: 0; }          /* ชื่อผู้ใช้ */
    .ds-nb__brand .ds-nb__logo-text { font-size: 16px; }
    /* กระดิ่ง mobile: pcoded ตั้ง absolute right → บังคับ static เข้า flex (username flex:1 ดันไปขวาเอง, กันทับ) */
    .pcoded .pcoded-header.ds-nb #btn-notify-3.ds-nb__mobile-bell {
        position: relative !important; left: auto !important; right: auto !important; top: auto !important;
        order: 2; flex: 0 0 auto; margin: 0 !important;
    }
    /* กระดิ่ง: ใช้ตัว mobile (แถวบน) ตลอดช่วง compact ≤993 ให้ตรง breakpoint DS
       legacy สลับ .desktop/.mobile ที่ 991 → เหลื่อม DS 993 = ช่วง 992–993 กระดิ่ง desktop ยังโผล่ในแถว 2
       บังคับซ่อน desktop bell + โชว์ mobile bell ให้ตรง 993 (align หลัก 993/994 ทุก media) */
    .ds-nb .notify.popup.desktop { display: none !important; }
    .ds-nb #btn-notify-3.ds-nb__mobile-bell { display: inline-block !important; }

    /* แถว 2 — bar เป็น flex row เดียว compact: title (ยืด) | selector (พอดีข้อความ ไม่เต็มแถว) */
    .ds-nb__bar { padding: 0 !important; }
    .ds-nb__barflex {
        display: flex !important; flex-wrap: nowrap; align-items: center; gap: 12px;
        min-height: 48px; padding: 6px 12px; margin: 0;
        border-top: 1px solid rgba(0,0,0,.06);
    }
    .ds-nb__title { flex: 1 1 auto; min-width: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ds-nb__right { align-self: center; margin: 0; padding: 0; flex: 0 0 auto; }
    .ds-nb__right div[align="right"] { display: flex; align-items: center; gap: 8px; }
    .ds-nb__right div[align="right"] > br { display: none; }
    .ds-nb__right .text-header2 { display: none !important; }   /* ซ่อนนาฬิกาบน mobile (declutter) */
    .ds-nb__right select.text-header4.round { width: auto !important; max-width: 46vw; height: 38px !important; font-size: 16px; line-height: 36px; }
}

/* ============================================================================
   SIDEBAR (.ds-sb)
   ============================================================================ */
/* Sidebar v1 (สว่าง) : bg เทาอ่อนจาก DS token (ตาม ref-3) */
.pcoded .pcoded-navbar.ds-sb,
.pcoded .pcoded-navbar.ds-sb .pcoded-inner-navbar.main-menu,
.pcoded .pcoded-navbar.ds-sb .main-menu {
    background: var(--ds-color-gray-50, #F9FAFB) !important;
    border-right: 1px solid var(--ds-color-border, #DEE2E6);
}
/* scroll ภายใน sidebar เอง (B3): mCustomScrollbar ถูกคอมเมนต์ปิดใน pcoded + overflow เดิม = visible
   → เมนูยาวล้นกล่อง fixed แล้วเลื่อนไปกับ body = เด้ง bounce ; บังคับ scroll ในตัว + overscroll contain */
.ds-sb .pcoded-inner-navbar {
    padding-top: 10px;
    /* height 100% !important — ทับ inline `height: calc(100% - 80px)` ที่ mCS setHeight ค้างไว้ (destroy ไม่ล้าง)
       ให้เมนูใช้ความสูงเต็ม sidebar (ไม่หาย 80px) */
    height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain;
}
/* native scrollbar บาง (หลังปิด mCustomScrollbar) */
.ds-sb .pcoded-inner-navbar::-webkit-scrollbar { width: 6px; }
.ds-sb .pcoded-inner-navbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }
.ds-sb .pcoded-inner-navbar::-webkit-scrollbar-track { background: transparent; }
/* sidebar ชิดใต้ navbar + สูงพอดีจอ (top = ความสูง header) — boundary ที่ 993/994 ตรงกับ pcoded stack brand
   ≥994 desktop side-by-side header 62px / ≤993 compact header ~103px (R6)
   --hrcs-banner-offset = ความสูงแบนเนอร์บนสุด (โหมดดูอย่างเดียว / proxy / simulation)
   แบนเนอร์อยู่ใน document flow ดัน header ลง แต่ sidebar เป็น position:fixed เทียบ viewport
   ถ้าไม่บวก offset รายการเมนูแรกจะถูก header ทับแล้วคลิกไม่ได้ */
:root { --hrcs-banner-offset: 0px; }
html:has(#screen-assist-admin-banner),
html:has(#simulation-active-banner) { --hrcs-banner-offset: 56px; }
@media (min-width: 994px) {
    .pcoded .pcoded-navbar.ds-sb { top: calc(62px + var(--hrcs-banner-offset, 0px)) !important; height: calc(100vh - 62px - var(--hrcs-banner-offset, 0px)) !important; }
}
@media (max-width: 993px) {
    .pcoded .pcoded-navbar.ds-sb { top: calc(103px + var(--hrcs-banner-offset, 0px)) !important; height: calc(100vh - 103px - var(--hrcs-banner-offset, 0px)) !important; }
}
/* pcoded ตั้ง mobile/tablet sidebar เป็น position:absolute !important (specificity 0,4,1)
   → เปิดตอน scroll ลงแล้ว sidebar ลอยพ้นจอ (ยึด document ไม่ใช่ viewport)
   override ด้วย specificity สูงกว่า (เพิ่ม [vertical-nav-type] + .ds-sb) ให้ fixed อยู่ในจอเสมอ */
body .pcoded[pcoded-device-type="phone"][vertical-nav-type] .pcoded-navbar.ds-sb,
body .pcoded[pcoded-device-type="tablet"][vertical-nav-type] .pcoded-navbar.ds-sb {
    position: fixed !important;
}

/* ระยะห่างเมนู = gap ของ flex column (เท่ากันทุก item ไม่ว่ามี dropdown หรือไม่ —
   เลิกพึ่ง margin ของ link ที่ collapse ไม่เท่ากันเมื่อ item มี <ul.ds-sb__sub> เป็นลูกตัวท้าย) */
.ds-sb .ds-sb__menu { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ds-sb .ds-sb__item { list-style: none; position: relative; }
.ds-sb .ds-sb__link {
    display: flex; align-items: center; gap: 12px;
    width: calc(100% - 20px); margin: 0 10px; padding: 11px 14px;
    border: 0; background: transparent; text-align: start; cursor: pointer;
    border-radius: 8px; color: var(--ds-color-gray-700, #374151) !important; font-size: 18px; font-weight: 500; line-height: 1.3;
    font-family: inherit; text-decoration: none; transition: background .15s, color .15s;
}
.ds-sb .ds-sb__ic { width: 22px; text-align: center; font-size: 18px; flex: 0 0 22px; color: var(--ds-color-gray-500, #6B7280); }
.ds-sb .ds-sb__link:focus { outline: none; } /* ปุ่มกางเมนูไม่ค้าง focus */
.ds-sb .ds-sb__lbl { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-sb .ds-sb__chev { font-size: var(--ds-font-size-11, 11px); transition: transform .2s; color: var(--ds-color-gray-400, #9CA3AF); }
.ds-sb .ds-sb__item.open > .ds-sb__link .ds-sb__chev { transform: rotate(180deg); }
/* hover/active = สี theme ตาม role (var(--head_bg)) — fallback เทา neutral สำหรับ browser ที่ไม่รองรับ color-mix */
.ds-sb .ds-sb__link:hover {
    background: rgba(0, 0, 0, .035);
    background: color-mix(in srgb, var(--head_bg, #0773DF) 8%, transparent);
    color: var(--head_bg, #0773DF) !important;
}
.ds-sb .ds-sb__link:hover .ds-sb__ic { color: var(--head_bg, #0773DF); }
.ds-sb .ds-sb__item.active > .ds-sb__link {
    background: rgba(0, 0, 0, .05);
    background: color-mix(in srgb, var(--head_bg, #0773DF) 14%, transparent);
    color: var(--head_bg, #0773DF) !important; font-weight: 600;
    box-shadow: inset 3px 0 0 var(--head_bg, #0773DF);
}
.ds-sb .ds-sb__item.active > .ds-sb__link .ds-sb__ic { color: var(--head_bg, #0773DF); }

.ds-sb .ds-sb__sub { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .25s ease; display: flex; flex-direction: column; gap: 6px; }
.ds-sb .ds-sb__item.open > .ds-sb__sub { max-height: 600px; padding: 4px 0 6px; }
/* เมนูย่อย: text ชิดซ้ายติด dot (dedent), 18px เท่าเมนูหลัก, แสดงชื่อครบ (wrap ห้าม ellipsis) */
/* submenu: เยื้อง "ตัวบล็อก" ตามชั้นด้วย margin-left (ไม่ใช่ padding ภายใน) → block หุ้มพอดีข้อความ
   เนื้อหาชิด (ไม่เหลือฟ้าโล่งตอน active) + เห็นลำดับชั้นชัด. width หด = margin-left + 10 (ขอบขวา) */
.ds-sb .ds-sb__sub .ds-sb__link { margin-left: 20px; width: calc(100% - 30px); padding-left: 10px; padding-right: 10px; gap: 8px; font-size: 18px; color: var(--ds-color-gray-500, #6b7280) !important; }
.ds-sb .ds-sb__sub .ds-sb__sub .ds-sb__link { margin-left: 32px; width: calc(100% - 42px); }
.ds-sb .ds-sb__sub .ds-sb__sub .ds-sb__sub .ds-sb__link { margin-left: 44px; width: calc(100% - 54px); }
.ds-sb .ds-sb__sub .ds-sb__ic { display: none !important; } /* เมนูย่อยไม่แสดงไอคอน (mirror sidebar เดิม) — เหลือ dot bullet นำหน้า */
.ds-sb .ds-sb__sub .ds-sb__lbl { white-space: normal; overflow: visible; text-overflow: clip; }
.ds-sb .ds-sb__sub .ds-sb__link::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; margin-right: 0; }

/* ============ Sidebar (redesign) — bg + สีเมนู "ของเก่า" (ตัวแปร DB theme) + active แถบ accent ซ้าย ============ */
.pcoded .pcoded-navbar.ds-sb--v3,
.pcoded .pcoded-navbar.ds-sb--v3 .pcoded-inner-navbar.main-menu,
.pcoded .pcoded-navbar.ds-sb--v3 .main-menu {
    background: var(--sidebar_bg, #CAE8FF) !important;
    border-right: 1px solid rgba(0, 0, 0, .06);
}
.ds-sb--v3 .ds-sb__link { color: var(--menu_font, #3193DC) !important; }
.ds-sb--v3 .ds-sb__ic { color: var(--menu_font, #3193DC); }
.ds-sb--v3 .ds-sb__chev { color: var(--menu_font, #3193DC); opacity: .7; }
.ds-sb--v3 .ds-sb__link:hover {
    background: color-mix(in srgb, var(--menu_font, #3193DC) 12%, transparent);
    color: var(--menu_font, #3193DC) !important;
}
.ds-sb--v3 .ds-sb__link:hover .ds-sb__ic { color: var(--menu_font, #3193DC); }
/* active: bg #3193DC + text ขาว + แถบ accent ซ้ายสุด "ขาว" */
.ds-sb--v3 .ds-sb__item.active > .ds-sb__link {
    background: var(--menu_bg_active, #3193DC);
    color: var(--button_font, #fff) !important; font-weight: 600; box-shadow: none;
}
.ds-sb--v3 .ds-sb__item.active > .ds-sb__link .ds-sb__ic { color: var(--button_font, #fff); }
.ds-sb--v3 .ds-sb__item.active::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    border-radius: 0; background: var(--menu_bg_active, #3193DC);
}
/* submenu active: ซ่อนแถบ accent ซ้ายสุด (block เยื้องด้วย margin แล้ว → แถบที่ left:0 จะลอยห่าง block ดูหลุด)
   ใช้บล็อกฟ้าบอก active พอ ; แถบ accent เก็บไว้เฉพาะเมนูบนสุด (top-level) */
.ds-sb--v3 .ds-sb__sub .ds-sb__item.active::before { display: none; }
/* เมนูย่อยกางออก = พื้นเข้มขึ้นเล็กน้อย (สไตล์ sb2) */
.ds-sb--v3 .ds-sb__item.open > .ds-sb__sub { background: color-mix(in srgb, var(--menu_font, #3193DC) 6%, transparent); }
.ds-sb--v3 .ds-sb__sub .ds-sb__link { color: var(--menu_font, #3193DC) !important; opacity: .9; }

/* ============ Collapsed rail (desktop หุบเป็นแถบไอคอน) ============
   pcoded ตั้ง attribute vertical-nav-type="collapsed" บน .pcoded (rail = 80px) ตอนกด #mobile-collapse
   gate เฉพาะ desktop — มือถือ collapse เป็น off-canvas เต็มจอ (label ต้องโชว์) */
@media (min-width: 994px) { /* align 993/994 boundary (lock) — rail = desktop only */
    .pcoded[vertical-nav-type="collapsed"] .ds-sb .ds-sb__lbl,
    .pcoded[vertical-nav-type="collapsed"] .ds-sb .ds-sb__chev,
    .pcoded[vertical-nav-type="collapsed"] .ds-sb .ds-sb__sub { display: none !important; }

    .pcoded[vertical-nav-type="collapsed"] .ds-sb .ds-sb__link {
        justify-content: center; gap: 0; padding: 11px 0;
        margin: 0 10px; width: calc(100% - 20px);
    }
    .pcoded[vertical-nav-type="collapsed"] .ds-sb .ds-sb__ic { margin: 0; }

    /* กันเมนูที่ค้าง .open ไม่ให้ดัน max-height ตอนเป็น rail */
    .pcoded[vertical-nav-type="collapsed"] .ds-sb .ds-sb__item.open > .ds-sb__sub { max-height: 0 !important; }
}