/* BSM HRM — ธีมกระดาษครีม + เขียวมอส + ออเคอร์ (self-hosted, ไม่พึ่ง CDN) */
:root{
  --cream:#F4EDDC; --cream-2:#EFE6D0; --moss:#5B6E4E; --moss-d:#47573C;
  --ochre:#8B5E3C; --ink:#33302A; --muted:#7A746B; --line:#DCCFB4;
  --ok:#4B7A3B; --fail:#B23A3A; --white:#FBF7EE;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:"Segoe UI",Tahoma,sans-serif; color:var(--ink);
  background:var(--cream); line-height:1.55;
}
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--moss); color:var(--white); padding:14px 24px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.brand{font-size:1.2rem; font-weight:700}
.topbar-right{font-size:.9rem; opacity:.9}
.container{max-width:900px; margin:32px auto; padding:0 20px}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:28px 30px; box-shadow:0 3px 10px rgba(90,70,40,.06);
}
h1{margin:0 0 6px; color:var(--moss-d); font-size:1.5rem}
h3{color:var(--ochre)}
.muted{color:var(--muted)}
.check-table{width:100%; border-collapse:collapse; margin:20px 0}
.check-table th,.check-table td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
}
.check-table th{background:var(--cream-2); color:var(--moss-d); font-weight:600}
.badge{padding:3px 12px; border-radius:20px; font-size:.85rem; font-weight:600}
.badge-ok{background:#E4EFDD; color:var(--ok)}
.badge-fail{background:#F4DEDE; color:var(--fail)}
.notice{margin-top:16px; padding:12px 16px; border-radius:8px}
.notice-ok{background:#E4EFDD; border:1px solid #BcD6B0; color:var(--moss-d)}
.notice-fail{background:#F4DEDE; border:1px solid #E0B4B4; color:var(--fail)}
.next{margin-top:24px; padding-top:18px; border-top:1px dashed var(--line)}
.btn{
  display:inline-block; background:var(--moss); color:var(--white);
  padding:9px 18px; border-radius:8px; text-decoration:none; font-weight:600;
}
.btn:hover{background:var(--moss-d)}
.footer{text-align:center; color:var(--muted); font-size:.85rem; padding:24px}
.small{font-size:.85rem}
a{color:var(--moss-d)}

/* ---- Guest (login/2fa/system) ---- */
body.guest{display:flex; min-height:100vh; align-items:center; justify-content:center}
.guest-wrap{width:100%; max-width:420px; padding:24px}
.guest-brand{text-align:center; font-size:1.4rem; font-weight:700; color:var(--moss-d); margin-bottom:16px}
.guest-foot{text-align:center; color:var(--muted); font-size:.8rem; margin-top:18px}
.auth-card{
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:30px 30px 26px; box-shadow:0 6px 20px rgba(90,70,40,.10);
}
.auth-card h1{font-size:1.35rem}
.auth-card form{margin-top:18px}
label{display:block; margin-bottom:14px; font-weight:600; color:var(--moss-d); font-size:.92rem}
input[type=text],input[type=password]{
  width:100%; margin-top:6px; padding:11px 12px; font-size:1rem;
  border:1px solid var(--line); border-radius:8px; background:#fff; font-weight:400;
}
input:focus{outline:2px solid var(--moss); outline-offset:0; border-color:var(--moss)}
.otp-input{letter-spacing:.5em; text-align:center; font-size:1.4rem}
.btn-block{width:100%; text-align:center; border:0; cursor:pointer; font-size:1rem; padding:12px}
.steps{padding-left:18px; color:var(--ink); font-size:.92rem}
.steps li{margin-bottom:6px}
.secret-box{
  background:var(--cream-2); border:1px dashed var(--ochre); border-radius:10px;
  padding:14px; text-align:center; margin:16px 0;
}
.secret-label{display:block; font-size:.8rem; color:var(--muted); margin-bottom:6px}
.secret-key{font-size:1.15rem; font-weight:700; color:var(--ochre); letter-spacing:.1em}

/* ---- Authenticated shell ---- */
.shell{display:flex; min-height:100vh}
.sidebar{width:250px; background:var(--moss-d); color:#EDE7D8; flex-shrink:0}
.side-brand{padding:18px 20px; font-weight:700; font-size:1.05rem; background:rgba(0,0,0,.12)}
.side-nav{padding:10px 0}
.side-group{padding:14px 20px 4px; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; opacity:.6}
.side-nav a{
  display:flex; gap:10px; align-items:center; padding:9px 20px;
  color:#EDE7D8; text-decoration:none; font-size:.92rem;
}
.side-nav a span{width:20px; text-align:center}
.side-nav a:hover{background:rgba(255,255,255,.10)}
.side-top{font-weight:600}
.main-col{flex:1; display:flex; flex-direction:column; background:var(--cream)}
.main-col .topbar{background:var(--white); color:var(--ink); border-bottom:1px solid var(--line)}
.page-title{font-weight:700; color:var(--moss-d)}
.user-chip{margin-right:14px; color:var(--muted)}
.logout{color:var(--ochre); text-decoration:none; font-weight:600}
.logout:hover{text-decoration:underline}
.content{padding:28px; max-width:1000px}
.content .card{margin-bottom:20px}
@media(max-width:720px){
  .sidebar{width:64px}
  .side-brand,.side-group,.side-nav a:not(.side-top) span+*{display:none}
  .side-nav a{justify-content:center; padding:12px 0}
}

/* ---- Toolbar / buttons / tables / forms (CRUD) ---- */
.notice-info{background:#E7EEF4; border:1px solid #BcCfDd; color:#2C4A63}
.page-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap}
.page-head h1{margin:0; font-size:1.4rem}
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px}
.toolbar .spacer{flex:1}
.toolbar input[type=text],.toolbar select{
  padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:.92rem;
}
.btn-sm{padding:7px 13px; font-size:.88rem}
.btn-ghost{background:transparent; color:var(--moss-d); border:1px solid var(--line)}
.btn-ghost:hover{background:var(--cream-2)}
.btn-danger{background:var(--fail); color:#fff; border:0}
.btn-danger:hover{background:#8f2d2d}
.btn-ochre{background:var(--ochre); color:#fff; border:0}
.btn-ochre:hover{background:#6f4a2f}
table.data{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:10px; overflow:hidden}
table.data th,table.data td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:.92rem}
table.data thead th{background:var(--cream-2); color:var(--moss-d); font-weight:600; white-space:nowrap}
table.data tbody tr:hover{background:#FBF8F0}
table.data td.actions{white-space:nowrap; text-align:right}
table.data td.actions a{margin-left:8px; text-decoration:none; font-weight:600; font-size:.88rem}
.link-edit{color:var(--moss-d)}
.link-del{color:var(--fail)}
.st{padding:2px 10px; border-radius:20px; font-size:.8rem; font-weight:600; white-space:nowrap}
.st-active,.st-work{background:#E4EFDD; color:var(--ok)}
.st-probation{background:#FBEED9; color:#9A6B1E}
.st-resigned,.st-terminated{background:#F4DEDE; color:var(--fail)}
.st-off,.st-retired{background:#E9E4DA; color:var(--muted)}
.muted-empty{padding:40px; text-align:center; color:var(--muted)}
/* form */
.form-card{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px 28px; max-width:820px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 22px}
.form-grid .full{grid-column:1 / -1}
.form-grid label{margin-bottom:16px}
select,textarea{
  width:100%; margin-top:6px; padding:10px 12px; font-size:1rem; font-weight:400;
  border:1px solid var(--line); border-radius:8px; background:#fff; font-family:inherit;
}
select:focus,textarea:focus{outline:2px solid var(--moss); border-color:var(--moss)}
.form-actions{display:flex; gap:12px; margin-top:10px}
.req{color:var(--fail)}
.section-title{color:var(--ochre); font-weight:700; margin:18px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line); grid-column:1/-1}
/* tabs (employee detail) */
.tabs{display:flex; gap:4px; border-bottom:2px solid var(--line); margin-bottom:20px; flex-wrap:wrap}
.tabs a{padding:10px 18px; text-decoration:none; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; margin-bottom:-2px}
.tabs a.active{color:var(--moss-d); border-bottom-color:var(--ochre)}
.kpi-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.kpi{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:16px 20px; flex:1; min-width:150px}
.kpi .n{font-size:1.8rem; font-weight:700; color:var(--moss-d)}
.kpi .l{color:var(--muted); font-size:.85rem}
/* rotation pattern step editor */
.step-rows{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin:10px 0 6px}
.step-row{display:flex; align-items:center; gap:8px; background:var(--cream-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px}
.step-row .step-day{font-size:.82rem; color:var(--moss-d); font-weight:600; white-space:nowrap; min-width:56px}
.step-row select{margin-top:0}
input[type=time],input[type=number],input[type=date],input[type=color]{
  width:100%; margin-top:6px; padding:10px 12px; font-size:1rem; font-weight:400;
  border:1px solid var(--line); border-radius:8px; background:#fff; font-family:inherit;
}
input[type=color]{height:44px; padding:4px}
input[type=time]:focus,input[type=number]:focus,input[type=date]:focus{outline:2px solid var(--moss); border-color:var(--moss)}
/* daily schedule grid */
table.sched th,table.sched td{padding:6px 8px; text-align:center; border:1px solid var(--line)}
table.sched .sticky-col{position:sticky; left:0; background:var(--white); text-align:left; min-width:180px; z-index:1}
table.sched thead .sticky-col{background:var(--cream-2); z-index:2}
table.sched .day-col{min-width:44px; font-size:.85rem}
.shift-chip{display:inline-block; min-width:30px; padding:3px 7px; border-radius:6px; color:#fff; font-weight:700; font-size:.78rem}
.cell-off{background:#EDE9DE; color:var(--muted); font-size:.75rem}
/* org chart tree (top-down) */
.orgwrap{overflow-x:auto; padding:10px 0}
.tree, .tree ul{list-style:none; margin:0; padding:0}
.tree, .tree ul{display:flex; justify-content:center}
.tree li{display:flex; flex-direction:column; align-items:center; padding:22px 10px 0; position:relative}
/* เส้นเชื่อมแนวตั้งลงจาก parent */
.tree li::before{content:''; position:absolute; top:0; height:22px; width:2px; background:var(--line); left:50%}
/* เส้นแนวนอนเชื่อมระหว่าง sibling */
.tree ul > li::after{content:''; position:absolute; top:0; height:2px; background:var(--line); width:100%; left:0}
.tree ul > li:first-child::after{left:50%; width:50%}
.tree ul > li:last-child::after{width:50%}
.tree ul > li:only-child::after{display:none}
.tree > li:first-child::before{display:none}
.node{
  border:1px solid var(--line); border-radius:10px; padding:10px 14px; background:var(--white);
  text-align:center; min-width:130px; box-shadow:0 2px 5px rgba(90,70,40,.06);
}
.node-title{font-weight:700; font-size:.92rem}
.node-sub{font-size:.78rem; color:var(--muted); margin-top:2px}
.node-badge{display:inline-block; margin-top:6px; background:var(--moss); color:#fff; border-radius:20px; padding:1px 10px; font-size:.72rem; font-weight:600}
.node-badge.sm{background:var(--cream-2); color:var(--moss-d)}
.node-company{background:var(--moss); border-color:var(--moss-d)}
.node-company .node-title,.node-company .node-sub{color:#fff}
.node-company .node-badge{background:rgba(255,255,255,.25)}
.node-factory{background:var(--cream-2); border-color:var(--ochre)}
.node-dept{border-color:var(--line)}
/* person nodes by level */
.node-person{min-width:150px; border-top-width:4px}
.node-link{color:inherit; text-decoration:none}
.node-link:hover{text-decoration:underline; color:var(--ochre)}
.node-dep{font-size:.72rem; color:var(--muted); margin-top:4px}
.lv-badge{display:inline-block; margin-top:6px; border-radius:20px; padding:1px 10px; font-size:.7rem; font-weight:700}
.lv-exec{border-top-color:#8B5E3C} .lv-exec .lv-badge{background:#F0E2D3; color:#8B5E3C}
.lv-mgr{border-top-color:#5B6E4E}  .lv-mgr .lv-badge{background:#E0ECD7; color:#4b7a3b}
.lv-tech{border-top-color:#3C6E8B} .lv-tech .lv-badge{background:#DCE8F0; color:#2C4A63}
.lv-staff{border-top-color:#9A8A6B}.lv-staff .lv-badge{background:#ECE6D8; color:#7A746B}
.legend{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px}
.lv-chip{font-size:.72rem; padding:3px 12px; border-radius:20px; font-weight:600; border-top:3px solid}
.lv-chip.lv-exec{background:#F0E2D3; color:#8B5E3C; border-color:#8B5E3C}
.lv-chip.lv-mgr{background:#E0ECD7; color:#4b7a3b; border-color:#5B6E4E}
.lv-chip.lv-tech{background:#DCE8F0; color:#2C4A63; border-color:#3C6E8B}
.lv-chip.lv-staff{background:#ECE6D8; color:#7A746B; border-color:#9A8A6B}
/* avatars */
.avatar-lg{width:80px; height:80px; border-radius:50%; object-fit:cover; border:2px solid var(--line)}
.avatar-sm{width:34px; height:34px; border-radius:50%; object-fit:cover; vertical-align:middle; border:1px solid var(--line)}
.avatar-node{width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid #fff; margin:0 auto 4px; display:block}
.avatar-ph{display:flex; align-items:center; justify-content:center; background:var(--moss); color:#fff; font-weight:700; text-transform:uppercase}
.avatar-lg.avatar-ph{font-size:1.8rem}
.avatar-sm.avatar-ph{font-size:.9rem; display:inline-flex}
.avatar-node.avatar-ph{font-size:1.2rem}