/* Dale Haven — design system v3: property-management-platform look. Dark navy sidebar + light content canvas + white cards (Buildium/AppFolio DNA). Light default; dark theme available. Mono reserved for figures only. Fonts load async from each page's (no @import — it serialised render). */ :root{ /* light = grey-forward with firm contrast (not white-on-white) */ --canvas:#e6e9ee; --panel:#f4f5f8; --panel-2:#e9ecf1; --line:#b9c2cf; --line-soft:#ccd3dd; --ink:#12181f; --ink-dim:#3a4554; --ink-faint:#5f6b7c; --accent:#155bb5; --accent-dim:#0f4a97; --accent-soft:rgba(21,91,181,.1); --good:#116e49; --warn:#8a6209; --bad:#b32836; --good-soft:rgba(17,110,73,.12); --bad-soft:rgba(179,40,54,.09); --side-bg:#151f2e; --side-ink:#93a3ba; --side-ink-hi:#f2f6fb; --side-line:rgba(255,255,255,.07); --side-active:rgba(87,150,235,.16); --side-accent:#5796eb; --shadow:0 1px 2px rgba(20,30,50,.1),0 1px 3px rgba(20,30,50,.07); --mono:'JetBrains Mono',ui-monospace,monospace; --sans:'IBM Plex Sans',-apple-system,'Segoe UI',system-ui,sans-serif; --display:'Archivo',var(--sans); --radius:8px; --sidew:228px; --logo-tile:#ffffff; --logo-ink:#0E5A5A; } [data-theme="dark"]{ --canvas:#0e1218; --panel:#161c26; --panel-2:#1d2431; --line:#2b3444; --line-soft:#222a38; --ink:#e6eaf1; --ink-dim:#9aa7ba; --ink-faint:#818ea3; --accent:#4d92e8; --accent-dim:#3a7ecf; --accent-soft:rgba(77,146,232,.1); --good:#41c98a; --warn:#d9a83e; --bad:#e56571; --good-soft:rgba(65,201,138,.1); --bad-soft:rgba(229,101,113,.08); --side-bg:#0a0e14; --side-ink:#77869c; --side-ink-hi:#eef2f8; --side-line:rgba(255,255,255,.06); --side-active:rgba(77,146,232,.14); --side-accent:#4d92e8; --logo-tile:rgba(255,255,255,.09); --logo-ink:#4fc2b8; --shadow:0 1px 2px rgba(0,0,0,.35); } *{box-sizing:border-box} html,body{margin:0;padding:0} /* ── Themed scrollbars (match canvas/panels instead of stock white/grey) ── */ *{scrollbar-width:thin;scrollbar-color:var(--line) transparent} /* Firefox */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:2.5px solid var(--canvas);background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:var(--ink-faint);border:2.5px solid var(--canvas);background-clip:padding-box} ::-webkit-scrollbar-corner{background:transparent} /* sidebar scrolls against the navy — use its own line colour */ .side ::-webkit-scrollbar-thumb{background:var(--side-line);border-color:var(--side-bg)} .side *{scrollbar-color:rgba(255,255,255,.14) transparent} body{background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5; -webkit-font-smoothing:antialiased;transition:background .15s} a{color:inherit;text-decoration:none} .mono{font-family:var(--mono)} /* ── Sidebar ─────────────────────────────────────────────── */ .side{position:fixed;left:0;top:0;bottom:0;width:var(--sidew);background:var(--side-bg); display:flex;flex-direction:column;z-index:40} .side .brand{display:flex;align-items:center;gap:10px;padding:18px 18px 16px;color:var(--side-ink-hi); font-family:var(--display);font-weight:700;font-size:15px;border-bottom:1px solid var(--side-line)} .side .brand .mark{width:30px;height:30px;border-radius:7px;background:var(--logo-tile);color:var(--logo-ink); display:flex;align-items:center;justify-content:center;flex:none} .side .brand .mark svg{width:21px;height:21px;display:block} .side .brand small{display:block;font-family:var(--sans);font-weight:400;font-size:10.5px;color:var(--side-ink);margin-top:1px} .side .links{flex:1;padding:12px 10px;overflow-y:auto} .side .links .sec{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--side-ink); opacity:.7;padding:14px 10px 6px} .side .links a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:7px; color:var(--side-ink);font-size:13.5px;font-weight:500;margin-bottom:2px;transition:background .12s,color .12s} .side .links a svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .side .links a:hover{color:var(--side-ink-hi);background:rgba(255,255,255,.05)} .side .links a.active{color:var(--side-ink-hi);background:var(--side-active)} .side .links a.active svg{stroke:var(--side-accent)} .side .foot{border-top:1px solid var(--side-line);padding:12px 14px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0} .side .foot .avatar{width:30px;height:30px;border-radius:50%;background:var(--side-active);color:var(--side-accent); display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none} .side .foot .u{flex:1 1 0;min-width:0;overflow:hidden} .side .foot .u .n{display:block;color:var(--side-ink-hi);font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side .foot .u .r{display:block;color:var(--side-ink);font-size:10.5px;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side .foot button{flex:none;background:none;border:none;box-shadow:none;color:var(--side-ink);cursor:pointer;padding:5px 7px;border-radius:6px;font-size:14px} .side .foot button:hover{color:var(--side-ink-hi);background:rgba(255,255,255,.06)} .wrap{--contentw:1380px;margin-left:calc(var(--sidew) + max(0px, (100vw - var(--sidew) - var(--contentw)) / 2)); padding:26px clamp(20px, 3vw, 44px) 80px;max-width:var(--contentw)} .bottom-nav{display:none} .sheet{display:none} .sheet svg{width:19px;height:19px} /* safety: never render unsized */ @media(max-width:920px){ .side{display:none} .wrap{margin-left:0;padding:18px 14px 92px} .bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:60;display:grid; grid-template-columns:repeat(5,1fr);background:var(--side-bg); border-top:1px solid var(--side-line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))} .bottom-nav a,.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:3px; padding:7px 2px;border:none;background:none;box-shadow:none;border-radius:8px; color:var(--side-ink);font-size:10px;font-weight:600;cursor:pointer} .bottom-nav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .bottom-nav .active{color:var(--side-accent)} .sheet{position:fixed;inset:0;z-index:70;background:rgba(8,12,18,.55);display:none} .sheet.show{display:block} .sheet .panel{position:absolute;left:0;right:0;bottom:0;background:var(--panel); border-radius:16px 16px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(0,0,0,.35)} .sheet .panel a{display:flex;align-items:center;gap:12px;padding:12px 8px;font-size:14px; font-weight:500;border-bottom:1px solid var(--line-soft);color:var(--ink)} .sheet .panel a svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .sheet .panel .sheet-row{display:flex;gap:10px;margin-top:14px} .sheet .panel .sheet-row button{flex:1;justify-content:center} .kpis{grid-template-columns:repeat(2,1fr)!important} .chart-box{height:200px}.chart-box.tall{height:210px} .page-loader{padding-bottom:92px} } /* ── Page head ───────────────────────────────────────────── */ .page-head{margin-bottom:20px} .page-head .eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:600} .page-head h1{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em;margin:4px 0 3px} .page-head .sub{color:var(--ink-faint);font-size:12.5px} /* ── Buttons / inputs ────────────────────────────────────── */ button,select,input,textarea{font-family:var(--sans);font-size:13px;color:var(--ink)} button{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:8px 14px;cursor:pointer; font-weight:500;display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow); transition:border-color .12s,background .12s} button:hover{border-color:var(--accent-dim);color:var(--accent-dim)} button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600} button.primary:hover{background:var(--accent-dim);color:#fff} button:disabled{opacity:.55;cursor:not-allowed} button.ghost{background:transparent;box-shadow:none;border-color:transparent} button.ghost:hover{border-color:var(--line)} button.danger:hover{border-color:var(--bad);color:var(--bad)} button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px} select,input,textarea{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:8px 11px} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:5px} .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} /* grid/flex children must be allowed to shrink — prevents canvas-width deadlock that forced horizontal overflow (and zoomed-out mobile rendering) */ .grid,.grid>*,.col,.col>*,.card,.chart-box{min-width:0} canvas{max-width:100%} /* ── Cards ───────────────────────────────────────────────── */ .card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)} .card h3{font-family:var(--sans);font-weight:600;font-size:13.5px;margin:0 0 2px} .card .hint{font-size:12px;color:var(--ink-faint);margin:0 0 14px} .grid{display:grid;gap:14px} .cols-2{grid-template-columns:1.55fr 1fr} @media(max-width:1100px){.cols-2{grid-template-columns:1fr}} /* ── Tabs ────────────────────────────────────────────────── */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px; overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabs a{flex:none;white-space:nowrap} .tabs a{font-size:13px;font-weight:500;padding:9px 14px;color:var(--ink-dim); border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer} .tabs a:hover{color:var(--ink)} .tabs a.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600} /* ── Badges / pills ──────────────────────────────────────── */ .badge{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:20px;border:1px solid var(--line)} .badge.critical{color:var(--bad);border-color:transparent;background:var(--bad-soft)} .badge.warn{color:var(--warn);border-color:transparent;background:rgba(168,119,15,.1)} .badge.info,.badge.open{color:var(--accent);border-color:transparent;background:var(--accent-soft)} .badge.good,.badge.resolved{color:var(--good);border-color:transparent;background:var(--good-soft)} .pill{font-size:11px;font-weight:600;padding:2px 8px;border:1px solid var(--line);border-radius:20px;color:var(--ink-dim)} /* ── Tables ──────────────────────────────────────────────── */ table{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums} th,td{text-align:right;padding:9px 11px;border-bottom:1px solid var(--line-soft);white-space:nowrap} th{color:var(--ink-faint);font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase} th:first-child,td:first-child{text-align:left} tbody tr:hover{background:var(--panel-2)} td.neg{color:var(--bad);font-weight:500} td.pos{color:var(--good);font-weight:500} /* ── Toast / overlay ─────────────────────────────────────── */ .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--panel); border-radius:8px;padding:11px 18px;font-size:13px;z-index:80;box-shadow:0 8px 30px rgba(0,0,0,.25); opacity:0;transition:opacity .2s} .toast.show{opacity:1} .toast.err{background:var(--bad);color:#fff} .overlay{position:fixed;inset:0;background:rgba(15,23,36,.5);display:none; align-items:flex-start;justify-content:center;padding:48px 16px;z-index:60;overflow:auto} .overlay.show{display:flex} .modal{background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;width:100%;max-width:540px;padding:22px 24px;box-shadow:0 20px 50px rgba(0,0,0,.2)} .modal h2{font-family:var(--display);font-weight:700;font-size:17px;margin:0 0 14px} .modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px} /* ── Page loader: skeleton screen ─────────────────────────── */ .page-loader{position:fixed;inset:0;z-index:70;background:var(--canvas); margin-left:var(--sidew);padding:26px clamp(20px,3vw,44px);overflow:hidden; transition:opacity .3s ease} @media(max-width:920px){.page-loader{margin-left:0;padding:20px 16px}} .page-loader.done{opacity:0;pointer-events:none} .sk{position:relative;overflow:hidden;background:var(--panel-2);border-radius:8px} .sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--panel) 65%,transparent),transparent); animation:skshine 1.4s ease-in-out infinite} @keyframes skshine{55%,100%{transform:translateX(100%)}} /* stagger the sweep so it flows down the page */ .sk-kpis .sk::after{animation-delay:.12s} .sk-grid .sk-col:first-child .sk::after{animation-delay:.24s} .sk-grid .sk-col:last-child .sk::after{animation-delay:.36s} .sk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:22px;max-width:1380px} .sk-eyebrow{width:150px;height:10px;margin-bottom:10px} .sk-title{width:260px;height:24px;margin-bottom:9px} .sk-sub{width:190px;height:10px} .sk-actions{display:flex;gap:10px} .sk-btn{width:104px;height:34px} .sk-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px;max-width:1380px} .sk-kpi{height:88px;border:1px solid var(--line-soft)} .sk-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;max-width:1380px} @media(max-width:1100px){.sk-grid{grid-template-columns:1fr}} .sk-col{display:flex;flex-direction:column;gap:14px} .sk-card{height:200px;border:1px solid var(--line-soft)} .sk-card.tall{height:300px} /* content fades in as the skeleton fades out */ .app-enter{animation:appfade .35s ease} @keyframes appfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.sk::after{animation:none}.app-enter{animation:none}} .empty{padding:38px;text-align:center;color:var(--ink-faint);font-size:12.5px} footer{margin-top:28px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:11px;color:var(--ink-faint)} /* login pages reuse panel vars */ @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ── Mobile: data tables scroll horizontally instead of breaking layout ── */ @media(max-width:700px){ div:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch} table{min-width:100%} .modal{max-width:96vw;padding:18px 16px} .page-head h1{font-size:19px} } /* ── Top progress bar ─────────────────────────────────────── */ #topBar{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;pointer-events:none} #topBar .tb-fill{height:100%;width:0%;opacity:0;border-radius:0 2px 2px 0; background:linear-gradient(90deg,var(--side-accent),var(--accent)); box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent); transition:width .25s ease,opacity .25s ease} /* ── Rendered markdown (AI output) ────────────────────────── */ .md{font-size:13px;line-height:1.65;color:var(--ink)} .md h3,.md h4,.md h5,.md h6{font-family:var(--sans);font-weight:700;margin:14px 0 6px;font-size:13.5px} .md h3{font-size:15px}.md h4{font-size:14px} .md p{margin:0 0 10px} .md ul,.md ol{margin:0 0 12px;padding-left:20px} .md li{margin-bottom:4px} .md strong{font-weight:700} .md code{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:4px;padding:1px 5px;font-family:var(--mono);font-size:11.5px} /* ── PWA-only (installed app): floating Liquid-Glass tab bar. html.pwa is set by app.js when display-mode is standalone (or iOS navigator.standalone) ── */ @media (max-width:920px){ .pwa .bottom-nav{ left:14px;right:14px;bottom:max(0px, calc(env(safe-area-inset-bottom) - 10px)); border-radius:30px;border:0.5px solid rgba(255,255,255,.16); background:color-mix(in srgb, var(--side-bg) 52%, transparent); -webkit-backdrop-filter:blur(24px) saturate(1.8); backdrop-filter:blur(24px) saturate(1.8); box-shadow:0 12px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10); padding:7px 10px} /* symmetric — safe-area clearance is on 'bottom' position, not padding */ .pwa .bottom-nav a,.pwa .bottom-nav button{border-radius:20px;padding:8px 2px;margin:0 3px;transition:background .15s} .pwa .bottom-nav .active{ background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.07)); -webkit-backdrop-filter:blur(8px) saturate(1.6); backdrop-filter:blur(8px) saturate(1.6); border:0.5px solid rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 8px rgba(0,0,0,.28)} .pwa .wrap{padding-bottom:112px} .pwa .page-loader{padding-bottom:112px} /* More-sheet gets the same glass */ .pwa .sheet .panel{background:color-mix(in srgb, var(--panel) 68%, transparent); -webkit-backdrop-filter:blur(26px) saturate(1.7); backdrop-filter:blur(26px) saturate(1.7); border:0.5px solid rgba(255,255,255,.12);border-bottom:none; box-shadow:0 -14px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08)} } /* PWA app mode: static feel — no pinch/double-tap zoom targets, no overscroll bounce */ .pwa, .pwa body{touch-action:pan-x pan-y; overscroll-behavior:none; -webkit-text-size-adjust:100%} /* universal modal close button + mobile chart sizing */ .modal{position:relative} .modal-x{position:absolute;top:12px;right:14px;width:38px;height:38px;padding:0;justify-content:center; border:1px solid var(--line);box-shadow:var(--shadow);background:var(--panel-2);border-radius:11px; color:var(--ink);font-size:17px;font-weight:600;line-height:1;transition:background .12s,color .12s,transform .1s} .modal-x:hover{background:var(--bad);border-color:var(--bad);color:#fff} .modal-x:active{transform:scale(.92)} @media(max-width:700px){ #splitBox{height:300px} } /* ── Pull-to-refresh indicator (PWA) ── */ #ptr{position:fixed;top:-44px;left:50%;transform:translateX(-50%);z-index:90; width:36px;height:36px;border-radius:50%;background:var(--panel);border:1px solid var(--line-soft); box-shadow:0 4px 14px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:transform .25s ease,opacity .2s ease} #ptr .ptr-spin{width:17px;height:17px;border-radius:50%;border:2.2px solid var(--line);border-top-color:var(--accent);transition:transform .2s} #ptr.ready .ptr-spin{transform:scale(1.15)} #ptr.spinning .ptr-spin{animation:ptrspin .7s linear infinite} @keyframes ptrspin{to{transform:rotate(360deg)}} @media(max-width:700px){ .bm-grid{grid-template-columns:1fr!important} } /* ── Monthly ledger → card-per-month on phones (7 cols is unreadable squished) ── */ @media(max-width:700px){ #ledger, #ledger tbody{display:block} #ledger thead{display:none} #ledger tr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 10px; padding:12px 13px;border:1px solid var(--line-soft);border-radius:11px;margin-bottom:9px;background:var(--panel-2)} #ledger td{display:flex;flex-direction:column;gap:2px;border:none;padding:0;text-align:left;white-space:nowrap;font-size:13px} #ledger td::before{content:attr(data-label);font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)} #ledger td:first-child{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between; font-family:var(--display);font-weight:700;font-size:14.5px;padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--line-soft)} #ledger td:first-child::before{content:none} #ledger td:first-child::after{content:"›";color:var(--ink-faint);font-size:18px;font-weight:400} .table-scroll{max-height:64vh} } /* ============ Accessibility & touch pass (ui-ux-pro-max audit) ============ */ /* Keyboard focus rings on ALL interactive elements (was inputs-only) */ a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .o-row:focus-visible, .hist-row:focus-visible, .m-line:focus-visible, .flag:focus-visible, .q-hint:focus-visible{ outline:2px solid var(--accent); outline-offset:2px} /* Kill 300ms tap delay + heavy grey tap-flash on touch */ button, a, select, label, summary, .o-row, .hist-row, .m-line, .q-hint, .bottom-nav a, .bottom-nav button, .flag[onclick]{touch-action:manipulation} html{-webkit-tap-highlight-color:transparent} /* Skip-to-content link (keyboard users) */ .skip-link{position:absolute;left:-999px;top:8px;z-index:200;background:var(--accent);color:#fff; padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600} .skip-link:focus{left:12px} /* Respect reduced-motion */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} } /* Touch targets ≥44px on phones (WCAG / Apple HIG) */ @media (max-width:700px){ button{min-height:44px} select,input,textarea{min-height:44px} .q-hint{min-height:40px;display:inline-flex;align-items:center} #hist a, .m-line{min-height:44px} } /* ── Pack import dropzone ── */ .dropzone{border:1.5px dashed var(--line);border-radius:12px;background:var(--panel-2);cursor:pointer; transition:border-color .15s,background .15s;padding:16px 18px} .dropzone:hover{border-color:var(--accent-dim)} .dropzone.drag{border-color:var(--accent);background:var(--accent-soft)} .dropzone .dz-inner{display:flex;align-items:center;gap:14px} .dropzone .dz-ico{width:30px;height:30px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* inline edit affordance on owner rows */ .o-row .mini-edit{margin-left:7px;padding:0 5px;min-height:0;font-size:12px;line-height:1.6;border:none; box-shadow:none;background:transparent;color:var(--ink-faint);opacity:0;transition:opacity .12s,color .12s} .o-row:hover .mini-edit{opacity:1} .o-row .mini-edit:hover{color:var(--accent)} @media(hover:none){.o-row .mini-edit{opacity:.7}} /* contractor pending-approval */ .pending-banner{background:var(--warn-soft,rgba(200,140,20,.12));border:1px solid rgba(200,140,20,.35); border-radius:10px;padding:11px 14px;font-size:13px;color:var(--ink-dim);margin-top:6px} .ctr.pending{border-color:rgba(200,140,20,.4)} .ctr .pend-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:#b5810f;background:rgba(200,140,20,.14);padding:3px 8px;border-radius:999px;margin-bottom:6px} .ctr .pend-acts{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap} .ctr .pend-acts button{font-size:12px;padding:6px 12px;min-height:0} /* plan.html — quotes panel */ .quotes-panel{margin:-4px 0 10px 0} .quotes-inner{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px} .qrow{display:flex;align-items:flex-start;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft)} .qrow:last-of-type{border-bottom:none} .qrow.pref{background:var(--accent-soft);margin:0 -8px;padding:8px;border-radius:7px;border-bottom:none} .qrow .qs{flex:1;min-width:0;font-size:13px} .qrow .qsc{font-size:11.5px;color:var(--ink-faint);margin-top:2px} .qrow .qamt{font-family:var(--mono);font-size:13px;font-weight:600;white-space:nowrap} .qrow .qact{display:flex;gap:9px;font-size:12px;white-space:nowrap} .qrow .qact a{color:var(--accent);text-decoration:none} .qform{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)} .qform input{font-size:13px;padding:8px 10px} .qform input:not([style*="max-width"]){flex:1;min-width:120px} .qfile{cursor:pointer;border:1px solid var(--line);border-radius:7px;padding:8px 11px;font-size:12px;color:var(--ink-dim);white-space:nowrap} .qfile:hover{border-color:var(--accent-dim);color:var(--accent)} .qtools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px} .qtools .pend-tag{background:none;padding:0} @media(max-width:700px){ .qform input:not([style*="max-width"]){min-width:0} .qrow{flex-wrap:wrap} } /* ── Collapsible sidebar ─────────────────────────────────────────────── */ .side{transition:width .2s ease} .wrap{transition:margin-left .2s ease} .nav-toggle{margin-left:auto;background:none;border:none;box-shadow:none;color:var(--side-ink);cursor:pointer; padding:5px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:none} .nav-toggle:hover{color:var(--side-ink-hi);background:rgba(255,255,255,.06)} .nav-toggle svg{width:18px;height:18px;display:block;transition:transform .2s ease} @media(max-width:920px){ .nav-toggle{display:none} } /* mobile uses the bottom nav */ html.nav-collapsed{--sidew:70px} .nav-collapsed .side .brand{flex-direction:column;gap:10px;padding:16px 0 12px;align-items:center} .nav-collapsed .side .brandtext{display:none} .nav-collapsed .nav-toggle{margin:0} .nav-collapsed .nav-toggle svg{transform:rotate(180deg)} /* chevron now points right = expand */ .nav-collapsed .side .links{padding:10px 8px} .nav-collapsed .side .links a{justify-content:center;padding:11px 0;gap:0} .nav-collapsed .side .links a .lbl{display:none} .nav-collapsed .side .links a svg{width:23px;height:23px} /* larger, easier to read */ .nav-collapsed .side .links .sec{height:1px;font-size:0;padding:0;margin:11px 12px;background:var(--side-line);overflow:hidden} .nav-collapsed .side .foot{flex-direction:column;gap:9px;padding:12px 6px;align-items:center} .nav-collapsed .side .foot .u{display:none} /* ── Sidebar footer buttons (theme + sign-out) — clearer, bigger ── */ .side .foot .foot-btn{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center; border-radius:8px;font-size:15px;background:rgba(255,255,255,.05);border:1px solid transparent} .side .foot .foot-btn:hover{background:rgba(255,255,255,.1);color:var(--side-ink-hi)} .side .foot .foot-btn svg{width:18px;height:18px;stroke:currentColor;fill:none} .side .foot .foot-btn.logout:hover{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)} .nav-collapsed .side .foot .foot-btn{width:36px;height:36px} .nav-collapsed .side .foot .foot-btn svg{width:20px;height:20px} /* ── Dashboard: Nedbank cash-flow card ── */ .flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:12px} @media(max-width:700px){.flow-grid{grid-template-columns:1fr;gap:16px}} .flow-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line-soft);padding-bottom:6px;margin-bottom:8px} .flow-h span{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)} .flow-h b{font-variant-numeric:tabular-nums;font-size:14px} .flow-h b.pos{color:var(--good)} .flow-h b.neg{color:var(--bad)} .flow-row{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:10px;padding:4px 0;font-size:12.5px} .flow-row .fl{color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .flow-row .fbar{height:8px;background:var(--panel-2);border-radius:4px;overflow:hidden} .flow-row .fbar i{display:block;height:100%;border-radius:4px} .flow-row .fbar i.in{background:var(--good)} .flow-row .fbar i.out{background:var(--bad)} .flow-row .fv{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap} @media(max-width:700px){.flow-row{grid-template-columns:110px 1fr auto}}