/* KEMREX CI v1.8.2 recolored */
/* KEMREX Installation Operations - scoped responsive styles. */
.iops{max-width:1600px;margin:0 auto;padding-bottom:24px;color:#012d62}
.io-tabs{display:flex;gap:6px;align-items:center;overflow:auto;margin:14px 0 20px;padding:7px;background:#e8eef5;border-radius:0;scrollbar-width:thin}
.io-tabs>button{border:0;white-space:nowrap;padding:10px 17px;border-radius:10px;font-weight:500;color:#28558b;background:transparent;cursor:pointer}
.io-tabs>button.current{background:#024291;color:#fff;box-shadow:0 3px 10px #02429125}
.io-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0;min-width:0}
.io-bar label{font-size:12px;font-weight:500;color:#5a6067;display:flex;gap:8px;align-items:center}
.io-bar input:not([type=checkbox]),.io-bar select{font-family:inherit;border:1px solid #d6d8db;border-radius:10px;padding:9px 10px;background:white;min-width:0;max-width:100%;color:#022f67}
.io-bar>input:not([type=checkbox]){flex:1 1 240px}
.io-stats{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin:12px 0 18px}
.io-stat{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e2e4e6;border-radius:0;padding:12px 15px;box-shadow:0 3px 10px #01275510}
.io-stat strong{font-size:26px;color:#01295a}
.io-chip{display:inline-block;padding:4px 9px;font-size:11px;white-space:nowrap;font-weight:500;border-radius:14px;background:#eaeff6;color:#265185}
.io-ACCEPTED,.io-LOADED{background:#e3eaf3;color:#265083}.io-DEPARTED,.io-ARRIVED,.io-WORKING{background:#dfe8f2;color:#023a7e}
.io-QA{background:#fff1d4;color:#906000}.io-SIGNED,.io-CLOSED{background:#e1e9f3;color:#022f67}
.io-CANCELLED{background:#ffe5e5;color:#a32a31}.io-POSTPONED{background:#fbe7d3;color:#8e4b17}
.io-card{padding:18px;margin:15px 0}.io-card h2,.io-card h3{margin:0 0 12px}
.io-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid #dcdee1;border-radius:0;overflow:hidden;background:#fff}
.io-weekday{background:#012d63;color:#fff;text-align:center;padding:12px 1px;font-weight:500;font-size:12px}
.io-cell{min-height:140px;border-right:1px solid #e5e7e9;border-bottom:1px solid #e5e7e9;padding:6px;min-width:0}
.io-cell.muted{background:#f4f5f6}.io-cell.is-today{background:#eef2f8}
.io-day{display:flex;justify-content:space-between;font-size:12px;color:#757e86;margin:0 1px 5px}.io-day b{color:#023471;font-size:14px}
.io-cell-items{display:flex;flex-direction:column;gap:5px}.io-job{font:inherit;border:1px solid #dde0e2;text-align:left;background:#fff;border-radius:0;padding:7px 9px;color:#022e64;cursor:pointer;min-width:0;display:block;width:100%;transition:box-shadow .18s}
.io-job:hover{box-shadow:0 3px 11px #023e8826;border-color:#204e86}.io-job strong{display:inline-block;font-size:12px;word-break:break-word}.io-job .io-chip{margin-left:3px;padding:2px 6px;font-size:10px}
.io-job .io-muted,.io-job .io-desc{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#6f777f;margin-top:5px}
.io-job .io-desc{color:#02418f}
.io-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:9px;max-height:560px;overflow:auto}
.io-table-wrap{width:100%;overflow-x:auto}.io-table{border-collapse:collapse;width:100%;min-width:680px;font-size:13px}
.io-table th{text-align:left;background:#eff4f9;color:#596067;letter-spacing:.02em;padding:10px;border-bottom:1px solid #e0e2e4}
.io-table td{padding:10px;border-bottom:1px solid #e7e9eb;vertical-align:middle}
.io-table small{display:block;margin-top:3px;color:#79828b}.io-pager{justify-content:flex-end;font-size:12px}
.io-detail-head{display:flex;flex-wrap:wrap;align-items:center;gap:13px;padding:16px;background:#022f65;border-radius:0;color:#ebf0f7;margin:13px 0}
.io-detail-head .io-chip{color:#02316a}.io-detail-head strong{font-size:17px}.io-actions{margin:16px 0;gap:8px}
.io-card p{line-height:1.65}.io-hint{font-size:12px;color:#687077;margin:9px 0}
.io-card form:not(#io-material-form){margin:12px 0}.io-card input,.io-card textarea,.io-card select,.modal-inner.iops input,.modal-inner.iops select{font:inherit;min-height:36px;border:1px solid #d5d8da;border-radius:10px;padding:7px 9px;max-width:100%;background:#fff}
.io-table input{min-width:75px;width:100%}.io-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.io-form-grid label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:500;color:#585e65}
.io-form-grid label.io-wide{grid-column:1/-1}.io-form-grid select[multiple]{min-height:118px}
.io-search-results{max-height:245px;overflow:auto;border-radius:10px;border:1px solid #dddfe1;background:#f4f7fb}
.io-so-table button{display:flex;gap:10px;flex-wrap:wrap;align-items:center;width:100%;border:0;border-bottom:1px solid #e6e8e9;padding:9px 12px;background:transparent;text-align:left;cursor:pointer;color:#023676}
.io-so-table button:hover{background:#dbe4f0}.io-so-table span{font-size:12px;max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.io-photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.io-photo{display:flex;flex-direction:column;gap:4px;border:1px solid #e1e2e4;border-radius:0;overflow:hidden;background:white;padding:7px}
.io-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}.io-photo strong{font-size:11px}.io-photo small{font-size:11px;color:#808890}
.io-events{max-height:360px;overflow:auto}.io-events>div{display:flex;gap:12px;flex-wrap:wrap;padding:10px 5px;border-bottom:1px solid #e7e8ea;font-size:12px}
.io-events time{min-width:130px;color:#8b939b}.io-events strong{min-width:100px;color:#023a7f}.io-events span{flex:1 1 180px;white-space:pre-wrap;overflow-wrap:anywhere}
.io-signbox{margin:15px 0;padding:10px;border:1px solid #cedced;border-radius:0;background:#f6f9fc}.io-signbox p{margin:0 0 8px}
.io-signbox canvas{display:block;width:100%;max-width:600px;aspect-ratio:3/1;touch-action:none;background:white;border:1px dashed #a6acb1;border-radius:0;margin-bottom:10px}
.io-sign-img{width:200px;max-width:100%;border:1px solid #c6d6ea;border-radius:0;background:white}.io-check{display:flex;align-items:center;gap:8px;font-size:12px;margin:14px 0}
@media(max-width:1100px){.io-stats{grid-template-columns:repeat(2,1fr)}.io-cell{min-height:118px}.io-job .io-muted{display:none}}
@media(max-width:700px){.iops{padding:0 2px 30px}.io-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.io-stat{padding:9px 11px}.io-stat strong{font-size:22px}
 .io-card{padding:12px}.io-tabs>button{padding:10px 13px}.io-calendar{display:block;border:0}.io-weekday{display:none}.io-cell.muted{display:none}
 .io-cell{display:block;min-height:0;padding:10px;background:#fff;border:1px solid #e2e3e5;border-radius:0;margin-bottom:8px}.io-day{font-size:14px}
 .io-cell-items{display:grid;grid-template-columns:1fr 1fr;gap:5px}.io-job .io-muted{display:block}.io-form-grid{grid-template-columns:1fr}.io-form-grid label.io-wide{grid-column:1}
 .io-detail-head{gap:8px;padding:11px}.io-bar{gap:7px}.io-bar label{max-width:100%}
 .io-bar button{min-height:38px}.io-list{grid-template-columns:1fr}.io-photo-grid{grid-template-columns:1fr 1fr}}

/* v1.6.2: safer, readable separate unbound/bound technician account lists. */
.io-mapping-stats{display:flex;flex-wrap:wrap;gap:10px;margin:17px 0;padding:10px 0}
.io-mapping-stats span{background:#edf2f8;border:1px solid #ccdaec;border-radius:0;padding:10px 14px;font-size:12px;color:#024290}
.io-mapping-stats b{font-size:16px;color:#024290;margin-left:6px}
.io-card h3{margin-top:20px;margin-bottom:9px}

/* v1.7.0: จัดคิวติดตั้งจาก SO100 — หน้าต่างกว้างขึ้น / ตาราง SO100 / ทีมเสริม + รถ */
.io-form-grid .io-wide{grid-column:1/-1}
dialog.modal.io-queue-dialog{width:min(1080px,calc(100% - 22px))}
.io-so-picker{display:grid;gap:8px}
.io-so-list{border:1px solid #d7e1ee;border-radius:0;max-height:340px;overflow:auto;background:#fff}
.io-so-pick{width:100%;min-width:640px;border-collapse:collapse;font-size:13px}
.io-so-pick th{position:sticky;top:0;background:#f4f7fa;z-index:1;text-align:left;white-space:nowrap}
.io-so-pick td{padding:10px 14px;vertical-align:middle;border-bottom:1px solid #f0f1f2;line-height:1.5}
.io-so-pick td small{display:block;color:#838b93;font-size:11.5px}
.io-so-pick tr.is-picked td{background:#e7edf5}
.io-so-pick tr.is-queued td{color:#9aa0a7}
.io-so-project{font-weight:500;color:#02397c}
.io-so-state{display:inline-block;background:#f0f4f9;color:#2c5c97;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:500;white-space:nowrap}
.io-so-busy{display:inline-block;color:#9a6a12;font-weight:500;font-size:12px;white-space:nowrap}
.io-so-pick .btn{white-space:nowrap}
.io-so-pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;font-size:12.5px;color:#626970}
.io-so-pager span:first-child{margin-right:auto}
.io-so-empty{margin:0;padding:22px;text-align:center;color:#838b93;border:1px dashed #d7dadd;border-radius:0}
.io-picked{font-size:12.5px;color:#747d86;padding:8px 12px;border-radius:0;background:#f4f7fa}
.io-picked.is-set{color:#02397c;background:#e7edf5;font-weight:500}
.io-extra-teams{border:1px solid #d7e1ee;border-radius:0;padding:12px 14px;display:grid;gap:8px;background:#fbfdfe}
.io-extra-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.io-extra-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:10px;align-items:end}
.io-extra-row label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:500;color:#585e65}
.io-extra-remove{min-width:36px}
.io-bar-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:720px){.io-extra-row{grid-template-columns:1fr}.io-extra-remove{justify-self:end}}
.io-so-pick td:nth-child(-n+2){white-space:nowrap}