/* ─── THEME TOKENS ────────────────────────────────────────────────────────── Every color/surface/shadow the UI uses is defined here. Component rules below read ONLY from these vars — no hardcoded colors anywhere outside token blocks. :root = default "casa" theme. Switch themes via [data-theme="x"] on . */ :root, :root[data-theme="casa"]{ /* brand */ --teal:#0f5e6e; --teal-d:#0a4651; --teal-l:#13727f; /* surfaces & text */ --bg:#f4f7f8; --surface:#fff; /* cards, panels, modals, topbar, inputs */ --surface-2:#eef2f4; /* subtle fills: buttons, badges, icon-btn hover */ --surface-3:#fafcfc; /* table header bg */ --surface-hover:#f6fbfd; /* hover rows / org-choice hover */ --surface-sel:#eaf6fb; /* selected switcher item */ --surface-sel-2:#f3f8fa; /* switcher item hover */ --text:#1f2a30; --ink:#1f2a30; /* --ink kept as alias for safety */ --text-muted:#7c8b92; --muted:#7c8b92; --border:#e3e9ec; --line:#e3e9ec; /* accents / semantic */ --primary:#1f93c7; --primary-hover:#177aa6; --primary-d:#177aa6; --primary-soft:#9fd6ec; /* light end of dashboard bar gradient */ --on-primary:#fff; /* text/icon on primary surfaces */ --accent:#7c5cff; --accent-2:#9b7bff; --accent-soft:#efe9ff; --good:#2faa6a; --warn:#e2a93b; --danger:#c0392b; --danger-bg:#fdecec; --danger-border:#f5c6c6; /* drawer (dark teal nav) */ --drawer-bg:#0f5e6e; --drawer-bg-active:#0a4651; --drawer-text:#dfeef1; --drawer-text-strong:#fff; --drawer-text-muted:#9ec9d0; --drawer-text-nav:#cfe6ea; --drawer-hover:rgba(255,255,255,.08); --drawer-hover-strong:rgba(255,255,255,.14); --drawer-active:rgba(255,255,255,.08); --drawer-border:rgba(255,255,255,.10); --drawer-card-bg:rgba(255,255,255,.08); --drawer-card-border:rgba(255,255,255,.12); --drawer-avatar-bg:rgba(255,255,255,.15); --drawer-ghost-border:rgba(255,255,255,.2); --drawer-ghost-text:#dfeef1; /* login gradient (drawer-tinted) */ --login-grad-a:#0f5e6e; --login-grad-b:#0a4651; /* overlays */ --backdrop:rgba(20,40,50,.45); /* shape */ --radius:10px; --shadow:0 2px 10px rgba(20,40,50,.08); --shadow-lg:0 12px 40px rgba(20,40,50,.18); /* scrollbars — derived from theme tokens so they follow every theme automatically */ --scrollbar-track:var(--bg); --scrollbar-thumb:var(--border); --scrollbar-thumb-hover:var(--text-muted); } /* ─── MIDNIGHT (dark mode) ───────────────────────────────────────────────── */ :root[data-theme="midnight"]{ --teal:#13303a; --teal-d:#0c2129; --teal-l:#1a4250; --bg:#0e1518; --surface:#19232a; --surface-2:#222f37; --surface-3:#1f2a31; --surface-hover:#243038; --surface-sel:#1d3640; --surface-sel-2:#222f37; --text:#e6edf0; --ink:#e6edf0; --text-muted:#8aa0aa; --muted:#8aa0aa; --border:#2b3942; --line:#2b3942; --primary:#3aa9da; --primary-hover:#5cbce6; --primary-d:#5cbce6; --primary-soft:#1e4a5c; --on-primary:#06141a; --accent:#9b7bff; --accent-2:#b49bff; --accent-soft:#2a2440; --good:#3cc07f; --warn:#e7b955; --danger:#e8625b; --danger-bg:#3a1f1f; --danger-border:#5c2c2c; --drawer-bg:#0c1a20; --drawer-bg-active:#13303a; --drawer-text:#cfdde2; --drawer-text-strong:#fff; --drawer-text-muted:#7e98a2; --drawer-text-nav:#b6ccd3; --drawer-hover:rgba(255,255,255,.06); --drawer-hover-strong:rgba(255,255,255,.12); --drawer-active:rgba(255,255,255,.06); --drawer-border:rgba(255,255,255,.08); --drawer-card-bg:rgba(255,255,255,.05); --drawer-card-border:rgba(255,255,255,.10); --drawer-avatar-bg:rgba(255,255,255,.12); --drawer-ghost-border:rgba(255,255,255,.16); --drawer-ghost-text:#cfdde2; --login-grad-a:#13303a; --login-grad-b:#0c1a20; --backdrop:rgba(0,0,0,.6); --shadow:0 2px 10px rgba(0,0,0,.4); --shadow-lg:0 12px 40px rgba(0,0,0,.55); } /* ─── FOREST (warm light, green primary, earthy) ─────────────────────────── */ :root[data-theme="forest"]{ --teal:#2f5d3a; --teal-d:#234a2c; --teal-l:#3a7047; --bg:#f5f3ec; --surface:#fffdf8; --surface-2:#ece6d8; --surface-3:#f3efe5; --surface-hover:#eef4ea; --surface-sel:#e7f0e2; --surface-sel-2:#eef1e7; --text:#2b2a22; --ink:#2b2a22; --text-muted:#8a8470; --muted:#8a8470; --border:#ddd6c4; --line:#ddd6c4; --primary:#3f8f4f; --primary-hover:#33773f; --primary-d:#33773f; --primary-soft:#a8d6b0; --on-primary:#fff; --accent:#c2742f; --accent-2:#d98c45; --accent-soft:#f5e6d3; --good:#3f8f4f; --warn:#cf9a2e; --danger:#b34430; --danger-bg:#f7e4df; --danger-border:#e3b8ad; --drawer-bg:#2f5d3a; --drawer-bg-active:#234a2c; --drawer-text:#e3eed9; --drawer-text-strong:#fff; --drawer-text-muted:#acc6a6; --drawer-text-nav:#cfe2c4; --drawer-hover:rgba(255,255,255,.09); --drawer-hover-strong:rgba(255,255,255,.15); --drawer-active:rgba(255,255,255,.09); --drawer-border:rgba(255,255,255,.10); --drawer-card-bg:rgba(255,255,255,.08); --drawer-card-border:rgba(255,255,255,.12); --drawer-avatar-bg:rgba(255,255,255,.15); --drawer-ghost-border:rgba(255,255,255,.2); --drawer-ghost-text:#e3eed9; --login-grad-a:#3a7047; --login-grad-b:#234a2c; --backdrop:rgba(40,35,20,.45); --shadow:0 2px 10px rgba(60,50,20,.10); --shadow-lg:0 12px 40px rgba(60,50,20,.20); } /* ─── SLATE (neutral grey / indigo, modern minimal) ──────────────────────── */ :root[data-theme="slate"]{ --teal:#2b3140; --teal-d:#222633; --teal-l:#363d4f; --bg:#f1f2f5; --surface:#fff; --surface-2:#eceef2; --surface-3:#f6f7f9; --surface-hover:#f0f1fb; --surface-sel:#e8eafc; --surface-sel-2:#f2f3f7; --text:#22262f; --ink:#22262f; --text-muted:#79808d; --muted:#79808d; --border:#e1e3e9; --line:#e1e3e9; --primary:#4f5bd5; --primary-hover:#3f49b8; --primary-d:#3f49b8; --primary-soft:#b9bef0; --on-primary:#fff; --accent:#7c5cff; --accent-2:#9b7bff; --accent-soft:#ecebfb; --good:#2faa6a; --warn:#d99b2f; --danger:#d14343; --danger-bg:#fbe7e7; --danger-border:#f0c4c4; --drawer-bg:#2b3140; --drawer-bg-active:#222633; --drawer-text:#dfe2ea; --drawer-text-strong:#fff; --drawer-text-muted:#9aa1b2; --drawer-text-nav:#c7ccd9; --drawer-hover:rgba(255,255,255,.07); --drawer-hover-strong:rgba(255,255,255,.13); --drawer-active:rgba(255,255,255,.07); --drawer-border:rgba(255,255,255,.09); --drawer-card-bg:rgba(255,255,255,.06); --drawer-card-border:rgba(255,255,255,.11); --drawer-avatar-bg:rgba(255,255,255,.13); --drawer-ghost-border:rgba(255,255,255,.18); --drawer-ghost-text:#dfe2ea; --login-grad-a:#363d4f; --login-grad-b:#222633; --backdrop:rgba(20,22,30,.45); --shadow:0 2px 10px rgba(30,34,45,.08); --shadow-lg:0 12px 40px rgba(30,34,45,.18); } *{box-sizing:border-box} html,body{margin:0;height:100%} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);font-size:14px} .hidden{display:none !important} .muted{color:var(--text-muted);font-size:12px} a{color:var(--primary);text-decoration:none;cursor:pointer} /* Buttons */ .btn{border:1px solid transparent;border-radius:8px;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;background:var(--surface-2);color:var(--text);transition:.12s} .btn:hover{filter:brightness(.97)} .btn-primary{background:var(--primary);color:var(--on-primary)} .btn-primary:hover{background:var(--primary-hover)} /* Destructive actions (delete/remove/void/withdraw + all ctx.confirm danger buttons). Soft-tinted at rest so it reads destructive without shouting; solid red on hover/ focus for the commit cue. Theme-safe via the danger tokens. */ .btn.danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)} .btn.danger:hover,.btn.danger:focus-visible{background:var(--danger);color:#fff;border-color:var(--danger);filter:none} .btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)} .btn-danger:hover{filter:brightness(.94)} .btn-ghost{background:transparent;border-color:var(--drawer-ghost-border);color:var(--drawer-ghost-text)} .btn-ai{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--on-primary);border:none} .btn-block{display:block;width:100%} .btn-sm{padding:6px 10px;font-size:12px} .icon-btn{background:transparent;border:none;font-size:18px;color:var(--text-muted);cursor:pointer;padding:6px 9px;border-radius:8px} .icon-btn:hover{background:var(--surface-2);color:var(--text)} /* Login */ .login-view{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--login-grad-a),var(--login-grad-b))} .login-card{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);padding:32px;width:380px;max-width:92vw} .brand{display:flex;align-items:center;gap:12px;margin-bottom:22px} .brand-mark{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px} .brand-mark.sm{width:30px;height:30px;border-radius:8px;font-size:13px} .brand-name{font-weight:800;font-size:18px} .brand-sub{font-size:12px;color:var(--text-muted)} #login-form label,#login-form{display:block} #login-form label{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:12px} #login-form input{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;background:var(--surface);color:var(--text)} #login-form input:focus{outline:none;border-color:var(--primary)} .form-error{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-border);border-radius:8px;padding:9px 11px;font-size:13px;margin-bottom:12px} .org-list{display:flex;flex-direction:column;gap:8px} .org-choice{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border:1px solid var(--border);border-radius:10px;cursor:pointer;background:var(--surface)} .org-choice:hover{border-color:var(--primary);background:var(--surface-hover)} .org-choice .oc-name{font-weight:700} .org-choice .oc-role{font-size:12px;color:var(--text-muted)} /* Shell */ .app-shell{display:flex;height:100vh;overflow:hidden} .drawer{width:248px;flex-shrink:0;background:var(--drawer-bg);color:var(--drawer-text);display:flex;flex-direction:column;height:100%} .drawer-brand{display:flex;align-items:center;gap:10px;padding:16px 16px 10px;font-weight:800;font-size:15px;color:var(--drawer-text-strong)} .org-context{margin:6px 12px 10px;background:var(--drawer-card-bg);border:1px solid var(--drawer-card-border);border-radius:10px;padding:10px 12px;text-align:left;cursor:pointer;color:var(--drawer-text);position:relative} .org-context:hover{background:var(--drawer-hover-strong)} .org-context-label{font-size:9.5px;letter-spacing:.12em;color:var(--drawer-text-muted);font-weight:700} .org-context-name{font-weight:800;font-size:15px;margin-top:2px;line-height:1.15;padding-right:16px} .org-context-role{font-size:11px;color:var(--drawer-text-muted);margin-top:2px} .org-context-caret{position:absolute;right:10px;top:12px;color:var(--drawer-text-muted)} .nav{flex:1;overflow:auto;padding:6px 8px} .nav-group{padding:14px 12px 5px;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--drawer-text-muted);opacity:.85} .nav-group:first-of-type{padding-top:10px} .nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;color:var(--drawer-text-nav);font-weight:600;font-size:14px;cursor:pointer} .nav-item .ni-ico{width:18px;text-align:center;opacity:.85} .nav-item:hover{background:var(--drawer-hover);color:var(--drawer-text-strong)} .nav-item.active{background:var(--drawer-bg-active);color:var(--drawer-text-strong);box-shadow:inset 3px 0 0 var(--primary)} .drawer-foot{padding:10px 12px;border-top:1px solid var(--drawer-border)} .user-chip{display:flex;align-items:center;gap:10px;margin-bottom:8px} .user-avatar{width:34px;height:34px;border-radius:50%;background:var(--drawer-avatar-bg);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:var(--drawer-text-strong)} .user-meta{font-size:13px;line-height:1.2} .user-meta .muted{color:var(--drawer-text-muted)} /* Theme picker (drawer footer) */ .theme-select-wrap{margin-bottom:8px} .theme-select-wrap label{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--drawer-text-muted);font-weight:700;margin-bottom:4px} #theme-select{width:100%;padding:7px 10px;border:1px solid var(--drawer-card-border);border-radius:8px;background:var(--drawer-card-bg);color:var(--drawer-text);font-size:13px;font-weight:600;cursor:pointer} #theme-select:focus{outline:none;border-color:var(--primary)} #theme-select option{background:var(--surface);color:var(--text)} .main{flex:1;display:flex;flex-direction:column;min-width:0} .topbar{height:58px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;flex-shrink:0} .topbar-left,.topbar-right{display:flex;align-items:center;gap:10px} .topbar-title{font-weight:800;font-size:16px;color:var(--text)} .view{flex:1;overflow:auto;padding:26px 30px} /* Switcher dropdown */ .switcher-backdrop{position:fixed;inset:0;background:transparent;z-index:40} .switcher{position:fixed;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);width:300px;max-height:60vh;overflow:auto} .switcher-head{padding:12px 14px;font-weight:800;font-size:12px;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border)} .switcher-list{padding:6px} .sw-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;cursor:pointer} .sw-item:hover{background:var(--surface-sel-2)} .sw-item.current{background:var(--surface-sel)} .sw-item .sw-name{font-weight:700;font-size:14px} .sw-item .sw-role{font-size:11px;color:var(--text-muted)} .sw-check{color:var(--good);font-weight:800} /* View content */ .page-title{font-size:24px;font-weight:800;margin:0 0 4px} .page-sub{color:var(--text-muted);margin:0 0 22px} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px} .card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:box-shadow .15s ease,transform .15s ease} .card .k{font-size:26px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em} /* Labels read as quiet micro-caps so the metric leads (UX pass 2026-07). */ .card .l{color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;margin-top:4px} /* Primary stat: the one number that matters on a page gets the accent + an inset left rail + a hover lift. Everything else stays quiet. */ .card.card-primary{border-color:var(--primary);box-shadow:0 2px 14px color-mix(in srgb,var(--primary) 16%,transparent)} .card.card-primary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--radius) 0 0 var(--radius);background:linear-gradient(var(--primary),var(--primary-soft,var(--primary)))} .card.card-primary .k{color:var(--primary-d,var(--primary))} .card.card-primary{padding-left:22px} .card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)} /* Optional trailing hint on a stat (e.g. a delta or note) — muted, never loud. */ .card .k-hint{font-size:12px;font-weight:600;color:var(--text-muted);margin-left:7px;letter-spacing:0} .card .k-hint.up{color:var(--good)} .card .k-hint.down{color:var(--danger)} .placeholder{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);padding:40px;text-align:center;color:var(--text-muted)} .badge{display:inline-block;background:var(--surface-2);border-radius:20px;padding:3px 9px;font-size:11px;font-weight:700;color:var(--text-muted)} .badge.admin{background:var(--accent-soft);color:var(--accent)} table.grid{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} table.grid th{ text-align:left;font-size:11px;letter-spacing:.05em;color:var(--text-muted);padding:11px 14px;border-bottom:1px solid var(--border);background:var(--surface-3)} table.grid td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:14px} table.grid tr:last-child td{border-bottom:none} table.grid tbody tr{cursor:default} table.grid tbody tr.clickable:hover{background:var(--surface-hover);cursor:pointer} /* Panels + dashboard chart */ .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)} .panel-head{padding:14px 16px;border-bottom:1px solid var(--border);font-weight:800} .panel-body{padding:16px} .dchart{display:flex;align-items:flex-end;gap:10px;padding:20px 16px 12px;height:190px} .dbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0} /* Each month has a faint full-height track so empty months read as zero, not missing; the fill scales within it. (UX pass 2026-07.) */ .dbar-track{width:72%;max-width:36px;flex:1;display:flex;align-items:flex-end;background:var(--surface-2);border-radius:5px;overflow:hidden} .dbar-fill{width:100%;background:linear-gradient(180deg,var(--primary-soft),var(--primary));border-radius:5px 5px 0 0;min-height:3px;transition:height .3s ease} .dbar.is-peak .dbar-fill{background:linear-gradient(180deg,var(--accent-2,var(--accent)),var(--accent))} .dbar-val{font-size:10.5px;font-weight:700;color:var(--text-muted);margin-bottom:5px;height:13px;font-variant-numeric:tabular-nums;white-space:nowrap} .dbar.is-peak .dbar-val{color:var(--accent)} .dbar-lbl{font-size:10px;color:var(--text-muted);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .dbar:hover .dbar-fill{filter:brightness(1.08)} /* Toolbar (list pages) */ .toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap} .toolbar .spacer{flex:1} .toolbar input[type=search],.toolbar select{padding:8px 11px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--surface);color:var(--text)} .toolbar input[type=search]{min-width:240px} .result-count{color:var(--text-muted);font-size:13px;font-weight:600} /* Pagination control (shared pager from app.js ctx.paginator) */ .pager{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:14px} .pager .pager-info{font-size:13px} .pager .btn[disabled]{opacity:.5;cursor:default} /* Detail header */ .detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px} .detail-title{font-size:22px;font-weight:800} .detail-sub{color:var(--text-muted);font-size:13px;margin-top:2px} .back-link{font-size:13px;font-weight:700;margin-bottom:10px;display:inline-block} .kv{display:grid;grid-template-columns:160px 1fr;gap:8px 14px;font-size:14px;align-items:baseline} .kv .key{color:var(--text-muted);font-size:12.5px} /* Empty values recede so filled fields lead the eye (UX pass 2026-07). A value that is just an em-dash is styled as absent, not as content. */ .kv .val-empty{color:var(--border)} .kv .val{color:var(--text)} /* ── Data chips: humanized enum values in list cells (type/method/etc). ── A soft dot + Title-case text, so 'pledge_payment' reads 'Pledge payment' with a quiet category color instead of raw snake_case gray text. */ .chip-data{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text);white-space:nowrap} .chip-data::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text-muted);flex:none} .chip-data.c-donation::before,.chip-data.c-cash::before,.chip-data.c-check::before{background:var(--good)} .chip-data.c-pledge::before,.chip-data.c-pledge_payment::before{background:var(--primary)} .chip-data.c-grant::before{background:var(--accent)} .chip-data.c-in_kind::before{background:var(--warn)} .chip-data.c-sponsorship::before,.chip-data.c-auction::before,.chip-data.c-raffle::before{background:var(--accent-2,var(--accent))} .chip-data.c-refund::before,.chip-data.c-event_ticket::before{background:var(--text-muted)} .cell-mono{font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:13px} /* Slugs/tokens rendered as in list cells read as a subdued mono pill so they're clearly a URL path, not a normal text column. */ table.grid td code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;background:var(--surface-2);color:var(--text-muted);padding:2px 7px;border-radius:5px;white-space:nowrap} /* ── Name cell: small tinted-initial avatar + name, for scanning long lists. ── The avatar hue is set inline per-row (derived from the name) so each person has a stable, distinct color; organizations get a square avatar. (UX 2026-07) */ .name-cell{display:inline-flex;align-items:center;gap:9px;min-width:0} .name-av{flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;font-size:10.5px;font-weight:700;letter-spacing:.02em; color:#fff;background:var(--av-bg,var(--text-muted));text-transform:uppercase} .name-av.is-org{border-radius:6px} .name-cell .name-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .section-title{font-weight:800;font-size:15px;margin:22px 0 10px} /* Modal — z-index 195 keeps the stack coherent: page chrome/dropdowns (≤80) < suggestion FAB (190) < modal backdrop (195) < toasts (200) < sbox overlay (300), so open modals sit ABOVE the floating suggestion button (it was stealing clicks). */ .modal-backdrop{position:fixed;inset:0;background:var(--backdrop);z-index:195;display:flex;align-items:center;justify-content:center;animation:modal-fade .16s ease} .modal{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-lg);width:520px;max-width:94vw;max-height:90vh;overflow:auto;animation:modal-rise .18s cubic-bezier(.2,.7,.3,1)} @keyframes modal-fade{from{opacity:0}to{opacity:1}} @keyframes modal-rise{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.modal-backdrop,.modal{animation:none}} .modal-head{padding:15px 18px;border-bottom:1px solid var(--border);font-size:15px;font-weight:800;letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:center} .modal-body{padding:18px} .modal-foot{padding:14px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px} /* Confirm / prompt dialogs (ctx.confirm / ctx.prompt) */ .modal.modal-dialog{width:420px} .dlg-msg{margin:0;font-size:14.5px;line-height:1.5;color:var(--text)} .dlg-input{width:100%;margin-top:12px;padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-size:14px;background:var(--surface);color:var(--text)} .dlg-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring,rgba(31,122,140,.25))} .field{margin-bottom:13px} .field label{display:block;font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:5px} /* Required-field marker: any .field whose control is [required] gets a red * on its label automatically — no per-form edits. Add data-optional to a label to skip. */ .field:has(input[required],select[required],textarea[required]) > label:not([data-optional])::after{content:" *";color:var(--danger);font-weight:800} .req-marker{color:var(--danger);font-weight:800;margin-left:2px} .field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-size:14px;background:var(--surface);color:var(--text);transition:border-color .12s,box-shadow .12s} .field textarea{min-height:80px;resize:vertical} /* Branded focus ring on every form control — consistent teal keyboard/accessibility affordance across all ~40 modals, replacing the browser default. (UX 2026-07.) */ .field input:focus,.field select:focus,.field textarea:focus, .toolbar input[type="search"]:focus,.toolbar select:focus{ outline:none;border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)} .field input::placeholder,.field textarea::placeholder{color:var(--text-muted);opacity:.7} /* ── Contacts module: wide modal, sectioned forms, toggles, sub-tabs ──────────── */ .modal.modal-wide{width:760px} /* Form builder */ .fb-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:10px} .fb-row{border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--surface-2,rgba(0,0,0,.02))} .fb-row.fb-dragging{opacity:.5;outline:2px dashed var(--accent,#1f7a8c)} .fb-row-head{display:flex;align-items:center;gap:8px} .fb-drag{cursor:grab;color:var(--text-muted);font-size:16px;user-select:none;line-height:1} .fb-type{flex:0 0 130px} .fb-label{flex:1;min-width:120px} .fb-req{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-muted);white-space:nowrap;font-weight:400} .fb-req input{width:auto} .fb-row-opts,.fb-row-hidden{margin-top:8px;padding-left:24px} .fb-options{width:100%} .fb-add{display:flex;gap:8px;align-items:center} .fb-add select{flex:0 0 150px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .form-grid .field.span2{grid-column:1 / -1} .form-section{margin:4px 0 16px} .form-section > legend,.form-section .fs-title{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);border:0;padding:0;margin:0 0 8px;display:block} .toggle-row{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:13px;font-weight:600} /* progressive-disclosure section in modals (native
) */ .form-disclose{border:1px solid var(--border);border-radius:8px;margin:0 0 10px;background:var(--surface)} .form-disclose > summary{cursor:pointer;padding:10px 13px;font-size:13px;font-weight:700;list-style:none;display:flex;align-items:center;gap:8px;user-select:none} .form-disclose > summary::-webkit-details-marker{display:none} .form-disclose > summary::before{content:"▸";color:var(--text-muted);font-size:11px;transition:transform .12s} .form-disclose[open] > summary::before{transform:rotate(90deg)} .form-disclose > summary:hover{background:var(--surface-2);border-radius:8px} .form-disclose[open] > summary{border-bottom:1px solid var(--border);border-radius:8px 8px 0 0} .form-disclose > summary .muted{font-weight:500} .form-disclose > *:not(summary){margin:13px 13px 4px} .form-disclose .toggle-row{margin-left:13px} .toggle-row input[type=checkbox]{width:auto;margin:0} /* Canonical status tones — soft tint derived from each theme's semantic color so good=green, warn=amber, danger=red, neutral=grey read correctly in every theme. See statusBadge() in app.js for the status→tone map. */ .badge.good{background:color-mix(in srgb,var(--good) 16%,var(--surface));color:var(--good)} .badge.warn{background:color-mix(in srgb,var(--warn) 18%,var(--surface));color:var(--warn)} .badge.danger{background:var(--danger-bg);color:var(--danger)} .badge.neutral{background:var(--surface-2);color:var(--text-muted)} .badge.major{background:var(--accent-soft);color:var(--accent)} /* Legacy solid variants realigned to the soft tones so `badge badge-success` (both classes present in older markup) no longer fights `.badge.good`. */ .badge.badge-success{background:color-mix(in srgb,var(--good) 16%,var(--surface));color:var(--good)} .badge.badge-danger{background:var(--danger-bg);color:var(--danger)} .badge.badge-warn{background:color-mix(in srgb,var(--warn) 18%,var(--surface));color:var(--warn)} table.grid th.sortable{cursor:pointer;user-select:none} table.grid th.sortable:hover{color:var(--accent)} table.grid th.sortable .sort-ind{font-size:10px;opacity:.7;margin-left:3px} .sub-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:20px 0 0;flex-wrap:wrap} .sub-tab{padding:8px 14px;font-size:13px;font-weight:700;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;background:none;border-top:0;border-left:0;border-right:0} .sub-tab.active{color:var(--accent);border-bottom-color:var(--accent)} .sub-pane{padding-top:14px} .row-actions{white-space:nowrap;text-align:right} .row-actions .btn{margin-left:6px} .progress-bar{height:7px;border-radius:6px;background:var(--surface-2);overflow:hidden;min-width:80px} .progress-bar > span{display:block;height:100%;background:var(--accent)} /* ── Typeahead picker (giving donor/campaign selectors) ──────────────────────── */ .ta-field{position:relative} .ta-field .ta-results{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);max-height:240px;overflow:auto;margin-top:2px} .ta-field .ta-row{padding:8px 11px;font-size:13px;cursor:pointer} .ta-field .ta-row:hover{background:var(--surface-hover)} .ta-field .ta-empty{padding:8px 11px;font-size:13px} /* Page-builder: public URL bar */ .public-url-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:14px} .public-url-bar .pu-label{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--text-muted);text-transform:uppercase} .public-url-bar .pu-link{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--primary);word-break:break-all} /* ── Media library (assets module) ─────────────────────────────────────────── */ .asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:16px} .asset-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface-1);display:flex;flex-direction:column} .asset-thumb{height:140px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);overflow:hidden} .asset-thumb img{max-width:100%;max-height:100%;object-fit:contain} .asset-thumb .asset-file{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;color:var(--text-muted);letter-spacing:.05em} .asset-meta{padding:10px 12px;display:flex;flex-direction:column;gap:4px} .asset-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .asset-sub{font-size:11px} .asset-actions{display:flex;gap:6px;margin-top:6px} /* ── Reusable asset picker (asset-picker.js): modal grid of selectable media ── */ .ap-modal{width:720px} .ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px} .ap-item{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface-1);display:flex;flex-direction:column;cursor:pointer;padding:0;text-align:left;font:inherit;transition:border-color .12s,box-shadow .12s} .ap-item:hover,.ap-item:focus{border-color:var(--primary,#1f7a8c);box-shadow:var(--shadow-sm,0 1px 4px rgba(0,0,0,.12));outline:none} .ap-thumb{height:104px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);overflow:hidden} .ap-thumb img{max-width:100%;max-height:100%;object-fit:contain} .ap-file{font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:700;color:var(--text-muted);letter-spacing:.05em} .ap-name{font-weight:600;font-size:13px;padding:8px 10px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ap-sub{font-size:11px;padding:0 10px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Theme editor asset thumbnails (logo/favicon preview) */ .t-asset{display:flex;align-items:center;gap:10px} .t-asset-thumb{width:48px;height:48px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none} .t-asset-thumb img{max-width:100%;max-height:100%;object-fit:contain} .t-asset-info{flex:1;min-width:0;font-size:12px} .t-asset-info .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Status badge variants (used by tasks/pages/site/giving modules) */ .badge-success{background:var(--good,#2faa6a);color:#fff} .badge-danger{background:var(--danger,#c0392b);color:#fff} .badge-warn{background:var(--warn,#e2a93b);color:#fff} /* ── Global search (top bar) ─────────────────────────────────────────────── */ .global-search{position:relative} .global-search .gs-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:15px;pointer-events:none} #gs-input{width:300px;max-width:42vw;padding:8px 12px 8px 30px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font-size:13px} #gs-input:focus{outline:none;border-color:var(--primary)} .gs-results{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:360px;max-width:70vw;max-height:60vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px} .gs-group-label{padding:8px 10px 4px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--text-muted)} .gs-item{padding:8px 10px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:10px} .gs-item:hover,.gs-item.gs-active{background:var(--surface-sel-2)} .gs-item-main{min-width:0;flex:1} .gs-item-label{font-weight:700;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gs-item-sub{font-size:12px;color:var(--text-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Per-type result icon: a tinted glyph so a result's kind reads at a glance. */ .gs-ico{flex:none;width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center; justify-content:center;font-size:12px;font-weight:800;background:var(--surface-2);color:var(--text-muted)} .gs-ico.g-donor{background:color-mix(in srgb,var(--primary) 15%,transparent);color:var(--primary-d,var(--primary))} .gs-ico.g-gift{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)} .gs-ico.g-pledge{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)} .gs-ico.g-campaign{background:var(--accent-soft);color:var(--accent)} .gs-ico.g-event{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)} .gs-ico.g-volunteer{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)} .gs-empty{padding:20px 14px;color:var(--text-muted);font-size:13px;text-align:center} .gs-empty-ico{font-size:22px;opacity:.5;margin-bottom:6px} .gs-empty-hint{font-size:12px;margin-top:4px;opacity:.85} .task-related-link{color:var(--primary);text-decoration:none;font-weight:600} .task-related-link:hover{text-decoration:underline} @media (max-width:760px){#gs-input{width:160px}.gs-results{width:300px}} /* ─── Reports & Analytics builder (module 527) ─────────────────────────────── */ .rp-group{margin-top:22px} .rp-group-title{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0 0 10px} .rp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px} .rp-card{position:relative;display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius,12px);cursor:pointer;font:inherit;color:inherit;box-shadow:var(--shadow);transition:border-color .12s,transform .12s} .rp-card:hover{border-color:var(--primary);transform:translateY(-1px)} .rp-card-icon{font-size:24px;line-height:1;flex-shrink:0} .rp-card-body{display:flex;flex-direction:column;gap:3px;min-width:0} .rp-card-name{font-weight:700;font-size:14px} .rp-card-desc{font-size:12px;color:var(--text-muted);line-height:1.35} .rp-card-del{position:absolute;top:8px;right:10px;color:var(--text-muted);font-size:13px;opacity:0;transition:opacity .12s} .rp-card-saved:hover .rp-card-del{opacity:1} .rp-card-del:hover{color:#c0654a} .rp-builder-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .rp-actions{display:flex;gap:8px;flex-wrap:wrap} .rp-filters{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:14px 0;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius,12px)} .rp-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-muted);font-weight:600} .rp-field input,.rp-field select{padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--surface);color:var(--text);min-width:140px} .rp-run{align-self:flex-end} .rp-summary{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0} .rp-stat{flex:1;min-width:140px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius,12px);padding:14px 16px;box-shadow:var(--shadow)} .rp-stat-val{font-size:22px;font-weight:800;line-height:1.1} .rp-stat-label{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-top:4px} .rp-chart{margin:8px 0 16px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius,12px)} .rp-pie{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .rp-legend{display:flex;flex-direction:column;gap:6px;font-size:12px} .rp-legend-item{display:flex;align-items:center;gap:8px} .rp-legend-item span{width:12px;height:12px;border-radius:3px;display:inline-block} .rp-result-count{font-size:12px;margin:4px 0 6px} .rp-table{margin-top:4px} @media (max-width:760px){.rp-filters{flex-direction:column;align-items:stretch}.rp-field input,.rp-field select{min-width:0;width:100%}} /* ═══════════════════════════════════════════════════════════════════════════ POLISH & QA HARDENING — shared list states, toasts, focus rings, a11y, mobile responsiveness. (Added in the polish pass; reads only theme tokens.) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Shared list/empty/error/loading states (ctx.renderState) ─────────────── */ .state-block{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px} .state-hint{font-size:12.5px;color:var(--text-muted);max-width:340px;line-height:1.45} .state-action{margin-top:6px} .state-cell{text-align:center;color:var(--text-muted);padding:26px 14px} .state-emoji{font-size:26px;line-height:1;opacity:.7} .state-error{color:var(--danger)} .state-error .state-emoji{opacity:1} .state-loading{color:var(--text-muted)} .spinner{display:inline-block;width:16px;height:16px;vertical-align:-3px;border:2px solid var(--surface-2);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media (prefers-reduced-motion:reduce){.spinner{animation-duration:0s}} /* ── Toasts (ctx.toast) ───────────────────────────────────────────────────── */ #toast-host{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:10px;align-items:flex-end;max-width:92vw;pointer-events:none} .toast{pointer-events:auto;min-width:200px;max-width:420px;padding:12px 15px;border-radius:10px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);background:var(--surface);color:var(--text);border:1px solid var(--border);opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s;cursor:pointer} .toast.show{opacity:1;transform:none} .toast-ok{border-left:4px solid var(--good)} .toast-error{border-left:4px solid var(--danger);background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)} @media (prefers-reduced-motion:reduce){.toast{transition:none}} /* Sandboxed email/template HTML preview (communication module) */ .email-preview{width:100%;height:280px;max-height:60vh;border:1px solid var(--border);border-radius:var(--radius);background:#fff} /* ── Visible focus ring (keyboard a11y) ───────────────────────────────────── */ :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px} .btn:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .nav-item:focus-visible{outline:2px solid var(--drawer-text-strong);outline-offset:-2px} .nav-item{outline-offset:-2px} .sw-item:focus-visible,.org-choice:focus-visible,.gs-item:focus-visible,.sub-tab:focus-visible,.rp-card:focus-visible,.ap-item:focus-visible{outline:2px solid var(--primary);outline-offset:1px} a:focus-visible{outline:2px solid var(--primary);outline-offset:2px} /* Don't double-paint when mouse-focusing; :focus-visible already scopes to keyboard. */ /* ── Contrast: nudge muted/badge text to meet ~4.5:1 on light surfaces ─────── */ .badge{color:var(--text)} /* default badge text -> primary text for contrast */ .gs-item-sub,.asset-sub,.rp-card-desc{color:var(--text-muted)} /* ═══ MOBILE RESPONSIVENESS (staff shell) ═══════════════════════════════════ */ /* Off-canvas drawer + backdrop. Hidden by default on desktop; on small screens the drawer slides off-screen and ☰ (#drawer-toggle) toggles body.drawer-open. */ .drawer-backdrop{position:fixed;inset:0;background:var(--backdrop);z-index:79;display:none} #drawer-toggle{display:none} /* topbar hamburger only shows on mobile */ @media (max-width:900px){ #drawer-toggle{display:inline-flex} .app-shell{position:relative} .drawer{position:fixed;top:0;left:0;height:100vh;z-index:80;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg)} body.drawer-open .drawer{transform:none} body.drawer-open .drawer-backdrop{display:block} .main{width:100%} .view{padding:18px 16px} /* tables scroll horizontally instead of breaking layout */ table.grid{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch} /* toolbars wrap (already flex-wrap; ensure search doesn't force overflow) */ .toolbar input[type=search]{min-width:0;flex:1 1 160px} /* modals fit small screens */ .modal,.modal.modal-wide,.ap-modal{width:96vw;max-width:96vw} .modal-body{padding:14px} .form-grid{grid-template-columns:1fr} .detail-head{flex-direction:column} .kv{grid-template-columns:120px 1fr} #gs-input{width:150px;max-width:48vw} .gs-results{width:88vw;right:-8px} .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} } @media (prefers-reduced-motion:reduce){.drawer{transition:none}} /* ── Import / Export module ───────────────────────────────────────────────── */ .imex-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start} @media(max-width:900px){.imex-grid{grid-template-columns:1fr}} .imex-card{background:var(--surface,#fff);border:1px solid var(--border,#e3e3e8);border-radius:12px;padding:16px 18px} .imex-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px} .imex-pick{display:flex;flex-direction:column;gap:4px;text-align:left;padding:16px;border:1px solid var(--border,#e3e3e8);border-radius:10px;background:var(--surface,#fff);cursor:pointer;transition:border-color .12s,box-shadow .12s} .imex-pick:hover{border-color:var(--accent,#3b6cf2);box-shadow:0 2px 10px rgba(0,0,0,.06)} .imex-pick-ico{font-size:24px;line-height:1} .imex-pick-label{font-weight:600} .imex-pick-sub{font-size:12px;color:var(--muted,#777)} .imex-steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px} .imex-step{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--chip,#f0f0f4);color:var(--muted,#777)} .imex-step.active{background:var(--accent,#3b6cf2);color:#fff} .imex-step.done{background:#e6f4ea;color:#1e7e34} .imex-drop{border:2px dashed var(--border,#cfcfd6);border-radius:10px;padding:22px;text-align:center} .imex-map-table td{vertical-align:middle} .imex-map-table select{width:100%} .imex-req{color:#c0392b;font-weight:700} .imex-preview{margin-top:14px} .imex-preview summary{cursor:pointer;color:var(--accent,#3b6cf2);font-size:13px} .imex-scroll{overflow:auto;max-height:340px;margin-top:8px;border:1px solid var(--border,#eee);border-radius:8px} .imex-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px} .imex-exports{display:flex;flex-direction:column;gap:8px} .imex-export-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border,#eee);border-radius:8px} .imex-export-note{font-size:12px;color:var(--muted,#999);text-align:right} /* ─── Theme-aware scrollbars ───────────────────────────────────────────────── Follow the active theme via the --scrollbar-* tokens (derived from theme tokens, so CASA/Midnight/Forest/Slate all get matching scrollbars). */ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } /* WebKit / Chromium / Edge */ *::-webkit-scrollbar { width: 12px; height: 12px; } *::-webkit-scrollbar-track { background: var(--scrollbar-track); } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; border: 3px solid var(--scrollbar-track); /* inset look */ } *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } *::-webkit-scrollbar-corner { background: var(--scrollbar-track); } /* The drawer is dark in every theme — give its scrollbar drawer-palette colors. */ .drawer, .drawer * { scrollbar-color: var(--drawer-hover-strong) var(--drawer-bg); } .drawer ::-webkit-scrollbar-track, .drawer::-webkit-scrollbar-track { background: var(--drawer-bg); } .drawer ::-webkit-scrollbar-thumb, .drawer::-webkit-scrollbar-thumb { background: var(--drawer-hover-strong); border-color: var(--drawer-bg); } .drawer ::-webkit-scrollbar-thumb:hover, .drawer::-webkit-scrollbar-thumb:hover { background: var(--drawer-text-muted); } /* ════════════════════════════════════════════════════════════════════════════ Page-builder STUDIO — full-screen split-pane AI page editor. Faithful port of the original CASA studio, themed with OUR design tokens. The studio root escapes .view padding to fill the content area below the top bar (.view has padding:26px 30px and overflow:auto). ════════════════════════════════════════════════════════════════════════════ */ .pg-studio{position:fixed;top:58px;left:248px;right:0;bottom:0;display:flex;flex-direction:column;background:var(--bg);z-index:20} @media (max-width:900px){ .pg-studio{left:0} } /* When the studio is EMBEDDED in the unified Website workspace (site.js), it must fill its grid cell, not overlay the viewport. Override the full-screen pinning. */ /* The builder's right column is a rounded card that MATCHES the left Pages rail (same border + radius + shadow). The studio fills it; the card clips it. */ #ws-editor-host{flex:1 1 auto;display:flex;min-width:0;min-height:0;width:100%;height:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} #ws-editor-host .pg-studio{position:static;inset:auto;top:auto;left:auto;right:auto;bottom:auto;z-index:auto;flex:1;min-height:0;border:none;border-radius:0;overflow:hidden} .pg-topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0} .pg-topbar .spacer{flex:1} .pg-back{font-size:13px;color:var(--text-muted);text-decoration:none} .pg-back:hover{color:var(--primary)} .pg-sep{color:var(--text-muted)} .pg-topbar .pg-title{font-weight:700;font-size:14px;color:var(--text)} .pg-topbar .pg-slug{font-size:11px;color:var(--text-muted);font-family:ui-monospace,monospace} .pg-status{font-size:11px} .pg-pub{color:var(--good);font-weight:700} .pg-draft{color:var(--text-muted)} .pg-split{flex:1;display:flex;overflow:hidden;min-height:0} .pg-divider{width:6px;cursor:col-resize;background:var(--border);flex-shrink:0;user-select:none} .pg-divider:hover,.pg-divider.dragging{background:var(--primary)} .pg-drag-overlay{position:fixed;inset:0;z-index:9999;cursor:col-resize} .pg-chat{flex:0 0 46%;min-width:300px;display:flex;flex-direction:column;overflow:hidden;min-height:0;background:var(--surface)} .pg-preview{flex:1;min-width:300px;display:flex;flex-direction:column;overflow:hidden;min-height:0;background:var(--surface)} .pg-pane-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0} .pg-pane-h{font-size:14px;font-weight:700;color:var(--text)} .pg-pane-sub{font-size:11px;color:var(--text-muted);font-family:ui-monospace,monospace} .pg-pane-actions{display:flex;gap:6px;flex-wrap:wrap} .pg-version-row{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--surface-3);flex-shrink:0} .pg-version-row label{font-size:11px;color:var(--text-muted);white-space:nowrap} .pg-version-row select{flex:1;font-size:11px;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text)} .pg-version-info{font-size:10px;color:var(--text-muted)} .pg-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:0} .pg-chat-hint{color:var(--text-muted);font-size:13px;line-height:1.5} .pg-msg{padding:10px 13px;border-radius:10px;max-width:90%;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word} .pg-msg.user{background:var(--primary);color:var(--on-primary);align-self:flex-end} .pg-msg.assistant{background:var(--surface-2);border:1px solid var(--border);color:var(--text);align-self:flex-start} .pg-msg.pg-err{border-color:var(--danger);color:var(--danger);background:var(--danger-bg)} .pg-tool-line{font-size:11px;color:var(--text-muted);font-family:ui-monospace,monospace;padding:1px 2px} .pg-tool-line.done{color:var(--good)} .pg-tool-status{font-size:11px;color:var(--text-muted);padding:2px 16px;font-family:ui-monospace,monospace;min-height:18px;flex-shrink:0} .pg-input{padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0} .pg-input textarea{width:100%;min-height:64px;resize:vertical;font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)} .pg-input-row{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap} .pg-input-row .spacer{flex:1} .pg-chat-state{font-size:11px} /* Preview pane tabs */ .pg-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface)} .pg-tab{padding:10px 16px;font-size:12px;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap} .pg-tab:hover{color:var(--text)} .pg-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:700} .pg-tabpanel{flex:1;min-height:0;display:flex;flex-direction:column} .pg-scroll{overflow-y:auto;padding:16px 18px} .pg-preview-bar{display:flex;gap:6px;align-items:center;padding:6px 12px;border-bottom:1px solid var(--border);background:var(--surface-3);flex-shrink:0} .pg-preview-bar .spacer{flex:1} .pg-dev.active{background:var(--primary);color:var(--on-primary);border-color:var(--primary)} .pg-preview-stage{flex:1;display:flex;justify-content:center;background:#1a1d27;overflow:auto;min-height:0} .pg-preview-stage.pg-device{padding:20px;align-items:flex-start} .pg-frame{width:100%;height:100%;border:none;background:#fff} /* Source tabs (HTML / CSS / JS) */ .pg-src{padding:16px 18px;gap:10px} .pg-src-label{font-size:12px;font-weight:700;color:var(--text-muted)} .pg-src-area{flex:1;min-height:0;resize:none;width:100%;font-family:ui-monospace,monospace;font-size:12px;line-height:1.5;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px} /* CodeMirror host (vendored /vendor/editor.js styles .cm-editor itself) */ .pg-cm-host{flex:1;min-height:0;overflow:hidden;border:1px solid var(--border);border-radius:8px} .pg-cm-host:empty{display:none} .pg-cm-host .cm-editor{height:100%;font-size:12.5px} .pg-cm-host .cm-editor.cm-focused{outline:none} .pg-cm-host .cm-scroller{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .pg-src-actions{display:flex;align-items:center;gap:10px;flex-shrink:0} .pg-dirty{font-size:11px} /* Meta tab */ .pg-meta-grid{display:grid;grid-template-columns:1fr 160px;gap:12px} .pg-slug-wrap{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface)} .pg-slug-prefix{padding:9px 10px;font-family:ui-monospace,monospace;font-size:13px;color:var(--text-muted);background:var(--surface-3);border-right:1px solid var(--border);white-space:nowrap;user-select:none} .pg-slug-wrap input{border:none;background:transparent;flex:1;font-family:ui-monospace,monospace} .pg-help{font-size:11px;margin:4px 0 0} .pg-url-preview{font-size:12px;color:var(--text-muted);background:var(--surface-2);padding:8px 12px;border-radius:8px;margin-bottom:13px} .pg-url-preview a{color:var(--primary);font-family:ui-monospace,monospace;text-decoration:none} .pg-meta-checks{display:flex;gap:18px;margin-bottom:14px} .pg-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text)} .pg-check input{width:auto} .pg-meta-actions{display:flex;align-items:center;gap:10px} .pg-meta-ok{color:var(--good);font-size:12px} /* Versions tab */ .pg-ver-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .pg-ver-head h3{margin:0;font-size:14px} .pg-ver-table{font-size:12px} .pg-ver-area{margin-top:16px;border:1px solid var(--border);border-radius:10px;overflow:hidden} .pg-ver-area-head{padding:10px 14px;background:var(--surface-3);display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;gap:8px} .pg-ver-frame{width:100%;height:340px;border:none;background:#fff} .pg-diff-body{display:grid;grid-template-columns:1fr 1fr;font-family:ui-monospace,monospace;font-size:11px;line-height:1.4} .pg-diff-col-head{position:sticky;top:0;background:var(--surface-3);padding:6px 8px;font-size:10px;color:var(--text-muted)} .pg-diff-side{overflow:auto;max-height:420px} .pg-diff-left{border-right:1px solid var(--border)} .pg-diff-line{padding:1px 8px;white-space:pre;min-height:1.4em} .pg-diff-same{color:var(--text-muted)} .pg-diff-del{background:rgba(239,68,68,.12);color:#ef4444} .pg-diff-add{background:rgba(16,185,129,.12);color:#10b981} .pg-diff-pad{color:transparent} /* Publish modal */ .pg-pub-banner{padding:12px;background:rgba(47,170,106,.08);border:1px solid rgba(47,170,106,.25);border-radius:8px;margin-bottom:16px;font-size:13px} .pg-pub-section{font-size:12px;font-weight:700;color:var(--text-muted);margin:14px 0 8px} .pg-pub-row{padding:10px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;display:flex;gap:12px;align-items:center} .pg-pub-meta{flex:1;font-size:12px} /* ─── HELP SYSTEM (help.js) ────────────────────────────────────────────────── Per-page "?" explainer: topbar button + right slide-over drawer. Self-contained; uses theme tokens only. Do not interleave with other blocks. ─────────────── */ .help-btn{font-weight:800;line-height:1} /* Suggest button in the topbar (beside "?") — matches the icon-btn sizing. */ .sbox-topbtn{font-size:17px;line-height:1} .sbox-topbtn:hover{background:var(--surface-hover);color:var(--text)} .help-btn[aria-expanded="true"]{background:var(--surface-2);color:var(--text)} .help-backdrop{position:fixed;inset:0;background:var(--backdrop);z-index:70;display:flex;justify-content:flex-end} .help-backdrop.hidden{display:none} .help-panel{background:var(--surface);width:400px;max-width:92vw;height:100%; box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden; transform:translateX(100%);transition:transform .2s ease;outline:none} .help-panel.open{transform:translateX(0)} @media (prefers-reduced-motion:reduce){.help-panel{transition:none}} .help-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding:16px 18px;border-bottom:1px solid var(--border)} .help-eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary)} .help-title{font-weight:800;font-size:18px;color:var(--text);margin-top:2px} .help-close{font-size:16px;flex-shrink:0} .help-body{padding:18px;overflow:auto;flex:1} .help-section{margin-bottom:18px} .help-section-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px} .help-what{font-size:14px;line-height:1.55;color:var(--text);margin:0} .help-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px} .help-list li{font-size:14px;line-height:1.5;color:var(--text)} .help-tips{margin-top:6px;padding:14px;border-radius:var(--radius); background:var(--accent-soft);border:1px solid var(--accent-soft)} .help-tips-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:8px} .help-tips .help-list li{color:var(--text)} @media (max-width:560px){.help-panel{width:100vw;max-width:100vw}} /* ─── /HELP SYSTEM ──────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ SUGGESTION BOX (public/js/suggestion-box.js) — APPENDED BLOCK Floating bottom-right FAB + centered panel. All theme-token driven. ═══════════════════════════════════════════════════════════════════════════ */ .sbox-fab{position:fixed;right:20px;bottom:20px;z-index:190;display:inline-flex;align-items:center;gap:8px; padding:11px 16px;border-radius:999px;border:1px solid var(--accent);cursor:pointer; background:var(--accent);color:#fff;font-size:14px;font-weight:700;font-family:inherit; box-shadow:var(--shadow-lg);transition:transform .12s ease,filter .12s ease} .sbox-fab:hover{transform:translateY(-2px);filter:brightness(1.06)} .sbox-fab:active{transform:translateY(0)} .sbox-fab:focus-visible{outline:2px solid var(--primary);outline-offset:3px} .sbox-fab-ico{font-size:17px;line-height:1} @media (max-width:560px){.sbox-fab-txt{display:none}.sbox-fab{padding:13px;border-radius:50%}} .sbox-overlay{position:fixed;inset:0;z-index:300;background:var(--backdrop); display:flex;align-items:center;justify-content:center;padding:20px} .sbox-panel{background:var(--surface);border:1px solid var(--border);border-radius:16px; box-shadow:var(--shadow-lg);width:680px;max-width:96vw;max-height:88vh;display:flex;flex-direction:column;overflow:hidden} .sbox-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)} .sbox-title{font-size:16px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px} .sbox-scope{font-size:13px;font-weight:500;color:var(--text-muted)} .sbox-x{background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;padding:4px 10px;border-radius:8px;line-height:1} .sbox-x:hover{background:var(--surface-2);color:var(--text)} .sbox-x:focus-visible{outline:2px solid var(--primary);outline-offset:1px} .sbox-tabs{display:flex;gap:4px;padding:10px 16px 0;border-bottom:1px solid var(--border)} .sbox-tab{background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:inherit; font-size:13px;font-weight:600;color:var(--text-muted);padding:8px 12px 10px} .sbox-tab:hover{color:var(--text)} .sbox-tab.active{color:var(--accent);border-bottom-color:var(--accent)} .sbox-tab:focus-visible{outline:2px solid var(--primary);outline-offset:1px;border-radius:6px} .sbox-body{padding:16px 20px;overflow-y:auto;flex:1} /* New-suggestion form */ .sbox-form{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:16px; display:flex;flex-direction:column;gap:10px} .sbox-typetoggle{display:flex;gap:8px} .sbox-type{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer; font-family:inherit;font-size:13px;font-weight:600;color:var(--text-muted);padding:8px} .sbox-type:hover{border-color:var(--accent)} .sbox-type.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} .sbox-type:focus-visible{outline:2px solid var(--primary);outline-offset:1px} .sbox-input,.sbox-textarea{width:100%;box-sizing:border-box;background:var(--surface);border:1px solid var(--border); border-radius:8px;color:var(--text);font-family:inherit;font-size:13px;padding:9px 11px} .sbox-input:focus,.sbox-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .sbox-textarea{resize:vertical;min-height:64px} .sbox-formrow{display:flex;gap:8px;align-items:center} .sbox-formrow .sbox-cat{flex:1} .sbox-btn{border:none;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;padding:9px 16px} .sbox-btn-primary{background:var(--accent);color:#fff} .sbox-btn-primary:hover{filter:brightness(1.06)} .sbox-btn-primary:disabled{opacity:.6;cursor:default} .sbox-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .sbox-filters{display:flex;gap:8px;margin-bottom:14px} .sbox-filter{flex:1} .sbox-listhdr{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:4px 0 10px} .sbox-list{display:flex;flex-direction:column;gap:10px} .sbox-empty{padding:26px;text-align:center;color:var(--text-muted);font-size:13px} .sbox-empty-sm{padding:10px} /* List row */ .sbox-row{display:flex;gap:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px} .sbox-vote{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;min-width:46px} .sbox-upvote{width:42px;height:38px;border:1px solid var(--border);border-radius:8px;background:var(--surface); color:var(--text-muted);cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .12s} .sbox-upvote:hover{border-color:var(--accent);color:var(--accent)} .sbox-upvote.voted{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} .sbox-upvote:focus-visible{outline:2px solid var(--primary);outline-offset:1px} .sbox-votecount{font-size:13px;font-weight:800;color:var(--text)} .sbox-rowmain{flex:1;min-width:0} .sbox-rowtitle{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;word-wrap:break-word} .sbox-rowmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11px;color:var(--text-muted)} .sbox-rowbody{margin-top:8px;font-size:13px;color:var(--text);white-space:pre-wrap;word-wrap:break-word} .sbox-typebadge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;border:1px solid var(--border)} .sbox-typebadge.is-bug{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)} .sbox-typebadge.is-feat{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft)} .sbox-catbadge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border);color:var(--text-muted)} .sbox-statusbadge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:var(--surface-3);color:var(--text-muted)} .sbox-statusbadge.is-open{color:var(--primary)} .sbox-statusbadge.is-review{color:var(--warn)} .sbox-statusbadge.is-accepted,.sbox-statusbadge.is-done{color:var(--good)} .sbox-statusbadge.is-progress{color:var(--accent)} .sbox-statusbadge.is-declined,.sbox-statusbadge.is-dup{color:var(--danger)} .sbox-by,.sbox-date{color:var(--text-muted)} .sbox-del{background:none;border:none;color:var(--text-muted);cursor:pointer;font-family:inherit;font-size:11px;padding:0;text-decoration:underline} .sbox-del:hover{color:var(--danger)} .sbox-del:focus-visible{outline:2px solid var(--primary);outline-offset:1px} .sbox-resp{margin-top:8px;padding:9px 11px;border-left:3px solid var(--good);background:var(--surface-3);border-radius:4px;font-size:12px;color:var(--text)} .sbox-resp strong{display:block;color:var(--good);font-size:10px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px} .sbox-admin{display:flex;gap:10px;align-items:center;margin-top:10px} .sbox-statussel{max-width:170px;font-size:12px;padding:6px 8px} .sbox-rmtoggle{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted);cursor:pointer} /* Roadmap lanes */ .sbox-roadmap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} .sbox-lane{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:10px;min-height:80px} .sbox-lane-hdr{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;display:flex;align-items:center;gap:6px} .sbox-lane-n{background:var(--surface-3);border:1px solid var(--border);border-radius:999px;padding:0 6px;font-size:10px} .sbox-rmcard{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px 10px;margin-bottom:8px} .sbox-rmcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .sbox-votes-ro{font-size:11px;font-weight:800;color:var(--accent)} .sbox-rmcard-title{font-size:12px;font-weight:700;color:var(--text);line-height:1.35} .sbox-rmcard-cat{margin-top:5px;font-size:10px;color:var(--text-muted)} @media (max-width:600px){.sbox-roadmap{grid-template-columns:1fr}} /* ─── /SUGGESTION BOX ───────────────────────────────────────────────────────── */ /* ─── DASHBOARD ACTION QUEUES ───────────────────────────────────────────────── */ .q-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:4px} .q-card{display:flex;flex-direction:column;min-height:150px} .q-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border)} .q-head .spacer{flex:1} .q-title{font-weight:800} .q-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px; border-radius:20px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:800} .q-count-zero{background:var(--surface-2);color:var(--text-muted)} .q-list{list-style:none;margin:0;padding:4px 0} .q-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 16px;cursor:pointer;border-bottom:1px solid var(--border)} .q-row:last-child{border-bottom:none} .q-row:hover{background:var(--surface-2)} .q-main{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .q-meta{color:var(--text-muted);font-size:12px;white-space:nowrap;flex-shrink:0} .q-overdue{color:var(--danger);font-weight:700} .q-empty{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:26px 16px;color:var(--text-muted)} .q-empty-ico{font-size:18px} .cards-compact{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .cards-compact .card{padding:13px} .cards-compact .card .k{font-size:20px} /* removable filter chip (e.g. Giving "Awaiting acknowledgment ✕") */ .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;cursor:pointer; background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-soft);font-size:12px;font-weight:700} .chip:hover{filter:brightness(0.97)} /* run-of-show agenda editor rows */ .agenda-row{display:grid;grid-template-columns:110px 1fr 1fr 34px;gap:8px;margin-bottom:8px;align-items:center} .agenda-row input{padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;background:var(--surface);color:var(--text)} @media(max-width:760px){.agenda-row{grid-template-columns:80px 1fr 30px}.agenda-row .ag-note{grid-column:1 / -1}} /* raffle config rows */ .rf-prize-row{display:grid;grid-template-columns:1fr 120px 1fr 34px;gap:8px;margin-bottom:8px;align-items:center} .rf-tier-row{display:grid;grid-template-columns:1fr 110px 120px 34px;gap:8px;margin-bottom:8px;align-items:center} .rf-prize-row input,.rf-tier-row input{padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;background:var(--surface);color:var(--text)} tr.rf-won{background:var(--accent-soft)} @media(max-width:760px){.rf-prize-row,.rf-tier-row{grid-template-columns:1fr 1fr 30px}.rf-prize-row .rf-p-note{grid-column:1 / -1}} /* ── Campaigns: visual step builder ─────────────────────────────────────────── */ .camp-head{margin:12px 0 4px} .camp-steps{display:flex;flex-direction:column;gap:8px;margin-top:6px} .camp-step{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)} .camp-step-icon{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-size:16px} .camp-step-body{flex:1;min-width:0} .camp-step-type{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted)} .camp-step-summary{font-size:14px;color:var(--text);margin-top:2px;overflow:hidden;text-overflow:ellipsis} .camp-step-actions{flex:none;display:flex;gap:4px} .camp-step-empty{padding:18px;text-align:center;border:1px dashed var(--border);border-radius:var(--radius)} .camp-add-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:170px} .camp-add-menu[hidden]{display:none} .camp-add-menu .btn{justify-content:flex-start;text-align:left;width:100%} .camp-type-cards{display:flex;flex-direction:column;gap:8px} .camp-type-card{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer} .camp-type-card:has(input:checked){border-color:var(--accent);background:var(--accent-soft)} .camp-type-card input{margin-right:6px;float:left} .camp-type-name{font-weight:700;font-size:14px;display:block;margin-bottom:2px} .camp-type-desc{font-size:12px;color:var(--text-muted)} .camp-ai-reply{margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-3);font-size:13px;line-height:1.5;max-height:220px;overflow:auto} /* ── Online-auction lot images strip (Events → Online Auctions → lot) ──────── */ .oa-img-strip{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 14px} .oa-img{display:flex;flex-direction:column;gap:6px;align-items:center;width:140px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)} .oa-img.primary{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .oa-img img{width:100%;height:84px;object-fit:cover;border-radius:6px;background:var(--surface-2)} .oa-img-actions{display:flex;gap:6px;align-items:center} /* ═══════════════════════════════════════════════════════════════════════════ Website builder (site.js) — DealerDMS-style unified workspace. Ported ws-* classes, mapped to Casa's own theme tokens so it works across all four themes (casa / midnight / forest / slate). Scoped under .ws-root. ═══════════════════════════════════════════════════════════════════════════ */ /* The module fills .view and manages its own scroll so the builder reaches the viewport bottom. .view has padding:26px 30px — the builder negates it to go edge-to-edge, then re-pads its own header. */ /* The builder owns the full viewport height and its OWN internal scroll. When it's mounted, site.js adds .view-flush to #view so the outer .view stops padding + scrolling (otherwise the whole page scrolls instead of just the panes). */ #view.view-flush{padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:0} .ws-root{display:flex;flex-direction:column;min-height:0;flex:1;height:100%;padding:0;overflow:hidden} .ws-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;flex-shrink:0;border-bottom:1px solid var(--border)} .ws-head-l{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .ws-head-l h1{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em} .ws-head-l .ws-sub{display:none} .prt-site-url{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:12.5px} .prt-site-url code{background:var(--surface-2);padding:2px 8px;border-radius:6px;color:var(--text);font-size:12.5px} /* Builder | Theme toggle */ .ws-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px;gap:2px} .ws-toggle button{border:none;background:transparent;color:var(--text-muted);font-size:13px;font-weight:700;padding:6px 16px;border-radius:999px;cursor:pointer;transition:.12s} .ws-toggle button.active{background:var(--surface);color:var(--primary);box-shadow:var(--shadow)} /* body area (fills remaining height) */ /* Modest, even padding around the builder — the rail + workspace cards get a little breathing room from the edges, nothing more. (The 40px inset the user flagged was the loading-placeholder padding left on #ws-editor-host, now stripped in fillEditor.) */ .ws-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 16px} .ws-body:has(#ws-theme-host),.ws-body:has(.ws-subview){overflow-y:auto;padding:18px 20px} @media (max-width:900px){.ws-head,.ws-body{padding-left:12px;padding-right:12px}} /* THE BUILDER: page rail + two-pane workspace */ /* Percentage/flex layout — the rail + builder flex together and reflow when the sidebar opens/closes. Rail is a proportion of the width (clamped so it stays usable), the work area fills the rest. */ .ws-builder{display:flex;gap:16px;align-items:stretch;flex:1;min-height:0;min-width:0;width:100%} /* Percentage columns, no fixed/max cap — both scale with the builder width so the whole thing expands to fill the screen (and reflows when the sidebar toggles). */ .ws-rail{flex:1 1 20%;min-width:0} .ws-work{flex:1 1 80%;min-width:0;min-height:0;display:flex;overflow:hidden} /* Mobile section tabs (bottom bar) — hidden on desktop. */ .ws-mtabs{display:none} /* ── Mobile builder: below 900px, show ONE section at a time via bottom tabs. The rail (Pages), the chat pane (AI) and the preview pane (Preview/code) each become full-screen; the active tab picks which is visible. ── */ @media (max-width:900px){ .ws-builder{gap:0;position:relative} .ws-rail{flex:1 1 auto;max-width:none;min-width:0;width:100%} .ws-work{width:100%} /* One section visible at a time, keyed off the builder's data-mobile attr. */ .ws-builder[data-mobile="pages"] .ws-work, .ws-builder[data-mobile="ai"] .ws-rail, .ws-builder[data-mobile="ai"] .ws-work .pg-preview, .ws-builder[data-mobile="preview"] .ws-rail, .ws-builder[data-mobile="preview"] .ws-work .pg-chat{display:none} /* AI + Preview tabs share the work area; the studio split becomes single-column. */ .ws-builder[data-mobile="ai"] .pg-split, .ws-builder[data-mobile="preview"] .pg-split{flex-direction:column} .ws-builder[data-mobile="ai"] .pg-chat, .ws-builder[data-mobile="preview"] .pg-preview{flex:1 1 auto;min-width:0;width:100%} .ws-builder[data-mobile="ai"] .pg-divider, .ws-builder[data-mobile="preview"] .pg-divider{display:none} /* Reserve space for the bottom tab bar. */ .ws-body{padding-bottom:60px} .ws-mtabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -2px 10px rgba(0,0,0,.06)} .ws-mtab{flex:1;border:none;background:transparent;color:var(--text-muted);font-size:12px;font-weight:700;padding:11px 4px;cursor:pointer;border-top:2px solid transparent} .ws-mtab.active{color:var(--primary);border-top-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,transparent)} } /* left rail */ .ws-rail{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-height:0} .ws-rail-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0} .ws-rail-h span{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)} .ws-rail-list{display:flex;flex-direction:column;padding:6px;flex:1;min-height:0;overflow-y:auto} .ws-page-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--text);font-size:13.5px;border:1px solid transparent;transition:.1s;text-align:left;background:transparent;width:100%} .ws-page-item:hover{background:var(--surface-hover)} .ws-page-item.active{background:color-mix(in srgb,var(--primary) 12%,transparent);border-color:color-mix(in srgb,var(--primary) 32%,transparent);color:var(--primary-d,var(--primary));font-weight:700} .ws-page-item .ws-page-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ws-page-item .ws-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--text-muted);opacity:.45} .ws-page-item .ws-dot.pub{background:var(--good);opacity:1} .ws-rail-foot{padding:8px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px;flex-shrink:0} .ws-rail-add{width:100%;justify-content:center} .ws-rail-links{display:flex;flex-direction:column;gap:2px;padding:2px 4px 4px} .ws-rail-links a{font-size:12.5px;color:var(--text-muted);text-decoration:none;padding:4px 6px;border-radius:6px;cursor:pointer} .ws-rail-links a:hover{color:var(--primary);background:var(--surface-hover)} /* two-pane workspace */ .ws-workspace{display:grid;grid-template-columns:minmax(320px,42%) 1fr;gap:0;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;min-height:0;height:100%} @media (max-width:1100px){.ws-workspace{grid-template-columns:1fr;height:auto;min-height:560px}} .ws-noselect{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-muted);font-size:14px;padding:40px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);height:100%} /* LEFT: chat pane */ .ws-chat{display:flex;flex-direction:column;border-right:1px solid var(--border);min-height:0;background:var(--surface-3)} @media (max-width:1100px){.ws-chat{border-right:none;border-bottom:1px solid var(--border)}} .ws-chat-head{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .ws-chat-head h3{margin:0;font-size:15px;font-weight:800;color:var(--text)} .ws-chat-head .ws-slug{font-size:11.5px;color:var(--text-muted);font-family:ui-monospace,monospace;margin-top:2px} .ws-chat-head-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .ws-verrow{display:flex;align-items:center;gap:8px;padding:7px 16px;border-bottom:1px solid var(--border);background:var(--surface)} .ws-verrow label{font-size:11px;color:var(--text-muted);white-space:nowrap;font-weight:600} .ws-verrow select{flex:1;font-size:11.5px;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text)} .ws-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:220px} .ws-msg{padding:9px 13px;border-radius:12px;max-width:92%;font-size:13px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word} .ws-msg.user{background:var(--primary);color:var(--on-primary);align-self:flex-end;border-bottom-right-radius:4px} .ws-msg.assistant{background:var(--surface);border:1px solid var(--border);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px} .ws-msg.assistant.err{border-color:var(--danger);color:var(--danger)} .ws-msg-hint{color:var(--text-muted);font-size:12.5px;text-align:center;padding:24px 12px;line-height:1.55} .ws-chat-input{padding:12px 16px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0} .ws-chat-input textarea{width:100%;min-height:70px;resize:vertical;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13.5px;font-family:inherit;background:var(--surface);color:var(--text)} .ws-chat-input textarea:focus{outline:none;border-color:var(--primary)} .ws-chat-input-row{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap} .ws-chat-status{flex:1;text-align:right;font-size:11.5px;color:var(--text-muted)} /* RIGHT: preview / code tabs */ .ws-preview{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface)} .ws-ptabs{display:flex;gap:0;border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto} .ws-ptab{padding:11px 16px;font-size:12.5px;font-weight:700;color:var(--text-muted);cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;white-space:nowrap} .ws-ptab.active{color:var(--primary);border-bottom-color:var(--primary)} .ws-ptab .ws-dirty{color:var(--warn);font-weight:900;margin-left:3px} .ws-panel{display:none;flex:1;min-height:0;flex-direction:column} .ws-panel.active{display:flex} .ws-devbar{display:flex;gap:6px;padding:7px 12px;border-bottom:1px solid var(--border);background:var(--surface-3);align-items:center} .ws-devbar .ws-url{flex:1;font-size:11px;color:var(--text-muted);font-family:ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ws-iconbtn{border:1px solid var(--border);background:var(--surface);color:var(--text-muted);border-radius:7px;padding:5px 9px;font-size:13px;cursor:pointer;line-height:1} .ws-iconbtn:hover{color:var(--text)} .ws-iconbtn.active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)} .ws-frame-wrap{flex:1;min-height:0;overflow:auto;display:flex;justify-content:center;background:var(--surface-2);padding:0} .ws-frame-wrap.padded{padding:18px} .ws-frame{width:100%;height:100%;border:none;background:#fff;transition:width .25s,height .25s} .ws-code-panel{padding:12px 14px;gap:10px;flex-direction:column} .ws-code-label{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em} .ws-code-host{flex:1;min-height:0;overflow:hidden;border:1px solid var(--border);border-radius:8px} .ws-code-ta{width:100%;height:100%;min-height:280px;border:none;background:var(--surface-3);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;padding:10px 12px;resize:none;outline:none} .ws-panel-actions{display:flex;gap:8px;align-items:center;flex-shrink:0} .ws-versions{padding:14px;overflow-y:auto} .ws-vrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;background:var(--surface)} .ws-vrow-title{font-weight:700;font-size:13px;color:var(--text)} .ws-vrow-meta{font-size:11.5px;color:var(--text-muted);margin-top:2px} /* CONTENT tab (no-code) */ .ws-content{padding:16px;overflow-y:auto} .ws-content .ws-content-lead{font-size:13px;color:var(--text-muted);margin:0 0 16px;line-height:1.5} .ws-csection{margin-bottom:18px} .ws-csection-h{font-size:13px;font-weight:800;color:var(--text);padding:6px 2px 8px;margin-bottom:8px;border-bottom:2px solid var(--primary);display:inline-block} .ws-cblock{border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:12px;background:var(--surface)} .ws-cblock-label{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px} .ws-cblock textarea,.ws-cblock input[type=text]{width:100%;border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:13.5px;font-family:inherit;background:var(--surface);color:var(--text);resize:vertical} .ws-cblock textarea:focus,.ws-cblock input:focus{outline:none;border-color:var(--primary)} .ws-cimg{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap} .ws-cimg-preview{width:150px;height:100px;border-radius:8px;border:1px solid var(--border);background:var(--surface-3) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:22px;flex:0 0 auto} .ws-cimg-controls{flex:1;min-width:180px;display:flex;flex-direction:column;gap:8px} .ws-cimg-controls .ws-cimg-src{font-size:11px;color:var(--text-muted);font-family:ui-monospace,monospace;word-break:break-all} .ws-content-empty{color:var(--text-muted);font-size:13.5px;background:var(--surface-3);border:1px dashed var(--border);border-radius:10px;padding:22px;text-align:center} .ws-content-foot{display:flex;gap:8px;align-items:center;margin-top:6px} /* Add-page template picker (modal) */ .ws-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px} .ws-tpl-card{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;cursor:pointer;transition:.12s;display:flex;flex-direction:column;gap:6px} .ws-tpl-card:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow)} .ws-tpl-ico{font-size:26px;line-height:1} .ws-tpl-name{font-weight:800;font-size:14px;color:var(--text)} .ws-tpl-desc{font-size:12px;color:var(--text-muted);line-height:1.45} /* ═══════════════════════════════════════════════════════════════════════════ Item image manager (item-image-manager.js) — reusable drag-drop upload + thumbnail gallery for any item's photos. Ported from the DealerDMS listing image UX, mapped to Casa tokens. Generic (iim-*) so any item type can use it. ═══════════════════════════════════════════════════════════════════════════ */ .iim{display:flex;flex-direction:column;gap:14px} /* Dropzone */ .iim-drop{border:2px dashed var(--border);border-radius:var(--radius);padding:26px 20px;text-align:center;cursor:pointer;transition:.15s;background:var(--surface-3)} .iim-drop:hover{border-color:var(--primary);background:var(--surface-hover)} .iim-drop:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .iim-drop.over{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface));transform:scale(1.005)} .iim-drop-ico{font-size:26px;margin-bottom:6px} .iim-drop-main{font-weight:700;color:var(--text);font-size:15px} .iim-drop-sub{color:var(--text-muted);font-size:13px;margin-top:3px} .iim-drop-link{color:var(--primary);font-weight:700;text-decoration:underline} /* Gallery grid */ .iim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .iim-empty{color:var(--text-muted);font-size:13.5px;background:var(--surface-3);border:1px dashed var(--border);border-radius:10px;padding:22px;text-align:center} .iim-card{position:relative;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:grab} .iim-card.dragging{opacity:.45;outline:2px dashed var(--primary)} .iim-card.drop-target{outline:2px solid var(--primary);outline-offset:-2px} .iim-card-media{position:relative;aspect-ratio:4/3;background:var(--surface-2)} .iim-card-media img{width:100%;height:100%;object-fit:cover;display:block} .iim-primary{position:absolute;left:6px;top:6px;background:var(--primary);color:var(--on-primary);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:20px} .iim-del{position:absolute;right:6px;top:6px;width:26px;height:26px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:.12s} .iim-card-media:hover .iim-del{opacity:1} .iim-del:hover{background:var(--danger)} .iim-setprimary{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;border:none;font-size:11px;font-weight:700;padding:6px;cursor:pointer;opacity:0;transition:.12s} .iim-card-media:hover .iim-setprimary{opacity:1} .iim-setprimary:hover{background:var(--primary)} .iim-drag-hint{font-size:12px;color:var(--text-muted)}