/* ==========================================================
   ทะเบียนมติและการติดตามผล — สไตล์ทั้งระบบ
   ธีม "แดง-เหลืองธรรมศาสตร์" ชุดเดียวกับระบบฐานข้อมูลสำนักงานสภาฯ (council-office-db)
   ค่าสี ฟอนต์ ความโค้ง และเงา ถอดมาจาก assets/style.css ของระบบนั้นโดยตรง
   เพื่อให้ผู้ใช้ที่สลับไปมาระหว่างสองระบบรู้สึกว่าเป็นระบบเดียวกัน
   ========================================================== */

/* ---------- ฟอนต์ ----------
   Sarabun (เนื้อความ) และ IBM Plex Sans Thai (หัวเรื่อง) — ชุดเดียวกับระบบฐานข้อมูล
   เก็บไฟล์ไว้ในโปรเจกต์เอง ไม่โหลดจาก Google Fonts ด้วยเหตุผลสามข้อ
     1. ส่วนหัว Content-Security-Policy ของระบบนี้ (api/index.php) ตั้ง default-src 'self'
        ไว้แน่นหนา ถ้าจะดึงจากภายนอกต้องเปิดช่องให้ทั้ง fonts.googleapis.com และ
        fonts.gstatic.com ซึ่งแลกความปลอดภัยไปกับเรื่องความสวยงามล้วน ๆ
     2. เครือข่ายของหน่วยงานที่ปิดขาออกจะได้ฟอนต์ไม่ครบ หน้าตาจึงเพี้ยนไปจากระบบฐานข้อมูล
        ซึ่งขัดกับเหตุผลทั้งหมดที่ยกฟอนต์ชุดนี้มาใช้ตั้งแต่แรก
     3. ไม่มีคำขอออกนอกเครือข่ายต่อการเปิดหนึ่งครั้ง — เร็วกว่าและไม่บอกบุคคลที่สามว่าใครเปิดหน้าไหน
   เอาเฉพาะชุดอักขระไทยกับละติน (subset ที่ Google ตัดไว้แล้ว) รวม 16 ไฟล์ ~170 KB
   ทั้งสองฟอนต์เป็นสัญญาอนุญาต SIL Open Font License 1.1 จึงแจกมากับโปรเจกต์ได้
   font-display:swap = เห็นข้อความทันทีด้วยฟอนต์ระบบ แล้วสลับเมื่อฟอนต์จริงมาถึง ไม่มีช่วงข้อความหาย */

@font-face {
  font-family:"IBM Plex Sans Thai"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-thai-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:"IBM Plex Sans Thai"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-thai-400-thai.woff2") format("woff2");
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family:"IBM Plex Sans Thai"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-thai-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:"IBM Plex Sans Thai"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-thai-500-thai.woff2") format("woff2");
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family:"IBM Plex Sans Thai"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-thai-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:"IBM Plex Sans Thai"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-thai-600-thai.woff2") format("woff2");
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family:"IBM Plex Sans Thai"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-thai-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:"IBM Plex Sans Thai"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-thai-700-thai.woff2") format("woff2");
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family:"Sarabun"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/sarabun-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:"Sarabun"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/sarabun-400-thai.woff2") format("woff2");
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family:"Sarabun"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/sarabun-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:"Sarabun"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/sarabun-500-thai.woff2") format("woff2");
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family:"Sarabun"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/sarabun-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:"Sarabun"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/sarabun-600-thai.woff2") format("woff2");
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family:"Sarabun"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/fonts/sarabun-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:"Sarabun"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/fonts/sarabun-700-thai.woff2") format("woff2");
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
:root {
  /* สีเทาเหล่านี้ใช้กับข้อมูลจริง ไม่ใช่ของประดับ จึงต้องผ่าน 4.5:1 —
     --muted 5.5:1 และ --faint 5.1:1 บนพื้นครีม --paper
     --dim ใช้บนแถบเมนูสีเข้มเท่านั้น (5.7:1 บนพื้นแดงเข้มของแถบ) ห้ามนำไปใช้บนพื้นอ่อน */
  --ink:#2A2A31; --muted:#6b6256; --faint:#6F6759; --dim:#C6BCAB; --hair:#F3ECDF;
  --line:#efe7d8; --paper:#F7F4EE; --card:#fff;

  /**
   * พื้นผิวและองค์ประกอบที่ต้องสลับค่าตอนโหมดมืด — ทุกจุดในไฟล์นี้อ้างผ่านตัวแปรเหล่านี้
   * ไม่เขียนสีตายตัวลงไปตรง ๆ อีก มิฉะนั้นโหมดมืดจะมีจุดขาวโพลนหลงเหลืออยู่เป็นหย่อม ๆ
   */
  --card-2:#FBF8F2;                    /* พื้นผิวรอง — หัวกล่องพับ ช่องแนบไฟล์ */
  --pop:#fff;                          /* กล่องลอย — ตัวกรอง เมนูประจำแถว */
  --field:#fff;                        /* พื้นช่องกรอก */
  --btn-bg:#fff; --btn-line:#d8cfbf; --btn-ink:#5C554A;
  --head-line:rgba(43,43,51,.09);      /* เส้นใต้แถบหัวเรื่อง */
  --shadow:rgba(43,43,51,.05);
  --toast-bg:#2A2A31; --toast-ink:#fff;
  --brand-ink:var(--brand);            /* แบรนด์เมื่อใช้เป็น "ตัวอักษร" — โหมดมืดต้องสว่างกว่าพื้น */

  /* กล่องข้อความและป้ายตามความหมาย */
  --info-bg:#EAF0F5;   --info-line:#C8D6E2;
  --warn-bg:#FDF4E3;   --warn-line:#E8D5B8;
  --ok-bg:#EAF3EE;     --ok-line:#C6DDD1;
  --danger-bg:#FBEDEB; --danger-line:#EBD3D0;
  --edit-bg:#EDF3F8;   --edit-line:#DBE7F0;
  --susp-bg:#FDFAFA;   --susp-bg-h:#FBF4F4;

  /* แดงธรรมศาสตร์ตามระบบฐานข้อมูล — brand ใช้กับข้อความและปุ่มหลัก
     brand-subtle เป็นพื้นจาง ใช้กับหัวตาราง แถวที่ชี้อยู่ และป้ายตัวกรอง */
  --brand:#A4192C; --brand-dark:#7C1420; --brand-light:#B93341; --brand-subtle:#FBEDEF;

  /* เหลืองทองใช้เป็น "สีเน้น" บนพื้นเข้มเท่านั้น (เมนูที่เลือกอยู่ · ขีดใต้ตัวเลขสรุป)
     --gold ยังเป็นเหลืองเข้มสำหรับ "ตัวอักษรบนพื้นอ่อน" เหมือนเดิม เพราะ #F6C324
     บนพื้นขาวได้คอนทราสต์ราว 1.6:1 อ่านไม่ออก — สองบทบาทนี้ต้องแยกตัวแปรกัน */
  --accent:#F6C324; --accent-dark:#E8B01E; --accent-ink:#3a2c00;
  --gold:#8A5A00; --cream:#F5EEE1;

  --green:#217a49; --amber:#B26B00; --red:#B3261E; --blue:#3A6EA5;

  /* ชุดฟอนต์เดียวกับระบบฐานข้อมูล — Sarabun เป็นตัวเนื้อความ IBM Plex Sans Thai เป็นหัวเรื่อง
     โหลดจาก Google Fonts ที่ layout.php และ login.php เหมือนกันทั้งสองระบบ
     เครื่องที่เปิดไม่ถึงอินเทอร์เน็ตภายนอกตกไปใช้ฟอนต์ระบบตัวถัดไปในสาย หน้าไม่พัง */
  --serif:"IBM Plex Sans Thai","Sarabun","Noto Sans Thai","Leelawadee UI","Tahoma",sans-serif;
  --sans:"Sarabun","Noto Sans Thai","Leelawadee UI","Tahoma","Segoe UI",sans-serif;
  --ease:.16s cubic-bezier(.4,0,.2,1);
}

/**
 * โหมดมืด — โทนเดียวกับระบบฐานข้อมูล (พื้นเทา-ดำ คงแดง-เหลืองเป็นสีเน้น)
 *
 * สลับด้วย data-theme="dark" ที่ <html> ซึ่ง app.js เขียนให้ตั้งแต่ก่อนวาดหน้า จึงไม่มีจอขาววาบ
 * เปลี่ยนแค่ค่าตัวแปรชุดเดียว ไม่ต้องเขียนกฎซ้ำสองชุด — จุดไหนที่ยังเขียนสีตายตัวไว้จะโผล่
 * เป็นหย่อมขาวทันทีในโหมดมืด ซึ่งเป็นวิธีตรวจว่าลืมจุดไหนไปที่ง่ายที่สุด
 *
 * ยังไม่เลือกเอง = ตามการตั้งค่าของเครื่อง (prefers-color-scheme) ผู้ใช้ที่ตั้งเครื่องเป็นมืดไว้
 * จึงได้โหมดมืดตั้งแต่เปิดหน้าแรกโดยไม่ต้องกดอะไร · กดปุ่มเมื่อไหร่ถือว่าเลือกเองและจำไว้
 */
:root[data-theme="dark"] {
  --ink:#E8E8EA; --muted:#a9a9b4; --faint:#a3a3ae; --dim:#C6BCAB; --hair:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.11); --paper:#14151A; --card:#1C1D25;
  --card-2:#20212A; --pop:#22232C; --field:#22232C;
  --btn-bg:#22232C; --btn-line:rgba(255,255,255,.16); --btn-ink:#d7d7de;
  --head-line:rgba(255,255,255,.08);
  --shadow:rgba(0,0,0,.45);
  --toast-bg:#33343E; --toast-ink:#F2F2F5;

  /* แดงจางบนพื้นมืดต้องเป็น "แดงเข้มอมดำ" ไม่ใช่ชมพูอ่อน · ตัวอักษรแบรนด์เปลี่ยนเป็นชมพูสว่าง */
  --brand-subtle:#2A1218;
  --brand-ink:#FF9AA6;

  /* สีตามความหมายบนพื้นมืด — พื้นเป็นสีจางมาก ตัวอักษรสว่างขึ้นทั้งชุด */
  --green:#5FD3A0; --amber:#F0B45C; --red:#FF8F84; --blue:#7FB6E8; --gold:#F0C36B;
  --info-bg:rgba(127,182,232,.12);  --info-line:rgba(127,182,232,.28);
  --warn-bg:rgba(240,195,107,.12);  --warn-line:rgba(240,195,107,.28);
  --ok-bg:rgba(95,211,160,.12);     --ok-line:rgba(95,211,160,.28);
  --danger-bg:rgba(255,143,132,.12);--danger-line:rgba(255,143,132,.3);
  --edit-bg:rgba(127,182,232,.12);  --edit-line:rgba(127,182,232,.26);
  --susp-bg:rgba(255,143,132,.07);  --susp-bg-h:rgba(255,143,132,.13);
}

/**
 * ยังไม่เคยกดปุ่มสลับธีม = ไม่มีคุกกี้ = เซิร์ฟเวอร์ไม่ได้เขียน data-theme มาให้
 * กรณีนี้ให้ตามการตั้งค่าของเครื่อง · ค่าทั้งหมดต้องตรงกับบล็อกด้านบนเป๊ะ ๆ
 * (คัดลอกมาทั้งชุด เพราะตัวแปร CSS อ้างข้ามบล็อกกันไม่ได้ ต้องประกาศซ้ำเท่านั้น)
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#E8E8EA; --muted:#a9a9b4; --faint:#a3a3ae; --dim:#C6BCAB; --hair:rgba(255,255,255,.07);
    --line:rgba(255,255,255,.11); --paper:#14151A; --card:#1C1D25;
    --card-2:#20212A; --pop:#22232C; --field:#22232C;
    --btn-bg:#22232C; --btn-line:rgba(255,255,255,.16); --btn-ink:#d7d7de;
    --head-line:rgba(255,255,255,.08);
    --shadow:rgba(0,0,0,.45);
    --toast-bg:#33343E; --toast-ink:#F2F2F5;

    /* แดงจางบนพื้นมืดต้องเป็น "แดงเข้มอมดำ" ไม่ใช่ชมพูอ่อน · ตัวอักษรแบรนด์เปลี่ยนเป็นชมพูสว่าง */
    --brand-subtle:#2A1218;
    --brand-ink:#FF9AA6;

    /* สีตามความหมายบนพื้นมืด — พื้นเป็นสีจางมาก ตัวอักษรสว่างขึ้นทั้งชุด */
    --green:#5FD3A0; --amber:#F0B45C; --red:#FF8F84; --blue:#7FB6E8; --gold:#F0C36B;
    --info-bg:rgba(127,182,232,.12);  --info-line:rgba(127,182,232,.28);
    --warn-bg:rgba(240,195,107,.12);  --warn-line:rgba(240,195,107,.28);
    --ok-bg:rgba(95,211,160,.12);     --ok-line:rgba(95,211,160,.28);
    --danger-bg:rgba(255,143,132,.12);--danger-line:rgba(255,143,132,.3);
    --edit-bg:rgba(127,182,232,.12);  --edit-line:rgba(127,182,232,.26);
    --susp-bg:rgba(255,143,132,.07);  --susp-bg-h:rgba(255,143,132,.13);
  }
}

