/* ============================================
   components.css — UI Components ที่ใช้ซ้ำทั้งระบบ
   ทุกตัวใช้ token → theme-aware อัตโนมัติ
   ============================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  /* 🔴 ความสูงปุ่มมาตรฐานของทั้งระบบ = 36px ประกาศที่เดียวตรงนี้
     เดิมใช้ padding:.7rem 1.3rem แล้วไม่กำหนด height ผลคือ "ไอคอนข้างในเป็นตัวกำหนดความสูงปุ่ม"
     ปุ่มคลาสเดียวกันจึงสูงไม่เท่ากัน — วัดจริงได้ 39px (ไม่มีไอคอน) / 40px (ไอคอน 16) / 42px (ไอคอน 18)
     ส่วน btn-sm ได้ 30/31/32/33px แล้วแต่ไอคอน — ปุ่มที่เรียงกันในแถวเดียวเลยเหลื่อมกัน
     ⚠️ ห้ามใส่ padding บน/ล่างกลับมา และห้ามตั้ง height ซ้ำในคลาสย่อย
        (btn-sm / btn-head ปรับได้แค่ font-size กับ padding ซ้าย-ขวา)
        inline-flex + align-items:center จัดกึ่งกลางให้อยู่แล้ว ไอคอนขนาดไหนก็ไม่ดันความสูง */
  height: 36px;
  padding: 0 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  user-select: none;
}
/* ไอคอนในปุ่มต้องไม่ถูกบีบตอนปุ่มแคบ (เช่นบนมือถือ) */
.btn > svg { flex-shrink: 0; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ปุ่มหลัก (กฎ user: ใช้ btn-primary แทน btn-warning) */
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:not(:disabled):hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-ghost:not(:disabled):hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:not(:disabled):hover { filter: brightness(0.93); transform: translateY(-1px); }

.btn-block { width: 100%; }
/* ปุ่มเล็ก = ตัวอักษรเล็กลงและกระชับซ้าย-ขวา แต่ "ความสูงเท่าปุ่มปกติ" (36px จาก .btn) */
.btn-sm { padding: 0 0.85rem; font-size: 0.85rem; }

/* ---------- Card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-6);
}

/* ---------- Form ---------- */
.form-group { margin-bottom: var(--space-4); }
.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.form-input, .form-select {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 0.32rem 0.4rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input::placeholder { color: var(--text-faint); }
.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-input.is-invalid { border-color: var(--danger); }
/* ปุ่ม "เลือกไฟล์" ของ input[type=file] — ใช้ font + สไตล์ตามแอป (เดิม inherit ไม่ติด font) */
.form-input[type="file"] { padding: 0.22rem 0.4rem; line-height: 1.6; }
.form-input[type="file"]::file-selector-button,
.form-input[type="file"]::-webkit-file-upload-button {
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.7rem;
  margin-right: 0.6rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.form-input[type="file"]::file-selector-button:hover,
.form-input[type="file"]::-webkit-file-upload-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.form-error {
  display: block;
  font-size: 0.8rem;
  color: var(--danger);
  margin-top: var(--space-2);
  min-height: 1em;
}

/* input + icon (เช่น show/hide password) */
.input-wrap { position: relative; }
.input-wrap .input-action {
  position: absolute;
  right: 0.6rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px;
  display: flex;
}
.input-wrap .input-action:hover { color: var(--text); }

/* ---------- Alert ---------- */
.alert {
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  border: 1px solid transparent;
}
.alert-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger); }
.alert-success { background: var(--accent-soft);  color: var(--success); border-color: var(--success); }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-muted);
}
.badge-accent { background: var(--accent-soft); color: var(--accent); }

/* ---------- Modal (กฎ user: Modal-first ห้าม alert/confirm) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;   /* ตอนปิด: คลิกทะลุได้ ไม่บังหน้า */
  transition: opacity var(--transition), visibility var(--transition);
}
.modal-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--transition);
  --modal-px: 16px;  /* padding ซ้าย-ขวาเท่ากันทุก section */
}
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); }

