/* ==========================================================================
   app.css — CSS ทั้งหมดของระบบ itsupport รวมอยู่ที่นี่ที่เดียว

   กติกา: ของใหม่ให้เขียนที่ไฟล์นี้
          ห้ามเพิ่ม <style> block ในไฟล์ PHP และห้ามเพิ่ม style="..." ใหม่
          เพราะก่อนหน้านี้ inline style กระจายอยู่ 420 จุด การ์ดชุดเดียวกัน
          ซ้ำ 48 ครั้ง เปลี่ยนสีทีต้องไล่แก้ทีละที่

   โหลดที่ head.php และ head_first.php ต่อท้าย css/w3.css เสมอ
   (ต้องอยู่หลัง w3.css กฎในไฟล์นี้ถึงจะชนะ)

   ลำดับในไฟล์
     1. Design token   ตัวแปรสี
     2. Base           กฎกับแท็กพื้นฐาน
     3. Layout         โครงหน้า
     4. Component      ชิ้นส่วนที่ใช้ซ้ำ
     5. Utility        คลาสช่วยจัดวาง
     6. สถานะในตาราง    สีบอกสถานะ
     7. เศษเก่า         คลาสที่ยังอยู่ใน markup แต่ไม่มีนิยาม
   ========================================================================== */


/* ==========================================================================
   1. Design token — ย้ายมาจาก <style> ใน head.php
   ========================================================================== */
:root {
  --awl-colorkey1: #f5f7fa;
  /* พื้นหลังหน้า */
  --awl-colorkey2: #9379C2;
  /* ม่วงเข้ม ใช้กับหัวเรื่อง */
  --awl-colorkey3: #b49ad3;
  /* ม่วงอ่อน ใช้กับปุ่ม */
  --awl-colorkey4: #303030;
  --awl-colorkey5: #6b3fde;
  /* ม่วงสด ใช้ตอน hover ปุ่ม */
  --awl-colorkey6: #eaa6e4;
  --awl-colorkey7: #e7d8f7;
  /* พื้นหัวตาราง เส้นขอบ */
  --awl-colorkey8: #3b2358;
  /* ตัวอักษรหัวตาราง */
  --awl-colorkey9: #bb9ee1;
  --awl-colorkey10: #f1f1f4;
  --awl-colorkey11: #3c3c3c;
  --awl-colorkey12: #FFFFFF;
  /* พื้นการ์ด */
  --awl-colorkey13: #ffffffff 0px 0px 0px 1px;
  /* เงาการ์ด (ใช้กับ box-shadow) */
  --awl-colorkey14: 8px;

  /* ---- สีพื้นของปุ่ม ----
     แยกออกมาเป็นตัวแปรของตัวเอง ไม่ใช้ --awl-colorkey2 ร่วมกับหัวเรื่อง
     เพราะสีที่อ่านออกตอนเป็น "ตัวอักษรม่วงบนพื้นขาว" กับตอนเป็น
     "ตัวอักษรขาวบนพื้นม่วง" ไม่ใช่สีเดียวกัน

     ทุกตัวในบล็อกนี้วัดกับตัวอักษรสีขาวแล้วผ่าน 4.5:1 และ hover เข้มกว่าเสมอ
     ชุดก่อนหน้าเป็นโทนสด (#5df0a9 #ff2f1c #ff7b52) ซึ่งวัดได้ 1.45 / 3.70 / 2.56
     ตัวอักษรขาวบนเขียวมิ้นต์แทบมองไม่เห็น ชุดนี้ลดความสว่างลงแต่คงโทนเดิมไว้ */
  --awl-btn-bg:            #8163b5;  /* 4.79 */
  --awl-btn-bg-hover:      #6f4fa8;  /* 6.25 */
  /* สองค่านี้เคยถูกเปลี่ยนไปเป็น #00A20E กับ #FF7B0F ใน be9434c โดยหยิบสีจาก
     ภาพที่เจ้าของโปรเจกต์ให้มา ซึ่งภาพนั้นกำหนด "สีพื้นของป้ายสถานะ" ที่มี
     ตัวอักษรเข้มทับ ไม่ใช่สีพื้นปุ่มที่มีตัวอักษรขาวทับ
     วัดกับตัวอักษรขาวแล้วได้ 3.40 กับ 2.60 ตกเกณฑ์ 4.5 ของโปรเจกต์
     คืนค่าที่วัดผ่านแล้ว ส่วนป้ายสถานะยังใช้สีตามภาพเหมือนเดิม (--awl-st-*) */
  --awl-btn-ok:            #008A0C;  /* 4.53 */
  --awl-btn-ok-hover:      #00730A;  /* 6.08 */
  --awl-btn-danger:        #E50000;  /* 4.85 */
  --awl-btn-danger-hover:  #C90000;  /* 6.03 */
  --awl-btn-warn:          #C15700;  /* 4.53 */
  --awl-btn-warn-hover:    #A24900;  /* 6.02 */

  /* ---- สีป้ายสถานะการอนุมัติ ----
     มาจากภาพที่ออกแบบไว้ 6 สถานะ แต่ละตัวมีสีตัวอักษรคู่กับสีพื้นของตัวเอง

     สีพื้นใช้ตามภาพทุกตัว ส่วนสีตัวอักษรของ 4 ตัวถูกทำให้เข้มขึ้น เพราะค่าที่มา
     ในภาพวัดกับพื้นของตัวเองได้ 2.19 / 2.08 / 3.17 / 4.09 ซึ่งต่ำกว่าเกณฑ์ 4.5
     ที่ระบบนี้ยึดมาตลอด ค่าใหม่คงเฉดเดิมไว้ เปลี่ยนแค่ความสว่าง จึงยังเป็นโทนเดียวกับภาพ

     ค่าในคอมเมนต์คือความต่างสีระหว่างตัวอักษรกับพื้นในบรรทัดเดียวกัน */
  --awl-st-waitsup-fg:  #9D6100;  /* รอหัวหน้า    4.54 — ภาพให้มา #EB9100 = 2.19 */
  --awl-st-waitsup-bg:  #FFF3BE;
  --awl-st-waitdm-fg:   #612989;  /* รอผู้บริหาร  7.75 — ตามภาพ */
  --awl-st-waitdm-bg:   #F1E1FF;
  --awl-st-returned-fg: #A94C00;  /* ถูกตีกลับ    4.52 — ภาพให้มา #FF7B0F = 2.08 */
  --awl-st-returned-bg: #FFE1C5;
  --awl-st-reject-fg:   #D80000;  /* ไม่อนุมัติ   4.52 — ภาพให้มา #E50000 = 4.09 */
  --awl-st-reject-bg:   #FFE6E6;
  --awl-st-ok-fg:       #00840B;  /* อนุมัติแล้ว  4.54 — ภาพให้มา #00A20E = 3.17 */
  --awl-st-ok-bg:       #DFFFE3;
  --awl-st-cancel-fg:   #FFFFFF;  /* ยกเลิก      11.20 — ตามภาพ */
  --awl-st-cancel-bg:   #3B3B3B;

  /* ---- สีตัวอักษร ----
     --awl-colorkey2 (#9379C2) เป็น "สีตัวอักษร" ไม่ผ่านเกณฑ์ ได้แค่ 3.65 บนพื้นขาว
     และ 2.70 บนพื้นม่วงอ่อน (--awl-colorkey7) ที่ใช้เป็นพื้นของป้ายและปุ่มเล็ก
     ไล่วัดทุก element ที่มีข้อความบน 7 หน้า เจอ 27 แบบที่ต่ำกว่า 4.5 เกือบทั้งหมดมาจากตัวนี้

     ตัวแปรสองตัวนี้ใช้กับ color: เท่านั้น ส่วน --awl-colorkey2 คงค่าเดิมไว้
     เพราะยังใช้เป็นพื้นและเส้นขอบอยู่ ซึ่งคนละเกณฑ์กัน */
  --awl-text-brand: #654a9c;  /* 6.97 บนขาว · 5.17 บนม่วงอ่อน · 6.49 บนพื้นหน้า */
  --awl-text-muted: #6b6b6b;  /* 5.33 — แทนเทา #777 #888 #999 #8b8598 ที่ปนกันอยู่ */

  /* ---- ขนาดตัวอักษร ----
     เดิมกระจายอยู่ 11 ขนาด ตั้งแต่ 10px ถึง 30px ปนกันทั้ง CSS และ style ฝังในแท็ก
     ตัวเล็กสุด 10-11px อ่านยากมาก โดยเฉพาะภาษาไทยที่มีสระบนสระล่าง
     ตอนนี้เหลือ 6 ระดับ เล็กสุด 14px แล้วไล่ขึ้นเป็นลำดับ
     อยากปรับทั้งระบบให้แก้ที่ตรงนี้ที่เดียว */
  --fs-sm: 14px;   /* เล็กสุด — คำอธิบาย ป้ายสถานะ ชื่อไฟล์ ฟุตเตอร์ ป้ายนับงาน */
  --fs-md: 15px;   /* ปกติ — ช่องกรอก ตาราง ปุ่ม เมนู */
  --fs-lg: 17px;   /* เน้น — ตัวเลขในบรรทัดสรุป ข้อความนำช่อง */
  --fs-xl: 20px;   /* หัวข้อในแถบหัวเรื่อง */
  --fs-2xl: 24px;  /* หัวข้อหน้า */
  --fs-3xl: 30px;  /* ตัวเลขใหญ่ในการ์ดสรุป */
  /* ความมนของปุ่ม */
}


/* ==========================================================================
   2. Base — ย้ายมาจาก <style> ใน head.php
   ========================================================================== */