/**
 * เปลี่ยนหน้าแบบจางสลับ (crossfade) — ประกาศ CSS ล้วน ไม่มี JavaScript เกี่ยวข้อง
 * เบราว์เซอร์ที่รองรับ View Transitions สำหรับเอกสารหลายหน้า (Chrome/Edge รุ่นหลัง)
 * จะเนียนสลับให้เองอัตโนมัติทุกครั้งที่คลิกลิงก์ไปหน้าใหม่ในเว็บไซต์เดียวกัน
 * เบราว์เซอร์ที่ไม่รู้จัก at-rule นี้จะข้ามไปเฉย ๆ ตามหลักการแยกวิเคราะห์ CSS ปกติ
 * — หน้าเปลี่ยนแบบเดิมทันที ไม่มีอะไรพังหรือขาดหาย เป็นเพียงส่วนเสริมของผู้ใช้ที่ได้เห็น
 */
@view-transition { navigation: auto; }

/**
 * ผู้ใช้ที่ตั้งระบบปฏิบัติการให้ลดการเคลื่อนไหว (Reduce Motion) ต้องได้ผลจริง
 * ปิดทั้งอนิเมชันและทรานซิชันทุกจุดของเว็บ รวมถึงปิดการสลับหน้าแบบจางด้วย
 * นี่คือความหมายจริงของ "ไม่รบกวน" — เคารพการตั้งค่าที่ผู้ใช้ขอไว้แล้ว ไม่ใช่แค่ทำให้นุ่มลง
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  @view-transition { navigation: none; }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.6;
}
a { color:var(--brand-ink); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- โครงหน้า ----------
   แถบเมนูซ้ายถอดแบบจาก .admin-sidebar ของระบบฐานข้อมูล — กว้าง 250px
   ไล่สีจากเทาเกือบดำด้านบนลงไปหาแดงเข้มด้านล่าง เมนูที่เลือกอยู่เป็นเหลืองทอง */
