:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#1b2a3b;background:#f3f6fa}
*{box-sizing:border-box}
body{margin:0}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0;border-radius:8px;padding:10px 14px;background:#176b8a;color:white;font-weight:600}
button:disabled{opacity:.45;cursor:not-allowed}
.outline{border:1px solid #c7d6e2;background:white;color:#21445c}
.bad{background:#a53741}
.good{background:#14785e}
.small{font-size:12px;padding:7px 9px}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:234px;background:#182f43;color:#e8f2f9;padding:20px;overflow:auto}
.brand{font-size:20px;font-weight:800;margin-bottom:4px}
.caption{color:#627387;font-size:12px}
.sidebar .caption{color:#b4c4d0;margin-bottom:23px}
.nav{display:block;width:100%;background:transparent;text-align:left;margin:4px 0;color:#dae6ef;padding:11px}
.nav.active,.nav:hover{background:#2e5068}
.main{margin-left:234px;padding:25px;max-width:1600px}
.top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}
.top h1{margin:0;font-size:26px}
.chip{display:inline-block;border-radius:20px;background:#e5edf4;color:#2f526a;padding:5px 10px;font-size:12px;font-weight:600}
.card{background:white;border:1px solid #dce5ee;border-radius:13px;padding:18px;margin-bottom:15px;box-shadow:0 2px 8px #1c3e5710}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.stat{font-size:29px;font-weight:800;margin:5px 0}
.flex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.space{justify-content:space-between}
.muted{color:#64778a}
.tablewrap{overflow:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;border-bottom:1px solid #e7edf3;padding:11px 9px}
th{background:#f7fafc;color:#506477;font-size:12px;position:sticky;top:0;z-index:1}
.tablewrap{overflow:visible}
td.id,.nowrap{white-space:nowrap}
.trunc{display:block;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.ok{background:#dff3ea;color:#116b4f}
.chip.warn{background:#fff0dd;color:#9a5a00}
.menu-btn{display:none;padding:8px 12px;font-size:18px;line-height:1}
.pager{margin:10px 0 0}
details.card>summary{cursor:pointer;list-style:none;font-weight:700}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary .sectiontitle{display:inline;margin:0}
details.card:not([open])>summary{margin:0}
details.card>summary::before{content:'▸ ';color:#64778a}
details.card[open]>summary::before{content:'▾ '}
.stat-link{cursor:pointer}
.stat-link:hover{border-color:#177f91}
td button{margin-right:5px}
.bar{height:8px;background:#e8eef4;border-radius:20px;overflow:hidden}
.bar span{display:block;height:100%;background:#177f91}
label{display:block;font-size:13px;font-weight:700;margin-bottom:5px}
input,select,textarea{width:100%;border:1px solid #c8d4df;border-radius:8px;padding:10px;background:white;min-width:0}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin:12px 0}
.field{min-width:0}
.banner{padding:12px;border-radius:9px;background:#e9f3f8;margin:10px 0}
.warn{background:#fff0dd}
.danger{color:#ac2934}
.green{color:#16815e}
.hidden{display:none!important}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar input{max-width:320px}
.tag{font-size:11px;border-radius:5px;background:#eef2f6;padding:4px 6px}
.login{max-width:440px;margin:70px auto}
.logo{font-weight:800}
.operation{border:1px solid #dce6ee;border-radius:10px;padding:14px;margin:10px 0}
.sectiontitle{font-size:19px;margin:0 0 12px}
@media(max-width:800px){.sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;z-index:20;transform:translateX(-100%);transition:transform .15s}
.sidebar.open{transform:none;box-shadow:0 0 0 100vw rgba(0,0,0,.35)}
.sidebar .nav{display:block;width:100%;font-size:15px;min-height:44px}
.menu-btn{display:inline-block}
.main{margin:0;padding:12px}
.top{align-items:center;gap:8px}
.top h1{font-size:20px}
.top .chip{display:none}
.grid:not(.wrap){display:flex;overflow-x:auto;gap:10px;padding-bottom:4px}
.grid:not(.wrap)>.card{min-width:140px;flex:none;padding:12px}
.grid.wrap{grid-template-columns:1fr}
.stat{font-size:22px}
.tablewrap{overflow:auto;-webkit-overflow-scrolling:touch}
button,.nav{min-height:44px}
.small{font-size:14px;padding:9px 12px}
.tag{font-size:12px}
.mini{font-size:13px}
.trunc{max-width:180px}
.actionline button{flex:1 1 45%}}

.formbox{background:#f8fbfe;border:1px solid #d5e3ed;border-radius:10px;padding:17px;margin:15px 0}
.mini{font-size:12px;color:#64778a}
.card h3{margin-top:0}
.timer{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}
.filterrow{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.filterrow>div{min-width:180px;flex:1}
.actionline{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.helper{padding:10px;background:#edf7fb;border-radius:8px;margin-top:10px}
.brand{display:flex;align-items:center;gap:12px;margin:2px 0 22px}
.brand-logo{width:38px;height:38px;border-radius:10px;flex:none;display:block;object-fit:cover;background:#2e5068;padding:5px}
.brand-name{font-weight:700;font-size:16px;color:#fff;letter-spacing:-.01em;line-height:1.15}
.brand-sub{font-size:12.5px;color:#b4c4d0;line-height:1.2;white-space:nowrap}
.login .brand{margin-bottom:18px}
.login .brand-name{color:#1b2a3b}
.login .brand-sub{color:#627387}
.login .brand-logo{background:#182f43}
.ms-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:#2f2f2f;color:white;border-radius:8px;padding:12px 14px;text-decoration:none;font-weight:600}
.ms-logo{width:18px;height:18px;flex:none;background:conic-gradient(from 90deg at 50% 50%,#7fba00 0 25%,#ffb900 0 50%,#00a4ef 0 75%,#f25022 0);clip-path:inset(0 round 2px)}
.dev-login{margin-top:18px;padding-top:14px;border-top:1px solid #e3eaf1}
.punch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.punch-grid .card{margin:0}
.photo-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.photo-thumb{max-width:170px;border:1px solid #dce5ee;border-radius:10px;padding:7px}
.photo-thumb img{display:block;width:140px;height:92px;object-fit:cover;border-radius:5px}
.photo-thumb button{margin-top:6px}
.draft-editor{border:2px solid #b9dbe9}

.timecard-note{font-size:12px;color:#607287}

/* ---- Tooling ---- */
.tag.ok{background:#dff3ea;color:#116b4f}
.tag.out{background:#dfeefb;color:#1b5a8a}
.tag.warn{background:#fff0dd;color:#9a5a00}
.tag.bad{background:#fbe1e3;color:#9c2a35}
.tag{white-space:nowrap;display:inline-block;margin:1px 0}
th{white-space:nowrap}
.panel{border:2px solid #b9dbe9}
.panel h3{margin:0 0 6px}
.mine-card{border-left:4px solid #177f91}
.held{border:1px solid #dce6ee;border-radius:10px;padding:10px 12px;min-width:220px;flex:1}
.held button{margin-top:8px}
tr.mine td{background:#f3fbf7}
td.actions{white-space:nowrap}
td.actions button{margin:2px 4px 2px 0}
.station-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.station-grid .card{margin:0}
.station-ok{border-color:#9fd6bd}
.station-open{border-color:#f0c98a}
.outstanding{margin:8px 0 0;padding-left:18px}
.outstanding li{margin:2px 0}
.toolbar>div{min-width:150px}
.toolbar label{margin-bottom:4px}

/* ---- Projects ---- */
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px}
.two-col h3{margin:4px 0 8px}
.project-detail h3{margin-top:18px}
.editor-table th,.editor-table td{padding:6px 6px;vertical-align:middle}
.editor-table input,.editor-table select{padding:7px 8px}
.editor-table td.seq{width:28px;color:#64778a}
.editor-table tfoot td{background:#f7fafc;border-bottom:0}
.formbox h3{margin:0 0 4px}
tr.alt-line td{color:#64778a;background:#fbfcfd}

/* ---- Project pipeline & stages ---- */
.pipeline{display:grid;grid-template-columns:repeat(8,minmax(126px,1fr));gap:8px;overflow:auto}
.pcol-head b{font-size:13px}
.pcol{background:#f3f6fa;border-radius:10px;padding:8px;min-height:120px}
.pcol-mine{background:#eef7fb;box-shadow:inset 0 0 0 1px #b9dbe9}
.pcol-head{margin-bottom:8px}
.pcard{background:white;border:1px solid #dce5ee;border-radius:8px;padding:8px;margin-bottom:8px;cursor:pointer}
.pcard:hover{border-color:#177f91}
.pcard.mine{border-left:4px solid #9a5a00}
.stepper{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;padding:0;margin:12px 0}
.step{display:flex;gap:8px;align-items:flex-start;min-width:150px;flex:1;padding:8px;border-radius:8px;background:#f7fafc}
.step-icon{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none;background:#e5edf4;color:#506477}
.step.done .step-icon{background:#14785e;color:white}
.step.skipped .step-icon{background:#c8d4df;color:#506477}
.step.current{background:#fff6e6;box-shadow:inset 0 0 0 1px #f0c98a}
.step.current .step-icon{background:#9a5a00;color:white}
.step.failed .step-icon{background:#a53741;color:white}
.stage-panel{border-color:#f0c98a}
.checklist{display:flex;gap:14px;flex-wrap:wrap}
label.inline{display:inline-flex;align-items:center;gap:6px;font-weight:500;margin:0}
label.inline input{width:auto}

/* ---- Schedule ---- */
.bar.cap{height:10px}
.bar.cap.over span{background:#a53741}
.card.week-now{border-color:#177f91;box-shadow:0 0 0 2px #177f9122}
.card.week-past h2{color:#9a5a00}
table.board td{vertical-align:top}
table.board .bar{margin-top:4px;width:90px}
tr.family-row td{background:#f3f6fa;color:#2f526a;border-bottom:1px solid #dce5ee;padding:6px 9px}
tr.late td:nth-child(5){font-weight:700}
tr.held td{background:#fffaf3}
td.notes{max-width:220px}
.operation.mine-op{border-color:#14785e;background:#f3fbf7}
.alerts{margin:0;padding-left:18px}
.alerts li{margin:4px 0}
tr[onclick]:hover td{background:#f7fafc}

/* purchasing / receiving */
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{background:#eef2f6;color:#2f526a}
.tabs button.active{background:#176b8a;color:white}
tr.covered td{color:#64778a}
tr.late td{background:#fff5f3}
/* ---- Phones: tables become stacked cards; cells carry their heading in data-label ---- */
@media(max-width:800px){
table,table thead,table tbody,table tr,table td{display:block}
table thead{display:none}
table tr{border:1px solid #dce6ee;border-radius:10px;padding:8px 12px;margin:10px 0;background:white}
table tr:first-child:not(:has(td)){display:none}
table td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border:0;padding:5px 0;text-align:right}
table td::before{content:attr(data-label);color:#64778a;font-size:12px;font-weight:700;flex:none;text-align:left;max-width:45%}
table td:not([data-label]){justify-content:flex-start;text-align:left}
table td:not([data-label])::before{display:none}
table td:empty{display:none}
table td>.mini,table td>div{text-align:right}
table td .trunc{max-width:100%;white-space:normal}
table td.actions,table td:last-child:not([data-label]){justify-content:flex-end}
tr.family-row td,.tabs~div tr.family-row td{background:transparent;color:#2f526a;font-weight:700;padding:4px 0}
tr.family-row{background:#f3f6fa;padding:4px 12px}
tr.late{border-color:#f0c2bb}
tr.late td{background:transparent}
tr.held td{background:transparent}
tr.mine td{background:transparent}
table.board .bar{width:120px}
.editor-table tr{padding:6px 10px}
.editor-table td{padding:3px 0}
td button{margin:2px 0 2px 5px}
}
.jobcard{border:1px solid #dce6ee;border-radius:10px;padding:12px;margin:8px 0;cursor:pointer}
.jobcard:hover{border-color:#177f91}
.jobcard .bar{margin-top:8px}
h4{margin:14px 0 6px}
.recon-row td.diff{font-weight:700}