/* ── Theme Variables ───────────────────────────────────────────── */ :root,[data-theme="dark"]{ --bg: #0a0a0f; --surface: #111118; --surface2: #16161f; --surface3: #1c1c28; --surface4: #22222f; --border: rgba(255,255,255,.07); --border2: rgba(255,255,255,.12); --text: #e8e8f0; --text2: #9898b0; --text3: #5a5a78; --accent: #6c63ff; --accent2: #a5a0ff; --accent-bg: rgba(108,99,255,.12); --accent-border: rgba(108,99,255,.35); --green: #22c55e; --green-bg: rgba(34,197,94,.1); --green-border: rgba(34,197,94,.25); --amber: #f59e0b; --amber-bg: rgba(245,158,11,.1); --amber-border: rgba(245,158,11,.25); --red: #ef4444; --red-bg: rgba(239,68,68,.1); --red-border: rgba(239,68,68,.25); --blue: #38bdf8; --blue-bg: rgba(56,189,248,.1); --blue-border: rgba(56,189,248,.25); --teal: #2dd4bf; --teal-bg: rgba(45,212,191,.1); --teal-border: rgba(45,212,191,.25); /* User-customizable (Appearance panel, js/ui-prefs.js) — these defaults apply until the user picks their own; overridden via inline style on so they win regardless of dark/light theme. */ --user-status-drafted: #f59e0b; --user-status-completed: #38bdf8; --user-status-finalized: #22c55e; --user-status-printed: #6c63ff; --user-has-history: #22c55e; --sidebar-w: 240px; --topbar-h: 56px; --r: 10px; --r-sm: 6px; --r-lg: 14px; --shadow: 0 4px 24px rgba(0,0,0,.4); --shadow-sm: 0 2px 8px rgba(0,0,0,.3); } [data-theme="light"]{ --bg: #f0f0f8; --surface: #ffffff; --surface2: #f8f8fc; --surface3: #f0f0f8; --surface4: #e8e8f4; --border: rgba(0,0,0,.08); --border2: rgba(0,0,0,.14); --text: #1a1a2e; --text2: #5a5a7a; --text3: #9898b8; --accent: #5b52e8; --accent2: #6c63ff; --accent-bg: rgba(91,82,232,.1); --accent-border: rgba(91,82,232,.35); --green: #16a34a; --green-bg: rgba(22,163,74,.08); --green-border: rgba(22,163,74,.3); --amber: #d97706; --amber-bg: rgba(217,119,6,.08); --amber-border: rgba(217,119,6,.3); --red: #dc2626; --red-bg: rgba(220,38,38,.08); --red-border: rgba(220,38,38,.3); --blue: #0284c7; --blue-bg: rgba(2,132,199,.08); --blue-border: rgba(2,132,199,.3); --teal: #0d9488; --teal-bg: rgba(13,148,136,.08); --teal-border: rgba(13,148,136,.3); --shadow: 0 4px 24px rgba(0,0,0,.1); --shadow-sm: 0 2px 8px rgba(0,0,0,.08); } /* ── Reset & Base ──────────────────────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:14px;display:flex;overflow:hidden;line-height:1.5;transition:background .2s,color .2s} /* ── Layout Shell ──────────────────────────────────────────────── */ #app{display:flex;width:100%;height:100vh} /* ── Sidebar ───────────────────────────────────────────────────── */ #sidebar{ width:var(--sidebar-w);flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex;flex-direction:column;height:100vh; transition:background .2s,border-color .2s; } .sidebar-logo{ padding:20px 18px 16px; border-bottom:1px solid var(--border); display:flex;align-items:center;gap:10px; } .logo-icon{ width:34px;height:34px;border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex;align-items:center;justify-content:center; font-size:16px;color:#fff;flex-shrink:0; box-shadow:0 2px 10px rgba(108,99,255,.4); } .logo-text{} .logo-brand{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-.02em} .logo-sub{font-size:10px;color:var(--text3);font-family:'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase} .sidebar-nav{padding:12px 10px;flex:1;display:flex;flex-direction:column;gap:2px;overflow-y:auto} .nav-section{ font-size:10px;font-family:'JetBrains Mono',monospace; color:var(--text3);letter-spacing:.1em;text-transform:uppercase; padding:14px 8px 5px; } .nav-item{ display:flex;align-items:center;gap:10px; padding:9px 10px;border-radius:var(--r-sm); cursor:pointer;color:var(--text2);font-size:13px;font-weight:500; transition:all .15s;border:1px solid transparent;user-select:none; } .nav-item:hover{background:var(--surface3);color:var(--text)} .nav-item.active{ background:var(--accent-bg);color:var(--accent2); border-color:var(--accent-border); } .nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:5px;font-size:14px;flex-shrink:0} .nav-item.active .nav-icon{background:rgba(108,99,255,.2)} .sidebar-footer{padding:12px 14px 14px;border-top:1px solid var(--border)} .scp-row{display:flex;align-items:center;gap:8px;margin-bottom:8px} .status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:all .3s} .dot-green{background:var(--green);box-shadow:0 0 0 2px rgba(34,197,94,.25)} .dot-red {background:var(--red); box-shadow:0 0 0 2px rgba(239,68,68,.25)} .dot-pulse{animation:pulse 2s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .scp-label{font-size:12px;font-weight:500;color:var(--text2)} .queue-chips{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap} .chip{font-size:10px;font-family:'JetBrains Mono',monospace;padding:3px 8px;border-radius:20px;background:var(--surface3);border:1px solid var(--border2);color:var(--text3)} .ws-indicator{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text3);display:flex;align-items:center;gap:5px} .ws-dot{width:5px;height:5px;border-radius:50%;background:var(--text3)} .ws-dot.connected{background:var(--green)} .scp-actions{display:flex;gap:4px;margin-bottom:10px} .scp-actions .btn{flex:1;padding:5px 0;font-size:12px;justify-content:center} .scp-actions .btn:disabled{opacity:.35;cursor:not-allowed} /* ── Main ──────────────────────────────────────────────────────── */ #main{flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;min-width:0} .topbar{ height:var(--topbar-h);flex-shrink:0; background:var(--surface); border-bottom:1px solid var(--border); display:flex;align-items:center;padding:0 22px;gap:12px; transition:background .2s; } .page-title{font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--text)} .topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px} .clock{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--text3);padding:4px 10px;background:var(--surface3);border-radius:20px} /* Theme Toggle */ .theme-toggle{ width:34px;height:34px;border-radius:var(--r-sm); border:1px solid var(--border2);background:var(--surface3); color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center; font-size:16px;transition:all .15s; } .theme-toggle:hover{background:var(--surface4);color:var(--text)} #content{flex:1;overflow-y:auto;padding:22px;scroll-behavior:smooth} /* ── Buttons ───────────────────────────────────────────────────── */ .btn{ padding:7px 14px;border-radius:var(--r-sm); border:1px solid var(--border2);background:var(--surface3); color:var(--text);cursor:pointer;font-family:'Inter',sans-serif; font-size:12px;font-weight:500;transition:all .15s; display:inline-flex;align-items:center;gap:5px;white-space:nowrap; } .btn:hover{background:var(--surface4);border-color:var(--border2)} .btn:active{transform:scale(.97)} .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(108,99,255,.35)} .btn-primary:hover{opacity:.9;background:var(--accent)} .btn-success{background:var(--green-bg);border-color:var(--green-border);color:var(--green)} .btn-success:hover{background:rgba(34,197,94,.15)} .btn-danger{background:var(--red-bg);border-color:var(--red-border);color:var(--red)} .btn-danger:hover{background:rgba(239,68,68,.15)} .btn-sm{padding:4px 10px;font-size:11px} .btn-icon{width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;font-size:14px} /* Row action buttons (patient/study browser) — bigger glyphs than .btn-icon so the icon itself (not just the click target) is easy to read at a glance. */ .btn-action{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} .row-actions{display:flex;gap:6px;flex-wrap:wrap} /* History button — filled green once a patient actually has a history note, so its presence is visible without opening the modal. Solid-ish (not a faint tint) so it reads clearly at a glance; color itself is user-customizable (Appearance panel). */ .btn-action.has-history{background:color-mix(in srgb, var(--user-has-history) 38%, var(--surface3));border-color:var(--user-has-history);color:var(--text)} .btn-action.has-history:hover{background:color-mix(in srgb, var(--user-has-history) 55%, var(--surface3))} /* Report button — tinted by the report's own lifecycle stage; each stage's color is user-customizable (Appearance panel, js/ui-prefs.js). */ .btn-action.rpt-status-drafted{background:color-mix(in srgb, var(--user-status-drafted) 38%, var(--surface3));border-color:var(--user-status-drafted);color:var(--text)} .btn-action.rpt-status-completed{background:color-mix(in srgb, var(--user-status-completed) 38%, var(--surface3));border-color:var(--user-status-completed);color:var(--text)} .btn-action.rpt-status-finalized{background:color-mix(in srgb, var(--user-status-finalized) 38%, var(--surface3));border-color:var(--user-status-finalized);color:var(--text)} .btn-action.rpt-status-printed{background:color-mix(in srgb, var(--user-status-printed) 38%, var(--surface3));border-color:var(--user-status-printed);color:var(--text)} .btn-action.rpt-status-drafted:hover{background:color-mix(in srgb, var(--user-status-drafted) 55%, var(--surface3))} .btn-action.rpt-status-completed:hover{background:color-mix(in srgb, var(--user-status-completed) 55%, var(--surface3))} .btn-action.rpt-status-finalized:hover{background:color-mix(in srgb, var(--user-status-finalized) 55%, var(--surface3))} .btn-action.rpt-status-printed:hover{background:color-mix(in srgb, var(--user-status-printed) 55%, var(--surface3))} .btn-action.rpt-export-disabled{opacity:.35;cursor:not-allowed} .btn-action.rpt-export-disabled:hover{background:var(--surface3)} /* ── Appearance panel ─────────────────────────────────────────────── */ .uip-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)} .uip-row:last-of-type{border-bottom:none} .uip-swatch{width:44px;height:30px;padding:0;border:1px solid var(--border2);border-radius:6px;cursor:pointer;background:none} /* ── Cards ─────────────────────────────────────────────────────── */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;transition:background .2s,border-color .2s} .card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .card-title{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--text3);letter-spacing:.07em;text-transform:uppercase} /* ── Metric Cards ──────────────────────────────────────────────── */ .metrics-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px} @media (max-width:1400px){.metrics-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:760px){.metrics-grid{grid-template-columns:repeat(2,1fr)}} .metric-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--r-lg);padding:16px 18px; position:relative;overflow:hidden;transition:all .2s;cursor:default; } .metric-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:var(--accent-color,var(--accent));opacity:.75; box-shadow:0 0 10px 0 var(--accent-color,var(--accent)); } .metric-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow-sm)} .metric-icon{position:absolute;top:14px;right:16px;font-size:20px;opacity:.5;line-height:1} .metric-card.c-blue {--accent-color:var(--blue)} .metric-card.c-teal {--accent-color:var(--teal)} .metric-card.c-green {--accent-color:var(--green)} .metric-card.c-red {--accent-color:var(--red)} .metric-card.c-amber {--accent-color:var(--amber)} .metric-card.c-purple{--accent-color:var(--accent)} .metric-label{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text3);letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px;padding-right:22px} .metric-value{font-size:30px;font-weight:600;letter-spacing:-.04em;font-family:'JetBrains Mono',monospace;line-height:1} .metric-card.c-blue .metric-value{color:var(--blue)} .metric-card.c-teal .metric-value{color:var(--teal)} .metric-card.c-green .metric-value{color:var(--green)} .metric-card.c-red .metric-value{color:var(--red)} .metric-card.c-amber .metric-value{color:var(--amber)} .metric-card.c-purple .metric-value{color:var(--accent2)} .metric-sub{font-size:11px;color:var(--text3);margin-top:5px} /* ── Badges ─────────────────────────────────────────────────────── */ .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:10px;font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:.03em;border:1px solid transparent;white-space:nowrap} .badge-green {background:var(--green-bg);color:var(--green);border-color:var(--green-border)} .badge-red {background:var(--red-bg); color:var(--red); border-color:var(--red-border)} .badge-amber {background:var(--amber-bg);color:var(--amber);border-color:var(--amber-border)} .badge-blue {background:var(--blue-bg); color:var(--blue); border-color:var(--blue-border)} .badge-teal {background:var(--teal-bg); color:var(--teal); border-color:var(--teal-border)} .badge-purple{background:var(--accent-bg);color:var(--accent2);border-color:var(--accent-border)} .badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0} .badge-live .badge-dot{animation:pulse 1.4s ease-in-out infinite} /* ── Dashboard 2-col ───────────────────────────────────────────── */ .dash-grid{display:grid;grid-template-columns:1fr 280px;gap:14px} .dash-grid>.card{min-width:0} /* ── Activity Feed ─────────────────────────────────────────────── */ /* One-row-per-study, image counter increments in place */ .feed-table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed} .feed-table th{ font-size:10px;font-family:'JetBrains Mono',monospace; color:var(--text3);letter-spacing:.07em;text-transform:uppercase; padding:8px 10px;text-align:left;border-bottom:1px solid var(--border); background:var(--surface2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .feed-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .feed-table tr:hover td{background:var(--surface2)} .feed-table tr.flash td{animation:rowflash .5s ease} @keyframes rowflash{from{background:rgba(108,99,255,.14)}to{background:transparent}} /* column widths */ .feed-table .c-time{width:150px} .feed-table .c-event{width:110px} .feed-table .c-patient{width:150px} .feed-table .c-pid{width:92px} .feed-table .c-mod{width:55px;text-align:center} .feed-table .c-dest{width:110px} .feed-table .c-ser{width:64px;text-align:center} .feed-table .c-img{width:65px;text-align:center} .feed-table .c-total{width:70px;text-align:center} .feed-table .c-recv{width:82px;text-align:center} .feed-table .c-comp{width:98px;text-align:center} .feed-table .c-sentn{width:70px;text-align:center} .feed-table .c-start{width:150px} .feed-table .c-end{width:150px} .feed-table .c-dur{width:90px;text-align:center} .feed-table .c-status{width:70px} .feed-table .c-msg{width:auto} .img-counter{ font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600; color:var(--blue); transition:color .2s; } .img-counter.updated{animation:counterpop .3s ease} @keyframes counterpop{0%{transform:scale(1.4);color:var(--amber)}100%{transform:scale(1);color:var(--blue)}} .count-cell{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;transition:color .2s} .count-cell.recv{color:var(--blue)} .count-cell.comp{color:var(--teal)} .count-cell.sentn{color:var(--green)} .count-cell.total{color:var(--text2)} .count-cell.ser{color:var(--text2)} .count-cell.dur{color:var(--amber)} .count-cell.bump{animation:counterpop .3s ease} /* ── Sender Status Cards ───────────────────────────────────────── */ .sender-card{ padding:12px 14px;border:1px solid var(--border); border-radius:var(--r);background:var(--surface2); margin-bottom:8px;transition:all .15s; } .sender-card:hover{border-color:var(--border2)} .sender-card.ok{border-left:3px solid var(--green)} .sender-card.err{border-left:3px solid var(--red)} .sender-card.idle{border-left:3px solid var(--border2)} /* ── Tables ─────────────────────────────────────────────────────── */ .table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border)} .data-table{width:100%;border-collapse:collapse;font-size:13px} .data-table th{ background:var(--surface2); font-size:11px;font-family:'JetBrains Mono',monospace; color:var(--text3);letter-spacing:.06em;text-transform:uppercase; padding:10px 14px;text-align:left;border-bottom:1px solid var(--border); white-space:nowrap;position:sticky;top:0;z-index:1; } .data-table td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle} .data-table tr:last-child td{border-bottom:none} .data-table tbody tr{transition:background .1s;cursor:default} .data-table tbody tr:hover td{background:var(--surface2)} .data-table .clickable{cursor:pointer;color:var(--accent2);font-weight:600} .data-table .clickable:hover{text-decoration:underline} /* Patient drill-down */ .breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text3);margin-bottom:14px;font-family:'JetBrains Mono',monospace;flex-wrap:wrap} .breadcrumb .crumb{color:var(--accent2);cursor:pointer} .breadcrumb .crumb:hover{text-decoration:underline} .breadcrumb .sep{color:var(--text3)} /* ── Forms ──────────────────────────────────────────────────────── */ .form-group{margin-bottom:14px} .form-label{display:block;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text2);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px} .form-input,.form-select,.form-textarea{ width:100%;padding:9px 12px; background:var(--surface2);border:1px solid var(--border2); border-radius:var(--r-sm);color:var(--text); font-family:'Inter',sans-serif;font-size:13px; outline:none;transition:border-color .15s,box-shadow .15s; } .form-input:focus,.form-select:focus,.form-textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(108,99,255,.15); } .form-select option{background:var(--surface2)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .toggle-wrap{display:flex;align-items:center;gap:10px} .toggle{position:relative;width:36px;height:20px;flex-shrink:0} .toggle input{opacity:0;position:absolute;width:100%;height:100%;cursor:pointer;margin:0} .toggle-slider{position:absolute;inset:0;background:var(--surface3);border:1px solid var(--border2);border-radius:20px;transition:.2s} .toggle-slider::before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;background:var(--text3);border-radius:50%;transition:.2s} .toggle input:checked+.toggle-slider{background:var(--accent);border-color:var(--accent)} .toggle input:checked+.toggle-slider::before{transform:translateX(16px);background:#fff} .toggle-label{font-size:13px;color:var(--text2)} /* ── Modals ─────────────────────────────────────────────────────── */ .modal-overlay{ position:fixed;inset:0;background:rgba(0,0,0,.6); display:flex;align-items:center;justify-content:center; z-index:1000;backdrop-filter:blur(8px); animation:fadeIn .15s ease; } @keyframes fadeIn{from{opacity:0}to{opacity:1}} .modal{ background:var(--surface);border:1px solid var(--border2); border-radius:var(--r-lg);padding:24px; width:520px;max-width:90vw;max-height:88vh;overflow-y:auto; box-shadow:var(--shadow);animation:slideUp .2s ease; } @keyframes slideUp{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}} .modal-title{font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:20px;display:flex;align-items:center;gap:10px} .modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)} /* ── Compression Rules ───────────────────────────────────────────── */ .rule-row{ display:grid;grid-template-columns:82px 1fr auto; gap:12px;align-items:center;padding:11px 0; border-bottom:1px solid var(--border); } .rule-row:last-child{border-bottom:none} .modality-badge{ font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; padding:4px 10px;border-radius:var(--r-sm); background:var(--accent-bg);border:1px solid var(--accent-border); color:var(--accent2);text-align:center;letter-spacing:.05em; } /* ── Settings ───────────────────────────────────────────────────── */ .setting-row{ display:grid;grid-template-columns:1fr 220px; gap:16px;align-items:center;padding:14px 0; border-bottom:1px solid var(--border); } .setting-row:last-child{border-bottom:none} .setting-key{font-size:13px;font-weight:500;color:var(--text);margin-bottom:3px} .setting-desc{font-size:11px;color:var(--text3)} /* ── Reporting ──────────────────────────────────────────────────── */ .report-header-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .report-info-panel{border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:14px;overflow:hidden;background:var(--surface)} .report-info-header{ display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer; background:var(--surface2);user-select:none;transition:background .15s; } .report-info-header:hover{background:var(--surface3)} .report-info-chevron{font-size:10px;color:var(--text3);display:inline-block;transition:transform .15s;flex-shrink:0} .report-info-panel.expanded .report-info-chevron{transform:rotate(90deg)} .report-info-title{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;font-family:'JetBrains Mono',monospace;flex-shrink:0} .report-info-summary{font-size:12px;color:var(--text3);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .report-info-panel.expanded .report-info-summary{display:none} .report-info-body{display:none;padding:14px;border-top:1px solid var(--border)} .report-info-panel.expanded .report-info-body{display:block} .img-preview-box{ display:flex;align-items:center;justify-content:center; border:1px dashed var(--border2);border-radius:var(--r-sm); background:var(--surface2);min-height:70px;padding:8px;margin-bottom:10px;overflow:hidden; } .img-preview-box img{max-width:100%;max-height:90px} .img-preview-box.empty{color:var(--text3);font-size:12px} .export-checks{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0} .export-checks label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text2);cursor:pointer} .report-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px} .report-status-select{width:auto;padding:6px 10px;font-size:12px} .jodit-row{display:flex;gap:12px;align-items:stretch;margin-bottom:14px} .jodit-row .jodit-wrap{flex:1;min-width:0;margin-bottom:0} /* Jodit's editing area isn't rendered inside an iframe by default, so — unlike its own toolbar chrome, which ships its own colors — the WYSIWYG content div has no text color of its own and inherits ours (near-white, for our dark theme) over Jodit's own near-white editing background: unreadable. Force a normal dark, readable color regardless of our page's theme. */ .jodit-wysiwyg, .jodit-wysiwyg *{color:#222!important} .jodit-wysiwyg a{color:#2563eb!important} /* ── RadiSpeak.AI panel ──────────────────────────────────────────── */ #rs-toggle-btn.active{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent2)} .radispeak-panel{ flex:0 0 30%;width:30%;min-width:0;display:flex;flex-direction:column; border:1px solid var(--border);border-radius:var(--r);background:var(--surface2);overflow:hidden; } .radispeak-panel.collapsed{display:none} .rs-header{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:10px 12px;background:var(--surface3);border-bottom:1px solid var(--border);flex-shrink:0; } .rs-header-title{font-size:12px;font-weight:600;color:var(--text)} .rs-header-sub{font-size:10px;font-weight:400;color:var(--text3);margin-left:4px} .rs-conn-pill{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text2);white-space:nowrap} .rs-conn-dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0} .rs-conn-dot.connected{background:var(--green)} .rs-body{padding:12px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1;min-height:0} .rs-connect-row{display:flex;align-items:center;justify-content:space-between;gap:8px} .rs-user-label{font-size:12px;color:var(--text2)} .mic-section{background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:var(--r-sm);padding:12px;display:flex;align-items:center;gap:12px} .mic-wrap{flex-shrink:0;text-align:center;width:64px} .mic-ripple{position:relative;width:56px;height:56px;cursor:pointer;margin:0 auto} .mic-ring{display:none;position:absolute;border-radius:50%;border:2px solid;pointer-events:none} .mic-ring1{inset:-9px;border-color:rgba(56,189,248,.4);animation:micRipple 1.8s ease-out infinite} .mic-ring2{inset:-17px;border-color:rgba(56,189,248,.22);animation:micRipple 1.8s ease-out infinite .5s} .mic-circle{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;border:3px solid rgba(255,255,255,.15);transition:background .3s} .mic-circle-idle{background:var(--surface4)} .mic-circle-ready{background:linear-gradient(135deg,#0ea5e9,#0284c7);box-shadow:0 3px 14px rgba(14,165,233,.5)} .mic-circle-rec{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 3px 14px rgba(220,38,38,.5)} .mic-circle-paused{background:linear-gradient(135deg,#d97706,#b45309);box-shadow:0 3px 14px rgba(217,119,6,.5)} .mic-state{margin-top:6px;font-size:9px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;text-align:center;line-height:1.3} .mic-timer{display:none;font-size:11px;font-weight:700;color:var(--red);text-align:center} .mic-instructions{flex:1;min-width:0} .mic-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:600;margin-bottom:6px;background:var(--surface4);color:var(--text2)} .mic-pill-dot{width:6px;height:6px;border-radius:50%;background:var(--text3);flex-shrink:0} .mic-pill-dot-ready{background:#38bdf8} .mic-pill-dot-rec{background:#ef4444} .mic-pill-dot-paused{background:#f59e0b} .mic-live-dot{color:#ef4444;font-weight:700} .mic-steps{font-size:10px;color:var(--text2);line-height:1.8;display:flex;flex-direction:column;gap:1px} .mic-step{display:flex;align-items:center;gap:6px} .step-n{border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;flex-shrink:0;color:#0a0a0f} .step-n-green{background:#86efac} .step-n-amber{background:#fcd34d} .step-n-blue{background:#7dd3fc} .rs-dictation-wrap{display:flex;flex-direction:column;flex:1;min-height:120px} .rs-sec-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);display:flex;align-items:center;margin-bottom:5px} .rs-char-count{margin-left:auto;font-weight:400;text-transform:none} .rs-textarea{ width:100%;border:1px solid var(--border2);border-radius:var(--r-sm);padding:9px 11px; font-size:12px;font-family:'Inter',sans-serif;resize:none;outline:none;line-height:1.7;flex:1;min-height:0; background:var(--surface);color:var(--text); } .rs-textarea:focus{border-color:var(--accent)} .rs-error{padding:8px 10px;background:var(--red-bg);border:1px solid var(--red-border);border-radius:var(--r-sm);font-size:11px;color:var(--red)} .rs-footer{padding:10px 12px;background:var(--surface3);border-top:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;gap:7px} .rs-gen-btn{flex:1;justify-content:center} @keyframes micRipple{0%{transform:scale(1);opacity:1}100%{transform:scale(1.6);opacity:0}} /* Narrow host (e.g. the OHIF side-panel iframe) — each iframe has its own viewport, so this media query fires independently of the outer window. */ @media (max-width:640px){ .report-header-grid{grid-template-columns:1fr} .report-toolbar{flex-direction:column;align-items:stretch} .report-toolbar>span{display:none} .report-status-select{width:100%} .jodit-row{flex-direction:column} .radispeak-panel{width:100%;flex-basis:auto} } /* ── Search bar ─────────────────────────────────────────────────── */ .search-bar{display:flex;gap:8px;margin-bottom:16px;align-items:center;flex-wrap:wrap} .search-input{ flex:1;padding:9px 14px; background:var(--surface);border:1px solid var(--border2); border-radius:var(--r-sm);color:var(--text); font-family:'Inter',sans-serif;font-size:13px;outline:none; transition:border-color .15s,box-shadow .15s; } .search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,99,255,.12)} /* ── Activity Filter row ─────────────────────────────────────────── */ .filter-row{display:flex;gap:8px;margin-bottom:14px;align-items:center;flex-wrap:wrap} /* ── Toast ───────────────────────────────────────────────────────── */ #toasts{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:8px;z-index:9999} .toast{ background:var(--surface);border:1px solid var(--border2); border-radius:var(--r);padding:11px 16px;font-size:13px; display:flex;gap:10px;align-items:center;max-width:360px; box-shadow:var(--shadow);animation:slideInToast .3s ease; } @keyframes slideInToast{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}} .toast.success{border-color:var(--green-border)} .toast.error {border-color:var(--red-border)} .toast.info {border-color:var(--blue-border)} .toast-icon{font-size:15px} /* ── Send Dialog (patient) ───────────────────────────────────────── */ .sender-option{ padding:12px 14px;border:1px solid var(--border); border-radius:var(--r);cursor:pointer;transition:all .15s; display:flex;align-items:center;justify-content:space-between; margin-bottom:8px; } .sender-option:hover{border-color:var(--accent-border);background:var(--accent-bg)} .sender-option.selected{border-color:var(--accent);background:var(--accent-bg)} .sender-option-name{font-weight:600;font-size:13px;color:var(--text)} .sender-option-host{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text3)} /* ── Misc ───────────────────────────────────────────────────────── */ .mono{font-family:'JetBrains Mono',monospace;font-size:11px} .hidden{display:none!important} .page{display:none} .page.active{display:block} .divider{height:1px;background:var(--border);margin:12px 0} ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:var(--text3)} /* ── Login Screen ──────────────────────────────────────────────────── */ #login-screen{display:none;}#login-screen.show{display:flex!important; position:fixed;inset:0;z-index:9000; background:var(--bg); display:flex;align-items:center;justify-content:center; } .login-card{ background:var(--surface);border:1px solid var(--border2); border-radius:var(--r-lg);padding:36px 40px;width:380px; box-shadow:var(--shadow); } .login-logo{ display:flex;align-items:center;gap:12px;margin-bottom:28px; } .login-logo-icon{ width:44px;height:44px;border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex;align-items:center;justify-content:center; font-size:20px;color:#fff; box-shadow:0 4px 14px rgba(108,99,255,.45); } .login-title{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.03em} .login-subtitle{font-size:12px;color:var(--text3);margin-top:2px} .login-error{ background:var(--red-bg);border:1px solid var(--red-border); color:var(--red);border-radius:var(--r-sm); padding:9px 12px;font-size:13px;margin-bottom:14px; display:none; } .login-btn{ width:100%;padding:10px;border-radius:var(--r-sm); background:var(--accent);border:none;color:#fff; font-family:"Inter",sans-serif;font-size:14px;font-weight:600; cursor:pointer;transition:opacity .15s;margin-top:8px; } .login-btn:hover{opacity:.88} .login-btn:disabled{opacity:.5;cursor:not-allowed} /* ── Export Progress Bar (CD/ISO/USB) ─────────────────────────────── */ .progress-track{ height:8px;border-radius:4px;background:var(--border); overflow:hidden;position:relative; } .progress-fill{ height:100%;border-radius:4px;width:0%; background:linear-gradient(135deg,var(--accent),var(--accent2)); transition:width .3s ease; } .progress-fill.indeterminate{ width:35%!important;position:absolute; animation:progress-indeterminate 1.1s ease-in-out infinite; } .progress-fill.failed{background:var(--red)} @keyframes progress-indeterminate{ 0%{left:-35%} 100%{left:100%} } .progress-label{ display:flex;justify-content:space-between;font-size:12px; color:var(--text2);margin-top:8px; }