/* header ตรึงบน (มี title + ปุ่มปิด) */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 16px var(--modal-px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-close {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  font-size: 1.5rem;
  line-height: 1;
}
.modal-close:hover { background: var(--danger-soft); color: var(--danger); }

.modal-title { font-size: 1.2rem; }
.modal-title-sub { font-size: 0.82rem; color: var(--text-faint); margin-top: 2px; }

/* เนื้อหา scroll ตรงกลาง */
.modal-content {
  padding: 16px var(--modal-px);
  overflow-y: auto;
  flex: 1;
}

.modal-body  { color: var(--text-muted); font-size: 0.95rem; }

/* actions ตรึงล่าง — padding-left 0 ให้ปุ่มชิดซ้ายสุด */
.modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-start;
  padding: 16px var(--modal-px);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ---------- ช่องกรอกที่ถูกล็อกใน modal ----------
   ก่อนหน้านี้ระบบไม่มีกฎนี้เลย ช่องที่ disabled จึงหน้าตาเหมือนช่องที่พิมพ์ได้
   (เช่น "ประเภทสมาชิก" ที่ล็อกถาวรหลังสร้าง — อยู่ในโหมดแก้ไขก็ยังดูเหมือนแก้ได้)
   ใช้พื้นเทาเดียวกับช่องอัตโนมัติอย่างรหัสสมาชิก/ชื่อผู้ใช้ ให้เป็นภาษาเดียวกันทั้งระบบ */
.modal-overlay .form-input:disabled,
.modal-overlay .form-select:disabled,
.modal-overlay textarea:disabled {
  background: var(--surface-2);
  cursor: not-allowed;
}

/* ---------- โหมดดูของ ModalEdit (คลาส view-mode ติดจาก list-info.js) ----------
   ช่องที่ล็อกต้อง "ดูออกว่าล็อก" แต่ยังอ่านง่าย — พื้นเทาเหมือนช่องอัตโนมัติ
   ไม่ใช้ opacity จาง เพราะจะดูเหมือนฟอร์มเสีย/โหลดไม่เสร็จ
   🔴 ถ้าไม่มีกฎนี้ โหมดดูจะหน้าตาเหมือนโหมดแก้ไขทุกอย่าง ผู้ใช้จะพิมพ์แล้วงงว่าทำไมพิมพ์ไม่ได้ */
.modal-overlay.view-mode .form-input:disabled,
.modal-overlay.view-mode .form-select:disabled,
.modal-overlay.view-mode textarea:disabled {
  opacity: 1;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
  cursor: default;
}
/* 🔴 -webkit-text-fill-color ด้านบนทับสีของ placeholder ด้วย ถ้าไม่ตั้งคืน
   ช่องว่างที่ล็อกอยู่จะโชว์ placeholder เป็นสีข้อความเต็ม ดูเหมือนมีข้อมูลจริง
   (เช่น "13 หลัก" ในช่องเลขบัตร จะอ่านเหมือนเป็นค่าที่บันทึกไว้) */
.modal-overlay.view-mode .form-input:disabled::placeholder,
.modal-overlay.view-mode textarea:disabled::placeholder {
  color: var(--text-faint);
  -webkit-text-fill-color: var(--text-faint);
}

/* modal เล็ก (ยืนยันลบ) ไม่ต้องมี border header/footer แยก ใช้ padding เดียว */
.modal-simple {
  display: block;        /* ยกเลิก flex column ของ .modal ทั่วไป */
  padding: var(--space-6);
}
.modal-simple .modal-actions { padding: var(--space-6) 0 0; border-top: none; }

/* ---------- ปุ่มสลับธีมแบบ pill (แยกปุ่ม สว่าง / มืด) ----------
   🔴 อยู่ใน components.css ไม่ใช่ auth.css — แถบเมนูข้างก็ใช้ชุดนี้
      ถ้าย้ายกลับไป auth.css ปุ่มในแถบเมนูจะไม่มีสไตล์ (หน้าอื่นไม่โหลด auth.css)
   ⚠️ ปุ่มธีมแบบเดิม (ปุ่มกลมปุ่มเดียว สลับไปมา) ถูกถอดออกแล้ว ไม่มีหน้าไหนเรียกใช้
      Layout::themeToggle() คืนค่า pill ชุดนี้แทน */
.theme-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.theme-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;              /* กันโดนบีบตอนอยู่ในแถวแคบ เช่นแถบเมนูตอนย่อ */
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.theme-pill-btn svg { width: 18px; height: 18px; }
.theme-pill-btn:hover { color: var(--text); }
.theme-pill-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ปุ่มของธีมที่ใช้อยู่ = ยกขึ้นมาเป็นพื้นตัดกับราง */
:root[data-theme="light"] .theme-pill-btn[data-theme-set="light"],
:root[data-theme="dark"]  .theme-pill-btn[data-theme-set="dark"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ---------- หน้า settings ---------- */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.settings-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.settings-card-head h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.settings-card-head svg { color: var(--accent); }
.settings-card-body {
  padding: var(--space-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4) var(--space-5);
}
.settings-card-body .form-group { margin-bottom: 0; }

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  position: sticky;
  bottom: 0;
  background: linear-gradient(transparent, var(--bg) 30%);
}
.alert-success {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(14, 165, 164, 0.25);
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

/* ---------- date range filter ---------- */
.date-range { display: flex; gap: var(--space-2); align-items: center; }
.date-range input[type="date"] { min-width: 140px; }
/* icon ปฏิทินตามธีม — dark mode invert ให้เป็นสีอ่อน (ครอบทั้ง date และ month) */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.85);
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.date-sep { color: var(--text-faint); font-size: 0.85rem; }

/* ---------- cleanup box (audit/otp) ---------- */
.cleanup-box {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 0.85rem; color: var(--text-muted);
  padding-left: var(--space-2); border-left: 1px solid var(--border);
}
.cleanup-box input[type="number"] { text-align: center; }

/* ---------- Profile identity (รูป + ข้อมูล) ---------- */
.profile-identity {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.profile-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  overflow: hidden;
  flex-shrink: 0;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: var(--space-3) var(--space-6);
  flex: 1; min-width: 260px;
}
.profile-field { display: flex; flex-direction: column; gap: 2px; }
.profile-field-label { font-size: 0.78rem; color: var(--text-faint); }
.profile-field-value { font-size: 0.95rem; color: var(--text); }
@media (max-width: 640px) {
  .profile-fields { grid-template-columns: 1fr; }

  /* มือถือ: modal ทุกตัวชิดบน (กลางจอจะอยู่ต่ำ เลื่อนหายาก) — บังคับครอบ inline/override ทั้งหมด */
  .modal-overlay { align-items: flex-start !important; overflow-y: auto; padding-top: var(--space-4) !important; }
  .modal { max-height: none !important; margin: 0 auto !important; }
}

/* ============================================
   OTP boxes — ช่องกรอกรหัสแยกช่องละหลัก
   ใช้ทั้งหน้า login (ยืนยัน 2FA) และโมดัลผูกแอป Authenticator
   ============================================ */
.otp-boxes {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  /* ⚠️ ห้ามใส่ overflow:hidden — ขอบ focus ของช่องริมจะโดนตัด */
}
.otp-box {
  width: 46px;
  height: 54px;
  flex: 0 1 46px;            /* ย่อได้เมื่อจอแคบ แต่ไม่ยืดจนกล่องเบี้ยว */
  min-width: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
  -moz-appearance: textfield;
}
.otp-box::-webkit-outer-spin-button,
.otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.otp-box:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.otp-box.filled { border-color: var(--accent); }

/* จอแคบ: 8 หลักต้องยังอยู่ในบรรทัดเดียว ไม่ตกบรรทัด */
@media (max-width: 420px) {
  .otp-boxes { gap: 6px; }
  .otp-box { height: 48px; font-size: 1.15rem; flex-basis: 38px; }
}

/* ---- ขั้นยืนยัน 2FA บนหน้า login ---- */
.otp-lead {
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0 0 var(--space-5);
}
.otp-label {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  margin-bottom: var(--space-3);
}
/* รหัสอ้างอิงใต้ช่องกรอก OTP — ต้องตรงกับที่ได้รับใน LINE/อีเมล
   ตัวเล็กและจาง เพราะไม่ใช่สิ่งที่ต้องกรอก แค่ไว้ "เทียบ"
   ⚠️ line-height 1.6 — ข้อความไทยคู่กับกล่องเตี้ยจะโดนตัดวรรณยุกต์
      (ดู docs/README-thai-tone-clipped.md) */
.otp-ref {
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-faint);
  margin: var(--space-3) 0 0;
}
.otp-ref strong {
  color: var(--text-muted);
  letter-spacing: 2px;
  font-weight: 600;
}

