/* ════════════════════════════════════════════════════════════ EchoLevy dashboard — page-specific CSS extracted from dashboard.html in 5 chunks (preserving source order so the 2026-04-22 'design adoption override' block at the end still wins the cascade against the original cream theme above it). This file is page-local — NOT part of brand.css. It uses var(--navy), var(--gold), var(--teal), var(--line) etc. from brand.css's :root layer, but defines its own dashboard-only tokens (cat-overlay teal, dog-overlay green, cream theme). Order (do not reshuffle): §1 global dashboard chrome + components (700 lines) §2 archive-overlay modal (21 lines) §3 drug-card f-grid (88 lines) §4 patients-overlay (53 lines) §5 design adoption override — !important wins (212 lines) ════════════════════════════════════════════════════════════ */ /* ───── §1: global dashboard chrome + components ──────────── */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#f5f3ef;--bg2:#fdfcfa;--bg3:#eeebe5; --line:#e2ddd6;--line2:#c8c1b8; --text:#18150f;--muted:#7a7268;--faint:#75706a; /* Q7 (2026-05-24): --faint bumped #b5b0a8→#75706a, now ~5.5:1 on --bg2 (WCAG AA pass). Was the measurable root of Dr. Levy's "מתסכל לעין" complaint per AUDIT_2026-05-24.md §U3. */ --accent:#2a5438;--accent-lo:#e8f0eb; --green:#2a5438;--green-l:#3a6e4a;--green-xs:#edf4ef; --border:#ccddd4;--amber:#c96a00; --teal:#16566a;--teal-l:#1e6a80;--teal-xl:#e2f0f5;--teal-xs:#eef7fa;--teal-br:#bcd9e4; --gold:#B8962E;--gold-lo:#f5f0e4; /* matches brand.css; this :root block is the original cream theme, fully overridden by the design-system :root at the bottom of this file */ --mono:'DM Mono',monospace;--radius:14px; --shadow-sm:0 1px 4px rgba(20,15,8,.07),0 1px 2px rgba(20,15,8,.04); --shadow-md:0 6px 24px rgba(20,15,8,.09),0 2px 6px rgba(20,15,8,.05); --shadow-lg:0 16px 48px rgba(20,15,8,.12),0 4px 12px rgba(20,15,8,.06); } body{background:var(--bg);color:var(--text);font-family:'Open Sans','Heebo','DM Sans',sans-serif;font-weight:400;line-height:1.65;min-height:100vh} /* ── DASH ── */ #dash{display:block;min-height:100vh;display:flex;flex-direction:column} /* Deploy-heartbeat dot — purple circle pinned to the top-right of the dashboard topbar. If you see it, you got the latest build. Added 2026-05-10 per user request as a visible "yes, the deploy reached you" signal. The §5 override block below still wins on .top-bar styling, but `.deploy-dot` is a new selector so it pierces through cleanly. */ .deploy-dot{ position:fixed; top:14px; inset-inline-start:18px; /* RTL-safe: top-right in our he-IL layout */ width:14px;height:14px; border-radius:50%; background:#9333ea; /* tailwind-style purple-600 */ box-shadow:0 0 0 4px rgba(147,51,234,.18), 0 1px 4px rgba(80,15,160,.35); cursor:help; /* z-index must beat .top-bar's z-index:100 — earlier value 50 was causing the dot to render BEHIND the sticky top-bar so it was effectively invisible. Bumped to 200 (2026-05-12). */ z-index:200; animation:deployDotPulse 2.4s ease-in-out infinite; } /* Sync-stale warning banner (2026-05-12) — full-width red strip below the top-bar when JSONBin sync hasn't succeeded in >12 hours OR the last save attempt failed (auth/network). Replaces the subtle footer "synced 4 days ago" indicator that the user missed. */ .sync-stale-banner{ background:#fef2f2; border-block:1px solid #f87171; color:#b91c1c; padding:10px 24px; font-family:'DM Sans',sans-serif; font-size:.86rem; font-weight:500; display:flex; align-items:center; gap:14px; direction:rtl; position:sticky; top:72px; z-index:90; } .sync-stale-banner.severe{ background:#7f1d1d; color:#fef2f2; border-color:#991b1b; } .sync-stale-icon{font-size:1.2rem;flex-shrink:0} .sync-stale-text{flex:1;line-height:1.4} .sync-stale-action{ background:#dc2626;color:#fff;text-decoration:none; padding:6px 14px;border-radius:6px;font-weight:600; white-space:nowrap;transition:background .15s; } .sync-stale-action:hover{background:#991b1b} .sync-stale-banner.severe .sync-stale-action{background:#fef2f2;color:#7f1d1d} .sync-stale-banner.severe .sync-stale-action:hover{background:#fff} .sync-stale-dismiss{ background:transparent;border:none;color:inherit; font-size:1.1rem;cursor:pointer;padding:4px 8px; opacity:.6;transition:opacity .15s; } .sync-stale-dismiss:hover{opacity:1} @keyframes deployDotPulse{ 0%,100%{box-shadow:0 0 0 4px rgba(147,51,234,.18), 0 1px 4px rgba(80,15,160,.35)} 50%{box-shadow:0 0 0 8px rgba(147,51,234,.08), 0 1px 4px rgba(80,15,160,.35)} } .top-bar{ background:rgba(253,252,250,.92); border-bottom:1px solid var(--line); padding:0 72px; height:72px; display:flex;align-items:center;justify-content:space-between; flex-shrink:0; position:sticky;top:0;z-index:100; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } /* .logo idle font — historical Fraunces baseline that is always overridden by the §5 .top-bar .logo `!important` rule (DM Sans bold). The `font-family:Fraunces` declaration is removed so a font load isn't queued for content the override paints over. The §5 rule remains the single source of truth for the topbar brand mark. Other typography props kept since they apply to any future non-topbar `.logo` use. */ .logo{font-size:1.65rem;font-weight:200;letter-spacing:.01em;line-height:1} .logo em{font-style:italic;color:var(--accent)} .logo-sub{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);font-family:var(--mono);margin-top:4px;font-weight:300} .main-wrap{max-width:100%;margin:0;padding:52px 72px 0;flex:1} .sl{ font-size:.58rem;letter-spacing:.3em;text-transform:uppercase; color:var(--faint);margin-bottom:16px;margin-top:52px; font-family:var(--mono); display:flex;align-items:center;gap:14px; } .sl::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)} .sl:first-child{margin-top:0} /* ── TOOL CARDS ── */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:4px} .card{ background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius); padding:32px 24px;text-decoration:none;color:inherit; display:flex;flex-direction:column;gap:6px;flex:1;min-width:0; transition:border-color .25s,box-shadow .3s,transform .22s; cursor:pointer;position:relative;overflow:hidden; box-shadow:var(--shadow-sm); } .card::before{ content:'';position:absolute;right:0;top:0;bottom:0;width:3px; background:var(--green);border-radius:0 12px 12px 0; opacity:0;transition:opacity .2s; } .card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)} .card:hover::before{opacity:1} .card.card-teal::before{background:var(--teal)} .card-icon{font-size:1.5rem;margin-bottom:6px;display:block} .ct{font-size:.95rem;font-weight:600;color:var(--text);letter-spacing:-.01em} .cs{font-size:.72rem;color:var(--muted);line-height:1.6;margin-top:6px;letter-spacing:.01em} /* ── DIVIDER ── */ .divider{border:none;border-top:1px solid var(--line);margin:52px 0} /* ── SAVED REPORTS LIST (inline, on dashboard) ── */ .saved-list{display:flex;flex-direction:column;gap:8px} .saved-empty{ padding:24px 18px;text-align:center;color:var(--faint); font-size:.78rem;font-family:'DM Sans',sans-serif; background:var(--bg2);border:1px dashed var(--line);border-radius:10px; } .saved-empty strong{color:var(--muted);font-weight:500} .saved-row{ position:relative;padding:14px 16px 12px; background:var(--bg2);border:1px solid var(--line);border-radius:10px; transition:border-color .15s,box-shadow .15s; } .saved-row:hover{border-color:var(--accent);box-shadow:0 1px 6px rgba(0,0,0,.04)} .saved-row-top{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; font-family:'DM Sans',sans-serif;font-size:.82rem; } .saved-who{font-weight:500;color:var(--text);flex:0 0 auto} .saved-src{ font-family:var(--mono);font-size:.55rem;letter-spacing:.15em; text-transform:uppercase;color:var(--accent); background:var(--accent-lo);border-radius:99px;padding:2px 8px; } .saved-date{ font-family:var(--mono);font-size:.62rem;color:var(--faint); letter-spacing:.05em;margin-inline-start:auto; } .saved-preview{ margin-top:6px;color:var(--muted);font-size:.72rem;line-height:1.5; font-family:'DM Sans',sans-serif; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden; } .saved-actions{display:flex;gap:6px;margin-top:10px} .saved-btn{ font-family:'DM Sans',sans-serif;font-size:.7rem;cursor:pointer; border-radius:6px;padding:5px 12px;border:1px solid var(--line2); background:transparent;color:var(--muted);transition:all .15s; } .saved-btn-open{color:var(--accent);border-color:var(--accent)} .saved-btn-open:hover{background:var(--accent);color:#fff} .saved-btn-del:hover{color:#c0392b;border-color:#c0392b} /* ── NOTES ── */ .notes-wrap{background:var(--bg2);border:1px solid var(--line);border-radius:12px;overflow:hidden} .notes-search-row{display:flex;align-items:center;gap:6px;padding:6px 12px;border-bottom:1px solid var(--line)} .notes-search-inp{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.75rem;direction:rtl} .notes-search-inp::placeholder{color:var(--faint)} .notes-search-icon{color:var(--faint);font-size:.75rem;flex-shrink:0} .notes-search-count{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--faint);flex-shrink:0} .notes-list{max-height:220px;overflow-y:auto} .note-item{display:flex;align-items:flex-start;gap:5px;padding:6px 10px;border-bottom:1px solid var(--line);direction:rtl} .note-item.pinned{background:var(--accent-lo);border-right:3px solid var(--accent)} .note-item.dragging{opacity:.4} .note-item.drop-target{border-top:2px solid var(--accent)} .note-drag-handle{flex-shrink:0;cursor:grab;color:var(--faint);font-size:.7rem;padding:2px 2px;user-select:none;line-height:1;margin-top:2px} .note-drag-handle:active{cursor:grabbing} .note-drag-handle:hover{color:var(--muted)} .note-color-dot{flex-shrink:0;width:10px;height:10px;border-radius:50%;cursor:pointer;margin-top:3px;border:1px solid var(--line2);transition:transform .1s} .note-color-dot:hover{transform:scale(1.2)} .note-color-dot[data-color="none"]{background:transparent} .note-color-dot[data-color="red"]{background:#e87474;border-color:#d45c5c} .note-color-dot[data-color="yellow"]{background:#e8b54a;border-color:#c89a30} .note-color-dot[data-color="green"]{background:#67a074;border-color:#4d8a5c} .note-color-dot[data-color="blue"]{background:#6a9cc5;border-color:#5285b0} .note-color-dot[data-color="purple"]{background:#9d7bb0;border-color:#816098} .note-color-dot[data-color="orange"]{background:#e89a4a;border-color:#c88030} .note-pin-btn{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--faint);font-size:.7rem;padding:1px 3px;transition:color .15s;margin-top:1px} .note-pin-btn:hover,.note-pin-btn.active{color:var(--accent)} .note-item:last-child{border-bottom:none} .note-item-text{flex:1;font-size:.8rem;line-height:1.5;color:var(--muted);word-break:break-word;direction:rtl;cursor:text} .note-item-insert{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--faint);font-size:.75rem;padding:1px 4px;transition:color .15s;line-height:1;margin-top:2px} .note-item-insert:hover{color:var(--accent)} .note-item-del{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--faint);font-size:.65rem;padding:1px 3px;transition:color .15s;line-height:1;margin-top:2px} .note-item-del:hover{color:#c0392b} .notes-empty{padding:16px 12px;font-size:.7rem;color:var(--faint);text-align:center;font-style:italic} .notes-add-row{display:flex;align-items:center;gap:6px;padding:7px 12px;border-top:1px solid var(--line);position:relative} .notes-add-inp{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.8rem;direction:rtl} .notes-add-inp::placeholder{color:var(--faint)} .notes-add-color{flex-shrink:0;width:12px;height:12px;border-radius:50%;cursor:pointer;border:1px solid var(--line2);transition:transform .1s} .notes-add-color:hover{transform:scale(1.15)} .notes-add-btn{flex-shrink:0;background:none;border:1px solid var(--line2);border-radius:12px;padding:2px 10px;font-size:.6rem;color:var(--muted);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap} .notes-add-btn:hover{color:var(--accent);border-color:#a8c4b4;background:var(--accent-lo)} .notes-color-popover{position:absolute;bottom:calc(100% + 4px);right:38px;background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:6px;display:none;gap:6px;box-shadow:0 4px 16px rgba(0,0,0,.08);z-index:10} .notes-color-popover.open{display:flex} .notes-color-popover .swatch{width:16px;height:16px;border-radius:50%;border:1px solid var(--line2);cursor:pointer;transition:transform .1s} .notes-color-popover .swatch:hover{transform:scale(1.2)} /* inline chips on a note item (patient + due date indicators) */ .note-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px;align-items:center} .note-chip{font-family:'DM Mono',monospace;font-size:.58rem;padding:1px 6px;border-radius:10px;border:1px solid var(--line2);color:var(--muted);background:var(--bg);line-height:1.4;white-space:nowrap} .note-chip.patient{color:var(--accent);border-color:#a8c4b4;background:var(--accent-lo)} .note-chip.due-future{color:var(--muted)} .note-chip.due-soon{color:#b8892a;border-color:#e8c97a;background:#fdf6e0} .note-chip.due-today{color:var(--accent);border-color:#a8c4b4;background:var(--accent-lo);font-weight:600} .note-chip.due-overdue{color:#b73030;border-color:#e5a5a5;background:#fbe8e8;font-weight:600} .note-chip.tag{color:var(--muted)} /* ── NOTE EDITOR MODAL ── */ .ne-backdrop{position:fixed;inset:0;background:rgba(20,18,16,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:9500;display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto} .ne-backdrop.open{display:flex} .ne-modal{background:var(--bg);border:1px solid var(--line2);border-radius:16px;width:min(520px,100%);box-shadow:0 30px 70px rgba(20,18,16,.3);direction:rtl;font-family:'DM Sans',sans-serif} .ne-head{padding:16px 20px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between} .ne-head h3{margin:0;font-size:.95rem;font-weight:600;color:var(--text)} .ne-close{background:none;border:none;cursor:pointer;font-size:1.1rem;color:var(--faint);padding:0 4px;line-height:1} .ne-close:hover{color:var(--text)} .ne-body{padding:16px 20px;display:flex;flex-direction:column;gap:14px} .ne-field{display:flex;flex-direction:column;gap:4px} .ne-field label{font-size:.65rem;font-family:'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .ne-field textarea,.ne-field input[type="text"],.ne-field input[type="date"],.ne-field select{border:1px solid var(--line2);border-radius:8px;padding:8px 12px;font-family:'DM Sans',sans-serif;font-size:.85rem;color:var(--text);background:var(--bg2);outline:none;direction:rtl;transition:border-color .15s} .ne-field textarea{resize:vertical;min-height:78px;line-height:1.55} .ne-field input[type="date"]{direction:ltr;text-align:right} .ne-field textarea:focus,.ne-field input:focus,.ne-field select:focus{border-color:var(--accent);background:var(--bg)} .ne-colors{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .ne-colors .ne-sw{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s;outline:1px solid var(--line2)} .ne-colors .ne-sw:hover{transform:scale(1.15)} .ne-colors .ne-sw.sel{border-color:var(--accent);transform:scale(1.1)} .ne-row{display:flex;gap:10px;align-items:center} .ne-row .ne-field{flex:1} .ne-date-clear{background:none;border:none;color:var(--faint);font-size:.7rem;cursor:pointer;padding:2px 6px;margin-right:auto} .ne-date-clear:hover{color:#c0392b} .ne-pin{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);cursor:pointer} .ne-pin input{cursor:pointer} .ne-foot{padding:12px 20px 16px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center} .ne-foot button{border-radius:8px;padding:6px 14px;font-family:'DM Sans',sans-serif;font-size:.8rem;cursor:pointer;transition:all .15s} .ne-foot .ne-delete{background:none;border:1px solid var(--line2);color:#c0392b;margin-inline-end:auto} .ne-foot .ne-delete:hover{background:#fbe8e8;border-color:#e5a5a5} .ne-foot .ne-cancel{background:none;border:1px solid var(--line2);color:var(--muted)} .ne-foot .ne-cancel:hover{color:var(--text)} .ne-foot .ne-save{background:var(--accent);border:1px solid var(--accent);color:#fff;font-weight:500} .ne-foot .ne-save:hover{background:#5a9070} /* ── FINAL REPORT OVERLAY ── */ .fr-trigger-wrap{display:flex;align-items:center;gap:10px;margin-top:8px} .fr-open-btn{flex:1;padding:28px 20px;background:var(--bg2);border:1.5px dashed var(--line2);border-radius:12px;color:var(--muted);font-size:.75rem;font-family:'DM Sans',sans-serif;cursor:pointer;direction:rtl;text-align:right;transition:all .15s;letter-spacing:.04em} .fr-open-btn:hover{color:var(--accent);border-color:#a8c4b4;background:var(--accent-lo)} .fr-open-btn .fr-preview{color:var(--faint);font-size:.7rem;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl} .fr-count-badge{font-size:.6rem;background:var(--accent-lo);color:var(--accent);border-radius:20px;padding:3px 10px;font-family:'DM Sans',sans-serif;white-space:nowrap;opacity:0;transition:opacity .3s} .fr-count-badge.show{opacity:1} /* overlay */ /* 2026-05-15: explicit height + min-height cascade. Grid + flex children refuse to shrink below content size unless every ancestor on the path has min-height:0. The "report cut off" symptom was the textarea pushing its grid cell past viewport. This locks the whole chain. */ .fr-overlay{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;background:var(--bg);height:100vh;min-height:0;overflow:hidden} .fr-overlay.open{display:flex} .fr-overlay-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--line);background:var(--bg2);flex-shrink:0} .fr-overlay-title{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text);font-family:'DM Sans',sans-serif} .fr-overlay-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} /* Three-cluster topbar — workflow tools | primary destinations | passive controls. Each cluster is a flex group with its own internal gap; clusters separated by a wider gap so the eye reads "tools / actions / chrome" instead of one undifferentiated row. Replaces the previous flat 10-button row with mixed inline styles. */ .fr-actions-cluster{display:flex;gap:6px;align-items:center} .fr-actions-cluster + .fr-actions-cluster{margin-inline-start:14px;padding-inline-start:14px;border-inline-start:1px solid var(--line)} .fr-actions-end{margin-inline-start:auto} /* Tool button — Cluster A (templates / panel toggles / patient fill). Compact, neutral background, faint border. The user has 5 of these in a row; they should feel like a SET of tools, not 5 CTAs. Active state (panel open) flips to filled accent for clear feedback. */ .fr-btn-tool{font-size:.66rem;letter-spacing:.04em;background:var(--bg);color:var(--muted);border:1px solid var(--line2);border-radius:7px;padding:6px 11px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .12s;white-space:nowrap;display:inline-flex;align-items:center;gap:4px} .fr-btn-tool:hover{color:var(--accent);border-color:#e0c490;background:var(--accent-lo)} .fr-btn-tool.active{background:var(--accent);color:#fff;border-color:var(--accent)} /* Primary action — filled teal-deep (the styled-report preview is the highest-leverage destination action). Slightly larger padding + soft shadow so it reads as "the button". */ .fr-btn-primary{font-size:.72rem;font-weight:600;letter-spacing:.02em;background:#1a5c6e;color:#fff;border:1px solid #1a5c6e;border-radius:7px;padding:7px 14px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .12s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;box-shadow:0 1px 3px rgba(26,92,110,.2)} .fr-btn-primary:hover{background:#246b7e;border-color:#246b7e;box-shadow:0 2px 6px rgba(26,92,110,.3)} /* Secondary action — outlined accent (the quick PDF export, less prominent than the styled preview but still visible). */ .fr-btn-secondary{font-size:.66rem;letter-spacing:.04em;background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:7px;padding:6px 12px;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600;transition:all .12s;white-space:nowrap} .fr-btn-secondary:hover{background:var(--accent-lo);border-color:var(--accent)} /* Ghost — passive controls (Copy / Clear / Close). Lowest visual weight so they don't compete with the workflow tools or primary destinations. Hover reveals them. */ .fr-btn-ghost{font-size:.66rem;letter-spacing:.04em;background:transparent;color:var(--faint);border:1px solid transparent;border-radius:7px;padding:6px 11px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .12s;white-space:nowrap} .fr-btn-ghost:hover{color:var(--text);border-color:var(--line2);background:var(--bg2)} .fr-btn-ghost.copy:hover,.fr-btn-ghost.copy.copied{color:var(--accent);border-color:#e0c490;background:var(--accent-lo)} .fr-btn-ghost.clear:hover{color:#c0392b;border-color:#e8b4ae;background:#fbeceb} .fr-btn-ghost.close{font-size:.85rem;padding:4px 10px} /* 2026-05-18: responsive header at <1100px viewport. The FR overlay's right-side cluster (דוח מעוצב / יצא PDF / [badge] / העתק / נקה / ✕) crowded into the stage-chip strip on narrower screens. Compact spacing + drop the secondary "יצא PDF" label to icon-only so the primary action (דוח מעוצב) keeps its full label and visual weight. The ✕ close stays at full size — it's a high-frequency click and needs a comfortable target. */ @media (max-width:1100px){ .fr-btn-primary{padding:6px 10px;font-size:.68rem} .fr-btn-secondary{padding:5px 9px;font-size:.62rem} .fr-btn-ghost{padding:5px 8px;font-size:.62rem} .fr-btn-ghost.close{padding:4px 9px} .fr-hdr-left,.fr-hdr-right{gap:5px} } @media (max-width:880px){ /* At very narrow, hide the secondary PDF-export label and rely on the title-tooltip + the icon (we keep the SVG render in the primary button; this rule only affects the secondary export). */ .fr-btn-secondary.print{font-size:0;padding:6px 9px} .fr-btn-secondary.print::before{content:'PDF';font-size:.62rem} } .fp-resize-handle{width:5px;cursor:col-resize;background:transparent;flex-shrink:0;transition:background .15s;position:relative;z-index:1} .fp-resize-handle:hover,.fp-resize-handle.dragging{background:var(--accent)} .fr-btn{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--line2);border-radius:20px;padding:5px 15px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap} .fr-drug-tog{width:100%;text-align:right;padding:5px 10px;border:1.5px solid var(--line2);border-radius:7px;background:var(--bg);color:var(--muted);font-size:11.5px;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .12s;direction:rtl;} .fr-drug-tog:hover{border-color:var(--accent);color:var(--accent);} .fr-drug-tog.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;} .fr-btn.copy{color:var(--muted)}.fr-btn.copy:hover,.fr-btn.copy.copied{color:var(--accent);border-color:#a8c4b4;background:var(--accent-lo)} .fr-btn.clear{color:var(--faint)}.fr-btn.clear:hover{color:#c0392b;border-color:#e8b4ae} .fr-btn.close{color:var(--muted)}.fr-btn.close:hover{color:var(--text);border-color:var(--line2)} .fr-badge{font-size:.55rem;background:var(--accent-lo);color:var(--accent);border-radius:20px;padding:2px 10px;letter-spacing:.08em;opacity:0;transition:opacity .4s;font-family:'DM Sans',sans-serif} .fr-badge.show{opacity:1} /* ════════════════════════════════════════════════════════════ FR OVERLAY · WORKFLOW LAYOUT (2026-05-15 redesign) ════════════════════════════════════════════════════════════ 3-column grid: tool rail | canvas | active tool panel. - Left rail (56px): icon column, one button per tool. - Canvas (1fr): the textarea + empty state + image upload zone. - Side (420px): swappable slot for eq/drug/phrases panels. State is owned by `frActiveTool` in dashboard.js (single source of truth). The three panels (#fr-eq-panel, #fr-drug-panel, #fr-phrases-panel) live inside .fr-side as siblings; only one has display:flex at a time, the rest have display:none. See dashboard.js frSetActiveTool() for the swap logic. ════════════════════════════════════════════════════════════ */ .fr-body{flex:1;overflow:hidden;display:grid;grid-template-columns:500px 1fr 56px;padding:0;min-height:0;direction:ltr} /* 2026-05-15: flipped per Claude Desktop consultation. Hebrew apps (WhatsApp Web, Gmail Hebrew, Outlook Hebrew) put the vertical tool rail on the RIGHT — where the eye lands first in RTL reading. The panel goes to the LEFT. `direction:ltr` on the grid container still forces column order left-to-right (so col 1 = visual LEFT, col 3 = visual RIGHT). What changed is which grid-column each child claims: Visual layout (LEFT to RIGHT): col 1 (500px): side panel (active tool: eq/drug/phrases) col 2 (1fr ): canvas (textarea) col 3 (56px ): tool rail (vertical icon column) DOM order stays (rail, side, canvas) for source-order stability; each child's explicit grid-column places it visually regardless. */ .fr-body > .fr-side {grid-column:1;direction:rtl} .fr-body > .fr-canvas {grid-column:2;direction:rtl} .fr-body > .fr-tool-rail{grid-column:3} /* ─── Right tool rail (Hebrew RTL: rail on right, panel on left) ─── */ /* 2026-05-18: padding 10px 4px → 10px 6px so single-line labels (טמפלט / אקו / תרופות / ניסוחים / פרקים / "מילוי מהיר") have a tiny bit more horizontal room before the .56rem font wraps. */ .fr-tool-rail{display:flex;flex-direction:column;gap:3px;padding:10px 6px;background:var(--bg2);border-inline-start:1px solid var(--line);overflow-y:auto;align-items:stretch} /* Spacer pushes ⚡ bulk-fill to the bottom of the rail (per Claude Desktop recommendation: end-of-workflow tools group separately). */ .fr-tool-spacer{flex:1;min-height:8px} .fr-tool-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:9px 4px;border:1px solid transparent;background:transparent;border-radius:9px;cursor:pointer;font-family:'DM Sans',sans-serif;color:var(--text);transition:background .12s, color .12s, border-color .12s;width:100%} .fr-tool-btn:hover{background:var(--accent-lo);border-color:var(--line2)} .fr-tool-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .fr-tool-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 6px rgba(184,150,46,.18)} .fr-tool-btn.active .fr-tool-lbl{color:#fff} .fr-tool-ico{font-size:1.1rem;line-height:1} /* 2026-05-18: .56rem (~9px) was forcing "מילוי מהיר" to wrap and rendered as cramped 2-line block. Bumped to .64rem (~10.2px), white-space:nowrap so multi-word labels stay on a single line — if a label overflows the rail width it gets clipped via overflow rather than wrapping, which keeps the icon column rhythm clean. */ .fr-tool-lbl{font-size:.64rem;letter-spacing:.04em;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .fr-tool-divider{height:1px;background:var(--line);margin:5px 8px} /* ─── Center canvas ─── */ .fr-canvas{display:flex;flex-direction:column;overflow:hidden;position:relative;min-width:0;min-height:0} /* ─── Right side panel (slot) ─── */ /* 2026-05-15: explicit position:relative so any absolute descendants anchor here, not to viewport. Width:100% forces panel to fill its grid cell — previously a state leak made the panel render "tiny at bottom-right" when an inner panel's old width:440px persisted. The !important rules below also defeat any inline style:width left over on the panel divs. */ .fr-side{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--bg2);border-inline-end:1px solid var(--line);overflow:hidden;min-height:0;min-width:0;box-sizing:border-box} .fr-side > [data-tool]{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;width:100%} .fr-side > [data-tool][hidden]{display:none !important} /* Panels inside .fr-side no longer need their own border/width — the container provides the chrome. These !important overrides defeat the legacy inline-width styles on #fr-eq-panel / #fr-drug-panel without requiring me to edit each panel's HTML attributes. */ .fr-side > #fr-eq-panel, .fr-side > #fr-drug-panel, .fr-side > #fr-phrases-panel{width:100% !important;max-width:none !important;min-width:0 !important;border-left:none !important;flex-shrink:1 !important;flex:1 1 0 !important} /* Kill the phrases-panel "expanded" mode for now — it competed with the grid layout (forcing 55% / 760px max-width via !important). The panel is already at a comfortable 500px in the new layout. If user ever wants the wider mode back, we make it a viewport-aware grid override, not an inline width hack. */ .fr-phrases-panel.expanded{width:100% !important;max-width:none !important;min-width:0 !important} /* ─── Slim header (replaces old 13-button cluster row) ─── */ .fr-hdr-left,.fr-hdr-right{display:flex;gap:8px;align-items:center} /* 2026-05-15: stage-chip strip lives inline in the header (was a separate .fr-stepper row). Gets the middle space, scrolls horizontally if too many chips, doesn't wrap to a second row. */ .fr-hdr-center{display:flex;gap:5px;align-items:center;flex:1;justify-content:center;overflow-x:auto;overflow-y:hidden;min-width:0;padding:0 10px;scrollbar-width:none} .fr-hdr-center::-webkit-scrollbar{display:none} /* The stage chips (.section-chip / .stepper-chip in JS) inherit compact styling here — small pill, clear active state. */ .fr-hdr-center > *{flex-shrink:0} .fr-hdr-divider{width:1px;height:18px;background:var(--line2)} .fr-patient-pill{display:inline-flex;gap:7px;align-items:center;padding:6px 13px;background:var(--accent-lo);color:var(--accent);border:1px solid var(--accent);border-radius:999px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .12s, color .12s} .fr-patient-pill:hover{background:var(--accent);color:#fff} .fr-patient-pill .fr-patient-pill-icon{font-size:.9rem;line-height:1} .fr-patient-pill.empty{background:transparent;color:var(--muted);border-style:dashed} .fr-patient-pill.empty:hover{background:var(--accent-lo);color:var(--accent);border-style:solid} /* 2026-05-18 (video-audit T): unfilled-placeholder pill in the FR header. Counts unique [label] brackets + __+ underscore spans in the textarea and surfaces the count as a clickable badge. Clicking opens the fill drawer. Hidden via [hidden] when count is 0 — once all placeholders are resolved, the pill disappears. Gold-soft to stand out without competing with the patient pill (which has its own accent treatment). */ .fr-placeholder-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;background:var(--accent-lo);color:var(--accent);border:1px solid #e8d39a;border-radius:999px;font-size:.74rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .12s,color .12s,transform .1s} .fr-placeholder-pill:hover{background:var(--accent);color:#fff;transform:translateY(-1px)} .fr-placeholder-pill[hidden]{display:none} .fr-placeholder-pill-label{font-size:.66rem;letter-spacing:.02em;font-weight:500;opacity:.85} #fr-placeholder-pill-count{font-family:'DM Mono',ui-monospace,monospace;font-weight:700;font-size:.78rem;letter-spacing:.02em} /* The legacy `.fr-overlay-actions` rules still apply for the right cluster (PDF + Styled + Copy + Clear + Close) — they stay flex row aligned. We only change the LEFT cluster (which becomes the patient pill + type select). */ /* 2026-05-13: widened from 340/420 → 440/520 per user feedback that the panel felt cramped. Hebrew clinical phrases run ~100-160 chars typically; 340px forced wraps to 3-4 lines making the list feel dense. 440px holds most phrases in 1-2 lines at .82rem. */ .fr-phrases-panel{width:440px;min-width:340px;max-width:520px;border-left:1px solid var(--line);display:flex;flex-direction:column;flex-shrink:0;background:var(--bg2);direction:rtl;transition:width .25s ease,max-width .25s ease} /* Expanded mode — bigger panel for browsing the 779-phrase library organized across species + disease + stage + purpose dimensions. Toggled via the ⤢ button. Persisted to localStorage. */ .fr-phrases-panel.expanded{width:55%;max-width:760px;min-width:480px} /* Titlebar with the expand toggle */ .fr-phr-titlebar{display:flex;align-items:center;justify-content:space-between;padding:0 0 8px;margin-bottom:4px;border-bottom:1px solid var(--line);direction:rtl} .fr-phr-titletext{font-family:'DM Sans',sans-serif;font-size:.86rem;font-weight:600;color:var(--text);letter-spacing:-.005em} .fr-phr-expand{ background:none;border:1px solid var(--line2);border-radius:6px; width:26px;height:24px;cursor:pointer; font-size:.85rem;line-height:1;color:var(--muted); display:inline-flex;align-items:center;justify-content:center; transition:all .12s; } .fr-phr-expand:hover{color:var(--accent);border-color:#e0c490;background:var(--accent-lo)} .fr-phrases-panel.expanded .fr-phr-expand{background:var(--accent);color:#fff;border-color:var(--accent)} /* Purpose filter chip row — auto-detected from each phrase's text. Wraps if too many chips fit; counts shown after each label. */ .fr-phr-purpose-row{display:flex;flex-wrap:wrap;gap:4px;direction:rtl} .fr-phr-purpose-chip{ font-family:'DM Sans',sans-serif;font-size:.62rem; background:var(--bg);color:var(--muted); border:1px solid var(--line2);border-radius:100px; padding:3px 10px;cursor:pointer;transition:all .12s; white-space:nowrap;letter-spacing:.02em; } .fr-phr-purpose-chip:hover{color:var(--accent);border-color:#e0c490;background:var(--accent-lo)} .fr-phr-purpose-chip.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600} /* Expanded mode lays the phrase list as a 2-column grid for better scan */ .fr-phrases-panel.expanded .fr-phrases-list{display:grid;grid-template-columns:1fr 1fr;gap:0;align-content:start} .fr-phrases-panel.expanded .fr-phrase-item{border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line)} .fr-phrases-panel.expanded .fr-phrase-item:nth-child(2n){border-inline-end:none} /* FR phrases panel header — three control groups stacked (species+disease, stage, search+tools), each with its own eyebrow label. Pattern matches the Clalit / chavatdaat "kicker → section" rhythm but at panel-density scale. */ .fr-phrases-hdr{padding:12px 14px 10px;border-bottom:1px solid var(--line);flex-shrink:0;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%)} /* Each control group — separated by a thin hair-line so the panel reads as three clean sections, not one dense lump. */ /* 2026-05-13: tightened header groups so 4 groups + titlebar fit without dominating the panel. Padding 4→2, group separator margin/padding 6/8 → 4/4. ~12px shaved off the top chrome. */ .fr-phr-group{padding:2px 0} .fr-phr-group + .fr-phr-group{border-top:1px solid var(--line);margin-top:4px;padding-top:4px} /* Eyebrow label — DM Mono caps, faint, tight letter-spacing. Same vocabulary as brand.css `.eyebrow` utility, sized down for panel density. */ .fr-phr-eyebrow{font-family:'DM Mono',ui-monospace,monospace;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:3px;font-weight:500;direction:rtl} /* ── Section stepper — compact chip row for jumping between report sections ── */ .fr-stepper{display:flex;gap:6px;align-items:center;padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--line);flex-wrap:wrap;flex-shrink:0;direction:rtl} .fr-stepper-label{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-inline-end:4px;flex-shrink:0} .fr-type-select{background:var(--bg);border:1px solid var(--line2);border-radius:100px;padding:3px 14px;font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;color:var(--navy);cursor:pointer;outline:none;direction:rtl;transition:border-color .12s;appearance:none;padding-inline-end:28px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 10px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat} .fr-type-select:hover{border-color:var(--accent)} .fr-type-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(111,157,115,.15)} .fr-stepper-divider{width:1px;height:16px;background:var(--line2);flex-shrink:0} .fr-step-chip{background:var(--bg);border:1px solid var(--line2);border-radius:100px;padding:3px 12px;font-family:'DM Sans',sans-serif;font-size:.7rem;color:var(--muted);cursor:pointer;transition:all .12s;white-space:nowrap;flex-shrink:0} .fr-step-chip:hover{color:var(--accent);border-color:#a8c4b4;background:var(--accent-lo)} .fr-step-chip.not-found{opacity:.4} .fr-step-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)} /* ── Echo-params side panel — mirrors the drug-panel pattern ── */ .fr-eq-stage-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg);border:1px solid var(--line);border-radius:8px;margin-bottom:10px} .fr-eq-stage-label{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .fr-eq-stage-chip{font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:100px;border:1.5px solid;flex:1;text-align:center;direction:rtl} .fr-eq-st-empty{background:var(--bg2);color:var(--faint);border-color:var(--line2)} .fr-eq-st-b1{background:#e9f4ec;color:#2d6a4f;border-color:#bfdbc4} .fr-eq-st-bord{background:#fbf3dd;color:#8a6400;border-color:#e8d097} .fr-eq-st-b2{background:#fde7dc;color:#a04510;border-color:#f2c39e} .fr-eq-st-b2a{background:#fae0dc;color:#a02d1e;border-color:#ecb5ad} .fr-eq-grp{display:flex;flex-direction:column;gap:3px;margin-bottom:8px} .fr-eq-grp label{font-size:.7rem;color:var(--muted);display:flex;justify-content:space-between;align-items:baseline} .fr-eq-grp label .fr-eq-u{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--faint);font-weight:500} .fr-eq-grp input{background:var(--bg);border:1.5px solid var(--line2);border-radius:6px;padding:6px 8px;font-family:'DM Mono',monospace;font-size:.78rem;color:var(--text);outline:none;direction:ltr;text-align:right;transition:border-color .12s} .fr-eq-grp input:focus{border-color:var(--accent)} .fr-eq-grp input::-webkit-outer-spin-button,.fr-eq-grp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .fr-eq-grp input[type=number]{-moz-appearance:textfield} .fr-eq-grp-hdr{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:10px 0 6px;padding-bottom:4px;border-bottom:1px dashed var(--line)} .fr-eq-row{display:grid;grid-template-columns:1fr 1fr;gap:8px} .fr-eq-results{margin-top:12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;overflow:hidden} .fr-eq-out-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);align-items:center;font-size:.72rem} .fr-eq-out-row:last-child{border-bottom:0} .fr-eq-out-row .k{color:var(--muted);font-weight:500} .fr-eq-out-row .v{font-family:'DM Mono',monospace;font-weight:600;color:var(--text);min-width:48px;text-align:right} .fr-eq-out-row .flag{font-family:'DM Mono',monospace;font-size:.6rem;padding:1px 7px;border-radius:4px;border:1px solid var(--line2);color:var(--muted);white-space:nowrap} .fr-eq-out-row .flag.flag-norm{background:#e6f1e8;color:#2d6a4f;border-color:#bfdbc4} .fr-eq-out-row .flag.flag-mild{background:#fbf3dd;color:#8a6400;border-color:#e8d097} .fr-eq-out-row .flag.flag-sig{background:#fae0dc;color:#a02d1e;border-color:#ecb5ad} .fr-eq-insert-btn{width:100%;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:8px;padding:8px 14px;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .12s} .fr-eq-insert-btn:hover{background:#5a9070;border-color:#5a9070} /* ── Template picker modal (M1) ──────────────────────────────────── Lives inside the FR overlay's viewport. Opens via the 📋 טמפלט toolbar button. Self-contained so the legacy sidebar-templates flow keeps working unchanged — this is additive. */ /* Template picker — inline drawer (was modal-on-modal at z:9600). Lives between the FR overlay header and the section stepper, slides open vertically. No backdrop scrim, no focus-trap detour. The .open class drives the max-height transition so it animates in/out. The keep-`.fr-tp-backdrop`-id-but-rename-class pattern preserves all existing JS that references #fr-tp-backdrop. */ /* 2026-05-15: template picker is now a CENTERED MODAL overlay, was a slide-down drawer. The drawer pushed the body grid (rail + canvas + side) down which made the textarea unreadable while picking. Now the picker floats above everything; the workspace stays visible. */ .fr-tp-drawer{position:fixed;inset:0;background:rgba(15,30,41,.4);backdrop-filter:blur(2px);z-index:600;display:none;align-items:center;justify-content:center;padding:32px} .fr-tp-drawer.open{display:flex} /* 2026-05-15: Sections "drawer" reborn as a popover. Was a push-down drawer that ate up to 50vh, squashing the canvas behind it. Now an absolute-positioned popover floating next to the rail icon. Width 320px, max-height 60vh. Positioned by JS on open (frToggleSectionsPanel sets top/left from the rail button's getBoundingClientRect). Does NOT displace the body grid. */ .fr-sections-drawer{position:absolute;width:320px;max-height:60vh;background:var(--bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 32px rgba(15,30,41,.14);display:none;flex-direction:column;overflow:hidden;z-index:120} .fr-sections-drawer.open{display:flex} .fr-sections-modal{display:flex;flex-direction:column;flex:1;direction:rtl;font-family:'DM Sans',sans-serif;overflow:hidden;min-height:0} .fr-sections-head{padding:12px 18px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;flex-shrink:0;background:var(--bg)} .fr-sections-head h3{margin:0;font-size:.95rem;font-weight:600;color:var(--text);white-space:nowrap} .fr-sections-hint{font-size:.7rem;color:var(--muted);font-family:'DM Mono',ui-monospace,monospace;letter-spacing:.04em;flex:1;min-width:0} .fr-sections-close{background:none;border:none;cursor:pointer;color:var(--faint);font-size:1.05rem;padding:4px 10px;line-height:1} .fr-sections-close:hover{color:var(--text)} .fr-sections-body{padding:8px 14px;overflow-y:auto;flex:1;background:var(--bg)} .fr-sections-empty{padding:32px 16px;text-align:center;color:var(--faint);font-size:.78rem;font-style:italic;line-height:1.6} .fr-sections-row{display:flex;align-items:stretch;gap:6px;border-bottom:1px solid var(--line-2);transition:background .12s} .fr-sections-row:hover{background:var(--bg2)} .fr-sections-row:last-child{border-bottom:none} .fr-sections-jump{flex:1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 12px;background:none;border:none;cursor:pointer;font-family:inherit;text-align:right;direction:rtl;color:var(--text);font-size:.85rem;font-weight:500;letter-spacing:-.005em;transition:color .12s} .fr-sections-jump:hover{color:var(--accent)} .fr-sections-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fr-sections-meta{font-family:'DM Mono',ui-monospace,monospace;font-size:.62rem;color:var(--faint);font-weight:400;letter-spacing:.04em;flex-shrink:0} .fr-sections-del{flex-shrink:0;width:30px;background:none;border:none;cursor:pointer;color:var(--faint);font-size:.95rem;line-height:1;border-radius:6px;margin:4px 4px 4px 0;transition:all .12s} .fr-sections-del:hover{color:#c0392b;background:rgba(192,57,43,.08)} /* Bulk-fill drawer — same inline pattern as templates + sections. Renders one labeled input per detected [bracket] / __+ underscore placeholder. Click "החל" → all replacements happen in one update. */ .fr-fill-drawer{display:flex;flex-direction:column;background:var(--bg2);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .25s ease,border-bottom-color .15s;flex-shrink:0} .fr-fill-drawer.open{max-height:min(60vh,420px);border-bottom-color:var(--line)} .fr-fill-modal{display:flex;flex-direction:column;height:min(60vh,420px);direction:rtl;font-family:'DM Sans',sans-serif;overflow:hidden} .fr-fill-head{padding:12px 18px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;flex-shrink:0;background:var(--bg)} .fr-fill-head h3{margin:0;font-size:.95rem;font-weight:600;color:var(--text);white-space:nowrap} .fr-fill-hint{font-size:.7rem;color:var(--muted);font-family:'DM Mono',ui-monospace,monospace;letter-spacing:.04em;flex:1;min-width:0} .fr-fill-close{background:none;border:none;cursor:pointer;color:var(--faint);font-size:1.05rem;padding:4px 10px;line-height:1} .fr-fill-close:hover{color:var(--text)} .fr-fill-body{padding:12px 18px;overflow-y:auto;flex:1;background:var(--bg);display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 14px;align-content:start} .fr-fill-empty{grid-column:1/-1;padding:32px 16px;text-align:center;color:var(--faint);font-size:.78rem;font-style:italic;line-height:1.6} .fr-fill-row{display:flex;flex-direction:column;gap:4px;direction:rtl} .fr-fill-label{font-size:.72rem;color:var(--text);font-weight:600;letter-spacing:-.005em;display:flex;align-items:center;gap:6px} .fr-fill-label-generic{color:var(--faint);font-weight:500;font-family:'DM Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.04em;text-transform:uppercase} .fr-fill-occ{font-family:'DM Mono',ui-monospace,monospace;font-size:.58rem;color:var(--faint);background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:0 6px;font-weight:400;letter-spacing:.04em} .fr-fill-input{background:#fff;border:1px solid var(--line2);border-radius:6px;padding:7px 10px;font-family:inherit;font-size:.84rem;color:var(--text);outline:none;direction:rtl;transition:border-color .12s,box-shadow .12s} .fr-fill-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,150,46,.12)} .fr-fill-foot{padding:10px 18px;border-top:1px solid var(--line);background:var(--bg2);display:flex;align-items:center;gap:10px;flex-shrink:0} .fr-fill-count{font-family:'DM Mono',ui-monospace,monospace;font-size:.66rem;color:var(--faint);letter-spacing:.04em;flex:1} .fr-fill-apply{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:7px;padding:7px 18px;font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .12s;letter-spacing:.02em} .fr-fill-apply:hover{background:#9A7E25;border-color:#9A7E25} .fr-fill-apply:disabled{opacity:.4;cursor:not-allowed;background:var(--bg2);color:var(--faint);border-color:var(--line2)} /* 2026-05-15: centered modal card (was full-width inside the drawer). Sized to comfortably hold the 4-level filter strip + a 3-column card grid. Caps at 880×80vh so it never feels claustrophobic on wide screens or overflows on tall ones. */ .fr-tp-modal{background:var(--bg);border:1px solid var(--line);border-radius:14px;width:100%;max-width:880px;max-height:min(80vh,720px);box-shadow:0 12px 48px rgba(15,30,41,.18);direction:rtl;font-family:'DM Sans',sans-serif;overflow:hidden;display:flex;flex-direction:column} /* Filter strip — one row per dimension (species/category/disease/stage). Each row: label on right, chips on left. Chips show counts. */ .fr-tp-filters{padding:8px 18px;background:var(--bg2);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;flex-shrink:0} /* Phase 5.7 (2026-05-24) — premium pass on the full-picker modal filter rows. Label was 0.58rem (~9px) and chips were 0.7rem (~11px) — Dr. Levy's eyes were tracking across faint micro-type to scan filters. Bumped to 0.78/0.86rem with breathing padding. */ .fr-tp-filter-row{display:flex;align-items:center;gap:10px;min-height:34px} .fr-tp-filter-label{font-family:'DM Sans',sans-serif;font-size:.78rem;letter-spacing:.04em;color:var(--muted);min-width:74px;flex-shrink:0;font-weight:600} .fr-tp-filter-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1} .fr-tp-filter-chip{background:var(--bg);border:1px solid var(--line2);border-radius:100px;padding:5px 14px;font-family:inherit;font-size:.86rem;color:var(--text);cursor:pointer;transition:all .12s;white-space:nowrap;letter-spacing:0;font-weight:500} .fr-tp-filter-chip:hover{color:var(--gold);border-color:var(--gold)} .fr-tp-filter-chip.active{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:600} .fr-tp-filter-chip-n{font-family:'DM Mono',monospace;font-size:.72rem;margin-inline-start:6px;opacity:.7} .fr-tp-filter-chip.active .fr-tp-filter-chip-n{color:rgba(255,255,255,.85);opacity:1} .fr-tp-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-shrink:0} .fr-tp-head h3{margin:0;font-size:.95rem;font-weight:600;color:var(--text);white-space:nowrap} .fr-tp-head .fr-tp-search{flex:1;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:7px 12px;font-family:inherit;font-size:.8rem;color:var(--text);outline:none;direction:rtl} .fr-tp-head .fr-tp-search:focus{border-color:var(--accent)} .fr-tp-close{background:none;border:none;cursor:pointer;color:var(--faint);font-size:1.1rem;padding:4px 10px;line-height:1} .fr-tp-close:hover{color:var(--text)} .fr-tp-cats{display:flex;gap:6px;flex-wrap:wrap;padding:10px 18px;background:var(--bg2);border-bottom:1px solid var(--line);flex-shrink:0} .fr-tp-cat{background:var(--bg);border:1px solid var(--line2);border-radius:100px;padding:4px 12px;font-family:inherit;font-size:.72rem;color:var(--muted);cursor:pointer;transition:all .12s;white-space:nowrap} .fr-tp-cat:hover{color:var(--accent);border-color:#a8c4b4} .fr-tp-cat.active{background:var(--accent);color:#fff;border-color:var(--accent)} .fr-tp-cat .fr-tp-cat-n{font-family:'DM Mono',monospace;font-size:.6rem;margin-inline-start:6px;opacity:.7} .fr-tp-body{padding:14px 18px 18px;overflow-y:auto;flex:1;background:var(--bg)} .fr-tp-group{margin-bottom:18px} .fr-tp-group:last-child{margin-bottom:0} .fr-tp-group-hdr{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;padding-bottom:4px;border-bottom:1px dashed var(--line)} .fr-tp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px} .fr-tp-card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;transition:all .12s;display:flex;flex-direction:column;gap:4px;min-height:70px} .fr-tp-card:hover{border-color:var(--accent);background:var(--accent-lo);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.05)} .fr-tp-card-name{font-size:.82rem;font-weight:600;color:var(--text);line-height:1.25} .fr-tp-card-cat{font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:500} /* 2026-05-17: bumped line-clamp 2→4 so card previews stop hard-cutting after two lines — most template texts have a 3-line opening that the user wants visible at a glance. Card still expands the grid row only as much as content needs; remaining text is implied. */ .fr-tp-card-preview{font-size:.7rem;color:var(--muted);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical} /* 2026-05-18: empty-template placeholder treatment — a card whose text body is empty gets a dashed-outline preview row with muted italic text, so the user can immediately see "no content yet" vs accidentally clicking a broken-looking card. */ .fr-tp-card-preview-empty{font-style:italic;color:var(--faint);font-family:'DM Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.04em} .fr-tp-card.fr-tp-card-empty{border-style:dashed;border-color:var(--line2)} .fr-tp-card.fr-tp-card-empty:hover{border-color:var(--accent);background:var(--accent-lo)} /* 2026-05-18: out-of-scope filter chip — category whose mapped report type differs from the current _frReportType. Implicit filter (added 2026-05-17 in _frTplCollect) excludes their templates by default, so the chip is visually de-emphasised: lower opacity + small ↗ marker. Click still works (it overrides the implicit filter); this is just a "you're stepping outside the active report scope" cue. */ .fr-tp-filter-chip.fr-tp-chip-oos{opacity:.55} .fr-tp-filter-chip.fr-tp-chip-oos::after{content:'↗';margin-inline-start:4px;font-size:.62rem;color:var(--faint);font-family:'DM Mono',ui-monospace,monospace} .fr-tp-filter-chip.fr-tp-chip-oos:hover{opacity:1} .fr-tp-empty{padding:40px 20px;text-align:center;color:var(--faint);font-style:italic;font-size:.8rem} .fr-tp-foot{padding:10px 18px;border-top:1px solid var(--line);background:var(--bg2);display:flex;align-items:center;gap:10px;flex-shrink:0} .fr-tp-foot .fr-tp-count{font-family:'DM Mono',monospace;font-size:.65rem;color:var(--faint);letter-spacing:.04em} .fr-tp-foot .fr-tp-blank{margin-inline-start:auto;background:none;border:1px solid var(--line2);border-radius:8px;padding:6px 14px;font-family:inherit;font-size:.75rem;color:var(--muted);cursor:pointer;transition:all .12s} .fr-tp-foot .fr-tp-blank:hover{color:var(--text);border-color:var(--accent)} .fr-phrases-toolbar{display:flex;gap:6px;margin-top:8px;align-items:center} .fr-phrases-search{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 9px;font-family:'DM Sans',sans-serif;font-size:.72rem;color:var(--text);outline:none;direction:rtl} .fr-phrases-search:focus{border-color:var(--accent)} .fr-phrases-search::placeholder{color:var(--faint)} /* Phase 5.11 (2026-05-24) — masthead chip buttons bumped from .65rem to .8rem for readability. The user repeatedly flagged that all buttons looked tiny; these are the panel-toolbar actions and they were among the smallest. */ .fr-phrases-allscope{flex-shrink:0;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 11px;font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .12s} .fr-phrases-allscope:hover{color:var(--gold);border-color:var(--gold)} .fr-phrases-allscope.active{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:600} .fr-phrases-sort{flex-shrink:0;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 11px;font-family:'DM Sans',sans-serif;font-size:.8rem;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .12s} .fr-phrases-sort:hover{color:var(--accent);border-color:#a8c4b4} .fr-phrases-sort.active{background:var(--accent);color:#fff;border-color:var(--accent)} /* Quick-insert essentials button — primary action chip in the toolbar. Tinted to differentiate from the neutral sort toggle: gold-soft idle, gold accent on hover/flash. The .flash class pulses briefly to confirm an insert occurred. */ .fr-phrases-quick{flex-shrink:0;background:var(--accent-lo);border:1px solid #e8d39a;border-radius:6px;padding:5px 11px;font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:600;color:var(--accent);cursor:pointer;white-space:nowrap;transition:all .12s} .fr-phrases-quick:hover{background:var(--accent);color:#fff;border-color:var(--accent)} .fr-phrases-quick.flash{background:#2d6a4f;color:#fff;border-color:#2d6a4f} /* Insert button — primary action per row. Always visible (unlike Copy/Edit/✕ which fade in on hover). Filled gold-deep with a slightly darker tone than the toolbar accent so it reads as "the button to click", not "decorative chrome". */ .fr-phrase-insert{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:5px;padding:4px 10px;font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .12s;min-height:26px;letter-spacing:.01em;box-shadow:0 1px 2px rgba(184,150,46,.15)} .fr-phrase-insert:hover{background:#9A7E25;border-color:#9A7E25;box-shadow:0 2px 6px rgba(184,150,46,.25)} .fr-phrase-count{font-family:'DM Mono',monospace;font-size:.56rem;color:var(--faint);white-space:nowrap;margin-inline-end:4px;font-weight:500} .fr-phrases-species{display:flex;gap:4px;margin-bottom:8px} .fr-sp-btn{flex:1;padding:5px 0;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--line2);border-radius:16px;cursor:pointer;font-family:'DM Sans',sans-serif;color:var(--muted);transition:all .15s} .fr-sp-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)} /* Disease chip row — disease selector inside the FR phrases panel. Horizontal flex row, scrolls horizontally if too many diseases. Each chip is a small DM Mono pill showing disease + phrase count. Active chip uses the accent color (gold). */ .fr-disease-row{display:flex;gap:4px;margin-bottom:8px;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding-bottom:2px} .fr-disease-row::-webkit-scrollbar{height:4px} .fr-disease-row::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px} .fr-disease-chip{flex-shrink:0;padding:3px 10px;font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.04em;background:var(--bg);border:1px solid var(--line2);border-radius:100px;cursor:pointer;color:var(--muted);transition:all .12s;white-space:nowrap;direction:rtl} .fr-disease-chip:hover{color:var(--accent);border-color:#e0c490} .fr-disease-chip.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600} .fr-stage-select{width:100%;padding:5px 8px;background:var(--bg3);border:1px solid var(--line2);border-radius:8px;font-size:.72rem;color:var(--text);font-family:'DM Sans',sans-serif;direction:rtl;cursor:pointer;outline:none} .fr-phrases-list{flex:1;overflow-y:auto;padding:6px 0} .fr-recent-header{padding:6px 10px 3px;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-family:'DM Sans',sans-serif;border-bottom:1px solid var(--line);background:var(--accent-lo)} .fr-recent-item{background:var(--accent-lo)!important;border-left:2px solid var(--accent)} .fr-recent-item .fr-phrase-src::before{content:'⟳ '} /* Phrase item layout — primary action ("→ הכנס") always visible on the right; governance actions (Copy / Edit / ✕) fade in on hover/focus-within to reduce visual mass when the user is just scanning. Insert is the 95% action; the rest are passive. */ /* 2026-05-13: tighter vertical padding (9px→6px) — combined with the source-inline change below saves ~12-14px per row. Visible 8 rows per scroll-page → ~16 rows now without scroll. */ .fr-phrase-item{display:flex;align-items:flex-start;gap:6px;padding:6px 12px;border-bottom:1px solid var(--line);transition:background .1s} .fr-phrase-item:hover{background:var(--bg3)} .fr-phrase-item .fr-phrase-copy, .fr-phrase-item .fr-phrase-edit, .fr-phrase-item .fr-phrase-del{opacity:0;transition:opacity .12s} .fr-phrase-item:hover .fr-phrase-copy, .fr-phrase-item:focus-within .fr-phrase-copy, .fr-phrase-item:hover .fr-phrase-edit, .fr-phrase-item:focus-within .fr-phrase-edit, .fr-phrase-item:hover .fr-phrase-del, .fr-phrase-item:focus-within .fr-phrase-del{opacity:1} /* "Already in the report" state — added 2026-05-10. The render loop checks each phrase against the textarea contents and tags matched items with .fr-phrase-inserted. Visual: muted text + green checkmark badge, so the user sees at a glance which phrases they've already used and avoids duplication. */ .fr-phrase-item.fr-phrase-inserted{background:#f0f7f2} .fr-phrase-item.fr-phrase-inserted:hover{background:#e6f1e8} .fr-phrase-item.fr-phrase-inserted .fr-phrase-text{color:var(--muted)} .fr-phrase-inserted-badge{display:inline-block;font-family:'DM Mono',monospace;font-size:.55rem;color:#2d6a4f;background:#dcefe1;border:1px solid #b9d8c1;border-radius:8px;padding:0 6px;margin-inline-start:6px;letter-spacing:.04em;font-weight:600} /* Cross-stage chip — surfaces in search results when a matching phrase is from a stage other than the current selector. Lets the user know WHY a phrase appeared without breaking the visual flow of the list. Teal-tinted to match the brand. */ .fr-phrase-stage-chip{display:inline-block;font-family:'DM Mono',monospace;font-size:.55rem;color:var(--accent);background:var(--accent-lo);border:1px solid #d8c79a;border-radius:8px;padding:0 6px;margin-inline-start:6px;letter-spacing:.04em;font-weight:600;direction:rtl} /* Cross-disease chip — surfaces when a search match comes from a different disease bucket than the current scope. Navy-tinted so it reads distinctly from the gold stage chip. Helps the clinician see that a relevant diet phrase tagged in MMVD also fits the current HCM context, without losing track of the origin. */ .fr-phrase-disease-chip{display:inline-block;font-family:'DM Mono',monospace;font-size:.55rem;color:#143a52;background:#e8eff6;border:1px solid #c4d5e2;border-radius:8px;padding:0 6px;margin-inline-start:4px;letter-spacing:.04em;font-weight:600;direction:rtl} /* Phrase typography — bumped from .72rem (≈11.5px) to .82rem (≈13.1px) on 2026-05-10. Hebrew clinical text below 12px is fatiguing in a panel the user reads dozens of times per day. Action-button sizes raised from .58rem (≈9.3px) to .66rem (≈10.5px) with min-height:24px so they meet WCAG-friendly target floors without crowding the row. */ /* 2026-05-13: line-height tightened 1.6→1.45 for less vertical stretch on multi-line phrases. .82rem text stays readable. `display:inline` (instead of flex:1) lets the inline-end source chip share the same line — see .fr-phrase-src below. */ /* 2026-05-15: phrase text bumped .82→.95rem + line-height 1.45→1.55 per user feedback "phrases box is small and not read well". The panel itself widened from 420 to 500px in .fr-body grid columns, so phrases get ~80px more horizontal room AND 13% larger type. */ .fr-phrase-text{display:inline;font-size:.95rem;line-height:1.55;color:var(--text);direction:rtl;cursor:default} .fr-phrase-item{padding:9px 14px !important} /* 2026-05-13: source label now an inline-end chip on the same row as the phrase text instead of a full block below it. Saves the ~14px of vertical real-estate per row. The badges (cross-stage chip, inserted, count) still cluster around the source label, so the source-wrap is `display:inline` not `block`. */ .fr-phrase-src{font-size:.62rem;color:var(--faint);margin:0 0 0 8px;display:inline;white-space:nowrap} .fr-phrase-copy{flex-shrink:0;font-size:.66rem;min-height:24px;background:none;border:1px solid var(--line2);border-radius:12px;padding:3px 10px;cursor:pointer;color:var(--muted);font-family:'DM Sans',sans-serif;white-space:nowrap;transition:all .15s;margin-top:1px} .fr-phrase-copy:hover,.fr-phrase-copy.copied{color:var(--accent);border-color:#e0c490;background:var(--accent-lo)} .fr-phrase-del{flex-shrink:0;font-size:.66rem;min-height:24px;background:none;border:none;cursor:pointer;color:var(--faint);padding:3px 6px;transition:color .15s;margin-top:1px} .fr-phrase-del:hover{color:#c0392b} .fr-phrase-edit{flex-shrink:0;font-size:.66rem;min-height:24px;background:none;border:1px solid var(--line2);border-radius:12px;padding:3px 9px;cursor:pointer;color:var(--muted);font-family:'DM Sans',sans-serif;white-space:nowrap;transition:all .15s;margin-top:1px} .fr-phrase-edit:hover{color:var(--accent);border-color:#e0c490} .fr-phrase-edit.editing{color:#fff;background:var(--accent);border-color:var(--accent)} .fr-phrase-editing-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .fr-phrase-edit-ta{width:100%;background:var(--bg3);border:1px solid var(--accent);border-radius:6px;font-size:.71rem;padding:4px 7px;color:var(--text);font-family:'DM Sans',sans-serif;direction:rtl;resize:none;outline:none;line-height:1.5;box-sizing:border-box} .fr-phrase-save-edit{align-self:flex-end;font-size:.58rem;background:var(--accent);color:#fff;border:none;border-radius:10px;padding:2px 10px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:opacity .15s} .fr-phrase-save-edit:hover{opacity:.85} .fr-phrases-add{padding:8px 10px;border-top:1px solid var(--line);flex-shrink:0} .fr-add-ta{width:100%;background:var(--bg3);border:1px solid var(--line2);border-radius:8px;font-size:.71rem;padding:6px 8px;color:var(--text);font-family:'DM Sans',sans-serif;direction:rtl;resize:none;outline:none;line-height:1.6;box-sizing:border-box} .fr-add-row{display:flex;gap:5px;margin-top:5px;align-items:center} .fr-add-src{flex:1;padding:4px 7px;background:var(--bg3);border:1px solid var(--line2);border-radius:8px;font-size:.65rem;color:var(--muted);font-family:'DM Sans',sans-serif;direction:rtl;outline:none} .fr-add-save{padding:4px 12px;background:var(--accent);color:#fff;border:none;border-radius:12px;font-size:.62rem;cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap;transition:opacity .15s} .fr-add-save:hover{opacity:.85} /* ════════════════════════════════════════════════════════════════ PHRASES PANEL v3 (2026-05-13) ════════════════════════════════════════════════════════════════ Professional redesign per user feedback: "מצומצם ולא נוח לקריאה ולא מסודר ולא מעוצב יפה". Five concrete UX wins: 1. SEARCH AT TOP — was buried at bottom of header chrome (5 stacked groups before reaching it). Now the first thing the user sees after opening the panel. 2. BREADCRUMB NAVIGATION — was 3 stacked dropdowns (species buttons / disease chips / stage