/* Punchlist360 — Compendium design system. * Dark by default, gold accent, Inter. Light mode is a class on . * Built touch-first: this is used on an iPad on a job site, standing up, so * every control is at least 44px and nothing important hides behind a hover. */ :root { --gold:#c9a227; --gold-2:#e8c547; --gold-3:#ffe9a0; --gold-dim:rgba(201,162,39,.12); --gold-border:rgba(201,168,76,.15); --bg:#000; --bg-2:#060606; --bg-card:#111; --bg-card-2:rgba(17,17,17,.92); --bg-input:#0a0a0a; --text:#e0e0e0; --text-2:#888; --text-3:#444; --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.15); --success:#27ae60; --warning:#e67e22; --danger:#e74c3c; --info:#3498db; --purple:#9b59b6; --radius:12px; --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); } body.light-mode { --bg:#f0f2f5; --bg-2:#fff; --bg-card:#fff; --bg-card-2:#fff; --bg-input:#f4f6f9; --text:#1a1a2e; --text-2:#64748b; --text-3:#94a3b8; --border:rgba(0,0,0,.08); --border-2:rgba(0,0,0,.12); --gold-dim:rgba(201,162,39,.06); --gold-border:rgba(201,168,76,.28); } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0;overflow-x:hidden;max-width:100vw} body{ background:var(--bg); color:var(--text); font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; } img{max-width:100%} a{color:var(--gold-2);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{margin:0 0 .5em;line-height:1.2;font-weight:800;letter-spacing:-.015em;color:var(--text)} [hidden]{display:none!important} ::selection{background:var(--gold);color:#000} /* ── topbar ─────────────────────────────────────────────────────────────── */ .topbar{ position:fixed;top:0;left:0;right:0;z-index:100; height:calc(60px + var(--safe-t)); padding:var(--safe-t) 16px 0 12px; display:flex;align-items:center;gap:10px; background:linear-gradient(135deg,rgba(13,13,13,.96),rgba(26,26,26,.96)); border-bottom:1px solid rgba(201,168,76,.3);backdrop-filter:blur(10px); } body.light-mode .topbar{background:linear-gradient(135deg,#fff,#f7f8fa)} .hamburger{ width:44px;height:44px;border:0;background:transparent;color:var(--gold); font-size:21px;cursor:pointer;border-radius:9px;flex:0 0 auto; } .hamburger:hover{background:var(--gold-dim)} .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;color:var(--text);white-space:nowrap;min-width:0} .brand .mark{width:28px;height:28px;flex:0 0 auto} .brand .tail{color:var(--gold)} .topbar-spacer{flex:1 1 auto;min-width:0} .proj-pill{ display:flex;align-items:center;gap:7px;background:var(--bg-input);border:1px solid var(--border-2); border-radius:20px;padding:6px 12px;font-size:12.5px;color:var(--text-2);max-width:34vw; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .icon-btn{ width:40px;height:40px;border-radius:50%;border:1px solid var(--border-2);background:var(--bg-input); color:var(--text-2);font-size:15px;cursor:pointer;flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center; } .icon-btn:hover{color:var(--gold);border-color:var(--gold-border)} .user-pill{ display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07); border:1px solid var(--border-2);border-radius:20px;padding:4px 12px 4px 5px;cursor:pointer;flex:0 0 auto; } body.light-mode .user-pill{background:rgba(0,0,0,.04)} .user-avatar{ width:28px;height:28px;border-radius:50%;background:var(--gold);color:#000; display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;flex:0 0 auto; } .user-name{font-size:13px;color:var(--text-2);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── sidebar ────────────────────────────────────────────────────────────── */ .sidebar{ position:fixed;top:0;bottom:0;left:-286px;width:286px;z-index:201; background:var(--bg-2);border-right:1px solid var(--border); padding:calc(14px + var(--safe-t)) 0 calc(20px + var(--safe-b)); display:flex;flex-direction:column;transition:left .22s ease;overflow-y:auto; } .sidebar.open{left:0} .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;opacity:0;pointer-events:none;transition:opacity .22s} .sidebar-overlay.show{opacity:1;pointer-events:auto} .sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 18px 10px;font-weight:800;font-size:17px} .sidebar-tenant{padding:0 18px 14px;font-size:12px;color:var(--text-2);border-bottom:1px solid var(--border);margin-bottom:10px} .sidebar-nav{flex:1 1 auto;padding:0 10px} .sb-item{ display:flex;align-items:center;gap:11px;width:100%;min-height:46px;padding:10px 12px;margin:2px 0; border:0;border-left:3px solid transparent;border-radius:8px;background:transparent; color:var(--text-2);font:inherit;font-size:14px;text-align:left;cursor:pointer; } .sb-item:hover{background:var(--gold-dim);color:var(--text)} .sb-item.active{background:rgba(201,168,76,.1);border-left-color:var(--gold);color:var(--gold);font-weight:600} .sb-icon{font-size:16px;width:22px;text-align:center;flex:0 0 auto} .sb-badge{margin-left:auto;background:var(--danger);color:#fff;border-radius:11px;padding:1px 8px;font-size:11px;font-weight:700} .sb-badge.muted{background:var(--bg-input);color:var(--text-2);border:1px solid var(--border-2)} .sidebar-footer{padding:12px 18px 0;font-size:11px;color:var(--text-3);border-top:1px solid var(--border);margin-top:10px;line-height:1.6} /* ── main ───────────────────────────────────────────────────────────────── */ main{padding:calc(70px + var(--safe-t)) 20px calc(90px + var(--safe-b));max-width:1500px;margin:0 auto} .page-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:18px} .page-head h1{font-size:26px;margin:0} .page-head .sub{font-size:13px;color:var(--text-2);margin-top:3px} .page-head .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} .eyebrow{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:5px} /* ── kpi ────────────────────────────────────────────────────────────────── */ .kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;margin-bottom:20px} .kpi-card{background:var(--bg-card);border:1px solid var(--border-2);border-radius:10px;padding:13px 15px} .kpi-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);margin-bottom:5px} .kpi-value{font-size:25px;font-weight:800;color:var(--text);line-height:1.05;margin-bottom:3px;letter-spacing:-.02em} .kpi-sub{font-size:11px;color:var(--text-2);line-height:1.4} .kpi-card.accent-gold{border-color:rgba(201,168,76,.5)} .kpi-card.accent-green{border-color:rgba(39,174,96,.5)} .kpi-card.accent-orange{border-color:rgba(230,126,34,.5)} .kpi-card.accent-blue{border-color:rgba(52,152,219,.5)} .kpi-card.accent-red{border-color:rgba(231,76,60,.5)} .kpi-card.accent-purple{border-color:rgba(155,89,182,.5)} .v-green{color:var(--success)} .v-red{color:var(--danger)} .v-gold{color:var(--gold)} .v-orange{color:var(--warning)} .v-blue{color:var(--info)} /* ── cards ──────────────────────────────────────────────────────────────── */ .card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px} .card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap} .card-title{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2);font-weight:700} .card-head .spacer{flex:1 1 auto} .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px} .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px} /* ── buttons ────────────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; min-height:42px;padding:9px 17px;font:inherit;font-size:13.5px;font-weight:600; border-radius:8px;border:1px solid var(--gold);background:transparent;color:var(--gold);cursor:pointer; transition:background .14s,color .14s,border-color .14s;white-space:nowrap; } .btn:hover{background:var(--gold);color:#000} .btn-primary{background:var(--gold);color:#000} .btn-primary:hover{background:var(--gold-2)} .btn-ghost{border-color:var(--border-2);color:var(--text-2)} .btn-ghost:hover{background:var(--bg-input);color:var(--text);border-color:var(--border-2)} .btn-danger{border-color:var(--danger);color:var(--danger)} .btn-danger:hover{background:var(--danger);color:#fff} .btn-success{border-color:var(--success);color:var(--success)} .btn-success:hover{background:var(--success);color:#fff} .btn-sm{min-height:34px;padding:6px 12px;font-size:12.5px} .btn:disabled{opacity:.45;cursor:not-allowed} .btn-row{display:flex;gap:8px;flex-wrap:wrap} /* ── forms ──────────────────────────────────────────────────────────────── */ label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin:0 0 5px;font-weight:600} input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=number],input[type=search],select,textarea{ width:100%;min-height:44px;padding:10px 13px;font:inherit;font-size:15px; background:var(--bg-input);border:1px solid var(--border-2);border-radius:8px;color:var(--text); } textarea{min-height:88px;resize:vertical;line-height:1.5} input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)} input::placeholder,textarea::placeholder{color:var(--text-3)} .field{margin-bottom:14px} .field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px} .check{display:flex;align-items:center;gap:9px;margin:9px 0;font-size:14px;color:var(--text);text-transform:none;letter-spacing:0} .check input{width:20px;height:20px;min-height:0;accent-color:var(--gold);flex:0 0 auto} .hint{font-size:12px;color:var(--text-2);margin-top:5px;line-height:1.5} .err{color:var(--danger);font-size:13px;margin:9px 0;min-height:1px} .ok{color:var(--success);font-size:13px;margin:9px 0} fieldset{border:0;padding:0;margin:0} /* ── tables ─────────────────────────────────────────────────────────────── */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:9px;border:1px solid var(--border)} table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px} thead tr{background:var(--bg-input)} thead th{padding:9px 12px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);font-weight:700;text-align:left;white-space:nowrap} tbody tr{background:var(--bg-card);border-top:1px solid var(--border)} tbody tr:hover{background:var(--gold-dim)} tbody td{padding:9px 12px;color:var(--text-2);vertical-align:top} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} tr.total-row td{font-weight:800;color:var(--text);background:var(--gold-dim)} /* ── badges + pills ─────────────────────────────────────────────────────── */ .badge{display:inline-block;padding:2px 9px;border-radius:11px;font-size:11px;font-weight:700;white-space:nowrap;border:1px solid transparent} .b-open{background:rgba(136,136,136,.15);color:#9a9a9a;border-color:rgba(136,136,136,.3)} .b-progress{background:rgba(52,152,219,.15);color:#5dade2;border-color:rgba(52,152,219,.35)} .b-ready{background:rgba(230,126,34,.15);color:#e8944a;border-color:rgba(230,126,34,.35)} .b-complete{background:rgba(39,174,96,.15);color:#4ade80;border-color:rgba(39,174,96,.35)} .b-wont{background:rgba(255,255,255,.06);color:var(--text-3);border-color:var(--border-2)} .b-approved{background:rgba(39,174,96,.18);color:#4ade80;border-color:rgba(39,174,96,.45)} .b-rejected{background:rgba(231,76,60,.18);color:#f1786b;border-color:rgba(231,76,60,.45)} .b-pending{background:rgba(201,162,39,.14);color:var(--gold-2);border-color:rgba(201,162,39,.35)} .b-urgent{background:var(--danger);color:#fff} .b-gold{background:var(--gold-dim);color:var(--gold-2);border-color:var(--gold-border)} /* ── punch list ─────────────────────────────────────────────────────────── */ .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center} .filters input[type=search]{max-width:270px;min-height:40px} .chip{ min-height:36px;padding:6px 14px;border-radius:18px;border:1px solid var(--border-2); background:var(--bg-input);color:var(--text-2);font:inherit;font-size:12.5px;cursor:pointer; } .chip:hover{border-color:var(--gold-border);color:var(--text)} .chip.on{background:var(--gold);border-color:var(--gold);color:#000;font-weight:700} .area-block{margin-bottom:20px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg-card)} .area-head{ display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg-input); border-bottom:1px solid var(--border);cursor:pointer; } .area-head:hover{background:var(--gold-dim)} .area-name{font-weight:700;font-size:15px;color:var(--text)} .area-meta{font-size:12px;color:var(--text-2);margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .area-bar{height:4px;background:var(--bg-input);border-radius:2px;width:72px;overflow:hidden;flex:0 0 auto} .area-bar span{display:block;height:100%;background:var(--success)} .chev{color:var(--text-2);font-size:12px;transition:transform .18s} .area-block.collapsed .chev{transform:rotate(-90deg)} .area-block.collapsed .area-items{display:none} .item-row{display:flex;gap:12px;padding:12px 16px;border-top:1px solid var(--border);align-items:flex-start;cursor:pointer} .item-row:first-child{border-top:0} .item-row:hover{background:var(--gold-dim)} .item-row.rejected{border-left:3px solid var(--danger)} .item-row.approved{border-left:3px solid var(--success)} .item-main{flex:1 1 auto;min-width:0} .item-title{font-size:14.5px;color:var(--text);font-weight:600;line-height:1.4;overflow-wrap:anywhere} .item-detail{font-size:12.5px;color:var(--text-2);margin-top:3px;line-height:1.5;overflow-wrap:anywhere} .item-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px;align-items:center;font-size:11.5px;color:var(--text-2)} .item-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px} .clock{font-size:11.5px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap} .clock.warn{color:var(--warning)} .clock.bad{color:var(--danger);font-weight:700} .photo-chip{font-size:11.5px;color:var(--text-2)} /* ── photos ─────────────────────────────────────────────────────────────── */ .photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:9px} .photo-tile{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;border:1px solid var(--border-2);background:var(--bg-input)} .photo-tile img{width:100%;height:100%;object-fit:cover;display:block} .photo-tile .kind{position:absolute;left:5px;bottom:5px;font-size:9.5px;background:rgba(0,0,0,.72);color:#fff;padding:2px 6px;border-radius:5px} .photo-tile .x{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:13px;cursor:pointer;line-height:1} .photo-tile.pdf{display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--text-2)} .dropzone{ border:2px dashed var(--border-2);border-radius:10px;padding:22px;text-align:center; color:var(--text-2);font-size:13.5px;cursor:pointer;background:var(--bg-input); } .dropzone:hover,.dropzone.over{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)} /* ── timeline ───────────────────────────────────────────────────────────── */ .timeline{position:relative;padding-left:24px} .timeline::before{content:'';position:absolute;left:7px;top:5px;bottom:5px;width:2px;background:var(--border)} .tl-item{position:relative;padding:0 0 16px 4px} .tl-item::before{content:'';position:absolute;left:-21px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid var(--bg)} .tl-date{font-size:11px;color:var(--gold);font-weight:700;letter-spacing:.04em} .tl-title{font-size:14px;color:var(--text);font-weight:600;margin-top:2px} .tl-detail{font-size:12.5px;color:var(--text-2);margin-top:2px;line-height:1.5} /* ── modal ──────────────────────────────────────────────────────────────── */ .modal-backdrop{ position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.72);backdrop-filter:blur(3px); display:flex;align-items:flex-start;justify-content:center;padding:20px 14px;overflow-y:auto; } .modal{ background:var(--bg-card);border:1px solid var(--gold-border);border-radius:16px; width:100%;max-width:660px;margin:auto;padding:0;box-shadow:0 24px 70px rgba(0,0,0,.6); } .modal.wide{max-width:900px} .modal-head{display:flex;align-items:center;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--border)} .modal-head h2{font-size:19px;margin:0;flex:1 1 auto;min-width:0;overflow-wrap:anywhere} .modal-body{padding:18px 22px;max-height:calc(100vh - 220px);overflow-y:auto;-webkit-overflow-scrolling:touch} .modal-foot{display:flex;gap:9px;padding:14px 22px 18px;border-top:1px solid var(--border);flex-wrap:wrap} .modal-foot .spacer{flex:1 1 auto} .close-x{width:38px;height:38px;border-radius:50%;border:0;background:var(--bg-input);color:var(--text-2);font-size:17px;cursor:pointer;flex:0 0 auto} .close-x:hover{background:var(--danger);color:#fff} /* ── toast ──────────────────────────────────────────────────────────────── */ #toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(22px + var(--safe-b));z-index:400;display:flex;flex-direction:column;gap:8px;width:min(440px,92vw)} .toast{ background:#1a1a1a;border:1px solid var(--border-2);border-left:3px solid var(--gold); border-radius:9px;padding:12px 15px;font-size:13.5px;color:#e8e8e8;box-shadow:0 8px 26px rgba(0,0,0,.5); } .toast.bad{border-left-color:var(--danger)} .toast.good{border-left-color:var(--success)} /* ── misc ───────────────────────────────────────────────────────────────── */ .empty{text-align:center;padding:44px 20px;color:var(--text-2)} .empty .big{font-size:38px;margin-bottom:10px;opacity:.55} .spin{display:inline-block;width:17px;height:17px;border:2px solid var(--border-2);border-top-color:var(--gold);border-radius:50%;animation:sp .7s linear infinite} @keyframes sp{to{transform:rotate(360deg)}} .note-box{background:var(--bg-input);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:11px 14px;font-size:13px;color:var(--text-2);line-height:1.55;margin:10px 0;overflow-wrap:anywhere} .note-box.bad{border-left-color:var(--danger)} .note-box.good{border-left-color:var(--success)} .money{font-variant-numeric:tabular-nums;white-space:nowrap} .big-figure{font-size:31px;font-weight:800;letter-spacing:-.02em;line-height:1.05} .stat-row{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px} .stat-row:last-child{border-bottom:0} .stat-row .lbl{color:var(--text-2);flex:1 1 auto} .stat-row .val{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums} /* Floating support button — always reachable, and lifted clear of the iOS * home indicator so it is never the thing your thumb misses. */ .fab-support{ position:fixed;right:16px;bottom:calc(18px + var(--safe-b));z-index:150; min-height:48px;padding:12px 18px;border-radius:26px;border:1px solid var(--gold-border); background:var(--bg-card);color:var(--gold);font:inherit;font-size:13.5px;font-weight:700; cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.45);display:flex;align-items:center;gap:8px; } .fab-support:hover{background:var(--gold);color:#000} @media (max-width:820px){ main{padding-left:14px;padding-right:14px} .page-head h1{font-size:21px} .kpi-grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))} .proj-pill{max-width:26vw} .user-name{display:none} .brand span.word{display:none} .item-side{flex-direction:row;align-items:center} .modal-body{max-height:calc(100vh - 190px)} .fab-support span.word{display:none} } @media print{ .topbar,.sidebar,.sidebar-overlay,.fab-support,.actions,#toasts{display:none!important} main{padding:0} body{background:#fff;color:#000} } /* Clickable KPI cards — every number on a dashboard should open the rows behind it. */ .kpi-card.kpi-click{cursor:pointer;transition:border-color .15s,transform .15s,background .15s;position:relative} .kpi-card.kpi-click:hover{transform:translateY(-2px);background:var(--gold-dim)} .kpi-card.kpi-click:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .kpi-go{font-size:10.5px;color:var(--gold);font-weight:700;margin-top:6px;opacity:0;transition:opacity .15s} .kpi-card.kpi-click:hover .kpi-go,.kpi-card.kpi-click:focus-visible .kpi-go{opacity:1} @media (hover:none){.kpi-go{opacity:.75}} /* Carry-cost bars — a proportion you can read at a glance beats a number you have to compare. */ .bar{display:block;height:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;overflow:hidden} .bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:4px} /* Notification bell */ .icon-btn.bell{position:relative} .bell-count{ position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px; border-radius:9px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:800; display:flex;align-items:center;justify-content:center;line-height:1; } .stat-row.unread{background:var(--gold-dim);border-radius:6px;padding-left:8px;padding-right:8px} /* Messages */ .msg{border-left:3px solid var(--border-2);padding:9px 0 9px 13px;margin-bottom:12px} .msg.mine{border-left-color:var(--gold)} .msg-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:3px} .msg-who{font-size:13px;font-weight:700;color:var(--text)} .msg-when{font-size:11.5px;color:var(--text-3);margin-left:auto} .msg-body{font-size:14px;color:var(--text-2);line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere} /* Editing a card title in place */ .kpi-card.kpi-editing{border-style:dashed;border-color:var(--gold)} .kpi-edit{ width:100%;min-height:32px;padding:5px 8px;margin-bottom:5px; font:inherit;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; background:var(--bg-input);border:1px solid var(--gold);border-radius:6px;color:var(--text); } .kpi-edit:focus{outline:0;box-shadow:0 0 0 3px var(--gold-dim)} /* audit log */ /* width:100% from the shared form rule turns a flex filter row into a stack. These are side-by-side controls, so they get their own widths. */ /* A filter bar is a ROW of controls, but the shared form rule sets width:100% so that stacked modal fields fill their column. Inside a flex row that makes every filter claim its own line. This was previously patched per screen — an inline max-width on the punch bar, a #auditBox override here — so it is one rule for every filter bar instead. */ .filters select,.filters input{width:auto} .filters select{min-width:150px;max-width:240px} .filters input[type=search]{width:270px;max-width:100%} .filters input[type=date]{width:170px} /* An audit row is dense by nature: seven columns of small facts. Tighten it so more history is on screen at once, and let the wrapper scroll rather than the page — a table that widens the whole document is how a dashboard ends up with a horizontal scrollbar nobody can explain. */ #auditBox table{font-size:13px} #auditBox td{vertical-align:top;padding-top:9px;padding-bottom:9px} #auditBox td:nth-child(1){white-space:nowrap} /* The metadata column is free text and can be long; cap it and wrap rather than letting one verbose event set the width of every other row. */ #auditBox td .detail,#auditBox td:nth-last-child(2){max-width:420px;white-space:normal;word-break:break-word} /* No overflow:hidden on the card — .table-wrap already scrolls, and hiding here would CLIP the last columns on a phone with no way to reach them. */ /* The four daily-log groups. .grid-2 (minmax 320px) put all four across on a desktop and each table then needed its own horizontal scrollbar to show a company name and a count. These carry a table, so they need more room. */ .log-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:16px} .log-groups .card{margin-bottom:0} .log-groups td{padding-top:8px;padding-bottom:8px} /* These little tables hold prose ("40 sheets drywall"), not figures. Let it wrap inside the card rather than pushing out a scrollbar for one long line. */ .log-groups .table-wrap{overflow-x:visible;border:0} .log-groups td{white-space:normal;word-break:break-word} .log-groups td:last-child{width:1%;white-space:nowrap} /* ── drawings ────────────────────────────────────────────────────────────── A sheet is a picture, so the register is a grid of pictures. A list of filenames would be technically the same information and useless in practice: people recognise a floor plan on sight and never by its number alone. */ .dwg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} .dwg-card{ background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius); overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s; } .dwg-card:hover{border-color:var(--gold-border);transform:translateY(-2px)} .dwg-thumb{ position:relative;aspect-ratio:4/3;background:var(--bg-input); display:flex;align-items:center;justify-content:center;overflow:hidden; } /* The sheet is white paper: contain it rather than crop, because cropping a drawing hides the titleblock, which is the half people navigate by. */ .dwg-thumb img{width:100%;height:100%;object-fit:contain;background:#fff} .dwg-thumb span{font-size:34px;opacity:.35} /* A superseded sheet must be unmistakable at a glance. Dimming alone is not enough — that reads as "loading" — so it also carries a word. */ .dwg-card.superseded .dwg-thumb img{opacity:.4;filter:grayscale(1)} .dwg-card.superseded{border-color:rgba(179,38,30,.35)} .dwg-flag{ position:absolute;top:10px;left:0;padding:3px 10px; background:var(--danger,#b3261e);color:#fff; font-size:10px;font-weight:900;letter-spacing:.12em;border-radius:0 4px 4px 0; } .dwg-meta{padding:12px 14px} .dwg-no{font-size:14.5px;font-weight:800;color:var(--text);margin-bottom:2px} .dwg-title{font-size:13px;color:var(--text);margin-bottom:4px} .dwg-sub{font-size:11.5px;color:var(--text-2)} /* A statement the reader must not scroll past. */ .notice{ padding:12px 16px;border-radius:9px;margin-bottom:16px; border:1px solid var(--gold-border);background:var(--gold-dim);font-size:14px; } .notice.bad{border-color:rgba(179,38,30,.45);background:rgba(179,38,30,.12);color:var(--text)} /* ── the attention list ──────────────────────────────────────────────────── The portfolio leads with named things that are slipping, not counts. Each row is a target: a kind, the thing itself, and which job it belongs to. */ .att-row{ display:flex;align-items:center;gap:14px;padding:11px 4px;cursor:pointer; border-bottom:1px solid var(--border); } .att-row:last-child{border-bottom:0} .att-row:hover{background:var(--gold-dim)} .att-kind{ flex:0 0 92px;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-align:center; padding:4px 0;border-radius:4px;background:var(--bg-input);color:var(--text-2); } /* Colour by what it IS, so the eye sorts them before the words are read. */ .att-kind.rfi{background:rgba(179,38,30,.18);color:#ff8f86} .att-kind.co{background:rgba(230,126,34,.18);color:#f0a868} .att-kind.submittal{background:rgba(52,152,219,.18);color:#7fc2ec} .att-kind.stale_drawing{background:rgba(155,89,182,.20);color:#c79ae0} .att-kind.ready{background:rgba(39,174,96,.16);color:#79d6a3} .att-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .att-main b{color:var(--text);font-weight:600;font-size:14px} .att-detail{font-size:12.5px;color:var(--text-2)} .att-job{flex:0 0 auto;font-size:12px;color:var(--text-2);white-space:nowrap} /* Per-job flags on the portfolio cards. */ .port-flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .flag{font-size:11px;padding:3px 8px;border-radius:5px;background:var(--bg-input);color:var(--text-2)} .flag.bad{background:rgba(179,38,30,.16);color:#ff9c94} .flag.warn{background:rgba(230,126,34,.16);color:#f0b078} .flag.ok{background:rgba(39,174,96,.14);color:#79d6a3} @media (max-width:640px){ .att-row{flex-wrap:wrap;gap:8px} .att-kind{flex:0 0 auto;padding:3px 8px} .att-job{flex:1 0 100%;order:3} } /* ── the connected thread ────────────────────────────────────────────────── Where a record came from and what came out of it, in one line. This is the thing that turns four separate registers into one story somebody can follow a year later, so it reads left to right in the order it happened. */ .chain{margin:18px 0 0} .chain-head{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);margin-bottom:9px} .chain-row{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap} .chain-node{ display:flex;align-items:center;gap:8px;text-align:left; background:var(--bg-card);border:1px solid var(--border);border-radius:8px; padding:8px 12px;cursor:pointer;font:inherit;color:inherit;max-width:260px; transition:border-color .15s; } .chain-node:hover{border-color:var(--gold-border)} /* The record you are looking at is not a link to itself. */ .chain-node.self{cursor:default;border-color:var(--gold);background:var(--gold-dim)} .chain-ico{font-size:15px;line-height:1;flex:0 0 auto} .chain-txt{display:flex;flex-direction:column;min-width:0} .chain-txt b{font-size:12.5px;color:var(--text);font-weight:700;line-height:1.25} .chain-txt span{font-size:11.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chain-arrow{display:flex;align-items:center;color:var(--text-2);opacity:.55;font-size:14px} @media (max-width:640px){ .chain-row{flex-direction:column;align-items:stretch} .chain-node{max-width:none} .chain-arrow{transform:rotate(90deg);justify-content:center;padding:2px 0} } /* ── the Gantt ───────────────────────────────────────────────────────────── * Absolutely-positioned bars on a horizontally scrolling track with a sticky * task column. Divs rather than SVG: the phone gets native momentum scroll, * the names stay selectable at any zoom, and the left column can actually * stick — which is the thing that makes most Gantt charts useless on a phone, * because a bar with no label next to it is just a coloured rectangle. * * Colours come from the theme wherever the element sits on the page * background. The bars themselves are fixed slate/red/green because a bar is * an object on the chart, not a piece of the page, and it has to read the same * in both themes. Anything that has to sit OPAQUELY over a scrolling bar (the * sticky name cell) is tinted with an inset shadow rather than a translucent * background, or the bars would show through it as it scrolls past. */ .gx{ --gx-name-w:260px; border:1px solid var(--border);border-radius:var(--radius); background:var(--bg-card);overflow:hidden;margin-bottom:10px; } /* The ruler. It does not scroll itself — the body's scroll drives it by * transform, which stays smooth on a phone where a scroll-linked repaint of a * whole header row would not. */ .gx-head{display:flex;border-bottom:1px solid var(--border-2);background:var(--bg-2);overflow:hidden} .gx-head .gx-head-name{ font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--text-2);padding:11px 12px;min-height:38px;background:var(--bg-2); } .gx-head .gx-head-track{height:38px;min-height:38px;will-change:transform} .gx-tick{position:absolute;top:11px;font-size:10.5px;color:var(--text-2);white-space:nowrap;padding-left:3px} .gx-body{position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch} /* Decorative only, and it would scroll away from the sticky column it is meant * to edge. Each row's own name cell carries the border instead. */ .gx-name-col{display:none} /* Weekend shading and the today line, behind every bar. */ .gx-layer{position:absolute;top:0;bottom:0;left:var(--gx-name-w);pointer-events:none;z-index:0} .gx-wk{position:absolute;top:0;bottom:0;background:rgba(128,128,128,.10)} .gx-today{position:absolute;top:0;bottom:0;width:2px;background:var(--gold);opacity:.9} .gx-today span{ position:absolute;top:3px;left:5px;font-size:9.5px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--gold);white-space:nowrap; } .gx-row{display:flex;align-items:stretch;min-height:38px;border-bottom:1px solid var(--border);cursor:pointer;position:relative;z-index:1} .gx-name{ flex:0 0 var(--gx-name-w);position:sticky;left:0;z-index:3; background:var(--bg-card);padding:8px 10px; display:flex;align-items:center;gap:6px;flex-wrap:wrap; border-right:1px solid var(--border-2);min-height:38px; } /* Tint over the solid background instead of through it — a translucent name * cell would let the bars slide about underneath as the chart scrolls. */ .gx-row:hover .gx-name{box-shadow:inset 0 0 0 999px rgba(128,128,128,.07)} .gx-row.is-phase .gx-name{box-shadow:inset 0 0 0 999px var(--gold-dim)} .gx-row.is-phase{background:var(--gold-dim)} .gx-row.is-phase .gx-nm{font-weight:800;letter-spacing:-.01em} .gx-nm{font-size:13px;color:var(--text);line-height:1.25} .gx-caret{cursor:pointer;color:var(--text-2);font-size:12px;flex:0 0 auto;padding:4px 5px;margin:-4px 0 -4px -4px} .gx-caret.shut{transform:rotate(-90deg);display:inline-block} .gx-chip{font-size:9.5px;font-weight:800;letter-spacing:.04em;padding:2px 6px;border-radius:4px;white-space:nowrap;text-transform:uppercase} .gx-chip.crit{background:rgba(231,76,60,.20);color:#e74c3c} .gx-chip.late{background:rgba(231,76,60,.32);color:#ff8b7f} .gx-chip.blocked{background:rgba(230,126,34,.22);color:#e67e22} .gx-chip.slip{background:rgba(155,89,182,.22);color:#b07cc6} .gx-track{position:relative;flex:0 0 auto;min-height:38px} /* The bar. Progress is the fill inside it, so one bar answers both "when" and * "how far" without a second column to read across to. */ .gx-bar{ position:absolute;top:9px;height:20px;border-radius:5px; background:#2c3a47;border:1px solid #4a6178;overflow:hidden; display:flex;align-items:center; } .gx-fill{position:absolute;left:0;top:0;bottom:0;background:#5b8db8;opacity:.9} .gx-lab{position:relative;font-size:10px;font-weight:800;color:#eaf2f8;padding-left:7px;z-index:1;white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.5)} .gx-bar.phase{top:12px;height:14px;border-radius:3px;background:#33393f;border-color:#565e66} .gx-bar.phase .gx-fill{background:#828d99} .gx-bar.done{background:#1c3d2e;border-color:#2f6b51} .gx-bar.done .gx-fill{background:#27ae60;opacity:.8} .gx-bar.crit{background:#43201d;border-color:#95403a} .gx-bar.crit .gx-fill{background:#c0392b} .gx-bar.late{border-color:#e74c3c;box-shadow:0 0 0 1px rgba(231,76,60,.5)} .gx-bar.blocked{border-style:dashed;border-color:#e67e22;border-width:2px} /* Float — how far this could slip before it starts moving the finish date. */ .gx-float{position:absolute;top:15px;height:8px;border-radius:3px; background:repeating-linear-gradient(90deg,rgba(128,128,128,.42) 0 4px,transparent 4px 8px)} /* The baseline underneath, so a slip is shown rather than claimed. */ .gx-base{position:absolute;top:31px;height:3px;border-radius:2px;background:var(--purple);opacity:.75} .gx-ms{ position:absolute;top:11px;width:15px;height:15px;background:var(--gold); transform:rotate(45deg);border-radius:2px;border:1px solid rgba(0,0,0,.35); } .gx-ms.crit{background:#e74c3c} .gx-ms.late{box-shadow:0 0 0 3px rgba(231,76,60,.35)} .gx-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--text-2);padding:0 2px 10px} .gx-key i.k{display:inline-block;width:16px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px} .gx-key i.k.crit{background:#c0392b} .gx-key i.k.late{background:#2c3a47;box-shadow:0 0 0 1px #e74c3c} .gx-key i.k.blocked{background:#2c3a47;border:1px dashed #e67e22} .gx-key i.k.done{background:#27ae60} .gx-key i.k.float{background:repeating-linear-gradient(90deg,rgba(128,128,128,.5) 0 3px,transparent 3px 6px)} .gx-key i.k.base{background:var(--purple);height:3px} /* Phones. The name column narrows but keeps sticking, and the chips that are * merely informative drop out — the two that mean "deal with this" stay. */ @media (max-width:760px){ .gx{--gx-name-w:154px} .gx-nm{font-size:12px;line-height:1.2} .gx-chip{display:none} .gx-chip.late,.gx-chip.crit{display:inline-block;font-size:9px;padding:1px 4px} .gx-row,.gx-name,.gx-track,.gx-head .gx-head-name,.gx-head .gx-head-track{min-height:44px} .gx-bar{top:12px} .gx-bar.phase{top:15px} .gx-ms{top:14px} .gx-float{top:18px} .gx-base{top:36px} .gx-key{gap:4px 12px;font-size:11px} } @media (max-width:420px){ .gx{--gx-name-w:120px} .gx-chip.crit{display:none} /* on a small phone, only "late" earns the space */ } /* ── the Pro Network ─────────────────────────────────────────────────────── * Cards rather than a table: what matters on each listing is the track record, * and a track record read across a row of columns is a row of columns. */ .pro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-bottom:16px} .pro-card{ background:var(--bg-card);border:1px solid var(--border-2);border-radius:var(--radius); padding:14px 16px;display:flex;flex-direction:column;gap:10px; } .pro-top{display:flex;align-items:flex-start;gap:10px} .pro-top > div:first-child{flex:1 1 auto;min-width:0} .pro-name{font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.015em;line-height:1.25} .pro-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px} .pro-meta .hint{margin-top:0} .pro-bio{margin:0;font-size:13px;color:var(--text-2);line-height:1.55} .tag{ display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase; padding:3px 7px;border-radius:5px;background:var(--gold-dim);color:var(--gold-2); border:1px solid var(--gold-border);white-space:nowrap; } .tag.ghost{background:transparent;color:var(--text-2);border-color:var(--border-2)} /* The numbers, which are the reason anybody opened this screen. */ .pro-stats{ display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px; background:var(--bg-input);border-radius:9px;padding:10px 12px; } .pro-stats > div{display:flex;flex-direction:column;gap:2px;min-width:0} .pro-stats .n{font-size:18px;font-weight:800;color:var(--text);line-height:1.1;letter-spacing:-.02em} .pro-stats .l{font-size:10.5px;color:var(--text-2);line-height:1.3} /* Said, not hidden. A listing with nothing behind it yet is a fact about the * listing, and pretending otherwise is how a directory stops being believed. */ .pro-thin{ font-size:12.5px;color:var(--text-2);line-height:1.5; border-left:3px solid var(--border-2);padding:2px 0 2px 10px; } .pro-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px} .pro-foot .spacer{flex:1 1 auto;min-width:0} .pro-foot .hint{margin-top:0;overflow-wrap:anywhere} /* ── platform insights ───────────────────────────────────────────────────── * Three lists side by side on a desktop, stacked on anything narrower. */ .ins-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:8px} .ins-cols .card{margin-bottom:0} ul.plain{list-style:none;margin:8px 0 0;padding:0} ul.plain li{ padding:7px 0;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text);line-height:1.45; } ul.plain li:last-child{border-bottom:0} ul.plain li .hint{display:inline;margin-top:0} @media (max-width:640px){ .pro-grid{grid-template-columns:1fr} .pro-stats{grid-template-columns:repeat(2,1fr)} } /* ── deep dive ───────────────────────────────────────────────────────────── * Anything that opens says so before it is clicked. A figure that turns out * to be clickable only when you happen to hover it may as well not be. */ .kpi-card.kpi-click{position:relative;cursor:pointer;transition:border-color .15s,transform .15s,background .15s} .kpi-card.kpi-click:hover,.kpi-card.kpi-click:focus-visible{transform:translateY(-2px);background:var(--gold-dim);outline:none} .kpi-open{ font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--gold-2);margin-top:7px;opacity:.75; } .kpi-card.kpi-click:hover .kpi-open{opacity:1} .drillable{cursor:pointer;border-radius:9px;padding:2px 6px;margin:-2px -6px;transition:background .15s} .drillable:hover,.drillable:focus-visible{background:var(--gold-dim);outline:none} .drillable::after{ content:'open →';display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--gold-2);margin-top:5px;opacity:.7; } /* The detail sits in a wide modal — a transaction table in a narrow one is a * column of wrapped fragments. */ .modal.wide{max-width:980px} .modal.wide .table-wrap{max-height:60vh;overflow-y:auto} @media (max-width:760px){ .modal.wide{max-width:100%} .modal.wide table{font-size:12px} } /* the G702 certificate under its continuation sheet */ .cert{border-top:1px solid var(--border);margin-top:2px;padding:10px 16px 14px} .cert-row{display:flex;justify-content:space-between;gap:18px;padding:7px 0;font-size:13px; color:var(--text-2);border-bottom:1px solid var(--border-2)} .cert-row:last-child{border-bottom:0} .cert-row .money{color:var(--text);font-weight:600} .cert-due{margin-top:6px;padding-top:12px;border-top:2px solid var(--gold);border-bottom:0; font-size:15px;font-weight:700;color:var(--text);letter-spacing:.02em} .cert-due .money{color:var(--gold);font-size:19px} tr.tot td{background:var(--bg-input);border-top:1px solid var(--border)} input.pct{width:74px;padding:5px 7px;text-align:right;font-variant-numeric:tabular-nums} input.pct.wide{width:104px} @media (max-width:700px){.cert-row{font-size:12px}.cert-due .money{font-size:17px}} /* a minute that has been closed — still on the record, visibly settled */ .done-row td{opacity:.55} .done-row td:nth-child(2){text-decoration:line-through;text-decoration-color:var(--border-2)} /* a bank row that ran through the same account but is not this job */ .off-job td{opacity:.62} /* The classify control on Work & what is left. Small enough to sit inside a table row without making the row taller than its neighbours. */ .mini-select{ width:100%; min-height:0; padding:5px 7px; font-size:12px; font-weight:700; color:var(--text); background:var(--bg-input); border:1px solid var(--border-2); border-radius:6px; } /* ── CONTRAST PASS ───────────────────────────────────────────────────────── Any control sitting on a light or gold ground needs a genuinely black, bold label. Gold-on-white and grey-on-white both read as a disabled button, which is exactly the wrong signal on the ones you are meant to press. Dark mode keeps its own palette; only the light grounds are forced to black. */ /* Gold-filled buttons, in either theme. */ .btn-primary, .btn:hover, .btn-primary:hover{ color:#000; font-weight:700; } /* Every dropdown gets a heavier label — a select is read at a glance, and at 12-13px a 400-weight value against a tinted ground is the first thing to go. */ select{ font-weight:600; } body.light-mode select, body.light-mode .mini-select{ color:#000; font-weight:700; background:#fff; border-color:rgba(0,0,0,.28); } /* On a white card an outlined button was gold text on white, and a ghost button was #64748b grey on white. Both now read as black. */ body.light-mode .btn{ color:#000; font-weight:700; border-color:rgba(0,0,0,.35); } body.light-mode .btn:hover{ color:#000; background:var(--gold); border-color:var(--gold); } body.light-mode .btn-primary{ color:#000; font-weight:700; border-color:var(--gold); } body.light-mode .btn-ghost{ color:#000; font-weight:700; border-color:rgba(0,0,0,.3); } body.light-mode .btn-ghost:hover{ color:#000; background:rgba(0,0,0,.06); } /* The danger and success outlines stay in their own colour — those carry meaning — but they are darkened enough to hold up on white. */ body.light-mode .btn-danger{ color:#b3261e; font-weight:700; border-color:#b3261e; } body.light-mode .btn-success{ color:#15803d; font-weight:700; border-color:#15803d; } body.light-mode .btn-danger:hover, body.light-mode .btn-success:hover{ color:#fff; }