/* ===================================================================== Hospi360 front-end app shell. v1.16.0 redesign. Rewritten onto a single token system so that colour, radius, spacing and elevation have exactly one definition each. WHY THIS FILE MATTERS The interface audit found 751 inline style attributes and 144 distinct colours across the plugin, against a 16 token palette. That made dark mode impossible, theming impossible, and every new module a fresh drift. Everything below resolves from the tokens in section 1. Nothing else in the product should hard code a colour again. Class names are UNCHANGED from v1.15.0. The markup in class-hospi360-shell.php keeps working untouched. Typography follows the Ops Scorecard: mono for every number, code, tag and small caps label, sans for prose. Same stack the scorecard already ships, no new webfont, no CDN. ===================================================================== */ /* ---------------------------------------------------------- 1. TOKENS */ .h360app{ /* brand, unchanged from DESIGN.md */ --blue:#1565C0; --blueD:#0F4C81; --navy:#0D2B4E; --navy2:#102C4E; --cyan:#00ACC1; /* semantic state. One meaning per colour, never decorative. */ --green:#2E7D32; --green-bg:#E6F1E6; --green-line:#B7D8B8; --amber:#B77A08; --amber-bg:#FBF0D8; --amber-line:#EAD09A; --red:#C62828; --red-bg:#FBE6E5; --red-line:#EEB9B6; --info:#1565C0; --info-bg:#E4EEFA; --info-line:#BBD7F3; --idle-bg:#F5F8FC; --idle-fg:#46607D; /* surfaces */ --bg:#EEF2F8; --surface:#FFFFFF; --chip:#E9EEF6; --surface-3:#F5F8FC; --band:#0D2B4E; --band-2:#102C4E; --rail-bg:linear-gradient(180deg,#0D2B4E,#102C4E 60%,#0E2A4A); --side:#CDD9E8; --side-2:#8FA6C0; --on-band:#FFFFFF; --on-band-2:#B0C6DD; --on-band-3:#7E96B4; --on-band-accent:#7EB6F0; --on-band-line:rgba(255,255,255,.12); --on-band-fill:rgba(255,255,255,.08); /* ink. Every value passes WCAG AA on --surface. The old --muted was #94a3b8 at 2.6:1, which failed. */ --ink:#0D2B4E; --muted:#46607D; --ink-3:#5E7186; --line:#D8E1EC; --line-2:#C4D2E2; --accent:#1565C0; --accent-hover:#0F4C81; --accent-ink:#FFFFFF; --accent-soft:#E4EEFA; --accent-deep:#0F4C81; /* elevation. Navy tinted. A surface never stacks three. */ --sh:0 1px 2px rgba(13,43,78,.05),0 10px 26px -14px rgba(13,43,78,.16); --sh-lg:0 2px 6px rgba(13,43,78,.06),0 24px 60px -28px rgba(13,43,78,.30); --sh-active:0 6px 16px rgba(21,101,192,.35); --r-sm:8px; --r:9px; --r-md:11px; --r-lg:14px; --r-xl:16px; --r-pill:999px; --s1:4px; --s2:8px; --s3:14px; --s4:18px; --s5:24px; --s6:32px; --s7:48px; /* Reading measure for a checklist. It is read down the left edge, so stretching it across a 1200px desk put the item and its answer about 870px apart with dead space between. */ --ck-w:820px; --mono:ui-monospace,"IBM Plex Mono",SFMono-Regular,Menlo,Consolas,monospace; --tabbar-h:62px; font-family:'Inter',Arial,Helvetica,sans-serif; /* P6: the portal set no base size or line height, so unstyled text inherited whatever the host theme used. 14px/1.55 is the density the approved prototype uses; it is not the generic 16px because this is a dense operations console, not a reading surface. */ font-size:14px; line-height:1.55; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; } /* Dark mode is scoped to the portal, so it never fights the host theme in the WordPress runtime. Honours the OS by default; a host may force either mode with data-h360-theme on . */ @media (prefers-color-scheme: dark){ html:not([data-h360-theme="light"]) .h360app{ --green:#79C77F; --green-bg:#14301A; --green-line:#245A2C; --amber:#E2AC55; --amber-bg:#34260F; --amber-line:#5E4718; --red:#F08A80; --red-bg:#391916; --red-line:#632C26; --info:#63A9F0; --info-bg:#12314F; --info-line:#1E4670; --idle-bg:#173049; --idle-fg:#AFC3D7; --bg:#08182A; --surface:#102438; --chip:#173049; --surface-3:#0C1E31; --band:#05121F; --band-2:#0C1F34; --rail-bg:linear-gradient(180deg,#081D33,#0A2239 60%,#081C30); --side:#B9CCE1; --side-2:#8098B2; --ink:#E9F0F8; --muted:#AFC3D7; --ink-3:#8EA5BC; --line:#1E3A57; --line-2:#2B4E70; --accent:#63A9F0; --accent-hover:#8CC1F7; --accent-ink:#06182B; --accent-soft:#12314F; --accent-deep:#8CC1F7; --sh:0 1px 2px rgba(0,0,0,.34),0 10px 26px -16px rgba(0,0,0,.62); --sh-lg:0 2px 6px rgba(0,0,0,.4),0 24px 60px -28px rgba(0,0,0,.75); --sh-active:0 6px 16px rgba(21,101,192,.5); } } html[data-h360-theme="dark"] .h360app{ --green:#79C77F; --green-bg:#14301A; --green-line:#245A2C; --amber:#E2AC55; --amber-bg:#34260F; --amber-line:#5E4718; --red:#F08A80; --red-bg:#391916; --red-line:#632C26; --info:#63A9F0; --info-bg:#12314F; --info-line:#1E4670; --idle-bg:#173049; --idle-fg:#AFC3D7; --bg:#08182A; --surface:#102438; --chip:#173049; --surface-3:#0C1E31; --band:#05121F; --band-2:#0C1F34; --rail-bg:linear-gradient(180deg,#081D33,#0A2239 60%,#081C30); --side:#B9CCE1; --side-2:#8098B2; --ink:#E9F0F8; --muted:#AFC3D7; --ink-3:#8EA5BC; --line:#1E3A57; --line-2:#2B4E70; --accent:#63A9F0; --accent-hover:#8CC1F7; --accent-ink:#06182B; --accent-soft:#12314F; --accent-deep:#8CC1F7; --sh:0 1px 2px rgba(0,0,0,.34),0 10px 26px -16px rgba(0,0,0,.62); --sh-lg:0 2px 6px rgba(0,0,0,.4),0 24px 60px -28px rgba(0,0,0,.75); --sh-active:0 6px 16px rgba(21,101,192,.5); } .h360app *{box-sizing:border-box} /* --- P1 ACCESSIBILITY ------------------------------------------------- Keyboard focus must be visible on every interactive element. Before this only the category chip had a ring; buttons, tabs, rail links and the bottom bar had none, because their custom backgrounds suppress the browser default. The ring switches to the light accent on navy grounds so it stays visible there too. */ .h360app :focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm); } .h360-side :focus-visible,.h360-side a:focus-visible{ outline-color:var(--on-band-accent);outline-offset:1px; } .h360app :focus:not(:focus-visible){outline:none} /* Skip link, so keyboard users are not forced through the whole rail. Uses the clip technique rather than a negative offset: it occupies NO space in the layout, so if this stylesheet is ever served stale or fails to load, the link cannot displace the header the way a positioned element does. */ .h360-skip{ position:fixed;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .h360-skip:focus{ width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none; left:var(--s3);top:var(--s3);z-index:100; background:var(--surface);color:var(--accent); border:1px solid var(--accent);border-radius:var(--r); padding:10px 16px;font-size:13px;font-weight:700;text-decoration:none; box-shadow:var(--sh-lg); } .h360app .ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1; display:inline-block;white-space:nowrap;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'} .h360-scroll::-webkit-scrollbar{width:9px;height:9px} .h360-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px} .h360-scroll::-webkit-scrollbar-track{background:transparent} @keyframes h360pulse{0%{box-shadow:0 0 0 0 rgba(46,125,50,.5)}70%{box-shadow:0 0 0 7px rgba(46,125,50,0)}100%{box-shadow:0 0 0 0 rgba(46,125,50,0)}} @media (prefers-reduced-motion: reduce){ .h360app *{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* Numbers, codes, tags and small caps labels are set in mono, so data reads as data. Prose stays in Inter. */ .h360app .h360-eyebrow,.h360app .h360-navgroup,.h360app .h360-tbl th, .h360app .h360-badge,.h360app .h360-sev, .h360app .h360-kpi .sub,.h360app .h360-score .big,.h360app .h360-score .sub, .h360app .h360-sla,.h360app .h360-slabad,.h360app .h360-jobcard .jc-num, .h360app .h360-timeline .muted,.h360app .h360-compare .cc b, .h360app .h360-compare .cc span,.h360app .h360-tabbar a,.h360app .h360-tabbar button, .h360app .h360-cert-title .t,.h360app .h360-flag,.h360app .h360-mono{ font-family:var(--mono); } .h360app .h360-tbl td,.h360app .h360-kpi .val,.h360app .h360-cert-amounts td{ font-variant-numeric:tabular-nums; } /* The naira mark collides with its own stem at display weight, so it gets its own setting rather than inheriting the heading. */ .h360app .h360-ngn{font-family:'Inter',Arial,sans-serif;font-weight:500;letter-spacing:.01em;margin-right:.08em} /* ----------------------------------------------------------- 2. FRAME The shell is locked to the viewport, so the rail and the top bar never scroll away. Previously the whole document scrolled. */ .h360app{ display:flex;flex-direction:column; height:calc(100dvh - 32px);min-height:620px; border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden; } .h360-top{ height:60px;flex:none;background:var(--surface);border-bottom:1px solid var(--line); display:flex;align-items:center;gap:16px;padding:0 var(--s4);z-index:30; } .h360-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:none} .h360-iconbtn{width:38px;height:38px;border-radius:var(--r);border:none;background:var(--chip);color:var(--muted);cursor:pointer;display:grid;place-items:center} .h360-iconbtn:hover{background:var(--accent-soft);color:var(--accent)} .h360-drawerbtn{display:none} /* --- P2 TOUCH & INTERACTION ------------------------------------------- 44x44 is the minimum comfortable touch target. The icon buttons were 38x38 and the standard button had no minimum height at all. Raised only for coarse pointers, so a mouse keeps the denser desktop chrome. */ @media (pointer:coarse){ .h360-iconbtn,.h360-bell{width:44px;height:44px} .h360-btn{min-height:44px;padding-inline:16px} .h360-tab{min-height:44px} .h360-side a{min-height:44px} .h360app input,.h360app select,.h360app textarea{min-height:46px} } /* The generated H360 mark is square, so it gets a square gradient tile. A tenant's own logo is usually a wide wordmark (Limi's is 1162x219), and forcing that into a 32px square crops it to nonsense. When a real logo is present the slot goes wide and the image is contained: capped by height, free in width. */ .h360-logo{width:32px;height:32px;border-radius:var(--r);background:linear-gradient(150deg,var(--blueD),var(--blue));display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;overflow:hidden;flex:none} .h360-logo svg{width:100%;height:100%;object-fit:contain;display:block} .h360-logo.has-img{width:auto;min-width:32px;max-width:150px;background:none;border-radius:0;overflow:visible} .h360-logo.has-img img{width:auto;height:32px;max-width:150px;object-fit:contain;display:block} .h360-brand b{font-size:17px;font-weight:800;letter-spacing:-.3px;color:var(--ink)} /* Compact. The search is a utility, not the subject of the screen; at flex:1 up to 480px it read as a slab across the whole bar. */ .h360-search{flex:0 1 320px;min-width:170px;margin:0;display:flex;align-items:center;gap:8px;height:36px;background:var(--chip);border:1px solid transparent;border-radius:var(--r);padding:0 11px} .h360-search .ms{font-size:18px;color:var(--ink-3);flex:none} .h360-search:focus-within{border-color:var(--accent);background:var(--surface)} /* Scoped with .h360app so it outranks the generic form control rule in section 10, which sits later in the file at equal specificity and was giving the search field a 46px height inside a 60px bar. */ .h360app .h360-search input{border:none;background:transparent;outline:none;box-shadow:none;font-family:inherit;font-size:13px;color:var(--ink);width:100%;min-height:0;height:34px;padding:0;border-radius:0} .h360app .h360-search input::placeholder{color:var(--ink-3)} .h360app .h360-search input[type=hidden]{display:none} .h360-top-spacer{flex:1} .h360-bell{width:38px;height:38px;border-radius:var(--r);border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;position:relative;display:grid;place-items:center} .h360-bell:hover{background:var(--chip);color:var(--accent)} .h360-bell .dot{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-pill);background:var(--red);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid var(--surface);font-family:var(--mono)} .h360-divider{width:1px;height:26px;background:var(--line)} .h360-user{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid transparent;cursor:pointer;padding:4px 8px 4px 4px;border-radius:var(--r);text-decoration:none} .h360-user:hover{background:var(--chip)} .h360-ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--accent-soft);color:var(--accent-deep);flex:none} .h360-user .nm{font-size:13px;font-weight:700;color:var(--ink);text-align:left;display:block} .h360-user .rl{font-size:11.5px;color:var(--ink-3);text-align:left;display:block} .h360-body{flex:1;display:flex;min-height:0} .h360-side{ width:264px;flex:none;background:var(--rail-bg);color:var(--side); display:flex;flex-direction:column; overflow-y:auto;overflow-x:hidden;padding:var(--s3) 0 var(--s5); } .h360-side a{display:flex;align-items:center;gap:12px;padding:9px 14px;margin:1px 10px;border-radius:var(--r);cursor:pointer;color:var(--side);font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .12s,color .12s} .h360-side a:hover{background:var(--on-band-fill);color:var(--on-band)} .h360-side a.active{background:var(--blue);color:#fff;font-weight:700;box-shadow:var(--sh-active)} .h360-side a .ms{font-size:20px;flex:none} .h360-navgroup{ font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--side-2);margin:10px 10px 2px;padding:6px 8px;border-radius:var(--r-sm); } .h360-side-spacer{flex:1;min-height:var(--s3)} .h360-score{margin:var(--s3) var(--s3) 0;padding:13px;border-radius:var(--r-md);background:var(--on-band-fill)} .h360-score .t{font-size:11.5px;font-weight:700;color:var(--on-band)} .h360-score .row{display:flex;align-items:baseline;gap:8px;margin-top:3px} .h360-score .big{font-size:26px;font-weight:800;color:var(--on-band)} .h360-score .grade{font-size:12px;font-weight:700;color:#6FCF97} .h360-score .sub{font-size:11px;color:var(--side-2);margin-top:2px} .h360-side-admin{margin:var(--s2) var(--s3);padding-top:10px;border-top:1px solid var(--on-band-line)} .h360-main{flex:1;min-width:0;overflow-y:auto;background:var(--bg);padding:var(--s5) var(--s5) var(--s7)} /* ---------------------------------------------------- 3. PAGE HEADER */ .h360-eyebrow{font-size:11px;font-weight:600;color:var(--accent-deep);text-transform:uppercase;letter-spacing:.14em} .h360-h1{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:5px 0 2px;line-height:1.15} .h360-subline{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap} .h360-live{display:inline-flex;align-items:center;gap:5px;color:var(--green);font-weight:600} .h360-live .pulse{width:8px;height:8px;border-radius:50%;background:var(--green);animation:h360pulse 1.6s infinite} .h360-pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap} /* The role switch is a utility, not a primary action. It no longer sits above the page title. */ .h360-viewas{display:inline-flex;align-items:center;gap:7px} /* ------------------------------------------------------- 4. KPI CARDS */ .h360-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-bottom:var(--s3)} .h360-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 16px 14px;position:relative;overflow:hidden;box-shadow:var(--sh);transition:box-shadow .15s,transform .1s;color:inherit;text-decoration:none;display:block} .h360-kpi:hover{box-shadow:var(--sh-lg);transform:translateY(-2px)} .h360-kpi:active{transform:translateY(0)} /* A lone tile left over at the end of a row of four spans the row instead of sitting in a quarter width slot looking like a fault. */ .h360-kpis>.h360-kpi:last-child:nth-child(4n+1){grid-column:1/-1} /* The bar now means one thing: this tile wants attention. kpi() emits it only for an amber or red tile, so a breach is the only thing striped on the board instead of every tile wearing a colour. */ .h360-kpi .accent{position:absolute;left:0;top:0;bottom:0;width:4px} .h360-kpi .top{display:flex;align-items:center;justify-content:space-between;gap:8px} .h360-kpi .title{font-size:13px;color:var(--muted);font-weight:600;line-height:1.25} .h360-kpi .chip{width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--chip);color:var(--ink-3);flex:none} .h360-kpi .chip .ms{font-size:18px} .h360-kpi .vrow{display:flex;align-items:baseline;gap:7px;margin-top:9px} .h360-kpi .val{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums} .h360-kpi .delta{font-size:12.5px;font-weight:700;font-family:var(--mono)} .h360-kpi .sub{font-size:12px;color:var(--ink-3);margin-top:5px;letter-spacing:.01em;line-height:1.4} /* ------------------------------------------------- 5. PANELS / CARDS */ .h360-row{display:grid;gap:var(--s3);margin-bottom:var(--s3)} .h360-row.r-2-1{grid-template-columns:2fr 1fr} .h360-row.r-1-1{grid-template-columns:1fr 1fr} .h360-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--sh)} .h360-card h3{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--ink)} .h360-card .muted{font-size:12px;color:var(--muted)} .h360-chart{width:100%} .h360-cardhead{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap} /* --------------------------------------------------------- 6. BARS */ .h360-barlist .b{display:grid;grid-template-columns:minmax(120px,180px) 1fr 48px;gap:10px;align-items:center;margin:11px 0} .h360-barlist label{font-size:13px;font-weight:500;color:var(--muted)} .h360-barlist .track{height:8px;background:var(--chip);border-radius:var(--r-pill);overflow:hidden} .h360-barlist .fill{display:block;height:100%;background:var(--blue);border-radius:var(--r-pill)} .h360-barlist em{font-style:normal;font-weight:700;text-align:right;font-size:13px;font-family:var(--mono)} /* -------------------------------------------------------- 7. TABLES */ .h360-tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)} .h360-tbl th{background:var(--surface-3);text-align:left;font-weight:600;color:var(--ink-3);font-size:10px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap} .h360-tbl th,.h360-tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px} .h360-tbl tr:last-child td{border-bottom:none} .h360-tbl tr:hover td{background:var(--surface-3)} .h360-tblwrap{overflow-x:auto;border-radius:var(--r-lg)} /* Register filter bar. Wraps rather than scrolls, so nothing hides. */ .h360-regbar{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin-bottom:var(--s3)} .h360-regsearch{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:0 11px;height:38px;flex:1 1 260px;min-width:180px} .h360-regsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .h360-regsearch .ms{font-size:18px;color:var(--ink-3);flex:none} .h360app .h360-regsearch input{border:0;outline:none;box-shadow:none;background:transparent;font-family:inherit;font-size:13px;color:var(--ink);width:100%;min-height:0;height:36px;padding:0;border-radius:0} .h360app select.h360-regsel{width:auto;min-height:38px;height:38px;padding:0 30px 0 10px;font-size:12.5px;border-radius:var(--r);border:1px solid var(--line-2);background-color:var(--surface)} .h360-savednote{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)} .h360-savednote .ms{font-size:14px} @media(max-width:560px){.h360-regbar>.h360-btn,.h360app select.h360-regsel{flex:1 1 auto}} /* -------------------------------------------------------- 8. BADGES RAG chip: mono small caps, hairline border, and a dot in the current colour so state still reads when colour does not. */ .h360-badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:4px 9px;font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;background:var(--idle-bg);color:var(--idle-fg);border:1px solid var(--line-2);white-space:nowrap} .h360-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .h360-badge.low{background:var(--green-bg);color:var(--green);border-color:var(--green-line)} .h360-badge.medium{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)} .h360-badge.high{background:var(--red-bg);color:var(--red);border-color:var(--red-line)} .h360-badge.critical{background:var(--red);color:#fff;border-color:var(--red)} .h360-badge.dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor} .h360-flag{display:inline-flex;align-items:center;gap:5px;background:var(--red-bg);color:var(--red);border:1px solid var(--red-line);border-radius:var(--r-sm);padding:4px 9px;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase} .h360-sev{border-radius:var(--r-pill);padding:4px 10px;font-weight:600;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;display:inline-block;border:1px solid var(--line-2);background:var(--idle-bg);color:var(--idle-fg)} .h360-sev.critical{background:var(--red-bg);color:var(--red);border-color:var(--red-line)} .h360-sev.major{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)} .h360-sev.moderate{background:var(--info-bg);color:var(--info);border-color:var(--info-line)} .h360-sev.minor{background:var(--idle-bg);color:var(--idle-fg)} .h360-sev.near_miss{background:var(--green-bg);color:var(--green);border-color:var(--green-line)} .h360-slabad{color:var(--red);font-weight:700;font-size:12px} /* A missing value is a sentence, not a dash. */ .h360-none{color:var(--ink-3);font-weight:500;font-size:12.5px;font-style:normal} /* ------------------------------------------------------- 9. BUTTONS */ .h360-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r);padding:9px 14px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;transition:transform .08s,background .12s,color .12s} .h360-btn:hover{background:var(--chip);color:var(--ink)} .h360-btn:active{transform:scale(.98)} .h360-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-size:13px;padding:10px 16px} .h360-btn.primary:hover{background:var(--blueD);border-color:var(--blueD);color:#fff} .h360-btn.green{background:var(--green);border-color:var(--green);color:#fff} .h360-btn.green:hover{color:#fff;filter:brightness(1.06)} .h360-btn.red{background:var(--surface);border-color:var(--red-line);color:var(--red)} .h360-btn.red:hover{background:var(--red);color:#fff} .h360-btn .ms{font-size:17px} .h360-btn.block{width:100%;justify-content:center;padding:12px;font-size:14px} .h360-bigaction{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;font-size:16px;font-weight:700;border-radius:var(--r-lg)} .h360-bigaction .ms{font-size:25px} /* ------------------------------------------------------- 10. FORMS */ .h360-fld{display:block;font-weight:600;font-size:13px;margin:var(--s3) 0 6px;color:var(--ink)} .h360-fld .req{color:var(--red)} .h360-fld .opt{color:var(--ink-3);font-weight:400;font-size:12px} .h360app input,.h360app select,.h360app textarea{width:100%;border:1px solid var(--line-2);border-radius:var(--r);padding:11px 12px;background:var(--surface);font-family:inherit;font-size:16px;color:var(--ink);min-height:46px;transition:border-color .12s,box-shadow .12s} .h360app input:focus,.h360app select:focus,.h360app textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .h360app input::placeholder,.h360app textarea::placeholder{color:var(--ink-3)} .h360app textarea{resize:vertical;min-height:96px;line-height:1.55} .h360app select:disabled,.h360app input:disabled{background:var(--chip);color:var(--ink-3);cursor:not-allowed} .h360app input[type=checkbox],.h360app input[type=radio]{width:auto;min-height:0} .h360-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} .h360-toggles{display:flex;flex-wrap:wrap;gap:10px;margin:var(--s3) 0} .h360-toggle{display:flex;align-items:center;gap:9px;font-weight:600;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;cursor:pointer;flex:1;min-width:220px} .h360-toggle input{width:auto;accent-color:var(--red);transform:scale(1.25)} .h360-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2);align-items:end} /* A narrow chooser beside a wide free-text field. Collapses on a phone. */ .h360-inline-21{grid-template-columns:minmax(150px,1fr) 2fr;margin-bottom:var(--s3);max-width:var(--ck-w)} @media(max-width:640px){.h360-inline-21{grid-template-columns:1fr}} /* The file control is styled like everything else around it. */ .h360-filefield{display:flex;align-items:center;gap:var(--s3);border:1px dashed var(--line-2);border-radius:var(--r-md);padding:var(--s3);background:var(--surface-3);flex-wrap:wrap} /* Bare file inputs appear on 10 screens (comfort rounds, completion reports, vehicle checks, voice notes). Left alone they render as the raw OS control inside an otherwise designed surface. This styles them wherever they are, without needing markup changes on every screen. */ .h360app input[type=file]{ min-height:0;padding:7px 10px;font-size:13px;color:var(--ink-2); background:var(--surface-3);border:1px dashed var(--line-2); border-radius:var(--r-md);cursor:pointer; } .h360app input[type=file]:hover{border-color:var(--accent);background:var(--accent-soft)} .h360app input[type=file]::file-selector-button{ margin-right:12px;border:1px solid var(--line-2);background:var(--surface); color:var(--ink-2);border-radius:var(--r-sm);padding:7px 13px; font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer; } .h360app input[type=file]::file-selector-button:hover{background:var(--chip);color:var(--ink)} /* The wrapped variants keep their own presentation. Declared after, because these selectors tie on specificity with the generic rule above. */ .h360-filefield input[type=file]{width:auto;min-height:0;border:0;background:transparent;padding:0;font-size:13px} .h360-photobtn input[type=file]{position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0} /* ---- Checklist rows ------------------------------------------------ A comfort round and a cleaning job are the same piece of work: walk an area and mark each item. Both screens drew one bordered card per item with a note box and a file picker permanently open underneath, so a seven-item round was seven nested cards and fourteen controls nobody had asked for. The row is now a single line in one list, and the note and photo appear when a problem is flagged or when they are asked for. Selected states use the same soft fill, hairline and ink triple as the status chips, so they read correctly in both themes. */ .h360-cklist{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;margin:var(--s3) 0;max-width:var(--ck-w)} /* The panel holds a checklist and nothing else, so it is sized to it rather than stretched across the desk with the column stranded on its left. */ .h360-card.h360-ckcard{max-width:calc(var(--ck-w) + var(--s4)*2 + 2px)} .h360-ck+.h360-ck{border-top:1px solid var(--line)} .h360-ck-r{display:flex;align-items:center;gap:var(--s2);padding:8px var(--s3);min-height:52px} .h360-ck-i{color:var(--accent);font-size:20px;flex:0 0 auto} .h360-ck-n{flex:1 1 auto;min-width:0;font-weight:600;font-size:13.5px;line-height:1.35;color:var(--ink)} .h360-ck-n em{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-left:7px;white-space:nowrap} .h360-ck.is-flag{background:var(--red-bg)} /* Segmented control. Real radios underneath, so the keyboard, the form post and screen readers all behave exactly as they did before. */ .h360-seg{display:inline-flex;flex:0 0 auto;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--surface)} .h360-seg label{position:relative;display:flex;margin:0;cursor:pointer} .h360-seg label+label{border-left:1px solid var(--line-2)} .h360-seg span{display:flex;align-items:center;justify-content:center;padding:0 13px;height:34px;min-width:58px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:background .12s,color .12s} .h360app .h360-seg input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;padding:0;pointer-events:none} .h360-seg label:hover span{background:var(--chip);color:var(--ink)} .h360-seg input:checked+span{background:var(--chip);color:var(--ink);font-weight:700} .h360-seg input[data-kind=ok]:checked+span{background:var(--green-bg);color:var(--green);box-shadow:inset 0 0 0 1px var(--green-line)} .h360-seg input[data-kind=bad]:checked+span{background:var(--red-bg);color:var(--red);box-shadow:inset 0 0 0 1px var(--red-line)} .h360-seg input:focus-visible+span{box-shadow:inset 0 0 0 2px var(--accent)} /* The note and photo, folded away until wanted. */ .h360-ck-add{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink-3);cursor:pointer} .h360-ck-add:hover,.h360-ck.is-open .h360-ck-add,.h360-ck.is-flag .h360-ck-add{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .h360-ck-add .ms{font-size:18px} .h360-ck-x{display:none;gap:var(--s2);padding:0 var(--s3) 12px;align-items:center;flex-wrap:wrap} .h360-ck.is-flag .h360-ck-x,.h360-ck.is-open .h360-ck-x{display:flex} .h360app .h360-ck-x input{min-height:38px;padding:8px 11px;font-size:13.5px} .h360app .h360-ck-x .h360-ck-note{flex:1 1 220px} .h360app .h360-ck-x input[type=file]{flex:0 1 240px;min-height:38px;font-size:12.5px} .h360-ck-req{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);align-self:center} /* "Somebody else checks this too" - the double-check the builder created. */ .h360-ck-also{display:flex;align-items:center;gap:6px;padding:0 var(--s3) 10px;margin-top:-4px;font-size:12px;color:var(--muted)} .h360-ck-also .ms{font-size:15px;color:var(--accent)} .h360-ck.is-retired{opacity:.55} /* ---- Builder pickers ------------------------------------------------ Days of the week and icons are chosen, not typed. The icon grid shows the glyph rather than its Material Symbols name, because nobody should have to know that "local_gas_station" is the fuel pump. */ .h360-daypick{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s3)} .h360-daypick label{position:relative;display:flex;margin:0;cursor:pointer} .h360app .h360-daypick input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;pointer-events:none} .h360-daypick span{display:flex;align-items:center;justify-content:center;min-width:52px;height:38px;padding:0 12px; border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface); font-size:12.5px;font-weight:600;color:var(--muted);transition:background .12s,color .12s,border-color .12s} .h360-daypick label:hover span{border-color:var(--accent);color:var(--accent)} .h360-daypick input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .h360-daypick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px} .h360-iconpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px; max-height:200px;overflow-y:auto;padding:8px;margin:0 0 var(--s3); border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-3)} .h360-iconpick label{position:relative;display:flex;margin:0;cursor:pointer} .h360app .h360-iconpick input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;pointer-events:none} .h360-iconpick span{display:flex;align-items:center;justify-content:center;width:100%;height:44px; border:1px solid transparent;border-radius:var(--r-sm);background:var(--surface); color:var(--muted);font-size:22px;transition:background .12s,color .12s,border-color .12s} .h360-iconpick label:hover span{border-color:var(--accent);color:var(--accent)} .h360-iconpick input:checked+span{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} .h360-iconpick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px} @media(pointer:coarse){.h360-daypick span{height:44px}.h360-iconpick span{height:48px}} /* The same row, read only: the finished record of a round or a job. */ .h360-ck-n small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45} .h360-ck-b{flex:0 0 auto;display:inline-flex;align-items:center;height:26px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--chip);color:var(--ink);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em} .h360-ck-b.ok{background:var(--green-bg);color:var(--green);border-color:var(--green-line)} .h360-ck-b.bad{background:var(--red-bg);color:var(--red);border-color:var(--red-line)} .h360-ck-r form{margin:0} .h360-ck-thumb{flex:0 0 auto;display:block;line-height:0} .h360-ck-thumb img{height:40px;width:40px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)} @media(max-width:640px){ .h360-ck-r{flex-wrap:wrap} .h360-seg{flex:1 1 100%;order:3} .h360-seg label{flex:1} .h360-ck-add{order:2} } @media(pointer:coarse){ .h360-seg span{height:44px} .h360-ck-add{width:44px;height:44px} } /* A label and the control it names share one full width row, so a chip group is never a grid cell sitting beside its own label. */ .h360-fullrow{grid-column:1/-1;width:100%;min-width:0} .h360app .h360-fullrow>label,.h360app .h360-fld{display:block;font-weight:600;font-size:13px;margin:var(--s3) 0 6px;color:var(--ink)} .h360-req{color:var(--red)} .h360-muted{color:var(--ink-3);font-weight:400;font-size:12px} .h360-report-hint{color:var(--muted);font-size:13.5px;margin:0 0 var(--s3);line-height:1.55} .h360-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* chips: the group spans its column, never a grid cell beside its label */ .h360-chips{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 var(--s3);grid-column:1/-1;width:100%} .h360-chip-r input{position:absolute;opacity:0;width:1px;height:1px} .h360-chip-r span{display:inline-flex;align-items:center;gap:7px;padding:11px 17px;border-radius:var(--r-pill);border:1.5px solid var(--line-2);background:var(--surface);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:all .12s;min-height:46px} .h360-chip-r input:hover+span{border-color:var(--accent);color:var(--accent)} .h360-chip-r input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff} .h360-chip-r input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px} /* Compact variant. A room picker can carry dozens of these at once, where the 46px report-form size becomes a wall. Same component, denser. */ .h360-chip-r.sm span{padding:6px 12px;min-height:32px;font-size:13px;border-width:1px;gap:5px} .h360-chip-r.sm i{font-style:normal;font-weight:500;font-size:11.5px;opacity:.72} @media(pointer:coarse){.h360-chip-r.sm span{min-height:44px;padding:6px 14px}} .h360-photorow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 var(--s3)} .h360-photobtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1.5px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface);padding:18px 10px;font-size:13.5px;font-weight:600;color:var(--accent);cursor:pointer;min-height:92px} .h360-photobtn:hover{border-color:var(--accent);background:var(--accent-soft)} .h360-photobtn .ms{font-size:24px} .h360-photobtn.has-file{border-style:solid;border-color:var(--green);color:var(--green)} .h360-photobtn.has-file:after{content:'\2713 attached';font-size:11px;font-weight:700} .h360-switchrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 15px;margin-bottom:10px;font-size:14px;font-weight:600;cursor:pointer} .h360-switch{position:relative;display:inline-block;width:46px;height:26px;flex:none} .h360-switch input{position:absolute;opacity:0;width:1px;height:1px} .h360-switch i{position:absolute;inset:0;background:var(--line-2);border-radius:var(--r-pill);transition:.15s;cursor:pointer} .h360-switch i:before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25)} .h360-switch input:checked+i{background:var(--green)} .h360-switch input:checked+i:before{transform:translateX(20px)} /* -------------------------------------------------- 11. APPROVAL CARD */ .h360-appr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);margin-bottom:12px;box-shadow:var(--sh)} .h360-appr .head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px} .h360-appr .meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted);margin:8px 0} .h360-appr .meta b{color:var(--ink)} .h360-appr .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center} .h360-appr form{display:contents} /* ------------------------------------------------------- 12. STATES */ .h360-empty{background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-xl);padding:var(--s7) var(--s5);text-align:center;color:var(--muted)} .h360-empty .ms{font-size:44px;color:var(--ink-3)} .h360-empty h3{margin:var(--s3) 0 4px;color:var(--ink);font-size:17px} .h360-empty p{margin:0 auto var(--s4);font-size:13.5px;max-width:46ch} .h360-notice{background:var(--green-bg);border:1px solid var(--green-line);color:var(--green);border-radius:var(--r-md);padding:12px 15px;font-size:13.5px;font-weight:600;margin-bottom:var(--s4);display:flex;align-items:center;gap:9px} .h360-notice.info{background:var(--info-bg);border-color:var(--info-line);color:var(--info)} .h360-notice.bad{background:var(--red-bg);border-color:var(--red-line);color:var(--red)} .h360-notice .ms{font-size:20px} .h360-banner{background:var(--info-bg);border:1px solid var(--info-line);color:var(--ink);border-radius:var(--r-md);padding:11px 15px;font-size:13px;margin-bottom:var(--s3);display:flex;align-items:center;gap:9px;flex-wrap:wrap} /* No skeleton component ships here on purpose. Every screen is rendered by PHP and arrives complete, so there is no client-side loading phase for a placeholder to fill. A skeleton nobody can use is dead weight, and the critique found the previous one applied to zero screens. */ /* ------------------------------------------------- 13. DETAIL VIEWS */ .h360-wohead{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4)} .h360-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:var(--s5);overflow-x:auto;scrollbar-width:none} .h360-tabs::-webkit-scrollbar{display:none} .h360-tab{border:none;background:transparent;padding:11px 15px;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap} .h360-tab:hover{color:var(--accent)} .h360-tab.active{color:var(--accent);border-bottom-color:var(--accent)} .h360-tabpanel{display:none} .h360-tabpanel.active{display:block;animation:h360fade .18s ease} @keyframes h360fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .h360-inforow{display:flex;justify-content:space-between;gap:var(--s3);padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px} .h360-inforow:last-child{border-bottom:none} .h360-inforow span{color:var(--muted)} .h360-inforow b{color:var(--ink);text-align:right} .h360-timeline{list-style:none;margin:6px 0 0;padding:0} .h360-timeline li{position:relative;padding:0 0 var(--s4) 22px;border-left:2px solid var(--line)} .h360-timeline li:last-child{border-left-color:transparent;padding-bottom:0} .h360-timeline .dot{position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--blue);border:2px solid var(--surface);box-shadow:0 0 0 2px var(--line)} .h360-timeline .muted{color:var(--ink-3);font-size:12.5px} .h360-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s3)} .h360-gallery figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh)} .h360-gallery img{width:100%;height:150px;object-fit:cover;display:block;background:var(--chip)} /* P3: every image is fluid and reserves its space, so late-loading photos cannot push content around (CLS). */ .h360app img{max-width:100%;height:auto} .h360-photo{aspect-ratio:4/3;width:100%;object-fit:cover;background:var(--chip);border-radius:var(--r-md)} .h360-gallery figcaption{padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--muted)} .h360-kv{width:100%;border-collapse:collapse} .h360-kv td{padding:6px 4px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top} .h360-kv td:first-child{color:var(--muted);width:44%} .h360-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .h360-compare .cc{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;text-align:center} .h360-compare .cc span{display:block;font-size:10px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.06em} .h360-compare .cc b{display:block;font-size:20px;font-weight:800;color:var(--ink);margin:4px 0 2px} .h360-compare .cc i{font-style:normal;font-size:11px;color:var(--ink-3)} .h360-recon{margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-3)} .h360-recon-hint{font-size:12.5px;color:var(--ink-3);margin:4px 0 10px} .h360-recon input[type=number]{padding:7px;font-size:14px;min-height:0} .h360-recon table{font-size:13px} .h360-cleanrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:8px 0} .h360-cleanrow:last-child{border-bottom:none} .h360-rate{display:flex;gap:6px;align-items:center} /* --------------------------------- 14. TECHNICIAN AND DRIVER CARDS */ .h360-jobcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s4);margin-bottom:12px;max-width:640px;box-shadow:var(--sh)} .h360-jobcard .jc-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s2)} .h360-sla{font-size:12.5px;font-weight:700;color:var(--red)} .h360-sla.over{color:var(--red);text-decoration:underline} .h360-jobcard .jc-title{font-size:18px;font-weight:800;color:var(--ink);line-height:1.25} .h360-jobcard .jc-loc{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:13.5px;margin:6px 0 var(--s3)} .h360-jobcard .jc-loc .ms{font-size:17px} .h360-jobcard .jc-num{margin-left:auto;color:var(--ink-3);font-size:11.5px} .h360-jobcard .jc-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px} .h360-jobcard .jc-actions .h360-btn{justify-content:center;min-height:50px;font-size:14px} .h360-jobcard .jc-done{background:var(--green);border-color:var(--green);color:#fff;justify-content:center} .h360-jobcard .jc-open{width:100%;justify-content:center} .jc-catic{width:34px;height:34px;border-radius:10px;background:var(--info-bg);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .jc-catic .ms{font-size:19px} .jc-stepper{display:flex;gap:8px;margin-bottom:10px} .jc-stepper form{flex:1 1 0;margin:0} .jc-stepper .jc-step,.jc-stepper form .jc-step{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-weight:700;font-size:12.5px;color:var(--muted);cursor:pointer;font-family:inherit} .jc-stepper .jc-step .ms{font-size:17px} .jc-stepper .jc-step.on{border-color:var(--blue);background:var(--blue);color:#fff} .jc-stepper a.jc-step{text-decoration:none;justify-content:center} /* ------------------------------------------------ 15. BOTTOM APP BAR Present on every screen at phone width, so the primary destinations never leave the thumb. Hidden above the breakpoint. */ .h360-tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface); border-top:1px solid var(--line);display:none;grid-auto-flow:column;grid-auto-columns:1fr; padding:5px 4px calc(5px + env(safe-area-inset-bottom)); box-shadow:0 -6px 20px -12px rgba(13,43,78,.3); } .h360-tabbar a,.h360-tabbar button{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; padding:6px 4px;border-radius:var(--r);min-height:52px;border:0;background:transparent; font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-3);cursor:pointer; text-decoration:none;text-align:center;line-height:1.2; } .h360-tabbar a .ms,.h360-tabbar button .ms{font-size:23px} .h360-tabbar a.active,.h360-tabbar button.active{color:var(--accent);background:var(--accent-soft)} /* --------------------------------------------------- 16. RESPONSIVE One ladder, three breakpoints. No overlapping redefinitions. */ .h360-backdrop{display:none} @media(max-width:1100px){ .h360-kpis{grid-template-columns:repeat(2,1fr)} .h360-row.r-2-1,.h360-row.r-1-1{grid-template-columns:1fr} .h360-compare{grid-template-columns:1fr} } @media(max-width:860px){ .h360app{height:auto;min-height:0;border:0;border-radius:0} .h360-body{display:block} .h360-side{ position:fixed;left:0;top:0;bottom:0;width:264px;z-index:80; transform:translateX(-100%);transition:transform .2s ease;padding-top:var(--s4); } .h360app.drawer-open .h360-side{transform:translateX(0)} .h360app.drawer-open .h360-backdrop{display:block;position:fixed;inset:0;background:rgba(13,43,78,.5);z-index:70} .h360-search{display:none} .h360-main{padding:var(--s4) var(--s3) calc(var(--tabbar-h) + var(--s5))} .h360-user .nm,.h360-user .rl{display:none} .h360-grid2{grid-template-columns:1fr} .h360-tabbar{display:grid} .h360-drawerbtn{display:grid} .h360-pagehead .h360-h1{font-size:22px} .h360-tbl{min-width:560px} } @media(max-width:560px){ .h360-kpis{grid-template-columns:1fr} .h360-photorow{grid-template-columns:1fr} .h360-jobcard .jc-actions{grid-template-columns:1fr} .h360-toggle{min-width:100%} } /* ------------------------------------- 17. PAYMENT CERTIFICATE (print) */ .h360-cert-actions{display:flex;gap:8px;justify-content:flex-end;margin-bottom:var(--s3)} .h360-cert{background:#fff;color:#0D2B4E;border:1px solid var(--line);border-radius:var(--r-lg);max-width:820px;margin:0 auto;padding:40px 44px;box-shadow:var(--sh)} .h360-cert-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid var(--blue);padding-bottom:18px;margin-bottom:22px} .h360-cert-logo{max-height:54px;width:auto} .h360-cert-logomark{width:48px;height:48px;border-radius:11px;background:linear-gradient(150deg,var(--blueD),var(--blue));display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px} .h360-cert-co{font-size:17px;font-weight:800;color:var(--navy);margin-top:8px} .h360-cert-title{text-align:right} .h360-cert-title .t{font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--blue);text-transform:uppercase} .h360-cert-title .n{font-size:13px;color:#46607D;margin-top:4px} .h360-cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-bottom:18px} .h360-cert-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #EEF2F7;font-size:13.5px} .h360-cert-row span{color:#46607D} .h360-cert-desc{margin:6px 0 18px} .h360-cert-desc span{font-size:11px;color:#46607D;text-transform:uppercase;letter-spacing:.06em;font-weight:700} .h360-cert-desc p{margin:6px 0 0;font-size:14px;line-height:1.55} .h360-cert-amounts{width:100%;border-collapse:collapse;margin-bottom:26px} .h360-cert-amounts td{padding:10px 0;border-bottom:1px solid #EEF2F7;font-size:14px} .h360-cert-amounts td:last-child{text-align:right;font-weight:600} .h360-cert-amounts tr.total td{font-size:18px;font-weight:800;color:var(--navy);border-bottom:none;border-top:2px solid var(--navy);padding-top:12px} .h360-cert-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:30px 0 18px} .h360-cert-sign span{font-size:12px;color:#46607D} .h360-cert-sign .line{height:1px;background:#9aa4b2;margin-top:40px} .h360-cert-foot{font-size:11.5px;color:#46607D;border-top:1px solid var(--line);padding-top:12px} /* --------------------------------------------- 18. QR LABEL SHEETS */ .h360-qrsheet{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:#fff;padding:16px;border-radius:var(--r-md)} .h360-qrlabel{border:2px solid #0D2B4E;border-radius:10px;padding:12px;display:flex;gap:12px;align-items:center;page-break-inside:avoid;break-inside:avoid;background:#fff} .h360-qrlabel.patient{border-color:#1565C0} .h360-qrlabel .qr{width:96px;height:96px;flex:0 0 96px} .h360-qrlabel .qr svg{width:100%;height:100%} .h360-qrlabel .lbl{display:flex;flex-direction:column;gap:2px;font-size:12px;color:#46607D} .h360-qrlabel .lbl b{font-size:14px;color:#0D2B4E} .h360-qrlabel .lbl em{font-style:normal;color:#1565C0;font-weight:600} .h360-qr-pick{display:flex;gap:10px;flex-wrap:wrap;align-items:center} @media(max-width:900px){.h360-qrsheet{grid-template-columns:1fr 1fr}} @media print{ body * { visibility: hidden !important; } .h360-cert, .h360-cert * { visibility: visible !important; } .h360-cert{position:absolute;left:0;top:0;border:none;max-width:100%;border-radius:0;box-shadow:none} .h360-qrsheet, .h360-qrsheet * { visibility: visible !important; } .h360-qrsheet{position:absolute;left:0;top:0;width:100%;padding:0;border-radius:0} .h360-boardpack, .h360-boardpack * { visibility: visible !important; } .h360-boardpack{position:absolute;left:0;top:0;width:100%;padding:0;border-radius:0;box-shadow:none;border:none} .h360-cert-actions,.h360-top,.h360-brand,.h360-side,.h360-backdrop,.h360-tabbar{display:none !important} } .h360-boardpack{background:#fff;color:#0D2B4E;border:1px solid var(--line);border-radius:var(--r-lg);max-width:860px;margin:0 auto;padding:34px 40px;box-shadow:var(--sh)} .h360-bp-sec{padding:16px 0;border-bottom:1px solid #EEF2F7} .h360-bp-sec:last-of-type{border-bottom:0} .h360-bp-sec h4{margin:0 0 6px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);font-family:var(--mono,ui-monospace,monospace)} .h360-bp-sec p{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:#22456B} .h360-bp-nums{display:flex;gap:28px;flex-wrap:wrap;margin-top:8px} .h360-bp-nums .v{font-size:23px;font-weight:800;font-family:var(--mono,ui-monospace,monospace);letter-spacing:-.02em} .h360-bp-nums .l{font-size:11px;color:#5E7186;text-transform:uppercase;letter-spacing:.04em;margin-top:2px} .h360-bp-tbl{width:100%;border-collapse:collapse;margin-top:12px} .h360-bp-tbl th{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5E7186;text-align:left;padding:7px 8px;border-bottom:1px solid #EEF2F7;font-weight:600} .h360-bp-tbl td{padding:8px;border-bottom:1px solid #F2F5F9;font-size:13px} .h360-bp-tbl td.num{font-family:var(--mono,ui-monospace,monospace);font-variant-numeric:tabular-nums} .h360-bp-bar{height:8px;border-radius:6px;background:#EEF3F9;overflow:hidden} .h360-bp-bar i{display:block;height:100%;background:linear-gradient(90deg,#1565C0,#3A82D8);border-radius:6px} .h360-bp-note{margin-top:10px;font-size:12px;color:#5E7186;font-style:italic} .h360-bp-foot{margin-top:18px;font-size:11px;color:#8497AC} .h360-rchips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px;flex:1 1 100%} .h360-rchip{font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#46607D;cursor:pointer} .h360-rchip:hover{border-color:#1565C0;color:#1565C0} @media(max-width:860px){ .h360-appr .actions form{flex-wrap:wrap} .h360-appr .actions input[name=reason]{width:100%!important;min-width:0!important;flex:1 1 100%!important} .h360-appr .actions .h360-btn{flex:1 1 auto;justify-content:center} } /* --------------------------------------- 19. BACK OFFICE INSIDE SHELL */ .h360app .h360-form label{display:block;font-weight:600;font-size:13px;margin:10px 0 6px;color:var(--ink)} .h360app .h360-form button.button-primary{background:var(--blue);color:#fff;border:none;border-radius:var(--r);padding:11px 18px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;margin-top:10px} .h360app .h360-form button.button-primary:hover{background:var(--blueD)} .h360app details summary{list-style:none;cursor:pointer;user-select:none} .h360app details summary::-webkit-details-marker{display:none} .h360app details summary::marker{content:''} .h360app details[open] summary{margin-bottom:4px} .h360app details>summary.h360-btn{width:auto;justify-content:center} @media(max-width:860px){.h360app details>summary.h360-btn{width:100%}} /* ===================== ADMIN CONSOLE (Taka Square Ops Console) ===================== Ported verbatim from docs/admin-console-prototype.html, scoped under .tscon so it is fully isolated from the .h360-* hospital portal styles. Rendered by console_render() only for a console operator on a console-mode install. */ .tscon{ --ts-ink:#141B2E; --ts-ink-2:#33405C; --ts-muted:#697691; --ts-faint:#95A0B8; --ts-bg:#EDEEF4; --ts-surface:#FFFFFF; --ts-surface-2:#F6F7FB; --ts-panel:#FBFBFE; --ts-line:#DFE2EC; --ts-line-2:#EAECF3; --ts-accent:#6D4AB8; --ts-accent-2:#8A63D6; --ts-accent-soft:#EDE7F8; --ts-accent-line:#D8CBF0; --ts-good:#1E874B; --ts-good-soft:#E4F2E9; --ts-good-line:#BCE0C9; --ts-amber:#B9770B; --ts-amber-soft:#F8EED8; --ts-amber-line:#EAD3A0; --ts-red:#C0392B; --ts-red-soft:#F8E2DF; --ts-red-line:#EEC3BD; --ts-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --ts-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --ts-sh:0 1px 2px rgba(20,27,46,.05),0 10px 26px -18px rgba(20,27,46,.22); --ts-r:13px; display:flex;min-height:100dvh;background:var(--ts-bg);color:var(--ts-ink); font-family:var(--ts-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased; } @media (prefers-color-scheme:dark){.tscon{ --ts-ink:#EBEEF7; --ts-ink-2:#C4CBDD; --ts-muted:#8D97B0; --ts-faint:#697291; --ts-bg:#0A0D17; --ts-surface:#141A29; --ts-surface-2:#1A2133; --ts-panel:#161C2C; --ts-line:#28304a; --ts-line-2:#212840; --ts-accent:#9E7BE6; --ts-accent-2:#B292EE; --ts-accent-soft:#231C39; --ts-accent-line:#3A2F5A; --ts-good:#4FC584; --ts-good-soft:#12321F; --ts-good-line:#215538; --ts-amber:#E0A94A; --ts-amber-soft:#33280F; --ts-amber-line:#4E3D18; --ts-red:#EC7A6E; --ts-red-soft:#331A18; --ts-red-line:#57312C; --ts-sh:0 1px 2px rgba(0,0,0,.4),0 14px 34px -20px rgba(0,0,0,.65); }} .tscon *{box-sizing:border-box} .tscon .mono{font-family:var(--ts-mono)} .tscon .tnum{font-variant-numeric:tabular-nums} .tscon button{font-family:inherit} /* sidebar */ .tscon .ts-side{width:236px;flex:0 0 auto;background:linear-gradient(180deg,#1B1330,#130E22);color:#D9D2EC;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh} .tscon .ts-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px} .tscon .ts-brand .mk{width:32px;height:32px;border-radius:9px;background:linear-gradient(150deg,#8A63D6,#5B3AA6);display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;box-shadow:0 3px 10px rgba(0,0,0,.4)} .tscon .ts-brand .bn{font-weight:700;font-size:14.5px;letter-spacing:-.01em;color:#fff;line-height:1.1} .tscon .ts-brand .bs{font-family:var(--ts-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#9D8FC4} .tscon .ts-nav{padding:8px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto} .tscon .ts-nlabel{font-family:var(--ts-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E71A6;padding:12px 10px 5px} .tscon .ts-nitem{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:#CFC7E4;cursor:pointer;font-size:13.4px;font-weight:500;border:1px solid transparent;text-align:left;background:none;width:100%;text-decoration:none} .tscon .ts-nitem .ms{font-size:18px;flex:0 0 auto;opacity:.85} .tscon .ts-nitem .ct{margin-left:auto;font-family:var(--ts-mono);font-size:10px;background:rgba(255,255,255,.09);padding:1px 7px;border-radius:999px;color:#E7E1F5} .tscon .ts-nitem:hover{background:rgba(255,255,255,.06);color:#fff} .tscon .ts-nitem.active{background:linear-gradient(90deg,rgba(138,99,214,.32),rgba(138,99,214,.12));color:#fff;border-color:rgba(138,99,214,.5)} .tscon .ts-nitem.alert .ct{background:var(--ts-red);color:#fff} .tscon .ts-who{margin-top:auto;padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none} .tscon .ts-who .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(140deg,#8A63D6,#4C7CE0);display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px} .tscon .ts-who .nm{font-size:12.5px;font-weight:600;color:#fff;line-height:1.15} .tscon .ts-who .rl{font-family:var(--ts-mono);font-size:9.5px;color:#9D8FC4;text-transform:uppercase;letter-spacing:.08em} /* main */ .tscon .ts-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column} .tscon .ts-top{display:flex;align-items:center;gap:16px;padding:13px 26px;border-bottom:1px solid var(--ts-line);background:var(--ts-surface);position:sticky;top:0;z-index:20} .tscon .ts-crumb{font-family:var(--ts-mono);font-size:11.5px;color:var(--ts-muted);letter-spacing:.02em} .tscon .ts-crumb b{color:var(--ts-ink);font-weight:600} .tscon .ts-search{margin-left:auto;flex:0 1 300px;display:flex;align-items:center;gap:8px;background:var(--ts-surface-2);border:1px solid var(--ts-line);border-radius:9px;padding:7px 11px;color:var(--ts-muted);font-size:13px} .tscon .ts-search input{border:0;background:none;outline:none;color:var(--ts-ink);font-family:inherit;font-size:13px;width:100%} .tscon .ts-content{padding:22px 26px 60px;flex:1 1 auto} @media(max-width:900px){.tscon .ts-side{display:none}.tscon .ts-content{padding:18px 16px 50px}.tscon .ts-top{padding:12px 16px}} .tscon h1.pt{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0} .tscon .psub{color:var(--ts-muted);font-size:13.5px;margin:3px 0 0} .tscon .phead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px} .tscon .btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:9px 14px;border-radius:9px;border:1px solid var(--ts-line);background:var(--ts-surface);color:var(--ts-ink);cursor:pointer;text-decoration:none} .tscon .btn:hover{border-color:var(--ts-accent-line)} .tscon .btn.pri{background:var(--ts-accent);border-color:var(--ts-accent);color:#fff} .tscon .btn.pri:hover{background:var(--ts-accent-2)} .tscon .btn.sm{padding:6px 10px;font-size:12px} .tscon .btn.danger{color:var(--ts-red);border-color:var(--ts-red-line);background:var(--ts-red-soft)} .tscon .btn .ms{font-size:16px} .tscon .kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px} .tscon .kpi{background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:12px;padding:13px 15px;box-shadow:var(--ts-sh);position:relative;overflow:hidden} .tscon .kpi .k{font-family:var(--ts-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ts-muted)} .tscon .kpi .v{font-family:var(--ts-mono);font-weight:600;font-size:27px;letter-spacing:-.02em;margin-top:4px} .tscon .kpi .d{font-size:11.5px;color:var(--ts-muted);margin-top:2px} .tscon .kpi.warn::before,.tscon .kpi.bad::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px} .tscon .kpi.warn::before{background:var(--ts-amber)} .tscon .kpi.bad::before{background:var(--ts-red)} @media(max-width:1000px){.tscon .kpis{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.tscon .kpis{grid-template-columns:repeat(2,1fr)}} .tscon .card{background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:var(--ts-r);box-shadow:var(--ts-sh)} .tscon .card .ch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--ts-line-2)} .tscon .card .ch h3{margin:0;font-size:14.5px;font-weight:700} .tscon .card .ch .hint{font-family:var(--ts-mono);font-size:11px;color:var(--ts-muted)} .tscon table{width:100%;border-collapse:collapse} .tscon th{font-family:var(--ts-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ts-muted);text-align:left;padding:11px 14px;border-bottom:1px solid var(--ts-line-2);font-weight:500} .tscon td{padding:12px 14px;border-bottom:1px solid var(--ts-line-2);font-size:13.2px;vertical-align:middle} .tscon tr:last-child td{border-bottom:0} .tscon tbody tr.rowlink{cursor:pointer} .tscon tbody tr.rowlink:hover{background:var(--ts-surface-2)} .tscon .org{font-weight:600} .tscon .dom{font-family:var(--ts-mono);font-size:11px;color:var(--ts-muted)} .tscon .verpill{font-family:var(--ts-mono);font-size:11px;padding:2px 8px;border-radius:6px;background:var(--ts-surface-2);border:1px solid var(--ts-line)} .tscon .verpill.drift{background:var(--ts-amber-soft);border-color:var(--ts-amber-line);color:var(--ts-amber)} .tscon .verpill.old{background:var(--ts-red-soft);border-color:var(--ts-red-line);color:var(--ts-red)} .tscon .health{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500} .tscon .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto} .tscon .dot.g{background:var(--ts-good);box-shadow:0 0 0 3px var(--ts-good-soft)} .tscon .dot.a{background:var(--ts-amber);box-shadow:0 0 0 3px var(--ts-amber-soft)} .tscon .dot.r{background:var(--ts-red);box-shadow:0 0 0 3px var(--ts-red-soft)} .tscon .lic{font-family:var(--ts-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:6px} .tscon .lic.active{background:var(--ts-good-soft);color:var(--ts-good)} .tscon .lic.due{background:var(--ts-amber-soft);color:var(--ts-amber)} .tscon .lic.lapsing,.tscon .lic.lapsed,.tscon .lic.revoked,.tscon .lic.expired{background:var(--ts-red-soft);color:var(--ts-red)} .tscon .spark{display:block} .tscon .grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:16px} @media(max-width:860px){.tscon .grid2{grid-template-columns:1fr}} .tscon .field{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--ts-line-2);font-size:13px} .tscon .field:last-child{border-bottom:0} .tscon .field .fl{color:var(--ts-muted)} .tscon .field .fv{font-weight:500;text-align:right} .tscon .field .fv.mono{font-family:var(--ts-mono);font-size:12px} .tscon .modrow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--ts-line-2)} .tscon .modrow:last-child{border-bottom:0} .tscon .modname{font-size:13px;font-weight:500} .tscon .modtag{font-family:var(--ts-mono);font-size:10px;color:var(--ts-faint)} .tscon .toggle{width:38px;height:22px;border-radius:999px;background:var(--ts-line);position:relative;flex:0 0 auto;border:0;display:inline-block} .tscon .toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)} .tscon .toggle.on{background:var(--ts-accent)} .tscon .toggle.on::after{transform:translateX(16px)} .tscon .toggle.pilot{background:var(--ts-amber)} .tscon .tl{position:relative;padding-left:20px} .tscon .tl::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--ts-line-2)} .tscon .tlrow{position:relative;padding:9px 0 9px 4px;font-size:13px} .tscon .tlrow::before{content:"";position:absolute;left:-19px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--ts-accent);box-shadow:0 0 0 3px var(--ts-surface)} .tscon .tlrow.g::before{background:var(--ts-good)} .tscon .tlrow.a::before{background:var(--ts-amber)} .tscon .tlrow.r::before{background:var(--ts-red)} .tscon .tlrow .tt{font-family:var(--ts-mono);font-size:10.5px;color:var(--ts-faint)} .tscon .audit-row{display:grid;grid-template-columns:160px 1fr auto;gap:14px;padding:11px 0;border-bottom:1px solid var(--ts-line-2);font-size:13px;align-items:center} .tscon .audit-row:last-child{border-bottom:0} .tscon .audit-row .who{font-weight:600} .tscon .audit-row .act .em{color:var(--ts-accent);font-weight:600} .tscon .audit-row .stamp{font-family:var(--ts-mono);font-size:10.5px;color:var(--ts-faint);text-align:right;white-space:nowrap} .tscon .steps{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap} .tscon .step{display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:9px;border:1px solid var(--ts-line);background:var(--ts-surface);font-size:12.5px;color:var(--ts-muted)} .tscon .step .n{width:20px;height:20px;border-radius:50%;background:var(--ts-line);color:var(--ts-surface);display:grid;place-items:center;font-family:var(--ts-mono);font-size:11px;font-weight:600} .tscon .step.done{border-color:var(--ts-good-line);background:var(--ts-good-soft);color:var(--ts-good)} .tscon .step.done .n{background:var(--ts-good);color:#fff} .tscon .step.now{border-color:var(--ts-accent-line);background:var(--ts-accent-soft);color:var(--ts-accent);font-weight:600} .tscon .step.now .n{background:var(--ts-accent);color:#fff} .tscon label.fld{display:block;margin-bottom:14px} .tscon label.fld .lb{font-size:12.5px;font-weight:600;color:var(--ts-ink-2);margin-bottom:5px;display:block} .tscon label.fld input,.tscon label.fld select,.tscon label.fld textarea{width:100%;padding:10px 12px;border:1px solid var(--ts-line);border-radius:9px;background:var(--ts-surface-2);color:var(--ts-ink);font-family:inherit;font-size:13.5px} .tscon .install{background:#0E1220;color:#CFE0FF;border-radius:10px;padding:14px 16px;font-family:var(--ts-mono);font-size:12px;line-height:1.7;overflow-x:auto;border:1px solid #23304d;white-space:pre-wrap;word-break:break-all} .tscon .install .c{color:#6DE39A} .tscon .install .k2{color:#E0A94A} .tscon .consent{display:flex;gap:11px;align-items:flex-start;background:var(--ts-amber-soft);border:1px solid var(--ts-amber-line);border-radius:10px;padding:13px 15px;font-size:12.8px;color:var(--ts-ink-2);margin:6px 0 16px} .tscon .imp-launch{max-width:560px} .tscon .note{font-size:12px;color:var(--ts-faint);margin-top:10px;font-family:var(--ts-mono)} .tscon .pilltag{font-family:var(--ts-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:6px;background:var(--ts-accent-soft);color:var(--ts-accent);border:1px solid var(--ts-accent-line)} .tscon .emptybox{text-align:center;padding:48px 20px;color:var(--ts-muted)} .tscon .emptybox .ms{font-size:34px;color:var(--ts-faint)} .tscon .phase-band{display:flex;gap:11px;align-items:flex-start;background:var(--ts-accent-soft);border:1px solid var(--ts-accent-line);border-radius:10px;padding:13px 15px;font-size:13px;color:var(--ts-ink-2)}