.otp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  font-size: 0.8rem;
}
/* ลิงก์เปลี่ยนช่องทางอาจมีมากกว่า 1 ตัว — ต้องมีระยะห่าง ไม่งั้นข้อความติดกันเป็นก้อนเดียว */
#switchBtns {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* ช่องทางที่กำลังใช้อยู่ — อยู่ในรายการด้วยเพื่อให้เห็นครบว่าผูกอะไรไว้บ้าง
   ⚠️ ใช้สี text ปกติ ไม่ใช่สี accent เหมือนตัวอื่น เพราะตัวนี้กดไม่ได้
      ถ้าย้อมสี accent เหมือนกันหมด ผู้ใช้จะกดแล้วไม่เกิดอะไรขึ้น */
.ch-current {
  color: var(--text);
  font-weight: 600;
  cursor: default;
}
/* ช่องทางที่ระบบเปิดใช้ แต่บัญชีนี้ยังไม่ได้ผูก — โชว์ให้รู้ว่ามี แต่กดไม่ได้
   ⚠️ ต้องจางกว่า .link-btn:disabled ที่ใช้ตอนนับถอยหลังอย่างเห็นได้ชัด
      ไม่งั้นแยกไม่ออกระหว่าง "รออีกแป๊บก็กดได้" กับ "กดไม่ได้จนกว่าจะไปผูก" */
