/* ============================================================================
   nav-menu.css — เมนูซ้ายจัดหมวด + สีประจำหมวด (24 ต.ค. 2569 · ครูเคาะ "ตามที่แนะนำ")
   โครง HTML: partials/sidebar.php · แผน: docs ในโปรเจกต์ claude/plan_admin_menu_20261024.md
   ----------------------------------------------------------------------------
   ⭐ โหลดต่อจาก app.css + plan-ui.css (partials/head.php) และก่อน ui-themes.css
   ⭐ สิ่งที่ไฟล์นี้ทำ
      ① ไอคอนเมนูเป็น "กรอบสีอ่อน" ตามหมวด: งานของฉัน = สีหลักของธีม · ผู้ดูแลวิทยาลัย = เขียวหัวเป็ด · ส่วนกลาง = ส้มอิฐ · บัญชีของฉัน = เทา
      ② ปุ่ม "สร้างงานใหม่" (.nav-new) บนสุด = ปุ่มหลักไล่เฉด (กฎไล่เฉดของ DESIGN.md: ปุ่มหลักเท่านั้น)
      ③ ปุ่มหัวกลุ่ม (.nav-drop) = ปุ่มพับ-กางในเมนูซ้าย · .nav-shut = พับ · หมวดย่อย .nav-subcap
         เค้าโครงเมนูด้านบน (จอ ≥ 1280px) = เมนูหล่นแบบเดิมของ ui-themes.css + ui_prefs.js (ไฟล์นี้แค่คืนหน้าตาเดิมให้แถบบน)
   ⭐ เมนูที่เลือกอยู่ (.sel) ใช้สีของธีมเหมือนเดิมทุกหมวด — ธีม 20+ ชุดกำหนดหน้าตาเมนูที่เลือกไว้เองแล้ว
   ⛔ ห้ามแตะสีที่มีความหมาย (--ok --warn --err --k --s --a --ap --accent ม่วง AI) · สีใหม่ผ่านตัวแปรเท่านั้น
   ⚠️ html:not(#nv) / :not(#nv2) = เพิ่มน้ำหนักให้ชนะกฎของ ui-themes.css ที่โหลดทีหลัง (เทคนิคเดียวกับ html:not(#ui) ในไฟล์นั้น)
   🔁 ย้อนกลับ: เอาบรรทัดโหลดไฟล์นี้ออกจาก head.php + คืน sidebar.php จาก _backup_20261024_adminmenu
   ============================================================================ */

:root{
  --grp-col:#0f766e; --grp-col-bg:#e2f3f0; --grp-col-ink:#115e59; --grp-col-lt:#5eead4;   /* ผู้ดูแลวิทยาลัย — เขียวหัวเป็ด */
  --grp-cen:#c2410c; --grp-cen-bg:#fdeee5; --grp-cen-ink:#9a3412; --grp-cen-lt:#fdba74;   /* ส่วนกลาง — ส้มอิฐ */
}

/* ───────── ตัวแปรของแต่ละหมวด ───────── */
.nav{ --nv-c:var(--brand); --nv-bg:var(--infobg); --nv-ink:var(--brand); --nv-lt:rgba(255,255,255,.92); }
.nav-grp[data-grp="college"]{ --nv-c:var(--grp-col); --nv-bg:var(--grp-col-bg); --nv-ink:var(--grp-col-ink); --nv-lt:var(--grp-col-lt); }
.nav-grp[data-grp="central"]{ --nv-c:var(--grp-cen); --nv-bg:var(--grp-cen-bg); --nv-ink:var(--grp-cen-ink); --nv-lt:var(--grp-cen-lt); }
.nav a.nav-acc{ --nv-c:var(--muted); --nv-bg:var(--surface2); --nv-lt:rgba(255,255,255,.8); }

/* ───────── ① รายการเมนู + ไอคอนในกรอบสี ───────── */
.nav a{ gap:10px; padding:5px 10px 5px 8px; line-height:1.3; }
.nav a .i{ flex:0 0 auto; width:28px; height:28px; display:inline-grid; place-items:center; border-radius:8px;
  background:var(--nv-bg); color:var(--nv-c); font-size:.92rem; text-align:center; transition:background .18s ease, color .18s ease; }
