:root { --ink:#17232d; --muted:#526271; --green:#0e7662; --green-soft:#edf7f3; --line:#d5dee5; --blue:#176eaf; --edit:#f4faff; --radius:12px; }
.manager-status-trigger { border:0; background:transparent; font-family:inherit; cursor:pointer; white-space:nowrap; }
.manager-status-trigger:hover { text-decoration:underline; }
.manager-status-menu { position:fixed; z-index:100; width:150px; padding:5px; border:1px solid #bfd3c9; border-radius:6px; background:#fff; box-shadow:0 8px 24px #17324830; }
.manager-status-menu button { width:100%; border:0; border-radius:4px; padding:8px; background:#edf7f0; color:#176c3e; text-align:left; font-size:11px; }
.manager-status-menu button:hover { background:#dcefe2; }
.manager-complete-summary { padding:12px; border:1px solid #d4e2dc; border-radius:6px; background:#f4f7f5; line-height:1.8; }
.manager-complete-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:#f5f7fa; font-family:'Prompt',Tahoma,sans-serif; font-size:13px; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.5; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.grid-viewport:focus-visible { outline:2px solid #23957e; outline-offset:2px; }
.topbar { min-height:76px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 28px; }
.brand { display:flex; gap:11px; align-items:center; }
.brand-mark { width:38px; height:42px; border-radius:10px; background:var(--green); color:#fff; display:grid; place-items:center; font-size:29px; }
.brand strong { display:block; font-size:15px; letter-spacing:1.7px; }
.brand small { display:block; color:var(--muted); font-size:8px; letter-spacing:1.5px; margin-top:3px; }
.top-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.button { border:1px solid var(--line); background:#fff; color:var(--ink); min-height:35px; padding:7px 12px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:11px; white-space:nowrap; }
.button:hover { background:#f3f6f8; border-color:#b6c8cf; }
.button.primary { background:var(--green); color:white; border-color:var(--green); }
.button.quiet { border-color:transparent; background:transparent; color:#697989; }
.user-chip { display:flex; gap:7px; align-items:center; border-left:1px solid var(--line); padding-left:13px; margin-left:3px; font-size:11px; }
.avatar { display:grid; place-items:center; width:30px; height:30px; background:#e2f0eb; color:var(--green); border-radius:50%; font-weight:600; }
main { padding:26px 28px 10px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:22px; }
.eyebrow { font-size:10px; font-weight:500; color:var(--green); margin-bottom:6px; letter-spacing:.3px; }
h1 { font-size:25px; margin:0; font-weight:600; letter-spacing:-.6px; }
.sheet-badge { vertical-align:middle; padding:4px 8px; border:1px solid #d2e9df; border-radius:5px; color:var(--green); background:var(--green-soft); font-size:10px; font-weight:400; letter-spacing:0; margin-left:8px; }
.page-heading p { color:var(--muted); margin:7px 0 0; font-size:11px; }
.heading-note { display:flex; gap:7px; align-items:center; font-size:10px; color:var(--muted); }
.connection-dot,.edit-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#39a883; }
.icon-button { border:1px solid transparent; background:transparent; border-radius:6px; color:#6c8090; width:30px; height:30px; font-size:21px; display:inline-grid; place-items:center; padding:0; }
.icon-button:hover { background:#eaf0f2; }
.summary-strip { display:flex; align-items:center; gap:0; background:white; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:22px; padding:18px 20px; }
.summary-strip > div { display:flex; align-items:center; gap:12px; flex:1; padding:0 22px; border-right:1px solid var(--line); }
.summary-strip > div:first-child { padding-left:0; }
.summary-strip > div:last-child { border:0; }
.metric-icon { height:38px; width:38px; flex:none; display:grid; place-items:center; border-radius:9px; font-size:21px; background:#f0f3f7; color:#667a91; }
.metric-icon.pending { background:#fff5df; color:#bd8d24; }.metric-icon.assigned { background:#eaf4fc; color:#388cb6; }.metric-icon.done { background:#eaf7ef; color:#2b9461; }
.summary-strip small { font-size:10px; display:block; color:var(--muted); margin-bottom:1px; }
.summary-strip strong { font-size:22px; font-weight:600; line-height:1.3; }
.summary-strip .summary-tip { display:block; flex:.9; font-size:11px; font-weight:500; color:var(--blue); padding-right:0; }
.summary-tip span { display:block; font-size:9px; color:var(--muted); font-weight:400; margin-top:5px; }
.sheet-card { background:white; border:1px solid #dce3ea; border-radius:var(--radius); overflow:hidden; box-shadow:0 3px 12px #243c5305; }
.sheet-toolbar { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:14px 16px; border-bottom:1px solid var(--line); }
.sync-control { display:flex; align-items:center; gap:6px; color:#334653; font-size:10px; margin-right:auto; white-space:nowrap; }
.month-control { display:flex; align-items:center; gap:3px; }
.month-label { position:relative; padding:7px 9px; min-width:133px; text-align:center; font-size:12px; font-weight:500; }
.month-label input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.month-label input::-webkit-calendar-picker-indicator { position:absolute; inset:0; width:auto; height:auto; cursor:pointer; }
.tab-list { display:flex; align-self:stretch; gap:3px; border-left:1px solid var(--line); padding-left:17px; }
.tab { border:0; border-radius:6px; background:transparent; padding:6px 12px; color:#7e8b99; font-size:11px; }
.tab.active { background:var(--green-soft); color:var(--green); font-weight:500; }
.filter-actions { margin-left:auto; display:flex; gap:9px; }
.search-box { display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:7px; padding:0 9px; color:#8e9aa5; background:#fbfcfd; }
.search-box span { font-size:20px; }
.search-box input { width:210px; border:0; outline:0; background:transparent; font-size:10px; height:33px; }
.search-box:focus-within { border-color:#30a38b; }
.filter-select { border:1px solid var(--line); background:white; border-radius:7px; padding:6px 8px; font-size:10px; color:#5c7183; }
.editing-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 18px; background:#fbfcfd; font-size:10px; color:#8a97a3; }
.editing-bar strong { color:#697f8d; font-weight:500; }
.edit-dot { background:#4c9cd5; margin-right:5px; }
#draftCount.dirty { color:#b57921; }
.grid-viewport { max-height:calc(100vh - 375px); min-height:260px; overflow:auto; overscroll-behavior:contain; scrollbar-color:#bfcbd4 #f5f7f9; scrollbar-width:thin; }
.dispatch-grid { table-layout:fixed; width:100%; min-width:1800px; border-collapse:separate; border-spacing:0; font-size:11px; }
.col-index{width:40px}.col-date{width:111px}.col-requester{width:160px}.col-receiver{width:105px}.col-province{width:95px}.col-address{width:200px}.col-details{width:210px}.col-qty{width:95px}.col-company{width:150px}.col-type{width:83px}.col-driver{width:160px}.col-plate{width:135px}.col-time{width:125px}.col-action{width:124px}
.dispatch-grid th { position:sticky; top:0; z-index:4; height:43px; padding:5px 9px; text-align:left; background:#e7edf2; border-top:1px solid #cbd6de; border-bottom:1px solid #bccbd5; border-right:1px solid #d1dbe2; font-size:10px; font-weight:600; white-space:nowrap; color:#172b39; }
.dispatch-grid th small { display:none; }
.dispatch-grid th.editable-heading { background:#e9f3fc; color:#2678ad; }
.dispatch-grid td { height:77px; padding:10px 9px; vertical-align:top; border-bottom:1px solid #d5dfe6; border-right:1px solid #d5dfe6; background:white; overflow-wrap:anywhere; line-height:1.65; color:#17232d; }
.dispatch-grid tbody tr.day-1 td { background:#fffdf4 !important; }
.dispatch-grid tbody tr.day-2 td { background:#f4fbff !important; }
.dispatch-grid tbody tr.day-3 td { background:#f5fbf6 !important; }
.dispatch-grid tbody tr:nth-child(even) td { background:#fcfdfe; }
.dispatch-grid td.editable { background:#f8fbfe; padding:13px 6px 8px; }
.dispatch-grid tbody tr:nth-child(even) td.editable { background:#f4f9fd; }
.dispatch-grid tr:hover td { background:#f0f7f5; }
.dispatch-grid tr.dirty td { border-bottom-color:#ead298; }
.dispatch-grid tr.dirty td.pin-index { background:#fff5df; color:#b77914; }
.dispatch-grid tr.closed td { color:#929eaa; background:#f8fafb; }
.dispatch-grid .pin-index { position:sticky; left:0; z-index:2; text-align:center; color:#40515e; font-size:10px; }
.dispatch-grid .pin-date { position:sticky; left:40px; z-index:2; box-shadow:2px 0 3px #162b4010; }
.dispatch-grid .pin-action { position:sticky; right:0; z-index:2; box-shadow:-2px 0 4px #162b4012; text-align:center; }
.dispatch-grid th.pin-index,.dispatch-grid th.pin-date,.dispatch-grid th.pin-action { z-index:6; }
.cell-title { font-weight:600; color:#17232d; font-size:11px; }
.cell-sub { display:block; color:#526271; font-size:9px; margin-top:4px; line-height:1.5; font-weight:500; }
.department-label { color:#334d5d; font-weight:600; }
.cell-text { max-height:58px; overflow:auto; white-space:pre-wrap; scrollbar-width:thin; }
.cell-input { width:100%; min-width:0; height:32px; border:1px solid #d4e5f2; border-radius:5px; color:#286a99; background:#fff; padding:5px 6px; font-size:10px; }
.cell-input:hover { border-color:#91b9d5; }.cell-input:disabled { background:transparent; color:#95a2ac; border-color:#e4e9ed; }
.cell-input.changed { border-color:#daa343; background:#fffdf4; }
.cell-input.note { font-size:9px; margin-top:7px; height:25px; border-color:#e2e7ec; color:#647689; }
.driver-picker { position:relative; width:100%; }
.driver-picker > summary { list-style:none; min-height:32px; border:1px solid #d4e5f2; border-radius:5px; background:#fff; padding:4px 22px 4px 5px; cursor:pointer; display:flex; gap:3px; align-items:center; flex-wrap:wrap; position:relative; }
.driver-picker > summary::-webkit-details-marker { display:none; }
.driver-picker[data-locked="true"] > summary { cursor:default; opacity:.65; }
.driver-picker-arrow { position:absolute; right:7px; top:6px; color:#647689; }
.driver-picker[open] .driver-picker-arrow { transform:rotate(180deg); }
.driver-chip { display:inline-flex; align-items:center; gap:3px; max-width:100%; border-radius:4px; padding:2px 4px; background:#e9f3fc; color:#245f87; font-size:9px; font-weight:600; }
.driver-chip small { color:#687b89; font-size:7px; font-weight:500; }
.driver-placeholder { color:#6f8190; font-size:10px; }
.driver-picker-menu { position:absolute; z-index:20; top:calc(100% + 3px); left:0; width:max(190px,100%); max-height:230px; overflow:auto; border:1px solid #b8cbd8; border-radius:7px; background:#fff; padding:5px; box-shadow:0 10px 28px #17324830; }
.driver-picker-hint,.driver-picker-empty { padding:5px 6px; color:#738391; font-size:8px; }
.driver-choice { display:flex; align-items:center; gap:7px; min-height:30px; padding:5px 6px; border-radius:4px; cursor:pointer; color:#243846; }
.driver-choice:hover { background:#edf7f3; }
.driver-choice input { accent-color:var(--green); }
.driver-choice span { flex:1; font-size:10px; }
.driver-choice small { font-size:8px; color:var(--green); }
.driver-choice.unavailable { opacity:.55; cursor:default; }
.type-badge { display:inline-block; font-size:9px; color:#437c71; padding:2px 7px; border:1px solid #dce9e5; border-radius:4px; background:#f2f8f5; white-space:nowrap; }
.type-badge.external { color:#817253; border-color:#eee5d5; background:#fbf8f1; }
.status-pill { display:inline-block; border-radius:4px; padding:2px 6px; font-size:8px; line-height:1.5; background:#f0f3f6; color:#778593; margin-top:5px; }
.status-pill.pending { background:#fff3d9;color:#a07b26; }.status-pill.assigned { background:#e9f2fc;color:#3379ac; }.status-pill.done { background:#e9f6ec;color:#398653; }.status-pill.problem { background:#fff0eb;color:#ae5c41; }
.save-row { height:30px; width:100%; border:1px solid #cfe3db; border-radius:5px; color:var(--green); background:#f2f9f6; font-size:10px; font-weight:500; }
.dirty .save-row { background:var(--green); color:white; border-color:var(--green); }
.row-result { display:block; margin-top:5px; font-size:8px; color:#8c9caa; line-height:1.5; }
.row-result.error { color:#ba513e; }.row-result.success { color:var(--green); }
.row-reset { border:0; background:transparent; color:#967948; text-decoration:underline; font-size:8px; margin-top:3px; }
.empty-state { padding:50px 15px; text-align:center; color:#80919d; }
.empty-state > span { display:block; font-size:34px; color:#b8c8ce; }.empty-state strong { font-weight:500; }.empty-state p { font-size:11px; }
.sheet-footer { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding:12px 17px; font-size:9px; color:#8b9aa7; }
.sheet-footer > span:first-child { color:#4f7569; }
.page-footnote { margin:12px 2px; color:#8a98a7; font-size:9px; }
.board-message { margin:10px 16px; padding:9px 12px; color:#9e583f; background:#fff4ed; border:1px solid #f0dfd3; border-radius:6px; font-size:11px; }
.access-panel { text-align:center; max-width:440px; margin:100px auto; padding:32px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.access-panel h1 { font-size:20px; margin-top:12px; }.access-panel p { color:var(--muted); line-height:1.8; }.access-icon { color:var(--green); font-size:38px; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:15; background:#183f35; color:white; border-radius:8px; padding:12px 22px; box-shadow:0 4px 20px #153f3520; font-size:12px; }
.management-dialog { border:1px solid var(--line); border-radius:15px; padding:24px; width:min(660px,94vw); max-height:85vh; color:var(--ink); box-shadow:0 20px 90px #172c4220; }
.management-dialog::backdrop { background:#1b32434d; backdrop-filter:blur(2px); }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; }.dialog-heading h2 { margin:0; font-size:19px; }.dialog-message { color:#a65d38; font-size:11px; min-height:18px; }
.management-list { max-height:300px; overflow:auto; border:1px solid var(--line); border-radius:7px; margin-top:18px; }
.management-item { display:flex; justify-content:space-between; gap:12px; padding:11px 13px; border-bottom:1px solid var(--line); align-items:center; }.management-item:last-child { border-bottom:0; }
.management-item small { display:block; color:var(--muted); font-size:10px; }
.vehicle-departure { color:var(--muted); font-size:9px; text-align:left; }
.vehicle-departure input { display:block; margin-top:4px; padding:6px; border:1px solid var(--line); border-radius:6px; color:var(--ink); }
.management-form { display:flex; gap:9px; flex-wrap:wrap; }.management-form label { flex:1; min-width:120px; font-size:10px; color:var(--muted); }.management-form input,.management-form select { display:block; width:100%; padding:9px; border:1px solid var(--line); border-radius:6px; margin-top:5px; font-size:12px; }.management-form button { align-self:flex-end; min-height:37px; }
@media(min-width:1800px) { .grid-viewport { max-height:calc(100vh - 380px); } }
@media(max-width:1150px) { .topbar { padding:13px 18px; flex-wrap:wrap; }.summary-tip { display:none !important; }.summary-strip > div:nth-child(4) { border:0; }.filter-actions { width:100%; margin-left:0; }.search-box { flex:1; }.search-box input { width:100%; }.grid-viewport { max-height:60vh; }.user-chip { display:none; } }
@media(max-width:650px) { main { padding:19px 12px 8px; }.topbar { padding:12px; }.top-actions { gap:4px; }.top-actions .button { font-size:9px; padding:6px 8px; }.brand { margin-bottom:4px; }h1 { font-size:21px; }.sheet-badge { display:none; }.page-heading { align-items:flex-start; flex-direction:column; gap:10px; margin-bottom:16px; }.summary-strip { padding:14px 6px; margin-bottom:14px; }.summary-strip > div { padding:0 9px; gap:5px; }.metric-icon { display:none; }.summary-strip small { font-size:8px; }.summary-strip strong { font-size:21px; }.sheet-toolbar { padding:10px 8px; gap:8px; }.tab-list { padding-left:7px; }.tab { padding:5px 7px; font-size:10px; }.month-label { min-width:107px; font-size:10px; }.month-control { gap:0; }.month-control .icon-button { width:23px; }.editing-bar { padding:8px; font-size:8px; }.sheet-footer { flex-direction:column; gap:4px; }.grid-viewport { max-height:58vh; }.dispatch-grid .pin-date { position:static; box-shadow:none; }.access-panel { margin:45px 16px; } }
.reschedule-form { display:grid; gap:14px; padding:20px; }
.reschedule-form label { display:grid; gap:6px; font-weight:600; }
.reschedule-form input,.reschedule-form select,.reschedule-form textarea { width:100%; padding:10px; border:1px solid #bacbd7; border-radius:6px; font:inherit; }
#rescheduleMessage { color:#b42318; white-space:pre-wrap; }
.reschedule-row { display:block; margin-top:6px; border:1px solid #b8cbd8; border-radius:4px; background:#fff; color:#145b80; padding:4px; font:inherit; cursor:pointer; }
.reschedule-row:disabled { opacity:.5; cursor:default; }
/* Compact spreadsheet layout. */
body{font-family:Tahoma,Arial,sans-serif;color:#142019}
.topbar{flex-wrap:wrap;gap:16px;padding:12px 20px}.top-actions{margin-left:auto}
.topbar .summary-strip{display:flex;flex:0 1 auto;margin:0;padding:0;border:0;box-shadow:none;gap:0;background:transparent}
.topbar .summary-strip[hidden]{display:none}.topbar .summary-strip>div{padding:0 14px;min-width:0;border-right:1px solid #d3dfd7}.topbar .summary-strip strong{font-size:22px}.topbar .summary-strip small{font-size:11px;color:#334c3e}.summary-tip,.metric-icon{display:none!important}
main{padding:14px 16px 5px}.sheet-toolbar{padding:8px 12px;gap:10px}.date-tools{display:flex;align-items:end;gap:8px;padding:8px 12px;flex-wrap:wrap}.date-tools label{display:grid;gap:4px;font-size:12px}.date-tools input{height:32px;border:1px solid #9bac9f;border-radius:4px;padding:4px 8px;font:inherit}.date-shortcuts{display:flex;gap:4px}.date-shortcuts button{padding:7px 10px;background:#f4f9f5;border:1px solid #9bac9f;border-radius:4px;color:#163522}.date-tools #exportExcel{margin-left:auto}#dateRangeHint{font-size:11px;color:#53695c}.editing-bar{padding:6px 12px}.sheet-footer{padding:8px 12px;color:#425849}.page-footnote{margin:6px}
.grid-viewport{max-height:calc(100vh - 255px)}.dispatch-grid{min-width:1650px;width:100%;font-size:13px;table-layout:fixed}
.col-index{width:32px}.col-date{width:95px}.col-receiver{width:205px}.col-schedule{width:150px}.col-address{width:255px}.col-qty{width:65px}.col-requester{width:135px}.col-company{width:150px}.col-driver{width:160px}.col-plate{width:120px}.col-time{width:110px}.col-status{width:85px}.col-action{width:158px}
.dispatch-grid th,.dispatch-grid th.editable-heading{height:33px;padding:5px 6px;background:#299f50;color:#ffff52;font-size:12px;font-weight:700;border-color:#497651}
.dispatch-grid td,.dispatch-grid td.editable{height:34px;padding:2px 5px;vertical-align:middle;line-height:1.4;border-color:#91a8a9;color:#142019}
.dispatch-grid tbody tr.day-1 td{background:#cfe2f3!important}.dispatch-grid tbody tr.day-2 td{background:#fff2cc!important}.dispatch-grid tbody tr.day-3 td{background:#e0efdf!important}.dispatch-grid tr.closed td{color:#243c2f}
.dispatch-grid .pin-date{left:32px}.cell-title{font-size:12px;color:#111e16}.clip-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clip-cell small{font-size:11px}
.cell-read{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#142019;font:inherit;line-height:27px;cursor:pointer}.cell-read:hover{text-decoration:underline}
.cell-input{height:27px;padding:2px 4px;font-size:12px;border:1px solid #91a8a9;border-radius:3px;color:#142019;background:#ffffffc9}.cell-input:disabled{color:#42564a;border-color:#a9b7ac}.cell-sub{font-size:11px;color:#324d3d;margin:0}
.company-cell{white-space:nowrap}.company-cell .cell-input+.cell-input{margin-top:2px}
.driver-picker>summary{min-height:27px;height:27px;flex-wrap:nowrap;padding:2px 18px 2px 4px;border-color:#91a8a9;border-radius:3px;overflow:hidden}.driver-chip{white-space:nowrap;font-size:10px;flex-shrink:1;overflow:hidden}.driver-chip small{font-size:8px}.driver-picker-menu{position:fixed;z-index:50;font-size:12px;width:240px;max-height:230px}.driver-choice span{font-size:12px}.driver-picker-hint{font-size:10px}
.status-pill{margin:0;padding:0;background:transparent!important;font-size:11px;font-weight:700}.status-pill.pending{color:#744708}.status-pill.assigned{color:#164f83}.status-pill.done{color:#126031}
.row-buttons{display:flex;gap:4px;align-items:center}.save-row{height:27px;min-width:62px;font-size:11px;background:#18793e;color:white;border-color:#116431}.save-row:disabled{background:#edf5ee;color:#27623b;opacity:.75}.reschedule-row{display:inline-block;margin:0;height:27px;white-space:nowrap;padding:3px 6px;font-size:11px}.row-result{font-size:10px;margin:0}.row-result:empty{display:none}.row-result.error{color:#a51f12}.row-reset{font-size:10px}.row-result.success{max-width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jobDetailBody dt{font-size:12px;color:#58695e;margin-top:14px}#jobDetailBody dd{margin:4px 0;white-space:pre-wrap;line-height:1.7}#jobDetailBody textarea{display:block;width:100%;font:inherit;padding:8px}#jobDetailBody p{font-size:12px;color:#596c60}
.source-edit-hint{margin:-8px 0 0;color:#755b2e;font-size:11px}
@media(max-width:1200px){.topbar .summary-strip{order:2}.grid-viewport{max-height:60vh}.filter-actions{width:auto;flex:1}.date-tools{gap:6px}}