/* บังคับฟอนต์ Prompt ทั้งเว็บ เพราะ w3.css ตั้งฟอนต์ของตัวเองไว้หลายจุด */
* {
  font-family: "Prompt", sans-serif !important;
}

body {
  background-color: var(--awl-colorkey1) !important;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: var(--awl-colorkey7);
}

th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--awl-colorkey3);
  text-align: center;
  color: var(--awl-colorkey8);
  font-weight: 600;
}

td {
  padding: 8px;
  border-bottom: 1px solid var(--awl-colorkey7);
  vertical-align: middle;
}

/* แถวสุดท้ายไม่ต้องมีเส้นใต้ จะได้ไม่ซ้อนกับขอบของกล่องครอบ */
tbody tr:last-child td {
  border-bottom: none;
}

/* ไฮไลต์แถวตอนชี้เมาส์ กวาดสายตาตามแถวง่ายขึ้นเวลาตารางกว้าง */
tbody tr:hover td {
  background-color: #faf8fd;
}

/* ช่องสถานะจัดกลาง — ใช้กับ <td> ที่พิมพ์จากฟังก์ชันกลางใน inc_ticket.php */
/* ป้ายกับปุ่มในช่องเดียวกันเรียงกลาง ไม่ให้ตัดบรรทัดกลางคำ */
.awl-td-center {
  white-space: nowrap;
  text-align: center;
}

/* จัดช่องข้อมูลให้ตรงกับหัวตารางของตัวเอง

   th ตั้ง text-align: center ไว้ตั้งแต่ต้น แต่ td ไม่เคยตั้ง text-align เลย
   จึงเป็น left ตามค่าเริ่มต้นของเบราว์เซอร์ คอลัมน์สั้น ๆ อย่างเลขที่ ประเภท
   และวันที่ จึงลอยไปคนละแนวกับหัวข้อของตัวเอง เห็นชัดมากตอนคอลัมน์กว้าง

   ไม่ตั้ง text-align: center ให้ td ทั้งระบบ เพราะคอลัมน์ที่เป็นข้อความยาว
   จัดกลางแล้วอ่านยากกว่าเดิม ให้ติด .awl-center เป็นคอลัมน์ ๆ ไปแทน
   ส่วนคอลัมน์ข้อความยาวให้ติด .awl-left ทั้งที่หัวและที่ช่อง จะได้ตรงกัน

   ใช้ .awl-center / .awl-left ที่มีอยู่แล้วในบล็อก utility ไม่ได้ทำคลาสใหม่ */


/* ==========================================================================
   3. Layout — เดิมประกาศซ้ำทั้งใน head.php และ head_first.php
   ========================================================================== */
#inner {
  display: table;
  margin: 0 auto;
  border: 0px solid black;
}

#outer {
  border: 0px solid red;
  width: 100%;
}


/* ==========================================================================
   4. Component
   ========================================================================== */

/* ปุ่มหลักของระบบ — ย้ายมาจาก head.php */
/* ปุ่มหลัก — เดิมพื้นม่วงอ่อน #b49ad3 กับตัวอักษรขาว วัดค่าความต่างสีได้ 2.47:1
   ต่ำกว่าเกณฑ์อ่านสบาย 4.5 มาก เปลี่ยนเป็นม่วงเข้มได้ราว 11:1 */
.awl-btn {
  display: inline-block;
  background-color: var(--awl-btn-bg);
  color: #fff;
  padding: 9px 20px;
  border: 1px solid transparent;
  border-radius: var(--awl-colorkey14);
  font-size: var(--fs-md);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}

#submitTicketBtn {
  position: relative;
  top: 50px;
  /* เลื่อนลง/ขึ้น ปรับค่าตามต้องการ */
  left: 50px;
  /* เลื่อนซ้าย/ขวา */
}

.awl-btn:hover {
  background-color: var(--awl-btn-bg-hover);
  color: #fff;
}

/* ปุ่มตามความหมาย ใช้โทนเดียวกับป้ายสถานะในตาราง */
/* สีตามความหมายของปุ่ม ลดความจัดลงจากเดิมที่เป็นโทนไฟจราจร
   (#1e7e34 เขียวสด #c0392b แดงสด #8a6100 น้ำตาลเข้ม) ซึ่งตัดกับโทนม่วงอ่อน
   ของระบบจนดูไม่เข้าชุดกัน ชุดใหม่ลดความอิ่มสีและทำให้น้ำหนักทั้งสามใกล้กัน
   ยังคงค่าความต่างสีกับตัวอักษรขาวเกิน 4.5:1 ทุกตัว */
.awl-btn--ok {
  background-color: var(--awl-btn-ok);
}

.awl-btn--ok:hover {
  background-color: var(--awl-btn-ok-hover);
}

.awl-btn--danger {
  background-color: var(--awl-btn-danger);
}

.awl-btn--danger:hover {
  background-color: var(--awl-btn-danger-hover);
}

.awl-btn--warn {
  background-color: var(--awl-btn-warn);
}

.awl-btn--warn:hover {
  background-color: var(--awl-btn-warn-hover);
}

/* กลุ่มปุ่มบนหัวหน้าอนุมัติ ให้ห่อบรรทัดได้ตอนจอแคบ */
.awl-btnbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* การ์ดพื้นขาวมุมมน — เดิมเขียน inline ซ้ำกัน 48 จุดใน 20 กว่าไฟล์
   .awl-card              แบบมาตรฐาน (เดิมซ้ำ 33 ครั้ง)
   .awl-card--sm          padding เล็ก ใช้กับป้ายเลขที่อ้างอิง (เดิม 8 ครั้ง)
   .awl-card--tall        การ์ดที่ดันความสูงขั้นต่ำ (เดิม 7 ครั้ง) */
.awl-card {
  background-color: var(--awl-colorkey12);
  padding: 20px 10px;
  border-radius: 14px;
  box-shadow: var(--awl-colorkey13);
  margin-top: 14px;
  margin-bottom: 14px;
}

.awl-card--sm {
  padding: 8px;
}

.awl-card--tall {
  min-height: 70vh;
}

/* หัวเรื่องใหญ่กลางหน้า — เดิมเขียน inline ซ้ำ 7 จุด */
.awl-title {
  font-size: var(--fs-2xl);
  color: var(--awl-text-brand);
}

/* --------------------------------------------------------------------------
   แถบหัวเรื่องของหน้าอนุมัติ/แก้ไข — ชื่อเรื่องซ้าย ปุ่มสั่งงานขวา

   เดิม 9 หน้าใช้ w3-panel ระบายพื้นเขียวอ่อนหรือเทา มุมเหลี่ยม แล้ววางปุ่ม
   ด้วย w3-half + w3-right ทำให้ปุ่มลอยไปติดขอบขวาและติดกันเองไม่มีช่องไฟ
   ตอนนี้ใช้ flex กล่องเดียว ได้ระยะห่างสม่ำเสมอและมุมมนเข้าชุดกับการ์ดอื่น
   -------------------------------------------------------------------------- */
.awl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* ไม่ให้ห่อบรรทัด เดิมพอปุ่มเยอะกลุ่มปุ่มจะตกลงไปบรรทัดล่างแล้วไปชิดซ้าย
     ไม่ได้อยู่ด้านหลังอย่างที่ควร ตอนนี้ปุ่มห่อกันเองข้างในกลุ่มแทน
     กลุ่มจึงอยู่ชิดขวาและอยู่กึ่งกลางแนวตั้งเทียบกับชื่อเรื่องเสมอ */
  flex-wrap: nowrap;
  gap: 12px;
  padding: 14px 20px;
  margin-bottom: 16px;
  background-color: #fff;
  border: 1px solid var(--awl-colorkey7);
  border-radius: 12px;
}

/* 2 หน้า (register_dmapprove, dm_return1) มีปุ่มเป็น submit ของฟอร์มที่คลุม
   ทั้งหน้า <form> จึงกลายเป็นลูกตัวเดียวของ .awl-head แล้วดูดชื่อเรื่องกับกลุ่มปุ่ม
   เข้าไปข้างใน flex เลยไม่มีผล ชื่อเรื่องกับปุ่มจึงวางซ้อนกันเป็นสองบรรทัดชิดซ้าย
   display:contents ทำให้ <form> ไม่สร้างกล่องของตัวเอง ลูกของมันขึ้นมาเป็น
   flex item ของ .awl-head โดยตรง ฟอร์มยังส่งข้อมูลได้เหมือนเดิมทุกอย่าง */
.awl-head > form {
  display: contents;
}

.awl-head__title {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--awl-text-brand);
}

/* กลุ่มปุ่ม — gap เป็นตัวคุมช่องไฟ ไม่ต้องพึ่ง &nbsp; หรือ margin ของแต่ละปุ่ม */
.awl-head__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 8px;
}

.awl-head__actions .awl-btn {
  margin: 0;
}

