:root{--navy:#173b61;--navy2:#0f2d4b;--blue:#2e6ca5;--sky:#eaf3fb;--ink:#172b3d;--muted:#6f7f8e;--line:#dce4ea;--bg:#f4f7f9;--white:#fff;--green:#2f8061;--amber:#c47a24;--red:#bd4d4d;--shadow:0 12px 35px rgba(25,52,76,.1)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans Thai",system-ui,sans-serif;font-size:14px}button,input,select,textarea{font:inherit}.hidden{display:none!important}.login-view{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--white)}.login-view:before{content:"";background:linear-gradient(145deg,rgba(15,45,75,.92),rgba(23,59,97,.76)),radial-gradient(circle at 25% 20%,#5f91bb 0 2px,transparent 3px);background-color:var(--navy);background-size:auto,38px 38px;grid-column:1;grid-row:1}.login-brand{position:absolute;left:5vw;top:5vh;display:flex;gap:12px;align-items:center;color:white}.login-brand strong,.sidebar-brand strong{display:block;font-size:18px}.login-brand span,.sidebar-brand span{display:block;font-size:11px;opacity:.7}.brand-mark{width:50px;height:50px;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;font-weight:700;letter-spacing:1px;border-radius:12px}.brand-mark.small{width:38px;height:38px;font-size:12px}.login-card{align-self:center;width:min(430px,80%);margin:auto}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:11px;color:var(--blue);font-weight:700}.login-card h1{font-size:46px;line-height:1.18;margin:12px 0}.login-card>p{color:var(--muted);line-height:1.8;margin-bottom:30px}.login-card label,.settings-card label{display:block;font-weight:600;margin:15px 0}.login-card input,.settings-card input{margin-top:7px}.login-hint{border-top:1px solid var(--line);padding-top:20px;margin-top:24px;color:var(--muted);font-size:12px}.login-hint code{color:var(--navy);background:var(--sky);padding:2px 6px;border-radius:4px}.form-error{color:var(--red);min-height:20px;margin-top:10px}.app{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:245px;background:var(--navy2);color:white;padding:22px 16px;z-index:10;display:flex;flex-direction:column}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:0 8px 28px;border-bottom:1px solid rgba(255,255,255,.1)}nav{padding-top:22px}.nav-item{width:100%;border:0;background:none;color:#b8c8d7;text-align:left;padding:12px 14px;border-radius:8px;margin:3px 0;cursor:pointer}.nav-item span{display:inline-block;width:28px;font-size:17px}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.1);color:white}.sidebar-footer{margin-top:auto;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.1);padding:18px 5px 0;gap:9px}.user-avatar{width:34px;height:34px;border-radius:50%;background:#d8e8f6;color:var(--navy);display:grid;place-items:center;font-weight:700}.user-meta{min-width:0;flex:1}.user-meta strong,.user-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.user-meta strong{font-size:12px}.user-meta span{font-size:10px;color:#96aabe}.icon-btn,.menu-btn,.close-btn{border:0;background:transparent;cursor:pointer;color:inherit}.sidebar-footer .icon-btn{font-size:18px;color:#b8c8d7}main{margin-left:245px;min-height:100vh}.topbar{height:84px;background:white;border-bottom:1px solid var(--line);padding:0 34px;display:flex;align-items:center;justify-content:space-between}.breadcrumb{font-size:10px;color:var(--muted)}.topbar h2{font-size:20px;margin:2px 0}.menu-btn{display:none;font-size:22px}.btn{border:1px solid transparent;border-radius:7px;padding:9px 15px;font-weight:600;cursor:pointer;transition:.15s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--navy);color:white}.btn.ghost{border-color:var(--line);background:white;color:var(--ink)}.btn.danger{background:#fff0f0;color:var(--red);border-color:#efc9c9}.btn.wide{width:100%;padding:12px}.view{padding:26px 34px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}.stat{background:white;border:1px solid var(--line);padding:16px 19px;border-radius:10px;display:flex;align-items:center;gap:14px}.stat-icon{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;font-size:18px}.stat-icon.blue{background:#e7f1fa;color:var(--blue)}.stat-icon.amber{background:#fff1de;color:var(--amber)}.stat-icon.green{background:#e7f4ed;color:var(--green)}.stat small{display:block;color:var(--muted);font-size:11px}.stat strong{font-size:24px;margin-right:6px}.stat div>span{color:var(--muted);font-size:10px}.calendar-card,.report-card,.settings-card{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden}.calendar-toolbar{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.month-nav{display:flex;align-items:center;gap:9px}.month-nav .icon-btn{width:30px;height:30px;border:1px solid var(--line);border-radius:6px;font-size:22px;line-height:1}.month-nav h3{font-size:17px;min-width:170px;text-align:center;margin:0}.month-nav .btn{padding:6px 12px;margin-left:6px;font-size:11px}.legend{display:flex;gap:15px;color:var(--muted);font-size:10px}.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px}.planned{background:var(--blue)}.in-progress{background:var(--amber)}.completed{background:var(--green)}.weekday-row,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.weekday-row{background:#f8fafb;border-bottom:1px solid var(--line)}.weekday-row span{text-align:center;padding:9px;color:var(--muted);font-size:10px}.calendar-day{min-height:112px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px;cursor:pointer;overflow:hidden}.calendar-day:nth-child(7n){border-right:0}.calendar-day:hover{background:#f8fbfd}.calendar-day.outside{background:#fafbfc;color:#b1bbc4}.calendar-day.today .day-number{background:var(--navy);color:white}.day-number{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;font-size:11px}.mission-chip{display:block;width:100%;border:0;border-left:3px solid var(--blue);background:#edf5fb;color:#234e72;border-radius:3px;margin-top:5px;padding:4px 5px;text-align:left;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.mission-chip.status-in_progress{border-color:var(--amber);background:#fff6e9;color:#7a511e}.mission-chip.status-completed{border-color:var(--green);background:#eaf6f0;color:#275e49}.more-count{font-size:9px;color:var(--muted);padding:3px}.report-toolbar{padding:22px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.report-toolbar h3,.settings-card h3{font-size:22px;margin:5px 0}.report-actions{display:flex;gap:9px;align-items:center}.segment{display:flex;background:#edf1f4;border-radius:7px;padding:3px}.segment button{border:0;background:transparent;padding:6px 10px;border-radius:5px;cursor:pointer;font-size:11px}.segment button.active{background:white;color:var(--navy);box-shadow:0 1px 4px #ccd4da}.report-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.report-summary div{background:#f9fbfc;padding:16px 24px}.report-summary small{display:block;color:var(--muted)}.report-summary strong{font-size:22px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:10px;color:var(--muted);background:#f8fafb;text-transform:uppercase}td{font-size:12px}.status-badge{display:inline-block;border-radius:20px;padding:3px 8px;background:var(--sky);color:var(--blue);font-size:9px}.status-badge.in_progress{background:#fff1df;color:var(--amber)}.status-badge.completed{background:#e7f4ed;color:var(--green)}.empty-row{text-align:center;color:var(--muted);padding:50px}.settings-card{max-width:640px;padding:28px}.settings-card p{color:var(--muted)}.settings-card form{max-width:420px}input,select,textarea{width:100%;padding:9px 11px;border:1px solid #cfd9e1;border-radius:6px;background:white;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,108,165,.1)}dialog{border:0;padding:0;border-radius:12px;width:min(720px,94vw);box-shadow:0 25px 70px rgba(10,30,50,.3)}dialog::backdrop{background:rgba(11,30,48,.56)}.dialog-head{padding:21px 25px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.dialog-head h3{font-size:20px;margin:4px 0}.close-btn{font-size:26px;color:var(--muted)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;padding:22px 25px;max-height:65vh;overflow:auto}.form-grid label{font-size:11px;font-weight:600;color:#405365}.form-grid label b{color:var(--red)}.form-grid input,.form-grid select,.form-grid textarea{margin-top:6px;font-weight:400}.span-2{grid-column:span 2}.time-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}.upload-box{border:1px dashed #aebdca;border-radius:8px;padding:16px;text-align:center;cursor:pointer;background:#f9fbfc}.upload-box input{display:none}.upload-box strong,.upload-box small{display:block}.upload-box small{color:var(--muted);font-weight:400}.upload-icon{font-size:23px;color:var(--blue)}.image-preview{display:flex;flex-wrap:wrap;gap:9px}.preview-item{position:relative;width:90px;height:70px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}.preview-item img{width:100%;height:100%;object-fit:cover}.preview-item button{position:absolute;right:3px;top:3px;width:20px;height:20px;border:0;border-radius:50%;background:rgba(15,45,75,.8);color:white;cursor:pointer}.dialog-actions{border-top:1px solid var(--line);padding:14px 25px;display:flex;gap:9px;justify-content:flex-end}.dialog-actions span{flex:1}.confirm-dialog{width:min(390px,90vw);padding:28px;text-align:center}.confirm-icon{width:45px;height:45px;border-radius:50%;background:#fff0f0;color:var(--red);display:grid;place-items:center;margin:auto;font-weight:700;font-size:22px}.confirm-dialog h3{margin-bottom:5px}.confirm-dialog p{color:var(--muted)}.confirm-dialog .dialog-actions{border:0;padding:10px 0 0;justify-content:center}.toast{position:fixed;right:24px;top:20px;background:var(--navy2);color:white;padding:11px 16px;border-radius:7px;box-shadow:var(--shadow);z-index:100;opacity:0;transform:translateY(-10px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}.toast.error{background:var(--red)}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.sidebar:after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.2);z-index:-1}main{margin-left:0}.menu-btn{display:block}.topbar{padding:0 18px}.topbar>div{margin-right:auto;margin-left:13px}.view{padding:18px}.stats-grid{grid-template-columns:1fr}.legend{display:none}.calendar-day{min-height:85px}.mission-chip{padding:3px;font-size:8px}.report-toolbar{align-items:flex-start;gap:15px}.report-actions{flex-wrap:wrap;justify-content:flex-end}}
@media(max-width:600px){.login-view{display:block;padding:100px 24px 40px;background:var(--navy2)}.login-view:before{display:none}.login-brand{left:24px;top:24px}.login-card{width:100%;background:white;padding:24px;border-radius:12px}.login-card h1{font-size:34px}.topbar .breadcrumb{display:none}.topbar h2{font-size:16px}.topbar .btn{font-size:0;padding:9px}.topbar .btn span{font-size:18px}.view{padding:12px}.stats-grid{grid-template-columns:repeat(3,1fr);gap:6px}.stat{padding:10px 7px;gap:5px}.stat-icon{display:none}.stat strong{font-size:19px}.calendar-toolbar{padding:12px}.month-nav{width:100%;justify-content:space-between}.month-nav h3{font-size:14px;min-width:auto}.weekday-row span{font-size:0}.weekday-row span::first-letter{font-size:10px}.calendar-day{min-height:67px;padding:4px}.day-number{width:20px;height:20px}.mission-chip{border-left-width:2px;text-indent:-999px;height:6px;padding:0}.report-toolbar{display:block}.report-actions{justify-content:flex-start;margin-top:14px}.report-actions input{width:auto}.report-summary div{padding:12px}.form-grid{grid-template-columns:1fr;padding:18px}.span-2{grid-column:span 1}.time-fields{grid-template-columns:1fr 1fr}.dialog-actions{padding:12px 18px}.dialog-actions .btn{padding:8px 10px}}
@media print{body{background:white}.sidebar,.topbar,.report-actions,.toast{display:none!important}main{margin:0}.view{display:none!important;padding:0}#reportView{display:block!important}.report-card{border:0}.report-toolbar{padding:0 0 16px}.report-summary{border:1px solid #ccc}th,td{color:#000;border-color:#ccc}.status-badge{border:1px solid #aaa;color:#000;background:white}.report-card:before{content:"FieldNote — รายงานการลงพื้นที่";display:block;font-size:12px;color:#555;margin-bottom:10px}}
.day-dialog{width:min(620px,94vw)}.day-dialog-count{margin:4px 0 0;color:var(--muted);font-size:11px}.day-mission-list{padding:12px 20px;max-height:60vh;min-height:170px;overflow:auto}.day-mission-item{width:100%;display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:white;border-radius:9px;padding:12px;margin:8px 0;text-align:left;color:var(--ink);cursor:pointer;transition:.15s}.day-mission-item:hover{border-color:#a9bfd2;background:#f8fbfd;transform:translateY(-1px)}.day-mission-status{width:5px;height:43px;border-radius:4px;background:var(--blue);flex:none}.day-mission-status.status-in_progress{background:var(--amber)}.day-mission-status.status-completed{background:var(--green)}.day-mission-main{min-width:0;flex:1}.day-mission-main strong,.day-mission-main small{display:block}.day-mission-main strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.day-mission-main small{font-size:10px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.day-mission-item>img{width:52px;height:42px;object-fit:cover;border-radius:5px;border:1px solid var(--line)}.day-mission-arrow{font-size:24px;color:#8ca0b1}.day-empty{text-align:center;color:var(--muted);padding:34px 15px}.day-empty>span{display:grid;place-items:center;width:45px;height:45px;margin:0 auto 10px;border-radius:50%;background:var(--sky);color:var(--blue);font-size:20px}.day-empty strong{display:block;color:var(--ink)}.day-empty p{font-size:11px;margin:5px}.report-images{display:grid;grid-template-columns:repeat(2,48px);gap:4px;min-width:100px}.report-images a{display:block;height:38px}.report-images img{width:48px;height:38px;object-fit:cover;border-radius:3px;border:1px solid var(--line)}
@media(max-width:600px){.day-mission-list{padding:8px 12px}.day-mission-item{padding:10px;gap:8px}.day-mission-item>img{width:44px;height:38px}.day-dialog .dialog-actions{display:flex}.day-dialog .dialog-actions .btn{font-size:11px}.report-images{grid-template-columns:repeat(2,42px);min-width:88px}.report-images img{width:42px;height:34px}}
@media print{.report-images{display:flex;flex-wrap:wrap;min-width:110px}.report-images a{height:38px}.report-images img{width:48px;height:38px;break-inside:avoid}tr{break-inside:avoid}th,td{padding:8px;font-size:9px}}
.mission-report-row td{border-bottom:0;padding-bottom:9px}.report-image-row td{padding-top:0;background:#fbfcfd}.report-image-label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;margin-bottom:7px}.report-image-label span{background:#edf2f6;color:#587084;border-radius:20px;padding:1px 7px}.report-image-strip{display:flex;gap:8px;overflow-x:auto;padding:1px 1px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}.report-image-strip button{position:relative;width:116px;height:78px;flex:0 0 116px;border:1px solid var(--line);border-radius:6px;padding:0;overflow:hidden;background:#eef2f5;cursor:pointer;scroll-snap-align:start}.report-image-strip button:hover{border-color:var(--blue);box-shadow:0 4px 12px rgba(23,59,97,.15)}.report-image-strip img{width:100%;height:100%;object-fit:cover;display:block}.report-image-strip button span{position:absolute;right:4px;bottom:4px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;background:rgba(15,45,75,.8);color:white;border-radius:10px;font-size:9px}.image-viewer-dialog{width:min(1080px,96vw);max-width:none;background:#08131d;color:white;border-radius:10px;overflow:hidden}.image-viewer-dialog::backdrop{background:rgba(3,10,16,.9)}.image-viewer-close{position:absolute;z-index:2;right:14px;top:10px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:white;font-size:27px;line-height:1;cursor:pointer}.image-viewer-stage{height:min(72vh,720px);min-height:360px;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;padding:18px}.image-viewer-stage>img{width:100%;height:100%;object-fit:contain;min-width:0}.image-viewer-nav{width:44px;height:54px;margin:auto;border:0;border-radius:8px;background:rgba(255,255,255,.1);color:white;font-size:38px;line-height:1;cursor:pointer}.image-viewer-nav:hover,.image-viewer-close:hover{background:rgba(255,255,255,.2)}.image-viewer-info{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:13px 24px;background:#0f202e}.image-viewer-info strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-viewer-info span{font-variant-numeric:tabular-nums;color:#b8c8d7;flex:none}
@media(max-width:600px){.report-image-strip button{width:94px;height:66px;flex-basis:94px}.image-viewer-dialog{width:100vw;height:100dvh;max-height:none;border-radius:0}.image-viewer-stage{height:calc(100dvh - 65px);min-height:0;grid-template-columns:42px 1fr 42px;padding:8px}.image-viewer-nav{width:36px;height:48px;font-size:32px;background:rgba(255,255,255,.14)}.image-viewer-info{height:65px;padding:11px 15px;font-size:12px}.image-viewer-close{right:9px;top:8px}}
@media print{.report-image-row td{background:white;padding-top:0}.report-image-label{margin-bottom:4px}.report-image-strip{display:flex;flex-wrap:wrap;overflow:visible;gap:4px;padding-bottom:8px}.report-image-strip button{width:70px;height:50px;flex:0 0 70px;border-color:#aaa}.report-image-strip button span{display:none}.image-viewer-dialog{display:none!important}.mission-report-row td{padding-bottom:5px}.report-image-row{break-inside:avoid}}
.btn:disabled{cursor:not-allowed;opacity:.7;transform:none}.btn.saving{display:inline-flex;align-items:center;gap:8px}.btn.saving::before{content:"";width:13px;height:13px;border:2px solid rgba(255,255,255,.42);border-top-color:white;border-radius:50%;animation:save-spin .75s linear infinite}@keyframes save-spin{to{transform:rotate(360deg)}}
.confirm-mission-name{color:var(--ink)!important;font-weight:700;background:#f4f7f9;border-radius:7px;padding:9px 12px;margin:12px 0!important;overflow-wrap:anywhere}