/* ============================================================
 * BCF ระบบแจ้งลา — styles.css — v1.3 — 2026-06-29
 * สี/ดีไซน์ทั้งหมด (ปรับหน้าตาที่นี่)
 * ============================================================ */
:root{
  --brand:#0062A1; --brand-700:#004E80; --brand-900:#0B2F4A;
  --bg:#F2F8FD; --bg2:#E7F1FA; --card:#FFFFFF; --line:#D7E6F2; --line-2:#C2DCEF;
  --text:#0B2F4A; --muted:#5E768A; --muted-2:#8AA0B2;
  --green:#157347; --green-bg:#E2F5EB; --green-line:#A8DCBF;
  --amber:#A85D00; --amber-bg:#FFF1D6; --amber-line:#F2C97B;
  --red:#C62828; --red-bg:#FCE6E6; --red-line:#F0B4B4;
  --shadow:0 1px 2px rgba(11,47,74,.06), 0 8px 24px rgba(11,47,74,.08);
  --shadow-lg:0 12px 40px rgba(11,47,74,.18);
  --r:16px; --r-sm:11px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0; touch-action:manipulation; -ms-touch-action:manipulation}
body{font-family:'Sarabun','Noto Sans Myanmar',system-ui,sans-serif; background:var(--bg); color:var(--text);
  font-size:16px; line-height:1.5; min-height:100vh; -webkit-font-smoothing:antialiased}
.mm{font-size:.82em; color:var(--muted); font-weight:400; display:block; line-height:1.35}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
input,textarea,select{font-family:inherit; font-size:16px}
.hidden{display:none !important}

.app-header{background:linear-gradient(135deg,var(--brand) 0%, var(--brand-700) 100%); color:#fff;
  padding:14px 16px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:30;
  box-shadow:0 2px 14px rgba(0,78,128,.25)}
.app-header img{height:42px; width:auto; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.app-header .ht{display:flex; flex-direction:column; line-height:1.2}
.app-header .ht b{font-size:18px; font-weight:800; letter-spacing:.2px}
.app-header .ht span{font-size:12.5px; opacity:.92; font-weight:400}
.header-spacer{flex:1}
.icon-btn{background:rgba(255,255,255,.16); color:#fff; border-radius:10px; padding:9px 12px;
  font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:6px; transition:background .15s}
.icon-btn:hover{background:rgba(255,255,255,.28)}

.wrap{max-width:920px; margin:0 auto; padding:18px 16px 90px}
.section-title{font-size:20px; font-weight:800; margin:4px 0 2px}
.section-sub{color:var(--muted); font-size:14px; margin:0 0 16px}

.natTabs{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0 16px}
.natTab{background:var(--card); border:2px solid var(--line); border-radius:var(--r); padding:16px 10px;
  text-align:center; font-weight:700; font-size:17px; color:var(--text); display:flex; flex-direction:column;
  align-items:center; gap:4px; transition:all .15s; box-shadow:var(--shadow)}
.natTab .flag{font-size:30px; line-height:1}
.natTab .cnt{font-size:12.5px; color:var(--muted); font-weight:500}
.natTab.active{border-color:var(--brand); background:#F2F9FF; box-shadow:0 0 0 3px rgba(0,98,161,.12), var(--shadow)}
.natTab:active{transform:scale(.985)}

.searchBar{position:relative; margin-bottom:16px}
.searchBar input{width:100%; padding:14px 14px 14px 44px; border:2px solid var(--line); border-radius:var(--r-sm);
  background:var(--card); outline:none; transition:border .15s; color:var(--text)}
.searchBar input:focus{border-color:var(--brand)}
.searchBar .si{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted-2); font-size:18px}

.empGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.empCard{background:var(--card); border:1.5px solid var(--line); border-radius:var(--r); padding:12px 10px 14px;
  text-align:center; transition:border-color .12s, transform .08s; box-shadow:0 1px 3px rgba(11,47,74,.07); display:flex; flex-direction:column; align-items:center}
.empCard:active{transform:scale(.97); border-color:var(--brand)}
.avatar{width:84px; height:84px; border-radius:50%; object-fit:cover; margin-bottom:10px; background:var(--bg2);
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; color:#fff;
  border:3px solid #fff; box-shadow:0 2px 8px rgba(11,47,74,.14)}
.empCard .nm{font-weight:700; font-size:15.5px; line-height:1.25}
.empCard .nm small{display:block; font-weight:500; font-size:12.5px; color:var(--muted); margin-top:2px}
.empEmpty{grid-column:1/-1; text-align:center; color:var(--muted); padding:40px 10px}

.loading{text-align:center; padding:48px 0; color:var(--muted)}
.spinner{width:34px; height:34px; border:3.5px solid var(--line); border-top-color:var(--brand);
  border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}

.overlay{position:fixed; inset:0; background:rgba(11,47,74,.55); display:flex;
  align-items:center; justify-content:center; padding:18px; z-index:50; animation:fade .15s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--card); border-radius:22px; width:100%; max-width:380px; padding:26px 22px;
  text-align:center; box-shadow:var(--shadow-lg); animation:pop .2s}
@keyframes pop{from{opacity:0; transform:scale(.94) translateY(8px)}to{opacity:1; transform:none}}
.modal .bigAvatar{width:128px; height:128px; border-radius:50%; object-fit:cover; margin:0 auto 16px; display:flex;
  align-items:center; justify-content:center; font-size:46px; font-weight:800; color:#fff; border:4px solid #fff;
  box-shadow:0 4px 16px rgba(11,47,74,.2)}
.modal .bigName{font-size:24px; font-weight:800; line-height:1.25}
.modal .bigName small{display:block; font-size:15px; font-weight:500; color:var(--muted); margin-top:4px}
.modal .q{color:var(--muted); margin:10px 0 22px; font-size:14.5px}
.modalBtns{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:14px 16px; border-radius:13px;
  font-weight:700; font-size:16px; transition:background .12s, transform .08s; line-height:1.2; text-align:center}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 3px 10px rgba(0,98,161,.28)}
