/* TEGH นัดหมาย — รายการตัวเลือก (dropdown) แบบเดียวกันทั้งระบบ
   ใช้ "customizable select" (appearance: base-select) ของ Chrome/Edge 135+ — ตกแต่งกล่องรายการได้ด้วย CSS ล้วน
   ฟอร์มทำงานเหมือนเดิมทุกอย่าง (onchange · ส่งฟอร์ม · ค้นหาอัตโนมัติ) · เบราว์เซอร์ที่ไม่รองรับ (iOS Safari ฯลฯ) เห็นแบบเดิม
   ข้อความเสริมใน option: <span class="opt-sub"> (จาง) · <span class="opt-tag"> (ป้าย) — ใส่ตัวคั่นเป็นข้อความไว้ในสแปน
   เพื่อให้เบราว์เซอร์เก่าที่ตัดแท็กทิ้งยังอ่านต่อกันได้ */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple]):not([size])::picker(select) { appearance: base-select; }

  /* ข้อความในช่องยาวเกิน → ตัดบรรทัดเดียว ไม่ให้ช่องสูงขึ้น */
  select:not([multiple]):not([size]) { cursor: pointer; white-space: nowrap; overflow: hidden; }
  select:not([multiple]):not([size]):open {
    border-color: var(--info, #638ca5);
    box-shadow: 0 0 0 3px var(--info-soft, #eaf0f4);
  }

  /* ลูกศร — ตรึงชิดขวาเสมอ (ข้อความยาวจางหายใต้ลูกศร ไม่ดันลูกศรตกขอบ) · ตอนเปิดชี้ขึ้น */
  select:not([multiple]):not([size]) { position: relative; }
  select:not([multiple]):not([size])::picker-icon {
    content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 36px;
    border-start-end-radius: inherit; border-end-end-radius: inherit;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8ca3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px 16px no-repeat,
                linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 12px);
  }
  select:not([multiple]):not([size]):open::picker-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23638ca5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E"), linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 12px);
  }

  /* กล่องรายการ */
  select::picker(select) {
    border: 1px solid var(--card-border, #dee1e7);
    border-radius: 12px;
    background: #fff;
    padding: 6px;
    margin-block: 6px;
    box-shadow: 0 18px 38px -12px rgba(31, 42, 54, .30), 0 2px 6px rgba(31, 42, 54, .08);
    max-block-size: min(360px, 60vh);
    max-inline-size: min(520px, calc(100vw - 24px));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--card-border, #dee1e7) transparent;
    opacity: 0; translate: 0 -4px;
    transition: opacity .14s ease, translate .14s ease, overlay .14s allow-discrete, display .14s allow-discrete;
  }
  select:open::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style { select:open::picker(select) { opacity: 0; translate: 0 -4px; } }

  /* แต่ละตัวเลือก */
  select option {
    display: flex; align-items: center; gap: 8px;
    min-block-size: 40px; padding: 8px 12px; border-radius: 8px;
    font-size: .93rem; line-height: 1.35; color: #3b4757;
    font-variant-numeric: tabular-nums; white-space: normal;
  }
  select option:hover,
  select option:focus-visible { background: var(--info-soft, #eaf0f4); outline: none; }
  select option:checked {
    background: var(--primary-soft, #e8f6ef); color: var(--ok-text, #1f7a44); font-weight: 600;
  }
  select option:checked:hover { background: #dcf1e6; }
  select option::checkmark {
    order: 9; margin-inline-start: auto; padding-inline-start: 10px;
    color: var(--primary, #54c08a); font-weight: 800;
  }
  select option:disabled { opacity: .45; cursor: not-allowed; }

  /* ตัวเลือก "ทั้งหมด" ที่หัวรายการ (value ว่าง เช่น — ทุกวัน —) — สีจาง + เส้นคั่นจากรายการจริง */
  select option[value=""]:first-child:not(:only-child) {
    color: var(--text-soft, #7f8ca3); font-weight: 500;
    border-block-end: 1px dashed var(--card-border, #dee1e7);
    border-end-start-radius: 0; border-end-end-radius: 0;
    margin-block-end: 4px;
  }
  select option[value=""]:first-child:checked { color: var(--ok-text, #1f7a44); font-weight: 600; }

  select optgroup { padding: 4px 0; font-size: .74rem; font-weight: 700; color: var(--text-faint, #97a8b6); letter-spacing: .02em; }
  select optgroup option { font-weight: 400; }

  /* ข้อความเสริมในตัวเลือก (.opt-sep = ตัวคั่นไว้ให้เบราว์เซอร์เก่าอ่าน — ที่นี่ใช้ช่องว่างแทน) */
  select .opt-sep { display: none; }
  select .opt-sub { color: var(--text-faint, #97a8b6); font-size: .84em; font-weight: 500; }
  select .opt-tag {
    padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap;
    background: var(--primary-soft, #e8f6ef); color: var(--ok-text, #1f7a44);
  }
  select option:checked .opt-tag { background: #fff; }
  select .opt-warn { color: var(--orange, #f46800); font-size: .84em; font-weight: 600; }

  @media (prefers-reduced-motion: reduce) {
    select::picker(select) { transition: none; }
  }
}