.ch-off {
  color: var(--text-faint);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.75;
}
/* 🔴 "ขอรหัสใหม่" เป็นคนละเรื่องกับรายการช่องทาง แต่สีเดียวกัน
      ถ้าปล่อยให้ไหลต่อท้าย LINE บนจอกว้าง จะอ่านเหมือนเป็นช่องทางที่ 4
      จึงบังคับขึ้นบรรทัดใหม่เสมอ — ได้ผลเหมือนกันทั้งจอกว้างและมือถือ
      (การ์ด login กว้างราว 380px อยู่แล้ว ใส่ตัวคั่นเฉย ๆ ก็ยังตกบรรทัดอยู่ดี
       แต่ตกแบบเดาไม่ได้ ขึ้นกับว่าตัวเลขนับถอยหลังยังโชว์อยู่ไหม) */
#btn2faResend {
  flex-basis: 100%;
  margin-top: 2px;
}
/* "← เข้าสู่ระบบใหม่" อยู่กึ่งกลางเสมอ
   ⚠️ .otp-foot เป็น space-between พอปุ่มนี้ตกไปอยู่บรรทัดของตัวเอง (ซึ่งเกิดเกือบทุกครั้ง
      เพราะการ์ด login กว้างราว 380px) space-between จะดันไปชิดซ้าย ไม่ใช่กึ่งกลาง
   ⇒ ให้กินเต็มบรรทัดแล้วจัดข้อความกลางเอง จะได้ผลเหมือนกันทุกกรณี
      รวมตอนที่ไม่มีช่องทางอื่นให้สลับ (แถวบนถูกซ่อน เหลือปุ่มนี้ปุ่มเดียว) */
#btn2faBack {
  flex: 1 1 100%;
  text-align: center;
}
.otp-foot-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;   /* ⚠️ ไม่ใส่ = flex item ไม่ยอมเล็กกว่าเนื้อหา แล้วดันปุ่มขวาตกบรรทัด */
}

/* ลิงก์ข้อความที่ทำงานเหมือนปุ่ม (ไม่ใช้ <a href="#"> เพราะกดแล้วกระโดดหัวหน้า) */
.link-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition);
}
.link-btn:hover { color: var(--accent-hover); }
.link-btn:disabled { color: var(--text-faint); cursor: default; }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ============================================
   ตัวกรองวันที่ (date-filter.js) — ปุ่ม + dropdown ปฏิทิน · สีตามธีม
   ============================================ */
.dr-hidden, .dr-orig { display: none !important; }
/* ปุ่มแทนช่องวันที่ — ถือคลาสเดิมของช่อง (form-input) จึงได้ขนาด/ขอบ/สถานะ disabled เหมือนช่องอื่นในฟอร์ม */
.dr-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; color: var(--text); white-space: nowrap; text-align: left; cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.dr-trigger.form-input { display: flex; }
.dr-trigger:not(.form-input) {          /* ช่องที่ไม่มีคลาส form-input */
  height: 34px; padding: 0 0.6rem; font-size: 0.82rem;
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm);
}
.toolbar .dr-trigger.is-range { min-width: 150px; flex: 0 0 auto; width: auto; }
.dr-trigger.is-range .dr-text { overflow: visible; text-overflow: clip; }   /* ช่วงวันที่ต้องเห็นครบทั้งสองค่า */
.dr-trigger svg { color: var(--text-muted); flex: none; }
.dr-trigger .dr-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.dr-trigger .dr-caret { transition: transform var(--transition); }
.dr-trigger:hover:not(:disabled) { border-color: var(--border-strong); }
.dr-trigger.is-open, .dr-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dr-trigger.is-open .dr-caret { transform: rotate(180deg); }
.dr-trigger.is-empty .dr-text { color: var(--text-faint); }
.dr-trigger:disabled, .dr-trigger.is-readonly { cursor: not-allowed; }
.dr-trigger:disabled .dr-caret, .dr-trigger.is-readonly .dr-caret { opacity: 0; }