/* จอแคบ ชื่อเรื่องอยู่บรรทัดบน ปุ่มเรียงเต็มความกว้างข้างล่าง จะได้กดง่าย */
@media screen and (max-width: 600px) {
  .awl-head {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .awl-head__actions .awl-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ป้ายกำกับช่องกรอกเหตุผล — เดิมชื่อ .bg / .bg1 ประกาศซ้ำใน
   register_dmapprove.php และ dm_return1.php
   คงชื่อเดิมไว้เพราะ markup อ้างอยู่ ไม่อยากแก้สองที่พร้อมกัน */
.bg {
  background-color: red;
}

.bg1 {
  background-color: yellow;
}


/* ==========================================================================
   5. Utility — เตรียมไว้แทน inline style ที่ยังเหลืออีกราว 180 จุด
   (margin:auto 68 ครั้ง · text-align:center 63 ครั้ง · width:90% 58 ครั้ง)
   ยังไม่ไล่แทนรวดเดียวเพราะพันอยู่กับ grid ของ w3.css เสี่ยงหน้าเพี้ยน
   ให้ทยอยใช้ตอนที่แต่ละหน้าถูกปรับหน้าตาจริง ๆ ซึ่งมีตาดูผลอยู่
   ========================================================================== */
.awl-mid {
  margin: auto;
}

.awl-center {
  text-align: center;
}

.awl-left {
  text-align: left;
}

.awl-w10 {
  width: 10%;
}

.awl-w90 {
  width: 90%;
}

.awl-w97 {
  width: 97%;
}


/* --------------------------------------------------------------------------
   ฟุตเตอร์ — ติดล่างสุดเสมอ

   หน้าที่เนื้อหาสั้น (เช่นค้นแล้วไม่เจอข้อมูล) เดิมฟุตเตอร์ลอยค้างกลางจอ
   วัดได้ว่าเหลือที่ว่างใต้มันถึง 442px บนจอสูง 900px

   ทำให้ <body> เป็น flex แนวตั้งแล้วให้ฟุตเตอร์กินที่ว่างที่เหลือด้วย
   margin-top:auto ผลคือเนื้อหาสั้นฟุตเตอร์ไปติดขอบล่าง เนื้อหายาวฟุตเตอร์
   ต่อท้ายเนื้อหาตามปกติ ไม่ใช่ position:fixed ที่จะลอยทับเนื้อหา

   เดิม <body> มี class w3-margin (ขอบ 16px รอบด้าน) จึงต้องเขียนเป็น
   calc(100vh - 32px) ตอนนี้ขอบมาจาก padding ของ body.awl-shell ซึ่งเป็น
   border-box อยู่แล้ว จึงใช้ 100vh ตรง ๆ ได้ ไม่มีแถบเลื่อนโผล่มาเปล่า ๆ
   -------------------------------------------------------------------------- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.awl-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background-color: #fff;
  border: 1px solid var(--awl-colorkey7);
  border-radius: 12px;
  font-size: var(--fs-sm);
  color: var(--awl-text-muted);
}

.awl-foot__name {
  font-weight: 500;
  color: var(--awl-text-brand);
}

/* จอแคบ ยุบลงมาเรียงกลางเป็นแถวเดียว จะได้ไม่บีบจนตัวหนังสือซ้อนกัน */
@media screen and (max-width: 600px) {
  .awl-foot {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 4px;
  }
}

/* ==========================================================================
   7. เศษเก่า
   ========================================================================== */

/* .style40 และ .style14 เป็นเศษจาก stylesheet เก่าที่ถูกลบไปแล้ว ไม่เคยมีนิยาม
   ที่ไหนเลย ตอนนี้ไม่มีใครอ้างถึงทั้งคู่แล้ว
   .style40 หายไปตอนเขียน pagination_links() ใหม่
   .style14 ทั้ง 28 จุดหายไปตอนรวมบรรทัดสรุปจำนวนรายการเป็น result_summary() */

/* .pagination a.active เดิมอยู่ใน sarabun.html ที่ลบทิ้งไปแล้ว
   ปัจจุบัน pagination_links() ไม่ได้ใช้ class นี้ เก็บไว้เผื่อทำหน้าแบ่งหน้าใหม่ */
.pagination a.active {
  background-color: dodgerblue;
  color: white;
}


/* --------------------------------------------------------------------------
   หน้าแรก (main.php) — การ์ดต้อนรับ · การ์ดสรุปงาน · ทางลัด
   -------------------------------------------------------------------------- */

/* วงกลมอักษรย่อแทนรูปโปรไฟล์
   ระบบยังไม่มีรูปพนักงานในฐานข้อมูลที่ itsupport ต่ออยู่ (ptlcenter.tb_users)
   รูปจริงอยู่คนละฐาน จึงใช้อักษรย่อไปก่อน ดู NOTES ข้อ 6 */
.awl-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: 1px;
  flex: 0 0 auto;
  user-select: none;
  /* รูปจริงวางทับอักษรย่อ ต้องมี position กับ overflow ไม่งั้นรูปล้นวงกลม */
  position: relative;
  overflow: hidden;
}

/* รูปพนักงานจริง — ทับอักษรย่อไว้เต็มวง
   ถ้ารูปโหลดไม่ขึ้น กล่องนี้ว่างเปล่า (alt="") อักษรย่อข้างใต้จึงโผล่มาแทนเอง
   ไม่ต้องพึ่ง JS ส่วน JS ใน head.php ทำหน้าที่แค่สลับไปลอง .png */
.awl-avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* รูปพนักงานเป็น 130x200 แนวตั้งทุกใบ แต่วงกลมเป็นจัตุรัส
     ย่อให้เต็มความกว้างแล้วสูง 86.2 เกินกรอบ 56 อยู่ 30.2px

     ค่าเริ่มต้น 50% 50% ตัดบน 15.1 ล่าง 15.1 ซึ่ง 15.1 นั้นเทียบเท่า
     35px บนรูปต้นฉบับที่สูง 200px กินหัวคนไปครึ่งหนึ่ง หน้าจึงถูกดัน
     ไปชิดขอบบนของวงกลม เหลือแต่ไหล่กับอกอยู่ครึ่งล่าง

     15% เลื่อนกรอบขึ้นไปเอาหัวมาให้ครบ ส่วนเกินไปตัดด้านล่างแทน
     เทียบกับรูปจริง 3 คนแล้วได้หน้าอยู่กลางวงทั้งสามคน
     สัดส่วนการครอปไม่ขึ้นกับขนาด วงเล็กในเมนู (.awl-avatar--sm) จึงได้ด้วย */
  object-position: 50% 15%;
  border-radius: 50%;
}

.awl-welcome {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.awl-welcome__name {
  font-size: var(--fs-xl);
  color: var(--awl-text-brand);
  font-weight: 600;
}

.awl-welcome__sub {
  font-size: var(--fs-sm);
  color: var(--awl-text-muted);
}

/* การ์ดตัวเลขสรุป — ทั้งใบเป็นลิงก์ไปหน้ารายการที่ตรงกับตัวเลขนั้น */
.awl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.awl-stat {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: var(--awl-colorkey12);
  border-radius: 14px;
  border-left: 5px solid var(--awl-colorkey3);
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform .12s ease, box-shadow .12s ease;
}

.awl-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.awl-stat__num {
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--awl-text-brand);
}

.awl-stat__label {
  font-size: var(--fs-sm);
  color: #555;
  margin-top: 2px;
}

/* งานที่ต้องรีบ ใช้โทนแดงให้สะดุดตา */
.awl-stat--urgent {
  border-left-color: #e74c3c;
}

.awl-stat--urgent .awl-stat__num {
  color: #c0392b;
}

/* ทางลัด */
.awl-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.awl-quick a {
  display: inline-block;
  text-decoration: none;
  /* colorkey3 กับตัวอักษรขาวได้ 2.47 */
  background-color: var(--awl-btn-bg);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--awl-colorkey14);
  font-size: var(--fs-md);
}

.awl-quick a:hover {
  background-color: var(--awl-btn-bg-hover);
}

.awl-quick a.awl-quick--ghost {
  background-color: transparent;
  color: var(--awl-text-brand);
  border: 1px solid var(--awl-colorkey3);
}

.awl-quick a.awl-quick--ghost:hover {
  background-color: var(--awl-colorkey7);
}

.awl-empty {
  color: var(--awl-text-muted);
  font-size: var(--fs-md);
  padding: 8px 2px;
}


/* --------------------------------------------------------------------------
   ช่องกรอกและปุ่มแนบไฟล์
   -------------------------------------------------------------------------- */

/* ความกว้างมาตรฐานของช่องกรอก
   เดิมแต่ละช่องเขียน width:90% / 95% / 97% ของตัวเองทับ grid ของ w3.css
   ช่องที่อยู่แถวเดียวกันจึงกว้างไม่เท่ากัน เห็นชัดมากตอนจอแคบ */
.awl-field {
  width: 100%;
  box-sizing: border-box;
}

/* ปุ่มแนบไฟล์ — ซ่อน input จริงไว้ ใช้ label เป็นปุ่มแทน
   ตัว input ยังชื่อเดิม (upload, upload1..upload4) ไฟล์ที่รับปลายทางจึงไม่ต้องแก้ */
/* บรรทัดคำอธิบายใต้ช่องกรอก แทน style ฝังในแท็กที่เคยเป็น 11-12px */
/* <small> ของเบราว์เซอร์เป็น 0.8em ซึ่งตกไปต่ำกว่า 14px ดึงกลับมาที่เล็กสุดของสเกล */
small {
  font-size: var(--fs-sm);
}

/* หัวข้อลำดับขั้นของฟอร์ม (1. 2. 3. 4.) เดิมเขียน style ฝังในแท็กซ้ำ 4 จุด */
.awl-step {
  margin: 20px 0 12px 20px;
  color: var(--awl-text-brand);
}

