/* ============================================================
   SunGroup Careers — component กรอกข้อมูล (ใช้ร่วมหน้าบ้าน + หลังบ้าน)
   · Combobox   ช่องเลือกที่พิมพ์ค้นหาได้
   · Datepicker ปฏิทินที่กดเลือกเดือน/ปีได้ทันที
   ทุกปุ่มสูงอย่างน้อย 44px เพื่อให้กดง่ายบนมือถือ
   ============================================================ */

:root{
  --ui-h:52px;              /* ความสูงช่องกรอก */
  --ui-tap:46px;            /* ขนาดปุ่มขั้นต่ำสำหรับนิ้ว */
  --ui-pop-bg:var(--surface,#fff);
  --ui-pop-brd:var(--mist,#EBE1DD);
  --ui-pop-shadow:0 2px 6px rgba(27,22,21,.06),0 30px 64px -28px rgba(120,18,14,.42);
}

/* ---------- ฉากหลังตอนเปิดแบบเด้งจากด้านล่าง ---------- */
.sg-backdrop{
  position:fixed;inset:0;z-index:1400;
  background:rgba(20,14,13,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .18s ease;
}
.sg-backdrop.on{opacity:1}
body.sg-noscroll{overflow:hidden}

/* ---------- กล่องลอยฐาน ---------- */
.sg-pop{
  position:fixed;z-index:1450;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--ui-pop-bg);color:var(--ink,#1B1615);
  border:1px solid var(--ui-pop-brd);border-radius:16px;
  box-shadow:var(--ui-pop-shadow);
  font-family:var(--f-ui,system-ui,sans-serif);font-size:15px;line-height:1.5;
  opacity:0;transform:translateY(-6px) scale(.985);
  transition:opacity .16s ease,transform .16s cubic-bezier(.16,1,.3,1);
  transform-origin:top center;
}
.sg-pop.up{transform:translateY(6px) scale(.985);transform-origin:bottom center}
.sg-pop.on{opacity:1;transform:none}

.sg-pop-hd{display:none}

/* ---------- แบบเด้งจากด้านล่าง (มือถือ) ---------- */
.sg-pop.sheet{
  top:auto!important;left:0!important;right:0;bottom:0;
  width:100%;max-width:100%!important;min-width:0!important;
  max-height:86vh;max-height:86dvh;
  border-radius:22px 22px 0 0;border-bottom:0;
  transform:translateY(100%);
  padding-bottom:env(safe-area-inset-bottom,0);
  display:flex;flex-direction:column;
  box-shadow:0 -12px 44px rgba(0,0,0,.38);
}
.sg-pop.sheet.on{transform:none}
.sg-pop.sheet .sg-pop-hd{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:16px 14px 12px;border-bottom:1px solid var(--ui-pop-brd);
  background:var(--ui-pop-bg);flex:none;
  cursor:grab;touch-action:none;user-select:none;
}
.sg-pop.sheet .sg-pop-hd b{
  flex:1;min-width:0;font-family:var(--f-display,serif);font-size:1.05rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sg-grab{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:44px;height:4.5px;border-radius:99px;background:var(--mist-2,#DCCFC9);
  pointer-events:none;
}
.cb-pop.sheet{
  height:min(86dvh,560px);
}
.cb-pop.sheet .cb-list{
  flex:1 1 auto;min-height:120px;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  touch-action:pan-y;
}
.sg-pop-x{
  flex:none;display:grid;place-items:center;width:38px;height:38px;
  border:0;border-radius:11px;background:var(--paper-2,#F4ECE8);color:var(--ink-2,#4C4C4C);cursor:pointer;
}
.sg-pop-x svg{width:18px;height:18px}
.sg-pop-x:active{background:var(--mist,#EBE1DD)}


/* ============================================================
   COMBOBOX
   ============================================================ */
.cb{position:relative;display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.cb-native{
  position:absolute!important;width:1px;height:1px;padding:0;margin:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;opacity:0;pointer-events:none;
}
.cb-btn{
  display:flex;align-items:center;gap:10px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  min-height:var(--ui-h);padding:11px 14px;
  font:inherit;font-size:15px;text-align:start;color:var(--ink,#1B1615);
  background:var(--surface,#fff);
  border:1.5px solid var(--mist,#EBE1DD);border-radius:13px;
  cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.cb-btn:hover{border-color:var(--mist-2,#DCCFC9)}
.cb-btn:focus-visible{outline:0;border-color:var(--ember,#C60505);box-shadow:0 0 0 4px rgba(198,5,5,.13)}
.cb-btn.ph{color:var(--ink-3,#8A7C78)}
.cb-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-chev{flex:none;width:17px;height:17px;color:var(--ink-3,#8A7C78);transition:transform .2s var(--ease,ease)}
.cb-btn[aria-expanded="true"] .cb-chev{transform:rotate(180deg)}
.fld.bad .cb-btn{border-color:var(--flare,#FE0000);background:rgba(254,0,0,.04)}

/* ช่องค้นหาในกล่อง */
.cb-pop{min-width:240px}
.cb-search{
  display:flex;align-items:center;gap:9px;flex:none;
  padding:11px 13px;border-bottom:1px solid var(--ui-pop-brd);
  background:var(--ui-pop-bg);
}
.cb-search svg{flex:none;width:17px;height:17px;color:var(--ink-3,#8A7C78)}
.cb-search input{
  flex:1;min-width:0;border:0;outline:0;background:none;
  font:inherit;font-size:16px;color:inherit;padding:2px 0;
}
.cb-search input::-webkit-search-cancel-button{-webkit-appearance:none}

.cb-list{flex:1;min-height:0;overflow-y:auto;padding:6px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.cb-o{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:var(--ui-tap);padding:10px 12px;
  font:inherit;font-size:15px;text-align:start;color:inherit;
  background:none;border:0;border-radius:10px;cursor:pointer;
}
.cb-o>span{flex:1;min-width:0}
.cb-o:hover,.cb-o.hi{background:var(--paper-2,#F4ECE8)}
.cb-o.on{background:rgba(198,5,5,.08);color:var(--ember,#C60505);font-weight:600}
.cb-o.clear{color:var(--ink-3,#8A7C78);font-style:italic}
.cb-o.new{color:var(--ember,#C60505);font-weight:600}
.cb-o mark{background:rgba(254,0,0,.16);color:inherit;border-radius:3px;padding:0 1px}
.cb-tick{flex:none;width:17px;height:17px}
.cb-empty{padding:26px 16px;text-align:center;color:var(--ink-3,#8A7C78);font-size:14px}


/* ============================================================
   DATEPICKER
   ============================================================ */
.dp{position:relative;display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.dp-field{
  display:flex;align-items:center;gap:10px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  min-height:var(--ui-h);padding:11px 14px;
  font:inherit;font-size:15px;text-align:start;color:var(--ink,#1B1615);
  background:var(--surface,#fff);
  border:1.5px solid var(--mist,#EBE1DD);border-radius:13px;
  cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease;
}
.dp-field:hover{border-color:var(--mist-2,#DCCFC9)}
.dp-field:focus-visible{outline:0;border-color:var(--ember,#C60505);box-shadow:0 0 0 4px rgba(198,5,5,.13)}
.dp-field>svg{flex:none;width:19px;height:19px;color:var(--ember,#C60505)}
.dp-field.ph{color:var(--ink-3,#8A7C78)}
.dp-field.ph>svg{color:var(--ink-3,#8A7C78)}
.dp-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-clear{
  flex:none;display:none;place-items:center;width:26px;height:26px;margin:-4px -4px -4px 0;
  border-radius:8px;color:var(--ink-3,#8A7C78);
}
.dp-clear svg{width:14px;height:14px}
.dp.has .dp-clear{display:grid}
.dp-clear:hover{background:var(--paper-2,#F4ECE8);color:var(--ember,#C60505)}
.fld.bad .dp-field{border-color:var(--flare,#FE0000);background:rgba(254,0,0,.04)}

.dp-pop{min-width:300px;padding:10px}
.dp-pop.sheet{padding:0 12px 12px}

/* แถบหัว: เดือน / ปี กดได้ทันที */
.dp-bar{display:flex;align-items:center;gap:6px;flex:none;padding:2px 0 10px}
.dp-picks{flex:1;display:flex;gap:6px;justify-content:center;min-width:0}
.dp-sel{
  display:flex;align-items:center;gap:5px;
  min-height:42px;padding:8px 12px;
  font:inherit;font-size:15px;font-weight:600;color:inherit;
  background:var(--paper-2,#F4ECE8);border:1.5px solid transparent;border-radius:11px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.dp-sel span{white-space:nowrap}
.dp-sel svg{width:15px;height:15px;color:var(--ink-3,#8A7C78);transition:transform .2s ease}
.dp-sel:hover{background:var(--mist,#EBE1DD)}
.dp-sel.on{background:rgba(198,5,5,.1);border-color:rgba(198,5,5,.28);color:var(--ember,#C60505)}
.dp-sel.on svg{transform:rotate(180deg);color:var(--ember,#C60505)}

.dp-nav{
  flex:none;display:grid;place-items:center;width:42px;height:42px;
  border:0;border-radius:11px;background:var(--paper-2,#F4ECE8);color:var(--ink-2,#4C4C4C);cursor:pointer;
  transition:background .15s ease;
}
.dp-nav svg{width:19px;height:19px}
.dp-nav:hover{background:var(--mist,#EBE1DD)}
.dp-nav:disabled{opacity:.3;cursor:not-allowed}

.dp-view{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}

/* ตารางวัน */
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding-bottom:6px}
.dp-dow span{
  text-align:center;font-size:12px;font-weight:600;letter-spacing:.03em;
  color:var(--ink-3,#8A7C78);
}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dp-d{
  display:grid;place-items:center;
  aspect-ratio:1/1;min-height:40px;
  font:inherit;font-size:15px;font-variant-numeric:tabular-nums;color:inherit;
  background:none;border:1.5px solid transparent;border-radius:11px;cursor:pointer;
  transition:background .13s ease,color .13s ease;
}
.dp-d:hover:not(:disabled){background:var(--paper-2,#F4ECE8)}
.dp-d.out{color:transparent;pointer-events:none}
.dp-d:disabled{opacity:.26;cursor:not-allowed}
.dp-d.today{border-color:var(--mist-2,#DCCFC9);font-weight:600}
.dp-d.on{
  background:var(--ember,#C60505);border-color:var(--ember,#C60505);color:#fff;font-weight:600;
  box-shadow:0 8px 18px -10px rgba(198,5,5,.75);
}

/* ตารางเดือน */
.dp-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:2px 0}
.dp-m{
  min-height:var(--ui-tap);padding:10px 4px;
  font:inherit;font-size:14.5px;color:inherit;
  background:var(--paper-2,#F4ECE8);border:1.5px solid transparent;border-radius:12px;cursor:pointer;
  transition:background .14s ease;
}
.dp-m:hover:not(:disabled){background:var(--mist,#EBE1DD)}
.dp-m:disabled{opacity:.3;cursor:not-allowed}
.dp-m.on{background:var(--ember,#C60505);border-color:var(--ember,#C60505);color:#fff;font-weight:600}

/* ตารางปี */
.dp-ybar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 8px}
.dp-ybar b{
  flex:1;text-align:center;font-family:var(--f-mono,monospace);font-size:14px;font-weight:600;
  color:var(--ink-2,#4C4C4C);letter-spacing:.02em;
}
.dp-ygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.dp-y{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:var(--ui-tap);padding:7px 2px;
  font:inherit;color:inherit;
  background:var(--paper-2,#F4ECE8);border:1.5px solid transparent;border-radius:11px;cursor:pointer;
  transition:background .14s ease;
}
.dp-y b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.dp-y i{font-style:normal;font-size:10.5px;color:var(--ink-3,#8A7C78);font-variant-numeric:tabular-nums;line-height:1}
.dp-y:hover{background:var(--mist,#EBE1DD)}
.dp-y.on{background:var(--ember,#C60505);border-color:var(--ember,#C60505);color:#fff}
.dp-y.on i{color:rgba(255,255,255,.72)}

/* แถบล่าง */
.dp-foot{
  display:flex;gap:8px;flex:none;
  padding:10px 0 2px;margin-top:8px;border-top:1px solid var(--ui-pop-brd);
}
.dp-mini{
  flex:1;min-height:42px;padding:9px 12px;
  font:inherit;font-size:14px;font-weight:600;color:var(--ember,#C60505);
  background:rgba(198,5,5,.08);border:0;border-radius:11px;cursor:pointer;
  transition:background .14s ease;
}
.dp-mini:hover{background:rgba(198,5,5,.14)}
.dp-mini.ghost{color:var(--ink-2,#4C4C4C);background:var(--paper-2,#F4ECE8)}
.dp-mini.ghost:hover{background:var(--mist,#EBE1DD)}


/* ============================================================
   ปรับสำหรับมือถือ — ปุ่มใหญ่ขึ้น อ่านง่ายขึ้น
   ============================================================ */
@media (max-width:680px){
  :root{--ui-h:54px}
  .cb-list{padding:6px 8px 14px}
  .cb-o{min-height:52px;font-size:16px;padding:12px 14px;border-radius:12px}
  .cb-search{padding:12px 14px}
  .dp-d{min-height:44px;font-size:16px}
  .dp-m,.dp-y{min-height:52px}
  .dp-mgrid{gap:8px}
  .dp-ygrid{gap:7px}
  .dp-view{padding-bottom:4px}
  .dp-foot{padding-bottom:6px}
}

/* จอสูงจำกัด — ให้รายการเลื่อนได้แทนที่จะล้น */
@media (max-height:520px){
  .sg-pop.sheet{max-height:92vh;max-height:92dvh}
}

@media (prefers-reduced-motion:reduce){
  .sg-pop,.sg-backdrop,.cb-chev,.dp-sel svg{transition:none!important}
}

/* ============================================================
   โหมดมืด — ใช้ตัวแปรชุดเดียวกับหน้าเว็บ
   ============================================================ */
:root[data-theme="dark"]{
  --ui-pop-shadow:0 2px 6px rgba(0,0,0,.5),0 30px 70px -28px rgba(0,0,0,.9);
}
:root[data-theme="dark"] .cb-o.on{background:rgba(240,35,26,.16)}
:root[data-theme="dark"] .cb-o mark{background:rgba(255,58,48,.26)}
:root[data-theme="dark"] .dp-mini{background:rgba(240,35,26,.16)}
:root[data-theme="dark"] .sg-backdrop{background:rgba(0,0,0,.62)}