.nav a.sel .i{ background:rgba(255,255,255,.2); color:#fff; }
.nav a .badge{ margin-left:auto; flex:0 0 auto; }
.nav .badge.nav-b-err{ background:var(--err); color:#fff; border-color:var(--err); }
.nav .badge.nav-b-soft{ background:var(--nv-bg); color:var(--nv-ink); border-color:transparent; }
.nav a.sel .badge.nav-b-soft{ background:rgba(255,255,255,.22); color:#fff; }

/* หัวหมวด (งานของฉัน · บัญชีของฉัน) + หมวดย่อยในกลุ่มแอดมิน */
.nav .cap.cap-me{ padding-top:12px; color:var(--brand); font-weight:700; }
.nav .cap.cap-acc{ margin-top:10px; padding-top:12px; border-top:1px solid var(--line); }
.nav .nav-subcap{ padding:8px 12px 3px 14px; font-size:.82rem; font-weight:600; letter-spacing:.2px; color:var(--muted); }

/* ───────── ② ปุ่ม "สร้างงานใหม่" ───────── */
html:not(#nv):not(#nv2) .nav a.nav-new{ justify-content:center; gap:8px; margin:2px 0 4px; padding:0 12px; min-height:46px;
  background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff; font-weight:600; box-shadow:var(--shadow-sm); border:0; }
html:not(#nv):not(#nv2) .nav a.nav-new .i{ width:auto; height:auto; background:none; color:#fff; font-size:1rem; }
html:not(#nv):not(#nv2) .nav a.nav-new:hover{ transform:none; filter:brightness(1.07); }
html:not(#nv):not(#nv2) .nav a.nav-new.sel{ box-shadow:0 0 0 3px color-mix(in srgb, var(--brand2) 35%, transparent), var(--shadow-sm); }

/* ───────── ③ ปุ่มหัวกลุ่ม = พับ-กาง (เมนูซ้าย · ลิ้นชักมือถือ) ───────── */
.nav .nav-drop{ display:flex; align-items:center; gap:10px; width:100%; min-height:var(--tap); margin:12px 0 2px; padding:0 10px 0 8px;
  border:0; border-radius:var(--radius-sm); background:var(--nv-bg); color:var(--nv-ink); font:inherit; font-size:1.05rem; font-weight:700;
  line-height:1.25; text-align:left; cursor:pointer; transition:background .18s ease, filter .18s ease; }
.nav .nav-drop:hover{ filter:brightness(.97); }
.nav .nav-drop .i{ flex:0 0 auto; width:30px; height:30px; display:inline-grid; place-items:center; border-radius:8px; background:var(--nv-c); color:#fff; font-size:.92rem; }
.nav .nav-drop .nav-dl{ flex:1 1 auto; min-width:0; }
.nav .nav-drop .badge{ flex:0 0 auto; font-size:.8rem; padding:0 8px; }
.nav .nav-drop .nav-dn{ background:var(--err); color:#fff; border-color:var(--err); }
.nav .nav-drop .nav-dn.nav-dn-soft{ background:var(--surface); color:var(--nv-ink); border-color:transparent; }
.nav .nav-drop .nav-cv{ flex:0 0 auto; font-size:.75rem; opacity:.8; transform:rotate(180deg); transition:transform .18s ease; }
.nav .nav-shut .nav-drop .nav-cv{ transform:none; }
.nav .nav-grp.nav-shut .nav-sub{ display:none; }

/* ───────── เมนูพื้นเข้ม (สไตล์ "ผู้บริหาร" · พื้นหลังเมนูที่ตั้งตัวหนังสือขาว) ───────── */
html:not(#nv):not(#nv2)[data-ui-style="executive"]:not([data-ui-ink-menu="dark"]) .nav a .i,
html:not(#nv):not(#nv2)[data-ui-ink-menu="light"] .nav a .i{ background:rgba(255,255,255,.13); }
html:not(#nv):not(#nv2)[data-ui-style="executive"]:not([data-ui-ink-menu="dark"]) .nav .nav-grp a .i,
html:not(#nv):not(#nv2)[data-ui-ink-menu="light"] .nav .nav-grp a .i{ background:color-mix(in srgb, var(--nv-lt) 24%, transparent); color:var(--nv-lt); }
html:not(#nv):not(#nv2)[data-ui-style="executive"]:not([data-ui-ink-menu="dark"]) .nav a.sel .i,
html:not(#nv):not(#nv2)[data-ui-ink-menu="light"] .nav a.sel .i{ background:rgba(255,255,255,.22); color:#fff; }
html:not(#nv):not(#nv2)[data-ui-style="executive"]:not([data-ui-ink-menu="dark"]) .nav .nav-drop,
html:not(#nv):not(#nv2)[data-ui-ink-menu="light"] .nav .nav-drop{ background:color-mix(in srgb, var(--nv-lt) 16%, transparent); color:#fff; }
html:not(#nv):not(#nv2)[data-ui-style="executive"]:not([data-ui-ink-menu="dark"]) .nav .nav-drop .i,
html:not(#nv):not(#nv2)[data-ui-ink-menu="light"] .nav .nav-drop .i{ background:var(--nv-lt); color:var(--ink); }
html:not(#nv):not(#nv2)[data-ui-style="executive"]:not([data-ui-ink-menu="dark"]) .nav .nav-subcap,
html:not(#nv):not(#nv2)[data-ui-ink-menu="light"] .nav .nav-subcap,
html:not(#nv):not(#nv2)[data-ui-style="executive"]:not([data-ui-ink-menu="dark"]) .nav .cap,
html:not(#nv):not(#nv2)[data-ui-ink-menu="light"] .nav .cap{ color:rgba(255,255,255,.72); border-top-color:rgba(255,255,255,.16); }
html:not(#nv):not(#nv2)[data-ui-style="executive"]:not([data-ui-ink-menu="dark"]) .nav a.nav-new,
html:not(#nv):not(#nv2)[data-ui-ink-menu="light"] .nav a.nav-new{ background:#fff; color:var(--brand); }
html:not(#nv):not(#nv2)[data-ui-style="executive"]:not([data-ui-ink-menu="dark"]) .nav a.nav-new .i,
html:not(#nv):not(#nv2)[data-ui-ink-menu="light"] .nav a.nav-new .i{ background:none; color:var(--brand); }

/* เมนูพื้นอ่อนจากภาพพื้นหลัง (ตัวหนังสือเข้ม) — ui-themes.css ตั้งไอคอนเป็นสีเทา → คืนสีประจำหมวด */
html:not(#nv):not(#nv2)[data-ui-ink-menu="dark"] .nav a .i{ color:var(--nv-c); }
html:not(#nv):not(#nv2)[data-ui-ink-menu="dark"] .nav a.sel .i{ color:#fff; }

/* ───────── แถบไอคอน: ย่อด้วยปุ่ม ☰ (กว้าง 64px · เค้าโครงเมนูซ้าย/แผงลอย/กรอบกลางจอ) ───────── */
@media(min-width:901px){
  html.side-rail:not([data-ui-layout="rail"]) .nav a .i{ width:34px; height:34px; font-size:1.02rem; }
  html.side-rail:not([data-ui-layout="rail"]) .nav a{ padding:5px 0; }
  html.side-rail:not([data-ui-layout="rail"]) .nav .nav-drop{ position:relative; justify-content:center; padding:6px 0; gap:0; }
  html.side-rail:not([data-ui-layout="rail"]) .nav .nav-drop .nav-dl,
  html.side-rail:not([data-ui-layout="rail"]) .nav .nav-drop .nav-cv,
  html.side-rail:not([data-ui-layout="rail"]) .nav .nav-drop .nav-dn-soft,
  html.side-rail:not([data-ui-layout="rail"]) .nav .nav-subcap{ display:none; }
  html.side-rail:not([data-ui-layout="rail"]) .nav .nav-drop .nav-dn{ position:absolute; top:1px; right:2px; font-size:.68rem; padding:0 5px; }
  html.side-rail:not([data-ui-layout="rail"]) .nav a .badge{ position:absolute; top:1px; right:2px; font-size:.68rem; padding:0 5px; }
  html.side-rail:not([data-ui-layout="rail"]) .nav a{ position:relative; }
  html:not(#nv):not(#nv2).side-rail:not([data-ui-layout="rail"]) .nav a.nav-new{ padding:0; min-height:44px; }
}

/* ───────── เค้าโครง "แถบไอคอน" (92px · ui-themes.css 3.2) ───────── */
@media(min-width:901px){
  html:not(#nv)[data-ui-layout="rail"]:not(.side-rail) .nav a .i{ width:34px; height:34px; font-size:1.02rem; }
  html:not(#nv)[data-ui-layout="rail"]:not(.side-rail) .nav .nav-drop{ position:relative; flex-direction:column; justify-content:center; gap:4px;
    padding:7px 2px; min-height:62px; margin:10px 0 2px; font-size:0; text-align:center; }
  html:not(#nv)[data-ui-layout="rail"]:not(.side-rail) .nav .nav-drop::after{ content:attr(data-short); font-size:.76rem; font-weight:700; line-height:1.15; }
  html:not(#nv)[data-ui-layout="rail"]:not(.side-rail) .nav .nav-drop .nav-dl,
  html:not(#nv)[data-ui-layout="rail"]:not(.side-rail) .nav .nav-drop .nav-cv,
  html:not(#nv)[data-ui-layout="rail"]:not(.side-rail) .nav .nav-drop .nav-dn-soft,
  html:not(#nv)[data-ui-layout="rail"]:not(.side-rail) .nav .nav-subcap{ display:none; }
  html:not(#nv)[data-ui-layout="rail"]:not(.side-rail) .nav .nav-drop .nav-dn{ position:absolute; top:3px; right:6px; font-size:.7rem; padding:0 6px; }
  html:not(#nv):not(#nv2)[data-ui-layout="rail"]:not(.side-rail) .nav a.nav-new{ flex-direction:column; gap:3px; padding:7px 2px; min-height:60px; }
  html:not(#nv)[data-ui-layout="rail"]:not(.side-rail) .nav .cap.cap-me{ display:none; }
  html:not(#nv)[data-ui-layout="rail"]:not(.side-rail) .nav .cap.cap-acc{ border-top:0; }
  /* กางเต็ม (กด ☰) ในเค้าโครงแถบไอคอน — คืนขนาดกรอบไอคอนปกติ */
  html:not(#nv)[data-ui-layout="rail"].side-rail .nav a .i{ width:28px; font-size:.92rem; }
  html:not(#nv)[data-ui-layout="rail"].side-rail .nav a{ padding:5px 10px 5px 8px; gap:10px; }
}

/* ───────── เค้าโครง "เมนูด้านบน" (จอ ≥ 1280px) — คืนหน้าตาเดิมของแถบบน · เมนูหล่นใช้กรอบสีบนแผงขาว ───────── */
@media(min-width:1280px){
  html:not(#nv):not(#nv2):not(#nv3)[data-ui-layout="top"] .nav > a:not(.nav-new) .i,
  html:not(#nv):not(#nv2):not(#nv3)[data-ui-layout="top"] .nav .nav-drop .i{ width:auto; height:auto; background:none; font-size:1rem; }
  html:not(#nv)[data-ui-layout="top"] .nav > a:not(.nav-new) .i{ color:var(--muted); }
  html:not(#nv)[data-ui-layout="top"] .nav .nav-drop .i{ color:var(--nv-c); }
  html:not(#nv)[data-ui-layout="top"] .nav > a{ padding:0 11px; }
  html:not(#nv)[data-ui-layout="top"] .nav .nav-drop{ width:auto; margin:0; filter:none; }
  html:not(#nv):not(#nv2):not(#nv3)[data-ui-layout="top"] .nav .nav-grp:not(.has-sel):not(.open) .nav-drop{ background:none; }
  html:not(#nv):not(#nv2)[data-ui-layout="top"] .nav a.nav-new{ min-height:42px; margin:0 6px 0 0; padding:0 14px; font-size:0; }
  html:not(#nv):not(#nv2)[data-ui-layout="top"] .nav a.nav-new::after{ font-weight:600; }
  html:not(#nv)[data-ui-layout="top"] .nav .cap{ display:none; }
  html:not(#nv)[data-ui-layout="top"] .nav .nav-drop .nav-cv{ transform:none; }
  html:not(#nv)[data-ui-layout="top"] .nav .nav-grp.open .nav-drop .nav-cv{ transform:rotate(180deg); }
  html:not(#nv)[data-ui-layout="top"] .nav .nav-drop .nav-dn.nav-dn-soft{ background:var(--nv-bg); color:var(--nv-ink); border-color:transparent; }
  /* แผงเมนูหล่น = พื้นขาวเสมอ → กรอบสีแบบเมนูพื้นอ่อน */
  html:not(#nv):not(#nv2):not(#nv3)[data-ui-layout="top"] .nav .nav-sub a .i{ width:28px; height:28px; background:var(--nv-bg); color:var(--nv-c); font-size:.92rem; }
  html:not(#nv):not(#nv2):not(#nv3)[data-ui-layout="top"] .nav .nav-sub a.sel .i{ background:rgba(255,255,255,.2); color:#fff; }
  html:not(#nv):not(#nv2):not(#nv3)[data-ui-layout="top"] .nav .nav-sub .nav-subcap{ color:var(--muted); padding:8px 12px 3px; }
  html:not(#nv):not(#nv2):not(#nv3)[data-ui-layout="top"] .nav .nav-sub .nav-subcap:first-child{ padding-top:2px; }
}

/* ───────── ป้ายบทบาทบนแถบบน (partials/header.php) — สีเดียวกับหมวดในเมนู ───────── */
.who .badge.role-col{ background:var(--grp-col-bg); color:var(--grp-col-ink); border-color:color-mix(in srgb, var(--grp-col) 32%, transparent); font-weight:600; }
.who .badge.role-cen{ background:var(--grp-cen-bg); color:var(--grp-cen-ink); border-color:color-mix(in srgb, var(--grp-cen) 32%, transparent); font-weight:600; }
html:not(#nv)[data-ui-ink-top="dark"] .topbar .who .badge.role-col{ background:var(--grp-col-bg); color:var(--grp-col-ink); border-color:color-mix(in srgb, var(--grp-col) 32%, transparent); }
html:not(#nv)[data-ui-ink-top="dark"] .topbar .who .badge.role-cen{ background:var(--grp-cen-bg); color:var(--grp-cen-ink); border-color:color-mix(in srgb, var(--grp-cen) 32%, transparent); }