/* แบบที่มีของอยู่ทางขวาด้วย เช่นป้ายเลขที่อ้างอิง */
.awl-step--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   แถบหัวฟอร์มของหน้าที่เปิดใบเก่าขึ้นมาแก้ (ticket_form_head ใน inc_ticket.php)

   สองบรรทัดทางซ้าย บรรทัดบนเป็นประเภทแจ้งงาน บรรทัดล่างเป็นสถานะ
   ป้ายเลขที่อ้างอิงอยู่ขวาสุด ไม่ยุบตามความยาวของสองบรรทัดนั้น

   เดิมทั้งสามอย่างเบียดกันอยู่บรรทัดเดียว พอใบไหนสถานะยาว (เช่น "ถูกตีกลับ"
   ที่มีปุ่มเหตุผลต่อท้าย) ป้ายเลขที่อ้างอิงจะถูกดันจนตกขอบ
   -------------------------------------------------------------------------- */
/* ระยะขอบเท่ากันทั้งสองข้าง เพราะแถบนี้ถูกวางไว้ในการ์ดที่มี padding 10px
   อยู่แล้ว เดิมตั้ง margin ไว้ 20px เฉพาะข้างซ้าย ป้ายเลขที่อ้างอิงทางขวา
   จึงเหลือช่องไฟแค่ 10px ไปติดขอบในของการ์ดจนดูเป็นก้อนเดียวกัน */
.awl-formhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 10px;
}

.awl-formhead__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.awl-formhead__row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* ใบที่มีทั้งสถานะอนุมัติและสถานะงาน พอจอแคบให้ตกบรรทัดแทนที่จะล้นออกนอกจอ */
  flex-wrap: wrap;
}

.awl-formhead__lbl {
  color: var(--awl-text-brand);
}

/* ป้ายเลขที่อ้างอิงต้องไม่ถูกบีบจนตัวเลขขึ้นบรรทัดใหม่ */
.awl-formhead__ref {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .awl-formhead {
    flex-direction: column;
    margin-left: 10px;
  }
}

/* --------------------------------------------------------------------------
   ตัวเลือกประเภทของการแจ้งงาน 2 ชั้น (problem_type_picker ใน inc_ticket.php)

   เดิมเป็น w3-half สองอัน คือบังคับ 50/50 ตลอดไม่ว่าช่องจะแคบแค่ไหน
   หน้าที่วางตัวเลือกนี้ไว้ในคอลัมน์ 1 ใน 3 ของแถว แต่ละ select จึงเหลือ
   ราว 150px ชื่อหมวดยาว ๆ ถูกตัดขึ้นบรรทัดใหม่สามบรรทัด

   flex-wrap + min-width ทำให้มันตัดสินเองว่าพอยืนข้างกันไหม
   ที่กว้างพอ = ข้างกัน · ที่แคบ = ซ้อนกันเต็มความกว้างของช่อง
   -------------------------------------------------------------------------- */
.awl-ptp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.awl-ptp__col {
  flex: 1 1 170px;
  min-width: 0;
}

/* ปุ่มเล็กข้างป้ายความสำคัญ ให้ทีม IT กดตั้งค่าจากหน้าคิวได้เลย
   ตั้งใจให้จางกว่าป้าย จะได้ไม่แย่งสายตาไปจากค่าที่แสดงอยู่ */
/* ปุ่ม (?) ข้างหัวข้อ เปิดคำแนะนำซ้ำได้ */
.awl-help {
  border: 1px solid var(--awl-colorkey3);
  background: #fff;
  /* key2 เป็นตัวอักษรบนพื้นขาวได้แค่ 3.65 ปุ่มเล็กแบบนี้ต้องใช้ตัวเข้ม */
  color: var(--awl-colorkey8);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  vertical-align: middle;
}

.awl-help:hover {
  background: var(--awl-colorkey7);
}

/* .awl-setpri ถูกลบออก 25 ก.ย. 2026 พร้อมกับปุ่ม "แก้" ข้างป้ายความสำคัญ
   ไม่มี markup ไหนในระบบอ้างถึงคลาสนี้แล้ว */

/* ข้อความอธิบายสั้น ๆ ที่มีสีตามความหมาย แทนแท็ก <font> ที่เลิกใช้ตั้งแต่ HTML5
   สีเดิมของ <font> อ่อนเกินไป (#008080 บนขาวได้ 4.09:1 · #ff8080 ได้ 2.79:1)
   ชุดนี้เข้มขึ้นให้ผ่านเกณฑ์อ่านสบาย 4.5:1 ทุกตัว */
.awl-note {
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.awl-note--teal {
  color: #00605f;
}

.awl-note--purple {
  /* ไม่ใช้ --awl-colorkey2 เพราะบนพื้นขาวได้ค่าความต่างสีแค่ 3.65:1
     ตัวนี้ยังเป็นโทนม่วงเหมือนกันแต่ได้ 7.42:1 */
  color: #5c4b8a;
}

.awl-note--warn {
  color: #a8483f;
}

/* ดอกจันบอกว่าช่องนี้ต้องกรอก */
.awl-req {
  color: #a8483f;
  font-weight: 600;
  padding-left: 2px;
}

/* กลุ่มปุ่มท้ายหน้า คุมช่องไฟด้วย gap แทน &nbsp;&nbsp; ที่ระยะขึ้นกับขนาดตัวอักษร */
.awl-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.awl-actions .awl-btn {
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.awl-actions .awl-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(60, 30, 80, .18);
}

.awl-actions .awl-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .awl-actions .awl-btn:hover {
    transform: none;
  }
}
/* --------------------------------------------------------------------------
   คลาสแทน inline style ที่ซ้ำกันทั้งระบบ

   เดิมมี style= ฝังในแท็ก 333 จุด ซึ่ง 246 จุดเป็นแค่ 5 รูปแบบซ้ำ ๆ
   ไล่เก็บมาเป็นคลาสแล้วแก้ที่นี่ที่เดียวได้ทุกหน้า

   ตัวที่ลบทิ้งไปเลยคือ width:10% บนปุ่ม radio (33 จุด) ซึ่งไม่ควรกำหนด
   ความกว้างให้ปุ่มกลม ๆ อยู่แล้ว และ width:90% ที่เป็นสาเหตุเดียวกับที่
   ทำให้แถบค้นหา 3 หน้าเบี้ยว (ป้ายกำกับสั้นพอจะยืนข้างช่อง ป้ายยาวถูกดันขึ้น
   บรรทัดบน ช่องกรอกจึงอยู่คนละระดับ)
   -------------------------------------------------------------------------- */

/* ป้ายกำกับข้างช่องกรอก เดิมเป็น <span style="margin:auto;"> 68 จุด
   ซึ่งบน <span> ที่เป็น inline element แทบไม่มีผลอะไรเลยนอกจากทำให้โค้ดรก */
.awl-lbl {
  display: block;
  margin-bottom: 4px;
}

/* .awl-center กับ .awl-left ถูกประกาศซ้ำตรงนี้อีกชุด ทั้งที่มีอยู่แล้วในบล็อก
   utility ด้านบน ค่าตรงกันทั้งคู่จึงไม่เคยเห็นอาการเพี้ยน ลบชุดนี้ทิ้ง */

.awl-hint {
  font-size: var(--fs-sm);
  color: var(--awl-text-muted);
  margin: 4px 0 8px 0;
  line-height: 1.5;
}

/* เตี้ยลงจากเดิม (สูง 50px) เพราะตัวอักษรข้างในโตขึ้นเป็น 14px แล้ว
   ถ้าคง padding เดิมไว้กล่องจะยิ่งบวม */
.awl-file {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fafafa;
  border: 1px dashed var(--awl-colorkey3);
  border-radius: 10px;
  padding: 4px 8px;
  margin-bottom: 6px;
}

.awl-file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.awl-file__btn {
  background-color: var(--awl-colorkey7);
  color: var(--awl-text-brand);
  border-radius: var(--awl-colorkey14);
  padding: 4px 12px;
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.awl-file__btn:hover {
  background-color: var(--awl-colorkey9);
  color: #fff;
}

.awl-file__name {
  font-size: var(--fs-sm);
  color: #666;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.awl-file__clear {
  border: none;
  background: none;
  color: #c0392b;
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  display: none;
  flex: 0 0 auto;
}

.awl-file.is-filled {
  border-style: solid;
  background: #fff;
}

.awl-file.is-filled .awl-file__name {
  color: var(--awl-text-brand);
}

.awl-file.is-filled .awl-file__clear {
  display: block;
}


/* --------------------------------------------------------------------------
   ฉากบัง "กำลังบันทึก" ระหว่างรอ server ตอบ
   เดิมกดส่งแล้วไม่มีสัญญาณอะไรเลย ผู้ใช้กดซ้ำได้
   -------------------------------------------------------------------------- */
.awl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 9999;
}

.awl-overlay__spin {
  width: 46px;
  height: 46px;
  border: 4px solid var(--awl-colorkey7);
  border-top-color: var(--awl-colorkey2);
  border-radius: 50%;
  animation: awl-spin .8s linear infinite;
}

.awl-overlay__text {
  color: var(--awl-text-brand);
  font-size: var(--fs-lg);
}

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

/* เครื่องที่ตั้งค่าลดการเคลื่อนไหว ให้หยุดหมุน แต่ยังเห็นว่ากำลังทำงานอยู่ */
@media (prefers-reduced-motion: reduce) {
  .awl-overlay__spin {
    animation: none;
  }
}


/* --------------------------------------------------------------------------
   วงกลมอักษรย่อขนาดเล็ก ใช้ในแถบผู้ใช้ท้ายเมนูข้าง (side_user() ใน inc_menu.php)
   -------------------------------------------------------------------------- */
.awl-avatar--sm {
  width: 26px;
  height: 26px;
  font-size: var(--fs-sm);
  letter-spacing: 0;
}



