/* ===================================================================
   app.css — สไตล์กลางของหน้าเว็บ HR Connect 2.5 บน Firebase Hosting
   ===================================================================
   ที่มา: คัดลอกมาจาก <style> ของหน้า Apps Script เดิมแบบยกก้อน
   (HR Connect 2.5 - HR | Summary) แล้วดึงเฉพาะตัวแปรสีออกมาเป็น theme

   กติกาสำคัญ — อ่านก่อนแก้:
   - ห้ามเขียนสไตล์ใหม่เองในหน้าใดหน้าหนึ่ง ให้ใช้ไฟล์นี้เสมอ
   - หน้าใหม่ (New Hire / Resignation) ให้ใส่ class ธีมที่ <body>
     แล้วเปลี่ยนแค่ --primary / --primary-dark / --bg-soft เท่านั้น
   - ถ้าแก้ส่วนกลางในไฟล์นี้ จะมีผลกับทุกหน้าพร้อมกัน ซึ่งเป็นสิ่งที่ต้องการ
     เพราะที่ผ่านมาแต่ละหน้าเขียนสีเองจนเพี้ยนไม่ตรงกัน

   ธีมสีของแต่ละหน้า (ค่าตรงกับหน้า Apps Script ที่ใช้งานจริงทุกตัว)
   -------------------------------------------------------------------
   ฝั่ง HR      theme-summary      #344054   Summary
                theme-newhire      #2878A5   New Hire System
                theme-resignation  #A65368   Resignation System
   ฝั่ง Branch  theme-branch-tab1  #596780   ประวัติผู้สมัคร
                theme-branch-tab2  #167D78   นัดสัมภาษณ์งาน
                theme-branch-tab3  #7656A8   เอกสารสมัครงาน
                theme-branch-tab4  #8E4055   พนักงานลาออก
   =================================================================== */

:root{
  /* ค่ากลางที่ทุกหน้าใช้เหมือนกันหมด ห้ามแก้เป็นรายหน้า */
  --bg-page:#F8FAFC;
  --card-bg:#FFFFFF;
  --text:#1F2430;
  --text-muted:#6B7280;
  --border:#E3E7ED;
  --green:#2E9E5B;
  --amber:#D9922B;
  --red:#D64545;

  /* ค่าเริ่มต้น = ธีม Summary เผื่อลืมใส่ class ธีมที่ body */
  --primary:#344054;
  --primary-dark:#232D3B;
  --bg-soft:#F2F4F7;

  /* ชื่อเก่าที่หน้า Firebase รุ่นแรกใช้ เก็บไว้เป็นชื่อพ้องไม่ให้ของเดิมพัง
     ถ้าเขียนหน้าใหม่ ให้ใช้ชื่อฝั่ง Apps Script (--text, --border, --green …) */
  --ok:var(--green);
  --warn:var(--amber);
  --err:var(--red);
  --ink:var(--text);
  --ink-soft:var(--text-muted);
  --ink-faint:var(--text-muted);
  --line:var(--border);
  --paper:var(--bg-page);
  --navy:var(--primary);
  --navy-deep:var(--primary-dark);
}