.shell { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.sidebar {
  background:linear-gradient(180deg,#1f1d22 0%,var(--brand-dark) 120%); color:#e9e6e7;
  display:flex; flex-direction:column; justify-content:space-between;
  position:sticky; top:0; height:100vh;
}
/* แถบบนสุดของมือถือ (ปุ่มขีดสามขีด + ชื่อระบบ) — จอกว้างไม่ต้องมี เมนูกางอยู่แล้ว */
.navbox > summary { display:none; }
.navpanel { min-width:0; }

.brand { padding:18px 19px 6px; display:flex; align-items:center; gap:11px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:16px; }
.brand .mark { flex:none; width:40px; height:40px; }
.brand b { display:block; font-family:var(--serif); font-size:15.5px; color:#fff; font-weight:700; line-height:1.35; letter-spacing:.01em; }
.brand span { display:block; font-size:11.5px; color:var(--dim); margin-top:3px; letter-spacing:.04em; }
nav { display:flex; flex-direction:column; gap:2px; padding:12px 10px; }
nav a {
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px;
  font-size:14px; text-decoration:none; color:rgba(255,255,255,.82);
  transition:background-color var(--ease), color var(--ease), transform var(--ease);
}
nav a:hover { background:rgba(255,255,255,.08); color:#fff; transform:translateX(2px); }
nav a .ico { width:18px; height:18px; flex:none; opacity:.8; }
nav a.on .ico { opacity:1; }
/* เมนูที่เลือกอยู่เป็นเหลืองทองพร้อมตัวอักษรน้ำตาลเข้ม (10.9:1) เหมือน .admin-nav-link.active */
nav a.on { background:var(--accent); color:var(--accent-ink); font-weight:600; box-shadow:0 3px 8px rgba(246,195,36,.3); }
nav a.on:hover { transform:none; }   /* หน้าที่เลือกอยู่แล้วไม่ต้องขยับ กันดูเหมือนกดได้อีกรอบ */
nav .badge { margin-left:auto; font-size:12px; padding:1px 7px; border-radius:7px; background:rgba(255,255,255,.16); color:#fff; }
nav a.on .badge { background:rgba(58,44,0,.18); color:var(--accent-ink); }
.sidefoot { padding:15px 19px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; }
.sidefoot b { display:block; color:#fff; font-size:13.5px; }
.sidefoot span { display:block; color:var(--dim); margin-top:3px; line-height:1.6; }
.ghost {
  /* ขอบต้องได้ 3:1 ตามเกณฑ์องค์ประกอบที่ไม่ใช่ข้อความ — .22 ได้แค่ราว 1.5:1 */
  margin-top:11px; background:none; border:1px solid rgba(255,255,255,.42);
  color:#e9e6e7; padding:7px 12px; border-radius:9px; font:inherit; font-size:13px; cursor:pointer;
}
.ghost { display:inline-flex; align-items:center; gap:7px; transition:background-color var(--ease), transform .1s ease; }
.ghost .ico { width:15px; height:15px; flex:none; }
.ghost:hover { background:rgba(255,255,255,.08); }
.ghost:active { transform:scale(.97); }

main { min-width:0; display:flex; flex-direction:column; }

/* ---------- แถบบางบนสุดและท้ายหน้า ----------
   ถอดแบบจาก .topbar และ footer ของระบบฐานข้อมูล — บอกว่าเป็นระบบของหน่วยงานไหน ติดต่อที่ไหน */
.topstrip {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:6px 24px; font-size:12px; line-height:1.6;
  background:var(--brand-dark); color:rgba(255,255,255,.86);
}
.topstrip span { display:inline-flex; align-items:center; gap:6px; }
.topstrip .ico { width:13px; height:13px; flex:none; opacity:.8; }
.topstrip .tsright { margin-left:auto; gap:16px; }
.topstrip a { color:rgba(255,255,255,.86); text-decoration:none; }
.topstrip a:hover { color:#fff; text-decoration:underline; }

.pagefoot {
  margin-top:auto; padding-top:22px; border-top:1px solid var(--line);
  font-size:12px; color:var(--faint); line-height:1.8; overflow-wrap:anywhere;
}
.pagefoot b { color:var(--muted); }
.pagefoot .sub { margin-top:2px; }
/* แถบหัวเรื่องเป็นพื้นขาวติดบนสุด เหมือน .admin-topbar ของระบบฐานข้อมูล
   (ของเดิมเป็นพื้นครีมกลืนกับเนื้อหา จึงแยกไม่ออกว่าหัวเรื่องจบตรงไหน) */
.pagehead {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:15px 24px; background:var(--card); border-bottom:1px solid var(--head-line);
  position:sticky; top:0; z-index:5;
}
.pagehead .crumb { font-size:12px; color:var(--muted); letter-spacing:.04em; }
.pagehead h1 { font-family:var(--serif); font-size:23px; font-weight:700; margin:2px 0 0; letter-spacing:-.01em; }
.wrap { padding:24px 20px 40px; display:flex; flex-direction:column; gap:17px; flex:1; }

/* ---------- การ์ดและปุ่ม ---------- */
/* การ์ดโค้ง 1rem และเงาบาง ๆ ชุดเดียวกับ .card ของระบบฐานข้อมูล
   ไม่ใส่ overflow:hidden ตามต้นแบบ เพราะกล่องตัวกรองและเมนูประจำแถวในระบบนี้
   กางออกนอกขอบการ์ด — ใส่แล้วจะถูกตัดหาย (ต้นแบบเองก็ต้องเขียนกฎ overflow:visible แก้ทีหลัง) */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 1px 3px var(--shadow);
}
.card > .head {
  padding:14px 21px; border-bottom:1px solid var(--line); background:var(--card); border-radius:16px 16px 0 0;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.card > .head h2 { font-family:var(--serif); font-size:16px; font-weight:600; margin:0; flex:1; min-width:150px; overflow-wrap:anywhere; }
.card > .head .sub { font-size:12px; color:var(--faint); margin-top:3px; line-height:1.6; font-weight:400; overflow-wrap:anywhere; }
.card > .body { padding:19px 21px; }

.btn, button.btn, a.btn {
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px;
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none;
  border:1px solid var(--btn-line); background:var(--btn-bg); color:var(--btn-ink);
  transition:border-color var(--ease), background-color var(--ease), color var(--ease),
             box-shadow var(--ease), transform .1s ease;
}
/* ไอคอนหน้าปุ่ม — icon() ใน helpers.php สร้าง <svg class="ico"> ให้เอง */
.btn .ico, .mitem .ico { width:15px; height:15px; flex:none; }
.btn.sm .ico { width:13.5px; height:13.5px; }
.btn:hover { border-color:var(--brand-ink); color:var(--brand-ink); background:var(--brand-subtle); }
.btn:active { transform:scale(.97); transition-duration:.05s; }   /* กดแล้วยุบเบา ๆ ให้รู้ว่ากดโดนจริง */
.btn.pri { background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(164,25,44,.25); }
.btn.pri:hover { background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; box-shadow:0 3px 8px rgba(124,20,32,.3); }
/* ปุ่มลงมือหลักแบบเน้น (เหลืองทอง) — ชุดเดียวกับ .btn-warning ของระบบฐานข้อมูล
   ตัวอักษรเป็นแดงเข้มบนพื้นเหลือง ได้คอนทราสต์ 6.6:1 */
.btn.cta { background:var(--accent); border-color:var(--accent); color:var(--brand-dark); font-weight:700; }
.btn.cta:hover { background:var(--accent-dark); border-color:var(--accent-dark); color:var(--brand-dark); }
.btn.danger { border-color:var(--danger-line); color:var(--red); }
.btn.danger:hover { background:var(--danger-bg); border-color:var(--danger-line); color:var(--red); }
.btn.sm { padding:5px 11px; font-size:12.5px; }
/* ปุ่มไอคอนล้วน เช่น ดินสอแก้ไข — ข้อความอธิบายซ่อนไว้ให้โปรแกรมอ่านหน้าจอ */
.btn.ico { padding:5px 9px; font-size:14px; line-height:1.2; }

/* ปุ่มสลับธีม — โหมดสว่างแสดงดวงจันทร์ (สิ่งที่จะได้ถ้ากด) · โหมดมืดแสดงดวงอาทิตย์
   บอกปลายทางของการกด ไม่ใช่สถานะปัจจุบัน ซึ่งเป็นสิ่งที่ผู้ใช้เห็นอยู่แล้วจากทั้งหน้าจอ */
[data-theme-toggle] { padding:8px 10px; }
[data-theme-toggle] .ico { width:16px; height:16px; }
[data-theme-toggle] .ico:first-child { display:none; }
:root[data-theme="dark"] [data-theme-toggle] .ico:first-child { display:block; }
:root[data-theme="dark"] [data-theme-toggle] .ico + .ico { display:none; }

/* ปุ่มที่ทำงานได้ด้วย JavaScript เท่านั้น — ซ่อนไว้ก่อน แล้ว app.js ติดธง js ให้ที่ <html>
   ปุ่มตายที่กดแล้วไม่เกิดอะไรขึ้น แย่กว่าไม่มีปุ่มเลย
   ไม่ใช้ !important เพราะกฎ .noprint ตอนสั่งพิมพ์ต้องยังเอาชนะกฎนี้ได้ */
.jsonly { display:none; }
html.js .jsonly { display:inline-flex; }

/* ปุ่มออกรหัสตั้งรหัสผ่าน พร้อมช่องเลือกอายุของรหัสในแถวเดียวกัน */
.issuebox { display:inline-flex; align-items:stretch; gap:5px; }
.issuebox .msel {
  font:inherit; font-size:12.5px; padding:5px 7px; border-radius:8px;
  border:1px solid var(--line); background:var(--field); color:var(--btn-ink); cursor:pointer;
}

/* ---------- กล่องพับเก็บสำหรับฟอร์มเพิ่ม/แก้ไข ----------
   ใช้ <details> ของ HTML จึงกดเปิดปิดได้เองโดยไม่ต้องพึ่ง JavaScript */
.addbox > summary {
  list-style:none; cursor:pointer; padding:14px 21px; background:var(--card-2);
  display:block; border-radius:16px;
  transition:background-color var(--ease), transform .1s ease;
}
/* flex อยู่ชั้นใน — display:flex บน <summary> ทำให้กดเปิดปิดไม่ได้บน Safari ก่อน 16.4 */
.addbox > summary > .row { display:flex; align-items:center; gap:11px; }
.addbox > summary::-webkit-details-marker { display:none; }
.addbox > summary:hover { background:var(--brand-subtle); }
/**
 * ปุ่มสี่เหลี่ยมหน้าหัวข้อ — ปิดอยู่แสดงไอคอนของงานนั้น (บวก / กุญแจ) เปิดแล้วกลายเป็นกากบาทปิด
 *
 * เดิมเป็นตัวอักษร "+" ธรรมดาแล้วหมุน 45 องศาให้กลายเป็น × ซึ่งวางไม่ลงกลางปุ่มจริง ๆ
 * เพราะเส้นฐานและความสูงของกลีฟ "+" ในแต่ละฟอนต์ไม่ได้อยู่กึ่งกลางกล่องตัวอักษร
 * (และเมื่อหมุนก็ยิ่งเยื้องขึ้นไปอีก) เปลี่ยนมาเป็น <svg> ที่วาดกากบาทกลางกรอบ 24×24 พอดี
 * จึงอยู่กึ่งกลางเป๊ะทุกฟอนต์ทุกขนาด และไม่ต้องพึ่งการหมุนอีกต่อไป
 */
.addbox > summary .plus {
  flex:none; width:28px; height:28px; border-radius:8px; background:var(--brand); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color var(--ease), color var(--ease), border-color var(--ease);
}
.addbox > summary .plus .ico { width:16px; height:16px; }
.addbox > summary .plus .ico + .ico { display:none; }        /* ปิดอยู่ = เห็นไอคอนแรก */

/**
 * เปิดอยู่ = ปุ่มปิด จึงย้ายไปมุมขวาบนของกล่องตามที่ผู้ใช้คาดจากหน้าต่างทั่วไป
 * order/margin-left:auto ทำงานได้เพราะ .row เป็น flex — ไม่ต้องสลับลำดับใน HTML
 * และโปรแกรมอ่านหน้าจอยังอ่านหัวข้อก่อนปุ่มปิดตามลำดับในเอกสารเหมือนเดิม
 */
.addbox[open] > summary .plus {
  order:9; margin-left:auto;
  background:var(--card); border:1px solid var(--line); color:var(--muted);
}
.addbox[open] > summary .plus .ico { display:none; }
.addbox[open] > summary .plus .ico + .ico { display:block; }
.addbox[open] > summary:hover .plus { border-color:var(--brand-ink); color:var(--brand-ink); background:var(--brand-subtle); }
.addbox > summary .ttl { font-family:var(--serif); font-size:15.5px; font-weight:600; }
.addbox > summary .sub { display:block; font-size:12px; color:var(--faint); margin-top:3px; font-weight:400; line-height:1.6; }
.addbox[open] > summary { border-bottom:1px solid var(--hair); border-radius:16px 16px 0 0; }
.addbox > summary .sub { overflow-wrap:anywhere; }

/**
 * ปุ่มเปิดฟอร์มเพิ่มแบบกะทัดรัด — ใช้เฉพาะหน้าที่มีทะเบียนสองชุดในหน้าเดียว
 * (ทะเบียนการประชุมและส่วนงาน) กันไม่ให้การ์ด "เพิ่ม" ทั้งสองใบเต็มความกว้างกินพื้นที่
 * บนสุดของหน้าจนต้องเลื่อนผ่านก่อนจะถึงทะเบียนจริงที่อยากดู เปิดออกมาแล้วยังเป็น
 * popup ลอยกลางจอเหมือนกล่องอื่นทุกประการ ต่างกันแค่หน้าตาตอนพับปิดอยู่
 */
.addbox.compact:not([open]) { background:none; border:none; box-shadow:none; display:inline-block; }
.addbox.compact:not([open]) > summary {
  display:inline-flex; width:auto; padding:8px 16px 8px 10px; border-radius:10px;
  background:var(--card); border:1px solid var(--line);
}
.addbox.compact:not([open]) > summary > .row { gap:8px; }
.addbox.compact:not([open]) > summary .plus { width:23px; height:23px; }
.addbox.compact:not([open]) > summary .plus .ico { width:14px; height:14px; }
.addbox.compact:not([open]) > summary .ttl { font-size:13.5px; }
.addbox.compact:not([open]) > summary .sub { display:none; }
.addbox.compact:not([open]) > summary:hover { border-color:var(--brand); }

/* ---------- หน้าทะเบียนการประชุมและส่วนงาน ----------
   สองทะเบียนวางเคียงกันบนจอกว้าง แทนที่จะซ้อนกันเต็มความกว้างจนต้องเลื่อนจอไปมา
   1080px คือจุดที่คอลัมน์ละครึ่งจอยังกว้างพอให้ตารางสี่คอลัมน์อ่านได้โดยไม่ต้องเลื่อนซ้ายขวา */
.setupgrid { display:grid; grid-template-columns:1fr; gap:20px; align-items:start; }
@media (min-width:1080px) { .setupgrid { grid-template-columns:1fr 1fr; gap:22px; } }

.reg { display:flex; flex-direction:column; gap:10px; min-width:0; }
/* หัวข้อทะเบียน จำนวนรายการ และปุ่มเพิ่ม อยู่บรรทัดเดียวกันเหนือการ์ด
   ปุ่มเพิ่มชิดขวาสุดด้วย margin-left:auto จึงจับคู่กับหัวข้อทางซ้ายได้ในสายตาเดียว */
.reghead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:0 2px; }
.reghead h2 { font-family:var(--serif); font-size:17px; font-weight:700; margin:0; letter-spacing:-.01em; }
.reghead .cnt { font-size:12.5px; color:var(--muted); }
/* ปุ่มส่งออกกับปุ่มเพิ่มจับกลุ่มกันชิดขวา — ส่งออกเป็นปุ่มรอง จึงเล็กและจางกว่า */
.reghead .regexp { margin-left:auto; }
.reghead .regexp + .addbox.compact { margin-left:0; }
.reghead .addbox.compact { margin-left:auto; }

/* ป้ายบอกว่าแถวนี้ถูกอ้างถึงกี่รายการ — ไม่มีเลข = ลบได้ ซึ่งอธิบายว่าทำไมปุ่มลบ
   โผล่เฉพาะบางแถว · สีเดียวกับป้ายตัวกรองที่เลือกไว้ จะได้อ่านเป็นภาษาเดียวกันทั้งระบบ */
.utag {
  display:inline-block; padding:2px 9px; border-radius:7px; font-size:11.5px;
  background:var(--paper); color:var(--muted); border:1px solid var(--hair); white-space:nowrap;
}
.utag.on { background:var(--brand-subtle); color:var(--brand-ink); border-color:rgba(164,25,44,.25); }

/* ---------- หน้านำเข้าข้อมูล ---------- */
/* แถบเลือกทะเบียนที่จะนำเข้า — เป็นลิงก์จริง ไม่ใช่ tab ที่ต้องพึ่ง JavaScript */
.kindtabs { display:flex; gap:8px; flex-wrap:wrap; }
.kindtab {
  display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px;
  font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap;
  border:1px solid var(--line); background:var(--btn-bg); color:var(--btn-ink);
  transition:border-color var(--ease), background-color var(--ease), color var(--ease);
}
.kindtab .ico { width:15px; height:15px; flex:none; }
.kindtab:hover { border-color:var(--brand-ink); color:var(--brand-ink); background:var(--brand-subtle); }
.kindtab.on { background:var(--brand); border-color:var(--brand); color:#fff; }

/* ข้อความบอกเหตุรายแถวในตารางตัวอย่าง — เรียงลงมาทีละบรรทัด ไม่ต่อกันเป็นพืด */
.imsg { display:block; font-size:12px; line-height:1.6; color:var(--muted); overflow-wrap:anywhere; }
.imsg.bad { color:var(--red); font-weight:600; }
/* รายการที่จะถูกทับ — สีน้ำเงินเดียวกับป้าย "จะแก้ไข" แยกจากคำเตือน (เทา) และข้อผิดพลาด (แดง) */
.imsg.edit { color:var(--blue); }
.imsg + .imsg { margin-top:3px; }
/* แถวที่ผิดคาดขีดแดงข้างซ้าย เหมือนแถวบัญชีที่ถูกระงับ จะได้อ่านเป็นภาษาเดียวกัน */
.drow.rowbad { background:var(--susp-bg); box-shadow:inset 3px 0 0 var(--red); }
.drow.rowbad:hover { background:var(--susp-bg-h); }
.drow.rowedit { background:var(--edit-bg); box-shadow:inset 3px 0 0 var(--blue); }
.drow.rowedit:hover { background:var(--edit-line); }
.utag.bad { background:var(--danger-bg); color:var(--red); border-color:var(--danger-line); }
.utag.edit { background:var(--edit-bg); color:var(--blue); border-color:var(--edit-line); }

/* ตัวเลือกแบบวงกลมเรียงลงมาในฟอร์ม — เป้ากดครอบทั้งบรรทัด ไม่ใช่แค่วงกลมเล็ก ๆ */
.radioline {
  display:flex; align-items:flex-start; gap:10px; padding:9px 11px; margin-bottom:6px;
  border:1px solid var(--line); border-radius:11px; cursor:pointer; font-size:13.5px;
  transition:border-color var(--ease), background-color var(--ease);
}
.radioline:hover { border-color:var(--brand); background:var(--brand-subtle); }
.radioline:has(input:checked) { border-color:var(--brand); background:var(--brand-subtle); font-weight:600; }
.radioline input { width:auto; flex:none; margin:2px 0 0; accent-color:var(--brand); }

.regno { font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.regname { font-weight:500; }
.regsub { font-size:13px; color:var(--muted); overflow-wrap:anywhere; }

/**
 * ความสูงของกรอบรายการบนจอกว้าง — ทะเบียนการประชุมยาวขึ้นทุกปีไม่มีวันสั้นลง
 * ถ้าปล่อยยาวตามเนื้อหา คอลัมน์หนึ่งจะสูงกว่าอีกคอลัมน์มากจนหน้าเบี้ยว และหน้าก็ยาวขึ้นเรื่อย ๆ
 * จำกัดไว้แล้วเลื่อนในกรอบแทน ทั้งสองทะเบียนจึงอยู่ในสายตาพร้อมกันเสมอ
 * จอแคบไม่จำกัด เพราะการเลื่อนในกรอบซ้อนกับการเลื่อนทั้งหน้าบนมือถือทำให้กดพลาดง่าย
 */
@media (min-width:1080px) {
  .rowsbox { max-height:min(58vh,560px); overflow-y:auto; }
}

/* แถวปุ่มท้ายฟอร์มในกล่องเพิ่ม/แก้ไข */
.formbtns { display:flex; gap:9px; flex-wrap:wrap; }

/**
 * เปิด JavaScript แล้วฟอร์มที่กางอยู่ลอยกลางจอแทนที่จะแทรกอยู่ตรงที่มันอยู่ในเอกสาร
 * (ดูเหตุผลเต็มในคอมเมนต์ของ app.js) — ปิด JavaScript ยังเป็นกล่องพับ-กางอยู่กับที่เดิม
 * ทุกประการ เพราะกฎนี้ทั้งหมดอยู่ใต้ html.js ซึ่งมีแค่ตอนสคริปต์ทำงานสำเร็จเท่านั้น
 */
/* ชั้นการวางซ้อนของทั้งระบบ เรียงจากล่างขึ้นบน —
   ตัวกรอง 20 · แถบหัวเรื่อง 5 · ข้อความแจ้งผล 60 · เมนูประจำแถว 100
   ฉากหลังลิ้นชักเมนู 200 · แถบเมนูและลิ้นชัก 220 · ฉากหลังกล่องฟอร์ม 300 · กล่องฟอร์ม 320
   กล่องฟอร์มอยู่บนสุดเสมอ เพราะเป็นสิ่งที่ผู้ใช้กำลังทำอยู่ตรงหน้า */
html.js .addbox[open] {
  position:fixed; z-index:320;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:calc(100vw - 32px); max-width:560px;
  max-height:calc(100vh - 48px); overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.32);
  animation:modalIn .18s cubic-bezier(.2,.8,.3,1);
}
/**
 * ฉากหลังคลุมทั้งหน้า — วาดที่ ::after ของ <body> ไม่ใช่ที่ตัวกล่อง
 *
 * เดิมวาดด้วย ::before ของกล่องเองแล้วสั่ง position:fixed; inset:0 หวังให้คลุมทั้งจอ
 * แต่ตัวกล่องตั้ง transform ไว้ (ใช้จัดให้อยู่กลางจอ) และธาตุที่มี transform จะกลาย
 * เป็น "บล็อกอ้างอิง" ของลูกที่เป็น position:fixed ทั้งหมด — inset:0 จึงหมายถึงขอบของ
 * กล่องเอง ไม่ใช่ขอบจอ ผลคือหน้าไม่ถูกหรี่เลยสักนิด แถมฉากหลังสีเข้มยังไปคลุมทับ
 * พื้นขาวในตัวกล่อง ทำให้เนื้อในฟอร์มออกมาเป็นสีเทาหม่นอย่างที่เห็น
 *
 * ย้ายมาไว้ที่ <body> ซึ่งไม่มี transform ฉากหลังจึงยึดกับจอจริง คลุมเต็มหน้าตามที่ตั้งใจ
 * และไม่แตะพื้นหลังของกล่องอีกต่อไป · เลือกกล่องที่เปิดอยู่ด้วย :has() ซึ่งเบราว์เซอร์ที่
 * ไม่รองรับจะข้ามทั้งกฎไปเฉย ๆ — ได้กล่องลอยกลางจอแบบไม่มีฉากหลัง ยังใช้งานได้ครบ
 */
html.js body:has(.addbox[open])::after {
  content:""; position:fixed; inset:0; z-index:300;
  background:rgba(42,42,49,.45);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:fadeIn .18s ease;
}
/* กล่องลอยอยู่แล้ว หน้าหลังจึงไม่ควรเลื่อนตาม — กันสับสนว่ากำลังเลื่อนอะไรอยู่ */
html.js body:has(.addbox[open]) { overflow:hidden; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.addbox[open] > summary { position:sticky; top:0; z-index:1; }

/* บนโทรศัพท์ กล่องลอยกลางจอกดยาก — เปลี่ยนเป็นแผ่นเลื่อนขึ้นจากขอบล่าง
   ซึ่งนิ้วหัวแม่มือเอื้อมถึงทั้งแผ่น และเป็นท่าที่ผู้ใช้มือถือคุ้นอยู่แล้ว */
@media (max-width:640px) {
  html.js .addbox[open] {
    top:auto; bottom:0; left:0; transform:none;
    width:100%; max-width:none; max-height:88vh;
    border-radius:18px 18px 0 0;
    animation:sheetIn .22s cubic-bezier(.2,.8,.3,1);
  }
  html.js .addbox[open] > summary { border-radius:18px 18px 0 0; }
  /* ขีดสั้น ๆ กลางขอบบน บอกว่าแผ่นนี้เป็นของที่เลื่อน/ปิดได้ ตามภาษาของแอปบนมือถือ */
  html.js .addbox[open] > summary::before {
    content:""; display:block; width:38px; height:4px; border-radius:2px;
    background:var(--btn-line); margin:-4px auto 11px;
  }
}
@keyframes drawerIn {
  from { transform:translateX(-100%); }
  to   { transform:translateX(0); }
}
@keyframes sheetIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ---------- ป้ายสถานะ ---------- */
.chip { display:inline-block; padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap; transition:background-color var(--ease); }
.tag  { display:inline-block; padding:2px 9px; border-radius:7px; font-size:11.5px; font-weight:600; }

/**
 * โทนสีตามความหมาย — ใช้ได้ทั้งกับ .chip และ .tag
 * ทุกป้ายสถานะในระบบอ้างคลาสเหล่านี้ ไม่มีที่ไหนพ่นรหัสสีเป็น style="" อีก
 * โหมดมืดจึงเปลี่ยนตามได้ทั้งระบบด้วยการแก้ตัวแปรชุดเดียว
 */
.t-ok   { background:var(--ok-bg);     color:var(--green); }
.t-warn { background:var(--warn-bg);   color:var(--gold); }
.t-bad  { background:var(--danger-bg); color:var(--red); }
.t-info { background:var(--info-bg);   color:var(--blue); }
.t-mute { background:var(--paper);     color:var(--muted); }
:root[data-theme="dark"] .t-mute { background:rgba(255,255,255,.07); }

/* ---------- ตัวเลขสรุป ----------
   ถอดแบบจาก .stat-band ของระบบฐานข้อมูล — ตัวเลขตัวหนา มีขีดเหลืองทองคั่นใต้ตัวเลข
   ต่างกันตรงที่ของระบบนี้แต่ละใบเป็นลิงก์กรองตาราง จึงยังมีสถานะ hover ของตัวเอง */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:13px; }
.kpi {
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:15px 18px; text-decoration:none; color:inherit; display:block;
  box-shadow:0 1px 3px var(--shadow);
  transition:border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.kpi:hover { border-color:var(--brand); transform:translateY(-2px); box-shadow:0 .6rem 1.4rem rgba(164,25,44,.13); }
.kpi .lbl { font-size:12.5px; color:var(--muted); }
.kpi .num { font-family:var(--serif); font-size:28px; font-weight:700; margin-top:3px; line-height:1.15; }
.kpi .num::after {
  content:""; display:block; width:32px; height:3px; border-radius:2px;
  background:var(--accent); margin-top:9px;
}

/* ---------- แถบค้นหาและตัวกรอง ---------- */
.ltoolbar {
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  padding:13px 21px; border-bottom:1px solid var(--hair);
}
.ltoolbar select, .ltoolbar input[type=search] {
  font:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--line);
  border-radius:11px; background:var(--field); color:var(--ink); max-width:100%;
}
.ltoolbar select { width:auto; max-width:172px; text-overflow:ellipsis; }
/* ยอมให้ช่องค้นหาแคบลงได้มากกว่าเดิม — หน้าทะเบียนการประชุมและส่วนงานวางแถบนี้
   ในคอลัมน์กว้างครึ่งจอ ถ้าตั้งขั้นต่ำไว้สูงแถบจะตัดบรรทัดจนปุ่ม "แสดงผลลัพธ์" หล่นไปอยู่แถวล่าง */
.lsearch { position:relative; flex:1 1 170px; min-width:124px; max-width:320px; }
.lsearch input { width:100%; }

/* ---------- ตัวกรองแบบพิมพ์ค้นหา + เลือกได้หลายรายการ ----------
   ใช้ <details> จึงกดเปิดปิดและติ๊กเลือกได้แม้ปิด JavaScript
   ปิด JS ก็ยังกรองได้ครบ เพียงแต่ช่องพิมพ์ค้นหาจะไม่กรองรายการให้สด ๆ */
.lfilter { position:relative; }
.lfilter > summary {
  list-style:none; cursor:pointer; display:block;
  font-size:13px; padding:8px 14px; border:1px solid var(--line); border-radius:11px;
  background:var(--btn-bg); white-space:nowrap;
  transition:border-color var(--ease), background-color var(--ease), color var(--ease), transform .1s ease;
}
/* flex อยู่ชั้นใน — display:flex บน <summary> ทำให้กดเปิดปิดไม่ได้บน Safari ก่อน 16.4 */
.lfilter > summary > .row { display:flex; align-items:center; gap:7px; }
.lfilter > summary::-webkit-details-marker { display:none; }
.lfilter > summary:hover { border-color:var(--brand); }
.lfilter .fl { color:var(--faint); flex:none; min-width:0; }
.lfilter .fv { font-weight:600; min-width:0; max-width:11ch; overflow:hidden; text-overflow:ellipsis; }
.lfilter .fc { font-size:9px; opacity:.55; margin-left:auto; flex:none; }
.lfilter.on > summary { border-color:var(--brand); background:var(--brand-subtle); }
.lfilter.on .fl, .lfilter.on .fv { color:var(--brand-ink); }

.lfilter .pop {
  position:absolute; z-index:20; top:calc(100% + 5px); left:0;
  min-width:250px; max-width:min(330px,86vw); padding:9px;
  background:var(--pop); border:1px solid var(--line); border-radius:11px;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}
/* สองตัวขวาสุดกางไปทางซ้าย มิฉะนั้นกล่องทะลุขอบจอบนโน้ตบุ๊ก 1366 */
.ltoolbar .lfilter:nth-last-of-type(-n+2) > .pop { left:auto; right:0; }
.lfilter .fsearch { width:100%; font-size:13px; padding:7px 9px; margin-bottom:7px; }
.lfilter .opts { max-height:242px; overflow-y:auto; display:flex; flex-direction:column; }
.lfilter .opts label {
  display:flex; align-items:center; gap:9px; padding:6px 7px; border-radius:5px;
  font-size:13px; line-height:1.5; cursor:pointer;
}
/* จำเป็น — กฎ display:flex ข้างบนเป็นของผู้เขียน จึงชนะ [hidden] ของเบราว์เซอร์
   ถ้าไม่มีบรรทัดนี้ การพิมพ์คัดรายการจะไม่ซ่อนอะไรเลย */
.lfilter .opts label[hidden] { display:none; }
.lfilter .opts label:hover { background:var(--brand-subtle); }
.lfilter .opts input[type=checkbox] { width:auto; flex:none; margin:0; accent-color:var(--brand); }
.lfilter .nohit { padding:12px 7px; font-size:12.5px; color:var(--faint); text-align:center; }
.lfilter .popfoot {
  display:flex; align-items:center; gap:9px; margin-top:8px;
  padding-top:8px; border-top:1px solid var(--hair);
}
.lfilter .popcount { font-size:12px; color:var(--faint); }
.lbtn.pri { background:var(--brand); border-color:var(--brand); color:#fff; }
.lbtn.pri:hover { background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
/* จุดแดง = ติ๊กไว้แล้วแต่ยังไม่ได้กด "ใช้ตัวกรองนี้" — กัน "ติ๊กแล้วตารางไม่เปลี่ยน" */
.lfilter.dirty > summary::after { content:"●"; color:var(--brand-ink); font-size:10px; }

/* บรรทัดสรุปเงื่อนไข เห็นเฉพาะตอนสั่งพิมพ์ */
.lprint { display:none; }

/* กัน .pagehead ที่ sticky บังหัวเป้าหมายเมื่อกดลิงก์ #ไปยังฟอร์ม */
[id] { scroll-margin-top:96px; }
.lbtn { font:inherit; font-size:13px; font-weight:600; padding:8px 15px; border:1px solid var(--line); border-radius:10px; background:var(--btn-bg); cursor:pointer; }
.lbtn:hover { border-color:var(--brand-ink); color:var(--brand-ink); }
.lclear { font-size:12.5px; color:var(--red); text-decoration:none; font-weight:600; }
.lcount { margin-left:auto; font-size:12.5px; color:var(--faint); }
.lempty { padding:26px 21px; font-size:13.5px; color:var(--faint); text-align:center; }

/* ---------- ตาราง ---------- */
.scroll { overflow-x:auto; }
.dhead, .drow { display:grid; gap:12px; align-items:center; }
/* หัวตารางเป็นพื้นแดงจาง ตัวอักษรแดงเข้ม เหมือน .table thead th ของระบบฐานข้อมูล */
.dhead {
  padding:11px 21px; background:var(--brand-subtle); border-bottom:1px solid var(--line);
  font-size:12.5px; color:var(--brand-ink);
}
.dhead > div, .dhead > a { font-weight:600; }
/* หัวคอลัมน์ที่กดเรียงได้อยู่ในหัวตาราง จึงต้องเป็นสีเดียวกับหัวตาราง ไม่ใช่สีเทาของเนื้อ */
.dhead .lsort { color:var(--brand-ink); }
/* หัวตารางสีชมพูจางที่เป็นแถวแรกสุดของการ์ด ต้องโค้งมุมบนตามการ์ด ไม่งั้นสีจะโผล่พ้นมุมโค้ง
   (การ์ดไม่ได้ตั้ง overflow:hidden — เหตุผลอยู่ที่คอมเมนต์ของ .card) */
.card > .scroll:first-child > .dhead, .card > .dhead:first-child { border-radius:16px 16px 0 0; }
.drow { padding:14px 21px; border-bottom:1px solid var(--hair); }
.drow { transition:background-color var(--ease); }
.drow:hover { background:var(--brand-subtle); }
.drow:last-child { border-bottom:none; }
/* แถวสุดท้ายของการ์ด — พื้นตอนชี้ต้องโค้งตามมุมล่างของการ์ดด้วย ด้วยเหตุผลเดียวกับหัวตาราง */
.card > .scroll:last-child > .drow:last-child, .card > .drow:last-child { border-radius:0 0 16px 16px; }
.lsort { text-decoration:none; color:var(--muted); display:block; }
.lsort.on { color:var(--brand-ink); }
.lmark { font-size:9px; opacity:.5; }
.lsort.on .lmark { opacity:1; }

/* ---------- ฟอร์ม ---------- */
.field { display:block; margin-bottom:14px; }
.field > span { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.field .hint { display:block; font-size:12px; color:var(--faint); font-weight:400; margin-top:4px; line-height:1.6; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=search], select, textarea {
  width:100%; font:inherit; font-size:14px; padding:10px 11px;
  border:1.5px solid var(--btn-line); border-radius:11px; background:var(--field); color:var(--ink);
}
/* ช่องที่กำลังกรอกได้วงแดงจางรอบขอบ เหมือนช่องกรอกของระบบฐานข้อมูล
   เป็น box-shadow ไม่ใช่ border จึงไม่ดันเค้าโครงให้ขยับตอนโฟกัส */
input:focus, select:focus, textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(164,25,44,.18); }

/* วงโฟกัสของคีย์บอร์ด — ห้ามลบ ผู้ใช้ที่ไม่ใช้เมาส์ต้องรู้ว่าตอนนี้อยู่ตรงไหน
   โดยเฉพาะช่องติ๊กในตัวกรองที่ไม่มีเส้นขอบให้เปลี่ยนสี */
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.sidebar :focus-visible, .login .left :focus-visible { outline-color:var(--accent); }
.lfilter .opts label:focus-within { background:var(--brand-subtle); }
textarea { resize:vertical; line-height:1.75; min-height:96px; }
input[type=file] { width:100%; font-size:13px; padding:10px 11px; border:1.5px dashed var(--btn-line); border-radius:11px; background:var(--card-2); }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 15px; }

/* ---------- กล่องข้อความ ---------- */
/**
 * ป้องกันข้อความไทยยาวไม่มีช่องว่างดันเค้าโครงกว้างเกินจอ
 * ภาษาไทยเขียนติดกันไม่มีช่องว่างคั่นคำ เบราว์เซอร์บางตัวตัดคำไม่สม่ำเสมอ
 * โดยเฉพาะเมื่อมีคำอังกฤษ/ตัวเลข/สัญลักษณ์ปนอยู่ในประโยคเดียวกัน (เช่น "PDF" "2569" "·")
 * ผลคือกล่อง flex/grid ที่บรรจุข้อความนั้นคำนวณความกว้างขั้นต่ำสูงเกินจริง แล้วดันทั้งหน้า
 * ล้นขอบจอมือถือ — overflow-wrap:anywhere แก้ตรงจุดคำนวณนี้ (ต่างจาก break-word ซึ่งไม่ช่วย)
 * ใส่กว้าง ๆ ในจุดที่มักมีข้อความยาวแบบไม่คาดขนาดล่วงหน้า ปลอดภัยกว่าไล่แก้ทีละจุดที่เจอปัญหา
 */
.note, .lempty, .mnote, .hint { overflow-wrap:anywhere; }

.note { border-radius:11px; padding:12px 16px; font-size:13px; line-height:1.75; }
.note.info { background:var(--info-bg); border:1px solid var(--info-line); color:var(--blue); }
.note.warn { background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--gold); }
.note.ok   { background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--green); }
.note.bad  { background:var(--danger-bg); border:1px solid var(--danger-line); color:var(--red); }

/* ---------- แถบความคืบหน้า ---------- */
.bar { height:6px; border-radius:4px; background:var(--hair); overflow:hidden; min-width:70px; }
.bar > i { display:block; height:100%; background:var(--green); }

/* ---------- ข้อความแจ้งผล ---------- */
.toast {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--toast-bg); color:var(--toast-ink); padding:12px 15px 12px 21px; border-radius:11px;
  font-size:13.5px; box-shadow:0 8px 26px rgba(0,0,0,.22); z-index:60; max-width:90vw;
  display:flex; align-items:center; gap:14px;
}
.toast .x {
  color:var(--toast-ink); text-decoration:none; font-size:19px; line-height:1;
  padding:2px 7px; border-radius:5px; opacity:.75;
}
.toast .x:hover { background:rgba(255,255,255,.16); opacity:1; }

/* ---------- หน้าเข้าใช้งาน ----------
   แผงตราสัญลักษณ์ไล่สีแดงเข้ม→แดง→แดงอ่อน ชุดเดียวกับ .home-hero ของระบบฐานข้อมูล */
.login { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.login .left {
  background:linear-gradient(135deg,var(--brand-dark),var(--brand) 60%,var(--brand-light));
  color:#F6E4E7; padding:44px 46px; display:flex; flex-direction:column;
}
.login .left h1 { font-family:var(--serif); font-size:30px; color:#fff; margin:22px 0 0; line-height:1.4; font-weight:700; letter-spacing:-.01em; }
.login .left p { font-size:14.5px; line-height:1.9; max-width:44ch; }
.login .seal { width:80px; height:80px; display:block; }
.login .right { display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.login .box { width:100%; max-width:394px; }
.login .box h2 { font-family:var(--serif); font-size:22px; margin:0 0 6px; font-weight:600; }
.login .box .lead { font-size:13.5px; color:var(--muted); margin:0 0 22px; line-height:1.8; }
.login .alt { margin-top:18px; font-size:13px; text-align:center; color:var(--muted); }
/* ตัวอักษรบรรทัดล่างต้องสว่างพอบนพื้นไล่สีแดง — #F3E3E5 ได้ 4.7:1 แม้ตรงช่วงที่สีอ่อนที่สุด */
.login .foot { margin-top:auto; font-size:12px; color:#F3E3E5; line-height:1.9; border-top:1px solid rgba(255,255,255,.18); padding-top:19px; }

/* ---------- จอเล็ก ---------- */
@media (max-width:640px) {
  /* ตัวกรองกินเต็มบรรทัด กล่องจึงกางเต็มความกว้าง ไม่มีทางล้นขอบจอ */
  .lfilter { flex:1 1 100%; }
  .lfilter > summary { width:100%; }
  .lfilter .fv { max-width:none; }
  .lfilter .pop { left:0; right:0; min-width:0; max-width:none; }
  .lfilter .opts { max-height:52vh; }
  .lfilter .opts label { padding:10px 8px; }          /* เป้ากดนิ้วราว 40px */
  /* ต่ำกว่า 16px แล้ว Safari บน iOS จะซูมหน้าเข้าเองทุกครั้งที่แตะช่อง */
  .ltoolbar input[type=search], .lfilter .fsearch { font-size:16px; }
}

@media (max-width:900px) {
  .shell { grid-template-columns:1fr; }
  /**
   * min-width:0 คือบรรทัดที่ทำให้ทั้งเว็บพอดีหน้าจอโทรศัพท์
   *
   * แถบเมนูเป็นช่องของ grid ซึ่งโดยค่าเริ่มต้นมี min-width:auto — ย่อได้ไม่ต่ำกว่า
   * ความกว้างขั้นต่ำของเนื้อใน และเนื้อในคือเมนูหกรายการเรียงต่อกันราว 1000px
   * ช่อง grid จึงกว้าง 1000px ตาม ลากให้ทั้งหน้ากว้างตามไปด้วย (ไม่ใช่แค่แถบเมนู)
   * ผลคือทุกหน้าบนมือถือเลื่อนซ้ายขวาได้ ตัวหนังสือถูกตัดหายที่ขอบขวา
   */
  /**
   * z-index ของแถบเมนูต้องสูงกว่าฉากหลังของลิ้นชัก (200) — ห้ามลดลงมา
   *
   * ลิ้นชักเป็นลูกของแถบเมนู และแถบเมนูตั้ง position + z-index ไว้ จึงเปิด "บริบทการวางซ้อน"
   * ของตัวเอง — z-index:210 ที่ตั้งให้ลิ้นชักจึงมีผลแค่ภายในบริบทนั้น ไม่ได้เทียบกับฉากหลัง
   * ที่อยู่นอกบริบท ผลคือทั้งลิ้นชักและแถบบนจมอยู่ใต้ฉากหลัง เห็นเป็นจอเบลอทั้งจอที่กดอะไรไม่ได้
   */
  .sidebar {
    position:sticky; top:0; z-index:220; height:auto; min-width:0;
    flex-direction:row; align-items:center; gap:10px; padding:0 14px;
  }
  .navbox { flex:1 1 auto; min-width:0; }

  /* แถบบนสุด — ปุ่มขีดสามขีดกับชื่อระบบ กดที่ไหนก็เปิดเมนูได้ทั้งแถบ */
  .navbox > summary {
    display:flex; align-items:center; gap:11px; padding:13px 0;
    list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent; min-width:0;
  }
  .navbox > summary::-webkit-details-marker { display:none; }
  .burger {
    flex:none; display:inline-flex; padding:7px; border-radius:9px;
    border:1px solid rgba(255,255,255,.28); color:#fff;
  }
  .burger .ico { width:19px; height:19px; }
  .navbox[open] .burger { background:rgba(255,255,255,.14); }
  .navtopname {
    font-family:var(--serif); font-size:14.5px; font-weight:700; color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
  }

  /* ชื่อผู้ใช้กับปุ่มออกจากระบบย้ายมามุมขวาบน — บทบาทและส่วนงานซ่อนไว้ ดูได้ที่หน้าบัญชีของฉัน */
  .sidefoot {
    margin-left:auto; flex:none; display:flex; align-items:center; gap:9px;
    padding:0; border-top:none;
  }
  .sidefoot .me { min-width:0; max-width:34vw; }
  .sidefoot .me b { font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sidefoot .me span { display:none; }
  .sidefoot .ghost { margin-top:0; padding:8px; }
  .sidefoot .ghost span { display:none; }        /* เหลือแต่ไอคอน กันแถบบนล้น */

  /**
   * ลิ้นชักเมนู — เลื่อนเข้ามาจากขอบซ้าย ทับเนื้อหา ไม่ดันเลย์เอาต์
   * อยู่ใต้ html.js เพราะต้องมีสคริปต์คอยพับให้ตอนเปิดหน้าและปิดให้เมื่อกดนอกลิ้นชัก
   * ปิด JavaScript = ไม่มีลิ้นชัก เมนูกางเป็นแถวเลื่อนแนวนอนใต้แถบบนแทน ซึ่งใช้งานได้ครบ
   */
  html.js .navbox > .navpanel {
    position:fixed; top:0; left:0; bottom:0; z-index:210;
    width:min(284px,84vw); overflow-y:auto; overscroll-behavior:contain;
    background:linear-gradient(180deg,#1f1d22 0%,var(--brand-dark) 140%);
    box-shadow:0 0 40px rgba(0,0,0,.4);
    animation:drawerIn .2s cubic-bezier(.2,.8,.3,1);
  }
  html.js body:has(.navbox[open])::before {
    content:""; position:fixed; inset:0; z-index:200;
    background:rgba(42,42,49,.45);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    animation:fadeIn .2s ease;
  }
  html.js body:has(.navbox[open]) { overflow:hidden; }

  /* ไม่มีสคริปต์ = เมนูกางค้างอยู่ใต้แถบบน เรียงเป็นแถวเลื่อนแนวนอน */
  html:not(.js) .navbox > summary { display:none; }
  html:not(.js) .sidebar { flex-wrap:wrap; }
  html:not(.js) .navpanel { flex:1 1 100%; }
  html:not(.js) .brand { display:none; }
  html:not(.js) nav {
    flex-direction:row; overflow-x:auto; padding:9px 0; gap:6px;
    scroll-snap-type:x proximity; scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  }
  html:not(.js) nav a { white-space:nowrap; flex:none; scroll-snap-align:center; }
  nav a:hover { transform:none; }   /* ขยับตอนชี้ไม่มีความหมายบนจอสัมผัส */
  nav a { padding:11px 13px; }      /* เป้ากดสูงขึ้นให้พอดีนิ้ว */
  .topstrip { display:none; }
  .pagehead { position:static; padding:15px 17px; }
  .wrap { padding:15px 17px 48px; }
  .login { grid-template-columns:1fr; }
  .login .left { padding:28px 24px; }
  .login .left h1 { font-size:23px; }
  .login .left .hidesm { display:none; }

  /* ตารางกลายเป็นการ์ดเรียงลง ไม่ต้องเลื่อนซ้ายขวา */
  .scroll { overflow-x:visible; }
  .dhead { display:none; }
  .drow {
    grid-template-columns:1fr !important; min-width:0 !important;
    gap:7px; padding:15px 17px; border-bottom:8px solid var(--paper);
  }
  .drow > * { min-width:0 !important; }
  .drow .lbl-sm { display:block; font-size:11.5px; color:var(--faint); }
  /* ป้ายชื่อคอลัมน์กับค่าอยู่บรรทัดเดียวกัน คอลัมน์ป้ายกว้างเท่ากันทุกแถว
     ตาจึงกวาดลงตรง ๆ ได้เหมือนอ่านตาราง แทนที่จะสลับป้าย-ค่าคนละบรรทัดจนแถวสูงเป็นสองเท่า
     (ท่าเดียวกับ .table-mobile td::before ของระบบฐานข้อมูล)
     เลือกเฉพาะช่องที่มีป้ายจริง ช่องอื่นเช่นแถบความคืบหน้าหรือป้ายสถานะจึงไม่ถูกจับยัดเป็นแถว */
  .drow > div:has(> .lbl-sm) { display:flex; gap:10px; align-items:baseline; }
  .drow > div:has(> .lbl-sm) > .lbl-sm { flex:none; width:92px; }

  /* แถวกลายเป็นการ์ดแล้ว ปุ่มจัดการจึงไม่ควรลอยชิดขวาอยู่คนเดียว —
     ย้ายมาชิดซ้ายใต้เส้นคั่น และขยายเป็น 44px ตามขนาดเป้าสัมผัสที่ iOS/Android แนะนำ */
  .drow .rowacts {
    justify-content:flex-start; gap:9px;
    padding-top:10px; margin-top:3px; border-top:1px solid var(--hair);
  }
  .drow .rowacts .btn.ico { min-width:44px; min-height:44px; justify-content:center; }

  /* หัวข้อทะเบียนกับปุ่มเพิ่ม — ปุ่มลงมาเต็มบรรทัดของตัวเอง กดง่ายกว่าเบียดท้ายหัวข้อ */
  .reghead { gap:7px; }
  .reghead .addbox.compact { margin-left:0; flex:1 1 100%; }
  .reghead .addbox.compact:not([open]) > summary { display:flex; width:100%; justify-content:center; padding:11px 16px; }
}
@media (min-width:901px) { .lbl-sm { display:none; } }

/* ---------- สั่งพิมพ์ ---------- */
/* ---------- แถวบัญชีผู้ใช้ ---------- */
/* แถวเดิมอัดสี่คอลัมน์ข้อความขนาดใกล้กันไว้ติดกัน ตากวาดแล้วแยกไม่ออกว่าอะไรเป็นอะไร
   ให้ที่หายใจมากขึ้น แล้วแยกลำดับความสำคัญด้วยขนาดและน้ำหนักแทนการใส่เส้น */
/* เฉพาะจอกว้าง — ต่ำกว่า 901px ตารางกลายเป็นการ์ดเรียงลง ระยะห่างมาจากกฎของ .drow
   กฎนี้อยู่หลัง @media ของจอแคบในไฟล์ ถ้าไม่ล้อมด้วยเงื่อนไขจะไปทับค่าของจอแคบ */
@media (min-width:901px) {
  .prow { padding:15px 21px; gap:18px; align-items:center; }
}

/* วงกลมอักษรแรก — หลักให้สายตาจับต้นแถวเวลาไล่หาชื่อในรายการยาว */
.pwho { display:flex; align-items:center; gap:12px; min-width:0; }
.pav {
  flex:none; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:17px; font-weight:600;
  color:var(--brand-ink); background:var(--brand-subtle); border:1px solid rgba(164,25,44,.25);
}
.pnm { min-width:0; display:block; }
.pnm .n { display:block; font-size:14.5px; font-weight:600; line-height:1.45; overflow-wrap:anywhere; }
.pnm .m {
  display:block; font-size:12.5px; color:var(--faint); line-height:1.5;
  margin-top:2px; overflow-wrap:anywhere;
}
.youtag {
  display:inline-block; margin-left:7px; padding:1px 7px; border-radius:10px;
  font-size:11px; font-weight:600; color:var(--brand-ink); background:var(--brand-subtle);
  vertical-align:middle;
}
.pcell { min-width:0; font-size:13.5px; }
.punit { color:var(--muted); overflow-wrap:anywhere; }
.pnone { color:var(--faint); font-style:italic; }

/* บทบาทเป็นป้ายจาง ๆ — อ่านเป็นหมวดหมู่ได้ทันทีโดยไม่แย่งสายตาไปจากชื่อ
   r0/r1/r2 เรียงตามค่าคงที่ ROLES: ผู้ประสานงานส่วนงาน · เจ้าหน้าที่สภาฯ · ผู้ดูแลระบบ */
.prole {
  display:inline-block; padding:3px 10px; border-radius:14px;
  font-size:12.5px; line-height:1.5; white-space:nowrap;
  background:var(--paper); color:var(--muted); border:1px solid var(--hair);
}
.prole.r1 { background:var(--edit-bg); color:var(--blue);   border-color:var(--edit-line); }
.prole.r2 { background:var(--brand-subtle); color:var(--brand-ink); border-color:rgba(164,25,44,.25); }
.pcode { display:block; font-size:11.5px; color:var(--gold); margin-top:5px; }
.pcode::before { content:"● "; font-size:8px; vertical-align:middle; }

/* บัญชีที่ถูกระงับ — ใช้ขีดข้างแทนการย้อมพื้นทั้งแถว ซึ่งกลืนกับแถบ hover จนดูเลอะ
   ต้องเขียน :hover ของตัวเองด้วย ไม่งั้นกฎนี้ทับ .drow:hover แล้วแถวที่ถูกระงับ
   จะเป็นแถวเดียวในตารางที่ไม่ขยับตอนเอาเมาส์ชี้ ดูเหมือนกดไม่ได้ */
.prow.susp { background:var(--susp-bg); box-shadow:inset 3px 0 0 var(--red); }
.prow.susp:hover { background:var(--susp-bg-h); }
.prow.susp .pav { color:var(--red); background:var(--danger-bg); border-color:var(--danger-line); }
.prow.susp .pnm .n { color:var(--red); }
.prow.me { box-shadow:inset 3px 0 0 var(--brand); }

/* ---------- หน้าบัญชีของฉัน ---------- */
/* เดิมข้อมูลหกอย่างเรียงเป็นบรรทัดป้าย–ค่าขนาดเท่ากันหมด อัดกันอยู่ในกล่องเดียว
   แยกเป็นสองก้อน — ตัวตน (ชื่อ อีเมล บทบาท ส่วนงาน) กับข้อมูลที่เปลี่ยนไปเรื่อย ๆ */
.acct { display:flex; align-items:center; gap:20px; padding:26px 24px; flex-wrap:wrap; }
.avbig {
  flex:none; width:66px; height:66px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:29px; font-weight:600;
  color:var(--brand-ink); background:var(--brand-subtle); border:1px solid rgba(164,25,44,.25);
}
.acct .who { min-width:0; }
.acct .who h2 {
  font-family:var(--serif); font-size:22px; font-weight:600; margin:0; line-height:1.35;
}
.acct .who .mail { font-size:13.5px; color:var(--faint); margin-top:3px; overflow-wrap:anywhere; }
.acct .who .chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:11px; }
.uchip {
  display:inline-block; padding:3px 11px; border-radius:14px;
  font-size:12.5px; line-height:1.5;
  background:var(--paper); color:var(--muted); border:1px solid var(--hair);
}
.uchip.none { color:var(--faint); font-style:italic; }

.acctmeta {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-top:1px solid var(--hair);
}
.acctmeta .mi { padding:16px 24px; }
/* เส้นคั่นระหว่างช่อง — ใช้เงาแทน border เพราะตอนขึ้นบรรทัดใหม่บนจอแคบ
   border ซ้ายจะค้างเป็นขีดลอยอยู่ต้นบรรทัด */
.acctmeta .mi + .mi { box-shadow:inset 1px 0 0 var(--hair); }
.acctmeta .k { display:block; font-size:12.5px; color:var(--faint); }
.acctmeta .v { display:block; font-size:15px; font-weight:600; margin-top:4px; line-height:1.5; }
.acctmeta .v.none { font-size:13.5px; font-weight:400; color:var(--faint); font-style:italic; }

@media (max-width:900px) {
  .acct { padding:20px 17px; gap:15px; }
  .avbig { width:54px; height:54px; font-size:24px; }
  .acct .who h2 { font-size:19px; }
  .acctmeta .mi { padding:14px 17px; }
  .acctmeta .mi + .mi { box-shadow:inset 0 1px 0 var(--hair); }
}

/* ---------- กล่องยืนยัน (แทน window.confirm ของเบราว์เซอร์) ---------- */
.confirmDialog {
  border:none; border-radius:16px; padding:0;
  width:calc(100vw - 40px); max-width:400px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  animation:dialogIn .18s cubic-bezier(.2,.8,.3,1);
}
/* [open] ของ <dialog> เป็น display:block ตามค่าเริ่มต้นของเบราว์เซอร์ ไม่ใช่ grid/flex
   จึงจัดเนื้อในด้วย .cfbody แทนที่จะพึ่งดีฟอลต์ของ dialog เอง
   เบลอฉากหลังให้โฟกัสอยู่ที่กล่องยืนยัน — เบราว์เซอร์ที่ไม่รู้จัก backdrop-filter
   จะข้ามบรรทัดนั้นไปเฉย ๆ ยังเห็นสีทึบจางด้านหลังตามปกติ ไม่มีอะไรพัง */
.confirmDialog::backdrop {
  background:rgba(42,42,49,.45);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.confirmDialog .cfbody { padding:26px 24px 22px; }
.confirmDialog .cficon {
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#EDF3F8; color:var(--blue); margin-bottom:14px;
}
.confirmDialog .cficon svg { width:22px; height:22px; }
/* คำสั่งทั่วไป (ออกรหัส ฯลฯ) แสดงไอคอนเครื่องหมายคำถาม · คำสั่งย้อนกลับยาก (ลบ ระงับ)
   แสดงไอคอนสามเหลี่ยมเตือนแทน สลับด้วยคลาสเดียวที่สคริปต์ใส่ให้ ไม่ต้องมี HTML สองชุด */
.confirmDialog .i-warn { display:none; }
.confirmDialog.danger .i-ask  { display:none; }
.confirmDialog.danger .i-warn { display:block; }
.confirmDialog.danger .cficon { background:#FBEDEB; color:var(--red); }
.confirmDialog .cfmsg p { margin:0 0 10px; font-size:14px; line-height:1.75; color:var(--ink); }
.confirmDialog .cfmsg p:last-child { margin-bottom:0; }
.confirmDialog .cfbtns { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; }
.confirmDialog .btn.pri.danger { background:var(--red); border-color:var(--red); }
.confirmDialog .btn.pri.danger:hover { background:#8E1E17; border-color:#8E1E17; }

@media (max-width:420px) {
  /* จอมือถือแคบ — ปุ่มเรียงซ้อนเต็มความกว้างแทนเบียดกันสองปุ่มในแถวเดียว
     ปุ่มยืนยันอยู่บนสุดเพราะเป็นการกระทำหลักที่นิ้วหัวแม่มือแตะถึงง่ายที่สุด */
  .confirmDialog { width:calc(100vw - 24px); }
  .confirmDialog .cfbody { padding:22px 18px 18px; }
  .confirmDialog .cfbtns { flex-direction:column-reverse; }
  .confirmDialog .cfbtns .btn { width:100%; text-align:center; padding:12px; }
}

/* ---------- เมนูคำสั่งประจำแถว ---------- */
/* คอลัมน์ "จัดการ" เดิมมีปุ่มห้าตัวเรียงกัน แต่ละแถวจึงตัดบรรทัดคนละแบบและสูงไม่เท่ากัน
   เหลือไว้แค่ปุ่มแก้ไขที่ใช้บ่อยที่สุด ที่เหลือย้ายเข้ามาในเมนูนี้ */
.rowacts { display:flex; gap:6px; justify-content:flex-end; align-items:center; }
.rowmenu { position:relative; flex:none; }
.rowmenu > summary {
  list-style:none; cursor:pointer; display:block;
  padding:5px 10px; border:1px solid var(--line); border-radius:8px; background:var(--btn-bg);
  font-size:14px; line-height:1.4; color:var(--muted);
  transition:border-color var(--ease), background-color var(--ease), color var(--ease), transform .1s ease;
}

/* กดสรุป/หัวข้อของกล่องพับ-กาง กล่องตัวกรอง เมนูประจำแถว ยุบเบา ๆ เหมือนปุ่มทั่วไป
   ให้ความรู้สึก "กดโดนจริง" สม่ำเสมอกันทุกจุดในเว็บ */
.lfilter > summary:active, .addbox > summary:active,
.rowmenu > summary:active { transform:scale(.98); }
.rowmenu > summary > .row { display:flex; align-items:center; justify-content:center; }
/* จุดสามจุดในปุ่มเมนูเขียนเป็น <svg> ที่มีแต่ viewBox ไม่มี width/height —
   ในกล่อง flex ตัวมันจึงยุบเหลือ 0 ทั้งกว้างและสูง ปุ่มออกมาเป็นเม็ดยาว ๆ ว่างเปล่า
   ต้องกำหนดขนาดให้ตรงนี้ ไม่ใช่ที่ไฟล์ view เพราะขนาดเป็นเรื่องของการตกแต่ง */
.rowmenu > summary svg { width:18px; height:9px; flex:none; }
.rowmenu > summary::-webkit-details-marker { display:none; }
.rowmenu > summary:hover { border-color:var(--brand-ink); color:var(--brand-ink); }
.rowmenu[open] > summary { border-color:var(--brand-ink); background:var(--brand-subtle); color:var(--brand-ink); }
.rowmenu .pop {
  /* ตำแหน่งเริ่มต้นสำหรับตอนปิด JavaScript — เปิด JavaScript แล้ว app.js จะยกไปวางแบบ
     position:fixed คำนวณจากปุ่มแทน เพื่อไม่ให้กล่องเลื่อนของตาราง (.scroll) ตัดขอบทิ้ง */
  position:absolute; z-index:100; top:calc(100% + 5px); right:0;
  width:236px; max-width:calc(100vw - 24px); padding:9px;
  background:var(--pop); border:1px solid var(--line); border-radius:11px;
  box-shadow:0 12px 30px rgba(0,0,0,.14); text-align:left;
  animation:popIn .12s ease;
}
@keyframes popIn {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}
/* สำหรับกล่องที่ลอยกลางจอ (โมดัล) — เข้าด้วยการขยายเบา ๆ พร้อมจาง ให้ความรู้สึก
   "ลอยเข้ามา" ต่างจากดรอปดาวน์ที่เลื่อนลงจากปุ่ม (popIn) ซึ่งมีทิศทางอ้างอิงจากปุ่มที่กด */
@keyframes modalIn {
  from { opacity:0; transform:translate(-50%,-50%) scale(.97); }
  to   { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes dialogIn {
  from { opacity:0; transform:scale(.97); }
  to   { opacity:1; transform:scale(1); }
}
/* post_button() ใส่ style="display:inline" ไว้ที่ <form> ตรง ๆ จึงต้องใช้ !important ทับ
   ไม่งั้นคำสั่งในเมนูเรียงต่อกันเป็นบรรทัดเดียวแทนที่จะเป็นรายการแนวตั้ง */
.rowmenu .pop form { display:block !important; }
.rowmenu .mlbl { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.rowmenu .mrow { display:flex; gap:6px; align-items:stretch; }
.rowmenu .mrow select { flex:1; font-size:12.5px; padding:6px 8px; }
.rowmenu .mrow .btn { flex:none; white-space:nowrap; }
.rowmenu .msep { height:1px; background:var(--hair); margin:9px 0; }
.rowmenu .mitem {
  display:flex; align-items:center; gap:9px;
  font:inherit; font-size:13px; text-align:left; width:100%;
  padding:8px 9px; margin:0; border:none; border-radius:5px; background:none;
  cursor:pointer; color:var(--ink);
}
.rowmenu .mitem .ico { color:var(--faint); }
.rowmenu .mitem.danger .ico { color:var(--red); }
.rowmenu .mitem:hover { background:var(--brand-subtle); }
.rowmenu .mitem.danger { color:var(--red); }
.rowmenu .mitem.danger:hover { background:var(--danger-bg); }
.rowmenu .mnote { font-size:12px; color:var(--faint); padding:7px 9px; line-height:1.6; }

@media print {
  .noprint, .sidebar, .ltoolbar, .toast, .topstrip { display:none !important; }
  .pagefoot { border-top:1px solid #ccc; color:#333; }
  /* ทะเบียนไม่พับเก็บอีกแล้ว (หน้าทะเบียนการประชุมและส่วนงานเปลี่ยนเป็นสองคอลัมน์แทน)
     ฉบับพิมพ์จึงได้เนื้อทะเบียนครบเองโดยไม่ต้องสั่งกางกล่องก่อน
     สองคอลัมน์บนกระดาษ A4 จะแคบเกินไป พิมพ์ออกมาเรียงลงเป็นคอลัมน์เดียวตามเดิม */
  .setupgrid { grid-template-columns:1fr !important; }
  .rowsbox { max-height:none !important; overflow:visible !important; }
  .reghead { padding:0; }
  .lprint { display:block; padding:9px 21px; font-size:11px; color:#333; border-bottom:1px solid #ccc; }
  body { background:#fff; font-size:12px; }
  .shell { grid-template-columns:1fr; }
  .card { border-color:#ccc; break-inside:avoid; box-shadow:none; }
  /* ความกว้างคอลัมน์มาจาก inline style ซึ่งตั้งไว้สำหรับจอ ไม่ใช่กระดาษ A4 (~700px)
     ปล่อยให้กว้างตามเนื้อหาแทน จึงไม่ถูกบีบอัดจนอ่านไม่ออก — ต้องใช้ !important เพราะทับ inline */
  .drow, .dhead {
    min-width:0 !important; grid-template-columns:none !important;
    grid-auto-flow:column; grid-auto-columns:minmax(0,auto);
    font-size:10.5px; gap:8px; padding:7px 12px;
  }
  .drow > *, .dhead > * { min-width:0 !important; overflow-wrap:anywhere; }
  .bar { display:none; }
  a { color:inherit; text-decoration:none; }
}