.btn-primary:hover{background:var(--brand-700)}
.btn-primary:disabled{background:#A9C5DA; box-shadow:none; cursor:not-allowed}
.btn-ghost{background:var(--bg2); color:var(--brand-900)}
.btn-ghost:hover{background:#DBEAF7}
.btn-line{background:#fff; border:1.5px solid var(--line-2); color:var(--brand-900)}
.btn-block{width:100%}
.btn-lg{padding:17px; font-size:18px; border-radius:15px}
.btn .sub{font-size:11px; font-weight:500; opacity:.85}

.personBar{display:flex; align-items:center; gap:12px; background:var(--card); border:1.5px solid var(--line);
  border-radius:var(--r); padding:11px 14px; margin-bottom:16px; box-shadow:var(--shadow)}
.personBar .pa{width:50px; height:50px; border-radius:50%; object-fit:cover; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; font-size:19px; font-weight:800; color:#fff}
.personBar .pn{flex:1; min-width:0}
.personBar .pn b{font-size:16.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.personBar .pn small{color:var(--muted); font-size:12.5px}
.linkBtn{color:var(--brand); font-weight:700; font-size:13.5px; padding:8px 6px; white-space:nowrap}

.subTabs{display:flex; background:var(--bg2); border-radius:12px; padding:4px; margin-bottom:18px; gap:4px}
.subTab{flex:1; padding:11px; border-radius:9px; font-weight:700; font-size:15px; color:var(--muted); text-align:center; transition:all .14s}
.subTab.active{background:#fff; color:var(--brand); box-shadow:0 1px 4px rgba(11,47,74,.12)}

.fblock{background:var(--card); border:1.5px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:14px; box-shadow:var(--shadow)}
.flabel{font-weight:700; font-size:15.5px; margin:0 0 10px; display:flex; align-items:center; gap:8px}
.flabel .num{background:var(--brand); color:#fff; width:24px; height:24px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0}
.dateInput{width:100%; padding:13px 14px; min-height:50px; border:2px solid var(--line); border-radius:11px;
  outline:none; color:var(--text); background:#fff; font-size:16px; line-height:1.2; font-family:inherit;
  -webkit-appearance:none; appearance:none; text-align:center}
.dateInput:focus{border-color:var(--brand)}
/* แก้ช่องวันที่/เดือนบน iOS-มือถือ ให้ข้อความอยู่พอดีกรอบ ไม่ล้น */
input[type="date"],input[type="month"]{-webkit-appearance:none; appearance:none}
input[type="date"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value{text-align:center; margin:0; line-height:1.2}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator{opacity:.55}
.field input[type="date"],.field input[type="month"]{min-height:46px; line-height:1.2; text-align:left}

.statusBadge{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px;
  font-weight:700; font-size:14px; margin-top:12px; border:1.5px solid}
.st-adv{background:var(--green-bg); color:var(--green); border-color:var(--green-line)}
.st-same{background:var(--amber-bg); color:var(--amber); border-color:var(--amber-line)}
.st-back{background:var(--red-bg); color:var(--red); border-color:var(--red-line)}
.st-dot{width:9px; height:9px; border-radius:50%; background:currentColor}

.sundayBox{margin-top:12px; padding:13px; background:var(--amber-bg); border:1.5px solid var(--amber-line);
  border-radius:11px; display:flex; align-items:flex-start; gap:11px}
.sundayBox .sw-txt{flex:1; font-size:13.5px; color:var(--amber); font-weight:600}
.switch{position:relative; width:50px; height:28px; flex-shrink:0}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; inset:0; background:#cbb78a; border-radius:28px; transition:.2s}
.slider:before{content:""; position:absolute; height:22px; width:22px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s}
.switch input:checked + .slider{background:var(--amber)}
.switch input:checked + .slider:before{transform:translateX(22px)}

.chips{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.chip{padding:13px 6px; border:2px solid var(--line); border-radius:12px; background:#fff; text-align:center;
  font-weight:700; font-size:14.5px; transition:border-color .1s, background .1s; color:var(--text); display:flex; flex-direction:column; gap:3px}
.chip .ci{font-size:22px; line-height:1}
.chip.active{border-color:var(--brand); background:#F2F9FF; color:var(--brand); box-shadow:0 0 0 3px rgba(0,98,161,.1)}
.chip:active{transform:scale(.96)}

.timelineHead{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:8px}
.hourTotal{font-weight:800; font-size:15px; color:var(--brand); background:#EAF4FD; padding:7px 13px; border-radius:10px; border:1.5px solid var(--line-2)}
.hourTotal.zero{color:var(--muted); background:var(--bg2); border-color:var(--line)}
.timeline{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.slot{display:flex; align-items:center; gap:10px; padding:13px 12px; border:2px solid var(--line); border-radius:12px; background:#fff; transition:border-color .1s, background .1s; position:relative}
.slot .tk{width:24px; height:24px; border-radius:7px; border:2px solid var(--line-2); flex-shrink:0; display:flex;
  align-items:center; justify-content:center; color:#fff; font-size:15px; transition:all .12s}
.slot .tm{font-weight:700; font-size:15.5px; letter-spacing:.3px}
.slot.on{border-color:var(--brand); background:#EAF4FD}
.slot.on .tk{background:var(--brand); border-color:var(--brand)}
.slot:not(.lunch):active{transform:scale(.97)}
.slot.lunch{background:#F3F2EF; border-color:#E4E1DA; border-style:dashed; color:var(--muted-2); cursor:default}
.slot.lunch .tk{border-color:#D8D4CC; background:#EDEBE6}
.slot.lunch .tm{color:var(--muted-2)}
.slot.lunch .lz{font-size:12px; margin-left:auto; font-weight:600}
.allDayRow{margin-top:11px}

textarea.reason{width:100%; min-height:74px; padding:13px; border:2px solid var(--line); border-radius:11px; outline:none; resize:vertical; color:var(--text); background:#fff}
textarea.reason:focus{border-color:var(--brand)}

.histItem{background:var(--card); border:1.5px solid var(--line); border-left-width:5px; border-radius:13px; padding:14px; margin-bottom:11px; box-shadow:var(--shadow)}
.histItem.adv{border-left-color:var(--green)} .histItem.same{border-left-color:var(--amber)} .histItem.back{border-left-color:var(--red)}
.histTop{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:7px; flex-wrap:wrap}
.histDate{font-weight:800; font-size:16px}
.tag{font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:7px}
.tag.adv{background:var(--green-bg); color:var(--green)} .tag.same{background:var(--amber-bg); color:var(--amber)} .tag.back{background:var(--red-bg); color:var(--red)}
.histMeta{font-size:13.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 14px}
.histMeta b{color:var(--text); font-weight:700}
.histReason{margin-top:7px; font-size:13.5px; color:var(--muted); font-style:italic}

.successCard{text-align:center; padding:30px 20px}
.successCard .ico{width:84px; height:84px; border-radius:50%; background:var(--green-bg); color:var(--green);
  display:flex; align-items:center; justify-content:center; font-size:46px; margin:0 auto 18px; border:3px solid var(--green-line)}
.successCard h2{font-size:24px; margin:0 0 6px}
.summaryList{text-align:left; background:var(--bg); border-radius:13px; padding:6px 16px; margin:20px 0; border:1px solid var(--line)}
.summaryList .row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); gap:12px}
.summaryList .row:last-child{border-bottom:none}
.summaryList .k{color:var(--muted); font-size:14px}
.summaryList .v{font-weight:700; text-align:right}

.adminScreen{position:fixed; inset:0; background:var(--bg); z-index:60; overflow-y:auto; animation:fade .18s}
.adminBar{background:var(--brand-900); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:5}
.adminBar b{font-size:17px; flex:1}
.adminTabs{display:flex; gap:6px; padding:12px 16px 0; max-width:920px; margin:0 auto; flex-wrap:wrap}
.aTab{padding:10px 16px; border-radius:10px 10px 0 0; font-weight:700; font-size:14.5px; color:var(--muted); background:transparent}
.aTab.active{background:var(--card); color:var(--brand); box-shadow:0 -2px 6px rgba(11,47,74,.06)}
.adminBody{max-width:920px; margin:0 auto; padding:16px}

.adminRow{display:flex; align-items:center; gap:12px; background:var(--card); border:1.5px solid var(--line); border-radius:13px; padding:10px 12px; margin-bottom:9px}
.adminRow .ra{width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px}
.adminRow .rn{flex:1; min-width:0}
.adminRow .rn b{font-size:15.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.adminRow .rn small{color:var(--muted); font-size:12.5px}
.miniBtn{padding:8px 10px; border-radius:9px; font-size:13px; font-weight:700; background:var(--bg2); color:var(--brand-900); white-space:nowrap}
.miniBtn.hide{background:#FFF1D6; color:var(--amber)} .miniBtn.del{background:var(--red-bg); color:var(--red)}
.pill{font-size:10.5px; font-weight:700; padding:3px 7px; border-radius:6px; background:#EAF4FD; color:var(--brand)}
.pill.off{background:#F0E6D0; color:var(--amber)}

.field{margin-bottom:13px}
.field label{display:block; font-weight:700; font-size:13.5px; margin-bottom:6px}
.field input,.field select,.field textarea{width:100%; padding:12px; border:2px solid var(--line); border-radius:10px; outline:none; background:#fff; color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand)}
.uploadPrev{width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:var(--shadow); margin:0 auto 8px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:34px; background:var(--bg2)}

.statGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:11px; margin-bottom:16px}
.statCard{background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:15px; box-shadow:var(--shadow)}
.statCard .sv{font-size:28px; font-weight:800; color:var(--brand); line-height:1}
.statCard .sl{font-size:13px; color:var(--muted); margin-top:5px}
.bar{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.bar .bl{width:96px; font-size:13px; flex-shrink:0; text-align:right; color:var(--muted)}
.bar .bt{flex:1; background:var(--bg2); border-radius:6px; height:22px; overflow:hidden}
.bar .bf{height:100%; background:var(--brand); border-radius:6px; min-width:2px; transition:width .4s}
.bar .bv{font-size:13px; font-weight:700; width:64px; flex-shrink:0}
.verFoot{text-align:center; color:var(--muted-2); font-size:12px; padding:18px 0 30px}

.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); opacity:0;
  background:var(--brand-900); color:#fff; padding:13px 20px; border-radius:12px; font-weight:600; font-size:14.5px;
  box-shadow:var(--shadow-lg); z-index:90; transition:all .25s; max-width:90vw; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{background:#B02A37}

.secretDot{position:fixed; right:0; bottom:0; width:46px; height:46px; z-index:25; opacity:0}

@media (max-width:420px){
  .empGrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
  .timeline{grid-template-columns:1fr}
  .app-header .ht b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}