/* --------------------------------------------------------------------------
   ช่องเลือก (select) ให้เข้าชุดกับช่องกรอกอื่น
   ของเดิมใช้กรอบและลูกศรของระบบปฏิบัติการ หน้าตาไม่เข้ากับหน้าที่เหลือ
   ยังเป็น <select> จริง ไม่ได้ทำ dropdown จำลองด้วย JS
   ของจริงใช้ได้กับคีย์บอร์ด โปรแกรมอ่านหน้าจอ และวงล้อเลือกบนมือถือ
   -------------------------------------------------------------------------- */
.awl-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid #d9d2e4;
  border-radius: 10px;
  padding: 9px 36px 9px 12px;
  font-size: var(--fs-md);
  color: var(--awl-colorkey4);
  line-height: 1.4;
  cursor: pointer;
  /* ลูกศรวาดเองด้วย SVG ฝังใน CSS จะได้เหมือนกันทุกเบราว์เซอร์ */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.awl-select:hover {
  border-color: var(--awl-colorkey3);
}

.awl-select:focus {
  outline: none;
  border-color: var(--awl-colorkey3);
  box-shadow: 0 0 0 3px var(--awl-colorkey7);
}

.awl-select:disabled {
  background-color: #f4f4f6;
  /* WCAG ยกเว้น element ที่ disabled และสีจางคือสัญญาณว่ากดไม่ได้ จึงคงไว้ */
  color: #999;
  cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   รายการที่กางออกมาของ <select>
   เดิมแถบที่เลือกอยู่เป็นสีฟ้าของ Windows ซึ่ง CSS ธรรมดาแก้ไม่ได้
   เพราะเบราว์เซอร์เป็นคนวาดรายการนั้นเอง ไม่ใช่หน้าเว็บ

   appearance: base-select (Chrome/Edge 135 ขึ้นไป) ยกรายการนั้นมาให้หน้าเว็บ
   วาดเอง จึงจัดให้เข้าชุดกับเมนูได้ ค่าทุกตัวข้างล่างลอกมาจากการ์ดเมนูชุดเดิม

   ห่อด้วย @supports ไว้ เบราว์เซอร์ที่ไม่รองรับ (Chrome เก่า Firefox Safari)
   จะข้ามทั้งบล็อกแล้วได้หน้าตาเดิมทุกอย่าง ไม่ต้องมีทางสำรองอะไรเพิ่ม

   จำกัดไว้เฉพาะจอใหญ่ที่ใช้เมาส์ เพราะบนมือถือตัวเลือกเต็มจอของระบบ
   จิ้มด้วยนิ้วง่ายกว่ารายการในหน้าเว็บ ตรงนั้นจึงปล่อยไว้ตามเดิม
   -------------------------------------------------------------------------- */
@supports (appearance: base-select) {
  @media screen and (min-width: 601px) and (hover: hover) {

    .awl-select {
      appearance: base-select;
    }

    /* ลูกศรที่ base-select แถมมาให้ ซ่อนทิ้ง เพราะเราวาด SVG เองอยู่แล้ว */
    .awl-select::picker-icon {
      display: none;
    }

    /* กล่องรายการ — ค่าเดียวกับการ์ดเมนูชุดเดิมทุกตัว */
    .awl-select::picker(select) {
      appearance: base-select;
      background-color: #fff;
      border: 1px solid var(--awl-colorkey7);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
      padding: 6px;
      margin-top: 6px;
      /* รายการยาว เช่น ประเภทปัญหา ให้เลื่อนในกล่องแทนที่จะยาวเลยจอ */
      max-height: 320px;
      overflow-y: auto;
    }

    /* แต่ละบรรทัด — ค่าเดียวกับลิงก์ในการ์ดเมนูชุดเดิม */
    .awl-select option {
      color: var(--awl-colorkey4);
      padding: 10px 12px;
      border-radius: 8px;
      font-size: var(--fs-md);
      line-height: 1.4;
    }

    /* เครื่องหมายถูกที่ Chrome แถมมาหน้าบรรทัดที่เลือก ซ่อนทิ้ง
       เพราะเราบอกว่าเลือกอันไหนด้วยสีพื้นอยู่แล้ว ไม่ต้องบอกซ้ำ */
    .awl-select option::checkmark {
      display: none;
    }

    /* พื้นม่วงอ่อนเหมือนเมนู แต่ตัวอักษรใช้ม่วงเข้ม --awl-colorkey8 ไม่ใช่
       --awl-colorkey2 แบบเมนู เพราะม่วงอ่อนบนม่วงอ่อนวัดได้แค่ 2.70:1
       ชี้เมาส์แล้วอ่านไม่ออก ตัวนี้ได้ 9.93:1 */
    .awl-select option:hover {
      background-color: var(--awl-colorkey7);
      color: var(--awl-colorkey8);
    }

    /* บรรทัดที่เลือกอยู่ ใช้ม่วงเข้มของระบบ (--awl-colorkey8 ตัวเดียวกับ
       ตัวอักษรบนแถบเมนู) ไม่ใช่ม่วงอ่อน เพราะขาวบนม่วงอ่อนได้ค่าความต่างสี
       แค่ 3.65:1 อ่านไม่ชัด ส่วนตัวนี้ได้ 13.4:1 */
    .awl-select option:checked {
      background-color: var(--awl-colorkey8);
      color: #fff;
    }

    /* #aaa บนพื้นจางได้แค่ 2.11 ทั้งที่บรรทัดนี้คือ "** กรุณาเลือกรายการ **"
       ที่ผู้ใช้ต้องอ่านจริง ไม่ใช่ตัวเลือกที่ถูกปิดไว้เฉย ๆ */
    .awl-select option:disabled {
      color: var(--awl-text-muted);
      background-color: transparent;
    }
  }
}

/* --------------------------------------------------------------------------
   ตาราง — ป้ายสถานะและกล่องที่เลื่อนได้
   เดิมระบายสีด้วยแอตทริบิวต์ bgcolor="#FF3333" เต็มช่อง สีนีออนอ่านยาก
   -------------------------------------------------------------------------- */
/* กล่องครอบตาราง เป็นตัวถือเส้นขอบและมุมมนแทนตัว <table> เอง
   overflow: hidden ตัดมุมของหัวตารางให้โค้งตามกล่อง ส่วน overflow-x: auto ยังเลื่อนได้ */
.awl-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--awl-colorkey7);
  border-radius: 12px;
  background-color: #fff;
  margin-top: 15px;
}

.awl-table-wrap table {
  min-width: 980px;
}

.awl-badge {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background-color: #eee;
  color: #555;
}

/* ป้ายสถานะการอนุมัติ — คู่สีอยู่ในบล็อก token ด้านบน ห้ามใส่ค่าสีตรงนี้
   เพราะสีพวกนี้ต้องวัดเป็นคู่ตัวอักษร/พื้นเสมอ แยกกันแล้วจะหลุดเกณฑ์โดยไม่รู้ตัว */

/* อนุมัติแล้ว / ดำเนินการเรียบร้อย */
.awl-badge--ok {
  background-color: var(--awl-st-ok-bg);
  color: var(--awl-st-ok-fg);
}

/* ถูกตีกลับมาให้แก้ */
.awl-badge--warn {
  background-color: var(--awl-st-returned-bg);
  color: var(--awl-st-returned-fg);
}

/* ไม่อนุมัติ */
.awl-badge--danger {
  background-color: var(--awl-st-reject-bg);
  color: var(--awl-st-reject-fg);
}

/* รอหัวหน้าแผนกอนุมัติ */
.awl-badge--wait-sup {
  background-color: var(--awl-st-waitsup-bg);
  color: var(--awl-st-waitsup-fg);
}

/* รอผู้บริหารอนุมัติ */
.awl-badge--wait-dm {
  background-color: var(--awl-st-waitdm-bg);
  color: var(--awl-st-waitdm-fg);
}

/* ยกเลิก — ตัวเดียวในชุดที่เป็นพื้นทึบ เพราะเป็นสถานะที่จบแล้วและไม่ต้องทำอะไรต่อ */
.awl-badge--cancel {
  background-color: var(--awl-st-cancel-bg);
  color: var(--awl-st-cancel-fg);
}

/* ป้ายขอด่วน ใช้แดงชุดเดียวกับไม่อนุมัติ ต่างกันที่กดได้และมีเส้นขอบ */
.awl-badge--urgent {
  background-color: var(--awl-st-reject-bg);
  color: var(--awl-st-reject-fg);
  cursor: pointer;
  border: 1px solid #f5c6c2;
}

.awl-badge--urgent:hover {
  background-color: #fbdbd8;
}

.awl-badge--info {
  background-color: #e7f1fb;
  color: #1b5e9c;
}

/* ป้ายที่กดแล้วเด้ง popup แสดงข้อความเต็ม */
.awl-badge--clickable {
  cursor: pointer;
}

.awl-badge--clickable:hover {
  filter: brightness(0.95);
}


/* ปุ่มเล็กท้ายแถวตาราง แทนไอคอนรูปที่เดาไม่ออกว่ากดแล้วได้อะไร */
.awl-rowbtn {
  display: inline-block;
  text-decoration: none;
  background-color: var(--awl-colorkey7);
  color: var(--awl-text-brand);
  font-size: var(--fs-sm);
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.awl-rowbtn:hover {
  /* colorkey3 กับตัวอักษรขาวได้ 2.47 ตอนชี้เมาส์จะอ่านยากกว่าตอนไม่ชี้เสียอีก */
  background-color: var(--awl-text-brand);
  color: #fff;
}

/* ตัดข้อความยาวให้เหลือ 2 บรรทัด แล้วใส่ ... ท้าย
   ตัวการที่ทำให้แถวในตารางสูงคือช่อง "หัวข้อ" ที่บางใบยาว 251 ตัวอักษร
   แต่ช่องกว้างแค่ 168px จึงตัดขึ้นบรรทัดใหม่ราว 14 บรรทัด แถวสูง 332px
   ข้อความเต็มยังอ่านได้จาก title ตอนชี้เมาส์ และในหน้ารายละเอียด */
.awl-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   วงกลมตัวเลขงานค้างบนเมนู — ไม่มีงานค้างจะไม่แสดงอะไรเลย ไม่ใช่เลข 0
   -------------------------------------------------------------------------- */
.awl-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  /* #e74c3c เดิมได้ 3.82 กับตัวอักษรขาว */
  background-color: #c0392b;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
}


