/* ============================================= PROPERTY VALUATION TOOL v3 - Mobile UX ============================================= */ /* ── Report fonts (bundled locally so PDFs look identical on every device, online or offline): Inter for body, Montserrat for headlines. ── */ @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-latin-700-normal.woff2') format('woff2'); } @font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/montserrat-latin-600-normal.woff2') format('woff2'); } @font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/montserrat-latin-700-normal.woff2') format('woff2'); } * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } :root { --primary: #1a3c5e; --primary2: #2563a8; --sel: #234c74; /* selected chips / top bar — the navy, a little lighter (v363) */ --sel-text: #d6e1f6; /* pale text on --sel */ --accent: #e8a838; --green: #22c55e; --red: #ef4444; --amber: #f59e0b; --bg: #cfdbe7; --card: #ffffff; --cardface: #eef3f8; /* card surface — faint grey so cards are not stark white */ --text: #1e2a3a; --muted: #6b7280; --border: #dde4ed; --radius: 12px; /* Subtle property-themed doodle background (self-contained SVG tile) */ --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cg fill='none' stroke='%231a3c5e' stroke-opacity='.12' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(28 26) rotate(-8)' d='M-7 6 0 0 7 6 M-5 5 v8 h10 v-8'/%3E%3Cg transform='translate(96 40) rotate(14)'%3E%3Ccircle cx='0' cy='0' r='2.6'/%3E%3Cpath d='M2.6 0 h9 M8 0 v3 M11.6 0 v2.2'/%3E%3C/g%3E%3Cg transform='translate(170 24) rotate(-5)'%3E%3Cpath d='M0 -6 c-3.2 0 -5.4 2.4 -5.4 5.2 0 4.2 5.4 9 5.4 9 s5.4 -4.8 5.4 -9 C5.4 -3.6 3.2 -6 0 -6 z'/%3E%3Ccircle cx='0' cy='-0.8' r='1.7'/%3E%3C/g%3E%3Cg transform='translate(248 38) rotate(9)'%3E%3Crect x='-8' y='-2.5' width='16' height='5' rx='1'/%3E%3Cpath d='M-4 -2.5 v2 M0 -2.5 v3 M4 -2.5 v2'/%3E%3C/g%3E%3Cg transform='translate(310 78) rotate(-12)'%3E%3Crect x='-7' y='-5.5' width='14' height='11'/%3E%3Cpath d='M-7 0 h6 M-1 0 v5.5 M3 5.5 a4 4 0 0 1 4 -4'/%3E%3C/g%3E%3Cg transform='translate(40 96) rotate(6)'%3E%3Crect x='-5' y='-7' width='10' height='14' rx='1'/%3E%3Crect x='-2' y='-8' width='4' height='2' rx='0.5'/%3E%3Cpath d='M-3 -3 h6 M-3 0 h6 M-3 3 h4'/%3E%3C/g%3E%3Cg transform='translate(120 108) rotate(-10)'%3E%3Cpath d='M0 12 v-5'/%3E%3Ccircle cx='0' cy='2' r='5'/%3E%3C/g%3E%3Cg transform='translate(196 92)'%3E%3Ccircle cx='-2' cy='-2' r='4.2'/%3E%3Cpath d='M1 1 l5 5'/%3E%3C/g%3E%3Cg transform='translate(268 112) rotate(18)'%3E%3Cpath d='M-7 7 l1 -4 9 -9 3 3 -9 9 -4 1 z M2 -5 l3 3'/%3E%3C/g%3E%3Cg transform='translate(326 160) rotate(-6)'%3E%3Cpath d='M0 -5 v-2 M0 -5 l-4 11 M0 -5 l4 11'/%3E%3Ccircle cx='0' cy='-6' r='1.2'/%3E%3C/g%3E%3Cg transform='translate(28 168) rotate(-14)'%3E%3Crect x='-5' y='-5' width='10' height='10'/%3E%3Cpath d='M0 -5 v10 M-5 0 h10'/%3E%3C/g%3E%3Cg transform='translate(104 178) rotate(8)'%3E%3Cpath d='M-6 6 h4 v-4 h4 v-4 h4'/%3E%3C/g%3E%3Cg transform='translate(180 168) rotate(-4)'%3E%3Ccircle cx='0' cy='0' r='4.5'/%3E%3Ccircle cx='0' cy='0' r='1.2'/%3E%3Cpath d='M4.5 0 h4 v2.6'/%3E%3C/g%3E%3Cg transform='translate(256 180) rotate(5)'%3E%3Crect x='-4' y='-6.5' width='8' height='13' rx='0.5'/%3E%3Ccircle cx='2' cy='0.5' r='0.7'/%3E%3C/g%3E%3Cg transform='translate(60 238) rotate(10)'%3E%3Cpath d='M-8 5 0 -1 8 5'/%3E%3C/g%3E%3Cg transform='translate(140 246) rotate(-7)'%3E%3Cpath d='M-7 6 0 0 7 6 M-5 5 v7 h10 v-7 M-1 12 v-4 h2 v4'/%3E%3C/g%3E%3Cg transform='translate(216 240) rotate(12)'%3E%3Ccircle cx='0' cy='0' r='2.6'/%3E%3Cpath d='M2.6 0 h8 M7 0 v2.6 M10.6 0 v2'/%3E%3C/g%3E%3Cg transform='translate(292 250) rotate(-9)'%3E%3Crect x='-7' y='-5' width='14' height='10'/%3E%3Cpath d='M-7 -1 h5 M-2 -1 v6 M2 5 a3.5 3.5 0 0 1 3.5 -3.5'/%3E%3C/g%3E%3Cg transform='translate(36 306) rotate(4)'%3E%3Ccircle cx='-2' cy='-2' r='4'/%3E%3Cpath d='M1 1 l4.5 4.5'/%3E%3C/g%3E%3Cg transform='translate(112 312) rotate(-11)'%3E%3Cpath d='M0 -6 c-3 0 -5 2.2 -5 4.8 0 3.8 5 8.2 5 8.2 s5 -4.4 5 -8.2 C5 -3.8 3 -6 0 -6 z'/%3E%3Ccircle cx='0' cy='-1' r='1.5'/%3E%3C/g%3E%3Cg transform='translate(188 306) rotate(7)'%3E%3Cpath d='M0 11 v-4'/%3E%3Ccircle cx='0' cy='2.5' r='4.4'/%3E%3C/g%3E%3Cg transform='translate(258 312) rotate(-5)'%3E%3Crect x='-7.5' y='-2.4' width='15' height='4.8' rx='1'/%3E%3Cpath d='M-3.5 -2.4 v1.9 M0 -2.4 v2.8 M3.5 -2.4 v1.9'/%3E%3C/g%3E%3Cg transform='translate(318 300) rotate(15)'%3E%3Crect x='-4.5' y='-4.5' width='9' height='9'/%3E%3Cpath d='M0 -4.5 v9 M-4.5 0 h9'/%3E%3C/g%3E%3Cpath transform='translate(66 62)' d='M0 -2.4 v4.8 M-2.4 0 h4.8'/%3E%3Ccircle cx='150' cy='64' r='1.1'/%3E%3Cpath transform='translate(228 68) rotate(20)' d='M0 -2 v4 M-2 0 h4'/%3E%3Ccircle cx='72' cy='140' r='1.1'/%3E%3Cpath transform='translate(232 140) rotate(-15)' d='M0 -2.2 v4.4 M-2.2 0 h4.4'/%3E%3Ccircle cx='310' cy='214' r='1.1'/%3E%3Cpath transform='translate(20 274) rotate(12)' d='M0 -2 v4 M-2 0 h4'/%3E%3Ccircle cx='176 ' cy='218' r='1.1'/%3E%3Cpath transform='translate(96 272) rotate(-18)' d='M0 -2.2 v4.4 M-2.2 0 h4.4'/%3E%3Ccircle cx='246' cy='282' r='1.1'/%3E%3Ccircle cx='330' cy='26' r='1.1'/%3E%3Cg transform='translate(38 66) rotate(-6)'%3E%3Cpath d='M-4 6 v-9 h8 v6 h-8'/%3E%3Cpath d='M-4 -3 h8'/%3E%3C/g%3E%3Cg transform='translate(112 72) rotate(9)'%3E%3Crect x='-6' y='-4' width='12' height='8'/%3E%3Cpath d='M-6 0 h12 M0 -4 v4 M-3 0 v4 M3 0 v4'/%3E%3C/g%3E%3Cg transform='translate(192 66) rotate(-11)'%3E%3Cpath d='M-7 4 0 -2 7 4'/%3E%3C/g%3E%3Cg transform='translate(266 72) rotate(16)'%3E%3Ccircle cx='0' cy='0' r='2.2'/%3E%3Cpath d='M2.2 0 h7 M6 0 v2.2 M9.2 0 v1.8'/%3E%3C/g%3E%3Cg transform='translate(152 140) rotate(6)'%3E%3Cpath d='M-6 5 0 0 6 5 M-4 4 v6 h8 v-6'/%3E%3C/g%3E%3Cg transform='translate(206 134) rotate(-8)'%3E%3Crect x='-3.5' y='-5.5' width='7' height='11' rx='0.5'/%3E%3Ccircle cx='1.7' cy='0.4' r='0.6'/%3E%3C/g%3E%3Cg transform='translate(298 140) rotate(10)'%3E%3Cpath d='M0 -5 c-2.6 0 -4.4 2 -4.4 4.3 0 3.4 4.4 7.2 4.4 7.2 s4.4 -3.8 4.4 -7.2 C4.4 -3 2.6 -5 0 -5 z'/%3E%3Ccircle cx='0' cy='-0.7' r='1.3'/%3E%3C/g%3E%3Cg transform='translate(64 210) rotate(-9)'%3E%3Ccircle cx='0' cy='0' r='3.8'/%3E%3Ccircle cx='0' cy='0' r='1'/%3E%3Cpath d='M3.8 0 h3.4 v2.2'/%3E%3C/g%3E%3Cg transform='translate(142 216) rotate(14)'%3E%3Cpath d='M-6 6 l0.8 -3.4 7.6 -7.6 2.6 2.6 -7.6 7.6 -3.4 0.8 z'/%3E%3C/g%3E%3Cg transform='translate(224 210) rotate(-13)'%3E%3Cpath d='M-6 4 0 -1 6 4'/%3E%3C/g%3E%3Cg transform='translate(62 278) rotate(12)'%3E%3Crect x='-4' y='-4' width='8' height='8'/%3E%3Cpath d='M0 -4 v8 M-4 0 h8'/%3E%3C/g%3E%3Cg transform='translate(152 282) rotate(-6)'%3E%3Ccircle cx='-1.6' cy='-1.6' r='3.4'/%3E%3Cpath d='M0.8 0.8 l3.8 3.8'/%3E%3C/g%3E%3Cg transform='translate(226 278) rotate(8)'%3E%3Crect x='-6.5' y='-2.1' width='13' height='4.2' rx='0.9'/%3E%3Cpath d='M-3 -2.1 v1.7 M0 -2.1 v2.4 M3 -2.1 v1.7'/%3E%3C/g%3E%3Cg transform='translate(308 280) rotate(-10)'%3E%3Cpath d='M0 10 v-4'/%3E%3Ccircle cx='0' cy='2' r='3.8'/%3E%3C/g%3E%3Cg transform='translate(255 143) rotate(-6) scale(0.75) translate(-12 -13)'%3E%3Cpath d='M1 21V10l5.5-5 5.5 5v11H1z'/%3E%3Cpath d='M12 21V10l5.5-5 5.5 5v11H12z'/%3E%3Cpath d='M7 21v-5h3v5'/%3E%3Cpath d='M17 21v-5h3v5'/%3E%3C/g%3E%3Cg transform='translate(328 196) rotate(8) scale(0.72) translate(-12 -14)'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2'/%3E%3Cpath d='M12 12v4M2 12h20'/%3E%3C/g%3E%3Cg transform='translate(22 138) rotate(-9) scale(0.7) translate(-12 -13)'%3E%3Cpath d='M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/g%3E%3Cg transform='translate(258 212) rotate(5)'%3E%3Cpath d='M0 10v-3 M-5 7 0 -8 5 7z M-3.5 1 h7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } html { font-size: 16px; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); background-image: var(--doodle); background-size: 424px 424px; color: var(--text); overflow-x: hidden; } /* ── SCREENS ─────────────────────────────── */ .screen { display: none; } /* All screens use flex column layout when active */ .screen.active { display: flex; flex-direction: column; min-height: 100vh; } /* Inspect screen — CSS grid to place tab bar on right side */ #screen-inspect.active { display: grid; grid-template-columns: 1fr 56px; grid-template-rows: auto auto 1fr; grid-template-areas: "topbar tabbar" "banner tabbar" "panels tabbar"; height: 100vh; height: 100dvh; min-height: unset; max-height: 100vh; overflow: hidden; } #screen-inspect > .top-bar { grid-area: topbar; } #screen-inspect > #viewOnlyBanner { grid-area: banner; } #screen-inspect > .tab-panels { grid-area: panels; } /* ── PHOTO STRIP (wide screens only) ────────────────────────────────────── A view-only column of the site photos between the form and the sidebar, so the asset can be described without leaving the Building tab. Below 1280px the button and the strip do not exist; the layout is untouched. */ .btn-photo-strip { display: none; } #screen-inspect > .photo-strip { display: none; } @media (min-width: 1280px) { .btn-photo-strip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.32); color: #fff; border-radius: 20px; padding: 6px 12px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .btn-photo-strip.on { background: #fff; color: var(--sel); border-color: #fff; } #screen-inspect.active.strip-open { grid-template-columns: 1fr 300px 68px; grid-template-areas: "topbar strip tabbar" "banner strip tabbar" "panels strip tabbar"; } #screen-inspect.active.strip-open > .photo-strip { display: flex; flex-direction: column; min-height: 0; grid-area: strip; background: var(--cardface); border-left: 1.5px solid var(--border); } .photo-strip-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); border-bottom: 1.5px solid var(--border); } .photo-strip-close { background: none; border: none; font-size: 15px; color: var(--muted); cursor: pointer; padding: 2px 6px; } .photo-strip-body { flex: 1; overflow-y: auto; padding: 10px 12px 24px; } .photo-strip-sec { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin: 10px 0 6px; } .photo-strip-sec:first-child { margin-top: 0; } .photo-strip-item { margin-bottom: 10px; cursor: zoom-in; } .photo-strip-item img { display: block; width: 100%; border-radius: 8px; background: #dde5ee; } .photo-strip-cap { font-size: 11px; color: var(--text); margin-top: 4px; line-height: 1.35; } .photo-strip-empty { font-size: 12px; color: var(--muted); padding: 10px 2px; line-height: 1.5; } } /* On a wide computer screen the app is capped at 1100px and centred, leaving empty space either side. From 1620px the strip lives in the spare space to the RIGHT of the sidebar and the form keeps its full width; below that it falls back to the in-grid column above. */ @media (min-width: 1620px) { #screen-inspect.active.strip-open { grid-template-columns: 1fr 68px; grid-template-areas: "topbar tabbar" "banner tabbar" "panels tabbar"; } #screen-inspect.active.strip-open > .photo-strip { position: fixed; top: 0; bottom: 0; z-index: 40; left: calc(50% + 550px + 14px); width: min(400px, calc(50% - 550px - 28px)); border: 1.5px solid var(--border); border-top: none; border-bottom: none; box-shadow: 0 0 18px rgba(15,23,42,0.08); } } /* ── VIEW-ONLY (locked by another editor) ─────────────────────────────── */ .view-only-banner { display: flex; align-items: center; gap: 8px; background: #fef3c7; /* amber */ color: #92400e; border-bottom: 1.5px solid #fcd34d; padding: 9px 14px; font-size: 13px; font-weight: 600; line-height: 1.3; } .view-only-banner svg { flex: none; } /* Block all editing inside the panels; the bottom tab-bar (outside .tab-panels) stays active so the viewer can still browse every section. */ #screen-inspect.view-only > .tab-panels { pointer-events: none; } #screen-inspect.view-only > .tab-panels input, #screen-inspect.view-only > .tab-panels textarea, #screen-inspect.view-only > .tab-panels select { background: #f1f2f4; color: #55585e; } /* Disable Save + camera buttons; Home (.btn-home-top) stays clickable. */ #screen-inspect.view-only .btn-camera-top { opacity: .35; pointer-events: none; } /* Photos stay viewable in read-only: re-enable interaction on the Photos panel (so thumbnails can be tapped to enlarge). Edit controls are removed by PhotoSystem.setReadOnly() and writes are blocked in JS, so this is safe. */ #screen-inspect.view-only > .tab-panels #panel-photos { pointer-events: auto; } #screen-inspect.view-only #panel-photos .btn-upload-photos { display: none; } .photo-caption-ro { font-size: 12px; color: #55585e; padding: 4px 2px 2px; line-height: 1.25; word-break: break-word; } #screen-inspect > .tab-bar { grid-area: tabbar; flex-direction: column; border-top: none; border-left: 1.5px solid var(--border); padding: 8px 0; box-shadow: -2px 0 6px rgba(0,0,0,0.06); justify-content: space-around; overflow-y: auto; } #screen-inspect > .tab-bar .tab-item { flex: none; width: 100%; padding: 8px 2px; font-size: 17px; position: relative; border-radius: 10px; transition: background 0.15s, color 0.15s; } #screen-inspect > .tab-bar .tab-item.active { background: rgba(37, 99, 168, 0.13); color: var(--primary2); } #screen-inspect > .tab-bar .tab-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 55%; background: var(--primary2); border-radius: 0 3px 3px 0; } /* File inputs triggered by a button: keep them in the layout at opacity 0. Safari ignores .click() on some display:none file inputs (the landing Import button did nothing there), while an opacity-0 1px input always opens the picker. */ .file-input-hidden { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; } #screen-inspect > .tab-bar .tab-label { display: none; } /* ── SHARED TOP BAR ──────────────────────── */ .top-bar { background: var(--sel); color: white; padding: 14px 18px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .top-bar h2 { font-size: 17px; font-weight: 700; flex: 1; } .btn-back-top { background: none; border: none; color: white; font-size: 22px; cursor: pointer; line-height: 1; padding: 0; } .type-badge { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: white; display: inline-flex; align-items: center; gap: 5px; } .type-badge svg { stroke: white; flex-shrink: 0; } .btn-discl-top { background: none; border: none; color: rgba(255,255,255,0.55); font-size: 15px; padding: 2px 4px; cursor: pointer; line-height: 1; flex-shrink: 0; transition: color 0.15s; } .btn-discl-top:hover { color: rgba(255,255,255,0.9); } /* ═══════════════════════════════════════════ LANDING SCREEN ═══════════════════════════════════════════ */ #screen-landing { background: linear-gradient(160deg, #1a3c5e 0%, #2563a8 100%); } .landing-header { position: relative; height: clamp(216px, 23.5vw, 296px); /* banner incl. the fade zone (24px less sky, v358) */ overflow: hidden; color: white; /* B&W Mauritius panorama (bundled, offline-safe) replaces the cityscape. Crop sits lower in the picture (40%) → less sky above the mountains. */ background: #1a3c5e url('img/landing-hero-bw.jpg') center 40% / cover no-repeat; } /* Navy tint over the photo — keeps the white brand + buttons legible */ .landing-header::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, rgba(26,60,94,0.72) 0%, rgba(37,99,168,0.40) 100%); } /* "Valoris" anchored bottom-left in the open sky */ .landing-brand { position: absolute; bottom: 128px; /* rests on the body's top edge; the fade only starts 28px lower */ left: 24px; z-index: 2; font-size: 42px; font-weight: 500; color: white; text-shadow: 0 1px 8px rgba(0,0,0,0.4); } .landing-skyline { display: none; /* replaced by the B&W Mauritius photo banner */ } .landing-sub { font-size: 13px; font-weight: 600; color: #fff; /* sits on the photo now */ text-shadow: 0 1px 6px rgba(10,25,45,0.55); margin-bottom: 16px; } .btn-settings-icon { position: absolute; top: 18px; right: 18px; z-index: 3; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; width: 42px; height: 42px; font-size: 18px; cursor: pointer; color: white; display: flex; align-items: center; justify-content: center; } .btn-import-json-sm { position: absolute; top: 22px; right: 70px; z-index: 3; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; color: white; font-family: inherit; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; min-width: 88px; justify-content: center; } .landing-body { flex: 1; position: relative; z-index: 2; margin-top: -128px; /* photo reaches mid-way down the first card row */ background-color: transparent; /* doodle tile FIRST (topmost) so the doodled canvas shows across the whole lower page. The gradient beneath runs from "Select property type" (28px) to mid-first-card (128px) with eased stops — a long, even, seamless fade rather than a hard white band. */ background-image: var(--doodle), linear-gradient(180deg, rgba(207,219,231,0) 28px, rgba(207,219,231,0.18) 55px, rgba(207,219,231,0.45) 80px, rgba(207,219,231,0.75) 104px, #cfdbe7 128px); background-size: 424px 424px, auto; border-radius: 0; padding: 30px 16px 40px; } /* ── Staff context button (header pill) ───── */ .btn-context-user { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 88px; padding: 5px 12px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; color: white; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.15s; } .btn-context-user:active { background: rgba(255,255,255,0.28); } .btn-context-user.employee { background: rgba(217,119,6,0.55); border-color: rgba(255,200,80,0.6); } .section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 12px; } /* Property type grid */ .type-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 28px; } @media (min-width: 700px) { .type-grid { grid-template-columns: repeat(4, 1fr); } } /* iPad / Mac: 4 per line (v403) */ .type-card { background: var(--cardface); border-radius: var(--radius); padding: 16px 8px; text-align: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 2px solid transparent; transition: all 0.2s; user-select: none; } .type-card:active { transform: scale(0.95); border-color: var(--primary2); } .type-card .t-icon { font-size: 28px; margin-bottom: 6px; display:flex; align-items:center; justify-content:center; } .type-card .t-icon svg { color: var(--primary); } /* SVG icons inherit button/element colour */ .btn-icon svg, .btn-home-top svg, .btn-camera-top svg, .btn-view-all svg, .btn-primary svg, .disc-tab-btn svg, .ev-search-btn svg, .ev-adjust-btn svg, .ev-tenure-btn svg, .btn-after-home svg, .btn-after-new svg, .btn-after-export svg, .btn-after-pdf svg, .btn-next-tab svg, .save-success-icon svg, .photos-empty-icon svg, .ph-icon svg, .photo-retake svg, .modal-title svg, .pdf-attach-title svg, .btn-modal-send svg { stroke: currentColor; } .type-card .t-label { font-size: 11px; font-weight: 700; color: var(--text); line-height: 1.3; } /* Recent inspections */ .recent-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .recent-card { background: var(--cardface); border-radius: 10px; display: flex; align-items: stretch; box-shadow: 0 1px 4px rgba(0,0,0,0.05); overflow: hidden; } .recent-card-main { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; min-width: 0; } .recent-card-main:active { background: var(--bg); } .recent-icon { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #1F4E79; } .recent-info { flex: 1; min-width: 0; } .recent-addr { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recent-meta { font-size: 12px; color: var(--muted); } .recent-arrow { color: var(--muted); font-size: 18px; flex-shrink: 0; } .btn-delete-recent { background: #fff5f5; border: none; border-left: 1px solid var(--border); color: var(--red); font-size: 18px; padding: 0 14px; cursor: pointer; flex-shrink: 0; transition: background 0.15s; } .btn-delete-recent:active { background: #fee2e2; } .empty-recent { text-align: center; color: var(--muted); font-size: 13px; padding: 20px 0; } /* ═══════════════════════════════════════════ SETUP / SETTINGS SCREEN ═══════════════════════════════════════════ */ #screen-setup { /* layout handled by .screen.active */ } .setup-body { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; } .setup-icon { font-size: 48px; text-align: center; } .setup-title { font-size: 22px; font-weight: 800; color: var(--primary); text-align: center; } .setup-desc { font-size: 14px; color: var(--muted); text-align: center; line-height: 1.6; } .setup-steps { background: white; border-radius: var(--radius); padding: 16px; } .setup-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; } .setup-step:last-child { margin-bottom: 0; } .step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: white; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .step-text { font-size: 13px; color: var(--text); line-height: 1.5; } .step-text a { color: var(--primary2); font-weight: 600; } .api-input-wrap { position: relative; } .api-input-wrap input { width: 100%; padding: 13px 44px 13px 14px; border: 2px solid var(--border); border-radius: 10px; font-size: 15px; font-family: monospace; } .api-input-wrap input:focus { outline: none; border-color: var(--primary2); } .toggle-key { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 18px; } .btn-primary { width: 100%; padding: 14px; background: var(--primary); color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; } .btn-skip { width: 100%; padding: 12px; background: none; border: none; font-size: 13px; color: var(--muted); cursor: pointer; font-family: inherit; } .setup-divider { width: 100%; height: 1px; background: #e0e8f0; margin: 24px 0 20px; } .setup-disc-field { width: 100%; margin-bottom: 14px; } .valuer-profile-grid { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .vp-field { display: flex; flex-direction: column; gap: 4px; } .vp-field label { font-size: 12px; font-weight: 600; color: var(--primary2); } .vp-field input { padding: 10px 12px; border: 1.5px solid #d0d9e8; border-radius: 8px; font-size: 14px; font-family: inherit; background: #fafcff; } .vp-upload-row { display: flex; gap: 12px; width: 100%; margin-bottom: 16px; } .vp-upload-box { flex: 1; border: 1.5px dashed #b0c4de; border-radius: 10px; padding: 14px 10px; text-align: center; cursor: pointer; background: #f4f8ff; display: flex; flex-direction: column; align-items: center; } .vp-upload-label { font-size: 12px; font-weight: 700; color: var(--primary2); margin-bottom: 4px; } .vp-upload-hint { font-size: 11px; color: var(--muted); margin-top: 6px; } /* ═══════════════════════════════════════════ INSPECTION SCREEN (Tab-based) ═══════════════════════════════════════════ */ #screen-inspect { /* layout handled by .screen.active + #screen-inspect.active above */ } /* Tab panels container */ .tab-panels { flex: 1; min-height: 0; position: relative; overflow: hidden; } /* Individual tab panel */ .tab-panel { display: none; position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; padding-bottom: 28px; } .tab-panel.active { display: block; } /* Space between cards inside panels */ .tab-panel .card, .tab-panel .photo-zone, .tab-panel .auto-row, .tab-panel .job-top-grid, .tab-panel .btn-next-tab, .tab-panel .btn-skip-to-review { margin-bottom: 12px; } /* Building panel — tighter card spacing and padding */ #panel-building .card { margin-bottom: 7px; padding: 10px 12px; } .tab-panel .btn-next-tab:last-child, .tab-panel .btn-skip-to-review:last-child { margin-bottom: 4px; } /* ── TAB BAR ─────────────────────────────── */ .tab-bar { display: flex; background: var(--cardface); border-top: 1.5px solid var(--border); padding: 6px 0 calc(8px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; box-shadow: 0 -2px 8px rgba(0,0,0,0.06); } .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; padding: 4px 2px; color: var(--muted); transition: color 0.15s; } .tab-item.active { color: var(--primary); } .tab-icon { font-size: 18px; line-height: 1; display:flex; align-items:center; justify-content:center; } .tab-icon svg { stroke: currentColor; } .tab-label { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; font-family: inherit; } /* ── COVER PHOTO ─────────────────────────── */ /* ── JOB TOP GRID (photo left, GPS+Date right) ── */ .job-top-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; min-height: 180px; } .job-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; margin-bottom: 12px; } .job-pair-grid > .card { margin-bottom: 0; } .job-info-col { display: flex; flex-direction: column; gap: 10px; } .job-info-col .auto-card, .job-info-col .date-pair-row { flex: 1; } .date-pair-row { display: flex; gap: 8px; } .date-pair-row .auto-card { flex: 1; min-width: 0; } .photo-zone { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.07); cursor: pointer; display: flex; flex-direction: column; } .photo-placeholder { flex: 1; min-height: 0; background: linear-gradient(135deg, #e8f0fe, #dde8f5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .ph-icon { font-size: 32px; } .ph-text { font-size: 12px; font-weight: 600; color: var(--primary); } .ph-sub { font-size: 11px; color: var(--muted); } .cover-preview { flex: 1; width: 100%; min-height: 0; object-fit: cover; object-position: center; display: none; } .photo-retake { padding: 8px; text-align: center; font-size: 12px; font-weight: 600; color: var(--primary2); border-top: 1px solid var(--border); flex-shrink: 0; } /* ── AUTO ROW (GPS + DATE) ───────────────── */ .auto-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; } .auto-card { background: white; border-radius: var(--radius); padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .gps-card { display: flex; align-items: center; gap: 10px; } .auto-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; } .gps-value { font-size: 12px; color: var(--text); margin-top: 3px; line-height: 1.3; } .date-auto-card .date-val { font-size: 12px; font-weight: 600; color: var(--text); margin-top: 3px; line-height: 1.3; } /* GPS dot */ .gps-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex-shrink: 0; } .gps-dot.getting { background: var(--amber); animation: pulse 1s infinite; } .gps-dot.got { background: var(--green); } .gps-dot.error { background: var(--red); } .btn-gps-edit { margin-left: auto; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); transition: background 0.15s, color 0.15s; } .btn-gps-edit:hover { background: var(--border); color: var(--primary); } .btn-gps-edit svg { stroke: currentColor; } .gps-manual-input { margin-top: 4px; width: 100%; border: 1.5px solid var(--primary2); border-radius: 7px; padding: 5px 9px; font-size: 12px; color: var(--text); background: #fff; outline: none; font-family: inherit; } @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } } /* ── CARDS ───────────────────────────────── */ .card { background: var(--cardface); border-radius: var(--radius); padding: 14px 14px 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .card-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--bg); display: flex; align-items: center; gap: 6px; } .card-title-note { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 10px; font-style: italic; } /* ── OTHER ROOM (custom room entry) ─────── */ input.other-room-name-input { display: block !important; width: 100% !important; box-sizing: border-box !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.3px; color: var(--muted) !important; border: none !important; background: transparent !important; padding: 0 !important; margin-bottom: 6px; outline: none !important; font-family: inherit !important; box-shadow: none !important; border-radius: 0 !important; } input.other-room-name-input:focus { border: none !important; box-shadow: none !important; outline: none !important; } input.other-room-name-input::placeholder { color: var(--muted); opacity: 0.6; } /* ── FORM FIELDS ─────────────────────────── */ .field { margin-bottom: 14px; } .field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .field-row-2 .field { margin-bottom: 0; } /* Accommodation card — put Additional Rooms beside Bedrooms/Bathrooms to use the side space on tablet/desktop; stacks to one column on a narrow phone. */ .acc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 768px) { .acc-grid { grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } } label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; } label.lbl-preferred { color: var(--amber); } /* Label with a small action on the right (e.g. "Refill from sketch") */ .label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .sk-refill { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0 0 6px; cursor: pointer; font-family: inherit; font-size: 10.5px; font-weight: 600; color: var(--primary2); white-space: nowrap; } .sk-refill:active { opacity: 0.6; } input[type=text], input[type=number], textarea { width: 100%; padding: 12px 13px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 16px; color: var(--text); background: white; font-family: inherit; -webkit-appearance: none; transition: border-color 0.2s; } input:focus, textarea:focus { outline: none; border-color: var(--primary2); box-shadow: 0 0 0 3px rgba(37,99,168,0.1); } textarea { resize: vertical; min-height: 70px; line-height: 1.5; } /* ── SITE DESCRIPTION PREVIEW ────────── */ .site-desc-preview { background: #f0f7ff; border: 1.5px solid #bfdbfe; border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.6; color: #1e40af; margin-bottom: 10px; min-height: 36px; font-style: italic; } .site-desc-preview:empty::before { content: 'Select options above to build description...'; color: #93c5fd; } /* ── ROOM CHIP + NOTES TEXTAREA ─────────── */ .chip-group + textarea, input.other-room-name-input + textarea { margin-top: 6px; font-size: 12px; color: var(--muted); border-color: var(--border); background: #fafbfc; } .chip-group + textarea::placeholder, input.other-room-name-input + textarea::placeholder { color: #bcc5d0; font-style: italic; } /* ── INDUSTRIAL ADD BUILDING ─────────── */ .btn-add-ind-building { display: block; width: 100%; margin-top: 14px; padding: 10px; border-radius: 8px; border: 1.5px dashed var(--primary2); background: #f0f7ff; color: var(--primary2); font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; } .btn-add-ind-building:active { background: #dbeafe; } .btn-add-room-subtle { width: auto; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; margin-top: 4px; font-size: 10px; font-weight: 500; border-radius: 4px; border-width: 1px; } .ind-building-extra { margin-top: 10px; } .ind-extra-name { margin-bottom: 6px; } /* ── TAP BUTTONS (main feature!) ────────── */ .tap-group { display: flex; flex-wrap: wrap; gap: 5px; } .tap-group.tap-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .tap-group.tap-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; } .tap-group.tap-4col { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; } /* Job page only: narrower tap buttons (less dead space around labels) */ #panel-job .tap-group.tap-3col, #panel-job .tap-group.tap-4col { max-width: 85%; } /* Purpose and Lender cards in narrow right column */ #job-purpose-inline .tap-group.tap-3col, #job-lender-inline .tap-group.tap-3col { max-width: 100%; } #job-purpose-inline .tap-opt, #job-lender-inline .tap-opt, #job-ins-instruction-inline .tap-opt { font-size: 10px; padding: 5px 3px; } #job-ins-instruction-inline .tap-group.tap-2col { max-width: 100%; } .tap-group.tap-5col { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; } .tap-group.tap-6col { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; } .tap-group.tap-5col .tap-opt, .tap-group.tap-6col .tap-opt { font-size: 10px; padding: 5px 3px; } .tap-group.tap-row { display: flex; flex-wrap: nowrap; gap: 5px; } .tap-group.tap-row .tap-opt { flex: 1; min-width: 0; padding: 8px 4px; font-size: 11px; } .tap-group.tap-inline-sm { display: flex; flex-wrap: nowrap; gap: 5px; } .tap-group.tap-inline-sm .tap-opt { flex: 1; min-width: 0; padding: 7px 4px; font-size: 11px; text-align: center; } .tap-opt { flex: 1; min-width: calc(50% - 3px); padding: 5px 7px; border: 1.5px solid var(--border); border-radius: 7px; background: white; font-size: 11px; font-weight: 600; cursor: pointer; text-align: center; color: var(--text); font-family: inherit; transition: all 0.15s; line-height: 1.2; user-select: none; } .tap-opt:active { transform: scale(0.96); } /* Selected state (Sign-In-button blue, pale text) */ .tap-opt.sel { background: var(--sel); border-color: var(--sel); color: var(--sel-text); } /* Modifier tap option — used for Gated Parcelling/Project */ .tap-opt.tap-modifier { border-style: dashed; font-style: italic; color: var(--muted); } .tap-opt.tap-modifier.sel { background: var(--primary2); border-color: var(--primary2); border-style: solid; color: white; font-style: normal; } /* Colored tap options (condition / repairs) */ .tap-opt.tap-green { border-color: var(--green); color: #16a34a; } .tap-opt.tap-amber { border-color: var(--amber); color: #d97706; } .tap-opt.tap-red { border-color: var(--red); color: var(--red); } .tap-opt.tap-green.sel { background: var(--green); border-color: var(--green); color: white; } .tap-opt.tap-amber.sel { background: var(--amber); border-color: var(--amber); color: white; } .tap-opt.tap-red.sel { background: var(--red); border-color: var(--red); color: white; } /* ── FLOOR NUMBER INPUT (unit style) ─── */ .style-floor-wrap { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; } .style-floor-input { width: 80px; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 15px; font-family: inherit; color: var(--text); background: white; -moz-appearance: textfield; text-align: center; } .style-floor-input::-webkit-outer-spin-button, .style-floor-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .style-floor-input:focus { outline: none; border-color: var(--accent); } .style-floor-input:not(:placeholder-shown) { background: var(--sel); border-color: var(--sel); color: var(--sel-text); font-weight: 700; } .style-floor-suffix { font-size: 14px; color: var(--text-muted, #6b7280); font-weight: 500; } /* ── NUMBER BUTTONS (bedrooms/bathrooms) ─── */ .num-group { display: flex; gap: 6px; flex-wrap: wrap; } .num-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border); background: white; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text); font-family: inherit; transition: all 0.15s; flex-shrink: 0; user-select: none; } .num-btn:active { transform: scale(0.9); } .num-btn.sel { background: var(--sel); border-color: var(--sel); color: var(--sel-text); } input[type=number].num-input { width: 38px; height: 38px; padding: 0; border-radius: 8px; border: 1.5px solid var(--border); background: white; font-size: 13px; font-weight: 700; font-family: inherit; color: var(--text); text-align: center; flex-shrink: 0; -moz-appearance: textfield; } input[type=number].num-input::-webkit-outer-spin-button, input[type=number].num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number].num-input:focus { outline: none; border-color: var(--primary); } /* A typed value reads like a selected chip (the inputs carry placeholder=" " so :placeholder-shown flips as soon as the box holds anything) */ input[type=number].num-input:not(:placeholder-shown) { background: var(--sel); border-color: var(--sel); color: var(--sel-text); } /* ── CHIP TOGGLES ────────────────────────── */ .chip-group { display: flex; flex-wrap: wrap; gap: 5px; } .chip { padding: 4px 9px; border-radius: 8px; /* rounded rectangle, like the Sign In button (was a pill) */ border: 1.5px solid var(--border); background: white; font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.15s; user-select: none; } .chip.on { background: var(--sel); border-color: var(--sel); color: var(--sel-text); font-weight: 600; } /* Admin-added (permanent) and typed one-off chips look exactly like built-ins; the long-press-to-remove gesture must not trigger iOS text selection. */ .chip.chip-custom, .chip.chip-adhoc { -webkit-touch-callout: none; } /* The typing chip at the end of every row */ .chip.chip-add { display: inline-flex; align-items: center; padding: 0; border-style: dashed; border-color: #9fb3c8; background: transparent; cursor: text; } /* input.class beats the global input[type=text] rule (same specificity, later in file) */ input.chip-add-input, input.chip-add-input:focus { display: block; width: 72px; height: auto; padding: 4px 9px; /* same box as a .chip → same row height */ line-height: normal; margin: 0; border: none; border-radius: 8px; background: transparent; box-shadow: none; font: inherit; font-size: 11px; font-weight: 500; color: var(--text); outline: none; box-sizing: border-box; -webkit-appearance: none; appearance: none; } input.chip-add-input::placeholder { color: #7f93a8; } .chip.chip-add:focus-within { border-style: solid; border-color: var(--primary); background: white; } /* ── CELL FORMULAS (number boxes that hold "=…") ── */ input.calc-input.fx-cell { background: #eef4fb; } input.calc-input.fx-editing { background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; } input.calc-input.fx-err, input.fx-err { color: #c00000; border-color: #e08a8a; } input.calc-input.fx-flash { box-shadow: 0 0 0 3px rgba(37,99,168,0.45); transition: box-shadow 0.1s; } /* ── FREE SHEET (calc mod12) ─────────────── */ .fs-help { font-size: 11px; color: var(--muted); line-height: 1.55; margin-bottom: 8px; } .fs-help b { color: var(--text); font-weight: 600; } .fs-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .fs-cellname { min-width: 40px; text-align: center; font-size: 12px; font-weight: 700; color: var(--primary); background: #e6edf5; border-radius: 8px; padding: 9px 6px; } input.fs-formula, input.fs-formula:focus { flex: 1; width: auto; min-width: 0; padding: 8px 10px; font-size: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border: 1.5px solid var(--border); border-radius: 8px; background: white; box-shadow: none; } input.fs-formula:focus { border-color: var(--primary2); } .fs-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 8px; background: white; } .fs-table { border-collapse: collapse; table-layout: auto; min-width: 100%; } .fs-table th { font-size: 10px; font-weight: 700; color: var(--muted); background: #e9eef4; padding: 4px; text-align: center; border: 1px solid var(--border); user-select: none; } .fs-table th.fs-rowhdr { width: 30px; } .fs-table td { padding: 0; border: 1px solid var(--border); min-width: 96px; } .fs-table td:nth-child(2) { min-width: 150px; } input.fs-cell, input.fs-cell:focus { display: block; width: 100%; box-sizing: border-box; padding: 8px 7px; margin: 0; border: none; border-radius: 0; box-shadow: none; outline: none; font-size: 13px; font-family: inherit; text-align: right; background: white; color: var(--text); } input.fs-cell.text { text-align: left; } input.fs-cell.formula { background: #eef4fb; } input.fs-cell.err { color: #c00000; font-weight: 600; } input.fs-cell.result { background: var(--primary); color: #fff; font-weight: 700; } /* Other tagged cells: as if completed (blue tint), reinstatement costs (amber tint) */ input.fs-cell.role-comp { background: #dfe9f6; color: var(--primary); font-weight: 700; } input.fs-cell.role-rc, input.fs-cell.role-rcComp { background: #f6ecd6; color: #7a5a12; font-weight: 700; } .fs-td { position: relative; } .fs-tag { position: absolute; top: 1px; left: 3px; z-index: 1; pointer-events: none; font-size: 7.5px; font-weight: 800; letter-spacing: 0.4px; line-height: 1; padding: 2px 3px; border-radius: 3px; background: rgba(255,255,255,0.85); color: var(--primary); } .fs-btn.fs-mini { padding: 7px 9px; font-size: 11px; } .fs-btn.fs-mini.on { background: var(--primary); border-color: var(--primary); color: #fff; } .fs-btn:disabled { opacity: 0.45; cursor: default; } /* Cells a formula points at, while it is edited — Excel-style coloured outlines */ input.fs-cell.fs-ref-0 { box-shadow: inset 0 0 0 2px #2563eb; background: #eaf1fd; } input.fs-cell.fs-ref-1 { box-shadow: inset 0 0 0 2px #16a34a; background: #e9f7ee; } input.fs-cell.fs-ref-2 { box-shadow: inset 0 0 0 2px #9333ea; background: #f3eafd; } input.fs-cell.fs-ref-3 { box-shadow: inset 0 0 0 2px #ea580c; background: #fdeee4; } input.fs-cell.fs-ref-4 { box-shadow: inset 0 0 0 2px #0d9488; background: #e6f6f4; } .fs-menu { position: fixed; z-index: 10000; min-width: 150px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,0.18); padding: 4px; display: flex; flex-direction: column; } .fs-menu button { text-align: left; background: none; border: none; border-radius: 6px; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; } .fs-menu button:hover { background: #eef3f8; } .fs-menu button:disabled { color: #9aa7b5; cursor: default; } .fs-wrap { position: relative; } .fs-fill-handle { position: absolute; width: 12px; height: 12px; display: none; z-index: 3; background: var(--primary); border: 2px solid #fff; border-radius: 2px; box-sizing: border-box; cursor: crosshair; touch-action: none; box-shadow: 0 0 0 1px var(--primary); } .fs-fill-handle::after { content: ''; position: absolute; inset: -8px; } /* bigger finger target */ body.fs-filling { cursor: crosshair; user-select: none; -webkit-user-select: none; } body.fs-filling input.fs-cell { pointer-events: none; } input.fs-cell.fs-fill-target { box-shadow: inset 0 0 0 2px var(--primary2); background: #e8f0fb; } .fs-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; } .fs-roles-lbl { font-size: 11px; color: var(--muted); margin-right: 2px; } .fs-btn.fs-role.on { background: var(--primary); border-color: var(--primary); color: #fff; } .fs-btn.fs-role.on b { font-weight: 700; opacity: 0.85; } input.fs-cell.result.formula { background: var(--primary); } input.fs-cell.active, input.fs-cell:focus { box-shadow: inset 0 0 0 2px var(--primary2); text-align: left; } .fs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; } .fs-btn { padding: 7px 12px; border-radius: 8px; border: 1.5px solid var(--border); background: white; font-size: 12px; font-weight: 600; color: var(--text); font-family: inherit; cursor: pointer; } .fs-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; white-space: nowrap; } .fs-btn-danger { color: #c00000; border-color: #e8bcbc; } .fs-result-note { font-size: 11px; color: var(--muted); margin-left: auto; } /* ── RISK RATING ─────────────────────────── */ .risk-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--bg); gap: 8px; } .risk-row:last-child { border-bottom: none; } .risk-label { font-size: 13px; flex: 1; line-height: 1.3; } .risk-btns { display: flex; gap: 5px; flex-shrink: 0; } .risk-btn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border); background: white; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; color: var(--muted); font-family: inherit; } .risk-btn.sel-low { background: #66bb6a; border-color: #66bb6a; color: white; } .risk-btn.sel-mid { background: #fff176; border-color: #f9a825; color: #555; } .risk-btn.sel-orange { background: #ffa726; border-color: #fb8c00; color: white; } .risk-btn.sel-high { background: #ef5350; border-color: #c62828; color: white; } /* ── RISK COMMENT DROPDOWN ───────────────── */ .risk-comment-wrap { display: flex; gap: 8px; align-items: center; padding: 6px 0 10px 0; border-bottom: 1px dashed #e0e0e0; margin-bottom: 2px; } .risk-comment-sel { flex: 1; padding: 8px 10px; border: 1.5px solid #b0c4de; border-radius: 8px; background: #f4f8ff; color: #333; font-size: 13px; font-family: inherit; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } .btn-risk-add { flex-shrink: 0; width: 34px; height: 34px; border: 1.5px dashed var(--primary2); border-radius: 8px; background: #f0f7ff; color: var(--primary2); font-size: 18px; line-height: 1; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* ── STANDARD DISCLOSURES TAB ────────────── */ .disc-note { font-size: 12px; color: var(--muted); margin: 0; padding: 2px 0 4px; } /* ── Disclosure tab bar ─────────────────────── */ .disc-tab-bar { display: flex; gap: 8px; margin: 16px 0 14px; } .disc-tab-btn { flex: 1; padding: 10px 0; font-size: 14px; font-weight: 700; border: 2px solid #d0d9e8; border-radius: 10px; background: #f0f4fb; color: var(--primary2); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .disc-tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } .disc-panel { display: none; } .disc-panel.active { display: block; } .disc-label { font-size: 12px; font-weight: 700; color: var(--primary2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .disc-textarea { width: 100%; box-sizing: border-box; border: 1.5px solid #d0d9e8; border-radius: 8px; padding: 10px 12px; font-size: 13px; font-family: inherit; color: #333; background: #fafcff; resize: vertical; line-height: 1.5; min-height: 80px; } .disc-textarea:focus { outline: none; border-color: var(--primary2); background: #fff; box-shadow: 0 0 0 3px rgba(46,92,158,0.08); } /* ── NEXT TAB BUTTON ─────────────────────── */ .btn-next-tab { width: 100%; padding: 15px; background: var(--primary); color: white; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity 0.2s; } .btn-next-tab:active { opacity: 0.85; } .btn-skip-to-review { background: var(--bg); color: var(--muted); border: 1.5px solid var(--border); } /* ── REVIEW TAB ──────────────────────────── */ .cover-thumb { width: 100%; border-radius: var(--radius); max-height: 200px; object-fit: cover; margin-bottom: 12px; display: none; } .review-section { margin-bottom: 16px; } .review-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; padding: 0 4px; } .review-grid { display: flex; flex-direction: column; gap: 5px; } .review-row { background: white; border-radius: 8px; padding: 10px 14px; display: flex; gap: 10px; align-items: flex-start; } .r-label { font-size: 11px; font-weight: 700; color: var(--muted); min-width: 100px; flex-shrink: 0; } .r-value { font-size: 13px; color: var(--text); flex: 1; word-break: break-word; } .review-layout { display: flex; flex-direction: row; align-items: flex-start; gap: 0; height: 100%; } .export-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; background: #f5f5f5; border-right: 1px solid #ddd; min-width: 56px; flex-shrink: 0; } .btn-export { width: 44px; height: 44px; padding: 0; background: var(--accent); color: white; border: none; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .btn-export-excel { width: 100%; padding: 15px; background: var(--primary); color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; } /* ── PDF ATTACH BUTTON + THUMBS IN SIDEBAR ─── */ .attach-separator { width: 36px; height: 1px; background: #ccc; margin: 2px 0; } .btn-attach-doc { width: 44px; height: 44px; padding: 0; background: #fff; color: var(--primary); border: none; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } /* Attach and Import are native