/* ============================================================ FLIP PROJECT MANAGER · 2026 redesign design system Fonts: Space Grotesk (headings/numbers) · Instrument Sans (body) JetBrains Mono (labels/data) Themes: light (default) · dark · babyblue — accents stay constant ============================================================ */ :root{ /* Redesign core tokens — LIGHT (default) */ --bg:#ffffff; --panel:#ffffff; --panel2:#f3f6f9; --border:rgba(15,23,32,.10); --text:#141922; --sub:#5c646f; --track:rgba(15,23,32,.09); --grid:rgba(15,23,32,.08); /* Constant accents */ --a1:#2ee6c4; --a2:#c7f24d; --violet:#a78bfa; --cyan:#3ad8ff; --warn:#f5b544; --danger:#ff6b6b; --good:#12b98d; --a1-ink:#04120f; /* text color on top of accent fills */ /* Accent as readable text (needs contrast on light panels) */ --a1-text:#0c8f77; /* Fonts */ --font-head:'Space Grotesk',system-ui,sans-serif; --font-body:'Instrument Sans',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; /* Legacy aliases (older templates reference these) */ --ink:var(--text); --muted:var(--sub); --line:var(--border); --brand:var(--a1-text); --brand2:#0a705e; --ok:#12b98d; --neutral:#8a97a4; --pos:#12b98d; --neg:#e05252; --accent:#2563eb; --accent-strong:#1d4ed8; --accent-soft:#eff6ff; --accent-line:#dbeafe; --accent-ring:rgba(37,99,235,.16); --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --field-border:#cbd5e1; --field-bg:#fff; --radius-lg:16px; --radius:11px; --radius-sm:8px; --shadow-card:0 1px 2px rgba(15,23,42,.04),0 4px 14px rgba(15,23,42,.06); --th-bg:var(--panel2); --th-ink:var(--sub); --code-bg:var(--panel2); --bar-bg:var(--track); } /* ===== Themes (set via the theme cookie -> ) ===== */ [data-theme="dark"]{ --bg:#0a0b0d; --panel:#141619; --panel2:#1b1e23; --border:rgba(255,255,255,.08); --text:#eceef1; --sub:#8b9299; --track:rgba(255,255,255,.09); --grid:rgba(255,255,255,.06); --a1-text:#2ee6c4; --brand2:#7de8d3; --slate-50:#16181c; --slate-100:#1b1e23; --slate-200:#272b31; --slate-300:#343a42; --slate-400:#8b9299; --slate-500:#8b9299; --slate-600:#aab1b8; --slate-700:#cdd2d8; --slate-800:#eceef1; --field-bg:#0f1113; --field-border:#343a42; --accent-soft:#1e3a5f; --accent-line:#2b4c72; --th-bg:var(--panel2); --th-ink:var(--sub); --code-bg:var(--panel2); --bar-bg:var(--track); --shadow-card:0 1px 2px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.4); } [data-theme="dark"] body{background:var(--bg)} [data-theme="dark"] .card,[data-theme="dark"] table.grid{background:var(--panel)} [data-theme="dark"] .warn-card{background:#3a2f12;border-color:#6b551f} [data-theme="dark"] .flash{background:#3a2f12;border-color:#6b551f;color:#f0d98a} /* Dark: alerts, budget-table tints, and brighter profit/loss */ [data-theme="dark"] .pos{color:#4ade80} [data-theme="dark"] .neg{color:#f87171} [data-theme="dark"] .overdue-row td{background:#3a1a1a} [data-theme="dark"] .overdue-banner{background:#3a1a1a;border-color:#7f1d1d;color:#fca5a5} [data-theme="dark"] .bva .secrow td{background:#14283e;color:#67e8f9;border-color:#274766} [data-theme="dark"] .bva .grouprow td{background:#1c2734;color:#cbd5e1} [data-theme="dark"] .bva .totalrow td{background:#123a5c;color:#e2e8f0} [data-theme="dark"] .bsec-head,[data-theme="dark"] .bsec-sub{background:#14283e;border-color:#274766} [data-theme="dark"] .bsec-name,[data-theme="dark"] .bsec-sub .lbl{color:#67e8f9} [data-theme="dark"] .bgrand{background:#123a5c} [data-theme="dark"] .cell,[data-theme="dark"] .bgrp-name,[data-theme="dark"] .bsec-name{background:var(--field-bg);color:var(--ink)} [data-theme="dark"] .btable .ghead th{background:#1c2a24;color:#cbd5e1;border-color:#2a3a33} [data-theme="dark"] .btable .colhead th{color:#8ca6bd;border-color:var(--line)} [data-theme="dark"] .btable .gsub{color:#e2e8f0} [data-theme="dark"] .bsec-name:focus,[data-theme="dark"] .bgrp-name:focus{background:var(--field-bg);border-color:var(--field-border)} [data-theme="dark"] .iconbtn{color:#f87171} [data-theme="dark"] .iconbtn:hover{background:#3a1a1a} [data-theme="dark"] .bgrand .nums{color:#bcdcf5} /* Outlier comp rows (both themes) */ .comp-out td{opacity:.5} /* Scope of Work */ .scopegrp{margin-top:14px} .scopecat th{background:var(--slate-100);color:var(--slate-800);font-size:13px;font-weight:800; text-transform:uppercase;letter-spacing:.03em;padding:8px 12px} .scopecat-tot{float:right;font-variant-numeric:tabular-nums} .scopetotal td{background:var(--slate-100);font-size:15px} /* Holding & Financing cards */ .fcard{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--radius-lg); padding:16px 18px;margin-bottom:16px} .fcard h2{margin:0 0 12px;font-size:15px} .frow{display:flex;gap:14px;flex-wrap:wrap} .frow label{display:flex;flex-direction:column;font-size:12px;font-weight:600;color:var(--slate-600);gap:4px} .frow input{padding:8px 11px;border:1px solid var(--field-border);border-radius:var(--radius-sm); font-size:14px;background:var(--field-bg);color:var(--ink);width:150px} /* Empty states (shared) */ .emptystate{text-align:center;padding:40px 22px;border:1px dashed var(--slate-300); border-radius:var(--radius-lg);background:var(--slate-50);color:var(--slate-500);margin:16px 0} .emptystate .ico{font-size:30px;line-height:1;opacity:.55;margin-bottom:10px} .emptystate h3{margin:0 0 5px;font-size:15px;color:var(--slate-700)} .emptystate p{margin:0 auto;font-size:13px;max-width:440px} /* Guided onboarding — welcome hero, setup strip, next-step nudges */ .welcome{background:linear-gradient(135deg,var(--accent-soft),var(--panel));border:1px solid var(--accent-line); border-radius:var(--radius-lg);padding:30px 32px;margin:8px 0 4px;box-shadow:var(--shadow-card)} .welcome-ico{font-size:38px;line-height:1;margin-bottom:6px} .welcome h2{margin:0 0 6px;font-size:22px} .welcome p{margin:0 0 14px;color:var(--slate-600);font-size:14px} .welcome-steps{margin:0 0 18px;padding-left:22px;display:grid;gap:7px;font-size:14px;color:var(--ink);max-width:640px} .setupstrip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--accent-soft); border:1px solid var(--accent-line);border-radius:var(--radius);padding:10px 14px;margin:0 0 16px} .setup-title{font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-strong)} .setup-todo{font-size:13px;font-weight:600;color:var(--accent-strong);text-decoration:none; background:var(--panel);border:1px solid var(--accent-line);border-radius:20px;padding:4px 12px} .setup-todo:hover{background:var(--accent);color:#fff;border-color:var(--accent)} .nextstep{margin-top:8px;font-size:12px;font-weight:700;color:var(--accent-strong); background:var(--accent-soft);border-radius:6px;padding:4px 8px;display:inline-block} .nextbanner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--accent-soft); border:1px solid var(--accent-line);border-radius:var(--radius-lg);padding:14px 18px;margin:0 0 16px} .nextbanner-main{flex:1;min-width:200px} .nextbanner-step{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-strong)} .setup-progress{display:flex;gap:6px} .setup-progress .dot{width:11px;height:11px;border-radius:50%;background:var(--slate-300);display:inline-block} .setup-progress .dot.done{background:var(--accent)} /* Property daily-action bar — the everyday "doing" actions, distinct from view tabs + Tools overflow */ .pactions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px} .pactions .btn{font-size:13px} .btn.edit{background:var(--accent-soft);color:var(--accent-strong);border:1px solid var(--accent-line);font-weight:700} .btn.edit:hover{background:var(--accent);color:#fff;border-color:var(--accent)} [data-theme="dark"] .btn.edit{background:#16304d;color:#bfdbfe;border-color:#2b4c72} .card.coop{border-color:var(--accent-line);background:var(--accent-soft)} [data-theme="dark"] .card.coop{background:#16304d;border-color:#2b4c72} [data-theme="dark"] .welcome{background:linear-gradient(135deg,#16304d,var(--panel))} [data-theme="dark"] .setup-todo{background:var(--panel)} /* Assign-receipt inline form controls (theme-aware) */ .assignform{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .assignform select,.assignform input{background:var(--field-bg);color:var(--ink); border:1px solid var(--field-border);border-radius:6px;padding:6px 8px;font-size:12.5px} .filter select{background:var(--field-bg);color:var(--ink)} /* Dark-mode touch-ups for the newer pages */ [data-theme="dark"] .tag{background:#3a2f12;color:#f0d98a} [data-theme="dark"] .scopecat th{background:#14283e;color:#cbd5e1} [data-theme="dark"] .scopetotal td{background:#123a5c} [data-theme="dark"] .emptystate{background:#182234;border-color:#334155} @media print{ .topbar,.navmenu,.themesw,footer,.noprint,.iconbtn,.crumb{display:none!important} .editpage{max-width:100%!important} main{padding:0!important} body{background:#fff!important} } [data-theme="babyblue"]{ --bg:#e6eefb; --panel:#ffffff; --panel2:#eef4fe; --border:rgba(24,52,104,.12); --text:#16233a; --sub:#5a6b88; --track:rgba(24,52,104,.10); --grid:rgba(24,52,104,.08); --a1-text:#0c8f77; --brand2:#0a705e; --slate-50:#f4f8fe; --slate-100:#eef4fe; --slate-200:#dbe6f7; --slate-300:#c3d5ef; --slate-400:#7d8fae; --slate-500:#5a6b88; --slate-600:#48597a; --slate-700:#2e4266; --slate-800:#16233a; --field-bg:#ffffff; --field-border:#c3d5ef; --accent-soft:#dbeafe; --accent-line:#bcd8f5; --th-bg:var(--panel2); --th-ink:var(--sub); --code-bg:var(--panel2); --bar-bg:var(--track); } [data-theme="babyblue"] body{background:var(--bg)} *{box-sizing:border-box} body{margin:0;font-family:var(--font-body); background:var(--bg);color:var(--text);font-size:14px;line-height:1.45} a{color:var(--a1-text);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4,.num{font-family:var(--font-head);letter-spacing:-.02em} /* ===== Redesigned top bar: panel surface, gradient logo mark, underline nav ===== */ .topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap; gap:10px;background:var(--panel);color:var(--text);padding:14px 28px; border-bottom:1px solid var(--border);position:sticky;top:0;z-index:70} .topbar .brand{display:flex;align-items:center;gap:11px} .topbar .brand .logomark{width:30px;height:30px;border-radius:9px;flex:none; background:linear-gradient(135deg,var(--a1),var(--a2));display:flex;align-items:center; justify-content:center;font-family:var(--font-head);font-weight:700;color:var(--a1-ink);font-size:15px} .topbar .brand a{color:var(--text);font-family:var(--font-head);font-weight:600;font-size:15px;line-height:1.1} .topbar .brand .sub{display:block;color:var(--sub);margin:0;font-weight:400;font-size:10px; font-family:var(--font-mono)} .topbar nav{display:flex;align-items:center;gap:20px} .topbar nav a{color:var(--sub);font-weight:500;font-size:13.5px;padding:4px 0} .topbar nav a:hover{color:var(--text);text-decoration:none} .topbar nav a.active,.navmenu > summary.active{color:var(--text);font-weight:600; box-shadow:inset 0 -2px 0 var(--a1)} .topbar nav form.inline{margin:0} .themesw{display:inline-flex;align-items:center;gap:6px;background:var(--panel2); border:1px solid var(--border);border-radius:999px;padding:4px} .themesw a{display:inline-flex;align-items:center;justify-content:center;line-height:1; color:var(--sub);font-family:var(--font-mono);font-weight:500;font-size:11px; padding:7px 14px;border-radius:999px;text-decoration:none;white-space:nowrap} .themesw a:hover{color:var(--text);text-decoration:none} .themesw a.on{background:#141922;color:var(--a1);font-weight:700} /* Screen-share privacy mode: blur profit figures (body.privacy set via cookie) */ .privacysw{font-size:12.5px;padding:8px 13px;border-radius:10px;background:var(--panel2); border:1px solid var(--border);color:var(--sub)!important;font-weight:500} .privacysw:hover{color:var(--text)!important;text-decoration:none} .privacysw.on{background:var(--warn);color:#3a2c00!important;font-weight:700;border-color:transparent} body.privacy .sensitive,body.privacy [data-profit]{filter:blur(7px);user-select:none;pointer-events:none} /* Hamburger toggle (hidden on desktop, shown on mobile) */ .hamburger{display:none;flex-direction:column;justify-content:center;gap:4px;cursor:pointer;padding:8px;margin:-4px} .hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:.2s} #navtoggle:checked ~ .hamburger span:nth-child(1){transform:translateY(6px) rotate(45deg)} #navtoggle:checked ~ .hamburger span:nth-child(2){opacity:0} #navtoggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .btn{background:var(--panel2);color:var(--text);border:1px solid var(--border);padding:7px 13px; border-radius:10px;font-weight:600;cursor:pointer;font-size:13px;font-family:var(--font-body)} .btn:hover{border-color:var(--a1);color:var(--a1-text)} main{max-width:1320px;margin:24px auto;padding:0 28px} footer{max-width:1320px;margin:30px auto;padding:14px 28px;color:var(--sub); border-top:1px solid var(--border);font-size:12px} h1{font-size:24px;margin:0 0 6px;font-weight:700} h2{font-size:16px;margin:28px 0 10px;color:var(--text);font-weight:600} .crumb{margin:0 0 8px} .muted{color:var(--muted)} .pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700;color:#fff} .tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:5px;font-size:11px; background:#fff4d6;color:#8a5a00;font-weight:700} .pill.ok,.fill.ok{background:var(--ok)} .pill.warn,.fill.warn{background:var(--warn)} .pill.danger,.fill.danger{background:var(--danger)} .pill.neutral,.fill.neutral{background:var(--neutral)} .flash{background:#fff7e0;border:1px solid #f0d98a;color:#7a5a00;padding:10px 14px; border-radius:8px;margin:0 0 16px} .cards{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0} .card{background:var(--panel);border:1px solid var(--line);border-radius:10px; padding:12px 16px;min-width:150px;flex:1} .card .k{color:var(--muted);font-size:12px} .card .v{font-size:21px;font-weight:700;margin-top:3px} .card .sub{color:var(--muted);font-size:11px} .warn-card{border-color:#f0c98a;background:#fff9ee} .pos{color:var(--pos)} .neg{color:var(--neg)} table.grid{width:100%;border-collapse:collapse;background:var(--panel); border:1px solid var(--line);border-radius:10px;overflow:hidden} table.grid th,table.grid td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left} table.grid th{background:var(--th-bg);font-size:10.5px;color:var(--th-ink);text-transform:uppercase; letter-spacing:.05em;font-family:var(--font-mono);font-weight:500} table.grid tr:last-child td{border-bottom:0} table.grid td.r,table.grid th.r{text-align:right;font-variant-numeric:tabular-nums} table.grid.small th,table.grid.small td{padding:6px 10px;font-size:13px} td.desc{max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .usecol{width:160px} .bar{display:inline-block;width:110px;height:9px;background:var(--bar-bg);border-radius:6px; overflow:hidden;vertical-align:middle} .bar.tall{height:14px;width:100%;max-width:420px} .bar .fill{display:block;height:100%;border-radius:6px} .barlabel{margin-left:8px;font-size:12px;color:#45525e;font-variant-numeric:tabular-nums} .bigbar{margin:14px 0;display:flex;flex-direction:column;gap:6px} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media(max-width:760px){.two-col{grid-template-columns:1fr}} code{background:var(--code-bg);padding:1px 5px;border-radius:4px;font-size:12.5px} .phead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap} .exports{display:flex;gap:8px;flex-wrap:wrap} .btn.ghost{background:var(--panel);border:1px solid var(--border);color:var(--text); padding:6px 11px;border-radius:9px;font-weight:600;font-size:12.5px} .btn.ghost:hover{border-color:var(--a1);color:var(--a1-text);text-decoration:none} .tabs{margin-top:14px} .tabs > input[type=radio]{position:absolute;opacity:0;pointer-events:none} .tablist{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:16px;flex-wrap:wrap} .tablist label{padding:9px 16px;cursor:pointer;font-weight:600;color:var(--muted); border-bottom:2px solid transparent;margin-bottom:-2px} .tablist label:hover{color:var(--brand2)} .tablist .cnt{display:inline-block;background:#e7edf2;color:#5a6772;border-radius:10px; padding:0 7px;font-size:11px;margin-left:4px} .tabpanel{display:none} #tab-budget:checked ~ .tablist label[for=tab-budget], #tab-overview:checked ~ .tablist label[for=tab-overview], #tab-categories:checked ~ .tablist label[for=tab-categories], #tab-transactions:checked ~ .tablist label[for=tab-transactions], #tab-sources:checked ~ .tablist label[for=tab-sources]{color:var(--brand);border-bottom-color:var(--brand)} #tab-budget:checked ~ #panel-budget, #tab-overview:checked ~ #panel-overview, #tab-categories:checked ~ #panel-categories, #tab-transactions:checked ~ #panel-transactions, #tab-sources:checked ~ #panel-sources{display:block} .srcdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#bbb;vertical-align:middle} .srcdot.home_depot{background:#e07a1f} .srcdot.resimpli{background:#3b73d2} .srcdot.quickbooks{background:#1f9d55} .btn.primary{background:linear-gradient(135deg,var(--a1),var(--a2));color:var(--a1-ink); border:0;padding:8px 15px;border-radius:11px;font-weight:600;font-size:13px} .btn.primary:hover{filter:brightness(1.06);text-decoration:none;color:var(--a1-ink)} .btn.danger{background:#fff;color:var(--danger);border:1px solid #e6b3b3; padding:7px 13px;border-radius:6px;font-weight:700;cursor:pointer} .btn.danger:hover{background:#fdeef0} /* ===== Redesigned Edit / Add Property page (slate-blue, grouped cards) ===== */ .editpage{max-width:820px} .editpage .crumb a{color:var(--slate-500);font-weight:600} .edithead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 20px} .edithead h1{margin:0;color:var(--slate-800);letter-spacing:-.01em} .statusbadge{display:inline-block;padding:4px 12px;border-radius:20px;background:var(--accent-soft); color:var(--accent-strong);font-weight:700;font-size:12px;border:1px solid var(--accent-line)} .statuschip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700; border:1px solid transparent;margin-left:6px;vertical-align:middle} .statusbadge.st-active,.statuschip.st-active{background:var(--accent-soft);color:var(--accent-strong);border-color:var(--accent-line)} .statusbadge.st-contract,.statuschip.st-contract{background:#f3e8ff;color:#7e22ce;border-color:#e9d5ff} .statusbadge.st-forsale,.statuschip.st-forsale{background:#fff4d6;color:#a16207;border-color:#fde68a} .statusbadge.st-sold,.statuschip.st-sold{background:#dcfce7;color:#15803d;border-color:#bbf7d0} .statusbadge.st-done,.statuschip.st-done{background:#dcfce7;color:#15803d;border-color:#bbf7d0} .statusbadge.st-hold,.statuschip.st-hold{background:#f1f5f9;color:#475569;border-color:#e2e8f0} .statusbadge.st-lead,.statuschip.st-lead{background:#ccfbf1;color:#0f766e;border-color:#99f6e4} .statusbadge.st-pending,.statuschip.st-pending{background:#ffedd5;color:#c2410c;border-color:#fed7aa} .statusbadge.st-client,.statuschip.st-client{background:#e0f2fe;color:#0369a1;border-color:#bae6fd} .statusbadge.st-dead,.statuschip.st-dead{background:#f1f0ee;color:#8a8580;border-color:#e0ddd8;text-decoration:line-through} .tmplbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--slate-50); border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:14px 18px;margin:0 0 18px} .tmplbar-label{font-weight:700;color:var(--slate-700);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em} .tmplform{display:flex;gap:8px;margin:0} .tmplbar select{padding:8px 10px;border:1px solid var(--field-border);border-radius:var(--radius-sm); background:#fff;font-size:13px;color:var(--ink)} .tmplbar-hint{color:var(--slate-500);font-size:12px;flex-basis:100%;margin:2px 0 0} .pform{max-width:820px;background:transparent;border:0;border-radius:0;padding:0; display:flex;flex-direction:column;gap:18px} .pform .req{color:var(--danger)} /* Cards */ .fcard{background:var(--panel);border:1px solid var(--slate-200);border-radius:var(--radius-lg); box-shadow:var(--shadow-card);overflow:hidden} .fcard-head{padding:16px 22px 0} .fcard-title{margin:0;font-size:15px;color:var(--slate-800);font-weight:800} .fcard-cap{margin:4px 0 0;font-size:12.5px;color:var(--slate-500)} .fcard-body{padding:16px 22px 22px;display:flex;flex-direction:column;gap:18px} /* Field component */ .field{display:flex;flex-direction:column;gap:6px} .flabel{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--slate-500)} .field > input,.field > select{width:100%;padding:9px 12px;border:1px solid var(--field-border); border-radius:var(--radius-sm);font-size:14px;color:var(--ink);background:var(--field-bg);font-weight:500} .field > input:focus,.field > select:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)} .field .hint{font-weight:400;color:var(--slate-500);font-size:12px} /* Currency input with $ prefix */ .ipfx{display:flex;align-items:center;border:1px solid var(--field-border);border-radius:var(--radius-sm); background:var(--field-bg);overflow:hidden} .ipfx:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)} .ipfx .pfx{padding-left:12px;color:var(--slate-400);font-weight:600;font-size:14px} .ipfx input{flex:1;min-width:0;border:0;background:transparent;padding:9px 12px 9px 5px; font-size:14px;font-weight:500;color:var(--ink)} .ipfx input:focus{outline:none} /* Grids */ .fgrid{display:grid;gap:16px;align-items:end} .fgrid.cols-3{grid-template-columns:repeat(3,1fr)} .fgrid.cols-2{grid-template-columns:repeat(2,1fr)} @media(max-width:640px){.fgrid.cols-3,.fgrid.cols-2{grid-template-columns:1fr}} /* Hide number spinners for a uniform look */ .pform input[type=number]{-moz-appearance:textfield} .pform input[type=number]::-webkit-outer-spin-button, .pform input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* Target Profit result strip */ .tp-result{display:flex;flex-direction:column;gap:4px;background:var(--accent-soft); border:1px solid var(--accent-line);border-radius:var(--radius);padding:16px 18px} .tp-result-top{display:flex;align-items:center;gap:10px} .tp-result-label{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-strong)} .tp-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--accent-strong); background:#fff;border:1px solid var(--accent-line);border-radius:20px;padding:1px 8px} .tp-result-value{font-size:30px;font-weight:800;color:var(--slate-800);font-variant-numeric:tabular-nums;line-height:1.1} .tp-result-value.neg{color:var(--neg)} .tp-result-formula{font-size:12px;color:var(--slate-500)} /* Action + danger areas */ .editactions{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--slate-200); border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:14px 22px} .editpage .btn.primary{background:var(--accent);border-color:var(--accent)} .editpage .btn.primary:hover{background:var(--accent-strong)} .dangerzone{margin-top:22px;border:1px solid #f3d0d0;background:#fef6f6;border-radius:var(--radius-lg); padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .dangerzone .dz-title{font-weight:800;color:#a13a3a;font-size:13px;margin:0} .dangerzone .dz-text{font-size:12.5px;color:#8a5555;margin:2px 0 0} .delform{margin:0} .secthead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .secthead h2{margin:28px 0 10px} .filter select{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:12.5px; background:var(--field-bg);color:var(--text);font-weight:600} .exportbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px; padding:10px 12px;background:var(--slate-100);border:1px solid var(--line);border-radius:8px} .exportbar .exlabel{font-weight:700;color:var(--brand2);font-size:12px;text-transform:uppercase; letter-spacing:.03em;margin-right:4px} .assignform{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0} .assignform select{padding:5px 7px;border:1px solid var(--line);border-radius:6px;font-size:12px;background:#fff} .assignform .aliaschk{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--slate-500)} .reviewbox{background:var(--panel);border:1px solid var(--slate-200);border-radius:var(--radius-lg); box-shadow:var(--shadow-card);margin-top:24px} .hlist{margin:6px 0 0;padding-left:18px} .hlist li{margin:5px 0} /* Property photos */ .propcell{display:flex;align-items:center;gap:15px} .propthumb{flex:none;width:104px;height:76px;border-radius:11px;overflow:hidden;background:var(--slate-100); border:1px solid var(--slate-200);display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-card);transition:transform .12s} .propthumb:hover{transform:scale(1.03)} .propthumb img{width:100%;height:100%;object-fit:cover;display:block} .propthumb-ph{font-size:32px;opacity:.4} .propmeta{display:flex;flex-direction:column;gap:3px;min-width:0} .propname{font-size:16.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;text-decoration:none} .propname:hover{color:var(--accent)} .propaddr{font-size:12px;color:var(--muted)} .propchips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:3px} .propchips .statuschip{margin-left:0} table.grid.portfolio td{padding:14px 14px;vertical-align:middle} table.grid.portfolio td.r{font-size:13.5px;font-weight:600} table.grid.portfolio .bar{height:11px} /* Pipeline stat cards (clickable stage filters) */ .pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:4px 0 16px} .pipe-card{display:block;background:var(--panel);border:1px solid var(--slate-200);border-radius:var(--radius-lg); box-shadow:var(--shadow-card);padding:16px 18px;text-decoration:none;transition:transform .12s,box-shadow .12s} .pipe-card:hover{transform:translateY(-2px);text-decoration:none} .pipe-card.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring),var(--shadow-card)} .pipe-k{font-size:12px;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.03em} .pipe-v{font-size:30px;font-weight:800;color:var(--ink);margin-top:4px;line-height:1.1} @media(max-width:760px){.pipeline{grid-template-columns:repeat(2,1fr)}} .secthead .cnt{display:inline-block;background:var(--slate-100);color:var(--slate-500);border-radius:20px; padding:1px 10px;font-size:13px;font-weight:700;margin-left:6px;vertical-align:middle} /* Big clickable project cards */ .projgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px;margin-top:8px} .projcard{display:block;background:var(--panel);border:1px solid var(--slate-200);border-radius:var(--radius-lg); box-shadow:var(--shadow-card);overflow:hidden;text-decoration:none;transition:transform .12s,box-shadow .12s} .projcard:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(15,23,42,.13);text-decoration:none} .projcard-photo{position:relative;aspect-ratio:16/10;background:var(--slate-100);display:flex;align-items:center;justify-content:center} .projcard-photo img{width:100%;height:100%;object-fit:cover;display:block} .projcard-ph{font-size:54px;opacity:.35} .projcard-status{position:absolute;top:10px;left:10px;margin-left:0;box-shadow:var(--shadow-card)} .projcard-body{padding:14px 16px 16px} .projcard-name{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em} .projcard-addr{font-size:12.5px;color:var(--muted);margin-top:2px} .projcard-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin:13px 0 11px} .projcard-stats .k{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--slate-400)} .projcard-stats .v{display:block;font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .projcard .barlabel{display:block;margin:6px 0 0} /* Deal Analyzer */ .dealmao{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 12px} .dealmao-card{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff; border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow-card)} .dealmao-card.alt{background:linear-gradient(135deg,#334155,#1e293b)} .dealmao-card .k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.92} .dealmao-card .v{font-size:34px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;line-height:1.1} .dealmao-card .sub{font-size:12px;opacity:.85;margin-top:2px} @media(max-width:640px){.dealmao{grid-template-columns:1fr}} .dealverdict{font-size:13.5px;color:var(--slate-700);margin:0 0 14px} .dealverdict .statuschip{margin-left:0;margin-right:6px} tr.totalline td{border-top:2px solid var(--slate-300);font-size:14px} /* Rehab progress / schedule */ .statuschip.st-over{background:#fee2e2;color:#b91c1c;border-color:#fecaca} .overdue-row td{background:#fef2f2} .schedadd{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px} .schedadd input{padding:8px 11px;border:1px solid var(--field-border);border-radius:var(--radius-sm); font-size:13px;background:var(--field-bg);color:var(--ink)} .schedadd input[name=name]{flex:1;min-width:200px} .schedadd select{padding:8px 10px;border:1px solid var(--field-border);border-radius:var(--radius-sm); font-size:13px;background:var(--field-bg);color:var(--ink)} .phasecat{margin-top:4px;font-size:11.5px;color:var(--slate-600);font-variant-numeric:tabular-nums} .phasecat .statuschip{margin-left:0;margin-right:6px} .overdue-banner{background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c;border-radius:var(--radius); padding:9px 14px;font-weight:700;font-size:13px;margin:0 0 12px} .overdue-banner .scroll{font-weight:600} .overdue-flag{background:#dc2626;color:#fff;font-size:11.5px;font-weight:700;padding:6px 12px; text-align:center;letter-spacing:.02em;animation:pulseflag 1.8s ease-in-out infinite} @keyframes pulseflag{0%,100%{background:#dc2626}50%{background:#991b1b}} .projdesc{color:var(--slate-700);font-size:13.5px;line-height:1.55;margin:0 0 14px; background:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--radius);padding:12px 16px} /* Tasks by phase */ .tasksec{margin:0 0 16px} .tasksec-head{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em; color:var(--accent-strong);margin:0 0 6px} .taskassignee{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:var(--slate-600); background:var(--slate-100);border-radius:20px;padding:1px 9px} .orderline{font-size:11.5px;color:var(--slate-600);margin-top:3px} .taskadd{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--radius-lg); padding:14px;margin-top:12px;display:flex;flex-direction:column;gap:9px} .taskadd-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .taskadd input,.taskadd select{padding:8px 11px;border:1px solid var(--field-border);border-radius:var(--radius-sm); font-size:13px;background:var(--field-bg);color:var(--ink)} .taskadd input[name=name]{flex:1;min-width:180px} .taskadd-desc{width:100%} .orderfields{gap:8px;flex-wrap:wrap} .propfacts{display:flex;gap:16px;flex-wrap:wrap;margin:4px 0 0;color:var(--slate-600);font-size:13px} .propfacts span{white-space:nowrap} /* Photo Log gallery + lightbox */ .photolog{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:8px 0 12px} .photolog-thumb{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;cursor:pointer; border:1px solid var(--slate-200);background:var(--slate-100)} .photolog-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .15s} .photolog-thumb:hover img{transform:scale(1.05)} .photolog-cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.65)); color:#fff;font-size:10.5px;padding:14px 8px 5px;line-height:1.3} .photolog-del{position:absolute;top:5px;right:5px;margin:0} .photolog-del button{background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:50%;width:22px;height:22px; font-size:14px;line-height:1;cursor:pointer} .photolog-del button:hover{background:var(--danger)} .photolog-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px; background:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:12px} .photolog-add input[type=file]{font-size:12.5px;color:var(--slate-500)} .photolog-add input[name=caption]{flex:1;min-width:200px} .photolog-add input[name=caption],.photolog-add input[type=date]{padding:8px 11px;border:1px solid var(--field-border); border-radius:var(--radius-sm);font-size:13px;background:var(--field-bg);color:var(--ink)} .lightbox{position:fixed;inset:0;z-index:100;background:rgba(15,23,42,.92);display:flex;align-items:center;justify-content:center} .lightbox[hidden]{display:none} .lightbox img{max-width:88vw;max-height:82vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)} .lb-close{position:absolute;top:14px;right:20px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer} .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);color:#fff;border:0; font-size:32px;width:52px;height:52px;border-radius:50%;cursor:pointer} .lb-prev{left:18px}.lb-next{right:18px} .lb-nav:hover{background:rgba(255,255,255,.3)} .lb-meta{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#fff;font-size:13px} .lb-meta #lb-date{font-weight:700;margin-right:8px} /* Milestones */ .milestones{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 14px} .ms{background:var(--panel);border:1px solid var(--slate-200);border-radius:var(--radius);padding:9px 14px;min-width:110px} .ms-k{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--slate-400)} .ms-v{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-top:2px} .ms-hl{background:var(--accent-soft);border-color:var(--accent-line)} .ms-hl .ms-v{color:var(--accent-strong)} /* Kanban pipeline board */ .board{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;align-items:flex-start} .board-col{flex:0 0 244px;background:var(--slate-50);border:1px solid var(--slate-200); border-radius:var(--radius-lg);padding:10px} .board-col-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px} .board-col-head .cnt{background:var(--slate-100);color:var(--slate-500);border-radius:20px; padding:1px 9px;font-size:12px;font-weight:700} .board-drop{min-height:44px;display:flex;flex-direction:column;gap:10px;border-radius:var(--radius);padding:2px} .board-drop.over{outline:2px dashed var(--accent);outline-offset:1px;background:var(--accent-soft)} .board-card{background:var(--panel);border:1px solid var(--slate-200);border-radius:var(--radius); box-shadow:var(--shadow-card);overflow:hidden;cursor:grab} .board-card.dragging{opacity:.45} .board-card-photo{height:92px;background:var(--slate-100);display:flex;align-items:center;justify-content:center} .board-card-photo img{width:100%;height:100%;object-fit:cover;display:block} .board-card-photo span{font-size:30px;opacity:.35} .board-card-body{padding:9px 11px} .board-card-name{font-weight:800;font-size:13.5px;color:var(--ink);text-decoration:none;display:block;letter-spacing:-.01em} .board-card-name:hover{color:var(--accent)} .board-card-facts{font-size:11.5px;color:var(--muted);margin-top:2px} .board-card-profit{font-size:12px;font-weight:700;margin-top:3px} .board-card-flag{margin-top:6px;background:#dc2626;color:#fff;font-size:10.5px;font-weight:700; border-radius:4px;padding:2px 7px;display:inline-block} /* Investment Packet */ /* Tools dropdown menu (property page) */ .btn.tools{background:#7c3aed;border:1px solid #7c3aed;color:#fff;padding:6px 14px;border-radius:6px; font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;gap:6px} .btn.tools:hover{background:#6d28d9;text-decoration:none} .toolmenu[open] > summary.btn.tools{background:#6d28d9} .toolmenu{position:relative;display:inline-block} .toolmenu > summary{list-style:none;cursor:pointer;user-select:none} .toolmenu > summary::-webkit-details-marker{display:none} .toolmenu-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:60;background:var(--panel); border:1px solid var(--slate-200);border-radius:var(--radius);box-shadow:var(--shadow-card); min-width:196px;padding:6px;display:flex;flex-direction:column;gap:1px} .toolmenu-panel a{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600; color:var(--ink);text-decoration:none;white-space:nowrap} .toolmenu-panel a:hover{background:var(--accent-soft);color:var(--accent-strong);text-decoration:none} .toolmenu-group{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em; color:var(--slate-400);padding:8px 12px 2px} /* Top-nav dropdown menus */ .topbar nav .navmenu{position:relative} .navmenu > summary{list-style:none;cursor:pointer;color:var(--sub);font-weight:500; font-size:13.5px;padding:4px 0;user-select:none} .navmenu > summary::-webkit-details-marker{display:none} .navmenu[open] > summary,.navmenu > summary:hover{color:var(--text)} .navmenu .toolmenu-panel{left:auto;right:auto} /* Dropdown links sit on a light panel — beat `.topbar nav a`'s white link color (specificity bug: menu items were white-on-white in Light / Baby Blue). */ .topbar nav .toolmenu-panel a{color:var(--ink)} .topbar nav .toolmenu-panel a:hover{background:var(--accent-soft);color:var(--accent-strong)} .toolmenu-panel form.navform{margin:0} .toolmenu-panel form.navform button{width:100%;text-align:left;padding:8px 12px;border:0;background:none; font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;border-radius:var(--radius-sm)} .toolmenu-panel form.navform button:hover{background:var(--accent-soft);color:var(--accent-strong)} .packet-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .packet-head{display:flex;gap:20px;align-items:center;border-bottom:2px solid var(--slate-200);padding-bottom:16px;margin-bottom:16px} .packet-photo{width:180px;height:130px;object-fit:cover;border-radius:10px;border:1px solid var(--slate-200)} .packet-brand{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-strong)} .packet-head h1{margin:2px 0} @media print{ .topbar,footer,.noprint{display:none !important} main{max-width:none;margin:0;padding:0} .packet-head{break-inside:avoid} .card,.grid{box-shadow:none} a[href]:after{content:""} } .phead-title{display:flex;align-items:center;gap:16px} .prophero{width:120px;height:88px;object-fit:cover;border-radius:10px;border:1px solid var(--slate-200); box-shadow:var(--shadow-card)} .photofield{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap} .photofield-preview{flex:none;width:150px;height:110px;border-radius:10px;overflow:hidden; background:var(--slate-100);border:1px solid var(--field-border);display:flex;align-items:center;justify-content:center} .photofield-preview img{width:100%;height:100%;object-fit:cover;display:block} .photofield-empty{color:var(--slate-400);font-size:12px;font-weight:600} .photofield-inputs{flex:1;min-width:220px;display:flex;flex-direction:column;gap:8px} .photofield-inputs input[type=file]{font-size:12.5px;color:var(--slate-500)} .photofield-inputs input[type=url]{padding:8px 11px;border:1px solid var(--field-border); border-radius:var(--radius-sm);font-size:13px;background:var(--field-bg);color:var(--ink)} .photofield-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap} /* Address autocomplete dropdown */ .ac-wrap{position:relative} .ac-dropdown{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--panel); border:1px solid var(--field-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-card); margin-top:4px;overflow:hidden} .ac-item{padding:9px 12px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer} .ac-item:hover,.ac-item.on{background:var(--accent-soft)} .ac-cred{padding:4px 12px;font-size:10.5px;color:var(--slate-400);text-align:right;border-top:1px solid var(--slate-100)} .srcdot.card_manual{background:#7c4dff} /* minmax(0,1fr) lets columns shrink so the 4th never overflows the card */ .catgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end} @media(max-width:760px){.catgrid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:560px){.catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:380px){.catgrid{grid-template-columns:1fr}} .catgrid .field{min-width:0} .catgrid .flabel{font-size:11px;line-height:1.25} .catgrid .ipfx{min-width:0} .catgrid .ipfx input{padding:8px 10px 8px 4px;font-size:13px} /* Collapsible legacy section (Category Budgets) */ .legacy > summary.legacy-summary{list-style:none;cursor:pointer;user-select:none; display:flex;align-items:center;gap:8px;padding:16px 22px;border-radius:var(--radius-lg)} .legacy > summary.legacy-summary::-webkit-details-marker{display:none} .legacy > summary.legacy-summary:hover{background:var(--slate-50)} .legacy .legacy-caret{flex:none;width:0;height:0;border-left:6px solid var(--slate-400); border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s} .legacy[open] .legacy-caret{transform:rotate(90deg)} .legacy .legacy-hint{color:var(--slate-400);font-size:12px;font-weight:500} .legacy .fcard-body{padding-top:4px} /* ===== Budget vs Actual read-only table ===== */ table.grid.bva th,table.grid.bva td{padding:7px 10px;font-size:13px} table.grid.bva td.ftc,table.grid.bva th.ftc{color:#8392a0;font-size:11.5px;width:54px} .bva .secrow td{background:#e7efe9;font-weight:800;color:var(--brand2);border-top:2px solid #cfe0d5; text-transform:uppercase;letter-spacing:.02em;font-size:12px} .bva .grouprow td{background:#f3f6f4;font-weight:700;color:#2c3b34} .bva .itemrow td.itemcell{padding-left:24px} .bva .itemrow td{color:#3a4752} .bva .totalrow td{background:#1d3b2b;color:#fff;font-weight:800;font-size:13.5px;border-top:2px solid #163022} .bva .totalrow td.ftc{color:#bfe0cd} .bva .pos{color:#15803d}.bva .neg{color:#c22a2a} .empty{background:var(--panel);border:1px dashed var(--line);border-radius:10px;padding:30px;text-align:center} .empty p{color:var(--muted);margin:0 0 14px} /* ===== Budget editor ===== */ .beditbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--slate-100); border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:0 0 14px} .beditbar.bottom{margin:16px 0 40px} .beditbar .grow{flex:1} .beditbar label.inl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#43525f} .beditbar label.inl input[type=number]{width:120px;padding:6px 8px;border:1px solid var(--line); border-radius:6px;font-weight:400} .beditbar label.chk{font-weight:600;color:#56636f;max-width:520px} .bsection{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin:0 0 16px;overflow:hidden} .bsec-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#e7efe9;border-bottom:1px solid #d3e2d8} .bsec-name{flex:0 1 360px;font-weight:800;color:var(--brand2);font-size:14px;border:1px solid transparent; background:transparent;padding:5px 7px;border-radius:6px} .bsec-name:focus{background:#fff;border-color:var(--line);outline:none} .bgroup{padding:0 10px 6px} table.btable{width:100%;border-collapse:collapse;margin:8px 0} table.btable th,table.btable td{padding:4px 6px;text-align:left;vertical-align:middle} table.btable .ghead th{background:#f3f6f4;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px 6px} .bgrp-name{font-weight:700;color:#2c3b34;border:1px solid transparent;background:transparent; padding:4px 6px;border-radius:6px;width:100%;max-width:320px;font-size:13px} .bgrp-name:focus{background:#fff;border-color:var(--line);outline:none} table.btable .colhead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:#8392a0; border-bottom:1px solid var(--line);font-weight:700} table.btable td.r,table.btable th.r{text-align:right;font-variant-numeric:tabular-nums} .ftcol{width:50px;color:#8392a0;font-size:11px} .cell{width:100%;padding:5px 7px;border:1px solid var(--line);border-radius:6px;font-size:13px;background:#fff} .cell.num{text-align:right;width:92px} .cell.name{min-width:140px}.cell.notes{min-width:150px}.cell.cat{min-width:120px} .btable .var{font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px} .btable .gsub{font-weight:800;font-variant-numeric:tabular-nums;color:#2c3b34} .iconbtn{background:transparent;border:0;color:#b04a4a;font-size:18px;line-height:1;cursor:pointer; padding:2px 7px;border-radius:5px} .iconbtn:hover{background:#fbe9e9} .btn.xs{padding:4px 9px;font-size:11.5px;white-space:nowrap} table.grid td.nowrap,table.grid th.nowrap{white-space:nowrap} .bsec-sub{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#f6f9f7;border-top:1px solid var(--line);flex-wrap:wrap} .bsec-sub .lbl{font-weight:800;color:var(--brand2);font-size:12px;text-transform:uppercase;letter-spacing:.02em} .bsec-sub .bar{width:160px} .bsec-sub .nums{font-size:12.5px;color:#43525f;font-variant-numeric:tabular-nums} .bgrand{background:#1d3b2b;color:#fff;border-radius:10px;padding:14px 16px;margin:6px 0 4px} .bgrand-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap; font-weight:800;font-size:15px;letter-spacing:.02em} .bgrand .nums{font-weight:600;font-size:13px;color:#d6ebde;font-variant-numeric:tabular-nums} .bgrand .bar.tall{margin-top:10px;background:#16302280} .bgrand .pos{color:#7ee2a8}.bgrand .neg{color:#ff9d9d} .pos{color:var(--pos)}.neg{color:var(--neg)} @media(max-width:720px){.ftc,.ftcol,.cell.notes{display:none}} /* ===== Mobile pass (phones / narrow tablets) — kept last so it wins source order ===== */ @media(max-width:760px){ .topbar{position:relative;flex-wrap:nowrap;padding:12px 16px} .hamburger{display:flex} .topbar nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column; align-items:stretch;gap:0;background:var(--panel);border-bottom:1px solid var(--border); padding:6px 16px 14px;z-index:60; box-shadow:0 10px 24px rgba(0,0,0,.28);max-height:80vh;overflow-y:auto} #navtoggle:checked ~ nav{display:flex} .topbar nav > a,.navmenu > summary{padding:11px 2px;border-bottom:1px solid var(--border)} .topbar nav a.active,.navmenu > summary.active{box-shadow:none;text-decoration:underline} .navmenu{width:100%} .topbar nav .navmenu .toolmenu-panel{position:static;box-shadow:none;background:var(--panel2); border:none;padding:2px 0 6px 12px;min-width:0} .topbar nav .navmenu .toolmenu-panel a{color:var(--text)} .topbar nav .navmenu .toolmenu-panel a:hover{background:var(--track);color:var(--text)} .navform button{width:100%;text-align:left} .themesw{margin-top:12px;align-self:flex-start} table.grid{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch} .phead,.edithead{flex-wrap:wrap;gap:10px} .phead-title{flex-wrap:wrap} .prophero{width:64px;height:64px} .tablist{flex-wrap:wrap;gap:6px} .exports{flex-wrap:wrap} .welcome{padding:22px 18px} .nextbanner{gap:10px} body main{padding:16px 14px} } @media(max-width:420px){ .pipeline{grid-template-columns:1fr} .cards.kpi{gap:8px} .pactions .btn{flex:1 1 auto;text-align:center} } /* ============================================================ FP· — shared component layer for the 2026 redesigned screens (Dashboard, Board, Health, Contacts, Accounting, Data, Settings) ============================================================ */ .fp-page{display:flex;flex-direction:column;gap:22px} .fp-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap} .fp-pagehead .t{display:flex;flex-direction:column;gap:5px} .fp-title{font-family:var(--font-head);font-weight:700;font-size:24px;letter-spacing:-.02em;margin:0} .fp-caption{font-size:13px;color:var(--sub);margin:0} .fp-headstats{display:flex;gap:22px} .fp-headstat{text-align:right} .fp-headstat .v{font-family:var(--font-head);font-weight:700;font-size:19px} .fp-headstat .k{font-family:var(--font-mono);font-size:10px;color:var(--sub)} .fp-mono{font-family:var(--font-mono);font-size:10.5px;color:var(--sub);letter-spacing:.03em;text-transform:uppercase} .fp-num{font-family:var(--font-head);font-weight:700;font-variant-numeric:tabular-nums} /* Panels & cards */ .fp-panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px 20px} .fp-panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px} .fp-panel-title h3{margin:0;font-size:14.5px;font-weight:600} .fp-grid{display:grid;gap:14px} .fp-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))} .fp-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))} .fp-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))} .fp-grid.c5{grid-template-columns:repeat(5,minmax(0,1fr))} .fp-grid.c6{grid-template-columns:repeat(6,minmax(0,1fr))} @media(max-width:1000px){.fp-grid.c6,.fp-grid.c5,.fp-grid.c4{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:700px){.fp-grid.c6,.fp-grid.c5,.fp-grid.c4,.fp-grid.c3,.fp-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:460px){.fp-grid.c6,.fp-grid.c5,.fp-grid.c4,.fp-grid.c3,.fp-grid.c2{grid-template-columns:1fr}} /* KPI cards + tinted status chips (uses color-mix like the mockups) */ .fp-kpi{background:var(--panel);border:1px solid var(--border);border-radius:16px; padding:16px 17px;display:flex;flex-direction:column;gap:6px} .fp-kpi .k{font-family:var(--font-mono);font-size:10.5px;color:var(--sub);letter-spacing:.03em;text-transform:uppercase} .fp-kpi .v{font-family:var(--font-head);font-weight:700;font-size:28px;line-height:1} .fp-kpi .s{font-size:11.5px;color:var(--sub)} .fp-kpi.tint-danger{background:linear-gradient(160deg,color-mix(in srgb,var(--danger) 15%,var(--panel)),var(--panel)); border-color:color-mix(in srgb,var(--danger) 30%,var(--border))} .fp-kpi.tint-danger .k{color:var(--danger)} .fp-kpi.tint-warn{background:linear-gradient(160deg,color-mix(in srgb,var(--warn) 15%,var(--panel)),var(--panel)); border-color:color-mix(in srgb,var(--warn) 30%,var(--border))} .fp-kpi.tint-warn .k{color:var(--warn)} .fp-kpi.tint-good{background:linear-gradient(160deg,color-mix(in srgb,var(--a1) 14%,var(--panel)),var(--panel)); border-color:color-mix(in srgb,var(--a1) 30%,var(--border))} .fp-kpi.tint-good .k{color:var(--a1-text)} .fp-kpi.tint-violet{background:linear-gradient(160deg,color-mix(in srgb,var(--violet) 15%,var(--panel)),var(--panel)); border-color:color-mix(in srgb,var(--violet) 30%,var(--border))} .fp-kpi.tint-violet .k{color:var(--violet)} .fp-kpi.tint-cyan{background:linear-gradient(160deg,color-mix(in srgb,var(--cyan) 14%,var(--panel)),var(--panel)); border-color:color-mix(in srgb,var(--cyan) 30%,var(--border))} .fp-kpi.tint-cyan .k{color:var(--cyan)} /* Status pills */ .fp-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px; font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;white-space:nowrap; background:var(--panel2);border:1px solid var(--border);color:var(--sub)} .fp-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sub)} .fp-pill.ok{color:var(--a1-text);background:color-mix(in srgb,var(--a1) 12%,transparent); border-color:color-mix(in srgb,var(--a1) 30%,var(--border))} .fp-pill.ok::before{background:var(--a1)} .fp-pill.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent); border-color:color-mix(in srgb,var(--warn) 30%,var(--border))} .fp-pill.warn::before{background:var(--warn)} .fp-pill.danger{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent); border-color:color-mix(in srgb,var(--danger) 30%,var(--border))} .fp-pill.danger::before{background:var(--danger)} .fp-pill.violet{color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,transparent); border-color:color-mix(in srgb,var(--violet) 30%,var(--border))} .fp-pill.violet::before{background:var(--violet)} .fp-pill.cyan{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,transparent); border-color:color-mix(in srgb,var(--cyan) 30%,var(--border))} .fp-pill.cyan::before{background:var(--cyan)} /* Progress tracks */ .fp-track{height:7px;background:var(--track);border-radius:999px;overflow:hidden;min-width:70px} .fp-track .fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--a1),var(--a2))} .fp-track .fill.warn{background:var(--warn)} .fp-track .fill.danger{background:var(--danger)} /* Tables (redesigned) */ table.fp-table{width:100%;border-collapse:collapse} table.fp-table th{font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--sub); text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:9px 12px; border-bottom:1px solid var(--border)} table.fp-table td{padding:11px 12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle} table.fp-table tr:last-child td{border-bottom:0} table.fp-table td.r,table.fp-table th.r{text-align:right;font-variant-numeric:tabular-nums} table.fp-table tbody tr.click{cursor:pointer} table.fp-table tbody tr.click:hover td{background:var(--panel2)} th.fp-sort{cursor:pointer;user-select:none} th.fp-sort:hover{color:var(--text)} th.fp-sort .dir{opacity:.7;margin-left:3px} /* Buttons */ .fp-btn{border:1px solid var(--border);background:var(--panel2);color:var(--sub); font-family:var(--font-body);font-weight:500;font-size:12.5px;padding:8px 13px;border-radius:10px;cursor:pointer} .fp-btn:hover{color:var(--text);border-color:color-mix(in srgb,var(--text) 25%,var(--border));text-decoration:none} .fp-btn.primary{border:none;background:linear-gradient(135deg,var(--a1),var(--a2));color:var(--a1-ink); font-weight:600;font-size:13px;padding:9px 17px;border-radius:11px} .fp-btn.primary:hover{filter:brightness(1.06);color:var(--a1-ink)} .fp-btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--border))} .fp-btn.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)} .fp-btn:disabled{opacity:.45;cursor:not-allowed} a.fp-btn{display:inline-block} /* Inputs */ .fp-input,.fp-select,.fp-textarea{background:var(--field-bg);border:1px solid var(--field-border); color:var(--text);border-radius:10px;padding:9px 12px;font-size:13px;font-family:var(--font-body)} .fp-input:focus,.fp-select:focus,.fp-textarea:focus{outline:none;border-color:var(--a1); box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 22%,transparent)} .fp-field{display:flex;flex-direction:column;gap:6px} .fp-field label{font-family:var(--font-mono);font-size:10px;color:var(--sub); text-transform:uppercase;letter-spacing:.05em} .fp-search{position:relative;display:flex;align-items:center} .fp-search input{padding-left:32px;width:100%} .fp-search::before{content:"⌕";position:absolute;left:11px;color:var(--sub);font-size:15px;pointer-events:none} /* Modal */ .fp-modal-backdrop{position:fixed;inset:0;z-index:110;background:rgba(4,6,8,.62); backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px} .fp-modal-backdrop[hidden]{display:none} .fp-modal{background:var(--panel);border:1px solid var(--border);border-radius:18px; width:min(640px,94vw);max-height:88vh;overflow:auto;padding:22px 24px; box-shadow:0 30px 80px -20px rgba(0,0,0,.55)} .fp-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px} .fp-modal-head h3{margin:0;font-size:17px} .fp-modal-x{background:none;border:0;color:var(--sub);font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:7px} .fp-modal-x:hover{color:var(--text);background:var(--panel2)} /* Toast */ .fp-toast{position:fixed;bottom:22px;right:22px;z-index:130;background:var(--panel); border:1px solid color-mix(in srgb,var(--a1) 40%,var(--border));color:var(--text); border-radius:12px;padding:12px 16px;font-size:13px;box-shadow:0 12px 40px rgba(0,0,0,.35); display:flex;align-items:center;gap:9px;animation:flipRise .25s ease both} .fp-toast.danger{border-color:color-mix(in srgb,var(--danger) 45%,var(--border))} @keyframes flipRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* Drop zone (CSV import) */ .fp-dropzone{border:2px dashed color-mix(in srgb,var(--a1) 40%,var(--border));border-radius:16px; background:color-mix(in srgb,var(--a1) 4%,var(--panel));padding:38px 20px;text-align:center; color:var(--sub);cursor:pointer;transition:background .15s,border-color .15s} .fp-dropzone.over,.fp-dropzone:hover{background:color-mix(in srgb,var(--a1) 10%,var(--panel));border-color:var(--a1)} .fp-dropzone .big{font-size:30px;line-height:1;margin-bottom:8px} .fp-dropzone strong{color:var(--text)} /* Kanban (redesigned board) */ .fp-board{display:grid;gap:14px;align-items:start; grid-template-columns:repeat(auto-fit,minmax(215px,1fr))} .fp-col{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:12px} .fp-col-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .fp-col-head .name{font-family:var(--font-mono);font-size:10.5px;color:var(--sub); letter-spacing:.05em;text-transform:uppercase} .fp-col-head .cnt{font-family:var(--font-head);font-weight:700;font-size:13px;background:var(--panel2); border:1px solid var(--border);border-radius:999px;padding:1px 9px} .fp-drop{min-height:50px;display:flex;flex-direction:column;gap:10px;border-radius:12px;padding:2px} .fp-drop.over{outline:2px dashed var(--a1);outline-offset:2px;background:color-mix(in srgb,var(--a1) 7%,transparent)} .fp-card{background:var(--panel2);border:1px solid var(--border);border-radius:13px;overflow:hidden;cursor:grab} .fp-card:active{cursor:grabbing} .fp-card.dragging{opacity:.45} .fp-card-photo{height:86px;background:var(--track);display:flex;align-items:center;justify-content:center} .fp-card-photo img{width:100%;height:100%;object-fit:cover;display:block} .fp-card-photo span{font-size:28px;opacity:.35} .fp-card-body{padding:10px 12px;display:flex;flex-direction:column;gap:4px} .fp-card-name{font-family:var(--font-head);font-weight:600;font-size:13.5px;color:var(--text);letter-spacing:-.01em} .fp-card-meta{font-family:var(--font-mono);font-size:10px;color:var(--sub)} /* Simple tabs (settings / accounting sub-nav) */ .fp-subnav{display:flex;gap:6px;flex-wrap:wrap} .fp-subnav a{padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--sub); border:1px solid transparent} .fp-subnav a:hover{color:var(--text);text-decoration:none} .fp-subnav a.on{background:var(--panel);border-color:var(--border);color:var(--text);font-weight:600} /* Settings layout: left rail + content */ .fp-settings{display:grid;grid-template-columns:218px minmax(0,1fr);gap:22px;align-items:start} .fp-rail{position:sticky;top:76px;display:flex;flex-direction:column;gap:2px} .fp-rail a{padding:8px 12px;border-radius:10px;color:var(--sub);font-size:13px;font-weight:500} .fp-rail a:hover{color:var(--text);background:var(--panel2);text-decoration:none} .fp-rail a.on{background:var(--panel);border:1px solid var(--border);color:var(--text);font-weight:600} .fp-rail .grp{font-family:var(--font-mono);font-size:9.5px;color:var(--sub);opacity:.75; text-transform:uppercase;letter-spacing:.07em;padding:12px 12px 4px} @media(max-width:860px){.fp-settings{grid-template-columns:1fr}.fp-rail{position:static;flex-direction:row;flex-wrap:wrap}} /* Bar rows (spend by category / property) */ .fp-barrow{display:grid;grid-template-columns:150px minmax(0,1fr) 90px;gap:12px;align-items:center; padding:7px 0;font-size:12.5px} .fp-barrow .lbl{color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fp-barrow .amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:600} /* Toggle switch */ .fp-switch{position:relative;display:inline-block;width:38px;height:22px;flex:none} .fp-switch input{opacity:0;width:0;height:0} .fp-switch .sl{position:absolute;inset:0;background:var(--track);border-radius:999px;cursor:pointer;transition:.15s} .fp-switch .sl::before{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%; background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:.15s} .fp-switch input:checked + .sl{background:var(--a1)} .fp-switch input:checked + .sl::before{transform:translateX(16px);background:var(--a1-ink)} /* ===== Dashboard hero (Command Deck fidelity pass) ===== */ .fp-hero{background:var(--panel);border:1px solid var(--border);border-radius:18px; padding:18px 18px 8px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden} .fp-hero.pad{padding:18px} .fp-hero .row{display:flex;justify-content:space-between;align-items:center} .fp-hero .lbl{font-family:var(--font-mono);font-size:11px;color:var(--sub);letter-spacing:.04em;text-transform:uppercase} .fp-hero .big{font-family:var(--font-head);font-weight:700;font-size:31px;letter-spacing:-.02em;line-height:1.1} .fp-hero .spark{margin:2px -18px -8px} .fp-chip{font-family:var(--font-mono);font-size:11px;padding:2px 7px;border-radius:6px;white-space:nowrap} .fp-chip.good{color:var(--a1-text);background:color-mix(in srgb,var(--a1) 16%,transparent)} .fp-chip.lime{color:var(--a2-text,#5a7a00);background:color-mix(in srgb,var(--a2) 22%,transparent)} [data-theme="dark"] .fp-chip.lime{color:var(--a2)} .fp-chip.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)} .fp-chip.sub{color:var(--sub)} .fp-hero.flagged{background:linear-gradient(160deg,color-mix(in srgb,var(--warn) 14%,var(--panel)),var(--panel)); border-color:color-mix(in srgb,var(--warn) 30%,var(--border));justify-content:space-between;gap:10px} .fp-resolve{display:block;text-align:center;border:1px solid color-mix(in srgb,var(--warn) 40%,transparent); background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)!important;font-weight:600; font-size:12.5px;padding:8px;border-radius:10px;cursor:pointer;text-decoration:none} .fp-resolve:hover{background:color-mix(in srgb,var(--warn) 24%,transparent);text-decoration:none} .fp-profit-num{color:#7a9b00} [data-theme="dark"] .fp-profit-num{color:var(--a2)} /* gradient + striped over-budget bars */ .fp-gbar{height:11px;border-radius:99px;background:var(--track);overflow:hidden;position:relative} .fp-gbar .fill{position:absolute;left:0;top:0;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--a1),var(--a2))} .fp-gbar .fill.over{width:100%!important;background:repeating-linear-gradient(90deg,var(--danger),var(--danger) 6px, color-mix(in srgb,var(--danger) 60%,transparent) 6px,color-mix(in srgb,var(--danger) 60%,transparent) 12px)} .fp-clickrow{display:grid;grid-template-columns:150px 1fr 82px;align-items:center;gap:14px;cursor:pointer; padding:5px 8px;margin:0 -8px;border-radius:9px;transition:background .12s;text-decoration:none;color:var(--text)} .fp-clickrow:hover{background:color-mix(in srgb,var(--a1) 6%,var(--panel));text-decoration:none} .fp-clickrow .nm{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fp-clickrow .nm::after{content:" \2192";font-size:11px;opacity:.55} .fp-clickrow:hover .nm{color:var(--a1-text)} .fp-clickrow .pc{font-family:var(--font-mono);font-size:12px;color:var(--sub);text-align:right} @media(max-width:640px){.fp-clickrow{grid-template-columns:110px 1fr 60px}} /* ===================================================================== Weekly Review v2 (design handoff 2026-07-10) — wk2-* layer ===================================================================== */ :root{ --wk2-act-bg:#f2fbf9; --wk2-act-border:#9edfd2; --wk2-soft:#eafbf7; --wk2-done-bg:#eafbf7; --wk2-done-ink:#0c8f77; --wk2-done-line:#9edfd2; --wk2-part-bg:#fff4d6; --wk2-part-ink:#a16207; --wk2-bad-bg:#ffecec; --wk2-bad-ink:#c03636; --wk2-bad-line:#f3c1c1; --wk2-spike-bg:#fff1e6; --wk2-spike-ink:#c2410c; --wk2-spike-line:#fed7aa; --wk2-gap-bg:#fff7ed; --wk2-gap-line:#fde2b8; --wk2-gap-ink:#a16207; --wk2-body-bg:#fbfcfd; } [data-theme="dark"]{ --wk2-act-bg:#10201d; --wk2-act-border:#1e564b; --wk2-soft:#0e2a24; --wk2-done-bg:#0e2a24; --wk2-done-ink:#5eead4; --wk2-done-line:#1e564b; --wk2-part-bg:#33270a; --wk2-part-ink:#fcd34d; --wk2-bad-bg:#331414; --wk2-bad-ink:#fca5a5; --wk2-bad-line:#7f1d1d; --wk2-spike-bg:#33200f; --wk2-spike-ink:#fdba74; --wk2-spike-line:#7c2d12; --wk2-gap-bg:#33270a; --wk2-gap-line:#6b551f; --wk2-gap-ink:#f0d98a; --wk2-body-bg:#171a1e; } /* header chrome */ .wk2-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:20px; background:var(--panel);border:1px solid var(--border);font-family:var(--font-mono);font-size:11px;color:var(--sub)} .wk2-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--good)} .wk2-chip.saving .dot{background:var(--warn)} .wk2-meet{padding:8px 14px;border:1px solid var(--border);border-radius:8px;background:var(--panel); color:var(--text);font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer} .wk2-meet.on{background:#141922;border-color:#141922;color:var(--a1)} /* scoreboard */ .wk2-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:4px} @media(max-width:1150px){.wk2-kpis{grid-template-columns:repeat(3,1fr)}} @media(max-width:640px){.wk2-kpis{grid-template-columns:repeat(2,1fr)}} .wk2-kpi{background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:14px 16px;box-shadow:var(--shadow-card)} .wk2-kpi .k{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)} .wk2-kpi .v{font-family:var(--font-head);font-size:24px;font-weight:700;margin-top:4px;color:var(--text)} .wk2-kpi .v.neg{color:var(--neg)} .wk2-kpi .v .of{font-size:14px;color:var(--neutral);font-weight:500} .wk2-kpi .s{font-size:11.5px;color:var(--sub);margin-top:2px} .wk2-kpi .s.pos{color:var(--pos);font-weight:600} .wk2-kpi .s.neg{color:var(--neg);font-weight:600} .wk2-kpi .s2{font-size:11px;color:var(--neutral);margin-top:1px} .wk2-gapbanner{margin-top:12px;background:var(--wk2-gap-bg);border:1px solid var(--wk2-gap-line); border-radius:11px;padding:10px 16px;font-size:13px;color:var(--wk2-gap-ink);display:flex;gap:8px;align-items:center} /* section headings */ .wk2-h2{margin:0 0 12px;font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--text)} .wk2-h2 .sub{font-size:13px;font-weight:500;color:var(--sub)} .wk2-sect{margin-top:36px} .wk2-secthead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px} .wk2-rate{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--sub)} /* shared inputs */ .wk2-in{box-sizing:border-box;padding:8px 6px;border:1px solid var(--field-border);border-radius:8px; font-family:var(--font-mono);font-size:14px;text-align:center;color:var(--text);background:var(--field-bg)} .wk2-in.act{border-color:var(--wk2-act-border);background:var(--wk2-act-bg)} .wk2-in.r{text-align:right} .wk2-lbl{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--neutral)} .wk2-lbl.act{color:var(--a1-text)} .wk2-text{box-sizing:border-box;width:100%;padding:8px;border:1px solid var(--field-border);border-radius:8px; font-family:var(--font-body);font-size:12.5px;line-height:1.4;color:var(--text);background:var(--field-bg);resize:vertical} /* crew log day cards */ .wk2-days{display:grid;grid-template-columns:repeat(7,1fr);gap:10px} @media(max-width:1150px){.wk2-days{grid-template-columns:repeat(4,1fr)}} @media(max-width:640px){.wk2-days{grid-template-columns:repeat(2,1fr)}} .wk2-day{background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:12px; display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(15,23,42,.04)} .wk2-day.dim{opacity:.55} .wk2-day .hd{display:flex;justify-content:space-between;align-items:baseline} .wk2-day .dow{font-family:var(--font-head);font-size:13px;font-weight:700} .wk2-day .dt{font-family:var(--font-mono);font-size:10.5px;color:var(--neutral)} .wk2-day{min-width:0} .wk2-day .nums{display:grid;grid-template-columns:1fr 1fr;gap:8px} .wk2-day .nums .wk2-in{width:100%;min-width:0} .wk2-day label{display:flex;flex-direction:column;gap:3px;min-width:0} .wk2-day .note{flex:1} .wk2-day .note textarea{flex:1;min-height:76px} .wk2-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px; background:var(--panel2);border:1px solid var(--border);border-radius:11px;padding:12px 16px} .wk2-strip .grp{display:flex;gap:28px;flex-wrap:wrap;font-size:13px;color:var(--text)} .wk2-strip strong{font-family:var(--font-head)} .wk2-help{margin:8px 0 0;font-size:12px;color:var(--neutral)} /* task cards */ .wk2-card{background:var(--panel);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow-card);overflow:hidden} .wk2-card.bad{border-color:var(--wk2-bad-line)} .wk2-card .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px 10px} .wk2-tname{font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--text)} .wk2-pill{font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--sub);background:var(--panel2);border-radius:20px;padding:2px 9px} .wk2-pill.carried{color:var(--wk2-part-ink);background:var(--wk2-part-bg)} .wk2-seg{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden} .wk2-seg button{padding:6px 13px;border:none;font-family:var(--font-body);font-size:12px;font-weight:700; cursor:pointer;background:var(--panel);color:var(--sub)} .wk2-seg button + button{border-left:1px solid var(--border)} .wk2-seg button.on-done{background:var(--a1);color:var(--a1-ink)} .wk2-seg button.on-partial{background:var(--warn);color:#3c2a05} .wk2-seg button.on-not_done{background:var(--danger);color:#fff} .wk2-x{width:28px;height:28px;border:none;background:transparent;color:var(--neutral);font-size:16px;cursor:pointer;border-radius:6px} .wk2-x:hover{color:var(--neg)} .wk2-phases{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:0 16px 10px} .wk2-ph{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 11px; border-radius:20px;cursor:pointer;background:var(--panel);color:var(--sub);border:1px solid var(--slate-200)} .wk2-ph input{margin:0;accent-color:var(--a1-text)} .wk2-ph.done{background:var(--wk2-done-bg);color:var(--wk2-done-ink);border-color:var(--wk2-done-line)} .wk2-count{font-family:var(--font-mono);font-size:11px;color:var(--neutral)} .wk2-body{display:grid;grid-template-columns:1.1fr 1.4fr 1.6fr;border-top:1px solid var(--border);background:var(--wk2-body-bg)} @media(max-width:900px){.wk2-body{grid-template-columns:1fr}} .wk2-cell{padding:12px 16px;border-right:1px solid var(--border)} .wk2-cell:last-child{border-right:none} .wk2-cell .cl{margin-bottom:6px} .wk2-planline{font-size:13px;font-weight:600;color:var(--text)} .wk2-plancost{font-size:12px;color:var(--sub);margin-top:3px} .wk2-actrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--sub)} .wk2-moneys{display:flex;gap:20px;align-items:center;flex-wrap:wrap} .wk2-money{font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--text)} .wk2-money.neg{color:var(--neg)} .wk2-money.mut{color:var(--neutral)} .wk2-noterow{padding:10px 16px;border-top:1px solid var(--border)} .wk2-noterow input{width:100%;box-sizing:border-box;padding:8px 11px;border:1px solid var(--slate-200); border-radius:8px;font-family:var(--font-body);font-size:13px;color:var(--text);background:var(--field-bg)} .wk2-stack{display:flex;flex-direction:column;gap:10px} .wk2-totalsbar{display:flex;gap:28px;flex-wrap:wrap;align-items:center;margin-top:12px;background:#141922; color:#fff;border-radius:11px;padding:13px 18px;font-size:13px} .wk2-totalsbar .k{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8b9299} .wk2-totalsbar strong{font-family:var(--font-head)} .wk2-totalsbar .var{color:var(--a1)} .wk2-addpanel{margin-top:14px;background:var(--panel);border:1px dashed var(--field-border);border-radius:11px;padding:14px 16px} .wk2-addpanel .cl{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--neutral);margin-bottom:10px} .wk2-addrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .wk2-addrow + .wk2-addrow{margin-top:8px} .wk2-addrow input[type=text],.wk2-addrow input:not([type]),.wk2-addrow select,.wk2-addrow input[type=date]{ padding:9px 11px;border:1px solid var(--field-border);border-radius:8px;font-family:var(--font-body); font-size:13.5px;color:var(--text);background:var(--field-bg)} .wk2-addrow .mono{font-family:var(--font-mono);font-size:13px;text-align:center} .wk2-addrow .hint{font-size:12px;color:var(--neutral)} .wk2-primary{padding:9px 18px;border:none;border-radius:8px;background:var(--a1);color:var(--a1-ink); font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer} .wk2-primary:hover{filter:brightness(.96)} /* spikes */ .wk2-spikes{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:900px){.wk2-spikes{grid-template-columns:1fr}} .wk2-spike{background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:14px 16px;box-shadow:0 1px 2px rgba(15,23,42,.04)} .wk2-stype{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--wk2-spike-ink); background:var(--wk2-spike-bg);border:1px solid var(--wk2-spike-line);border-radius:20px;padding:3px 10px; text-transform:uppercase;letter-spacing:.04em} .wk2-spike .task{font-weight:700;font-family:var(--font-head);font-size:14px} .wk2-spike .facts{display:flex;gap:18px;margin-top:8px;font-size:13px} .wk2-spike .lesson{margin-top:4px;font-size:12.5px;color:var(--a1-text)} .wk2-avoid{color:var(--wk2-spike-ink);font-weight:600} .wk2-noavoid{color:var(--neutral);font-weight:600} /* recap + next week */ .wk2-grid2{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:900px){.wk2-grid2{grid-template-columns:1fr}} .wk2-recap{box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid var(--field-border);border-radius:11px; font-family:var(--font-body);font-size:13.5px;line-height:1.5;color:var(--text);background:var(--field-bg);resize:vertical} .wk2-preview{background:var(--panel);border:1px solid var(--border);border-radius:11px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04)} .wk2-prow{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border);font-size:13px} .wk2-prow .nm{font-weight:600} .wk2-prow .amt{color:var(--sub);font-family:var(--font-mono);font-size:12px} .wk2-cashrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;background:var(--wk2-soft)} .wk2-cashrow .k{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--a1-text)} .wk2-cashrow .v{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--text)} /* ===================================================================== App shell: collapsible sidebar + slim top strip (design handoff Part 3) ===================================================================== */ .app{display:flex;min-height:100vh} .side{width:232px;flex:none;background:var(--panel);border-right:1px solid var(--border); display:flex;flex-direction:column;position:sticky;top:0;height:100vh; transition:width .18s ease;overflow:hidden;z-index:20} html[data-side="collapsed"] .side{width:64px} .side-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)} html[data-side="collapsed"] .side-head{padding:14px 0;justify-content:center} .side-head .logomark{width:30px;height:30px;border-radius:9px;flex:none; background:linear-gradient(135deg,var(--a1),var(--a2));display:flex;align-items:center; justify-content:center;font-family:var(--font-head);font-weight:700;color:var(--a1-ink);font-size:16px} .side-title{font-family:var(--font-head);font-size:14px;font-weight:700;white-space:nowrap;color:var(--text)} .side-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 10px 0;display:flex;flex-direction:column;gap:2px} .side-foot{padding:10px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:2px} .side-group{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--neutral);padding:8px 10px 4px;white-space:nowrap} .side-group ~ .side-group{padding-top:12px} .side-group{display:flex;align-items:center;justify-content:space-between;gap:6px;user-select:none} .side-grpchev{font-size:9px;color:var(--neutral);padding-right:2px} html[data-side="collapsed"] .side-group{display:none} html[data-side="collapsed"] .side-grpbody{display:block!important} .side-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px; color:var(--sub);font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap} .side-item svg,.side-item .side-glyph{flex:none} .side-emoji{flex:none;width:20px;text-align:center;font-size:15px;line-height:1; font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif} .side-item:hover{background:var(--panel2);color:var(--text);text-decoration:none} .side-item.active{background:var(--wk2-soft);color:var(--a1-text);font-weight:700} html[data-side="collapsed"] .side-item{justify-content:center;padding:9px 0} html[data-side="collapsed"] .side-lbl{display:none} .side-collapse{border:none;background:transparent;font-family:var(--font-body);cursor:pointer; color:var(--neutral);width:100%;text-align:left} .side-badge{margin-left:auto;background:var(--wk2-part-bg);color:var(--wk2-part-ink); font-family:var(--font-mono);font-size:10px;font-weight:700;border-radius:20px;padding:1px 8px} html[data-side="collapsed"] .side-badge{display:none} .side-glyph{font-size:14px} .maincol{flex:1;min-width:0;display:flex;flex-direction:column} .topstrip{height:50px;flex:none;background:var(--panel);border-bottom:1px solid var(--border); display:flex;align-items:center;gap:12px;padding:0 22px;position:sticky;top:0;z-index:10} .topstrip .crumbs{font-size:13px;color:var(--neutral);white-space:nowrap} .topstrip .crumbs .sep{color:var(--slate-300)} .topstrip .crumbs strong{color:var(--text)} .topstrip .avatar{width:30px;height:30px;flex:none;border-radius:50%;background:var(--panel2); display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--sub)} .side-backdrop{display:none;position:fixed;inset:0;background:rgba(10,14,20,.5);z-index:55} .side-hamburger{display:none;border:1px solid var(--border);background:var(--panel);color:var(--text); border-radius:9px;width:34px;height:34px;flex:none;align-items:center;justify-content:center; font-size:16px;cursor:pointer} @media(max-width:720px){ /* Phones: no icon-only rail (unlabeled icons are guesswork on a job site). The sidebar is hidden until the ☰ hamburger opens it as a full drawer with every label written out — same list as the desktop sidebar. */ .side{display:none} /* Lock the page horizontally — no more sideways panning. Anything wider than the screen must scroll inside its own container instead. */ html,body{max-width:100vw;overflow-x:hidden;overflow-x:clip} /* The control strip is wider than any phone: it scrolls WITHIN itself (swipe the strip to reach Present Mode etc.) instead of stretching the page. */ .topstrip{padding:0 12px;gap:8px;overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch;scrollbar-width:none} .topstrip::-webkit-scrollbar{display:none} .topstrip>*{flex:none} .topstrip .crumbs{overflow:hidden;text-overflow:ellipsis;max-width:38vw} .side-hamburger{display:flex} html[data-side-m="open"] .side{display:flex;position:fixed;left:0;top:0;bottom:0; height:100vh;height:100dvh;width:min(82vw,290px);z-index:60; box-shadow:0 0 60px rgba(0,0,0,.45);overflow-y:auto} html[data-side-m="open"] .side .side-lbl{display:inline} html[data-side-m="open"] .side .side-group{display:block} html[data-side-m="open"] .side .side-head{padding:14px 16px;justify-content:flex-start} html[data-side-m="open"] .side .side-item{justify-content:flex-start;padding:11px 14px} html[data-side-m="open"] .side-backdrop{display:block} } @media print{.side,.topstrip{display:none!important}} /* ===================================================================== Round 6: shared tab bar (Property Hub + Inbox) and inbox rows ===================================================================== */ .tabbar{display:flex;gap:22px;border-bottom:2px solid var(--track);margin:14px 0 18px;flex-wrap:wrap} .tabbar a{font-size:13.5px;font-weight:600;color:var(--sub);padding:8px 2px;margin-bottom:-2px; border-bottom:2.5px solid transparent;text-decoration:none;white-space:nowrap} .tabbar a:hover{color:var(--text);text-decoration:none} .tabbar a.on{color:var(--a1-text);border-bottom-color:var(--a1);font-weight:700} .tabbar .tb-badge{font-family:var(--font-mono);font-size:10px;font-weight:700;border-radius:20px; padding:1px 7px;margin-left:6px;background:var(--wk2-part-bg);color:var(--wk2-part-ink)} .ibx-row{display:grid;grid-template-columns:26px 56px minmax(0,1fr) 110px 90px auto; gap:12px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--border)} @media(max-width:900px){.ibx-row{grid-template-columns:26px 56px 1fr 90px;row-gap:6px}} .ibx-row .dt{font-family:var(--font-mono);font-size:11px;color:var(--neutral)} .ibx-row .tt{font-size:13.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ibx-row .hint{font-size:11.5px;color:var(--sub);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ibx-row .amt{font-family:var(--font-mono);font-size:13px;font-weight:600;text-align:right} .ibx-row .act{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap} .ibx-row select{padding:7px 9px;border:1px solid var(--field-border);border-radius:8px; font:inherit;font-size:12.5px;background:var(--field-bg);color:var(--text);max-width:180px} .src-pill{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase; letter-spacing:.05em;border-radius:20px;padding:3px 10px;white-space:nowrap;justify-self:start} .src-pill.home_depot{background:var(--wk2-part-bg);color:var(--wk2-part-ink)} .src-pill.quickbooks{background:#eef4ff;color:#3556c4} .src-pill.amex{background:var(--panel2);color:var(--sub)} .src-pill.resimpli{background:var(--wk2-soft);color:var(--a1-text)} .src-pill.email{background:var(--wk2-soft);color:var(--a1-text)} [data-theme="dark"] .src-pill.quickbooks{background:#16233f;color:#8fb0ff} .ibx-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 6px;color:var(--sub);font-size:12.5px} .hub-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px} @media(max-width:1000px){.hub-cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.hub-cards{grid-template-columns:1fr}} .hub-card{display:block;background:var(--panel);border:1px solid var(--border);border-radius:14px; padding:16px 18px;box-shadow:var(--shadow-card);text-decoration:none;color:var(--text); transition:border-color .12s} .hub-card:hover{border-color:var(--a1);text-decoration:none} .hub-card .hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px} .hub-card .t{font-family:var(--font-head);font-size:15px;font-weight:700} .hub-card .open{font-size:11.5px;font-weight:600;color:var(--a1-text)} .hub-card .row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0;color:var(--sub)} .hub-card .row .v{font-family:var(--font-mono);font-weight:600;color:var(--text)} .hub-card .row .v.neg,.hub-card .cap.neg{color:var(--neg)} .hub-card .cap{font-size:11px;color:var(--neutral);margin-top:5px} /* How-to video help (design Part 6) */ .howto-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 5px;border:1px solid var(--border); border-radius:20px;background:var(--panel);cursor:pointer;font:inherit;color:var(--text)} .howto-pill:hover{border-color:var(--a1);background:var(--wk2-soft)} .howto-pill .thumb{width:38px;height:24px;border-radius:6px;background:linear-gradient(135deg,#141922,#31465a); display:flex;align-items:center;justify-content:center;flex:none} .howto-pill .tri,.howto-modal .tri{width:0;height:0;border-left:7px solid var(--a1);border-top:5px solid transparent; border-bottom:5px solid transparent;margin-left:2px} .howto-pill .howto-lbl{font-size:12.5px;font-weight:700} .howto-pill .dur{font-family:var(--font-mono);font-size:11px;color:var(--neutral)} .howto-modal{position:fixed;inset:0;background:rgba(10,14,20,.55);display:none;align-items:center; justify-content:center;z-index:70;padding:20px} .howto-modal.open{display:flex} .howto-modal .box{background:var(--panel);border-radius:16px;max-width:760px;width:100%;overflow:hidden; box-shadow:0 18px 60px rgba(0,0,0,.4)} .howto-modal .player{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#141922,#31465a); display:flex;align-items:center;justify-content:center} .howto-modal .bigplay{width:72px;height:72px;border-radius:50%;border:none;background:var(--a1);cursor:pointer; display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(46,230,196,.4)} .howto-modal .bigplay .tri{border-left-color:#04120f;border-left-width:16px;border-top-width:11px;border-bottom-width:11px;margin-left:5px} .howto-modal .soon{position:absolute;bottom:44px;left:0;right:0;text-align:center;color:#8b9299;font-size:12px} .howto-modal .cap{position:absolute;bottom:14px;left:18px;font-family:var(--font-mono);font-size:10px; letter-spacing:.06em;text-transform:uppercase;color:#8b9299} .howto-modal .x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:none; background:rgba(255,255,255,.14);color:#fff;font-size:17px;cursor:pointer} .howto-modal .body{padding:18px 24px 20px} .howto-modal h3{margin:0;font-family:var(--font-head);font-size:17px;font-weight:700} .howto-modal .all{font-size:12.5px;font-weight:600;color:var(--a1-text);white-space:nowrap} .howto-modal .desc{margin:3px 0 12px;font-size:13px;color:var(--sub)} .howto-modal .ch{display:flex;gap:14px;align-items:baseline;width:100%;padding:7px 4px;border:none; background:transparent;cursor:pointer;font:inherit;text-align:left;border-radius:8px} .howto-modal .ch:hover{background:var(--panel2)} .howto-modal .ch .ts{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--a1-text);flex:none} .howto-modal .ch .ct{font-size:13px;font-weight:600;color:var(--text)} .howto-modal .never{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:12px;color:var(--neutral);cursor:pointer} @media print{.howto-pill,.howto-modal{display:none!important}} /* Sample data (design Part 7) — pill + dashboard banner */ .sample-pill{display:inline-block;font-family:var(--font-mono);font-size:8.5px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;border-radius:20px;padding:2px 8px; background:#eef4ff;color:#3556c4;vertical-align:middle;white-space:nowrap} [data-theme="dark"] .sample-pill{background:#16233f;color:#8fb0ff} .sample-banner{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px; padding:13px 18px;border-radius:14px;border:1px solid #c7d7f5;background:#eef4ff;color:#243b6b} [data-theme="dark"] .sample-banner{background:#131e33;border-color:#27406e;color:#b9cdf3} .sample-banner .txt{flex:1;min-width:240px;font-size:13px;line-height:1.45} .sample-banner .txt strong{display:block;font-size:13.5px} .sample-banner .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .sample-banner form{display:inline-flex;margin:0} .sample-x{width:28px;height:28px;border-radius:50%;border:none;background:transparent; color:inherit;font-size:17px;cursor:pointer;line-height:1;opacity:.65} .sample-x:hover{opacity:1;background:rgba(53,86,196,.12)} @media print{.sample-banner{display:none!important}} /* Dashboard layoutUpdate: properties-first grid */ .props-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px; margin:18px 0 10px;flex-wrap:wrap} .props-head h2{margin:0;font-family:var(--font-head);font-size:16px;font-weight:700} .props-count{font-family:var(--font-mono);font-size:10.5px;color:var(--neutral); text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} .ppgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} @media(max-width:1100px){.ppgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.ppgrid{grid-template-columns:1fr}} .ppcard{display:block;background:var(--panel);border:1px solid var(--border);border-radius:13px; overflow:hidden;box-shadow:var(--shadow-card);color:var(--text);transition:border-color .12s} .ppcard:hover{border-color:var(--a1);text-decoration:none} .ppcard .photo{height:110px;background:var(--panel2);background-size:cover;background-position:center; display:flex;align-items:center;justify-content:center;font-size:40px;opacity:1} .ppcard .photo .ph{opacity:.35} .ppcard .bd{padding:12px 16px 14px} .ppcard .toprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ppcard .nm{font-family:var(--font-head);font-size:14.5px;font-weight:700;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ppcard .crewpill{font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:var(--sub); background:var(--panel2);border-radius:20px;padding:2px 9px;margin-left:auto;white-space:nowrap} .ppcard .stats{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--sub);flex-wrap:wrap} .ppcard .stats strong{font-family:var(--font-mono);font-weight:600;color:var(--text)} .ppcard .stats strong.neg{color:var(--neg)} .ppcard .stats strong.pos{color:var(--a1-text)} .ppcard .foot{display:flex;justify-content:space-between;gap:10px;font-size:11px; color:var(--neutral);margin-top:5px;align-items:baseline} .ppcard .foot .note{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ppcard .foot .open{color:var(--a1-text);font-weight:600;white-space:nowrap} /* meeting mode — read-only presentation */ [data-meeting="1"] input,[data-meeting="1"] textarea,[data-meeting="1"] select{ border-color:transparent !important;background:transparent !important;box-shadow:none !important; pointer-events:none;resize:none} [data-meeting="1"] input::placeholder,[data-meeting="1"] textarea::placeholder{color:transparent} [data-meeting="1"] [data-add],[data-meeting="1"] [data-del]{display:none !important} [data-meeting="1"] .wk2-seg button,[data-meeting="1"] .wk2-ph{pointer-events:none} /* ============================================================ Field Operations module (design handoff: field ops 2026-07) Reuses the app tokens so dark / babyblue themes keep working. ============================================================ */ .fo-headstats{display:flex;gap:22px} .fo-headstats .n{font-family:var(--font-head);font-weight:700;font-size:19px} .fo-headstats .k{font-family:var(--font-mono);font-size:10px;color:var(--sub)} .fo-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px} .fo-kpis a{text-decoration:none} .fo-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent);flex-wrap:wrap} .fo-row:last-child{border-bottom:none} .fo-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--sub);white-space:nowrap} .fo-meta-sm{font-family:var(--font-mono);font-size:10px;color:var(--sub)} .fo-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px 20px} .fo-card.exception{border-color:color-mix(in srgb,var(--danger) 35%,transparent)} .fo-card.unack{background:linear-gradient(160deg,color-mix(in srgb,var(--danger) 8%,var(--panel)),var(--panel));border-color:color-mix(in srgb,var(--danger) 35%,transparent)} .fo-card.hi{border-color:color-mix(in srgb,var(--danger) 35%,transparent)} .fo-cardhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .fo-vendor{font-family:var(--font-head);font-weight:700;font-size:15px} .fo-prio{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:20px;padding:3px 9px;background:var(--panel2);color:var(--sub);border:1px solid var(--border)} .fo-prio.high{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent)} .fo-exc{margin-top:8px;background:color-mix(in srgb,var(--danger) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);color:var(--danger);border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:600} .fo-claimed{margin-top:7px;font-size:12px;color:var(--a1-text);font-weight:600} .fo-track{height:7px;background:var(--track);border-radius:999px;overflow:hidden} .fo-track>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--a1),var(--a2))} .fo-track>i.warn{background:var(--warn)} .fo-track>i.danger{background:var(--danger)} .fo-pct{font-family:var(--font-mono);font-size:10px;color:var(--sub);text-align:right;margin-top:3px} .fo-btn{border:1px solid var(--border);background:var(--panel2);color:var(--text);font-weight:600;font-size:12.5px;padding:8px 14px;border-radius:10px;cursor:pointer;text-decoration:none;display:inline-block;font-family:var(--font-body,inherit)} .fo-btn:hover{border-color:color-mix(in srgb,var(--text) 25%,transparent)} .fo-btn-primary{border:none;background:linear-gradient(135deg,var(--a1),var(--a2));color:var(--a1-ink);font-weight:600;font-size:13px;padding:9px 17px;border-radius:11px;cursor:pointer} .fo-btn-danger{border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);background:var(--panel);color:var(--danger);font-weight:600;font-size:12.5px;padding:8px 14px;border-radius:10px;cursor:pointer} .fo-btn-red{border:none;background:var(--danger);color:#fff;font-weight:600;font-size:12.5px;padding:8px 14px;border-radius:10px;cursor:pointer} .fo-reason{margin-top:10px;background:color-mix(in srgb,var(--warn) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);border-radius:10px;padding:10px 12px} .fo-reason .k{font-family:var(--font-mono);font-size:10px;color:var(--warn);text-transform:uppercase;margin-bottom:6px} .fo-tag{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:20px;padding:3px 9px} .fo-tag.delivery{background:color-mix(in srgb,var(--cyan) 14%,transparent);color:var(--cyan)} .fo-tag.work{background:color-mix(in srgb,var(--violet) 16%,transparent);color:var(--violet)} .fo-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px} .fo-photo-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden} .fo-photo-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .fo-photo-card .cap{padding:9px 12px} .fo-filter{border:1px solid var(--border);background:var(--panel);color:var(--sub);font-weight:600;font-size:12.5px;padding:7px 14px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-block} .fo-filter.on{border-color:var(--a1);background:color-mix(in srgb,var(--a1) 12%,transparent);color:var(--a1-text)} .fo-thumb{width:52px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--border);flex:none} .fo-inline-form{margin-top:10px;background:color-mix(in srgb,var(--a1) 6%,var(--panel));border:1px solid color-mix(in srgb,var(--a1) 35%,transparent);border-radius:12px;padding:12px} .fo-inline-form .k{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;color:var(--a1-text);margin-bottom:8px} .fo-input{width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--text)} .fo-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px} .fo-audit-row{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent)} .fo-audit-row .t{font-family:var(--font-mono);font-size:10.5px;color:var(--sub);flex:none;width:120px} details.fo-details>summary{cursor:pointer;list-style:none} details.fo-details>summary::-webkit-details-marker{display:none} /* ---- mobile (runner / trade) ---- */ .fo-mobile{min-height:100vh;background:var(--panel2);padding:0 0 90px;margin:0} .fo-mcol{max-width:560px;margin:0 auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px} .fo-mhead{background:#141922;border-radius:18px;padding:20px 20px 18px;color:#eceef1} .fo-mhead .lbl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#8b9299} .fo-mhead .hi{font-family:var(--font-head);font-weight:700;font-size:23px;margin-top:10px} .fo-mhead .sub{font-size:13px;color:#8b9299;margin-top:4px} .fo-online{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9.5px;color:#2ee6c4} .fo-online i{width:7px;height:7px;border-radius:50%;background:#2ee6c4;display:inline-block} .fo-sechead{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sub);padding:4px 4px 0} .fo-stop{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px} .fo-stop.hi{border-color:color-mix(in srgb,var(--danger) 35%,transparent)} .fo-stop .dest{font-size:13px;font-weight:600;color:var(--a1-text);margin-top:4px} .fo-stop .addr{font-family:var(--font-mono);font-size:11px;color:var(--sub);margin-top:3px} .fo-items{display:flex;flex-direction:column;gap:4px;margin-top:10px;background:var(--panel2);border:1px solid color-mix(in srgb,var(--text) 7%,transparent);border-radius:10px;padding:10px 12px} .fo-items .it{display:flex;justify-content:space-between;font-size:13.5px} .fo-items .q{font-family:var(--font-mono);font-size:12px;color:var(--sub)} .fo-bigbtn{flex:1;border:none;background:linear-gradient(135deg,var(--a1),var(--a2));color:var(--a1-ink);font-weight:700;font-size:14px;padding:13px;border-radius:12px;cursor:pointer} .fo-bigbtn:disabled,.fo-bigbtn.off{background:color-mix(in srgb,var(--text) 12%,transparent);color:var(--sub);cursor:not-allowed} .fo-probbtn{border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);background:var(--panel);color:var(--danger);font-weight:600;font-size:13px;padding:13px 14px;border-radius:12px;cursor:pointer} .fo-ghostbtn{border:1px solid var(--border);background:var(--panel);color:var(--sub);font-weight:600;font-size:13px;padding:13px 16px;border-radius:12px;cursor:pointer} .fo-chipbtn{border:1px solid var(--border);background:var(--panel);color:var(--sub);font-weight:600;font-size:12.5px;padding:9px 13px;border-radius:999px;cursor:pointer} .fo-chipbtn.on{border-color:var(--a1);background:color-mix(in srgb,var(--a1) 14%,transparent);color:var(--a1-text)} .fo-chipbtn.on.danger{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)} .fo-dashed{width:100%;border:1.5px dashed var(--border);background:var(--panel);color:var(--sub);font-weight:600;font-size:13.5px;padding:14px;border-radius:12px;cursor:pointer} .fo-mobile .flash{max-width:560px;margin:10px auto 0;background:#141922;border:1px solid color-mix(in srgb,var(--a1) 40%,transparent);color:#eceef1;border-radius:12px;padding:13px 16px;font-size:13px} .fo-actions2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px} @media (max-width:640px){.fo-headstats{display:none}} /* ===================================================================== Field Ops upload UX: obvious photo/record buttons, thumbnail preview of what will be sent, and an upload progress bar (see fo-upload.js). ===================================================================== */ .fo-pickrow{display:flex;gap:10px} .fo-pickbtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; padding:16px 10px;border:2px dashed color-mix(in srgb,var(--a1) 55%,var(--border));border-radius:14px; background:color-mix(in srgb,var(--a1) 6%,var(--panel));color:var(--text);font-weight:700; font-size:13.5px;cursor:pointer;text-align:center;line-height:1.25} .fo-pickbtn:active{transform:scale(.98)} .fo-pickbtn .big{font-size:26px;line-height:1} .fo-pickbtn input[type=file]{display:none} .fo-mgrid{display:none;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-top:10px} .fo-thumb{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--border);aspect-ratio:1} .fo-thumb img{width:100%;height:100%;object-fit:cover;display:block} .fo-thumb-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:none; background:rgba(10,14,20,.78);color:#fff;font-size:12px;font-weight:700;cursor:pointer;line-height:1} .fo-mcount{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--a1-text);font-weight:700} .fo-progress{display:none;margin-top:10px} .fo-progress .track{height:8px;border-radius:999px;background:var(--track);overflow:hidden} .fo-progress .fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#2ee6c4,#c7f24d); transition:width .25s ease} .fo-progress .ptxt{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--sub);margin-top:6px;text-align:center}