*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} :root{ /* v2.2 — warm organic premium theme (light sidebar, line icons). Revert all: git checkout v1.4.7 */ --bg:#ECEAE5;--surface:#F6F4EF;--surface2:#E5E3DD;--surface3:#DBD8D0;--panel:#EEECE7; --border:#DAD7CF;--border2:#CDC9C0; --text:#2A241E;--text2:#5E564C;--text3:#756B5D; --blue:#3F6E8C;--blue2:#33596F; --blue-light:#E7EEF2;--blue-mid:#CFE0E8; --green:#687153;--green-light:#E9EBDD;--green-mid:#CFD3B8; --orange:#B5832F;--orange-light:#F6EBD4;--orange-mid:#E8D9B5; --red:#AC4F40;--red-light:#F4DDD6;--red-mid:#E5C4BB; --purple:#8A6E84;--purple-light:#F1ECEF;--purple-mid:#E3D8E0; --yellow:#B5832F;--yellow-light:#F6EBD4;--yellow-mid:#E8D9B5; --teal:#4F8378;--teal-light:#DCEAE5; --brand:#33302C;--brand2:#23211D;--brand-light:#DEDBD4; --moss:#7C745B;--rust:#9C5A30;--oak:#B8945C;--mushroom:#C4C7B4; --sidebar-bg:#D6D3CC;--sidebar-hover:#CDCAC1; --sidebar:268px; /* was 224 — Dale: the menu felt cramped */--topbar:54px;--brandswitcher:44px; --r:13px;--r-sm:9px;--r-xs:6px; --xs:0 1px 2px rgba(0,0,0,.04); --sm:-4px -4px 10px rgba(255,255,255,.6),5px 5px 14px rgba(105,98,84,.17);--tile:-3px -3px 8px rgba(255,255,255,.65),4px 4px 12px rgba(105,98,84,.15); --md:0 4px 8px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.04); --lg:0 12px 24px rgba(0,0,0,.09),0 4px 8px rgba(0,0,0,.05); --xl:0 24px 48px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.06); --t:.15s ease; } /* Price Catalogue rows — one shared grid so materials, charges + their add-rows all line up */ /* price column was 62px — a sheet price like 536.50 was clipped to "536.!" */ .cat-row{display:grid;grid-template-columns:minmax(0,1fr) 112px 108px 10px 70px 120px 74px 78px 14px;gap:6px;align-items:center} .cat-listrow{padding:6px 10px;border-bottom:1px solid var(--border)} .cat-in{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:4px 7px;font-size:12px} html,body{height:100%;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px} a{text-decoration:none;color:inherit} button{cursor:pointer;font-family:'DM Sans',sans-serif;border:none;outline:none} input,select,textarea{font-family:'DM Sans',sans-serif;outline:none} /* ── Brand Switcher Bar (hidden — moved to sidebar) ── */ .brand-bar{display:none!important} .brand-bar-title{font-size:11px;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1px;margin-right:4px} .brand-btn{padding:5px 14px;border-radius:5px;font-size:12px;font-weight:700;cursor:pointer;border:none;transition:all var(--t);display:flex;align-items:center;gap:7px} .brand-btn-b2b{background:rgba(37,99,235,.15);color:rgba(255,255,255,.5)} .brand-btn-b2b.active{background:var(--blue);color:var(--white)} .brand-btn-clikt{background:rgba(160,128,96,.15);color:rgba(255,255,255,.5)} .brand-btn-clikt.active{background:var(--oak);color:var(--white)} .brand-indicator{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.7} .brand-bar-sep{width:1px;height:20px;background:rgba(255,255,255,.08);margin:0 4px} .brand-bar-env{font-size:10.5px;color:rgba(255,255,255,.25);margin-left:auto} /* ── Layout ── */ .app{display:flex;height:100vh;overflow:hidden} .sb{width:var(--sidebar);background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden} .sb-brand{padding:14px 12px 12px;border-bottom:1px solid var(--border)} /* ── Sidebar brand tabs ── */ .sb-brand-tabs{display:flex;gap:4px;margin-top:10px;background:var(--sidebar-hover);border-radius:9px;padding:3px;box-shadow:inset 2px 2px 4px rgba(105,98,84,.16),inset -1px -1px 3px rgba(255,255,255,.5)} .sb-brand-tab{flex:1;padding:5px 6px;border-radius:var(--r-xs);font-size:10.5px;font-weight:700;cursor:pointer;border:none;transition:all var(--t);text-align:center;letter-spacing:.2px} .sb-brand-tab-b2b{background:transparent;color:var(--text2)} .sb-brand-tab-b2b.active{background:var(--surface);color:var(--brand2);box-shadow:-2px -2px 5px rgba(255,255,255,.7),2px 2px 5px rgba(105,98,84,.18)} .sb-brand-tab-clikt{background:transparent;color:var(--text2)} .sb-brand-tab-clikt.active{background:var(--surface);color:#7d5f48;box-shadow:-2px -2px 5px rgba(255,255,255,.7),2px 2px 5px rgba(105,98,84,.18)} .sb-logo{display:flex;align-items:center;gap:12px} .sb-mark{width:44px;height:44px;background:transparent;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:var(--white);letter-spacing:-.3px;flex-shrink:0;transition:background var(--t);overflow:hidden} .sb-mark-logo{width:44px;height:44px;object-fit:cover;border-radius:10px;display:none} .sb-mark-svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center} .sb-txt{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.2px} .sb-sub{font-size:10.5px;color:var(--text3);margin-top:2px} .sb-nav{flex:1;padding:6px 8px 8px;overflow-y:auto} .sb-sec-label{height:1px;background:var(--border);margin:8px 4px 6px;padding:0;font-size:0;line-height:0;overflow:hidden;display:block} .sb-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-xs);color:var(--text);font-size:12.5px;font-weight:500;cursor:pointer;transition:all var(--t);user-select:none;margin-bottom:1px} .sb-item:hover{background:var(--sidebar-hover);color:var(--text)} .sb-item.active{background:var(--brand);color:var(--white);font-weight:700} .sb-item .icon{width:18px;text-align:center;flex-shrink:0;font-size:17px;opacity:1;display:inline-flex;align-items:center;justify-content:center;line-height:1} .sb-item.active .icon{opacity:1} .sb-item .lbl{flex:1} /* Quick-add: hovering an icon marked .qa morphs it to a "+" (clicking the icon = add new) */ .icon.qa{cursor:pointer;position:relative} .icon.qa .qa-plus{display:none} .icon.qa:hover > i:not(.qa-plus){display:none} .icon.qa:hover .qa-plus{display:inline-flex;color:var(--brand-ink)} .sb-item.active .icon.qa:hover .qa-plus{color:var(--white)} .sb-badge{background:var(--red);color:var(--white);font-size:10px;font-weight:800;padding:2px 5px;border-radius:8px;min-width:16px;text-align:center;line-height:1.5} /* Rolled-up count on a group header = sum of its sub-items' badges (Dale) */ .sb-group-hd .sb-group-badge{margin-left:auto} .sb-group-hd .sb-group-badge + .sb-group-arrow{margin-left:8px} .sb-item.active .sb-badge{background:rgba(255,255,255,.45);color:var(--text)} .sb-foot{padding:10px 8px;border-top:1px solid var(--border)} /* ── Sidebar collapsible groups ── */ .sb-group{margin-bottom:2px} .sb-group-hd{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--r-xs);color:#4A443C;font-size:10px;font-weight:700;cursor:pointer;transition:all var(--t);user-select:none;letter-spacing:.7px;text-transform:uppercase;margin-top:4px} .sb-group-hd:hover{color:var(--text);background:var(--sidebar-hover)} .sb-shortcuts{display:none} /* phone-only band — see the mobile block */ .sb-mob-close{display:none;position:absolute;top:10px;right:12px;z-index:5;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;background:var(--surface2);color:var(--text2);font-size:16px;cursor:pointer} .sb-group.has-active .sb-group-hd{color:var(--text)} .sb-group-hd .icon{width:18px;text-align:center;flex-shrink:0;font-size:16px;display:inline-flex;align-items:center;justify-content:center;line-height:1} .sb-group-hd .lbl{flex:1} .sb-group-arrow{font-size:10px;color:var(--text3);transition:transform .2s ease;flex-shrink:0;line-height:1} .sb-group:not(.open) .sb-group-arrow{transform:rotate(-90deg)} .sb-group-items{overflow:hidden} .sb-group:not(.open) .sb-group-items{display:none} .sb-group-items .sb-item{padding-left:20px;font-size:12px;color:var(--text2);font-weight:500} .sb-group-items .sb-item .icon{font-size:15px;opacity:1} /* faded icons over warm cream read as tan next to their own label */ .sb-group-items .sb-item.active .icon{opacity:1} /* Active sub-item sits on the dark brand background — force near-white text so it isn't invisible (the base sub-item rule above re-set it to charcoal at equal specificity). */ .sb-group-items .sb-item.active{color:var(--white);font-weight:700} .sb-run{width:100%;padding:8px 10px;background:var(--brand);color:var(--white);border-radius:var(--r-xs);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px;transition:background var(--t);border:none;cursor:pointer} .sb-run:hover{background:var(--brand2)} .sb-run:disabled{background:var(--surface2);color:var(--text3);cursor:not-allowed} /* Collapsible sidebar (toggled by clicking the logo) */ .sb.sb-collapsed{width:64px} .sb.sb-collapsed .lbl,.sb.sb-collapsed .sb-txt,.sb.sb-collapsed .sb-sub,.sb.sb-collapsed .sb-brand-tabs,.sb.sb-collapsed .sb-group-arrow,.sb.sb-collapsed .sb-badge,.sb.sb-collapsed .sb-foot{display:none} .sb.sb-collapsed .sb-item,.sb.sb-collapsed .sb-group-hd{justify-content:center;padding-left:0;padding-right:0;gap:0} .sb.sb-collapsed .sb-group-items .sb-item{padding-left:0} .sb.sb-collapsed .sb-logo{justify-content:center;gap:0} .sb.sb-collapsed .sb-brand{padding:14px 0 12px} /* ── Main ── */ .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0} .topbar{position:relative;height:var(--topbar);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 18px;gap:10px;flex-shrink:0;box-shadow:var(--xs)} #gs-mob-btn{display:none} /* phone-only search icon — see the mobile block */ #mob-page-hero{display:none} /* phone-only page-title banner — see the mobile block */ #jobs-lane-actions{display:none} /* phone-only New Job / sync on the view-toggle lane — desktop keeps the .ph header actions */ #jobs-phase-sel-wrap{display:none} /* phone-only phase dropdown — desktop keeps the chip row */ .topbar-title{font-size:15px;font-weight:800;color:var(--text);flex:1;letter-spacing:-.3px} .topbar-search{position:relative} .topbar-search input{width:220px;padding:6px 10px 6px 28px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-xs);font-size:12.5px;color:var(--text);transition:all var(--t)} .topbar-search input:focus{width:280px;border-color:var(--brand-ink);background:var(--surface)} .topbar-search .si{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:12px;pointer-events:none} /* ── Alerts bell ── */ .alerts-btn{position:relative;width:34px;height:34px;border-radius:var(--r-xs);border:1px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background var(--t);flex-shrink:0} .alerts-btn i{font-size:18px;color:var(--text2)} /* themed ink, not emoji colour */ .alerts-btn:hover{background:var(--surface)} .alerts-badge{position:absolute;top:3px;right:3px;min-width:16px;height:16px;border-radius:8px;background:var(--red,var(--red));color:var(--white);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;pointer-events:none;display:none} .alerts-drawer{position:fixed;top:0;right:-380px;width:370px;height:100vh;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--md);z-index:800;display:flex;flex-direction:column;transition:right .25s cubic-bezier(.4,0,.2,1)} .alerts-drawer.open{right:0} .alerts-drawer-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0} .alerts-drawer-body{flex:1;overflow-y:auto;padding:10px 0} .alert-row{padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--t)} .alert-row:hover{background:var(--surface2)} .alert-row:last-child{border-bottom:none} .alert-chip{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;white-space:nowrap} .alert-chip-red{background:var(--red-light);color:var(--red)} .alert-chip-orange{background:var(--orange-mid);color:var(--orange-ink)} .alert-chip-yellow{background:var(--orange-light);color:var(--warning-text)} .alert-chip-green{background:var(--green-light);color:var(--success-text)} .gs-dd{position:absolute;top:calc(100% + 6px);right:0;min-width:360px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--md);z-index:9999;overflow:hidden} .gs-group-lbl{padding:6px 12px 2px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3)} .gs-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background var(--t)} .gs-item:hover{background:var(--surface2)} .gs-item-ico{width:28px;height:28px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0} .gs-item-body{flex:1;min-width:0} .gs-item-title{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gs-item-sub{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .gs-item-match{font-size:10.5px;color:var(--text2);margin-top:2px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .gs-item-match .gs-mf{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-right:4px} .gs-item-match mark{background:var(--orange-light);color:inherit;border-radius:3px;padding:0 1px} /* Per-result TYPE chip (Dale: "give it a small heading so I can see what it is") */ .gs-type{display:inline-block;font-size:8.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:1px 6px;border-radius:7px;background:var(--surface3);color:var(--text3);margin-right:6px;vertical-align:1px} /* Landing highlight — the searched record flashes so you can see exactly which one it was, instead of hunting the section (Dale). */ @keyframes gsFlash{0%{background:var(--orange-light);box-shadow:0 0 0 3px var(--orange-light)}100%{background:transparent;box-shadow:0 0 0 3px transparent}} .gs-flash{animation:gsFlash 2.4s ease-out 1;border-radius:8px} @media (prefers-reduced-motion:reduce){.gs-flash{animation:none;box-shadow:0 0 0 2px var(--orange)}} .gs-sep{height:1px;background:var(--border);margin:3px 0} .gs-empty{padding:18px 12px;text-align:center;font-size:12px;color:var(--text3)} .gs-footer{padding:8px 12px;border-top:1px solid var(--border);font-size:11.5px;color:var(--brand-ink);cursor:pointer;text-align:center;transition:background var(--t)} .gs-footer:hover{background:var(--surface2)} .content{flex:1;overflow-y:auto;padding:18px} /* ── Buttons ── */ .btn{padding:7px 13px;border-radius:var(--r-xs);font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:5px;transition:all var(--t);border:1px solid transparent;white-space:nowrap} .btn-primary{background:var(--brand);color:var(--white)} .btn-primary:hover{background:var(--brand2)} .btn-primary:disabled{background:var(--surface3);color:var(--text3);cursor:not-allowed} .btn-secondary{background:var(--surface);color:var(--text2);border-color:var(--border2)} .btn-secondary:hover{background:var(--surface2);color:var(--text)} .job-filter-btn.active{background:var(--brand);color:var(--white);border-color:var(--brand-ink)} .btn-sm{padding:4px 9px;font-size:11.5px} .btn-xs{padding:2px 7px;font-size:11px;border-radius:4px} .drag-handle{cursor:grab;color:var(--text3);font-size:15px;padding:0 6px 0 0;user-select:none;flex-shrink:0;opacity:0.5;letter-spacing:-1px;line-height:1} .drag-handle:hover{opacity:1;color:var(--brand-ink)} .drag-handle:active{cursor:grabbing} .btn-green{background:var(--green-light);color:var(--green)} .btn-green:hover{background:var(--green-mid)} .btn-red{background:var(--red-light);color:var(--red)} .btn-red:hover{background:var(--red-mid)} .btn-orange{background:var(--orange-light);color:var(--orange-ink)} .btn-orange:hover{background:var(--orange-mid)} .btn-purple{background:var(--purple-light);color:var(--purple)} .btn-purple:hover{background:var(--purple-mid)} .btn-blue{background:var(--blue-light);color:var(--blue)} .btn-blue:hover{background:var(--blue-mid)} .btn-teal{background:var(--teal-light);color:var(--teal)} .btn-teal:hover{background:var(--teal-light)} .btn-yellow{background:var(--yellow-light);color:var(--orange-ink)} .btn-yellow:hover{background:var(--yellow-mid)} .btn-action{background:var(--surface);color:var(--text2);border-color:var(--border2);font-size:12px} .btn-action:hover{background:var(--surface2);color:var(--text);border-color:var(--border)} /* ── Cards ── */ .card{background:var(--surface);border-radius:var(--r);box-shadow:var(--sm)} .card-hd{padding:14px 18px 12px;display:flex;align-items:center;gap:8px} .card-hd h3{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.2px} .card-hd h3{font-size:13px;font-weight:700;color:var(--text);flex:1;letter-spacing:-.1px} .card-bd{padding:16px} /* ── Pages ── */ .page{display:none} .page.active{display:block} #page-reports.active{display:flex;flex-direction:column} #page-job.active{display:flex;flex-direction:column;height:100%} .ph{margin-bottom:16px;display:flex;align-items:flex-end;gap:12px} .ph-info{flex:1} .ph h2{font-size:20px;font-weight:800;color:var(--text);letter-spacing:-.5px} .ph p{font-size:12.5px;color:var(--text2);margin-top:2px} /* ── Stats grid ── */ .stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px} .stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sm);transition:box-shadow var(--t)} .stat:hover{box-shadow:var(--md)} .stat-link{cursor:pointer} .stat-link:hover{box-shadow:var(--md);border-color:var(--brand-ink)} .stat-lbl{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:7px} .stat-val{font-size:28px;font-weight:800;color:var(--text);letter-spacing:-1.5px;line-height:1;margin-bottom:2px;font-family:var(--font-sans);font-variant-numeric:tabular-nums} .stat-sub{font-size:11px;color:var(--text3)} .c-blue .stat-val{color:var(--brand-ink)} .c-green .stat-val{color:var(--green)} .c-orange .stat-val{color:var(--orange-ink)} .c-purple .stat-val{color:var(--purple)} .c-teal .stat-val{color:var(--teal)} /* ── Alert cards ── */ .alerts{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap} .alert{flex:1;min-width:150px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all var(--t);box-shadow:var(--xs)} .alert:hover{box-shadow:var(--md);transform:translateY(-1px)} .a-red{border-left:3px solid var(--red)} .a-orange{border-left:3px solid var(--orange)} .a-blue{border-left:3px solid var(--brand)} .a-green{border-left:3px solid var(--green)} .a-purple{border-left:3px solid var(--purple)} .a-teal{border-left:3px solid var(--teal)} .a-grey{border-left:3px solid var(--border2)} .a-grey .alert-ico{background:var(--surface2)} .a-grey .alert-info strong{color:var(--text3)} .alert-ico{width:30px;height:30px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0} .a-red .alert-ico{background:var(--red-light)} .a-orange .alert-ico{background:var(--orange-light)} .a-blue .alert-ico{background:var(--brand-light)} .a-green .alert-ico{background:var(--green-light)} .a-purple .alert-ico{background:var(--purple-light)} .a-teal .alert-ico{background:var(--teal-light)} .alert-info strong{display:block;font-size:17px;font-weight:800;letter-spacing:-.5px;font-family:var(--font-sans);font-variant-numeric:tabular-nums;line-height:1;margin-bottom:1px} .alert-info span{font-size:11px;color:var(--text2)} .a-red .alert-info strong{color:var(--red)} .a-orange .alert-info strong{color:var(--orange-ink)} .a-blue .alert-info strong{color:var(--brand-ink)} .a-green .alert-info strong{color:var(--green)} .a-purple .alert-info strong{color:var(--purple)} .a-teal .alert-info strong{color:var(--teal)} /* ── Two col ── */ .two-col{display:grid;grid-template-columns:1fr 340px;gap:14px;margin-bottom:16px} /* ── Run card ── */ .run-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;box-shadow:var(--sm)} .run-card h3{font-size:13.5px;font-weight:800;margin-bottom:4px;letter-spacing:-.2px} .run-card p{font-size:12px;color:var(--text2);margin-bottom:14px;line-height:1.6} .run-btns{display:flex;gap:8px;flex-wrap:wrap} .prog-wrap{display:none;margin-top:12px} .prog-wrap.show{display:block} .prog-track{height:4px;background:var(--surface2);border-radius:2px;overflow:hidden;margin-bottom:5px} .prog-fill{height:100%;background:var(--brand);width:0%;transition:width .4s ease;border-radius:2px} .prog-lbl{font-size:11px;color:var(--text3)} .out-box{background:#0b0f1a;border-radius:var(--r-sm);padding:10px;margin-top:10px;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:11px;max-height:200px;overflow-y:auto;display:none;line-height:1.7} .out-box.show{display:block} .ol{color:rgba(255,255,255,.45);display:block} .ol.ok{color:#34d399} .ol.err{color:var(--red)} .ol.hi{color:#60a5fa} .ol.sec{color:var(--white);font-weight:600} /* ── Run Drafts: polished progress + report (replaces the raw black log box) ── */ .run-progress{display:none;margin-top:14px} .run-progress.show{display:block} .rp-bar-row{display:flex;align-items:center;gap:10px} .rp-track{flex:1;height:9px;background:var(--surface2);border-radius:99px;overflow:hidden;box-shadow:var(--in)} .rp-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--brand),#a98b52);border-radius:99px;transition:width .5s ease} .rp-pct{font-size:12px;font-weight:700;color:var(--text2);min-width:40px;text-align:right;font-variant-numeric:tabular-nums} .rp-status{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:12.5px;color:var(--text2)} .rp-spin{width:13px;height:13px;border:2px solid var(--surface3);border-top-color:var(--brand-ink);border-radius:50%;animation:rpspin .7s linear infinite;flex:none} @keyframes rpspin{to{transform:rotate(360deg)}} .rp-tally{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .rp-chip{font-size:11.5px;padding:4px 11px;border-radius:99px;background:var(--surface2);color:var(--text2);font-weight:600} .rp-chip b{font-weight:800;color:var(--text)} .rp-chip.ok b{color:var(--green,var(--green))} .rp-chip.err b{color:var(--red,var(--red))} .rp-log-toggle{margin-top:12px;font-size:11px;color:var(--text3);cursor:pointer;user-select:none;display:inline-block} .rp-log-toggle:hover{color:var(--text2)} .rp-log{display:none;margin-top:8px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:11px;max-height:220px;overflow-y:auto;line-height:1.65;color:var(--text3)} .rp-log.show{display:block} .rp-log .rl{display:block;white-space:pre-wrap;word-break:break-word} .rp-log .rl.ok{color:var(--green,var(--green))} .rp-log .rl.err{color:var(--red,var(--red))} .rp-log .rl.sec{color:var(--text);font-weight:700;margin-top:5px} .run-report{display:none;margin-top:14px;border:1px solid var(--border);border-radius:12px;padding:16px;background:var(--surface2);box-shadow:var(--tile)} .run-report.show{display:block;animation:rrpop .3s ease} @keyframes rrpop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .rr-head{display:flex;align-items:center;gap:12px;margin-bottom:14px} .rr-ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:800;flex:none;background:var(--brand);color:var(--white)} .run-report.warn .rr-ico{background:var(--orange,#c08a2d)} .run-report.bad .rr-ico{background:var(--red,var(--red))} .rr-title{font-size:14.5px;font-weight:800;color:var(--text);line-height:1.2} .rr-sub{font-size:12px;color:var(--text3);margin-top:2px} .rr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin-bottom:12px} .rr-stat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 8px;text-align:center} .rr-stat .n{font-size:20px;font-weight:800;color:var(--text);line-height:1;font-variant-numeric:tabular-nums} .rr-stat .l{font-size:10px;color:var(--text3);margin-top:5px;text-transform:uppercase;letter-spacing:.04em} .rr-stat.ok .n{color:var(--green,var(--green))} .rr-note{font-size:12px;color:var(--text2);line-height:1.6;margin-bottom:13px} .rr-actions{display:flex;gap:8px;flex-wrap:wrap} /* Add Lead: address autocomplete dropdown */ .al-sug{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--sm);margin-top:2px;max-height:220px;overflow-y:auto;display:none} .al-sug.show{display:block} .al-sug-item{padding:8px 11px;font-size:12.5px;cursor:pointer;border-bottom:1px solid var(--border);color:var(--text2);line-height:1.35} .al-sug-item:last-child{border-bottom:none} .al-sug-item:hover{background:var(--surface2);color:var(--text)} /* ── Activity feed ── */ .act-item{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid var(--border);transition:background var(--t);cursor:pointer} .act-item:last-child{border-bottom:none} .act-item:hover{background:var(--bg)} .act-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .d-drafted{background:var(--brand)} .d-sent{background:var(--orange)} .d-won{background:var(--green)} .d-replied{background:var(--purple)} .d-closed{background:var(--text3)} .d-nurture{background:var(--teal)} .act-body{flex:1;min-width:0} .act-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .act-sub{font-size:10.5px;color:var(--text2)} .act-time{font-size:10px;color:var(--text3);flex-shrink:0} /* ── Sector bars ── */ .sbar{display:flex;align-items:center;gap:8px;margin-bottom:9px} .sbar-lbl{font-size:11.5px;color:var(--text2);width:130px;flex-shrink:0;text-transform:capitalize;font-weight:500} .sbar-track{flex:1;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden} .sbar-fill{height:100%;background:var(--brand);border-radius:3px;transition:width .5s ease} .sbar-num{font-size:11px;color:var(--text3);width:40px;text-align:right;font-family:var(--font-sans);font-variant-numeric:tabular-nums} /* ── Filter bar ── */ .filter-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--surface)} .sw{position:relative;flex:1;min-width:160px;max-width:260px} .sw input{width:100%;padding:6px 9px 6px 27px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xs);font-size:12.5px;color:var(--text);transition:border var(--t)} .sw input:focus{border-color:var(--brand-ink);background:var(--surface)} .sw .si{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:11px;pointer-events:none} .fsel{padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xs);color:var(--text2);font-size:12.5px;cursor:pointer} .fsel:focus{border-color:var(--brand-ink)} .fc{font-size:11px;color:var(--text3);margin-left:auto;font-family:var(--font-sans);font-variant-numeric:tabular-nums} /* ── Table ── */ .tbl{overflow-x:auto} table{width:100%;border-collapse:collapse} thead th{padding:8px 13px;text-align:left;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;background:var(--bg);border-bottom:1px solid var(--border);white-space:nowrap} tbody td{padding:10px 13px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:12.5px} tbody tr:last-child td{border-bottom:none} tbody tr{transition:background var(--t);cursor:pointer} tbody tr:hover{background:var(--bg)} .cp{font-weight:600;color:var(--text)} .cs{font-size:10.5px;color:var(--text3);margin-top:1px} .cm{color:var(--text3);font-size:11.5px} .ra{display:flex;gap:3px;opacity:0;transition:opacity var(--t)} tr:hover .ra{opacity:1} /* Touch devices have no hover — reveal every hover-gated action cluster so row actions (leads, customers, jobs table) are actually reachable (audit #19/#20). */ @media (hover: none){ .ra,.jt-actions,.drag-handle,.exp-i{opacity:1 !important} } /* ── Badges ── */ .badge{padding:2px 7px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap} .badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0} .b-drafted{background:var(--blue-light);color:var(--blue)} .b-drafted::before{background:var(--blue)} .b-sent{background:var(--orange-light);color:var(--warning-text)} .b-sent::before{background:var(--orange)} .b-won{background:var(--green-light);color:var(--green)} .b-won::before{background:var(--green)} .b-closed{background:var(--surface2);color:var(--text3)} .b-closed::before{background:var(--text3)} .b-paused{background:var(--yellow-light);color:var(--orange-ink)} .b-paused::before{background:var(--yellow)} .b-replied{background:var(--purple-light);color:var(--purple)} .b-replied::before{background:var(--purple)} .b-nurture{background:var(--teal-light);color:var(--teal)} .b-nurture::before{background:var(--teal)} .b-fu1{background:var(--orange-light);color:var(--orange-ink)} .b-fu1::before{background:var(--orange)} .b-fu2{background:var(--orange-light);color:var(--warning-text)} .b-fu2::before{background:var(--warning-text)} .b-fu3{background:var(--red-light);color:var(--danger-text)} .b-fu3::before{background:var(--danger-text)} /* ── Lead score ── */ .score{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:4px} .score-high{background:var(--green-light);color:var(--success-text)} .score-mid{background:var(--orange-light);color:var(--warning-text)} .score-low{background:var(--red-light);color:var(--red)} /* ── Sortable columns ── */ .tbl th[data-sort]{cursor:pointer;user-select:none} .tbl th[data-sort]:hover{color:var(--text)} .sort-arrow{font-size:10px;margin-left:3px;opacity:0;display:inline-block} .tbl th.sort-asc,.tbl th.sort-desc{color:var(--brand-ink)} .tbl th.sort-asc .sort-arrow::after{content:'▲';opacity:1} .tbl th.sort-desc .sort-arrow::after{content:'▼';opacity:1} /* ── Rotting indicator ── */ .rotting{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;color:var(--red);background:var(--red-light);padding:2px 6px;border-radius:4px} /* ── Dashboard KPI cards ── */ /* Prominent Xero-style stat tiles (Dale, overhaul chunk 1): bigger bold figures, roomier neumorphic tiles — desktop AND mobile. */ /* Stacked KPI tile (Dale: the icon pushed the text sideways and long sub-lines wrapped into a mess). Now: icon + title on one line, the bold figure beneath, the detail under that. .dkpi-body is display:contents so its children become grid items of the tile itself. */ .dkpi-card{background:var(--surface);border-radius:var(--r);padding:14px 16px;cursor:pointer;transition:all var(--t);box-shadow:var(--tile,var(--sm)); display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico lbl" "num num" "sub sub" "ext ext";column-gap:9px;row-gap:1px;align-items:center} .dkpi-card:hover{border-color:var(--border2)} .dkpi-icon{grid-area:ico;width:30px;height:32px;border-radius:50% 50% var(--r-xs) var(--r-xs);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0} .dkpi-body{display:contents} .dkpi-num{grid-area:num;font-size:23px;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1.15;font-family:var(--font-sans);font-variant-numeric:tabular-nums;margin-top:7px} .dkpi-lbl{grid-area:lbl;font-size:12px;font-weight:700;color:var(--text2);white-space:normal;line-height:1.25} .dkpi-sub{grid-area:sub;font-size:11.5px;font-weight:500;color:var(--text3);margin-top:3px;line-height:1.4} /* ── Dashboard alert cards (right column) ── */ .dalert{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--border2);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all var(--t);box-shadow:var(--sm)} .dalert:hover{box-shadow:var(--md);transform:translateX(2px)} .dalert-red{border-left-color:var(--red)} .dalert-orange{border-left-color:var(--orange-ink)} .dalert-blue{border-left-color:var(--brand-ink)} .dalert-neutral{border-left-color:var(--border2)} .dalert-num{font-size:28px;font-weight:800;letter-spacing:-1.5px;font-family:var(--font-sans);font-variant-numeric:tabular-nums;line-height:1;min-width:36px} .dalert-red .dalert-num{color:var(--red)} .dalert-orange .dalert-num{color:var(--orange-ink)} .dalert-blue .dalert-num{color:var(--brand-ink)} .dalert-neutral .dalert-num{color:var(--text3)} .dalert-lbl{flex:1;font-size:12px;color:var(--text2);line-height:1.4} .dalert-arrow{font-size:18px;color:var(--border2);flex-shrink:0} /* ── Dashboard pipeline funnel ── */ .pipe-stage{flex:1;text-align:center;padding:4px 8px;cursor:pointer;transition:all var(--t);border-radius:var(--r-xs)} .pipe-stage:hover{background:var(--bg)} .pipe-num{font-size:26px;font-weight:800;letter-spacing:-1px;font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text);line-height:1} .pipe-lbl{font-size:10.5px;color:var(--text3);font-weight:600;margin-top:4px} .pipe-arrow{font-size:18px;color:var(--border2);padding:0 2px;flex-shrink:0} /* ── Settings submenu ── */ /* ── Settings submenu ── */ .sb-settings-sub{overflow:hidden;max-height:0;transition:max-height .2s ease;background:rgba(255,255,255,.05);border-radius:var(--r-xs);margin-top:4px} .sb-settings-sub.open{max-height:200px} .sb-settings-sub-item{padding:7px 12px;font-size:11.5px;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:8px;transition:all var(--t)} .sb-settings-sub-item:hover{background:var(--sidebar-hover);color:var(--text)} /* ── Detail Panel ── */ .overlay{position:fixed;inset:0;background:rgba(15,22,35,.35);z-index:200;display:none;backdrop-filter:blur(3px)} .overlay.open{display:block} .dp{position:fixed;top:0;right:-580px;width:560px;height:100vh;background:var(--surface);z-index:201;display:flex;flex-direction:column;box-shadow:var(--xl);transition:right .26s cubic-bezier(.4,0,.2,1)} .dp.open{right:0} .dp-head{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:10px;flex-shrink:0} .dp-hi{flex:1;min-width:0} .dp-name{font-size:16px;font-weight:800;color:var(--text);margin-bottom:4px;letter-spacing:-.4px} .dp-meta{font-size:11.5px;color:var(--text2);display:flex;align-items:center;gap:6px;flex-wrap:wrap} .dp-close{width:28px;height:28px;border-radius:var(--r-xs);background:var(--surface2);display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:14px;transition:all var(--t);flex-shrink:0;cursor:pointer;border:none} .dp-close:hover{background:var(--border2);color:var(--text)} .dp-actions{padding:10px 18px;border-bottom:1px solid var(--border);display:flex;gap:5px;flex-wrap:wrap;flex-shrink:0;background:var(--bg)} .dp-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface)} .dp-tab{padding:9px 16px;font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--t)} .dp-tab:hover{color:var(--text2)} .dp-tab.active{color:var(--brand-ink);border-bottom-color:var(--brand-ink)} .dp-body{flex:1;overflow-y:auto} .dp-pane{display:none;padding:16px 18px} .dp-pane.active{display:block} .dp-sec-title{font-size:10px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.9px;margin-bottom:10px} .ig{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px} .ii label{font-size:10px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:2px} .ii span,.ii a{font-size:12.5px;color:var(--text);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ii a{color:var(--brand-ink)} .ii a:hover{text-decoration:underline} .soc-links{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px} .soc-link{padding:4px 9px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xs);font-size:11px;font-weight:600;color:var(--text2);display:flex;align-items:center;gap:4px;transition:all var(--t)} .soc-link:hover{background:var(--brand-light);color:var(--brand-ink);border-color:var(--brand-ink)} /* ── Timeline ── */ .tl-item{display:flex;gap:10px;padding-bottom:14px} .tl-item:last-child{padding-bottom:0} .tl-l{display:flex;flex-direction:column;align-items:center;width:16px;flex-shrink:0} .tl-dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--border2);background:var(--surface);flex-shrink:0;z-index:1;margin-top:3px} .tl-dot.done{background:var(--green);border-color:var(--green)} .tl-dot.pending{border-color:var(--brand-ink)} .tl-dot.overdue{background:var(--red);border-color:var(--red)} .tl-line{flex:1;width:2px;background:var(--border);margin-top:2px} .tl-item:last-child .tl-line{display:none} .tl-c{flex:1;padding-top:1px} .tl-title{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:1px} .tl-date{font-size:11px;color:var(--text3)} .tl-date.overdue{color:var(--red);font-weight:600} /* ── Activity log ── */ .al-item{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--border)} .al-item:last-child{border-bottom:none} .al-icon{width:22px;height:22px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;margin-top:1px} .al-body{flex:1} .al-action{font-size:12px;font-weight:600;color:var(--text)} .al-detail{font-size:11px;color:var(--text2);margin-top:1px} .al-time{font-size:10px;color:var(--text3);margin-top:1px} /* ── Email thread ── */ .email-item{border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:8px;overflow:hidden} .email-head{padding:9px 12px;background:var(--bg);display:flex;align-items:center;gap:8px;cursor:pointer} .email-head:hover{background:var(--surface2)} .email-dir{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0} .email-out{background:var(--brand-light);color:var(--brand-ink)} .email-in{background:var(--green-light);color:var(--green)} .email-subj{font-size:12.5px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .email-date{font-size:10.5px;color:var(--text3);flex-shrink:0} .email-snippet{padding:9px 12px;font-size:12px;color:var(--text2);line-height:1.5;border-top:1px solid var(--border);display:none} .email-snippet.show{display:block} /* ── Reminder ── */ .reminder-form{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;margin-bottom:10px} .reminder-form h4{font-size:11px;font-weight:700;color:var(--text2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px} .rf-row{display:flex;gap:8px;margin-bottom:8px} .rf-row input{flex:1;padding:7px 9px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xs);font-size:12.5px;color:var(--text);transition:border var(--t)} .rf-row input:focus{border-color:var(--brand-ink)} .reminder-item{display:flex;align-items:flex-start;gap:8px;padding:8px;background:var(--orange-light);border:1px solid var(--orange-mid);border-radius:var(--r-xs);margin-bottom:6px} .reminder-item.overdue{background:var(--red-light);border-color:var(--red-mid)} .ri-body{flex:1} .ri-date{font-size:10.5px;font-weight:700;color:var(--orange-ink);margin-bottom:2px} .reminder-item.overdue .ri-date{color:var(--red)} .ri-note{font-size:12px;color:var(--text)} /* ── Comment ── */ .cmt-area{width:100%;padding:9px 11px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);resize:vertical;min-height:75px;color:var(--text);font-size:12.5px;transition:border var(--t);line-height:1.6} .cmt-area:focus{border-color:var(--brand-ink);background:var(--surface)} /* ── Tasks section ── */ .task-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);transition:background var(--t)} .task-item:last-child{border-bottom:none} .task-item:hover{background:var(--bg)} .task-ico{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} .task-body{flex:1;min-width:0} .task-name{font-size:13px;font-weight:600;color:var(--text)} .task-note{font-size:11.5px;color:var(--text2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .task-right{text-align:right;flex-shrink:0} .task-due{font-size:11.5px;font-weight:700} .task-sector{font-size:10.5px;color:var(--text3);margin-top:1px} .task-actions{display:flex;gap:5px;flex-shrink:0;margin-left:8px} /* ── Address autocomplete dropdown ── */ .pac-custom{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xs);z-index:9999;max-height:220px;overflow-y:auto;box-shadow:0 6px 20px rgba(0,0,0,.22);margin-top:2px} .pac-item{padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border);color:var(--text);line-height:1.3} .pac-item:last-child{border-bottom:none} .pac-item:hover{background:var(--bg)} /* ── Modals ── */ .modal-overlay{position:fixed;inset:0;background:rgba(15,22,35,.5);z-index:300;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)} .modal-overlay.open{display:flex} .modal{background:var(--surface);border-radius:var(--r);padding:24px;width:420px;box-shadow:var(--xl)} .cmdk-overlay{position:fixed;inset:0;background:rgba(45,42,37,.34);z-index:9500;display:none;align-items:flex-start;justify-content:center;padding-top:12vh} .cmdk-box{width:560px;max-width:92vw;max-height:64vh;background:var(--surface);border-radius:var(--r);box-shadow:var(--xl);overflow:hidden;display:flex;flex-direction:column} .cmdk-input{border:none;outline:none;background:transparent;padding:15px 18px;font-size:15px;color:var(--text)} .cmdk-input::placeholder{color:var(--text3)} .cmdk-results{overflow-y:auto;padding:6px;border-top:1px solid var(--border)} .cmdk-sec{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);padding:9px 12px 4px} .cmdk-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);cursor:pointer;font-size:13px;color:var(--text)} .cmdk-item i.ti{font-size:17px;color:var(--text2);width:20px;text-align:center;flex-shrink:0} .cmdk-item.sel,.cmdk-item:hover{background:var(--surface2)} .cmdk-item .cmdk-sub{margin-left:auto;font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42%} .cmdk-empty{padding:22px;text-align:center;color:var(--text3);font-size:13px} .cmdk-hint{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--text3)} #login-screen input[type=text],#login-screen input[type=password]{background:var(--surface2);border:none;border-radius:var(--r-sm);padding:11px 13px;box-shadow:inset 2px 2px 6px rgba(105,98,84,.18),inset -2px -2px 6px rgba(255,255,255,.62);color:var(--text)} #login-screen input[type=text]:focus,#login-screen input[type=password]:focus{outline:none;box-shadow:inset 2px 2px 5px rgba(105,98,84,.18),inset -2px -2px 5px rgba(255,255,255,.55),0 0 0 2px var(--brand-light)} .modal h3{font-size:16px;font-weight:800;margin-bottom:6px;letter-spacing:-.3px} .modal p{font-size:12.5px;color:var(--text2);margin-bottom:16px} .modal label{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px;margin-top:10px} .modal input,.modal textarea,.modal select{width:100%;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xs);font-size:13px;color:var(--text)} .modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--brand-ink);outline:none} .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px} /* ── Mobile long-press action sheet (mSheet) — slides up from the bottom ── */ .msheet-ov{align-items:flex-end!important;justify-content:center!important;padding:0!important;z-index:9600} .msheet{background:var(--surface);width:100%;max-width:520px;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:20px 20px 0 0;padding:6px 10px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 34px rgba(0,0,0,.22);animation:msheetUp .18s cubic-bezier(.2,.8,.2,1)} @keyframes msheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}} .msheet-ov.closing{background:transparent} .msheet-ov.closing .msheet{animation:msheetDown .16s ease-in forwards} @keyframes msheetDown{to{transform:translateY(100%)}} .msheet-title{font-size:11.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;padding:14px 14px 10px;text-align:center} .msheet-item{display:flex;align-items:center;gap:13px;width:100%;background:none;border:none;border-radius:12px;padding:15px 16px;font-size:16px;font-weight:600;color:var(--text);text-align:left;cursor:pointer} .msheet-item:active{background:var(--surface2)} .msheet-item.danger{color:var(--red)} .msheet-item .msheet-ic{font-size:17px;width:22px;text-align:center;flex-shrink:0} /* Xero-style "Create new": tinted rounded-square icon + label over a quiet sub-line */ .msheet-item .msheet-ic.tile{position:relative;overflow:visible;width:36px;height:36px;border-radius:11px;background:var(--brand-light);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-size:18px} /* Small ＋ badge on the corner of every create icon, so the row reads as "add one of these" */ .msheet-item .msheet-ic.tile::after{content:'';position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;background:var(--brand);border:2px solid var(--surface); background-image:linear-gradient(var(--surface),var(--surface)),linear-gradient(var(--surface),var(--surface)); background-size:7px 1.6px,1.6px 7px;background-position:center,center;background-repeat:no-repeat} .msheet-lbl{display:block;min-width:0;font-size:15.5px;line-height:1.25} .msheet-sub{display:block;font-size:11.5px;font-weight:500;color:var(--text3);margin-top:2px} .msheet-sep{height:1px;background:var(--border);margin:7px 12px} .msheet-head{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text3);padding:12px 16px 6px} .msheet-cancel{justify-content:center;color:var(--text2);background:var(--surface2);margin-top:6px} /* ── Branded sizes itself to its LONGEST option (job names run long), so it must be explicitly clamped or it pushes past the screen edge. */ #fin-unreconciled-body .unr-row .fsel{flex:1 1 100%;width:100%;max-width:100%!important;min-width:0;box-sizing:border-box;min-height:40px} #fin-unreconciled-body .unr-row .btn{min-height:38px;flex:1 1 auto} /* Its header row is meaningless once the rows are cards */ #fin-unreconciled-body div[style*="grid-template-columns:36px 80px 150px"]:not(.unr-row){display:none!important} /* Expenses filter bar: search on its own row, then the four dropdowns as an even 2-up grid, then the totals on their own line — they were all jammed together at ragged widths (Dale: "clustered like that is horrible"). */ /* NB this bar is an inline-styled flex div, not .filter-bar — match it by the search field it contains. */ #page-fin-expenses div:has(> .sw > #fin-exp-q){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px!important;align-items:stretch!important} #page-fin-expenses div:has(> .sw > #fin-exp-q) > .sw{grid-column:1 / -1;min-width:0!important;max-width:none!important;flex:none!important} #page-fin-expenses div:has(> .sw > #fin-exp-q) > .fsel{width:100%;max-width:100%!important;min-width:0;box-sizing:border-box;min-height:40px} #page-fin-expenses div:has(> .sw > #fin-exp-q) > span{grid-column:1 / -1;margin-left:0!important;padding-top:8px;border-top:1px solid var(--border);font-size:12px} /* The To pay / Total / count cluster was a right-floated flex box that wrapped into a cramped 3-column mess (Dale). Full width, its own tidy row: To pay + Total together, the count pushed right. */ #page-fin-expenses div:has(> span > #fin-exp-topay){grid-column:1 / -1!important;margin-left:0!important;display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 18px;padding-top:8px;border-top:1px solid var(--border)} #page-fin-expenses div:has(> span > #fin-exp-topay) > span{font-size:12px;flex-shrink:0} #page-fin-expenses div:has(> span > #fin-exp-topay) .fc{margin-left:auto} /* The 6-column table header (Date/Project/Supplier/…) is meaningless once rows are cards — it clipped to a stray "Date Project". Hide it. */ #fin-exp-body div[style*="8px 8px 0 0"]{display:none!important} /* Give each block of the Expenses page its own neumorphic card so the month list, General Expenses and the Rules section read as separate things (they ran together). */ #page-fin-expenses .page-content>.card, #page-fin-expenses .page-content>div>.card{border-radius:var(--r);box-shadow:var(--tile,var(--sm));margin-bottom:14px;overflow:hidden} #fin-exp-body{border-radius:var(--r);overflow:hidden} /* Month header + grand total: clear banded separators, not bare rows */ #fin-exp-body div[style*="grid-column:1/5"], #fin-exp-body div[style*="grid-column:1/6"]{font-weight:700} /* Job-page expenses card: hide the Ex-GST column (inc-GST IS the amount) so the row fits without sideways scroll; compress the fixed cells */ .fin-x-scroll .fin-x-inner{min-width:0} .fin-x-inner .fin-ex-col{display:none!important} .fin-x-inner div[style*="width:70px"]{width:54px!important} .fin-x-inner div[style*="width:90px"]{width:62px!important} .fin-x-inner div[style*="width:88px"]{width:82px!important} .fin-x-inner div[style*="width:52px"]{width:44px!important} .fin-x-inner>div{gap:6px!important} /* Job page: the header block used to be a fixed flex column that left the tab content a ~100px sliver — on the phone the whole page scrolls instead, and the tab strip sticks to the top (top:-10px counters the .content padding). */ #page-job.active{display:block;height:auto} #jp-content{overflow-y:visible;flex:none} .jp-tabs{position:sticky;top:-10px;z-index:60} /* ── Mobile pass 6 (2026-07-13): legacy data-tables → stacked cards ── Invoices / Customers / Suppliers / Active Leads / Pipeline used to scroll sideways inside their box (Invoices 679px, Customers 857px in a 375 view). They now render each row as a labelled card. _cardStamp() adds .mcard to the table and copies each column header into td[data-label] after every render. */ .tbl:has(table.mcard){overflow:visible} table.mcard,table.mcard tbody{display:block;width:100%} table.mcard{overflow:visible!important;border-collapse:separate;font-size:13px} table.mcard thead{display:none} table.mcard tr{display:block;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--sm);padding:2px 14px;margin-bottom:10px} table.mcard td{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0;border:none;text-align:right;white-space:normal;overflow-wrap:anywhere;font-size:13px;min-height:0;color:var(--text)} table.mcard td a,table.mcard td .cm{overflow-wrap:anywhere;word-break:break-word} table.mcard td+td{border-top:1px solid var(--border)} table.mcard td::before{content:attr(data-label);flex:0 0 38%;color:var(--text3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px;text-align:left} table.mcard td:not([data-label])::before{display:none} table.mcard td:empty{display:none} table.mcard td>div,table.mcard td>span{min-width:0} /* One value block per cell (_cardStamp wraps cell content in .mcv): parts stack right-aligned under each other; word-wrap at word boundaries, not mid-word. */ table.mcard td .mcv{display:block;flex:1;min-width:0;text-align:right;overflow-wrap:break-word} table.mcard td:first-child .mcv,table.mcard td:has(.cp) .mcv{text-align:left} table.mcard td .mcv>div{margin-top:1px} /* Invoices/Quotes KPI tiles (Outstanding · Overdue · Showing): 3 cramped boxes at 375px — become slim full-width rows, label left + amount right. */ #page-fin-invoices [style*="grid-template-columns:repeat(3,1fr)"], #page-fin-quotes [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important;gap:8px!important} #page-fin-invoices [style*="grid-template-columns:repeat(3,1fr)"]>.card, #page-fin-quotes [style*="grid-template-columns:repeat(3,1fr)"]>.card{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left!important;padding:11px 16px!important} #page-fin-invoices [style*="grid-template-columns:repeat(3,1fr)"]>.card>div:first-child, #page-fin-quotes [style*="grid-template-columns:repeat(3,1fr)"]>.card>div:first-child{margin-bottom:0!important;font-size:12px!important} #page-fin-invoices [style*="grid-template-columns:repeat(3,1fr)"]>.card>div:last-child, #page-fin-quotes [style*="grid-template-columns:repeat(3,1fr)"]>.card>div:last-child{font-size:16px!important;white-space:nowrap} /* Finance Overview (Dale, screenshot 5): the Quotes/Invoices/Expenses trio was 3 word-per-line columns at 375px — stack them full-width instead. */ #page-fin-overview [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important} /* Recent Payments rows: name group takes its own full line; date + amount pair up on the line beneath (the fixed date used to wrap vertically "14- 07- 2026"). */ #fov-recent-payments>div{flex-wrap:wrap;row-gap:4px} #fov-recent-payments>div>div:first-child{flex:1 1 100%;min-width:0} #fov-recent-payments>div>div:last-child{flex:1 1 100%;justify-content:space-between} #fov-recent-payments>div>div:last-child span:first-child{white-space:nowrap} /* Title cell (the .cp name, or first col): bigger, left-aligned, no label/divider */ table.mcard td:has(.cp),table.mcard td:first-child{display:block;text-align:left;border-top:none;padding-top:11px;padding-bottom:5px} table.mcard td:has(.cp)::before,table.mcard td:first-child::before{display:none} table.mcard td:has(.cp) .cp,table.mcard td:first-child>div:first-child{font-size:15px;font-weight:700} table.mcard .cs{font-size:12px} /* Actions row (last col): buttons are hover-hidden on desktop (opacity:0) — force them visible and wrap them into a full-width row on touch. */ table.mcard td:last-child{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:8px;text-align:left;border-top:1px solid var(--border);padding-top:11px;margin-top:2px} table.mcard td:last-child::before{display:none} table.mcard td:last-child .ra{opacity:1;flex-wrap:wrap;gap:8px} table.mcard td:last-child .btn{min-height:38px;padding:6px 12px;font-size:12px} /* Hide the bulk-select checkbox column in card view (Active Leads) — placed last so it wins the source-order tie against the first-child title rule. */ table.mcard td:has(.c-selbox){display:none} /* ── Compact list cards (2026-08-01) ── A phone card that stacks every column becomes a ~400px wall (Customers = 9 rows), so you scroll past two records a screen. Hide the low-signal columns in CARD VIEW only — the full record is one tap away in the detail panel, and the desktop table is untouched. Tighter row padding too. */ table.mcard td{padding:6px 0} #page-customers table.mcard td[data-label="Company"], #page-customers table.mcard td[data-label="Source"], #page-customers table.mcard td[data-label="Added"]{display:none} #page-suppliers table.mcard td[data-label="Website"], #page-suppliers table.mcard td[data-label="Added"]{display:none} #page-fin-invoices table.mcard td[data-label="Type"]{display:none} #page-pipeline table.mcard td[data-label="Website"]{display:none} #page-fin-quotes table.mcard td[data-label="Sent"]{display:none} /* Reusable: drop any cell from card view (e.g. the Xero-link column, which is a desktop convenience and rendered a lone "—" as a phantom actions row on phones). */ table.mcard td.mcard-hide{display:none!important} /* Job Overview quote card: its 7-button action cluster (Xero·PDF·Resend·Follow-up·Sync· Accept·Reset) was a flex-shrink:0 block that stayed at max-content (~427px) and overflowed the phone, making the WHOLE Overview horizontally scrollable (everything looked shifted). Drop the buttons onto their own full-width line so they wrap properly. */ .jpq-head{flex-wrap:wrap} .jpq-actions{flex-basis:100%;justify-content:flex-start} /* ── Thumb-friendly touch targets (2026-08-01) ── Buttons were as short as 21px and topbar icons 34px on a phone. Standalone icon buttons → 40×40; full-width rows & buttons get a minimum height so they're comfortable to tap (Apple HIG ~44; 40 is the pragmatic bar). */ #gs-mob-btn,#ndg-btn,#alerts-btn,#help-btn,#nav-back-btn,.mob-hamburger,.sb-mob-close{width:40px!important;height:40px!important;min-height:40px} #sb-brand-b2b-tab,#sb-brand-clikt-tab{min-height:40px} .sb-settings-sub-item{min-height:40px} .btn{min-height:40px} .rep-tab,.rep-period-btn,.ny-pill,#jt-board,#jt-focus,#jt-list,.ny-bh{min-height:40px} select,input:not([type=checkbox]):not([type=radio]):not([type=hidden]){min-height:40px} #ny-refresh,#dash-ai-refresh,.ny-pill,#v-A,#v-B,.alerts-btn,.exp-i,#fin-inv-sync-btn{min-width:40px} .alerts-btn,#fin-inv-sync-btn,.exp-i{min-height:40px} th{font-size:11px} /* Reports sub-tab strip + period strip: scroll horizontally instead of overflowing */ #page-reports > div:first-child > div:last-child{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} #page-reports > div:first-child > div:last-child::-webkit-scrollbar{display:none} .rep-tab{flex-shrink:0} .rep-tbl-wrap,#rep-content > div[style*="overflow-x"]{border:1px solid var(--border);border-radius:10px} /* Reminders "Job Tasks" filter pills: scroll strip (were overflowing at 369px) */ #job-tasks-filter-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;max-width:100%;padding-bottom:2px} #job-tasks-filter-bar::-webkit-scrollbar{display:none} #job-tasks-filter-bar .btn{flex-shrink:0} /* Horizontal scroll strips get a right-edge fade so it's clear more is off-screen */ .jp-tabs,#jobs-list-controls>div:first-child,#job-tasks-filter-bar,#page-reports > div:first-child > div:last-child{ -webkit-mask-image:linear-gradient(to right,var(--black) calc(100% - 22px),transparent); mask-image:linear-gradient(to right,var(--black) calc(100% - 22px),transparent)} /* Topbar search: widen on focus (overlaps neighbours briefly) so the placeholder and typed text aren't clipped at the old 120px lock. */ .topbar-search input:focus{width:min(60vw,240px)} /* KPI tile strips (Invoices/Quotes "Outstanding · Overdue · Showing" etc.) use inline repeat(3,1fr)/repeat(4,1fr) grids whose 1fr floor is min-content — a wide $ value forced them off-screen. minmax(0,…) lets the tiles shrink; 4-up folds to 2-up. */ [style*="grid-template-columns:repeat(3,1fr)"],[style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:repeat(3,minmax(0,1fr))!important} [style*="grid-template-columns:repeat(4,1fr)"],[style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important} [style*="grid-template-columns:repeat(5,1fr)"],[style*="grid-template-columns: repeat(5, 1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important} /* ── Dashboard alignment (Dale, screenshot 2): stack the greeting zone left-aligned (greeting → date → "all clear" note), pull the Needs-you toolbar (refresh + Suggest) out of the right edge onto its own left-aligned row, and turn the Brief-me utility strip into a tidy 2-col grid instead of a ragged dot-separated wrap. ── */ div:has(> #dash-greeting){flex-direction:column;align-items:flex-start;gap:2px!important;margin-bottom:10px!important} /* Separate the title block (greeting + date) from the next-steps summary line */ #dash-daystrip{margin-left:0!important;margin-top:9px!important} /* ── Xero-style dashboard (Dale 2026-07-24: "tiles separated with the neomorphic border, each taking the full width… more room so it does not look so compressed"). The white dash-panel wrapper stole ~36px of width and boxed the cards inside another box — on a phone the cards ARE the layout, sitting straight on the page background with their own tile shadow, exactly like the Xero home screen. ── */ .dash-panel{background:transparent!important;box-shadow:none!important;padding:0!important;border-radius:0!important} .dash-panel>.card,#needs-you{margin-bottom:12px!important} /* One stat card per row. NB the element also matches the repeat(4,1fr) rule above, so this needs the attribute selector to out-specify it. */ .m-stack2[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;gap:12px!important} /* Dale's reference layout: icon + title vertically centred on the LEFT, and the value / sub-line / pill stacked left-aligned on the RIGHT. The icon and title areas repeat down all three content rows, so each spans the full height and centres against the whole block. Fixed title column so the value starts at the same x on every card. Chevron leaves the grid and pins right. */ .dkpi-card{position:relative;padding:15px 30px 15px 15px;column-gap:12px;row-gap:2px; grid-template-columns:auto 112px minmax(0,1fr);justify-items:start;text-align:left;align-items:center; grid-template-areas:"ico lbl num" "ico lbl sub" "ico lbl ext"} .dkpi-card::after{content:'›';position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:22px;line-height:1;font-weight:600;color:var(--text3)} .dkpi-icon{grid-area:ico;align-self:center;width:38px;height:40px;font-size:16px} .dkpi-lbl{grid-area:lbl;align-self:center;font-size:14px;font-weight:700;color:var(--text);line-height:1.2} .dkpi-num{grid-area:num;font-size:27px;margin-top:0;line-height:1.1} .dkpi-sub{grid-area:sub;font-size:12.5px;margin-top:3px} .dkpi-ext{grid-area:ext;margin-top:3px;font-size:12px} /* ── One continuous header on the dashboard (Dale: "remove 'dashboard' from next to the menu bar… integrate the good afternoon and date as part of the top banner"). The greeting block is full-bleed on the topbar's own surface so the two read as a single banner, with the next-steps strip as a quiet sub-band beneath it. ── */ /* No inline title in the topbar on ANY page — the page name shows as a big heading below it instead, so every page matches the dashboard banner (Dale). */ #topbar-title{display:none} /* With the title gone nothing pushes the icon cluster right — pin it there (Dale: "the icons on the top need to be on the right!"). */ #topbar-actions{margin-left:auto!important} /* display:block — the hero is a plain stack here, and a negative side margin on a flex ITEM doesn't pull it past the parent's padding (the daystrip sat 16px in and overhung the right edge by the same). Block layout bleeds it correctly. */ /* Soft-curved banner (Dale): rounded bottom corners + a downward shadow so the header reads as a card floating above the beige page. overflow:hidden clips the daystrip sub-band into the rounded bottom. */ #dash-hero{display:block!important;background:var(--surface);margin:calc(var(--gutter,10px)*-1) calc(var(--gutter,10px)*-1) 14px!important;padding:14px 16px 0;border-radius:0 0 20px 20px;overflow:hidden;box-shadow:0 6px 16px rgba(105,98,84,.13)} #dash-hero #dash-greeting{font-size:21px!important;margin:0} #dash-hero #dash-date{margin:3px 0 0!important} #dash-hero #dash-daystrip{display:block!important;background:var(--surface2);margin:12px -16px 0!important;padding:9px 16px;border-top:1px solid var(--border)} /* Generic page-title banner for every non-dashboard page: same surface/heading as the greeting hero. It's the first child of .content, so it bleeds to the edges with negative margins matching .content's 10px padding. */ #mob-page-hero{display:block;background:var(--surface);margin:-10px -10px 14px;padding:15px 16px 17px;border-radius:0 0 20px 20px;box-shadow:0 6px 16px rgba(105,98,84,.13)} #mob-page-hero h2{font-size:21px;font-weight:800;color:var(--text);letter-spacing:-.5px;margin:0;line-height:1.15} body:has(#page-dashboard.active) #mob-page-hero{display:none} /* dashboard uses its greeting hero */ /* The job page has its own rich title block (number, name, phase, actions) — the banner would just duplicate the job name (Dale), so hide it there too. */ body:has(#page-job.active) #mob-page-hero{display:none} /* Search collapses to an icon; tapping it expands the field across the topbar. */ #gs-mob-btn{display:flex} .topbar-search{display:none} body.gs-open .topbar-search{display:block;position:absolute;left:10px;right:10px;top:50%;transform:translateY(-50%);z-index:14} body.gs-open .topbar-search input{width:100%!important;min-height:38px;font-size:14px;border-radius:999px;padding-left:32px;background:var(--surface2)} body.gs-open .topbar-search .si{left:12px;font-size:14px} body.gs-open .topbar>*:not(.topbar-search){visibility:hidden} /* Needs-you header (Dale: "have the refresh on the far right in alignment with the 'needs you'… have the suggest next to the fulfilment so it removes the need for the line it is currently on"). display:contents dissolves the toolbar wrapper so its buttons become header flex items we can order; .ny-brk forces the row break. */ #ny-hd{align-items:center} #ny-hd #ny-hd-tools{display:contents!important} /* !important — the span carries an inline display:flex */ #ny-hd h3{order:1} #ny-hd #ny-total{order:2} #ny-hd #ny-refresh{order:3;margin-left:auto} #ny-hd .ny-brk{order:4;display:block;flex:0 0 100%;height:0;margin:0} /* The pills themselves become header items (contents), so ✨ Suggest can sit on the same line as Fulfilment instead of claiming a third row of its own. */ #ny-hd{gap:5px!important;row-gap:6px!important;padding-left:14px;padding-right:14px} #ny-hd #ny-filters{display:contents!important} #ny-hd #ny-filters>.ny-pill{order:5} #ny-hd .ny-pill{padding:4px 8px} #ny-hd #dash-ai-refresh{order:6;font-size:10px!important;padding:4px 7px!important} #ny-hd [id$="-dismissed"]{order:7;flex:0 0 100%} /* Brief-me strip: one neat row per action (variable-length labels made a 2-col grid ragged) — icon + text left-aligned, hairline between rows. */ #dash-utility>div:first-child{display:grid!important;grid-template-columns:1fr;gap:0!important;padding:2px 8px!important} #dash-utility .uti-sep{display:none} #dash-utility .uti-link{justify-content:flex-start;text-align:left;min-height:44px;padding:6px 8px;font-size:13px} #dash-utility .uti-link~.uti-link{border-top:1px solid var(--surface2);border-radius:0} /* Modal action footers: were flex-nowrap + justify-end with a margin-right:auto secondary group, so on a phone the Delete/secondary buttons were shoved clean off the LEFT edge (Dale couldn't reach "Delete PO"). Wrap them, kill the auto margin, and give every action a 44px tap target so nothing is ever hidden. */ .modal-actions{flex-wrap:wrap;gap:8px;justify-content:flex-end} .modal-actions>div{margin-right:0!important;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px} .modal-actions>div>.btn{flex:1 1 auto} .modal-actions>.btn{flex:1 1 auto;min-height:44px} .modal-actions .btn{min-height:44px} } /* ── Tablet (769–1080): desktop layout, widest grids step down so nothing squishes ── */ @media(min-width:769px) and (max-width:1080px){ .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} .rep-grid,.rep-inv-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} .m-stack,.fu-cols,.ig{grid-template-columns:minmax(0,1fr)!important} .two-col{grid-template-columns:minmax(0,1fr)!important} /* Registers: the PO row's fixed columns crushed the flexible TITLE to one letter per line around ~1013px (audit #9) — scroll inside the card instead of squishing */ #rfi-all-list,#sub-all-list,#po-all-list{overflow-x:auto;-webkit-overflow-scrolling:touch} #rfi-all-list>div,#sub-all-list>div{min-width:760px} #po-all-list>div{min-width:1010px} } @media(min-width:769px){ .jm-card{display:none!important} } /* ── New Job wizard: full-width gated accordion (2026-08-01) ── */ .modal.jm-wizard{width:calc(100vw - 48px);max-width:1180px;height:calc(100vh - 48px);padding:20px 24px;border-radius:var(--r-lg,16px);display:flex;flex-direction:column;overflow:hidden} .jm-wiz-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px} .jm-wiz-head h3{margin:0} .jm-wiz-jobnum{flex-shrink:0;text-align:right;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3)} .jm-wiz-jobnum #jm-job-number{display:block;margin-top:3px;width:96px;text-align:center;font-size:20px;font-weight:800;letter-spacing:1px;font-family:var(--font-sans);font-variant-numeric:tabular-nums;padding:5px 6px} .jm-wiz-body{max-width:none;margin:0 auto;width:100%;flex:1;overflow-y:auto;overflow-x:hidden;padding:2px 4px} .wiz-step{border:1px solid var(--border);border-radius:12px;margin-bottom:12px;background:var(--surface);box-shadow:var(--sm);overflow:hidden;transition:opacity .2s} .wiz-step-hd{display:flex;align-items:center;gap:12px;padding:15px 18px;font-size:15.5px;font-weight:700;color:var(--text);user-select:none} .wiz-step.done .wiz-step-hd{cursor:pointer} .wiz-step.done .wiz-step-hd:hover{background:var(--surface2)} .wiz-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--surface2);color:var(--text3);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800} .wiz-step.active .wiz-num{background:var(--brand);color:var(--white)} .wiz-step.done .wiz-num{background:var(--green);color:var(--white)} .wiz-step-title{white-space:nowrap} .wiz-step-sum{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%;text-align:right} .wiz-step-body{padding:0 18px 16px} .wiz-step:not(.active) .wiz-step-body{display:none} .wiz-step.locked{opacity:.5} .wiz-step-fields>label:first-child{margin-top:0} .wiz-nav{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)} .wiz-nav .wiz-back{margin-right:auto} /* Editing an existing job → show every section open (familiar full form), no gating */ /* Scope step kept open for reference while on Financials — show its body, still editable */ .wiz-step.keep-open .wiz-step-body{display:block} .wiz-step.keep-open{opacity:1} .jm-wizard.edit-mode .wiz-step .wiz-step-body{display:block} .jm-wizard.edit-mode .wiz-step{opacity:1} .jm-wizard.edit-mode .wiz-nav{display:none} @media(max-width:768px){ .modal.jm-wizard{width:100%;max-width:100%;padding:16px} .jm-wiz-body{max-width:100%} } /* New Job wizard — inline client-details panel */ .jm-cd-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-bottom:2px} /* Generic accordion-wizard modal — same shell as the New Job wizard, used by the Submittal / RFI / Purchase Order forms (see scripts/build-form-wizards.cjs). */ .modal.wiz-modal{width:calc(100vw - 48px);max-width:1180px;height:calc(100vh - 48px);padding:20px 24px;border-radius:var(--r-lg,16px);display:flex;flex-direction:column;overflow:hidden} .modal.wiz-modal > h3{font-size:19px;font-weight:800;margin:0;letter-spacing:-.2px;flex-shrink:0} .wiz-modal-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:2px 4px;margin-top:12px} .modal.wiz-modal .modal-actions{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);flex-shrink:0} /* Editing an existing record → show every section open (no gating), like the job wizard */ .wiz-all-open .wiz-step .wiz-step-body{display:block} .wiz-all-open .wiz-step{opacity:1} .wiz-all-open .wiz-nav{display:none} @media(max-width:768px){ .modal.wiz-modal{width:100%;max-width:100%;height:100%;padding:16px;border-radius:0} } /* Premium modal shell — same look/feel as the New Job wizard, applied to the smaller form modals (scope item, and rolling out to supplier/PO/RFI/submittal). */ .modal.premium{width:calc(100vw - 48px);max-width:860px;max-height:calc(100vh - 48px);padding:22px 26px;border-radius:16px;display:flex;flex-direction:column;overflow:hidden} .modal.premium > h3{font-size:19px;font-weight:800;margin:0;letter-spacing:-.2px} .premium-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:2px 2px 4px;margin-top:12px} .modal.premium .modal-actions{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);flex-shrink:0} @media(max-width:768px){ .modal.premium{width:100%;max-width:100%;padding:16px} } /* Scope item description — condensed to 2 lines by default, keeps the author's line breaks */ .scope-desc-collapsed{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .scope-desc-toggle{display:inline-block;margin-top:2px;font-size:10.5px;color:var(--brand-ink);cursor:pointer;font-style:normal;user-select:none;font-weight:600} .jm-cd-in{width:100%;box-sizing:border-box;padding:6px 9px;font-size:13px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xs);color:var(--text)} .jm-cd-in:focus{border-color:var(--brand-ink);outline:none} /* Address suggestions render IN-FLOW inside the wizard — .wiz-step{overflow:hidden} would clip an absolutely-positioned dropdown, so it must not be position:absolute here. */ .jm-wizard #jm-cd-del-suggestions{position:static;box-shadow:none;max-height:190px;margin-top:4px} /* ═══════════════════════════════════════════════════════════════════════════ OVERHAUL STAGE 3 — visual polish + flow ═══════════════════════════════════════════════════════════════════════════ */ /* V-03 — the job header consumed 764px before the tab strip appeared at 1440x900, and 372px of that was the phase Actions checklist. Dale's note in renderJpActionsPanel is explicit that the panel should stay OPEN on desktop ("so you know what's happening"), so it is NOT collapsed here — it is BOUNDED. Everything stays visible and open; long checklists scroll inside the panel instead of pushing the tabs off the fold. Mobile keeps its own compact collapse (handled in JS) and is deliberately left alone. */ @media (min-width: 769px) { #jp-actions-panel { max-height: 190px; overflow-y: auto; } /* Tighten the header rhythm — every pixel saved goes to the tabs. */ #jp-phase-strip { padding-top: 6px !important; padding-bottom: 2px !important; } #jp-status-note-bar { padding-top: 0 !important; padding-bottom: 5px !important; } #jp-nudges-bar { padding-bottom: 2px !important; } } /* V-05 — the AI chat tab and the "+" quick-add button both live bottom-right and collided with row-level action buttons on a phone (the scope row's Edit/copy/x sat underneath them). Separate them vertically and give scrollable panes enough bottom padding to clear both. */ @media (max-width: 768px) { #qa-fab { bottom: calc(18px + env(safe-area-inset-bottom)); right: 14px; } #chat-fab { bottom: calc(88px + env(safe-area-inset-bottom)); right: 14px; top: auto; } #jp-content, #page-job .jp-tab-body { padding-bottom: 150px; } } /* The job description is multi-line by design (the AI writes it as separate lines: supply line, customisation, price, freight, lead time, weight). It was an , which silently strips newlines — which is why descriptions read as "Rundle Mall.External surfaces:" run together, in the app AND in Xero. */ .jm-desc-ta{width:100%;box-sizing:border-box;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xs);font-size:13px;color:var(--text);font-family:inherit;line-height:1.45;resize:vertical;min-height:76px} .jm-desc-ta:focus{border-color:var(--brand-ink);outline:none} /* ═══════════════════════════════════════════════════════════════════════════ STAGE 3b — PREMIUM PASS on the job page header. Dale: "i want it a lot more visually cleaner and premium.. atm its so messy". The problem was structural, not decorative: the header was SIX full-bleed sibling strips, each with its own left padding (244/258/280px), sitting on three different background tones (cream page, grey actions band, white tabs), with four competing accent colours and no card boundary anywhere. It read as stacked bands, not a page. Fix: one card, one left edge, one background, one accent. Nothing is removed — this is alignment, containment and restraint. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 769px) { /* ── One card, one background ── */ #jp-header{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sm); margin: 12px 18px 0; padding: 4px 0 0; overflow: hidden; } /* ── One left edge. Every strip inside the card aligns to the same gutter. ── */ #jp-header > div{ padding-left: 20px !important; padding-right: 20px !important; } /* ── Title block: give the name room, calm everything under it. ── */ #jp-header #jp-job-name{ letter-spacing: -0.4px; } #jp-customer-name{ font-size: 12px; text-decoration: none; border-bottom: 1px solid var(--border2); display: inline-block; } #jp-customer-name:hover{ color: var(--brand); border-bottom-color: var(--brand); } #jp-site-address-bar{ color: var(--text3); font-size: 11.5px; } /* ── Status line: it was a long italic run-on competing with the title. ── */ #jp-phase-strip{ font-size: 12px; } #jp-status-note-bar{ padding-top: 0 !important; } /* ── Action bar: a quiet toolbar, not nine equal shouting buttons. The primary action stays dark; everything else recedes to an outline until hovered. ── */ #jp-header .btn-action{ background: transparent; border: 1px solid var(--border); color: var(--text2); font-weight: 600; box-shadow: none; } #jp-header .btn-action:hover{ background: var(--bg); border-color: var(--border2); color: var(--text); } /* ── Actions checklist: it is a SIBLING of the header card, so it was breaking the card edge and running full-bleed. Continue the same card instead: header loses its bottom radius, the panel picks it up, and both share one margin and border. ── */ #jp-header{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; } #jp-actions-panel{ background: var(--bg) !important; margin: 0 18px; border: 1px solid var(--border); border-top: 1px solid var(--border); border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); box-shadow: var(--sm); padding-bottom: 2px; } #jp-actions-panel > div{ padding-left: 20px !important; padding-right: 20px !important; } #jp-actions-panel .btn-xs{ box-shadow: none; } /* The red "Block" chip repeated on every single row read as nine errors. Let it recede until the row is hovered — it is an escape hatch, not a status. */ #jp-actions-panel [class*="btn"][onclick*="lock"]{ opacity: .35; transition: opacity var(--t); } #jp-actions-panel > div:hover [class*="btn"][onclick*="lock"]{ opacity: 1; } /* ── Tabs: sit them on the page, tied to the card above by the same gutter. ── */ #page-job .jp-tabs{ margin: 10px 18px 0; padding-left: 8px; border-bottom: 1px solid var(--border); } #jp-content{ padding-left: 18px; padding-right: 18px; } } @media (min-width: 769px) { /* The "✓ Complete Job" button sat after an orphaned 1px divider stub inherited from an older layout — it read as a rendering artefact. Hide the stub, give the button air. */ #jp-header .btn:not(.btn-action) ~ *:empty, #jp-header > div > div:empty:not([id]){ display: none; } /* Tabs: give them the same gutter as the card and a calm resting state. */ #page-job .jp-tabs{ background: transparent; margin-top: 14px; } #page-job .jp-tab{ font-weight: 600; color: var(--text3); } #page-job .jp-tab.active{ color: var(--text); } /* Overview: the phase-progress strip was a full card holding two pills and a lot of empty space. Let it sit as a slim inline band instead of a card of its own. */ #jp-content > .jp-module:first-child:has(> div > div[class*="d60aef"]), #jp-content > div:first-child > .jp-module:first-child{ padding-top: 10px; padding-bottom: 10px; } } /* ── Stage 3b: Job Overview hero cards ─────────────────────────────────────── */ .jp-title-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--bg);border:1px solid var(--border);color:var(--text2);font-size:17px;margin-right:10px;vertical-align:middle;flex-shrink:0} .jp-hero{display:none} @media (min-width: 769px) { .jp-hero{display:block;padding-top:2px;padding-bottom:12px} /* The hero replaces the stacked status + next-steps strips on desktop. */ .jp-hero.on ~ #jp-status-note-bar, .jp-hero.on ~ #jp-nudges-bar{display:none!important} .jp-hero-hd{display:flex;align-items:center;gap:8px;padding:4px 0 8px} .jp-hero-title{font-size:14px;font-weight:700;color:var(--text);margin-right:auto} .jp-hero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .jp-hero-card{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:12px 14px;min-height:104px;display:flex;flex-direction:column;gap:6px} .jp-hero-card-row{flex-direction:row;align-items:center;gap:12px} .jp-hero-eyebrow{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text3)} .jp-hero-big{font-size:16.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;line-height:1.2} .jp-hero-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0} .jp-hero-sub{font-size:11px;color:var(--text3);line-height:1.45;font-style:italic;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .jp-hero-auto{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.5px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:1px 4px;color:var(--text3)} .jp-hero-next{font-size:12px;font-weight:600;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1} .jp-hero-mid{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.35} .jp-hero-btn{align-self:flex-start;margin-top:auto} .jp-hero-card-row .jp-hero-btn{margin-top:4px} .jp-hero-ring{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative} .jp-hero-ring::before{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--surface)} .jp-hero-ring span{position:relative;font-size:12px;font-weight:800;font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text)} .jp-hero-alert{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;background:var(--red-light);color:var(--red)} .jp-hero-alert.ok{background:var(--green-light);color:var(--green)} } /* ── Stage 3b3: hero everywhere + checklist on demand ────────────────────────── Dale: the Progress pill AND the full Design Actions list at once is a double-up, and mobile must be first-class. The hero now renders at ALL widths and the actions checklist is HIDDEN until asked for via the hero's buttons (it opens expanded and scrolled into view). The old status/next-steps strips hide wherever the hero is on. */ .jp-hero{display:block;padding:2px 20px 12px} .jp-hero.on ~ #jp-status-note-bar, .jp-hero.on ~ #jp-nudges-bar{display:none!important} #jp-header:has(.jp-hero.on) ~ #jp-actions-panel:not(.jp-actions-revealed){display:none!important} /* Component styles at all widths (previously desktop-only) */ .jp-hero-hd{display:flex;align-items:center;gap:8px;padding:4px 0 8px} .jp-hero-title{font-size:14px;font-weight:700;color:var(--text);margin-right:auto} .jp-hero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .jp-hero-card{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:12px 14px;min-height:104px;display:flex;flex-direction:column;gap:6px} .jp-hero-card-row{flex-direction:row;align-items:center;gap:12px} .jp-hero-eyebrow{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text3)} .jp-hero-big{font-size:16.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;line-height:1.2} .jp-hero-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0} .jp-hero-sub{font-size:11px;color:var(--text3);line-height:1.45;font-style:italic;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .jp-hero-auto{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.5px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:1px 4px;color:var(--text3)} .jp-hero-next{font-size:12px;font-weight:600;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1} .jp-hero-mid{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.35} .jp-hero-btn{align-self:flex-start;margin-top:auto} .jp-hero-card-row .jp-hero-btn{margin-top:4px} .jp-hero-ring{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative} .jp-hero-ring::before{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--surface)} .jp-hero-ring span{position:relative;font-size:12px;font-weight:800;font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text)} .jp-hero-alert{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;background:var(--red-light);color:var(--red)} .jp-hero-alert.ok{background:var(--green-light);color:var(--green)} @media (max-width: 768px) { .jp-hero{padding:2px 14px 10px} .jp-hero-grid{grid-template-columns:1fr 1fr;gap:8px} .jp-hero-card{min-height:0;padding:10px 11px;gap:4px;border-radius:10px} .jp-hero-card-row{gap:9px} .jp-hero-big{font-size:13.5px} .jp-hero-sub{-webkit-line-clamp:2;line-clamp:2;font-size:10.5px} .jp-hero-next{font-size:11px;-webkit-line-clamp:3;line-clamp:3} .jp-hero-mid{font-size:11.5px} .jp-hero-ring{width:42px;height:42px} .jp-hero-ring::before{inset:5px} .jp-hero-ring span{font-size:10.5px} .jp-hero-alert{width:34px;height:34px;font-size:16px} .jp-hero-btn{min-height:30px} .jp-title-icon{width:28px;height:28px;font-size:14px;border-radius:7px;margin-right:7px} } /* Job description preserves the author's line breaks (it is written as separate lines: supply, customisation, price, freight, lead time). Without this, \n collapses and the text reads run-together even when the stored data is correct. */ .d1vx94h9{white-space:pre-line} /* Mobile job title: the badges kept flex space and squeezed the title into a one-word-per- line column. Badges wrap onto their own row; the title takes the full width at 17px. */ @media (max-width: 768px) { .ddnjh1q{flex-wrap:wrap;gap:8px;padding:10px 14px 6px} .d1ujuoye{flex:1 1 100%;order:2} .d7t0764{font-size:17px;letter-spacing:-0.2px} .djezfpk{order:1;margin-left:auto;margin-top:0} } /* components.css loads LAST, so equal-specificity overrides above lost the cascade. Re-stated with higher specificity so the mobile title fix actually wins. */ @media (max-width: 768px) { #jp-header .ddnjh1q{flex-wrap:wrap !important;gap:8px !important;padding:10px 14px 6px !important} #jp-header .d1ujuoye{flex:1 1 100% !important;order:2} #jp-header .d7t0764{font-size:17px !important;letter-spacing:-0.2px !important} #jp-header .djezfpk{order:1;margin-left:auto !important;margin-top:0 !important} } /* ═══ Stage 3b4 — MOBILE rebuilt to the approved ChatGPT mocks ═══════════════════ docs/mockups/gpt-job-mobile.png + gpt-dashboard-mobile.png. One column, one Now card, scrolling chip toolbar, tappable one-line rows, 2x2 mono stat tiles. */ @media (max-width: 768px) { /* ── Job page: the Now card ── */ .jp-hero{padding:4px 14px 10px} .jp-now{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow, 0 1px 2px rgba(42,36,30,.05));padding:15px 16px} .jp-now-status{display:flex;align-items:center;gap:8px} .jp-now-status b{font-size:16px;font-weight:700;letter-spacing:-.2px} .jp-now-status .jp-hero-auto{margin-left:auto} .jp-now-note{margin-top:6px;font-size:12px;line-height:1.45;color:var(--text3);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .jp-now-prog{margin-top:13px;display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--surface2)} .jp-now-track{flex:1;height:6px;border-radius:99px;background:var(--surface2);overflow:hidden} .jp-now-fill{height:100%;border-radius:99px;background:var(--green);transition:width .3s} .jp-now-prog span{font-size:11px;font-weight:600;color:var(--text2);white-space:nowrap} .jp-now-next{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text)} .jp-now-when{margin-top:6px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2)} .jp-now-when em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .jp-now-when.late{color:var(--danger-text);font-weight:600} .jp-now-next span{color:var(--orange-ink);flex-shrink:0} .jp-now-next em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .jp-now-btns{margin-top:13px;display:flex;gap:8px} .jp-now-btn{flex:1;height:42px;border-radius:11px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;font-family:inherit;cursor:pointer} .jp-now-btn.dark{background:var(--brand);color:var(--white)} .jp-now-btn.ghost{background:transparent;border-color:var(--border2);color:var(--text2)} .jp-now-count{background:var(--red-light);color:var(--red);font-size:11px;font-weight:800;border-radius:99px;padding:1px 7px} /* ── Job page: toolbar = ONE scrolling chip row (the ⋯More sheet is retired). The container carries a real .jp-toolbar class (index.html) — the first attempt targeted it with :has() and lost to the extracted utility classes. ── */ #jp-header .jp-toolbar{ display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;gap:8px;scrollbar-width:none; -webkit-mask:linear-gradient(90deg,#000 calc(100% - 30px),transparent); padding-top:10px !important;padding-bottom:10px !important;border-top:none !important; } #jp-header .jp-toolbar::-webkit-scrollbar{display:none} #jp-header .jp-toolbar #jp-action-bar{display:contents} #jp-header .jp-toolbar .btn-action, #jp-header .jp-toolbar .btn{flex:0 0 auto;height:36px;min-height:36px;border-radius:999px;padding:0 14px;background:var(--surface);border:1px solid var(--border);color:var(--text2);font-weight:600;box-shadow:none;white-space:nowrap} /* ── Job page: tab strip edge fade (it scrolls — show it) ── */ #page-job .jp-tabs{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent);scrollbar-width:none} #page-job .jp-tabs::-webkit-scrollbar{display:none} /* ── Dashboard: needs-you rows become tappable one-liners (buttons hide; the row itself fires the primary action; age sits right; chevron affordance) ── */ .ndg-row .d3mvcui, .dm4ouue .d3mvcui{display:none !important} .ndg-row{align-items:center !important;min-height:46px;position:relative;padding-right:26px !important} .ndg-row > span:first-child{display:none !important} .ndg-row::after{content:'›';position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--border2);font-size:15px} /* ── Dashboard: 2x2 mono stat tiles per the mock. The card is grid-area based on desktop; on mobile it becomes a simple stacked column (hiding the icon while the grid still referenced its area was mangling the layout). ── */ .dkpi-icon{display:none} .dkpi-card{display:flex;flex-direction:column;align-items:flex-start;padding:13px 14px;text-align:left} .dkpi-body{display:flex;flex-direction:column;align-items:flex-start;width:100%} .dkpi-num{font-size:21px;margin-top:0;order:1} .dkpi-lbl{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text3);margin-top:2px;order:2} .dkpi-sub{border-top:1px solid var(--surface2);padding-top:6px;margin-top:7px;order:3;width:100%} .dkpi-ext{order:4} /* Clear the FABs so the last tiles stay tappable */ #page-dashboard{padding-bottom:150px} } @media (max-width: 768px) { /* Toolbar chip row (real buttons moved under the Now card by renderJpHero) */ .jp-chiprow{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin-top:11px;padding-bottom:2px;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 30px),transparent)} .jp-chiprow::-webkit-scrollbar{display:none} .jp-chiprow .btn{flex:0 0 auto;height:36px;min-height:36px;border-radius:999px;padding:0 14px;background:var(--surface);border:1px solid var(--border);color:var(--text2);font-weight:600;box-shadow:none;white-space:nowrap;font-size:12px} .jp-title-icon{display:none} } /* ── Stage 4c: Today board (dashboard registers) ───────────────────────────── */ #dash-registers{margin-top:14px} /* minmax(0,…) not 1fr: a bare 1fr track is min-content floored, so one long job name pushes the whole card wider than the page (it did — 519px card in a 350px column). */ .dreg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px} .dreg-card{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--sm);padding:6px 16px 8px} .dreg-hd{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:10px 0 4px} .dreg-note{font-size:10px;font-weight:600;color:var(--text3)} .dreg-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--surface2);cursor:pointer;min-height:42px} .dreg-row:first-of-type{border-top:none} .dreg-row:hover .dreg-t{color:var(--brand-ink)} .dreg-t{flex:1;min-width:0;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dreg-det{font-weight:500;color:var(--text2)} .dreg-sub{display:block;font-weight:400;font-size:11px;color:var(--text3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dreg-age{font-size:11px;font-weight:700;color:var(--orange-ink);white-space:nowrap} .dreg-age.ok{color:var(--text3);font-weight:600} .dreg-chev{color:var(--border2);font-size:14px} .dreg-empty{padding:12px 0 14px;font-size:12px;color:var(--text3);font-style:italic} .dreg-mhead,.dreg-mrow{display:grid;grid-template-columns:minmax(0,1.6fr) 1fr 1fr 1fr;gap:8px;align-items:center} .dreg-mhead{padding:6px 0 6px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);border-bottom:1px solid var(--surface2)} .dreg-mhead span:not(:first-child),.dreg-mrow .dreg-money{text-align:right} .dreg-mrow{padding:9px 0;border-top:1px solid var(--surface2);cursor:pointer;min-height:40px} .dreg-mrow:first-of-type{border-top:none} .dreg-mjob{font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dreg-mjob span{font-family:'DM Sans',sans-serif;font-weight:600;font-size:12px} .dreg-msub{display:none} .dreg-money{font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:12px} .dreg-money.bad{color:var(--red);font-weight:500} .dreg-mfoot{display:grid;grid-template-columns:minmax(0,1.6fr) 1fr 1fr 1fr;gap:8px;align-items:center; padding:9px 0 2px;margin-top:2px;border-top:1px solid var(--border);font-size:11px;font-weight:700;color:var(--text3)} .dreg-mfoot .dreg-money{text-align:right;color:var(--text);font-weight:700} @media (max-width: 768px) { .dreg-grid{grid-template-columns:minmax(0,1fr);gap:10px} /* Phone: one number per row — job (with the detail on a sub-line) and what's owed. Quoted/collected columns collapse rather than disappearing from the app. */ .dreg-mhead,.dreg-money.q,.dreg-money.c{display:none} .dreg-mrow,.dreg-mfoot{grid-template-columns:minmax(0,1fr) auto} .dreg-mjob{white-space:normal} .dreg-mjob span{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dreg-msub{display:block;font-family:'DM Sans',sans-serif;font-weight:400;font-size:11px;color:var(--text3);margin-top:2px} /* Activity stays short on a phone — the full feed is the dashboard's Activity link */ .dreg-card:last-child .dreg-row:nth-of-type(n+6){display:none} } /* ── Variations register (Stage 4c) ───────────────────────────────────────── */ #fvar-tiles{margin-bottom:14px} .fvar-big{font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:24px;font-weight:500;letter-spacing:-.5px;padding:2px 0 2px} .fvar-big.bad{color:var(--red)} #fvar-list .dreg-row{gap:12px} .fvar-amt{font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:500;white-space:nowrap;text-align:right;min-width:84px} .fvar-amt.neg{color:var(--text3)} .fvar-state{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;min-width:104px;text-align:right} @media (max-width: 768px) { #fvar-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px} .fvar-big{font-size:19px} .fvar-state{display:none} /* the colour of the amount + the chip already say it */ .fvar-amt{min-width:0} } /* ── Stage 4b field cards (freight, retention, finishing) ─────────────────── */ .jp-sub-hd{margin:14px 0 0;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text3)} .jp-freight-gap{margin-top:9px;font-size:12px;color:var(--text2);background:var(--surface2); border-radius:var(--r-xs);padding:7px 10px} .jp-freight-gap.bad{color:var(--danger-text);background:color-mix(in srgb, var(--red) 8%, transparent)} .jp-freight-gap.ok{color:var(--text3)} .jp-freight-gap:empty{display:none} @media (max-width: 768px) { .d1fu3r24{grid-template-columns:1fr 1fr} } /* ── V-05: the FABs stop covering what you are reading ──────────────────────── Both FABs are position:fixed, so on a phone they sit on top of whatever row is under them — job cards had their money column hidden behind the + button. A fixed element can't avoid that by spacing, so they get out of the way instead: scroll DOWN (you're reading) and they slide off; scroll UP or stop and they come back. Standard on premium mobile apps, and nothing is ever unreachable. */ @media (max-width: 768px) { #chat-fab, #qa-fab { transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s; } body.fabs-away #chat-fab { transform: translateX(120%); opacity: 0; pointer-events: none; } body.fabs-away #qa-fab { transform: translateY(130%); opacity: 0; pointer-events: none; } } /* ── B4-04: drawings with a drafter ───────────────────────────────────────── */ .doc-drafter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0 2px;font-size:12.5px;color:var(--text2)} .doc-drafter .dd-none{color:var(--text3);font-style:italic} .doc-drafter .dd-out strong{color:var(--text)} .doc-drafter .dd-back{color:var(--success-text,var(--green));font-weight:600} .dd-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%} .dd-form .dd-name{width:180px} .dd-form input[type=date]{width:150px} .dd-form .dn7a2j4{margin:0} @media (max-width: 768px){ .dd-form .dd-name{width:100%} .dd-form input[type=date]{width:calc(50% - 34px)} } /* Notification category checkboxes */ .push-cats{display:flex;flex-direction:column;gap:7px} .push-cats label{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text2);cursor:pointer;min-height:26px} .push-cats input{width:16px;height:16px;flex:0 0 16px;accent-color:var(--brand-ink)} /* "✓ Done" on a Needs-you row — quieter than the primary action, louder than dismiss */ .ndg-done{font-size:10px;padding:3px 10px;border-color:var(--border2)} .ndg-done:hover{background:color-mix(in srgb, var(--green) 14%, transparent);border-color:var(--green);color:var(--success-text,var(--green))} /* Show/hide toggle inside a password field */ .pw-eye-wrap{position:relative;display:block;width:100%;flex:1 1 auto;min-width:0} .pw-eye-wrap>input{width:100%} .pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:2; width:34px;height:34px;display:flex;align-items:center;justify-content:center; background:transparent;border:0;border-radius:8px;cursor:pointer;color:var(--text3);padding:0} .pw-eye:hover{color:var(--text);background:var(--surface2)} .pw-eye i{font-size:17px;line-height:1} /* ── Inline checkbox rows in modals ─────────────────────────────────────────── `.modal label` is the FORM-label style: uppercase, 11px, display:block. Applied to a checkbox's own label it turned "All day" into a block that wrapped to two lines and pushed itself away from its box. These rows are one line: box, label, quiet hint. */ .chk-row{display:flex;align-items:center;gap:10px;cursor:pointer;margin:2px 0;min-height:34px} /* The ROW is itself a