.dr-panel {
  position: fixed; z-index: 1200; display: flex; gap: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); font-size: 0.82rem; color: var(--text); overflow: hidden;
  max-width: calc(100vw - 16px);
}
.dr-panel[hidden] { display: none; }
.dr-presets { display: flex; flex-direction: column; gap: 2px; padding: 8px; min-width: 128px;
  background: var(--surface-2); border-right: 1px solid var(--border); }
.dr-preset { text-align: left; padding: 7px 10px; border: 0; border-radius: var(--radius-sm); background: transparent;
  font: inherit; color: var(--text); cursor: pointer; }
.dr-preset:hover { background: var(--surface-3); }
.dr-preset.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.dr-cal { padding: 10px 12px 8px; width: 262px; }
.dr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dr-month { font-weight: 600; font-size: 0.88rem; }
.dr-nav { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; }
.dr-nav:hover { background: var(--surface-2); }
.dr-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; }
.dr-dow { text-align: center; font-size: 0.72rem; color: var(--text-faint); padding: 4px 0; }
.dr-day { height: 32px; border: 0; background: transparent; font: inherit; color: var(--text); cursor: pointer; border-radius: 0; }
.dr-day:hover:not(:disabled):not(.is-start):not(.is-end) { background: var(--surface-2); border-radius: var(--radius-sm); }
.dr-day:disabled { color: var(--text-faint); opacity: .45; cursor: not-allowed; }
.dr-day.is-today { font-weight: 700; color: var(--accent); }
.dr-day.in-range { background: var(--accent-soft); }
.dr-day.is-start, .dr-day.is-end { background: var(--accent); color: #fff; font-weight: 600; }
.dr-day.is-start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dr-day.is-end { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dr-day.is-start.is-end { border-radius: var(--radius-sm); }
.dr-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px;
  padding-top: 6px; border-top: 1px solid var(--border-soft); }
.dr-hint { font-size: 0.72rem; color: var(--text-faint); }
.dr-link { border: 0; background: transparent; font: inherit; color: var(--accent); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); }
.dr-link:hover { background: var(--accent-soft); }
.dr-link[data-clear] { color: var(--text-muted); }
.dr-today { margin-left: auto; }

/* ตัวเลือกเดือน */
.is-month .dr-cal { width: 236px; }
.dr-mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 0 2px; }
.dr-mon { height: 38px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; color: var(--text); cursor: pointer; }
.dr-mon:hover:not(:disabled):not(.is-start) { background: var(--surface-2); }
.dr-mon:disabled { color: var(--text-faint); opacity: .45; cursor: not-allowed; }
.dr-mon.is-today { font-weight: 700; color: var(--accent); }
.dr-mon.is-start { background: var(--accent); color: #fff; font-weight: 600; }
/* ตัวเลือกเวลา (date-filter.js โหมด time) — 24 ชม. · คอลัมน์ชั่วโมง | นาที */
.is-time .dr-cal { width: 318px; }
.dr-tcols { display: grid; grid-template-columns: 1fr 112px; gap: 10px; }
.dr-tcol + .dr-tcol { border-left: 1px solid var(--border); padding-left: 10px; }
.dr-tlbl { font-size: 0.72rem; color: var(--text-faint); margin: 2px 0 6px; }
.dr-tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.dr-tgrid.is-min { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 216px; overflow-y: auto; }
.dr-tbtn { height: 32px; font-variant-numeric: tabular-nums; }


@media (max-width: 560px) {
  .dr-panel { flex-direction: column; }
  .dr-presets { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); min-width: 0; }
  .dr-cal { width: auto; }
  .toolbar .dr-trigger { flex: 1 1 100%; }
}