*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--sw:220px;--bg:#f4f1ed;--s:#fcfaf7;--b:#dcd5cc;--t:#3a3a3a;--t2:#77726d;--t3:#a8a098;--p:#6e8399;--pl:#eef1f5;--sc:#899e72;--sl:#eef3e8;--w:#c4a070;--wl:#faf5ed;--d:#c08a8a;--dl:#faf0f0;--i:#6a8799;--il:#eef2f5;--sb:#3e4955;--st:#c8ced5;--sa:#5d7085;--sh:#303944;--r:8px;--shd:0 1px 4px rgba(0,0,0,0.05)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",sans-serif;background:var(--bg);color:var(--t);display:flex;min-height:100vh;line-height:1.5;font-size:14px}
.sidebar{width:var(--sw);background:#3e4955;color:var(--st);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:100;overflow-y:auto}
.sidebar-header{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,0.08)}
.sidebar-header h1{font-size:15px;font-weight:600;color:#f8fafc}
.subtitle,.sidebar-header .sub{font-size:11px;color:var(--t3);margin-top:2px}
.sidebar-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.sidebar-nav button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;border-radius:6px;background:transparent;color:var(--st);font-size:13px;cursor:pointer;text-align:left;transition:all 0.15s}
.sidebar-nav button:hover{background:var(--sh);color:#e2e8f0}
.sidebar-nav button.active{background:var(--sa);color:#fff}
.sidebar-nav button svg{width:18px;height:18px;flex-shrink:0}
.nav-divider,.sidebar-nav .divider{height:1px;background:rgba(255,255,255,0.06);margin:6px 0}
.sidebar-footer{padding:14px 16px;border-top:1px solid rgba(255,255,255,0.08);font-size:11px;color:var(--t3)}
.sidebar-footer .clear-btn{cursor:pointer;color:#f87171;margin-left:8px}
.sidebar-footer .clear-btn:hover{text-decoration:underline}
.main{margin-left:var(--sw);flex:1;padding:24px 28px;min-width:0}
.tab-content{display:none}
.tab-content.active{display:block}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--b);flex-wrap:wrap;gap:8px}
.page-header h2{font-size:18px;font-weight:600}
.page-header-actions{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--b);border-radius:6px;background:var(--s);color:var(--t);font-size:13px;cursor:pointer;transition:all 0.2s;white-space:nowrap;font-family:inherit;font-weight:500}
.btn:hover{background:rgba(0,0,0,0.03);border-color:var(--t3)}
.btn svg{width:15px;height:15px}
.btn-primary{background:var(--p);color:#fff;border-color:var(--p)}
.btn-primary:hover{background:#1d4ed8}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-xs{padding:2px 6px;font-size:10px;border-radius:4px}
.btn-icon{padding:6px;border:none;background:transparent;cursor:pointer;border-radius:4px;color:var(--t2)}
.btn-icon:hover{background:var(--bg);color:var(--t)}
.btn-icon svg{width:16px;height:16px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.stat-card{background:var(--s);border-radius:10px;padding:20px 22px;box-shadow:0 1px 3px rgba(0,0,0,0.04);border:1px solid var(--b);border-top:3px solid var(--p);position:relative;transition:transform 0.15s,box-shadow 0.15s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.06)}
.stat-card .lbl{font-size:12px;color:var(--t2);margin-bottom:6px}
.stat-card .val{font-size:28px;font-weight:700;line-height:1}
.stat-card .sub{font-size:11px;color:var(--t3);margin-top:4px}
.stat-icon{width:36px;height:36px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;position:absolute;top:18px;right:20px}
.stat-icon.blue{background:var(--pl);color:var(--p)}
.stat-icon.green{background:var(--sl);color:var(--sc)}
.stat-icon.amber{background:var(--wl);color:var(--w)}
.stat-icon.red{background:var(--dl);color:var(--d)}
.panel{background:var(--s);border-radius:10px;border:1px solid var(--b);box-shadow:0 1px 3px rgba(0,0,0,0.03);margin-bottom:20px;transition:box-shadow 0.2s}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--b)}
.panel-header h3{font-size:14px;font-weight:600}
.panel-body{padding:18px}
.no-padding{padding:0}.panel-body.nopad{padding:0}
.col4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.col3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bar-chart{display:flex;flex-direction:column;gap:8px}
.bar-row{display:flex;align-items:center;gap:12px}
.bar-label{width:60px;font-size:11px;color:var(--t2);text-align:right;flex-shrink:0}
.bar-track{flex:1;height:18px;background:var(--bg);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;transition:width 0.4s ease;display:flex;align-items:center;padding-left:8px;font-size:11px;font-weight:600;color:#fff}
.bar-fill.blue{background:var(--p)}.bar-fill.green{background:var(--sc)}.bar-fill.amber{background:var(--w)}.bar-fill.red{background:var(--d)}.bar-fill.slate{background:#64748b}
.bar-count{margin-left:8px;font-size:12px;font-weight:600;color:var(--t);flex-shrink:0}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
table th{text-align:left;padding:10px 14px;font-weight:600;color:var(--t2);font-size:11px;text-transform:uppercase;letter-spacing:0.5px;border-bottom:2px solid var(--b);white-space:nowrap;background:#f5f1eb;user-select:none}
table th.sortable{cursor:pointer}table th.sortable:hover{color:var(--p);background:var(--pl)}
table th .sort-arrow{font-size:10px;margin-left:2px}
table td{padding:10px 14px;border-bottom:1px solid var(--b);vertical-align:middle}
table tbody tr:nth-child(even){background:rgba(0,0,0,0.015)}table tbody tr:hover{background:rgba(0,0,0,0.04);transition:background 0.15s}
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;white-space:nowrap}
.badge-sc{background:var(--sl);color:var(--sc)}.badge-w{background:var(--wl);color:var(--w)}.badge-d{background:var(--dl);color:var(--d)}.badge-i{background:var(--il);color:var(--i)}.badge-sl{background:#f1f5f9;color:#475569}.badge-bl{background:var(--pl);color:var(--p)}
.badge-clk{cursor:pointer}.badge-clk:hover{opacity:0.8}
.kanban-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;min-height:360px}
.kanban-col{min-width:210px;max-width:220px;flex-shrink:0;background:#f8fafc;border-radius:var(--r);border:1px solid var(--b);display:flex;flex-direction:column}
.kanban-col-hd{padding:11px 14px;font-weight:600;font-size:12px;border-bottom:1px solid var(--b);display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:var(--r) var(--r) 0 0}
.kanban-col-bd{padding:8px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;max-height:50vh}
.kanban-card{background:var(--s);border:1px solid var(--b);border-radius:6px;padding:10px 12px;cursor:pointer;transition:all 0.15s;box-shadow:0 1px 2px rgba(0,0,0,0.03)}
.kanban-card:hover{box-shadow:0 2px 8px rgba(0,0,0,0.08);border-color:var(--p)}
.kanban-card .kc-name{font-size:13px;font-weight:600}
.kanban-card .kc-meta{font-size:11px;color:var(--t3)}
.kanban-card .kc-meta span{margin-right:8px}
.kanban-card .kc-actions{margin-top:6px;display:flex;justify-content:flex-end;gap:4px}
.kb-req{border-left:3px solid #94a3b8}.kb-sur{border-left:3px solid #d97706}.kb-oa{border-left:3px solid #d97706}.kb-ba{border-left:3px solid #0891b2}.kb-ca{border-left:3px solid #0891b2}.kb-rnv{border-left:3px solid #2563eb}.kb-cmp{border-left:3px solid #16a34a}
.photo-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.photo-preview img{width:90px;height:68px;object-fit:cover;border-radius:4px;border:1px solid var(--b);cursor:pointer}
.photo-wrap{position:relative;display:inline-block}
.photo-del{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--d);color:#fff;border:none;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center}
.photo-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:400;display:flex;align-items:center;justify-content:center;cursor:pointer}
.photo-lightbox img{max-width:90vw;max-height:90vh;border-radius:4px}
.activity-list{display:flex;flex-direction:column}
.activity-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--b)}
.activity-item:last-child{border-bottom:none}
.activity-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.activity-dot.blue{background:var(--p)}.activity-dot.green{background:var(--sc)}.activity-dot.amber{background:var(--w)}.activity-dot.red{background:var(--d)}
.activity-body{flex:1;min-width:0}
.activity-body .act-title{font-size:13px}
.activity-body .act-meta{font-size:11px;color:var(--t3);margin-top:2px}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,0.5);z-index:200;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:var(--s);border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,0.15);width:700px;max-width:92vw;max-height:88vh;display:flex;flex-direction:column}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--b)}
.modal-header h3{font-size:15px;font-weight:600}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--b)}
.form-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--b)}
.form-section:first-of-type{margin-top:0;padding-top:0;border-top:none}
.form-section h4{font-size:13px;font-weight:600;color:var(--t);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.form-section h4 .stage-dot.gray{background:var(--t3)}.stage-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--t3)}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;font-weight:500;color:var(--t2);margin-bottom:5px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:9px 12px;border:1px solid var(--b);border-radius:6px;font-size:13px;font-family:inherit;color:var(--t);background:var(--s);transition:border-color 0.2s,box-shadow 0.2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.form-group textarea{resize:vertical;min-height:70px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filter-bar select,.filter-bar input{padding:6px 10px;border:1px solid var(--b);border-radius:6px;font-size:12px;font-family:inherit;background:var(--s);color:var(--t)}
.empty-state{text-align:center;padding:40px 20px;color:var(--t3)}
.empty-state svg{width:48px;height:48px;margin-bottom:12px;opacity:0.4}
.empty-state p{font-size:13px}
.toast{position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:var(--r);color:#fff;font-size:13px;z-index:300;box-shadow:0 8px 24px rgba(0,0,0,0.15);transform:translateY(100px);opacity:0;transition:all 0.25s ease}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{background:#16a34a}.toast.error{background:#dc2626}
@media(max-width:1100px){.col3{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr)}.col2,.col3{grid-template-columns:1fr}.form-row,.form-row-3{grid-template-columns:1fr}.main{padding:16px}}
@media(max-width:640px){.sidebar{width:60px}.sidebar-header h1,.sidebar-header .sub,.sidebar-nav button span,.sidebar-footer{display:none}.sidebar-nav button{justify-content:center;padding:10px}.sidebar-nav button svg{width:20px;height:20px}.main{margin-left:60px}:root{--sw:60px}}.badge-success{background:var(--sl);color:var(--sc)}.badge-warning{background:var(--wl);color:var(--w)}.badge-danger{background:var(--dl);color:var(--d)}.badge-info{background:var(--il);color:var(--i)}.badge-slate{background:#f1f5f9;color:#475569}.badge-blue{background:var(--pl);color:var(--p)}.stat-card .stat-label{font-size:12px;color:var(--t2);margin-bottom:6px}.stat-card .stat-value{font-size:28px;font-weight:700;line-height:1}.stat-card .stat-sub{font-size:11px;color:var(--t3);margin-top:4px}.order-count-badge{cursor:pointer;font-size:10px;padding:1px 5px;margin-left:4px}.stage-history{margin-top:16px;padding-top:12px;border-top:1px solid var(--b)}.stage-history h4{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:8px}.stage-history-item{display:flex;gap:8px;padding:4px 0;font-size:12px;color:var(--t2)}.stage-history-item .sh-date{color:var(--t3);white-space:nowrap}.stage-history-item .sh-arrow{color:var(--p)}.kanban-colors-requirements{border-left:3px solid #94a3b8}.kanban-colors-survey{border-left:3px solid #d97706}.kanban-colors-order-approval{border-left:3px solid #d97706}.kanban-colors-budget-approval{border-left:3px solid #0891b2}.kanban-colors-contract-approval{border-left:3px solid #0891b2}.kanban-colors-renovating{border-left:3px solid #2563eb}.kanban-colors-completed{border-left:3px solid #16a34a}.kanban-card[draggable]{cursor:grab}.kanban-card.dragging{opacity:0.5;transform:rotate(1deg)}.kanban-col.drop-target{background:#eff6ff;border-color:#2563eb}.kanban-col.drop-target .kanban-col-h{color:#2563eb}.gantt-wrapper{border:1px solid var(--b);border-radius:8px;overflow:hidden;background:var(--s)}
.gantt-body{overflow-x:auto}
.gantt-top{display:flex;border-bottom:1px solid var(--b);background:#f8fafc;position:sticky;top:0;z-index:1}
.gantt-top-label{width:180px;flex-shrink:0;padding:0 12px;display:flex;align-items:center;font-size:11px;color:var(--t2);font-weight:600}
.gantt-top-timeline{flex:1;display:flex}
.gantt-month-col{flex:1;text-align:center;font-size:11px;font-weight:600;color:var(--t);padding:8px 0;border-left:1px solid var(--b)}
.gantt-month-col.alt{background:#f1f5f9}
.gantt-row{display:flex;align-items:center;border-bottom:1px solid var(--b);min-height:36px;transition:background 0.1s}
.gantt-row:hover{background:#f8fafc}
.gantt-row.overdue{background:#fef2f2}
.gantt-row.overdue:hover{background:#fee2e2}
.gantt-row-label{width:180px;flex-shrink:0;padding:6px 12px;overflow:hidden}
.gantt-row-label .grl-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt-row-label .grl-site{font-size:10px;color:var(--t3)}
.gantt-row-track{flex:1;height:26px;position:relative;overflow:visible}
.gantt-bar{position:absolute;top:3px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;overflow:hidden;white-space:nowrap;cursor:pointer;min-width:2px;transition:opacity 0.15s}
.gantt-bar:hover{opacity:0.85;z-index:3}
.delay-alert{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:5px;margin:0 6px 8px 0;font-size:11px}
.delay-alert.critical{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5}
.delay-alert.warning{background:#fffbeb;color:#92400e;border:1px solid #fcd34d}
.gantt-legend{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap;font-size:10px}
.gantt-legend-item{display:flex;align-items:center;gap:4px}
.gantt-legend-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.kanban-card.auto-triggered{border-left:3px solid #dc2626!important}.photo-count{font-size:10px;color:var(--p);cursor:pointer;white-space:nowrap}.photo-count:hover{text-decoration:underline}
.site-health-card{cursor:pointer;background:var(--s);border:1px solid var(--b);border-radius:8px;padding:14px;transition:all 0.15s}
.site-health-card:hover{box-shadow:0 2px 12px rgba(0,0,0,0.1);transform:translateY(-2px)}

/* Cost breakdown */
.cost-cat{background:var(--s);border:1px solid var(--b);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.cost-cat-h{display:flex;align-items:center;gap:8px;padding:12px 16px;cursor:pointer;user-select:none;font-weight:600;font-size:14px}
.cost-cat-h:hover{background:var(--hl)}
.cost-cat-h .cat-icon{width:20px;height:20px;color:var(--p)}
.cost-cat-h .cat-total{margin-left:auto;font-variant-numeric:tabular-nums}
.cost-cat-h .cat-arrow{transition:transform 0.2s}
.cost-cat-h .cat-arrow.open{transform:rotate(90deg)}
.cost-cat-body{padding:0 16px 12px;display:none}
.cost-cat-body.show{display:block}
.cost-sub{display:flex;align-items:center;padding:6px 0;border-bottom:1px solid var(--hl);font-size:13px}
.cost-sub:last-child{border-bottom:none}
.cost-sub .sub-name{flex:1;color:var(--t2);font-size:12px}
.cost-sub .sub-val{font-weight:600;font-variant-numeric:tabular-nums}
.cost-sub-items{padding-left:16px;font-size:12px;color:var(--t3)}
.cost-sub-items .si-row{display:flex;justify-content:space-between;padding:3px 0}
.cost-sub-items .si-row .si-name:before{content:'— ';color:var(--t4)}
.cost-section-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--b)}
.cost-section-h h4{font-size:15px;margin:0}
.cost-section-h .sec-total{margin-left:auto;font-size:16px;font-weight:700}
.cost-stacked-bars{margin-top:12px}
.cost-stacked-bars .bar-row{margin-bottom:6px}
.cost-stacked-bars .bar-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:2px}
.cost-stacked-bars .bar-track{height:22px;background:#e2e8f0;border-radius:4px;overflow:hidden;display:flex}
.cost-stacked-bars .bar-seg{height:100%;transition:width 0.3s}


.cost-kpi-row{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.cost-kpi-card{flex:1;min-width:180px;background:var(--s);border-radius:var(--r);padding:16px 20px;border:1px solid var(--b);box-shadow:var(--shd);display:flex;gap:14px;align-items:center;border-left:4px solid #e2e8f0}
.cost-kpi-ok{border-left-color:#16a34a}
.cost-kpi-caution{border-left-color:#d97706}
.cost-kpi-warn{border-left-color:#dc2626}
.ckc-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cost-kpi-ok .ckc-icon{background:#f0fdf4;color:#16a34a}
.cost-kpi-caution .ckc-icon{background:#fffbeb;color:#d97706}
.cost-kpi-warn .ckc-icon{background:#fef2f2;color:#dc2626}
.ckc-icon svg{width:20px;height:20px}
.ckc-val{font-size:22px;font-weight:700;line-height:1.1}
.ckc-lbl{font-size:12px;color:var(--t2);margin-top:2px}
.ckc-sub{font-size:11px;color:var(--t3)}
.cost-alert{padding:8px 14px;border-radius:6px;margin-bottom:6px;font-size:12px;font-weight:500}
.cost-alert-warn{background:#fffbeb;color:#92400e;border:1px solid #fcd34d}
.cost-alert-high{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5}
.cost-donut{display:flex;align-items:center;gap:20px}
.cost-donut-legend{display:flex;flex-direction:column;gap:6px}
.cdl-item{font-size:12px;display:flex;align-items:center;gap:6px}
.cdl-item i{display:inline-block;width:10px;height:10px;border-radius:2px}
.cost-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cbr-label{width:90px;font-size:12px;color:var(--t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
.cbr-track{flex:1;height:22px;background:var(--bg);border-radius:4px;overflow:hidden}
.cbr-fill{height:100%;border-radius:4px;transition:width 0.4s;min-width:2px}
.cbr-val{font-size:12px;font-weight:600;color:var(--t);white-space:nowrap;flex-shrink:0}
.driver-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px}
.dr-rank{width:18px;height:18px;border-radius:4px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--t2);flex-shrink:0}
.dr-name{width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;color:var(--t2);font-size:11px}
.dr-bar-bg{flex:1;height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.dr-bar{height:100%;border-radius:3px;transition:width 0.4s}
.dr-val{font-weight:600;white-space:nowrap;flex-shrink:0}
.cost-warn{padding:10px 14px;border-radius:6px;margin-bottom:8px}
.cost-warn-high{background:#fef2f2;border-left:3px solid #dc2626}
.cost-warn-warn{background:#fffbeb;border-left:3px solid #d97706}
.cost-warn-info{background:#f0f9ff;border-left:3px solid #0891b2}
.cost-site-row td{padding:10px 14px}
.cost-site-high{background:#fef2f2}
.cost-site-caution{background:#fffbeb}







.budget-over td{color:#991b1b}
.budget-caution td{color:#92400e}





50%{opacity:0.5}}

/* ===== RESPONSIVE IMPROVEMENTS ===== */
@media(max-width:768px){
  .kanban-board{flex-direction:column;gap:10px}
  .kanban-col{max-width:100%;min-width:100%}
  .kanban-col-bd{max-height:40vh}
  .term-board{flex-direction:column;gap:10px}
  .term-col{flex:1;min-width:100%}
  .viz-row{flex-direction:column}
  .viz-panel{flex:1;min-width:100%}
  .two-col{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .cost-kpi-row{flex-direction:column}
  .cost-kpi-card{min-width:100%}
  .col2,.col3,.col4{grid-template-columns:1fr;gap:12px}
  .form-row,.form-row-3{grid-template-columns:1fr}
  .main{padding:12px}
  .page-header{flex-direction:column;align-items:flex-start}
  .page-header h2{font-size:16px}
  table{font-size:11px}
  table th,table td{padding:6px 8px}
  .site-health-card{min-width:140px!important;max-width:100%!important}
  .site-health-modal{width:95vw!important}
  .gantt-container{font-size:9px}
  .gantt-label{width:100px}
  .filter-bar{flex-wrap:wrap;gap:6px}
  .filter-bar input,.filter-bar select{width:100%!important;max-width:none}
}
@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr}
  .stat-card .val{font-size:22px}
  .btn{padding:5px 10px;font-size:11px}
  .btn-group{flex-wrap:wrap}
}

/* 移动端防溢出：页面级不横向撑开，内容在区块内横向滚动 */
.tab-content.active{max-width:100%;overflow-x:auto}
@media(max-width:768px){
  .viz-panel,.chart-box,[class*="chart"],table{max-width:100%}
}



/* ===== PRINT STYLES ===== */
@media print {
  .sidebar, .sidebar-footer, .btn, .modal-overlay, .login-overlay, .toast,
  .page-header button, .filter-bar, .page-header-actions { display: none !important; }
  .main { margin-left: 0 !important; padding: 0 !important; }
  body { font-size: 11px; color: #000; background: #fff; }
  .tab-content { display: block !important; }
  .tab-content:not(.active) { display: none !important; }
  .panel { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; margin-bottom: 8px; }
  .panel-header { background: #f0f0f0; border-bottom: 1px solid #ccc; }
  .stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
  .stat-card { border: 1px solid #ccc; box-shadow: none; padding: 8px 12px; }
  .stat-card .val { font-size: 20px; }
  table { font-size: 10px; }
  table th { background: #f0f0f0 !important; color: #000 !important; border-bottom: 2px solid #000; }
  table thead { display: table-header-group; }
  table tr { break-inside: avoid; }
  h2 { font-size: 16px; }
  h3 { font-size: 13px; }
  .page-header { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid #000; }
  @page { margin: 1.5cm; size: A4 landscape; }
}




/* Workstation Grid */
.ws-panel { background: var(--s); border-radius: 10px; border: 1px solid var(--b); overflow: hidden; }
.ws-panel-head { padding: 14px 18px; border-bottom: 1px solid var(--b); display: flex; justify-content: space-between; align-items: center; background: #fafbfc; }
.ws-panel-title { font-weight: 700; font-size: 14px; color: #1e293b; }
.ws-panel-sub { font-size: 10px; color: #94a3b8; margin-left: 8px; }
.ws-panel-body { padding: 16px 18px; }
.ws-legend { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; font-size: 11px; flex-wrap: wrap; color: #64748b; }
.ws-legend-item { display: flex; align-items: center; gap: 5px; }
.ws-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Site Cards */
.ws-site-card { background: #fff; border-radius: 10px; border: 1px solid #e2e8f0; margin-bottom: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.ws-site-head { padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; transition: background .2s; }
.ws-site-head:hover { opacity: 0.95; }
.ws-site-arrow { transition: transform .2s; }
.ws-site-body { padding: 20px; background: #fafbfc; }

/* Workstation Grid */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }

/* Individual Cell */
.ws-cell { background: #fff; border: 1.5px solid #e2e8f0; border-left-width: 4px; border-radius: 8px; padding: 8px 7px 6px; cursor: default; transition: all .15s; min-width: 0; }
.ws-cell-bookable { cursor: pointer; }
.ws-cell-bookable:hover { border-color: #3b82f6; box-shadow: 0 2px 8px rgba(59,130,246,0.12); transform: translateY(-1px); }
.ws-cell-reserved { background: #fffbeb; border-color: #fcd34d; border-left-color: #d97706 !important; }
.ws-cell-reserved:hover { box-shadow: 0 2px 8px rgba(217,119,6,0.12); }
.ws-cell-fixed { background: #f8fafc; cursor: default; }

.ws-cell-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; min-height: 16px; }
.ws-cell-code { font-weight: 700; font-size: 12px; color: #1e293b; line-height: 1.2; }
.ws-rsv-badge { font-size: 8px; color: #d97706; font-weight: 600; background: #fef3c7; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.ws-avail-badge { font-size: 8px; color: #16a34a; font-weight: 600; background: #dcfce7; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }

.ws-cell-mid { display: flex; justify-content: center; align-items: center; margin-bottom: 5px; position: relative; height: 22px; }
.ws-person-badge { position: absolute; left: 0; width: 18px; height: 18px; border-radius: 50%; background: #e0e7ff; color: #4338ca; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ws-cell-icon { width: 20px; height: 20px; border-radius: 4px; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.ws-cell-bot { font-size: 9px; color: #94a3b8; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Booking Modal - Clean Bright */
#booking-modal .modal {
  background: #fff !important;
  border-radius: 14px !important;
  width: 480px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06) !important;
}
#booking-modal .modal-header { padding: 22px 28px 18px !important; border-bottom: 1px solid #f1f5f9 !important; background: #fafbfc !important; }
#booking-modal .modal-header h3 { font-size: 17px; font-weight: 700; color: #1e293b; }
#booking-modal .modal .modal-body { padding: 24px 28px !important; }
#booking-modal .modal .modal-body > div { margin-bottom: 16px; }
#booking-modal .modal .modal-body label { display: block; font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 6px; }
#booking-modal .modal .modal-body .input { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1.5px solid #e2e8f0; font-size: 14px; background: #fff; color: #1e293b; box-sizing: border-box; transition: border-color .15s; }
#booking-modal .modal .modal-body .input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.08); }
#booking-modal .modal .modal-body .input[readonly], #booking-modal .modal .modal-body input[readonly] { background: #f8fafc; color: #475569; }
#booking-modal .modal .modal-body input::placeholder { color: #cbd5e1; }
#booking-modal .modal .modal-footer { padding: 16px 28px 24px !important; border-top: 1px solid #f1f5f9 !important; display: flex !important; gap: 10px; justify-content: flex-end !important; }
#booking-modal .modal .modal-footer .btn { padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; border: 1.5px solid #e2e8f0; background: #fff; color: #475569; }
#booking-modal .modal .modal-footer .btn:hover { background: #f8fafc; border-color: #cbd5e1; }
#booking-modal .modal .modal-footer .btn-primary { background: #3b82f6 !important; color: #fff !important; border: none !important; font-weight: 600 !important; }
#booking-modal .modal .modal-footer .btn-primary:hover { background: #2563eb !important; }
#booking-modal .booking-close-btn { background: none !important; border: none !important; font-size: 22px !important; cursor: pointer; color: #94a3b8 !important; padding: 4px 8px !important; border-radius: 6px; transition: all .15s; }
#booking-modal .booking-close-btn:hover { background: #f1f5f9; color: #475569; }


/* Workstation Grid Cards */
.ws-grid-fixed { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) !important; gap: 8px !important; }
.ws-grid-bookable { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important; gap: 8px !important; }

.ws-cell-fixed {
  padding: 7px 6px 5px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-left: 4px solid #3b82f6 !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  text-align: center;
}
.ws-cell-bookable {
  padding: 7px 6px 5px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 7px !important;
  background: #fff !important;
  text-align: center;
  cursor: pointer !important;
  transition: all .15s;
}
.ws-cell-bookable:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(59,130,246,0.12);
  transform: translateY(-1px);
}
.ws-cell-fixed:hover { border-color: #94a3b8 !important; }

/* Cell contents */
.ws-cell-fixed > div:first-child,
.ws-cell-bookable > div:first-child { font-weight: 700; font-size: 13px; color: #1e293b; margin-bottom: 2px; }
.ws-cell-bookable > div:first-child { color: #8b5cf6; font-size: 12px; }
.ws-cell-fixed > div:nth-child(2),
.ws-cell-bookable > div:nth-child(2) { font-size: 10px; color: #64748b; margin-bottom: 1px; }
.ws-cell-fixed > div:nth-child(3),
.ws-cell-bookable > div:nth-child(3) { font-size: 10px; color: #16a34a; }
.ws-cell-fixed > div:nth-child(4),
.ws-cell-bookable > div:nth-child(4),
.ws-cell-bookable > div:nth-child(5) { font-size: 10px; color: #94a3b8; margin-top: 2px; }
.ws-cell-bookable > div:nth-child(4) { color: #16a34a; font-weight: 600; }
.ws-cell-bookable button { margin-top: 5px !important; font-size: 11px !important; padding: 4px 10px !important; }


/* Sidebar v5 - Divider-based grouping */
.sidebar-nav { display: flex; flex-direction: column; padding: 8px 10px; }
.sidebar-nav > * + .nav-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.sidebar-nav > .nav-item + .nav-item { margin-top: 2px; }

.nav-item, .nav-parent { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; color: rgba(255,255,255,0.65); cursor: pointer; text-decoration: none; user-select: none; transition: all .15s; border: none; background: none; width: 100%; text-align: left; font-family: inherit; min-height: 40px; border-left: 3px solid transparent; }
.nav-item svg, .nav-parent svg { flex-shrink: 0; opacity: 0.55; transition: opacity .15s; }
.nav-item:hover, .nav-parent:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.9); }
.nav-item:hover svg, .nav-parent:hover svg { opacity: 0.85; }
.nav-item.active { background: rgba(59,130,246,0.15); color: #93c5fd; font-weight: 600; border-left-color: #3b82f6; }
.nav-item.active svg { opacity: 1; color: #60a5fa; }
.nav-overview { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.nav-overview.active { background: rgba(59,130,246,0.2); }
.nav-parent { font-weight: 600; color: rgba(255,255,255,0.75); }
.nav-parent svg { opacity: 0.7; }
.nav-parent .nav-arrow { margin-left: auto; transition: transform .2s; }
.nav-parent.open .nav-arrow svg { transform: rotate(180deg); }
.nav-children { display: flex; flex-direction: column; padding-left: 26px; margin-top: 2px; margin-bottom: 2px; }
.nav-child { display: flex; align-items: center; padding: 7px 12px; border-radius: 6px; font-size: 12px; color: rgba(255,255,255,0.5); cursor: pointer; text-decoration: none; transition: all .15s; border-left: 3px solid transparent; }
.nav-child:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.04); }
.nav-child.active { color: #93c5fd; background: rgba(59,130,246,0.1); font-weight: 500; border-left-color: #3b82f6; }
.nav-analytics { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); }