:root{
  --deep:#0077A8; --primary:#00B4D8; --accent:#4287F5; --accent-dim:#2563EB;
  --bg:#eef6fb; --surface:#ffffff; --surface-alt:#f4f9fd;
  --ink:#0d2a3a; --ink-60:#5b6b7a; --border:rgba(6,14,30,.14);
  --ok:#059669; --err:#dc2626; --warn:#d97706; --radius:12px;
}
*{box-sizing:border-box;margin:0}
body{font-family:'Sarabun',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
a{color:var(--deep);text-decoration:none}
.wrap{width:min(calc(100% - 32px),960px);margin:0 auto}
header{background:var(--deep);color:#fff;padding:14px 0;position:sticky;top:0;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem}
.brand img{width:32px;height:32px;border-radius:8px}
.navwrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.navbtn{background:rgba(255,255,255,.15);color:#fff;border:none;font:inherit;font-weight:700;padding:8px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .15s}
.navbtn:hover{background:rgba(255,255,255,.28)}
.navbtn.active{background:#fff;color:var(--deep)}
.navbtn.active:hover{background:#fff}
.navbtn.ghost{background:transparent;border:1px solid rgba(255,255,255,.4)}
.navbtn.ghost:hover{background:rgba(255,255,255,.15)}
.lang-toggle{display:inline-flex;gap:2px;background:rgba(255,255,255,.15);border-radius:999px;padding:3px}
.lang-btn{border:none;background:transparent;font:inherit;font-size:.74rem;font-weight:800;color:#fff;padding:5px 10px;border-radius:999px;cursor:pointer}
.lang-btn.active{background:#fff;color:var(--deep)}
main{padding:28px 0 60px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:16px}
h1{font-size:1.5rem;margin-bottom:6px}
h2{font-size:1.2rem;margin-bottom:14px}
.muted{color:var(--ink-60);font-size:.92rem}
label{display:block;font-weight:700;font-size:.9rem;margin:14px 0 6px}
input,select,textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:11px 13px;font:inherit;background:var(--surface-alt);color:var(--ink);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{min-height:90px;resize:vertical}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:140px}
.btn{background:var(--accent);color:#fff;border:none;font:inherit;font-weight:800;padding:13px 22px;border-radius:10px;cursor:pointer;width:100%}
.btn:hover{background:var(--accent-dim)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-sec{background:var(--surface);color:var(--deep);border:1px solid var(--border)}
.btn-sm{width:auto;padding:7px 14px;font-size:.82rem;border-radius:999px}
.status{font-weight:700;margin-top:12px;min-height:1.2em}
.status.ok{color:var(--ok)} .status.err{color:var(--err)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-alt);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:.85rem;margin:4px 4px 0 0}
.chip button{background:none;border:none;cursor:pointer;color:var(--err);font-weight:800}
.job-item{border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px;background:var(--surface-alt)}
.job-item h3{font-size:1.05rem}
.badge{display:inline-block;font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:999px}
.badge.published{background:#e3f5ea;color:#059669}
.badge.draft,.badge.expired,.badge.closed{background:#f0f0f0;color:#666}
.applicant{border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px;background:var(--surface-alt)}
.applicant.clickable{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.applicant.clickable:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(66,135,245,.12)}
.applicant .go{color:var(--deep);font-size:.82rem;font-weight:700;margin-top:6px;display:inline-block}
/* Applicant detail */
.det-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:.92rem}
.det-row:last-child{border-bottom:none}
.det-row .k{color:var(--ink-60);font-weight:700}
.det-row .v{text-align:right}
.det-note{background:var(--surface-alt);border:1px solid var(--border);border-radius:10px;padding:12px;font-size:.92rem;white-space:pre-wrap}
.det-sec-title{font-weight:800;margin:18px 0 8px;font-size:.95rem}
.det-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.det-actions .btn{width:auto}
.open-btn{background:none;border:1px solid var(--border);border-radius:999px;padding:3px 8px;cursor:pointer;color:var(--deep);font-weight:800;font-size:.8rem}
.applicant .name{font-weight:700;display:flex;align-items:center;gap:6px}
.verified{color:var(--ok);font-weight:800;font-size:.8rem}
.st{display:inline-block;font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:999px;background:#eef2f6;color:#556}
.st.shortlisted{background:#efe7fb;color:#7c3aed}
.st.interview{background:#fff0e0;color:#c2660b}
.st.offered,.st.hired{background:#e3f5ea;color:#059669}
.st.rejected{background:#fde8e8;color:#dc2626}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.link-back{background:none;border:none;color:var(--deep);font:inherit;font-weight:700;cursor:pointer;padding:0;margin-bottom:12px}
.hide{display:none}
.center{max-width:420px;margin:40px auto}
/* Gate banner shown when trying to post before the profile is complete */
.gate-msg{display:flex;align-items:center;gap:8px;background:#fff4e5;border:1px solid #f0c987;
  color:#9a5b00;padding:12px 14px;border-radius:10px;font-weight:700;font-size:.9rem;margin:4px 0 14px}
.gate-msg.hide{display:none}
.gate-msg::before{content:'⚠️';font-size:1rem}
@keyframes gatePulse{0%{transform:scale(1)}35%{transform:scale(1.03)}100%{transform:scale(1)}}
.gate-msg.pulse{animation:gatePulse .45s ease}
/* ── Assignment grid ── */
.asg-toolbar{display:flex;justify-content:flex-end;gap:8px;margin:4px 0 2px}
.mh-toast{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-8px);
  background:#0d2a3a;color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;font-size:.9rem;
  z-index:90;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}
.mh-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.mh-toast.err{background:#b91c1c}
#assignGridWrap,#plannerGridWrap{overflow:auto;-webkit-overflow-scrolling:touch;margin:6px 0 14px;max-height:62vh}
/* Planner (local scratchpad) */
.pl-setup{border:1px solid var(--border);border-radius:10px;padding:14px;background:var(--surface-alt);margin-bottom:6px}
.pl-cal{max-width:340px;margin-top:6px}
.pl-cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pl-cal-title{font-weight:800}
.pl-cal-nav{background:var(--surface);border:1px solid var(--border);border-radius:8px;width:32px;height:32px;cursor:pointer;font-weight:800;color:var(--deep)}
.pl-cal-nav:hover{border-color:var(--accent)}
.pl-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.pl-cal-wd{text-align:center;font-size:.7rem;font-weight:800;color:var(--ink-60);padding:2px 0}
.pl-cal-day{border:1px solid var(--border);background:var(--surface);border-radius:8px;height:34px;cursor:pointer;font-weight:700;color:var(--ink);font-size:.85rem}
.pl-cal-day:hover{border-color:var(--accent)}
.pl-cal-day.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.pl-cal-day.off{opacity:.3;cursor:not-allowed;background:var(--surface-alt);color:var(--ink-60)}
.pl-cal-day.off:hover{border-color:var(--border)}
.asg-cand.editing{background:#eaf2ff}
.asg-cand .open-btn.rm{color:var(--err);border-color:rgba(220,38,38,.3)}
.pl-wd{font-size:.68rem;color:var(--ink-60);font-weight:600}
.pl-avail{font-size:.85rem;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pl-av-lbl{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.pl-av-lbl input{width:auto}
#view-planner.maxed{position:fixed;inset:0;z-index:60;background:var(--surface);overflow:auto;padding:0;margin:0}
#view-planner.maxed .card{max-width:none;margin:0;min-height:100vh;border-radius:0;border:none;padding:8px 10px}
#view-planner.maxed .link-back,#view-planner.maxed h2,#view-planner.maxed .pl-desc,#view-planner.maxed .pl-setup{display:none}
#view-planner.maxed #plannerGridWrap{max-height:calc(100vh - 100px)}
#view-planner.maxed .asg-cell{width:40px;height:36px;font-size:.9rem}
#view-planner.maxed .asg-cand{min-width:84px;max-width:120px}
#view-planner.maxed .asg-toolbar{margin:0 0 4px}
/* In full screen, keep candidate columns clean — hide edit/remove/open controls */
#view-assign.maxed .asg-cand .open-btn,
#view-planner.maxed .asg-cand .open-btn{display:none}
/* Full-screen assignment view — fits many more candidates on screen */
#view-assign.maxed{position:fixed;inset:0;z-index:60;background:var(--surface);overflow:auto;padding:0;margin:0}
#view-assign.maxed .card{max-width:none;margin:0;min-height:100vh;border-radius:0;border:none;padding:8px 10px}
#view-assign.maxed .asg-toolbar{margin:0 0 4px}
/* In full screen, show only the grid (+ exit button and action bar) */
#view-assign.maxed .link-back,
#view-assign.maxed #assignHead,
#view-assign.maxed #assignHint,
#view-assign.maxed #assignStatus{display:none}
#view-assign.maxed #assignGridWrap{max-height:calc(100vh - 100px)}
#view-assign.maxed .asg-cell{width:40px;height:36px;font-size:.9rem}
#view-assign.maxed .asg-cand{min-width:84px;max-width:120px}
#view-assign.maxed .asg-datecol{min-width:104px}
.asg-table{border-collapse:separate;border-spacing:0;width:max-content}
.asg-table th,.asg-table td{padding:8px;text-align:center;vertical-align:middle}
.asg-table td.asg-datecol,.asg-table th.asg-datecol{text-align:left}
.asg-table thead th{position:sticky;top:0;background:var(--surface);z-index:1}
.asg-datecol{position:sticky;left:0;background:var(--surface-alt);text-align:left !important;
  white-space:nowrap;border-right:1px solid var(--border);min-width:120px}
.asg-datecol .asg-date{font-weight:800;font-size:.82rem}
.asg-who{display:inline-block;margin-top:4px;font-size:.72rem;font-weight:800;padding:2px 9px;border-radius:999px;
  background:var(--accent);color:#fff;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.asg-who.srv{background:#e3f5ea;color:#059669}
.asg-open{display:inline-block;margin-top:4px;font-size:.72rem;color:var(--ink-60)}
.asg-cand{min-width:104px;max-width:140px}
.asg-cand .nm{font-weight:800;font-size:.85rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asg-cand .st{margin-top:4px}
.asg-cand .allbtn{margin-top:6px;font-size:.72rem;font-weight:700;background:none;border:1px solid var(--border);
  border-radius:999px;padding:3px 9px;cursor:pointer;color:var(--deep)}
.asg-cand .allbtn:disabled{opacity:.4;cursor:not-allowed}
.asg-table tbody tr:nth-child(even) td{background:var(--surface-alt)}
.asg-cell{width:52px;height:44px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
  cursor:pointer;font-size:1rem;font-weight:800;color:var(--ink-60);transition:all .12s}
.asg-cell:hover:not(:disabled){border-color:var(--accent)}
.asg-cell.selected{background:var(--accent);color:#fff;border-color:var(--accent)}
.asg-cell.confirmed{background:#e3f5ea;color:#059669;border-color:#bfe6cd;cursor:default}
.asg-cell.avail{color:var(--accent)}
.asg-cell:disabled{opacity:.35;cursor:not-allowed}
.asg-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.asg-actions .btn{width:auto}
/* Responsive header: keep the nav on ONE tidy scrollable row on small screens */
@media (max-width:640px){
  .navwrap{width:100%;flex-wrap:nowrap;gap:8px}
  #nav{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #nav::-webkit-scrollbar{display:none}
  #nav .navbtn{flex:0 0 auto}
  .lang-toggle{flex:0 0 auto}
  .navbtn{padding:7px 13px;font-size:.85rem}
}
.badge.closed{background:#f0f0f0;color:#666}
/* Applicants: job header */
.job-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;
  border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:14px;background:var(--surface-alt)}
.job-head h3{font-size:1.05rem}
/* Assignment date chips */
.date-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.date-chip{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:5px 11px;
  font-size:.8rem;font-weight:700;background:var(--surface);color:var(--ink)}
.date-chip.selectable{cursor:pointer}
.date-chip.selectable:hover{border-color:var(--accent)}
.date-chip.selectable.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.date-chip.assigned{background:#e3f5ea;color:#059669;border-color:#bfe6cd}
.date-chip.disabled{opacity:.45;text-decoration:line-through}
/* Rating box */
.rate-box{margin-top:10px;padding:12px;border:1px dashed var(--border);border-radius:10px;background:var(--surface)}
.rate-box label{margin-top:0}
.rate-box select,.rate-box textarea{margin-bottom:8px}
.rate-box textarea{min-height:60px}
.rated-tag{margin-top:10px;font-weight:800;color:var(--ok)}