/* --------------------------------------------------------------------------
   ช่องกรอกข้อมูล — หน้าตาเดียวกับ .awl-select
   เดิม <select> เป็นกรอบมุมมนไปแล้ว แต่ <input> กับ <textarea> ยังเป็น
   เส้นใต้เส้นเดียวของ w3.css ในฟอร์มเดียวกันจึงมีสองแบบปนกัน
   คุมจากที่นี่ที่เดียว ไม่ต้องไล่แก้ 232 ช่องในไฟล์ PHP
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="date"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea,
textarea.w3-input {
  /* ตรวจแล้ว input ที่ใช้ class="w3-input" ในระบบมีแค่ type text/date/password/hidden
     จึงไม่ต้องมี selector เหมารวมที่ใช้ :not() ซ้อนกัน 4 ชั้น
     ซึ่งทำให้กฎนี้เจาะจงเกินกฎ [readonly] ข้างล่างจนกฎนั้นไม่มีผล */
  background-color: #fff;
  border: 1px solid #d9d2e4;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: var(--fs-md);
  color: var(--awl-colorkey4);
  line-height: 1.4;
  box-sizing: border-box;
}

textarea {
  resize: vertical;
}

input[type="text"]:hover,
input[type="date"]:hover,
textarea:hover,
textarea.w3-input:hover {
  border-color: var(--awl-colorkey3);
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
textarea.w3-input:focus {
  outline: none;
  border-color: var(--awl-colorkey3);
  box-shadow: 0 0 0 3px var(--awl-colorkey7);
}

/* ช่องที่แก้ไม่ได้ ให้พื้นเทาอ่อน จะได้รู้โดยไม่ต้องลองพิมพ์
   ต้องเจาะจงให้มากกว่ากฎช่องกรอกข้างบน (ที่มี .w3-input อยู่ด้วย) ไม่งั้นแพ้ลำดับความเจาะจง */
input[readonly],
input.w3-input[readonly],
textarea[readonly],
textarea.w3-input[readonly] {
  background-color: #f4f4f6;
  color: #666;
  cursor: default;
}

input[readonly]:hover,
input.w3-input[readonly]:hover,
textarea[readonly]:hover {
  border-color: #d9d2e4;
}

/* ปุ่มแนบไฟล์มีสไตล์ของตัวเองอยู่แล้ว อย่าให้กฎข้างบนไปทับ */
.awl-file input[type="file"] {
  border: none;
  padding: 0;
}

/* ปุ่มรอง ใช้คู่กับ .awl-btn ตอนที่มีปุ่มสองระดับในแถวเดียวกัน */
.awl-btn--ghost {
  background-color: transparent;
  color: var(--awl-text-brand);
  border: 1px solid var(--awl-colorkey3);
}

.awl-btn--ghost:hover {
  background-color: var(--awl-colorkey7);
  color: var(--awl-text-brand);
}

/* ปุ่มที่รอให้ผู้ใช้ลงมือ — เต้นเบา ๆ เรียกสายตา
   ใช้กับปุ่มปิดงานใน edit.php ตอนที่ใบแก้เสร็จแล้วแต่ผู้แจ้งยังไม่ปิด

   ขยาย/หดกับเงา ไม่สลับสีพื้น เพราะสีที่หายไปทั้งปุ่มจะกวนสายตาคนที่
   กำลังอ่านข้อมูลในหน้าเดียวกัน และทำให้อ่านตัวหนังสือบนปุ่มไม่ออกเป็นจังหวะ

   หยุดเมื่อชี้เมาส์หรือโฟกัส เพราะถึงจุดนั้นคนเห็นปุ่มแล้ว ไม่ต้องเรียกอีก
   และปุ่มที่ขยับอยู่ตอนกำลังจะกดทำให้กดพลาด */
.awl-btn--pulse {
  animation: awl-pulse 2s ease-in-out infinite;
}

.awl-btn--pulse:hover,
.awl-btn--pulse:focus {
  animation: none;
}

@keyframes awl-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(129, 99, 181, .45);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 10px rgba(129, 99, 181, 0);
  }
}

/* เครื่องที่ตั้งค่าลดการเคลื่อนไหวไว้ ต้องไม่เจอปุ่มเต้น
   ไฟล์นี้ทำแบบเดียวกันกับฉากรอบันทึกและวงกลมหมุนอยู่แล้ว */
@media (prefers-reduced-motion: reduce) {
  .awl-btn--pulse {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   ปุ่มแบ่งหน้า — เดิมพิมพ์เป็นข้อความดิบ « Back [ 1 ][ 2 ] Next »
   โดยใช้ class .style40 ที่ไม่มีนิยามอยู่ที่ไหนเลย
   -------------------------------------------------------------------------- */
.awl-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.awl-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--awl-colorkey7);
  background-color: #fff;
  color: var(--awl-text-brand);
  text-decoration: none;
  font-size: var(--fs-md);
}

.awl-page:hover {
  background-color: var(--awl-colorkey7);
}

.awl-page.is-current {
  background-color: var(--awl-btn-bg);
  color: #fff;
  border-color: var(--awl-btn-bg);
  font-weight: 600;
}

.awl-page.is-gap {
  border: none;
  background: none;
  color: var(--awl-text-muted);
  min-width: 18px;
  padding: 0;
}

.w3-panel.panel-center {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pagination-summary {
  margin-bottom: 10px;
  font-size: var(--fs-lg);
  color: #444;
}

/* บรรทัดสรุปจำนวนรายการ — พิมพ์จาก result_summary() ใน inc_ticket.php
   เดิม 3 หน้าใช้ <mark> ซึ่งได้แถบไฮไลต์สีเหลืองของเบราว์เซอร์มาเต็ม ๆ
   ไม่เข้ากับโทนม่วงของระบบเลย ตอนนี้เน้นที่ "ตัวเลข" แทนการระบายพื้น */
.awl-summary {
  font-size: var(--fs-md);
  color: #6f6a7d;
}

.awl-summary__n {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--awl-colorkey8);
}

.awl-summary__sep {
  color: var(--awl-text-muted);
  padding: 0 2px;
}

.awl-pager {
  justify-content: center;
  /* ให้ปุ่มอยู่กึ่งกลางแนวนอน */
}

/* รายการไฟล์แนบแบบอ่านอย่างเดียว ใช้กับหน้าที่แนบไฟล์ไม่ได้จริง

   เป็น grid เพราะใบที่แนบรูปหลายไฟล์ ถ้าเรียงลงมาทีละรูปเต็มความกว้าง
   หน้าจะยาวขึ้นทีละ 260px ต่อรูป ดันข้อมูลการแก้ไขหลุดจอไปเลย
   ตอนนี้เป็นภาพย่อเรียงเป็นตาราง กดที่รูปเพื่อเปิดขนาดเต็ม */
.awl-filelist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  align-items: start;
}

/* ไฟล์ที่ไม่ใช่รูป (pdf, xlsx) ไม่มีภาพย่อให้ดู ให้กินเต็มแถวเหมือนเดิม
   จะได้อ่านชื่อไฟล์ออก */
.awl-filelist > a:not(.awl-filelist__img),
.awl-filelist__empty {
  grid-column: 1 / -1;
}

.awl-filelist a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--awl-colorkey7);
  border-radius: 10px;
  background: #fff;
  color: var(--awl-text-brand);
  text-decoration: none;
  font-size: var(--fs-sm);
  word-break: break-all;
}

.awl-filelist a:hover {
  background-color: var(--awl-colorkey7);
}

.awl-filelist__empty {
  color: var(--awl-text-muted);
  font-size: var(--fs-sm);
}

/* รูปแนบแสดงเป็นภาพย่อเลย ไม่ต้องกดเปิดแท็บใหม่
   ไฟล์ใน tt/ กว่า 1,200 ไฟล์เป็น .jpg เกือบทั้งหมด การให้เห็นรูปทันที
   ทำให้แคปหน้าจอส่งต่อได้ครบในภาพเดียว */
.awl-filelist a.awl-filelist__img {
  display: block;
  padding: 0;
  overflow: hidden;
}

.awl-filelist__img img {
  display: block;
  width: 100%;
  height: 90px;
  object-fit: cover;
  background: #f4f0fa;
}

/* ชื่อไฟล์ในช่องแคบ ๆ ถ้าปล่อยให้ตัดคำจะสูงกว่ารูปเสียอีก ตัดท้ายด้วย …
   ชื่อเต็มอยู่ใน title ของลิงก์ ชี้เมาส์แล้วเห็น */