.theme-summary      { --primary:#344054; --primary-dark:#232D3B; --bg-soft:#F2F4F7; }
.theme-newhire      { --primary:#2878A5; --primary-dark:#1C5C81; --bg-soft:#EAF4F8; }
.theme-resignation  { --primary:#A65368; --primary-dark:#844050; --bg-soft:#F9EDF0; }
.theme-branch-tab1  { --primary:#596780; --primary-dark:#465066; --bg-soft:#EEF1F5; }
.theme-branch-tab2  { --primary:#167D78; --primary-dark:#125F5B; --bg-soft:#E7F4F2; }
.theme-branch-tab3  { --primary:#7656A8; --primary-dark:#5A4084; --bg-soft:#F2EDF8; }
.theme-branch-tab4  { --primary:#8E4055; --primary-dark:#6E313F; --bg-soft:#F7ECEF; }

/* -------------------------------------------------------------------
   ส่วนกลาง — คัดลอกจากหน้า Apps Script แบบไม่แก้ค่า
   ------------------------------------------------------------------- */

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg-page); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Sarabun",sans-serif;
}
.topbar{
  background:var(--primary); color:#fff; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.topbar-left{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.topbar h1{font-size:24px; font-weight:700; margin:0; letter-spacing:.2px; white-space:nowrap}
.topbar h1 .sep{margin:0 10px; opacity:.5; font-weight:400}
.topbar h1 .sub{font-weight:600}
.topbar-right{display:flex; align-items:center; gap:10px}
.topbar .search-box{
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35);
  color:#fff; border-radius:8px; padding:7px 12px; font-size:13px; width:220px;
}
.topbar .search-box::placeholder{color:rgba(255,255,255,.75)}
.topbar .sync-btn{
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35);
  color:#fff; border-radius:8px; padding:7px 14px; font-size:13px; cursor:pointer; white-space:nowrap;
}
.topbar .sync-btn:hover{background:rgba(255,255,255,.25)}
.container{padding:22px 28px 60px}

.tab-nav-wrap{display:flex; justify-content:center; padding:16px 0 6px; background:var(--bg-page)}
.tab-nav-pill{background:#20242f; border-radius:999px; padding:6px; display:inline-flex; gap:4px; box-shadow:0 6px 16px rgba(0,0,0,.15)}
.tab-pill-btn{
  display:flex; align-items:center; gap:7px; padding:9px 20px; border-radius:999px;
  color:rgba(255,255,255,.55); text-decoration:none; font-size:13.5px; font-weight:600;
  transition:all .25s cubic-bezier(.4,0,.2,1); white-space:nowrap;
}
.tab-pill-btn svg{width:16px; height:16px; flex-shrink:0}
.tab-pill-btn:hover{color:#fff}
.tab-pill-btn.active{background:var(--primary); color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.28); transform:translateY(-1px)}
.tab-pill-btn:active{transform:scale(.95)}

.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px}
.filters select{
  padding:9px 12px; border:1px solid var(--border); border-radius:8px;
  background:#fff; font-size:13.5px; color:var(--text); min-width:150px;
}

/* Scorecards: การ์ด 1 ใหญ่ซ้าย + ตาราง 4x2 ทางขวา */
.scorecards-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:22px}
@media (max-width:900px){.scorecards-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.scorecards-grid{grid-template-columns:1fr}}

.scorecard{
  border-radius:16px; padding:16px 18px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  display:flex; flex-direction:column; justify-content:center; gap:8px;
}
.scorecard.big{padding:24px; justify-content:center}
.scorecard .label{font-size:14px; font-weight:700; line-height:1.3}
.scorecard.big .label{font-size:16px}
.scorecard .num-chip{
  border-radius:13px; padding:8px 16px; font-size:24px; font-weight:800;
  text-align:center; align-self:flex-start;
}
.scorecard.big .num-chip{font-size:44px; padding:6px 22px}
.sc-primary{background:var(--primary); color:#fff}
.sc-primary .num-chip{background:rgba(255,255,255,.2); color:#fff}
.sc-green{background:#DFF6E7; color:#1B7A44}
.sc-green .num-chip{background:#fff; color:#1B7A44}
.sc-red{background:#FBE2E2; color:#C0392B}
.sc-red .num-chip{background:#fff; color:#C0392B}
.sc-orange{background:#FCE9D2; color:#B4650F}
.sc-orange .num-chip{background:#fff; color:#B4650F}

.section-divider{
  display:flex; align-items:center; gap:12px; margin:26px 0 18px; color:var(--text-muted);
  font-size:13px; font-weight:600;
}
.section-divider::before, .section-divider::after{ content:''; flex:1; height:1px; background:var(--border); }

/* รายการพนักงาน 1 แถวต่อคน */
.two-col-wrap{display:grid; grid-template-columns:60fr 40fr; gap:0; align-items:start}
@media (max-width:1100px){.two-col-wrap{grid-template-columns:1fr}}
.col-half{min-width:0; padding-right:20px}
.col-half:last-child{padding-right:0; padding-left:20px; border-left:1.5px solid var(--border)}
.global-submit-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#FEF6D8; border:1.5px solid var(--amber); border-radius:10px;
  padding:10px 16px; margin-bottom:16px; position:sticky; top:8px; z-index:10;
}
.global-submit-bar #global-submit-count{font-size:13px; font-weight:600; color:#9C7A0E}
.global-submit-btn{
  padding:9px 18px; border-radius:8px; border:none; background:var(--amber);
  color:#fff; font-size:13px; font-weight:700; cursor:pointer;
}
.global-submit-btn:hover{background:#bf7f1f}
.emp-list-pending-row{
  background:var(--card-bg); border-radius:12px; border:1px solid var(--border);
  border-left:8px solid #ccc; padding:10px 14px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.emp-field-auto{display:flex; flex-direction:column; flex-shrink:0}
.emp-field-auto .k{font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em}
.emp-field-auto .v{font-size:13px; font-weight:600; color:var(--text); white-space:nowrap}
.emp-list{display:flex; flex-direction:column; gap:8px}
.emp-row{
  background:var(--card-bg); border-radius:12px; border:1px solid var(--border);
  border-left:8px solid #ccc; padding:12px 18px;
  display:flex; align-items:center; gap:14px;
}
.emp-row img.avatar, .emp-row .avatar-fallback,
.emp-list-pending-row img.avatar, .emp-list-pending-row .avatar-fallback{
  width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--bg-soft);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:16px; font-weight:600;
}
.emp-main{display:flex; flex-direction:column; gap:8px; flex:1; min-width:0}
.emp-fields-line{
  display:grid; align-items:start; column-gap:16px; row-gap:8px;
  grid-template-columns:72px minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,1.4fr) minmax(0,1.6fr) minmax(0,1.3fr);
}
.emp-date-status-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.emp-field{display:flex; flex-direction:column; min-width:0}
.emp-field .k{font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; white-space:nowrap}
.emp-field .v{font-size:13px; font-weight:600; color:var(--text); overflow-wrap:anywhere}
.emp-field.startdate-field .v{color:#1B7A44; font-weight:700; white-space:nowrap}
/* จอแคบ: แบ่งเป็น 3 คอลัมน์ 2 แถว แทนการบีบให้ข้อความตกบรรทัด */
@media (max-width:1100px){
  .emp-fields-line{grid-template-columns:72px minmax(0,1.6fr) minmax(0,1fr)}
}
.emp-date-badge{width:130px; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0;
  background:#E1EBFA; color:#1F4E96; border-radius:8px; padding:5px 10px; font-size:11px;
}
.emp-date-badge .k{font-size:9.5px; opacity:.85}
.emp-date-badge .v{font-size:12px; font-weight:700}
.emp-status-col{display:flex; flex-direction:row; flex-wrap:wrap; gap:4px; align-items:center; flex-shrink:0}
.emp-status-text{font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap}
.emp-status-green{background:#DFF6E7; color:#1B7A44}
.emp-status-red{background:#FBE2E2; color:#C0392B}
.emp-status-orange{background:#FCE9D2; color:#B4650F}
.emp-checks{display:flex; gap:5px; flex-shrink:0; margin-left:auto; padding-left:10px; border-left:1px solid var(--border)}
.emp-check{display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; user-select:none}
.emp-check .lbl{font-size:8.5px; color:var(--text-muted); white-space:nowrap; text-align:center}
.emp-check.resign-locked .lbl{color:#C0392B}
.chk-box{
  width:22px; height:22px; border-radius:6px; background:#344054;
  display:flex; align-items:center; justify-content:center; transition:background .12s ease;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
.chk-box svg{width:13px; height:13px; stroke:#fff; stroke-width:3; fill:none; opacity:0; transition:opacity .12s ease}
.chk-box.checked{background:var(--green)}
.chk-box.checked svg{opacity:1}
.chk-box.resign-locked-bg{background:#F8D7D7}
.chk-box.pending-ring{box-shadow:0 0 0 3px rgba(217,146,43,.55)}
.emp-submit-btn{
  flex-shrink:0; padding:8px 14px; border-radius:8px; border:none; background:var(--amber);
  color:#fff; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.emp-submit-btn:hover{background:#bf7f1f}
.emp-check input[type=checkbox]{display:none}
.empty{color:var(--text-muted); font-size:14px; padding:40px; text-align:center}
  

/* ===================================================================
   ส่วนเสริมเฉพาะหน้าเว็บบน Firebase
   ===================================================================
   หน้า Apps Script ไม่มีของพวกนี้ เพราะ Apps Script ล็อกอินให้เองอยู่แล้ว
   และไม่มีปุ่มบันทึกแยก (บันทึกผ่าน google.script.run ทันที)
   ทั้งหมดในส่วนนี้ใช้ตัวแปรสีชุดเดียวกับด้านบน ไม่มีสีฝังตายในโค้ด
   =================================================================== */

/* หน้ารอตรวจสิทธิ์ / ข้อความสถานะ */
.state{padding:36px; text-align:center; color:var(--text-muted); font-size:14px}
.hidden{display:none}
/* เต็มความกว้างจอ ไม่จำกัดกรอบกลาง — ให้เหมือนหน้า Apps Script ที่ใช้ .container
   เดิมจำกัดไว้ 1180px ทำให้จอกว้างเหลือขอบขาวสองข้างและการ์ดสรุปดูลอย */
.wrap{max-width:none; margin:0; padding:22px 28px 60px}
.count{font-size:13px; color:var(--text-muted); margin-bottom:10px}

/* กล่องคำแนะนำสีเหลืองเหนือรายการ */
.note{
  background:#FEF6D8; border:1.5px solid var(--amber); color:#9C7A0E;
  border-radius:10px; padding:11px 16px; font-size:13px; margin-bottom:16px;
}
/* แถบเตือนเรื่องการตั้งค่าที่ยังไม่ครบ — ใช้สีแดงเพื่อให้ต่างจากคำแนะนำการใช้งานทั่วไป */
.note.note-warn{background:#FBE2E2; border-color:var(--red); color:#8B1E1E}
.note code{
  background:rgba(0,0,0,.06); border-radius:4px; padding:1px 5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
}

/* ปุ่มบนแถบหัว — ให้หน้าตาเหมือนปุ่มรีเฟรชของหน้า Apps Script */
.btn-quiet{
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35);
  color:#fff; border-radius:8px; padding:7px 14px; font-size:13px;
  font-family:inherit; font-weight:600; cursor:pointer; white-space:nowrap;
}
.btn-quiet:hover:not(:disabled){background:rgba(255,255,255,.25)}
.btn-quiet:disabled{opacity:.5; cursor:not-allowed}
.topbar .me{font-size:12.5px; color:rgba(255,255,255,.85); text-align:right}
.topbar .me b{display:block; color:#fff; font-weight:600}

/* Scorecard: หน้า Firebase เรียก .cards/.card ส่วน Apps Script เรียก .scorecard
   แทนที่จะไปแก้ JS ให้เปลี่ยนชื่อ class ทั้งหมด จับคู่หน้าตาให้ตรงกันตรงนี้ */
.cards{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:22px}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}
.cards .card{
  border-radius:16px; padding:16px 18px; box-shadow:0 1px 2px rgba(0,0,0,.05);
  display:flex; flex-direction:column-reverse; justify-content:center; gap:8px;
  background:var(--primary); color:#fff;
}
.cards .card .n{
  border-radius:13px; padding:8px 16px; font-size:24px; font-weight:800;
  text-align:center; align-self:flex-start; background:rgba(255,255,255,.2); color:#fff;
}
.cards .card .l{font-size:14px; font-weight:700; line-height:1.3}
.cards .card.green{background:#DFF6E7; color:#1B7A44}
.cards .card.green .n{background:#fff; color:#1B7A44}
.cards .card.red{background:#FBE2E2; color:#C0392B}
.cards .card.red .n{background:#fff; color:#C0392B}
.cards .card.orange{background:#FCE9D2; color:#B4650F}
.cards .card.orange .n{background:#fff; color:#B4650F}

/* ตัวกรอง: หน้า Firebase มี label กำกับแต่ละช่อง Apps Script ไม่มี
   เก็บ label ไว้ (อ่านง่ายกว่า) แต่ใช้กรอบและระยะห่างชุดเดียวกัน */
.filters.boxed{
  background:var(--card-bg); border:1px solid var(--border); border-radius:10px;
  padding:14px 15px; margin-bottom:18px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px;
}
.filters.boxed label{display:block; font-size:12px; color:var(--text-muted); margin-bottom:4px}
.filters.boxed select, .filters.boxed input[type=search]{
  width:100%; padding:9px 12px; font-size:13.5px; font-family:inherit;
  border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text);
}
.filters.boxed select:focus, .filters.boxed input:focus{outline:2px solid var(--primary); outline-offset:1px}

/* รูปโปรไฟล์ (หน้า Apps Script ใช้ .avatar / .avatar-fallback) */
.avatar-none{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--bg-soft); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:16px; font-weight:600;
}

/* ช่องติ๊ก: ชื่อ class ต่างกัน (.checks/.chk/.box) แต่หน้าตาต้องเท่ากันเป๊ะ
   จุดสำคัญคือกล่องที่ยังไม่ติ๊กต้องเป็น #344054 ตามสเปก ไม่ใช่สีเทาอ่อน */
.checks{
  display:flex; gap:5px; margin-left:auto; padding-left:10px;
  border-left:1px solid var(--border); flex-shrink:0;
}
.chk{display:flex; flex-direction:column; align-items:center; gap:2px}
.chk .lbl{font-size:8.5px; color:var(--text-muted); white-space:nowrap; text-align:center}
.chk .box{
  width:22px; height:22px; border-radius:6px; background:#344054;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
  transition:background .12s ease, transform .08s ease;
}
.chk .box:hover{transform:scale(1.1)}
.chk .box.on{background:var(--green)}
.chk .box.saving{opacity:.5; cursor:wait}
.chk .box.dirty{box-shadow:0 0 0 3px rgba(217,146,43,.55)}
.chk .box:focus-visible{outline:2px solid var(--primary); outline-offset:2px}
.chk .box svg{width:13px; height:13px; stroke:#fff; stroke-width:3; fill:none}

/* ปุ่มบันทึกรายแถว — สีเดียวกับแถบ "บันทึกทั้งหมด" ของหน้า Apps Script */
.save-btn{
  flex-shrink:0; padding:8px 14px; border-radius:8px; border:none;
  background:var(--amber); color:#fff; font-size:12px; font-weight:700;
  font-family:inherit; cursor:pointer; white-space:nowrap; margin-left:10px;
}
.save-btn:hover:not(:disabled){background:#bf7f1f}
.save-btn.done{background:var(--green)}
.save-btn:disabled{opacity:.5; cursor:not-allowed}

/* ป้ายสถานะ: .pill ของหน้า Firebase = .emp-status-text ของ Apps Script */
.pill{
  display:inline-block; font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:20px; white-space:nowrap;
}
.pill.green{background:#DFF6E7; color:#1B7A44}
.pill.red{background:#FBE2E2; color:#C0392B}
.pill.orange{background:#FCE9D2; color:#B4650F}
.pill.gray{background:#F0F1F3; color:var(--text-muted)}

/* แถวพนักงานบนหน้า Firebase ใช้ชื่อ class เดียวกับ Apps Script อยู่แล้ว
   เหลือแค่ชื่อคลาสย่อยที่ต่างกัน 2 จุด */
.emp-status-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.emp-field.startdate .v{color:#1B7A44; font-weight:700; white-space:nowrap}

/* ===================================================================
   การ์ดแบบ 4 ใบต่อแถว และหน้าต่างรายละเอียด
   ===================================================================
   ใช้โดยหน้า New Hire System และ Resignation System
   คัดลอกมาจาก <style> ของหน้า Apps Script เดิมแบบไม่แก้ค่า
   หน้า Summary ไม่ได้ใช้ส่วนนี้ (ใช้แบบ 1 แถวต่อคนแทน)
   =================================================================== */

.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width:1300px){.card-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1100px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.card-grid{grid-template-columns:1fr}}

.applicant-card{
  background:var(--card-bg); border-radius:12px; padding:12px 12px 12px 16px;
  border:1px solid var(--border); border-left:10px solid #ccc;
  cursor:pointer; transition:box-shadow .15s ease;
}
.applicant-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.08)}
.card-body{display:flex; gap:14px; align-items:flex-start}
.avatar-col{flex-shrink:0}
.info-col{flex:1; min-width:0}
.applicant-card img.avatar, .applicant-card .avatar-fallback, .applicant-card .avatar-none{
  width:88px; height:88px; border-radius:50%; object-fit:cover; background:var(--bg-soft);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:28px; font-weight:600; border:none;
}
.applicant-card .name{font-weight:600; font-size:14px; line-height:1.25}
.applicant-card .sub{font-size:11.5px; color:var(--text-muted); margin-top:1px}
.meta-row{
  display:flex; align-items:center; gap:5px; margin-top:5px;
  font-size:11.5px; color:var(--text-muted); line-height:1.3;
}
.meta-row svg{flex-shrink:0; opacity:.75}
.status-line{border-top:1px solid var(--border); padding-top:7px; margin-top:7px; font-size:11.5px}
.status-line .status-label{color:var(--text-muted); margin-right:4px; display:inline}
.status-pill{
  display:inline-block; font-size:10.5px; font-weight:600;
  padding:2px 8px; border-radius:20px; margin-right:4px; margin-bottom:3px;
}
.status-approved-green{background:#E4F5EA; color:#1B7A44}
.status-pending-orange{background:#FDF2E3; color:#D9922B}
.status-failed{background:#FBEAEA; color:var(--red)}

/* หน้าต่างรายละเอียด */
.overlay{
  display:none; position:fixed; inset:0; background:rgba(20,24,34,.45);
  align-items:center; justify-content:center; z-index:100; padding:20px;
}
.overlay.open{display:flex}
.modal{
  background:#fff; border-radius:16px; width:100%; max-width:560px; max-height:88vh;
  overflow-y:auto; padding:28px;
}
.modal-close{
  float:right; background:none; border:none; font-size:20px; color:var(--text-muted);
  cursor:pointer; font-family:inherit;
}
.modal .avatar-center{display:flex; justify-content:center; margin-bottom:6px}
.modal .avatar-center img, .modal .avatar-center .avatar-fallback, .modal .avatar-center .avatar-none{
  width:180px; height:180px; border-radius:50%; object-fit:cover; border:4px solid var(--bg-soft);
  font-size:56px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft); color:var(--text-muted);
}
.modal h2{text-align:center; font-size:17px; margin:6px 0 20px}
.section{margin-bottom:18px}
.section h3{
  font-size:12.5px; color:var(--primary-dark); font-weight:700;
  margin:0 0 8px; border-bottom:1px solid var(--border); padding-bottom:6px;
}
.kv-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; font-size:13.5px}
.kv-grid .k{color:var(--text-muted)}
.kv-grid .v{font-weight:500}

.action-row{display:flex; gap:8px; margin-top:22px}
.action-btn{
  flex:1; padding:12px 8px; border-radius:10px; border:none; color:#fff; font-size:13px;
  font-weight:600; font-family:inherit; cursor:pointer; text-align:center;
  text-decoration:none; display:block;
}
.status-note{font-size:13px; margin-top:16px; text-align:center; padding:10px; border-radius:8px}
.note-green{background:#E4F5EA; color:#1B7A44}
.note-red{background:#FBEAEA; color:#C0392B}
.note-orange{background:#FCE9D2; color:#B4650F}
.info-box{background:var(--bg-soft); border-radius:10px; padding:14px; margin-top:14px; font-size:13px}
.hint{color:var(--red); font-size:12px; text-align:center}
.edit-save-btn{
  width:100%; padding:11px; border:none; border-radius:8px; color:#fff; font-weight:600;
  font-family:inherit; cursor:pointer; background:var(--primary); margin-top:4px; font-size:13.5px;
  display:block; text-align:center; text-decoration:none;
}
.edit-save-btn:hover{background:var(--primary-dark)}

/* ===================================================================
   ช่องข้อมูลที่แก้ไขได้ในหน้าต่างรายละเอียด
   =================================================================== */
/* คัดลอกมาจากหน้า Apps Script เดิมทั้งชุด เพื่อให้หน้าตาเหมือนกันทุกจุด
   ช่องพื้นเหลือง #FFEC99 คือช่องที่ HR ต้องตรวจเป็นพิเศษก่อนอนุมัติ
   เพราะค่าเหล่านี้จะถูกพิมพ์ลงในสัญญาจ้างโดยตรง */

.edit-kv-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; align-items:center}
.edit-kv-grid .k{color:var(--text-muted); font-size:13.5px}
.edit-kv-grid .v input{
  width:100%; padding:6px 8px; border:1px solid var(--border); border-radius:6px;
  font-size:13.5px; font-family:inherit;
}
.edit-kv-grid .v input:focus{outline:2px solid var(--primary); outline-offset:-1px}
.edit-kv-grid .v input.v-strong-input{font-weight:800; color:var(--text)}

/* ช่องที่แก้ไม่ได้ — แสดงเป็นข้อความธรรมดา ให้ความสูงเท่ากับ input ข้างเคียง */
.edit-kv-grid .v.ro{padding:6px 8px; font-size:13.5px; color:var(--text)}

.gen-code-btn{
  padding:8px 10px; border:none; border-radius:6px; color:#fff; font-weight:600;
  cursor:pointer; background:var(--primary); font-size:12px; white-space:nowrap;
}
.gen-code-btn:hover{background:var(--primary-dark)}
.gen-code-btn:disabled{background:#B0B7C3; cursor:default}

.edit-save-btn{
  width:100%; padding:11px; border:none; border-radius:8px; color:#fff; font-weight:600;
  cursor:pointer; background:var(--primary); margin-top:4px; font-size:13.5px;
}
.edit-save-btn:hover{background:var(--primary-dark)}
.edit-save-btn:disabled{background:#B0B7C3; cursor:default}
.edit-saved-badge{font-size:11px; color:var(--text-muted); margin-top:6px; text-align:right}

/* ปุ่มดาวน์โหลดเอกสารที่ถูกยกเลิกแล้ว — ยังเห็นอยู่แต่กดไม่ได้
   เหตุผลที่ไม่ซ่อนทิ้ง: HR ต้องเห็นว่าเคยมีเอกสารฉบับนี้อยู่จริง
   แค่ใช้ไม่ได้แล้วเพราะยกเลิกไป ถ้าซ่อนไปเลยจะนึกว่าระบบทำเอกสารหาย */
.edit-save-btn.is-void{
  background:#D5D7DB; color:#8A8F98; cursor:not-allowed;
  text-decoration:line-through; pointer-events:none;
}
.edit-save-btn.is-void:hover{background:#D5D7DB}

/* ===================================================================
   ระบบ Branch — 4 แท็บ
   ===================================================================
   หน้าฝั่งสาขาใช้ scorecard แบบ "ป้ายซ้าย เลขขวา" กว้าง 4 ใบต่อแถว
   ต่างจากฝั่ง HR ที่เป็น 5 ใบ จึงต้องมี grid ของตัวเอง
   ส่วนสี .sc-* และหน้าตาการ์ดใช้ร่วมกับฝั่ง HR ได้เลย ไม่ต้องประกาศซ้ำ */

.scorecards{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px}
.scorecards.row-last{margin-bottom:22px}
.scorecards.cols-5{grid-template-columns:repeat(5,1fr)}
.scorecards.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1400px){.scorecards,.scorecards.cols-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1100px){.scorecards,.scorecards.cols-5,.scorecards.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.scorecards,.scorecards.cols-5,.scorecards.cols-3{grid-template-columns:1fr}}

/* เลขต้องใหญ่กว่าฝั่ง HR เพราะการ์ดฝั่งนี้มีบรรทัดเดียว ไม่มีอะไรแย่งสายตา */
.scorecards .scorecard{flex-direction:row; align-items:center; justify-content:space-between; padding:18px 20px}
.scorecards .scorecard .label{font-size:15px; font-weight:700; line-height:1.3; flex:1}
.scorecards .scorecard .num-chip{font-size:27px; padding:9px 18px; min-width:54px; align-self:auto}
.sc-blue{background:#E1EBFA; color:#1F4E96}
.sc-blue .num-chip{background:#fff; color:#1F4E96}
.sc-yellow{background:#FEF6D8; color:#9C7A0E}
.sc-yellow .num-chip{background:#fff; color:#9C7A0E}

/* ป้ายสถานะของฝั่ง Branch — ชื่อ class ตามหน้า Apps Script เดิมเป๊ะ
   จะได้ลอกเงื่อนไขการแสดงผลมาใช้ได้ตรงๆ โดยไม่ต้องแปลชื่อ */
.status-passed{background:#E4F5EA; color:var(--green)}
.status-failed{background:#FBEAEA; color:var(--red)}
.status-changed{background:#FCE9D2; color:#B4650F}
.status-noshow{background:#FCE9D2; color:#B4650F}

/* ป้ายผู้สมัครที่ยื่นใบสมัครหลายสาขาพร้อมกัน */
.dup-badge{
  display:inline-block; margin-top:5px; margin-left:5px; font-size:10px; font-weight:600;
  padding:2px 8px; border-radius:20px; background:#FCE9D2; color:#B4650F;
}

.applied-at-row{
  display:flex; align-items:center; gap:5px; margin-top:6px;
  font-size:10.5px; color:var(--text-muted);
}
.applied-at-row svg{width:12px; height:12px; opacity:.75; flex-shrink:0}

/* ฟอร์มที่พับอยู่ใต้ปุ่มในหน้าต่างรายละเอียด */
.action-form{display:none; margin-top:14px; background:var(--bg-soft); border-radius:10px; padding:14px}
.action-form.open{display:block}
.action-form label{display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:5px}
.action-form input, .action-form textarea{
  width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:8px;
  font-size:13.5px; font-family:inherit; margin-bottom:10px;
}
.action-form input:focus, .action-form textarea:focus{outline:2px solid var(--primary); outline-offset:-1px}
.submit-btn{
  width:100%; padding:10px; border:none; border-radius:8px;
  color:#fff; font-weight:600; font-size:13.5px; cursor:pointer; font-family:inherit;
}
.submit-btn:disabled{background:#B0B7C3; cursor:default}

/* ปุ่มลิงก์ดาวน์โหลดคู่ (เรซูเม่ / ใบสมัคร) */
.links{display:flex; gap:10px; margin-top:6px}
.links a{
  flex:1; text-align:center; font-size:13px; font-weight:600; text-decoration:none;
  color:#1B7A44; background:#E7F6ED; border:1.5px solid #2E9E5B;
  padding:7px 12px; border-radius:8px;
}
.links a:hover{background:#D8F0E1}
.links a.disabled{
  opacity:.45; cursor:default; pointer-events:none;
  background:var(--bg-soft); border-color:var(--border); color:var(--text-muted);
}

/* แท็บ 3 — รายการไฟล์แนบและสถานะตรวจเอกสาร */
.doc-files-list{display:flex; flex-direction:column; gap:6px}
.doc-link-ok{font-size:12.5px; color:#1B7A44; font-weight:600; text-decoration:none}
.doc-link-ok:hover{text-decoration:underline}
.doc-link-missing{font-size:12.5px; color:var(--red)}
.doc-check-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 4px; font-size:13.5px; border-bottom:1px solid var(--border);
}
.doc-check-row:last-child{border-bottom:none}
.doc-check-ok{font-size:12.5px; font-weight:600; color:#1B7A44}
.doc-check-pending{font-size:12.5px; color:var(--text-muted)}
.doc-check-hint{font-size:12px; color:var(--red); text-align:center; margin-top:10px}

/* ปุ่มเลือกไฟล์แนบ — เส้นประบอกว่าเป็นพื้นที่วางของ ไม่ใช่ปุ่มสั่งงาน */
.doc-upload-btn{
  width:100%; margin-top:10px; padding:11px; border-radius:8px;
  border:1.5px dashed var(--primary); background:#fff; color:var(--primary);
  font-weight:600; font-size:13.5px; cursor:pointer; font-family:inherit;
}
.doc-upload-btn:hover{background:var(--bg-soft)}
.doc-upload-btn:disabled{opacity:.5; cursor:default}

/* ===================================================================
   แถบโลโก้แบรนด์บนหัวทุกหน้า
   ===================================================================
   เรียง IPPUDO · NEO · SALADSTOP · STANDARD BREAD · HEYTEA
   วาดเป็น SVG สีขาวบนแถบสีเข้ม ใช้ currentColor จึงเปลี่ยนสีตามพื้นได้ */
.brand-logos{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.brand-mark{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.brand-mark img{width:32px; height:32px; object-fit:contain; display:block}
@media (max-width:820px){
  .brand-logos{gap:5px}
  .brand-mark{width:32px; height:32px; border-radius:8px}
  .brand-mark img{width:26px; height:26px}
}

/* ป้ายสถานะเพิ่มเติมของฝั่ง Branch
   ส้ม = ยังมีงานค้างต้องทำ · น้ำเงิน = ดำเนินการแล้ว กำลังรอผล */
.status-waiting{background:#FDF2E3; color:#D9922B}
.status-waiting-blue{background:#E1EBFA; color:#1F4E96}

/* รูปโปรไฟล์: วางตัวสำรองไว้ข้างหลัง แล้วเอารูปทับ
   รูปโหลดไม่ขึ้นก็ลบตัวเองทิ้ง ตัวสำรองจะโผล่มาแทน
   ทำแบบนี้เพื่อไม่ต้องเขียน JavaScript ใน onerror ซึ่งพังกับชื่อภาษาไทย */
.avatar-wrap{position:relative; display:inline-flex; flex-shrink:0}
.avatar-wrap > .avatar-fallback{position:relative}
.avatar-wrap > img{
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:50%; object-fit:cover;
}
