/* ================================================================
   task_management_v2 — CSS ของโปรเจกต์
   ----------------------------------------------------------------
   สไตล์ "ทั้งหมด" อ้างอิงจาก Cuba template โดยตรง
   (template/cuba/template/*.html → assets/vendor/cuba/css/*  คัดลอกมาแบบไม่แก้ไข)

   ไฟล์นี้จึงถูกจำกัดให้เหลือเพียง 3 หมวดเท่านั้น:
     1) ฟอนต์ไทย                       — ข้อยกเว้นเดียวที่ตกลงกันไว้
     2) metric ที่ต้องปรับเพราะฟอนต์ไทย
     3) ปิดสไตล์ "เดโม" ของ Cuba ที่ขัดกับข้อมูลจริง (รวม Select2 ที่ Cuba ทำไว้เป็นเส้นประ)

   ห้ามเพิ่ม token สี / เงา / มุมโค้ง / layout ของตัวเองในไฟล์นี้
   ให้ใช้คลาสและตัวแปรของ Cuba แทน เช่น
     --theme-default, --body-font-color, --light-bg, --recent-box-bg
     .badge-light-*, .bg-light-*, .font-*, .f-w-500, .header-top,
     .common-space, .task-card, .recent-table, .small-stats, .kanban-*
   ================================================================ */

/* ---------- 1) ฟอนต์ไทย (ข้อยกเว้น) ----------
   Cuba ฝัง Rubik/Roboto ไว้ที่ body, หัวข้อ, ปุ่ม, การ์ด, ตาราง ฯลฯ
   จึง override ที่นี่ (โหลดท้ายสุด) แต่ยกเว้น <i>/<svg>/ไอคอนฟอนต์
   เพื่อไม่ให้ Font Awesome / Themify / IcoFont / Tabler เพี้ยน */
:root { --bs-body-font-family: 'Noto Sans Thai', 'Noto Sans', sans-serif; }

body,
body *:not(i):not(svg):not(.ti):not([class^="fa-"]):not([class*=" fa-"]):not([class^="icon-"]):not([class*=" icon-"]):not([class^="icofont"]):not([class*=" icofont"]) {
  font-family: 'Noto Sans Thai', 'Noto Sans', sans-serif !important;
}

code, pre, kbd, samp, .mono, .num-mono {
  font-family: 'IBM Plex Mono', 'Consolas', ui-monospace, monospace !important;
}

/* ---------- 2) metric ที่ต้องปรับเพราะฟอนต์ไทย ---------- */

/* Cuba: .badge{font-family:Roboto;font-weight:500;line-height:1.1;padding:.25em .5em}
   ฟอนต์ไทยกว้างกว่า Roboto จึงขยาย padding ให้ตัวอักษรไม่ชิดขอบ (ฟอนต์เดิมมาจากข้อ 1) */
.badge {
  font-weight: 500;
  line-height: 1.1;
  padding: .55em .5em;
}

/* Cuba: .btn{padding:.375rem 1.75rem} เป็นค่าตายตัว ทำให้ .btn-sm/.btn-lg ไม่ย่อ/ขยายตามขนาด
   คืนค่า padding ตามตัวแปรของ Bootstrap ให้เฉพาะ 2 คลาสนี้
   (ปุ่มขนาดปกติยังคงเป็นระยะของ Cuba ทุกประการ) */
.btn-sm, .btn-lg {
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
}

/* ---------- 3) ปิดสไตล์ "เดโม" ของ Cuba ---------- */

/* dashboard-12 ขีดฆ่ารายการที่ 2 และ 3 ใน .task-card ไว้ตายตัว (เดโมสื่อว่า "ทำเสร็จแล้ว")
   ข้อมูลจริงของเราไม่ได้เสร็จตามลำดับนั้น จึงต้องปิด */
.dashboard-12 .task-card .common-space:nth-child(2) span:last-child,
.dashboard-12 .task-card .common-space:nth-child(3) span:last-child {
  text-decoration: none;
}

/* Cuba สไตล์ Select2 ไว้แบบ "เดโม" ไม่ได้ตั้งใจให้ใช้เป็นช่องกรอกจริง:
     .select2-container--default .select2-selection--single { border:1px dashed #ccc }
     .select2-container .select2-selection--single { height:47px!important; padding:10px }
   กรอบเส้นประทำให้ดูเหมือนช่องที่ถูกปิดใช้งาน และถึงแม้ Cuba จะล็อกความสูงเป็น 47px
   ก็ไม่ได้ขยับลูกศรของ select2 (ต้นฉบับ top:1px;height:26px) ลูกศรจึงลอยสูงกว่ากึ่งกลางกล่อง
   ปรับให้ตรงกับ .form-select ของ Bootstrap โดยใช้ตัวแปรของ Bootstrap ล้วน ไม่มีค่าสีของตัวเอง */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  height: 70%;
}