.awl-filelist__img .awl-filelist__cap {
  display: block;
  padding: 5px 8px;
  border-top: 1px solid var(--awl-colorkey7);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   หน้าดูรายละเอียดอย่างเดียว (veiw.php)

   เดิมหน้านี้วางด้วย w3-quarter สามช่อง = 75% ของแถว เหลือขวามือว่าง 25%
   ทั้งสามจึงเบียดกันไปทางซ้าย และค่าทุกช่องเป็น <input> ทั้งที่ฟอร์มไม่มี
   ปุ่มบันทึก แคปหน้าจอส่งต่อแล้วดูเหมือนแบบฟอร์มรอกรอก

   ตอนนี้เป็น grid: ช่องไฟเท่ากันทุกคู่ · ค่าเป็นกล่องอ่านอย่างเดียว ·
   คอลัมน์ในแถวเดียวกันสูงเท่ากันเสมอ (grid ยืดให้เอง) ขอบล่างจึงตรงกัน
   -------------------------------------------------------------------------- */
.awl-view {
  display: grid;
  gap: 18px 24px;
  padding: 4px 10px;
  align-items: stretch;
}

/* สองแถวในการ์ดเดียวกัน ต้องมีระยะคั่น ไม่งั้นติดกันเหมือนแถวเดียว */
.awl-view + .awl-view {
  margin-top: 18px;
}

.awl-view--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.awl-view--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* แถวหลัก: ผู้แจ้ง | รายละเอียด | ไฟล์แนบ — ให้ช่องรายละเอียดกว้างที่สุด
   เพราะเป็นข้อความยาว ส่วนอีกสองช่องเป็นค่าสั้น ๆ */
.awl-view--detail {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
}

.awl-view__item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* หลายช่องเรียงลงมาในคอลัมน์เดียว เช่นฝั่งผู้แจ้งปัญหา */
.awl-view__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.awl-view__lbl {
  font-size: var(--fs-sm);
  color: #6b6b6b;
}

.awl-view__val {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--awl-colorkey7);
  border-radius: 10px;
  background: #fbf9fe;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.6;
}

/* ค่าที่เป็นป้ายสถานะและรายการไฟล์แนบ
   เดิมตัดกรอบออกเพราะคิดว่าป้ายมีกรอบของตัวเองอยู่แล้ว จะได้ไม่ซ้อนกัน
   แต่ช่องพวกนี้อยู่ในแถว grid เดียวกับช่องข้อความที่มีกรอบ พอมีบ้างไม่มีบ้าง
   แถวเลยดูแหว่ง ตอนนี้ใช้กรอบชุดเดียวกับช่องอื่น ขอบบน-ล่างจึงตรงกันทั้งแถว */
   ไม่ตั้ง display ใด ๆ ไว้ตรงนี้ เพราะ upload_list() คืน <div> ก้อนเดียว
   ถ้าทำเป็น flex ลูกตัวนั้นจะหดตามเนื้อหาแทนที่จะกว้างเต็มช่อง */
.awl-view__val--badge {
  white-space: normal;
}

/* ข้อความยาว — ดันความสูงขั้นต่ำไว้ให้ใบที่เขียนสั้นกับใบที่เขียนยาว
   ออกมาหน้าตาใกล้เคียงกัน แล้วยืดเต็มคอลัมน์ให้ขอบล่างตรงกับช่องอื่น */
.awl-view__val--text {
  flex: 1;
  min-height: 190px;
}

/* ช่องที่ต้องยืดกินที่ว่างที่เหลือในคอลัมน์ ให้ขอบล่างไปจบพร้อมคอลัมน์ข้าง ๆ */
.awl-view__item--grow {
  flex: 1;
}

.awl-view__val--empty {
  color: var(--awl-text-muted);
}

/* ข้อความประกอบที่ไม่ใช่เนื้อหาหลัก เช่น "(ไม่บังคับ)" ข้างชื่อช่อง
   มีไว้แทน style="color:var(--awl-text-muted)" ที่เคยเขียนฝังในแท็ก */
.awl-muted {
  color: var(--awl-text-muted);
}


/* --------------------------------------------------------------------------
   แถวให้คะแนน 1-10 ใน score_it.php

   radio ตัวจริงถูกซ่อนแต่ยังอยู่ใน DOM ไม่ได้ใช้ display:none เพราะจะทำให้
   โฟกัสด้วยคีย์บอร์ดไม่ได้และ required ไม่ทำงาน ใช้ opacity:0 ทับบน label แทน
   -------------------------------------------------------------------------- */
.awl-score {
  display: flex;
  flex-wrap: wrap;
  /* แถวคะแนนอยู่กลางการ์ด เดิมชิดซ้ายจนดูเหมือนรายการช่องกรอกทั่วไป
     ทั้งที่เป็นสิ่งเดียวที่หน้านี้ขอจากผู้ใช้ */
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.awl-score__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.awl-score__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--awl-colorkey7);
  border-radius: 999px;
  background: #fbf9fe;
  color: var(--awl-text-brand);
  font-size: var(--fs-lg);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease,
              transform .12s ease, box-shadow .12s ease;
}

.awl-score__btn:hover {
  background: var(--awl-colorkey7);
  transform: translateY(-2px);
}

/* ตัวที่เลือกอยู่ ใช้สีปุ่มหลักกับตัวอักษรขาว วัดได้ 4.79
   แล้วขยายขึ้นเล็กน้อยพร้อมเงา ให้เห็นชัดว่ากดอันไหนไว้ */
.awl-score__radio:checked + .awl-score__btn {
  background: var(--awl-btn-bg);
  border-color: var(--awl-btn-bg);
  color: #fff;
  transform: scale(1.14);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

/* สีของตัวที่เลือกเปลี่ยนตามช่วงคะแนน ให้รู้ทันทีว่าที่กดไปแปลว่าอะไร
   ใช้สีปุ่มที่วัดค่าความต่างกับตัวอักษรขาวไว้แล้วทั้งสามตัว
   แดง 4.85 · ส้ม 4.53 · เขียว 4.53 · ม่วงของเดิม 4.79
   เลือกด้วย [value=] ไม่ต้องพึ่ง JS ปิด JS แล้วสียังถูก */
.awl-score__radio[value="1"]:checked + .awl-score__btn,
.awl-score__radio[value="2"]:checked + .awl-score__btn,
.awl-score__radio[value="3"]:checked + .awl-score__btn {
  background: var(--awl-btn-danger);
  border-color: var(--awl-btn-danger);
}

.awl-score__radio[value="4"]:checked + .awl-score__btn,
.awl-score__radio[value="5"]:checked + .awl-score__btn,
.awl-score__radio[value="6"]:checked + .awl-score__btn {
  background: var(--awl-btn-warn);
  border-color: var(--awl-btn-warn);
}

.awl-score__radio[value="9"]:checked + .awl-score__btn,
.awl-score__radio[value="10"]:checked + .awl-score__btn {
  background: var(--awl-btn-ok);
  border-color: var(--awl-btn-ok);
}

/* กรอบโฟกัสตอนเดินด้วยปุ่มลูกศร ต้องเห็นชัดเพราะ radio จริงมองไม่เห็น */
.awl-score__radio:focus-visible + .awl-score__btn {
  outline: 2px solid var(--awl-text-brand);
  outline-offset: 2px;
}

/* ป้ายหัวท้ายสเกล กว้างเท่าแถวปุ่มพอดีแล้วจัดกลางไปด้วยกัน */
.awl-score__scale {
  display: flex;
  justify-content: space-between;
  max-width: 620px;
  margin: 10px auto 0;
  font-size: var(--fs-sm);
  color: var(--awl-text-muted);
}

/* บรรทัดบอกว่าคะแนนที่กดไปแปลว่าอะไร เดิมไม่มีอะไรตอบกลับเลย
   นอกจากปุ่มเปลี่ยนสี · JS ใน score_it.php เป็นคนเติมข้อความ */
.awl-score__readout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  min-height: 34px;
  font-size: var(--fs-lg);
  color: var(--awl-text-brand);
}

.awl-score__face {
  font-size: 28px;
  line-height: 1;
}

.awl-score__readout--empty {
  color: var(--awl-text-muted);
  font-size: var(--fs-md);
}

/* จอแคบ ปุ่มเล็กลงให้ครบ 10 ตัวโดยไม่ต้องเลื่อนแนวนอน */
@media (max-width: 600px) {
  .awl-score {
    gap: 6px;
  }

  .awl-score__btn {
    width: 42px;
    height: 42px;
    font-size: var(--fs-md);
  }
}

/* ปุ่มขยายตอนเลือกและยกตอนชี้ เป็นการเคลื่อนไหว ต้องเคารพการตั้งค่าของเครื่อง
   สีกับเงายังทำงานปกติ คนที่ปิด animation จึงยังรู้ว่าเลือกอันไหนไว้ */
@media (prefers-reduced-motion: reduce) {
  .awl-score__btn,
  .awl-score__btn:hover,
  .awl-score__radio:checked + .awl-score__btn {
    transition: none;
    transform: none;
  }
}

@media (max-width: 900px) {
  .awl-view--4,
  .awl-view--detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .awl-view,
  .awl-view--2,
  .awl-view--4,
  .awl-view--detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}


/* --------------------------------------------------------------------------
   กล่องแจ้งเตือน SweetAlert2 — ให้ขึ้นบรรทัดใหม่ตาม \n ที่ส่งมาในข้อความ

   alert_back() / deny() / alert_go() ส่งข้อความเข้า Swal.fire() ทาง title
   ซึ่งถูกแสดงเป็น HTML ตัว \n จึงยุบเป็นช่องว่างธรรมดา ข้อความหลายบรรทัด
   อย่างคำแนะนำตอนแนบไฟล์ผิดนามสกุลเลยกลายเป็นพรืดเดียวอ่านยาก

   pre-line ทำให้ \n ขึ้นบรรทัดใหม่จริงโดยยังยุบช่องว่างซ้ำ ๆ ให้เหมือนเดิม
   ไม่ต้องใส่ <br> ในข้อความ ซึ่งจะไปโผล่เป็นตัวอักษรในกรณีที่ SweetAlert2
   โหลดไม่ขึ้นแล้วตกไปใช้ alert() ของเบราว์เซอร์แทน
   -------------------------------------------------------------------------- */
