/* ============================================================
   cd-header.css — แถบหัวเว็บชุดกลาง ใช้ร่วมกันทุกหน้า

   คู่กับ app/views/template/_headerbar.php

   ตั้งใจเขียนให้ "อยู่ได้ด้วยตัวเอง" — ไม่อ้างตัวแปรสีของหน้าไหนเลย
   เพราะหน้าแรกใช้ชุดตัวแปร --maroon ส่วนหน้าอื่นใช้ --cd-maroon
   ถ้าไปอ้างตัวใดตัวหนึ่ง อีกหน้าจะเพี้ยนทันที จึงกำหนดสีไว้ในนี้ชุดเดียว

   ชื่อคลาสขึ้นต้นด้วย cdh- ทั้งหมด เพื่อไม่ให้ชนกับ main.css
   และตั้งใจไม่ใช้ .navmenu / .mobile-nav-toggle ที่ main.js ผูกไว้
   (main.js เช็ค null ไว้อยู่แล้ว ไม่เจอก็ไม่ทำอะไร ไม่ error)
   ============================================================ */

.cdh{
  --cdh-maroon:#901818;
  --cdh-orange:#C23A10;
  --cdh-navy:#303090;
  --cdh-navy-d:#252570;
  --cdh-ink:#3A2620;
  --cdh-line:#F5DCD2;
  --cdh-tint:#FFEDE4;

  position:sticky;top:0;z-index:1040;
  background:#fff;border-bottom:1px solid var(--cdh-line);
  font-family:'Pridi','Sarabun',system-ui,sans-serif;
}

.cdh-inner{
  max-width:1320px;margin:0 auto;padding:.7rem 1rem;
  display:flex;align-items:center;gap:1rem;
}

/* ---------- ตราคำ ---------- */
.cdh-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.cdh-brand img{height:38px;width:auto}
.cdh-wm{display:flex;flex-direction:column;line-height:1.15}
.cdh-name{font-weight:700;font-size:1.38rem;letter-spacing:-.01em;color:var(--cdh-maroon)}
.cdh-org{font-size:.72rem;font-weight:400;color:var(--cdh-orange);letter-spacing:.01em}

/* ---------- เมนู ---------- */
.cdh-nav{display:flex;align-items:center;gap:.2rem}
.cdh-link{
  color:var(--cdh-ink);font-weight:500;text-decoration:none;white-space:nowrap;
  padding:.45rem .9rem;border-radius:999px;display:inline-flex;align-items:center;gap:.35rem;
  background:none;border:0;font-family:inherit;font-size:1rem;cursor:pointer;
}
.cdh-link:hover{background:var(--cdh-tint);color:var(--cdh-maroon)}
.cdh-link.is-active{color:var(--cdh-maroon)}

/* เมนูย่อย "จัดการระบบ" */
.cdh-drop{position:relative}
.cdh-drop-menu{
  position:absolute;top:calc(100% + .5rem);right:0;min-width:230px;
  background:#fff;border:1px solid var(--cdh-line);border-radius:16px;
  box-shadow:0 12px 28px rgba(144,24,24,.14);padding:.4rem;
  display:none;flex-direction:column;
}
.cdh-drop.is-open .cdh-drop-menu{display:flex}
.cdh-drop-menu a{
  color:var(--cdh-ink);text-decoration:none;padding:.55rem .85rem;border-radius:10px;
  font-size:.95rem;white-space:nowrap;
}
.cdh-drop-menu a:hover{background:var(--cdh-tint);color:var(--cdh-maroon)}
.cdh-caret{transition:transform .18s}
.cdh-drop.is-open .cdh-caret{transform:rotate(180deg)}

/* ---------- ปุ่มผู้ใช้ / เข้าสู่ระบบ ---------- */
.cdh-user,.cdh-login{
  background:var(--cdh-navy);color:#fff;border-radius:999px;font-weight:500;
  text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  transition:background .15s;
}
.cdh-user{padding:.35rem .45rem .35rem 1.1rem}
.cdh-login{padding:.5rem 1.3rem}
.cdh-user:hover,.cdh-login:hover{background:var(--cdh-navy-d);color:#fff}
.cdh-user img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff;flex:none}

/* ---------- ปุ่มเมนูจอเล็ก ---------- */
.cdh-burger{
  display:none;background:none;border:0;font-size:1.6rem;line-height:1;
  color:var(--cdh-maroon);padding:.2rem .4rem;cursor:pointer;
}

@media (max-width:1199px){
  .cdh-burger{display:inline-flex}
  .cdh-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:.15rem;
    background:#fff;border-bottom:1px solid var(--cdh-line);
    box-shadow:0 14px 28px rgba(144,24,24,.10);padding:.6rem 1rem 1rem;
  }
  .cdh.is-navopen .cdh-nav{display:flex}
  .cdh-link{justify-content:flex-start;border-radius:12px}
  .cdh-drop-menu{
    position:static;display:flex;border:0;box-shadow:none;padding:0 0 0 1rem;
    min-width:0;
  }
  .cdh-drop .cdh-caret{display:none}
}

@media (max-width:575px){
  .cdh-wm{display:none}          /* จอแคบมาก เหลือแค่โลโก้ */
  .cdh-inner{gap:.6rem;padding:.6rem .9rem}
  .cdh-user{padding:.3rem .3rem .3rem .9rem;font-size:.9rem}
}

/* ============================================================
   เมนูผู้ใช้ (กดที่ชื่อมุมขวาบน)
   ใช้กลไก .cdh-drop เดิม แต่ต้องลอยเป็นเมนูเสมอ แม้จอเล็ก
   (เมนูย่อยในแถบนำทางจะกางแบบฝังในลิสต์บนมือถือ แต่อันนี้อยู่นอกแถบนำทาง)
   ============================================================ */
button.cdh-user{border:0;cursor:pointer;font-family:inherit;font-size:1rem}
.cdh-userdrop .cdh-drop-menu{min-width:220px}
.cdh-drop-menu a i{width:1.2rem;display:inline-block;color:var(--cdh-orange)}
.cdh-sep{display:block;height:1px;background:var(--cdh-line);margin:.35rem .3rem}
.cdh-drop-menu a.cdh-logout{color:#96201F}
.cdh-drop-menu a.cdh-logout i{color:#96201F}
.cdh-drop-menu a.cdh-logout:hover{background:#FBE0E0;color:#96201F}

@media (max-width:1199px){
  .cdh-userdrop .cdh-drop-menu{
    position:absolute;display:none;top:calc(100% + .5rem);right:0;left:auto;
    border:1px solid var(--cdh-line);box-shadow:0 12px 28px rgba(144,24,24,.14);
    padding:.4rem;min-width:220px;z-index:1050;
  }
  .cdh-userdrop.is-open .cdh-drop-menu{display:flex}
}

/* ============================================================
   รายการเมนูที่ยังไม่เปิดให้ใช้งาน (เช่น จัดการงานวันเด็ก)
   ยังแสดงให้เห็นว่ามีฟังก์ชันนี้ แต่กดไม่ได้ และบอกสถานะชัดเจน
   ============================================================ */
.cdh-drop-menu .cdh-disabled{
  display:flex;align-items:center;gap:.35rem;padding:.55rem .85rem;border-radius:10px;
  font-size:.95rem;white-space:nowrap;color:#A8958E;cursor:not-allowed;
}
.cdh-drop-menu .cdh-disabled i{width:1.2rem;display:inline-block;color:#C9B8B1}
.cdh-disabled .cdh-lock{margin-left:auto;padding-left:.6rem;color:#C9B8B1;font-size:.85rem}