/* Cuba ตั้งความสูงให้เฉพาะแบบเลือกเดี่ยว (47px) ส่วนแบบเลือกหลายค่ายังเป็น min-height:32px
   ของ select2 ต้นฉบับ วางคู่กันในฟอร์มเดียวจึงสูงไม่เท่ากัน — ใช้ค่าเดียวกับของ Cuba */
.select2-container--default .select2-selection--multiple {
  min-height: 47px;
}

/* Floating Input Control (template/base-input.html)
     <div class="form-floating"><select class="form-select" id="X">…</select><label for="X">…</label></div>
   Select2 ย้าย <select> ตัวจริงไปซ่อน (.select2-hidden-accessible — absolute + clip
   จึงไม่กินพื้นที่) แล้วแทรก <span class="select2"> เป็นกล่องที่มองเห็นแทน
   label ยังลอยขึ้นเองถูกต้อง เพราะ Bootstrap ใช้ selector พี่น้องแบบทั่วไป
   (.form-floating > .form-select ~ label) ซึ่ง <select> ที่ซ่อนอยู่ยัง match อยู่
   เหลือแค่ยก metric ของ .form-floating > .form-select มาใส่กล่องของ select2
   ค่าทั้งหมดคัดจาก bootstrap.css ตรง ๆ ไม่มีค่าที่คิดขึ้นเอง */

/* select2.css: .select2-container{display:inline-block;vertical-align:middle}
   กล่องของ select2 จึงวางอยู่บน "บรรทัดข้อความ" ทำให้ .form-floating สูงกว่ากล่องจริง
   (มีช่องว่างของบรรทัดค้างอยู่ใต้กล่อง ≈ line-height 1.5 ของ body)
   แถวไหนใช้ .align-items-end จะจัดชิดล่างที่ขอบของ .form-floating
   กล่องที่มองเห็นเลยลอยสูงกว่าช่อง <input> ข้าง ๆ ส่วนแถวที่จัดชิดบน (เช่นหน้าสร้างงาน)
   ช่องว่างตกไปอยู่ข้างล่างแบบมองไม่เห็น จึงดูปกติ

   แก้ 2 ชั้น: ทำให้กล่องแทนเป็น block เหมือน .form-floating > .form-select ของ Bootstrap
   และล็อกความสูงของ .form-floating ให้เท่ากับความสูงช่องควบคุมพอดี
   (ค่าเดียวกับ .form-floating > .form-select ใน bootstrap.css) เพื่อไม่ให้เหลือ
   ช่องว่างค้างไว้ ไม่ว่าจะมาจากบรรทัดของ inline-block หรือจากที่อื่น */
.form-floating > .select2-container {
  display: block;
}

.form-floating:has(> .select2-container) {
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
}

.form-floating > .select2-container--default .select2-selection--single {
  height: calc(3.5rem + calc(var(--bs-border-width) * 2)) !important;
  padding: 1.625rem 0.75rem 0.625rem;
  line-height: 1.25;
}

.form-floating > .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  line-height: inherit;
}

/* ---------- 4) กัน FOUC ของเมนู sidebar ----------
   สไตล์เมนูของ Cuba ทุกกฎถูก scope ผ่าน DOM ที่ SimpleBar สร้างขึ้นตอน runtime เช่น
     .page-wrapper.compact-wrapper ... .sidebar-links .simplebar-wrapper .simplebar-mask
     .simplebar-content-wrapper .simplebar-content > li ...
   ก่อน simplebar.min.js ทำงาน จึงไม่มี selector ไหน match เลย เมนูเลยวาดออกมาเป็น
   <ul><li> เปล่า ๆ (รูปแบบเพี้ยน) แล้วค่อยเด้งเข้าที่
   ซ่อนไว้จนกว่า SimpleBar จะใส่ data-simplebar="init" ให้ (visibility เพื่อคงพื้นที่ layout)
   พร้อม fallback: ถ้า JS พังหรือโหลดไม่ทัน 2 วินาที ก็ยังแสดงเมนูออกมาอยู่ดี */
.sidebar-wrapper .sidebar-links:not([data-simplebar]) {
  visibility: hidden;
  animation: tmSidebarReveal 0s 2s forwards;
}

@keyframes tmSidebarReveal {
  to { visibility: visible; }
}