.swal2-title {
  white-space: pre-line;
}

/* --------------------------------------------------------------------------
   แถบเตือนตอนโหมดดูข้อผิดพลาดเปิดอยู่ (?awldebug=1 ใน head.php)
   เห็นได้เฉพาะสิทธิ IT ที่เปิดโหมดนี้เอง และโหมดปิดตัวเองใน 30 นาทีอยู่แล้ว
   สีตัวอักษร #7a4a00 บนพื้น #fff3cd วัดได้ 6.76:1 ผ่านเกณฑ์ 4.5:1
   -------------------------------------------------------------------------- */
.awl-debugbar {
  background: #fff3cd;
  border-bottom: 2px solid var(--awl-btn-warn, #C15700);
  color: #7a4a00;
  padding: 8px 14px;
  font-size: var(--fs-sm);
  text-align: center;
}

.awl-debugbar a {
  margin-left: 10px;
  color: #7a4a00;
}

/* ==========================================================================
   แถบเมนูข้าง (sidebar)  —  แทนแถบบนแนวนอน .topnav ของเดิม

   จอกว้าง (> 900px)  แถบอยู่ในแถวเดียวกับเนื้อหา กดปุ่ม ☰ แล้ว "ซ่อนทั้งแถบ"
                       เนื้อหาขยายเต็มจอ แล้วมีปุ่มลอยมุมซ้ายบนไว้เรียกกลับ
   จอแคบ (<= 900px)   แถบซ่อนอยู่นอกจอเสมอ กดแล้วเลื่อนเข้ามาทับพร้อมฉากมืด

   ค่าความต่างสีที่วัดไว้ (เกณฑ์โปรเจกต์ 4.5:1)
     ชื่อกลุ่ม #654a9c บนขาว            6.97
     ชื่อกลุ่ม #654a9c บนพื้น hover     6.12
     รายการ   #303030 บนขาว            12.6
     รายการที่เปิดอยู่ ขาวบน #8163b5    4.79
   ========================================================================== */
body.awl-shell {
  /* แถบเมนูเป็นแถบลอย (position: fixed) ไม่ได้อยู่ในสายการไหลของหน้า
     จึงเว้นที่ให้ด้วย padding ของ body แทนการทำกล่องครอบเนื้อหา

     **ตั้งใจไม่ทำกล่องครอบ** เพราะ 63 หน้าในระบบปิด </div> ไม่เท่ากัน
     บางหน้าเปิดค้างไว้ให้ foot.php ปิดให้ บางหน้าปิดเอง (main.php ปิดครบ 14/14)
     กล่องครอบจึงไปปิดผิดตัวในบางหน้า ทำให้ฟุตเตอร์หลุดออกไปอยู่ข้างเนื้อหา
     วิธีนี้ไม่แตะโครงสร้าง div ของหน้าไหนเลยสักหน้า */
  margin: 0;
  padding: 16px 16px 16px 276px;
}

.awl-side {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 35;
  width: 260px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-right: 1px solid var(--awl-colorkey7);
}

/* ---- หัวแถบ : ปุ่ม ☰ + ชื่อระบบ ---- */
.awl-side__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--awl-colorkey7);
}

.awl-side__burger,
.awl-side__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px คือขนาดเล็กสุดที่นิ้วกดได้แม่น */
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--awl-text-brand);
  cursor: pointer;
}

.awl-side__burger:hover,
.awl-side__open:hover {
  background-color: #f3eefb;
}

.awl-side__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--awl-text-brand);
  font-size: var(--fs-lg);
  text-decoration: none;
}

.awl-side__brand b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- ปุ่มลอยมุมซ้ายบน โผล่เฉพาะตอนแถบถูกซ่อน ---- */
.awl-side__open {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 40;
  display: none;
  background-color: #fff;
  border: 1px solid var(--awl-colorkey7);
  box-shadow: 0 2px 8px rgba(59, 35, 88, .12);
}

body.is-side-hidden .awl-side {
  display: none;
}

body.is-side-hidden .awl-side__open {
  display: inline-flex;
}

/* เนื้อหาต้องไม่ไปอยู่ใต้ปุ่มลอย */
body.is-side-hidden.awl-shell {
  padding-left: 66px;
}

/* ---- รายการเมนู ---- */
.awl-side__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 8px;
}

.awl-side__group + .awl-side__group {
  margin-top: 2px;
}

.awl-side__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--awl-text-brand);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.awl-side__btn:hover {
  background-color: #f3eefb;
}

/* ไอคอนหน้าชื่อกลุ่ม — บังคับขนาดจากที่นี่ที่เดียว ใส่ไฟล์รูปขนาดไหนมาก็ไม่ทำให้แถวเบี้ยว */
.awl-side__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.awl-side__text {
  flex: 1 1 auto;
  min-width: 0;
}

.awl-side__caret {
  display: inline-flex;
  flex: 0 0 auto;
  transition: transform .15s ease;
}

.awl-side__group.is-open .awl-side__caret {
  transform: rotate(180deg);
}

/* ของเดิมซ่อน/แสดงด้วย display ซึ่งทำให้เปลี่ยนทันทีแบบกระตุก
   grid-template-rows ยืดได้โดยไม่ต้องรู้ความสูงล่วงหน้า */
.awl-side__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .18s ease;
}

.awl-side__group.is-open .awl-side__sub {
  grid-template-rows: 1fr;
}

.awl-side__subin {
  overflow: hidden;
}

.awl-side__link {
  display: flex;
  align-items: center;
  gap: 8px;
  /* เยื้องเข้ามาให้เห็นว่าเป็นลูกของกลุ่มด้านบน */
  padding: 9px 12px 9px 24px;
  border-radius: 10px;
  color: var(--awl-colorkey4);
  font-size: var(--fs-md);
  text-decoration: none;
}

.awl-side__link > .awl-count {
  margin-left: auto;
}

.awl-side__link:hover {
  background-color: #f3eefb;
  color: var(--awl-text-brand);
}

.awl-side__link.is-active {
  background-color: var(--awl-btn-bg);
  color: #fff;
  font-weight: 600;
}

/* ---- ท้ายแถบ : ผู้ใช้ + ออกจากระบบ ---- */
.awl-side__foot {
  flex: 0 0 auto;
  padding: 10px;
  border-top: 1px solid var(--awl-colorkey7);
  background-color: #faf8fd;
}

/* แถบผู้ใช้เป็นปุ่ม กดแล้วเมนูออกจากระบบกางลงมา
   เดิมปุ่มออกจากระบบโผล่ค้างตลอดเวลา กินที่และกดผิดง่าย */
.awl-side__me {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  min-width: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.awl-side__me:hover {
  background-color: #f3eefb;
}

.awl-side__meinfo {
  flex: 1 1 auto;
  min-width: 0;
}

.awl-side__mename,
.awl-side__merole {
  display: block;
}

.awl-side__mecaret {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--awl-text-muted);
  transition: transform .15s ease;
}

.awl-side__foot.is-open .awl-side__mecaret {
  transform: rotate(180deg);
}

/* ยุบด้วย grid-template-rows เหมือนกลุ่มเมนู ไม่ใช่ display:none จะได้ยืดลงมานุ่ม ๆ
   และต้องมีกล่องชั้นใน (.awl-side__memenuin) ครอบ ไม่งั้นยุบไม่ลง */
.awl-side__memenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .18s ease;
}

.awl-side__foot.is-open .awl-side__memenu {
  grid-template-rows: 1fr;
}

.awl-side__memenuin {
  overflow: hidden;
}

.awl-side__memenuin > :first-child {
  margin-top: 8px;
}

.awl-side__mename {
  color: var(--awl-colorkey8);
  font-size: var(--fs-md);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.awl-side__merole {
  color: var(--awl-text-muted);
  font-size: var(--fs-sm);
}

.awl-side__logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid var(--awl-colorkey7);
  color: var(--awl-btn-danger);
  font-size: var(--fs-md);
  text-decoration: none;
}

.awl-side__logout:hover {
  background-color: #ffe6e6;
  color: var(--awl-btn-danger-hover);
}

/* ---- ฉากมืดหลังแถบ ใช้เฉพาะจอแคบ ---- */
.awl-side__scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background-color: rgba(59, 35, 88, .45);
}

@media screen and (max-width: 900px) {
  .awl-side {
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 0 24px rgba(59, 35, 88, .2);
  }

  body.is-side-open .awl-side {
    transform: translateX(0);
  }

  /* จอแคบไม่มีที่ให้แถบอยู่ในแถวเดียวกับเนื้อหา ปุ่มลอยจึงต้องเห็นตลอด
     ไม่ว่าค่าที่จำไว้จาก localStorage จะเป็นซ่อนหรือกาง */
  .awl-side__open,
  body.is-side-hidden .awl-side__open {
    display: inline-flex;
  }

  body.is-side-hidden .awl-side {
    display: flex;
  }

  body.awl-shell,
  body.is-side-hidden.awl-shell {
    /* เว้นที่ด้านบนให้ปุ่มลอย ไม่ใช่ด้านซ้าย เพราะจอแคบมีที่แนวนอนน้อย */
    padding: 64px 12px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .awl-side,
  .awl-side__sub,
  .awl-side__caret,
  .awl-side__memenu,
  .awl-side__mecaret {
    transition: none;
  }
}