/* NES Safety App — styles (mobile-first, high-contrast). Brand: red & black. */ :root{ --black:#15171a; --black-2:#26292e; --ink:#1a1c1f; --ink-2:#3d4147; --brand:#C5161D; --brand-bright:#ED1B24; --brand-deep:#9C0A0D; --bg:#f1f3f5; --card:#ffffff; --card-2:#f6f7f9; --muted:#61676e; --line:#e6e8ec; --danger:#cf1f24; --warn:#e8a13a; --ok:#2f9e5e; --shadow:0 1px 2px rgba(16,18,20,.04),0 3px 14px rgba(16,18,20,.07); --shadow-lg:0 10px 34px rgba(16,18,20,.14); /* Text-safe tones. Same hues, contrast-checked against --card and --bg (AA, >=4.5:1). */ --brand-ink:#C5161D; --warn-ink:#96600d; --ok-ink:#1f7a49; --radius:18px; --radius-sm:12px; --safe-b:env(safe-area-inset-bottom,0px); } /* ---- Dark mode: system default + explicit toggle (data-theme on ) ---- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#141518; --card:#1f2226; --card-2:#282c31; --ink:#eceef0; --ink-2:#c3c8ce; --muted:#9aa0a7; --line:#2c3036; --black:#0e0f11; --black-2:#1a1c1f; --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.4); --shadow-lg:0 12px 36px rgba(0,0,0,.55); --ok:#3fbb73; --warn:#eab04f; --danger:#ff5b60; --brand-ink:#F4595F; --warn-ink:#eab04f; --ok-ink:#3fbb73; } } :root[data-theme="dark"]{ --bg:#141518; --card:#1f2226; --card-2:#282c31; --ink:#eceef0; --ink-2:#c3c8ce; --muted:#9aa0a7; --line:#2c3036; --black:#0e0f11; --black-2:#1a1c1f; --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.4); --shadow-lg:0 12px 36px rgba(0,0,0,.55); --ok:#3fbb73; --warn:#eab04f; --danger:#ff5b60; --brand-ink:#F4595F; --warn-ink:#eab04f; --ok-ink:#3fbb73; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg);color:var(--ink);line-height:1.5;font-size:16px; padding-bottom:calc(70px + var(--safe-b));-webkit-font-smoothing:antialiased} /* Subtle branded backdrop — faint NES-red glow, fixed behind everything. Degrades to nothing if color-mix is unsupported, so it never harms readability. */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(120% 80% at 100% -10%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 55%), radial-gradient(120% 80% at -10% 110%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 55%);} :root[data-theme="dark"] body::before{opacity:.7} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{opacity:.7}} h1,h2,h3,h4{margin:0 0 .4em;line-height:1.25} p{margin:0 0 .8em} button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit} input,select,textarea{font-family:inherit;font-size:16px} .muted{color:var(--muted)}.tiny{font-size:12px}.center{text-align:center}.pad{padding:14px} /* Layout */ .content{padding:14px 16px 24px;max-width:680px;margin:0 auto} .topbar{position:sticky;top:0;z-index:20;background:var(--black);color:#fff; display:flex;align-items:center;justify-content:space-between; padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 12px;box-shadow:var(--shadow); border-bottom:3px solid var(--brand)} .tb-left{display:flex;align-items:center;gap:6px;min-width:0} .tb-title{font-weight:700;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .iconbtn{color:#fff;font-size:28px;line-height:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center} .iconbtn:active{background:rgba(255,255,255,.15)} .iconbtn:disabled{opacity:.4} /* Splash / hero */ .splash{display:grid;place-items:center;height:80vh;color:var(--muted);text-align:center} .hero{max-width:460px;margin:0 auto;padding:42px 22px;text-align:center;min-height:100vh;display:flex;flex-direction:column;justify-content:center} .hero h1{font-size:28px;color:var(--ink);margin-top:14px} .hero-sub{color:var(--brand-ink);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:13px} .brand-logo{width:148px;height:auto;margin:0 auto;display:block} .brand-logo.sm{width:96px} .hero-logo{width:84px;height:84px;border-radius:22px;background:var(--black); color:var(--brand-bright);display:grid;place-items:center;font-weight:800;font-size:30px;margin:0 auto;box-shadow:var(--shadow);letter-spacing:1px} .iso-badge{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--line); color:var(--muted);font-size:11px;font-weight:700;padding:6px 12px;border-radius:20px;margin-top:14px} .iso-badge b{color:var(--brand-ink)} /* Cards & lists */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:14px} .card h3,.card h4{color:var(--ink)} .card.accent{border-left:4px solid var(--brand)} .list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .listrow{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:14px; box-shadow:var(--shadow);text-align:left;width:100%;transition:transform .06s} .listrow:active{transform:scale(.99)} .listrow.static{cursor:default}.listrow.disabled{opacity:.5} .lr-icon{font-size:22px;width:30px;text-align:center;flex:none} .lr-main{display:flex;flex-direction:column;min-width:0;flex:1} .lr-title{font-weight:600}.lr-sub{font-size:13px;color:var(--muted)} .chev{color:var(--muted);font-size:22px;flex:none} /* Pills */ .pill{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;flex:none} .pill.ok{background:#d3efdf;color:#0a6e3d}.pill.bad{background:#fbd7d8;color:#b0141a} .pill.todo{background:#fdeaeb;color:var(--brand-ink)}.pill.lock{background:#eee;color:#999} .pill.cat{background:var(--black);color:#fff} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700; padding:15px 18px;border-radius:14px;transition:transform .06s,opacity .2s} .btn:active{transform:scale(.98)} .btn.block{display:flex;width:100%;margin:8px 0} .btn.primary{background:linear-gradient(160deg,var(--brand-bright),var(--brand-deep));color:#fff;box-shadow:0 3px 12px rgba(197,22,29,.32)} .btn.primary:active{background:var(--brand-deep)} .btn.primary:disabled{opacity:.4} .btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--shadow);border:1.5px solid var(--line)} .btn.dark{background:var(--black);color:#fff;box-shadow:var(--shadow)} .btn.link{background:none;color:var(--brand-ink);box-shadow:none} /* Forms */ .fld{display:block;margin-bottom:14px} .fld>span{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px} .fld input,.fld select,.fld textarea,.search{width:100%;padding:13px;border:1.5px solid var(--line); border-radius:12px;background:var(--card);color:var(--ink)} .fld input:focus,.fld select:focus,.fld textarea:focus,.search:focus{outline:none;border-color:var(--brand-ink)} .fld-check{display:flex;align-items:center;gap:10px;margin-bottom:14px} .fld-check input{width:22px;height:22px;accent-color:var(--brand-ink)} .search{margin-bottom:14px} /* Declaration list */ .decl{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px} .decl:last-child{border-bottom:none} .decl input{width:24px;height:24px;flex:none;margin-top:1px;accent-color:var(--brand-ink)} /* Reading content */ .reading{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px} .reading p{margin:0 0 .8em} .blk-h{color:var(--brand-ink);font-size:17px;margin:16px 0 6px} .blk-h:first-child{margin-top:0} .ul{margin:0 0 12px;padding-left:20px}.ul li{margin-bottom:6px} .callout{background:#ffe6c9;border:1px solid #dd9a3a;border-left:5px solid var(--warn);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:14px;color:var(--ink)} .callout.warn{background:#f9c9cb;border-color:#cf3a3e;border-left-color:var(--danger)} .sop .sop-h{color:var(--ink);font-size:16px;margin:14px 0 4px;font-weight:700} .sop p{font-size:15px} .doc-meta{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap} /* Controlled-document header (ISO) */ .docctrl{background:#fafafa;border:1px solid var(--line);border-left:4px solid var(--brand); border-radius:10px;padding:11px 13px;margin-bottom:14px;font-size:12.5px;color:var(--muted)} .docctrl table{width:100%;border-collapse:collapse} .docctrl td{padding:2px 0;vertical-align:top} .docctrl td:first-child{color:var(--muted);width:42%} .docctrl td:last-child{color:var(--ink);font-weight:600} .docctrl .note{margin-top:7px;font-style:italic} /* Home dashboard */ .scorecard{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,var(--black) 35%,var(--brand-deep)); color:#fff;border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--shadow)} .ring{position:relative;width:104px;height:104px;flex:none} .ring svg{transform:rotate(-90deg);width:100%;height:100%} .ring-bg{fill:none;stroke:rgba(255,255,255,.18);stroke-width:9} .ring-fg{fill:none;stroke:var(--brand-bright);stroke-width:9;stroke-linecap:round;transition:stroke-dasharray .6s} .ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .ring-num{font-size:30px;font-weight:800;line-height:1}.ring-unit{font-size:12px;opacity:.8} .score-meta{flex:1} .score-month{font-size:13px;opacity:.85;text-transform:uppercase;letter-spacing:.5px} .score-tag{display:inline-block;font-weight:800;font-size:18px;margin:4px 0 6px} .score-tag.good{color:#7be0a0}.score-tag.mid{color:#ffd479}.score-tag.low{color:#ff9b9b} .banner{display:flex;align-items:center;gap:12px;border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow);font-size:15px} .banner.warn{background:#ffe1a0;border:1px solid #d99a2b;border-left:5px solid var(--warn);color:#4a3408} .banner.alert{background:#f8c2c4;border:1px solid #cf1f24;border-left:5px solid var(--danger);color:#5a1113} .banner.warn strong,.banner.alert strong{color:inherit} .banner div{flex:1}.banner .chev{font-size:24px} .banner-more{margin-bottom:12px} .banner-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;background:var(--card-2,var(--line));border:1px solid var(--line);color:var(--muted);font-size:14px;font-weight:600} .banner-more>summary::-webkit-details-marker{display:none} .banner-more>summary .bm-ic{display:inline-flex;color:var(--brand-ink)} .banner-more>summary .chev{margin-left:auto;font-size:22px;transition:transform .15s} .banner-more[open]>summary{margin-bottom:12px} .banner-more[open]>summary .chev{transform:rotate(90deg)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px} .tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 12px;box-shadow:var(--shadow); display:flex;flex-direction:column;align-items:center;gap:9px;font-weight:600;text-align:center;transition:transform .08s,box-shadow .15s} .tile:active{transform:scale(.97);box-shadow:var(--shadow-lg)} .tile-icon{font-size:28px;color:var(--brand-ink);display:inline-flex} .sec-h{color:var(--ink);font-size:13px;text-transform:uppercase;letter-spacing:.8px;margin:20px 2px 10px;font-weight:800; display:flex;align-items:center;gap:8px} .sec-h::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--brand);flex:none} .sec-h .tiny{text-transform:none;letter-spacing:0} /* Progress */ .progress{height:9px;background:#e6e8ea;border-radius:6px;overflow:hidden;margin:8px 0 4px} .progress-bar{height:100%;background:var(--brand);transition:width .4s} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px} .statcard{background:var(--card);border-radius:14px;padding:14px 8px;text-align:center;box-shadow:var(--shadow)} .statcard.good{border-bottom:3px solid var(--brand)} .stat-val{font-size:22px;font-weight:800;color:var(--ink)} .stat-label{font-size:12px;color:var(--muted)} .breakdown .bd-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px} .bd-row>span:first-child{flex:1;min-width:90px} .bd-bar{flex:1.4;height:8px;background:#e6e8ea;border-radius:5px;overflow:hidden} .bd-bar>div{height:100%;background:var(--brand)} .bd-num{font-size:13px;color:var(--muted);width:42px;text-align:right} /* Quiz */ .quiz .qtext{font-size:20px;margin:10px 0 18px;color:var(--ink)} .opts{display:flex;flex-direction:column;gap:10px;margin-bottom:18px} .opt{text-align:left;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:15px;font-weight:500;box-shadow:var(--shadow)} .opt.sel{border-color:var(--brand-ink);background:#fdeef0} .opt:active{transform:scale(.99)} .quiz-actions{display:flex;justify-content:space-between;gap:10px;align-items:center} .quiz-actions .btn{flex:1} .result{text-align:center;padding:24px 16px;border-radius:var(--radius);margin-bottom:16px;box-shadow:var(--shadow)} .result.pass{background:#e9f7ef}.result.fail{background:#fdeeee} .result-badge{font-size:46px} .result-score{font-size:24px;font-weight:800;color:var(--ink);margin:6px 0} .review{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .rev{padding:12px 14px;border-radius:12px;font-size:14px} .rev.ok{background:#eef7f1}.rev.bad{background:#fdf0f0} .rev-q{font-weight:600}.rev-a{margin-top:6px;color:var(--muted)} /* Certificate / record */ .cert{background:var(--card);border:2px solid var(--black);border-radius:var(--radius);padding:22px;text-align:center;box-shadow:var(--shadow);margin-bottom:16px;position:relative} .cert:before{content:"";position:absolute;inset:6px;border:1px solid var(--brand);border-radius:10px;pointer-events:none} .cert h2{color:var(--ink);margin:6px 0} .cert .cert-name{font-size:24px;font-weight:800;color:var(--brand-ink);margin:8px 0} .cert .cert-meta{font-size:13px;color:var(--muted)} .cert .brand-logo{width:90px;margin-bottom:6px} /* Checklist pre-start */ .checkitem{padding:12px 0;border-bottom:1px solid var(--line)} .checkitem:last-child{border-bottom:none} .ci-label{font-weight:500;margin-bottom:8px;font-size:15px} .ci-btns{display:flex;gap:8px} .ci-btn{flex:1;padding:11px;border-radius:10px;font-weight:700;border:2px solid var(--line);background:var(--card);color:var(--muted)} .ci-btn.pass.on{background:var(--ok);color:#fff;border-color:var(--ok-ink)} .ci-btn.fail.on{background:var(--danger);color:#fff;border-color:var(--danger)} .ci-btn.na.on{background:#8893a0;color:#fff;border-color:#8893a0} /* Quiz builder (admin) */ .qbuilder{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px} .opt-row{display:flex;align-items:center;gap:8px;margin-bottom:8px} .opt-row input[type=radio]{width:20px;height:20px;flex:none;accent-color:var(--brand-ink)} .opt-row .q-opt{flex:1} /* Bottom nav */ #nav{position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--card);display:flex; border-top:1px solid var(--line);padding-bottom:var(--safe-b);box-shadow:0 -2px 10px rgba(0,0,0,.06)} .navitem{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 0 7px; color:var(--muted);font-size:11px;font-weight:600} .navitem .ni-icon{font-size:21px} .navitem.active{color:var(--brand-ink)} .navitem.active .ni-icon{transform:translateY(-1px)} /* Toast */ #toast{position:fixed;bottom:calc(80px + var(--safe-b));left:50%;transform:translateX(-50%) translateY(20px); background:var(--black);color:#fff;padding:11px 18px;border-radius:24px;font-size:14px;font-weight:600; opacity:0;pointer-events:none;transition:.25s;z-index:50;box-shadow:var(--shadow)} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* SVG icons */ .ic{vertical-align:middle;display:inline-block} .tile-icon svg{color:var(--brand-ink)} .lr-icon{display:inline-flex;align-items:center;justify-content:center} .lr-icon svg{color:var(--brand-ink)} .navitem svg{display:block;margin:0 auto} .banner .bn-ic{display:inline-flex;color:var(--brand-ink)} .banner.warn .bn-ic{color:var(--warn-ink)} .iso-badge svg{color:var(--brand-ink);vertical-align:middle} .sec-h svg{vertical-align:-2px} /* Role picker (welcome) */ .fld-lbl{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:4px 0 8px} .rolepick{display:flex;flex-direction:column;gap:10px} .rolecard{display:flex;align-items:center;gap:14px;text-align:left;background:var(--card);border:2px solid var(--line); border-radius:14px;padding:14px;box-shadow:var(--shadow);transition:transform .06s,border-color .15s} .rolecard:active{transform:scale(.99)} .rolecard:hover{border-color:var(--brand-ink)} .role-ic{display:inline-flex;color:var(--brand-ink);background:#fdeef0;border-radius:12px;padding:8px;flex:none} .role-text{flex:1;display:flex;flex-direction:column} .role-title{font-weight:700;font-size:16px} .role-sub{font-size:13px;color:var(--muted)} /* Contractor home scorecard */ .scorecard.contractor{align-items:center} .scorecard .sc-ic{display:inline-flex;color:var(--lime,#7be0a0);background:rgba(255,255,255,.12);border-radius:14px;padding:12px;flex:none} .scorecard.contractor .sc-ic svg{color:#fff} /* Name picker (employee onboarding) */ .namegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .namebtn{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--card);border:2px solid var(--line); border-radius:14px;padding:18px 10px;box-shadow:var(--shadow);font-weight:700;font-size:16px} .namebtn svg{color:var(--brand-ink)} .namebtn:active{transform:scale(.98);border-color:var(--brand-ink)} /* Team progress (leaders) */ .teamrow{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)} .team-score{font-weight:800;font-size:20px;width:46px;text-align:center;flex:none} .team-score.good{color:var(--ok-ink)}.team-score.mid{color:var(--warn-ink)}.team-score.low{color:var(--danger)} .team-name{font-weight:700;flex:1;min-width:0} .team-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px} .tbadge{font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px} .tbadge.ok{background:#d3efdf;color:#0a6e3d}.tbadge.no{background:#fbd7d8;color:#b0141a}.tbadge.na{background:#e6e6e6;color:#666} /* Worker tasks */ .tentpick{display:flex;gap:10px} .tentbtn{flex:1;padding:16px;border-radius:12px;font-weight:700;font-size:16px;border:2px solid var(--line);background:var(--card);color:var(--ink)} .tentbtn.on{background:var(--brand);color:#fff;border-color:var(--brand-ink)} .tentbtn:active{transform:scale(.98)} .ci-note{width:100%;margin-top:8px;padding:11px;border:1.5px solid var(--line);border-radius:10px} .bigtimer{font-size:40px;font-weight:800;color:#fff;letter-spacing:1px;margin-top:8px;font-variant-numeric:tabular-nums} .scorecard .bigtimer{color:#fff} .card.accent .bigtimer{color:var(--brand-ink)} /* Toolbox */ .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{background:#fdeef0;color:var(--brand-ink);border:1px solid #f3c4c6;border-radius:20px;padding:7px 12px;font-size:13px;font-weight:600;text-align:left} .chip:active{transform:scale(.97)} .addrow{display:flex;gap:8px;margin-top:8px} .addrow input{flex:1;padding:12px;border:1.5px solid var(--line);border-radius:12px;background:var(--card)} .addrow input:focus{outline:none;border-color:var(--brand-ink)} .addrow .btn{padding:12px 16px;flex:none} @media(min-width:680px){.grid2{grid-template-columns:repeat(3,1fr)}} /* ── First-use app walkthrough (tour) ── */ .tour-ovl{position:fixed;inset:0;background:rgba(21,23,26,.82);z-index:400;display:flex;align-items:center;justify-content:center;padding:20px} .tour-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);max-width:400px;width:100%;padding:26px 22px 18px;text-align:center;animation:tourin .22s ease} @keyframes tourin{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}} .tour-ic{width:64px;height:64px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 14px} .tour-ic svg{width:30px;height:30px} .tour-card h3{margin:0 0 8px;font-size:20px} .tour-card p{margin:0 0 16px;color:var(--muted);font-size:15px;line-height:1.55} .tour-dots{display:flex;gap:6px;justify-content:center;margin-bottom:16px} .tour-dots span{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .15s} .tour-dots span.on{background:var(--brand)} .tour-nav{display:flex;gap:10px} .tour-nav .btn{flex:1;margin:0} .tour-skip{background:none;border:0;color:var(--muted);font-size:13px;margin-top:12px;cursor:pointer;text-decoration:underline} /* ── Team messages (chat) ── */ .chat-wrap{max-height:55vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 0} .chat-b{background:var(--card);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 12px;max-width:82%;align-self:flex-start;font-size:14.5px;box-shadow:var(--shadow)} .chat-b.mine{background:var(--brand);color:#fff;border:0;border-radius:14px 14px 4px 14px;align-self:flex-end} .chat-from{display:block;font-size:11px;font-weight:700;color:var(--brand-ink);margin-bottom:2px} .chat-b.mine .chat-from{display:none} .chat-at{display:block;font-size:10px;opacity:.6;text-align:right;margin-top:2px} /* ── Chat photos + task composer + system messages ── */ .chat-img{max-width:200px;max-height:200px;border-radius:10px;margin:2px 0;display:block;cursor:pointer;object-fit:cover} .chat-b.mine .chat-img{margin-left:auto} .chat-sys{align-self:center;background:var(--bg);border:1px dashed var(--line);color:var(--muted);font-size:12.5px;padding:6px 12px;border-radius:12px;max-width:90%;text-align:center;margin:2px auto} .chat-input{display:flex;gap:8px;align-items:center;margin-top:10px} .chat-input #msg-in{flex:1} .chat-icon-btn{background:var(--bg);border:1px solid var(--line);border-radius:10px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:var(--brand-ink);cursor:pointer;flex:none} .chat-icon-btn:active{background:var(--line)} /* ── Notification tag on the Home nav item ── */ .navitem{position:relative} .nav-badge{position:absolute;top:4px;left:calc(50% + 4px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--brand);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--card)} /* ── Docket counting pad ── */ .count-toggle{background:none;border:0;color:var(--brand-ink);font-size:13px;font-weight:600;padding:6px 0;cursor:pointer;display:flex;align-items:center;gap:4px} .count-toggle .ic{vertical-align:middle} .count-pad{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;margin:2px 0 4px} .count-tape{font-size:15px;font-weight:600;min-height:20px;word-break:break-word} .count-pad input{padding:10px} /* ── Auto-update bar ── */ .update-bar{position:fixed;top:0;left:0;right:0;z-index:500;background:var(--brand);color:#fff;text-align:center;padding:10px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)} /* ── Print → PDF (Reports export): show only the content, drop app chrome ── */ @media print { #nav, .topbar, .update-bar, .btn { display: none !important; } body, #app, .screen { background: #fff !important; color: #000 !important; } .card, .card.accent { break-inside: avoid; box-shadow: none !important; border: 1px solid #ccc !important; } main, #app { padding: 0 !important; margin: 0 !important; } table { font-size: 11px !important; } @page { margin: 14mm; } } /* ============================================================================ Command Centre — sleek leader home (v7.94 makeover) ============================================================================ */ .cmd-greet{margin:2px 2px 14px} .cmd-greet h1{font-size:26px;font-weight:800;letter-spacing:-.5px;margin:0;color:var(--ink)} .cmd-greet .cmd-date{color:var(--muted);font-size:13px;margin-top:2px} /* Hero money/insight card */ .cmd-hero{position:relative;overflow:hidden;border-radius:var(--radius);padding:20px;margin-bottom:14px;color:#fff; background:linear-gradient(150deg,#1b1d21 0%,#2a1416 55%,var(--brand-deep) 130%);box-shadow:var(--shadow-lg)} .cmd-hero::after{content:"";position:absolute;top:-40%;right:-15%;width:60%;height:180%; background:radial-gradient(closest-side,rgba(237,27,36,.45),transparent);pointer-events:none} .cmd-hero .ch-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;opacity:.75;font-weight:700} .cmd-hero .ch-big{font-size:38px;font-weight:800;letter-spacing:-1px;line-height:1.05;margin:4px 0 2px} .cmd-hero .ch-sub{font-size:13px;opacity:.85} .cmd-hero .ch-foot{display:flex;gap:16px;margin-top:14px;position:relative} .cmd-hero .ch-foot>div{flex:1} .cmd-hero .ch-foot .v{font-size:18px;font-weight:800} .cmd-hero .ch-foot .k{font-size:11px;opacity:.75;text-transform:uppercase;letter-spacing:.5px} .cmd-hero .ch-bar{height:7px;border-radius:5px;background:rgba(255,255,255,.18);overflow:hidden;margin-top:12px;position:relative} .cmd-hero .ch-bar>div{height:100%;background:linear-gradient(90deg,#ff5b60,#ffb36b);border-radius:5px} /* Insight grid — cards that talk */ .ins-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px} .insight{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px;box-shadow:var(--shadow); text-align:left;width:100%;display:flex;flex-direction:column;gap:2px;transition:transform .08s,box-shadow .15s} .insight:active{transform:scale(.98);box-shadow:var(--shadow-lg)} .insight .in-top{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px} .insight .in-top .in-ic{display:inline-flex;color:var(--brand-ink)} .insight .in-val{font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--ink);line-height:1.1} .insight .in-say{font-size:12.5px;color:var(--ink-2);line-height:1.35} .insight.full{grid-column:1 / -1} .insight .in-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block} .dot-ok{background:var(--ok)}.dot-warn{background:var(--warn)}.dot-bad{background:var(--danger)} /* Quick actions — sleek horizontal rows grouped in a card */ .qa-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:14px} .qa{display:flex;align-items:center;gap:13px;padding:14px 15px;width:100%;text-align:left;border-bottom:1px solid var(--line);transition:background .12s} .qa:last-child{border-bottom:none} .qa:active{background:var(--card-2)} .qa .qa-ic{width:38px;height:38px;border-radius:11px;background:var(--card-2);color:var(--brand-ink);display:grid;place-items:center;flex:none} .qa .qa-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .qa .qa-t{font-weight:700;font-size:15px;color:var(--ink)} .qa .qa-s{font-size:12.5px;color:var(--muted)} .qa .qa-chev{color:var(--muted);font-size:20px} .qa .pill{margin-left:auto} /* Fortnight cycle switch — segmented control on the command home */ .cyc-sw{display:flex;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:4px;gap:4px;margin-bottom:12px;box-shadow:var(--shadow)} .cyc-sw button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border-radius:10px;font-weight:700;font-size:14px;color:var(--muted);transition:background .15s,color .15s} .cyc-sw button.on{background:linear-gradient(160deg,var(--brand-bright),var(--brand-deep));color:#fff;box-shadow:0 2px 8px rgba(197,22,29,.3)} /* ---- chart toolkit ---- */ :root{ --line2:var(--line); } /* miniRow dividers were invisible */ .g-soft{ fill-opacity:.14 } .g-half{ fill-opacity:.5 } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .g-soft{ fill-opacity:.30 } } :root[data-theme="dark"] .g-soft{ fill-opacity:.30 } :root[data-theme="light"] .g-soft{ fill-opacity:.14 } .banner.ok{ background:#d6f0e0; border:1px solid #2f9e5e; border-left:5px solid var(--ok); color:#12402a } .banner.ok strong{ color:inherit } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .banner.ok{ background:#16301f; color:#c9ead6 } } :root[data-theme="dark"] .banner.ok{ background:#16301f; color:#c9ead6 } .g-rank{ display:flex; flex-direction:column } .g-rank-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; min-height:48px; padding:9px 0; background:none; border:0; border-bottom:1px solid var(--line); color:var(--ink); font:inherit } .g-rank-row:last-child{ border-bottom:0 } button.g-rank-row:active{ background:var(--card-2) } .g-rank-n{ flex:none; width:18px; font-size:12px; font-weight:800; color:var(--muted); text-align:right } .g-rank-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px } .g-rank-t{ font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .g-rank-s{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .g-rank-track{ height:4px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:3px } .g-rank-track>i{ display:block; height:100%; border-radius:3px } .g-rank-v{ flex:none; text-align:right; display:flex; flex-direction:column } .g-rank-v>b{ font-size:15px; font-weight:800 } .g-rank-v>em{ font-size:10.5px; color:var(--muted); font-style:normal } .g-split{ display:flex; height:22px; border-radius:6px; overflow:hidden; background:var(--line) } .g-split>i{ display:block } .g-split-key{ display:flex; flex-wrap:wrap; gap:10px; margin-top:7px; font-size:11.5px; color:var(--muted) } .g-split-key>span>i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px } .g-split-key b{ color:var(--ink) } .g-split-key em{ font-style:normal } .kpi{ margin-bottom:12px } .kpi-h{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px; margin-bottom:5px } .kpi-h>span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .kpi-t{ position:relative; height:13px; background:var(--line); border-radius:7px } .kpi-f{ height:100%; border-radius:7px; transition:width .3s } .kpi-tick{ position:absolute; top:-3px; bottom:-3px; width:2.5px; background:var(--ink); border-radius:2px; transform:translateX(-50%) } .kpi-pace{ position:absolute; top:-2px; bottom:-2px; border-left:2px dashed var(--muted); transform:translateX(-50%) } .g-sheet-wrap{ position:fixed; inset:0; z-index:80; display:none } .g-sheet-wrap.on{ display:block } .g-sheet-bg{ position:absolute; inset:0; background:rgba(0,0,0,.42) } .g-sheet{ position:absolute; left:0; right:0; bottom:0; max-height:82vh; overflow:auto; background:var(--card); border-radius:18px 18px 0 0; padding:18px 16px calc(18px + var(--safe-b)); box-shadow:var(--shadow-lg) } /* ---- DRILL-DOWN ------------------------------------------------------------ Every number opens the same way. Brand unchanged — this is density and storytelling, not a re-skin. */ .fg{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; text-align:left; background:none; border:0; padding:0; position:relative; font:inherit } .fg-tap{ cursor:pointer; -webkit-tap-highlight-color:transparent } .fg-tap:active{ opacity:.55 } .fg-v{ font-weight:800; letter-spacing:-.5px; line-height:1.05; font-variant-numeric:tabular-nums } .fg-l{ font-size:11.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px } .fg-s{ font-size:11.5px; color:var(--ink-2) } .fg-go{ position:absolute; top:0; right:0; color:var(--muted); opacity:.5 } .fg-row{ display:flex; gap:12px } .fg-row > .fg + .fg{ border-left:1px solid var(--line); padding-left:12px } .ds-grip{ width:38px; height:4px; border-radius:3px; background:var(--line); margin:0 auto 12px } .ds-head{ display:flex; align-items:flex-start; gap:10px; margin-bottom:4px } .ds-t{ font-size:19px; font-weight:800; letter-spacing:-.3px; line-height:1.2 } .ds-s{ font-size:13px; color:var(--muted); margin-top:2px } .ds-x{ margin-left:auto; flex:none; width:32px; height:32px; border-radius:50%; border:0; background:var(--card-2); color:var(--muted); font-size:15px; cursor:pointer } .ds-sec{ margin-top:16px } .ds-h{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:8px } .ds-h svg{ color:var(--brand-ink) } .ds-act{ border-top:1px solid var(--line); padding-top:14px } .ds-say{ margin:0 0 10px; font-size:14px; line-height:1.45; color:var(--ink) } /* ---- The money story ------------------------------------------------------ Four beats at the top of the dashboard: where we are, why, can we pay, what to do. Deliberately NOT cards-in-cards — a single surface with a tone rule down the left, so the sequence reads as one narrative instead of four competing panels. */ .story{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow); overflow:hidden;margin:0 0 14px} .story-beat{display:flex;gap:11px;padding:14px 15px 14px 13px;border-left:3px solid var(--line); border-bottom:1px solid var(--line)} .story-beat:last-child{border-bottom:none} .story-beat.st-ok{border-left-color:var(--ok)} .story-beat.st-warn{border-left-color:var(--warn)} .story-beat.st-danger{border-left-color:var(--danger)} .story-beat.st-brand{border-left-color:var(--brand)} .sb-ic{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center; background:var(--card-2);color:var(--muted);margin-top:1px} .st-ok .sb-ic{color:var(--ok-ink)} .st-warn .sb-ic{color:var(--warn-ink)} .st-danger .sb-ic{color:var(--danger)} .st-brand .sb-ic{color:var(--brand-ink)} .sb-body{min-width:0;flex:1} .sb-head{font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--ink)} .sb-say{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-top:3px} .sb-go{margin-top:9px;padding:7px 13px;font-size:13px;font-weight:600;border:1.5px solid var(--line); border-radius:10px;color:var(--ink)} .sb-go:active{background:var(--card-2)} @media (min-width:520px){ .sb-head{font-size:17px} .sb-say{font-size:14px} } /* ---- Order book ----------------------------------------------------------- A card per job. The left rule carries the state so the yard can triage the list without reading it: red = promised date gone, brand = nobody on it, green = finished. */ .ord{margin-bottom:9px;border-left:3px solid var(--line)} .ord-waiting{border-left-color:var(--brand)} .ord-doing{border-left-color:var(--warn)} .ord-done{border-left-color:var(--ok);opacity:.75} .ord-late{border-left-color:var(--danger)} .ord-top{display:flex;gap:12px;align-items:flex-start} .ord-cust{font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.25} .ord-spec{font-size:13px;color:var(--ink-2);line-height:1.45;margin-top:2px} .ord-qty{flex:none;text-align:right;line-height:1.1} .ord-qty b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em} .ord-qty em{display:block;font-size:11px;font-style:normal;color:var(--muted);margin-top:1px} .ord-meta{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0} .ord-chip{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px; background:var(--card-2);color:var(--ink-2);white-space:nowrap} .ord-chip.on{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn-ink)} .ord-chip.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok-ink)} .ord-chip.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn-ink)} .ord-chip.bad{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)} .ord .btn{margin-top:11px} .ord .btn.block{margin-top:11px} /* ---- Week switcher on the hours review ------------------------------------ Which week you are approving is the single most important fact on this screen — it decides what lands in payroll. It gets a row of its own, not a dropdown. */ .ts-weeks{display:flex;gap:6px;overflow-x:auto;margin:0 0 12px;padding-bottom:2px;-webkit-overflow-scrolling:touch} .ts-wk{flex:1 0 auto;min-width:92px;text-align:center;padding:9px 10px;border-radius:12px; border:1.5px solid var(--line);background:var(--card);line-height:1.25} .ts-wk.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--card))} .ts-wk-l{display:block;font-size:13px;font-weight:700;color:var(--ink)} .ts-wk.on .ts-wk-l{color:var(--brand-ink)} .ts-wk-d{display:block;font-size:11px;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums}