/* ═══════════════════════════════════════════════════════════════ Gene Star Design System — genestar.css Cormorant Garamond (display) + DM Sans (UI) Dark / Light theme via [data-theme] on ═══════════════════════════════════════════════════════════════ */ /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap'); /* ── Tokens: Dark (default) ── */ :root, [data-theme="dark"] { --bg: #0a090d; --deep: #120f1a; --surf: #1a1528; --surf2: #211c32; --rim: rgba(139,92,246,.14); --rim2: rgba(139,92,246,.26); --muted: #6b5f82; --body: #b0a4cc; --head: #f0ebff; --sub: #8b7fac; --v: #7c3aed; --v2: #8b5cf6; --vbg: rgba(124,58,237,.1); --vrim: rgba(139,92,246,.3); --iris: #a78bfa; --dusk: #c4b5fd; --teal: #2dd4bf; --tbg: rgba(45,212,191,.1); --trim: rgba(45,212,191,.3); --ttxt: #2dd4bf; --gold: #f59e0b; --gbg: rgba(245,158,11,.1); --grim: rgba(245,158,11,.3); --gtxt: #f59e0b; --rose: #e879f9; --rbg: rgba(232,121,249,.1); --rrim: rgba(232,121,249,.3); --rtxt: #e879f9; --red: #f87171; --redbg: rgba(248,113,113,.1); --redrim: rgba(248,113,113,.3); --inp: rgba(139,92,246,.06); --inpb: rgba(139,92,246,.2); --inpf: #a78bfa; --divl: rgba(139,92,246,.12); --warnbg: rgba(245,158,11,.1); --warnb: rgba(245,158,11,.25); --warnt: #f59e0b; --nav-h: 58px; --sidebar-w: 220px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --shadow: 0 4px 24px rgba(0,0,0,.35); --shadow-sm: 0 2px 8px rgba(0,0,0,.25); } /* ── Tokens: Light ── */ [data-theme="light"] { --bg: #f4f1f9; --deep: #ffffff; --surf: #ffffff; --surf2: #f7f4fd; --rim: rgba(109,79,194,.12); --rim2: rgba(109,79,194,.22); --muted: #9b8fc0; --body: #5c5076; --head: #1e1535; --sub: #7a6ea0; --v: #6d4fc2; --v2: #7c5fd4; --vbg: rgba(109,79,194,.07); --vrim: rgba(109,79,194,.25); --iris: #6d4fc2; --dusk: #8b6fd4; --teal: #0d7a65; --tbg: rgba(13,122,101,.08); --trim: rgba(13,122,101,.25); --ttxt: #0d7a65; --gold: #926006; --gbg: rgba(146,96,6,.08); --grim: rgba(146,96,6,.25); --gtxt: #926006; --rose: #b02880; --rbg: rgba(176,40,128,.08); --rrim: rgba(176,40,128,.25); --rtxt: #b02880; --red: #c23232; --redbg: rgba(194,50,50,.08); --redrim: rgba(194,50,50,.25); --inp: rgba(109,79,194,.04); --inpb: rgba(109,79,194,.18); --inpf: #6d4fc2; --divl: rgba(109,79,194,.1); --warnbg: rgba(146,96,6,.07); --warnb: rgba(146,96,6,.2); --warnt: #7a5000; --shadow: 0 4px 24px rgba(80,60,120,.12); --shadow-sm: 0 2px 8px rgba(80,60,120,.08); } /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: 'DM Sans', system-ui, sans-serif; background: var(--deep); color: var(--body); min-height: 100vh; line-height: 1.6; transition: background .2s ease, color .2s ease; } a { color: var(--iris); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } select option { background: var(--surf); color: var(--head); } img { max-width: 100%; height: auto; } /* ── Typography Helpers ── */ .font-display { font-family: 'Cormorant Garamond', Georgia, serif; } .eyebrow { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--v2); font-weight: 500; } /* ── Layout Shell ── */ .app-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .app-body { display: flex; flex: 1; min-height: 0; overflow: hidden; } /* ── Top Navigation ── */ .topnav { position: sticky; top: 0; z-index: 300; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; height: var(--nav-h); background: var(--deep); border-bottom: 1px solid var(--rim); transition: background .2s, border-color .2s; } /* On desktop hide the brand in the topnav — sidebar has it */ @media (min-width: 901px) { .topnav .brand { display: none; } } .brand { display: flex; align-items: center; gap: .6rem; font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 400; color: var(--head); letter-spacing: .02em; flex-shrink: 0; text-decoration: none; } .brand:hover { text-decoration: none; } .gem { width: 26px; height: 26px; background: var(--v); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s; } .gem svg { width: 12px; height: 12px; } .gem:hover { background: var(--v2); } .navlinks { display: flex; align-items: center; gap: .18rem; flex-wrap: wrap; } .nav-link { display: inline-flex; align-items: center; gap: .38rem; background: none; border: 1px solid transparent; color: var(--sub); font-size: .73rem; letter-spacing: .06em; text-transform: uppercase; padding: .36rem .8rem; border-radius: var(--radius-sm); cursor: pointer; transition: all .18s; font-family: 'DM Sans', sans-serif; font-weight: 400; white-space: nowrap; text-decoration: none; } .nav-link:hover { color: var(--head); border-color: var(--rim2); background: var(--vbg); text-decoration: none; } .nav-link.active { color: var(--iris); border-color: var(--vrim); background: var(--vbg); font-weight: 500; } .theme-btn { display: inline-flex; align-items: center; gap: .38rem; padding: .3rem .68rem; border-radius: 20px; border: 1px solid var(--rim2); background: var(--vbg); color: var(--iris); font-size: .7rem; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; margin-left: .4rem; transition: all .18s; } .theme-btn:hover { background: var(--v); color: #fff; border-color: var(--v); } .theme-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; } /* ── Sidebar ── */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--deep); border-right: 1px solid var(--rim); display: flex; flex-direction: column; padding: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: background .2s, border-color .2s; } .sb-label { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: .8rem 1.25rem .3rem; } .sb-item { display: flex; align-items: center; gap: .65rem; padding: .6rem 1rem; margin: .04rem .5rem; border-radius: var(--radius-sm); font-size: .81rem; color: var(--body); transition: all .18s; position: relative; cursor: pointer; text-decoration: none; } .sb-item:hover { color: var(--head); background: var(--vbg); text-decoration: none; } .sb-item.active { color: var(--iris); background: var(--vbg); font-weight: 500; } .sb-item.active::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 3px; height: 55%; background: var(--v); border-radius: 0 2px 2px 0; } .sb-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: .7; stroke: currentColor; fill: none; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; transition: opacity .18s; } .sb-item:hover .sb-icon, .sb-item.active .sb-icon { opacity: 1; } .sb-badge { margin-left: auto; background: var(--vbg); color: var(--iris); font-size: .58rem; padding: .1rem .38rem; border-radius: 10px; border: 1px solid var(--vrim); font-weight: 500; } .sb-badge.alert { background: var(--rbg); color: var(--rtxt); border-color: var(--rrim); } .sb-footer { margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid var(--rim); } .user-av { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--v); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 500; flex-shrink: 0; } .user-name { font-size: .77rem; font-weight: 500; color: var(--head); } .user-role { font-size: .66rem; color: var(--muted); } /* ── Main Content ── */ .main { flex: 1; padding: .75rem 2.5rem 2rem; background: var(--bg); overflow-y: auto; transition: background .2s; } .main-full { flex: 1; background: var(--bg); transition: background .2s; } /* no padding for full-bleed layouts */ /* ── Hero Banner ── */ .hero { background: var(--vbg); border: 1px solid var(--vrim); border-left: 3px solid var(--v); border-radius: var(--radius-lg); padding: 1.85rem 2.25rem; margin-bottom: 1.75rem; } .hero-title { font-family: 'Cormorant Garamond', serif; font-size: 1.85rem; font-weight: 300; color: var(--head); line-height: 1.2; margin-bottom: .6rem; } .hero-title em { font-style: italic; color: var(--iris); } .hero-desc { font-size: .84rem; line-height: 1.62; color: var(--body); max-width: 560px; margin-bottom: 1.1rem; } .hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; } /* ── Stat Cards ── */ .stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 1.75rem; } .stat-card { background: var(--surf); border: 1px solid var(--rim); border-radius: var(--radius-md); padding: 1.1rem 1.2rem; border-top: 2px solid transparent; transition: all .2s; } .stat-card.v { border-top-color: var(--v2); } .stat-card.t { border-top-color: var(--teal); } .stat-card.g { border-top-color: var(--gold); } .stat-card.r { border-top-color: var(--rose); } .stat-label { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .38rem; } .stat-value { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 300; color: var(--head); line-height: 1; } .stat-sub { font-size: .69rem; color: var(--muted); margin-top: .28rem; } .stat-delta { font-size: .64rem; padding: .14rem .42rem; border-radius: 5px; margin-top: .32rem; display: inline-block; } .stat-delta.up { background: var(--tbg); color: var(--ttxt); } .stat-delta.warn { background: var(--gbg); color: var(--gtxt); } /* ── Cards ── */ .card { background: var(--surf); border: 1px solid var(--rim); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.5rem; transition: all .2s; } .card-head { padding: 1rem 1.5rem; border-bottom: 1px solid var(--rim); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; } .card-title { font-family: 'Cormorant Garamond', serif; font-size: 1.12rem; font-weight: 400; color: var(--head); } .card-sub { font-size: .69rem; color: var(--muted); margin-top: .1rem; } .card-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } /* ── Buttons ── */ .btn { font-size: .76rem; font-weight: 500; padding: .46rem 1rem; border-radius: var(--radius-sm); transition: all .18s; letter-spacing: .03em; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: .38rem; font-family: 'DM Sans', sans-serif; text-decoration: none; } .btn:hover { text-decoration: none; } .btn-sm { padding: .3rem .68rem; font-size: .7rem; } .btn-xs { padding: .22rem .5rem; font-size: .65rem; } .btn-primary { background: var(--v); color: #fff; } .btn-primary:hover { background: var(--v2); color: #fff; } .btn-outline { background: transparent; color: var(--iris); border: 1px solid var(--vrim); } .btn-outline:hover { background: var(--vbg); } .btn-ghost { background: transparent; color: var(--body); border: 1px solid var(--rim2); } .btn-ghost:hover { background: var(--surf2); color: var(--head); } .btn-teal { background: var(--tbg); color: var(--ttxt); border: 1px solid var(--trim); } .btn-teal:hover { background: var(--teal); color: #fff; border-color: var(--teal); } .btn-rose { background: var(--rbg); color: var(--rtxt); border: 1px solid var(--rrim); } .btn-rose:hover { background: var(--rose); color: #fff; } .btn-gold { background: var(--gbg); color: var(--gtxt); border: 1px solid var(--grim); } .btn-gold:hover { background: var(--gold); color: #fff; border-color: var(--gold); } .btn-danger { background: var(--redbg); color: var(--red); border: 1px solid var(--redrim); } .btn-danger:hover { background: var(--red); color: #fff; } /* ── Status Pills ── */ .pill { display: inline-flex; align-items: center; gap: .28rem; font-size: .65rem; padding: .16rem .5rem; border-radius: 20px; font-weight: 500; } .pill.active { background: var(--tbg); color: var(--ttxt); border: 1px solid var(--trim); } .pill.monitoring { background: var(--gbg); color: var(--gtxt); border: 1px solid var(--grim); } .pill.complete { background: var(--vbg); color: var(--iris); border: 1px solid var(--vrim); } .pill.adverse { background: var(--rbg); color: var(--rtxt); border: 1px solid var(--rrim); } .pdot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* De-identification badge */ .deid-badge { font-size: .58rem; padding: .11rem .44rem; border-radius: 4px; background: var(--tbg); color: var(--ttxt); border: 1px solid var(--trim); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; } /* Privacy notice */ .privacy-note { display: flex; align-items: flex-start; gap: .75rem; padding: .68rem 1.1rem; background: var(--tbg); border: 1px solid var(--trim); border-radius: var(--radius-md); margin-bottom: 1.2rem; font-size: .73rem; color: var(--ttxt); line-height: 1.45; } .privacy-note svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; flex-shrink: 0; margin-top: .1rem; } /* Context bar (linked patient/AE) */ .ctx-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem 1.05rem; background: var(--vbg); border: 1px solid var(--vrim); border-radius: var(--radius-md); margin-bottom: 1.15rem; font-size: .73rem; } .ctx-label { color: var(--muted); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; } .ctx-chip { background: var(--surf); border: 1px solid var(--vrim); border-radius: 5px; padding: .1rem .45rem; font-size: .69rem; color: var(--iris); font-weight: 500; } .ctx-chip.ae { border-color: var(--rrim); color: var(--rtxt); background: var(--rbg); } .ctx-chip.lab { border-color: var(--trim); color: var(--ttxt); background: var(--tbg); } .ctx-chip.tx { border-color: var(--grim); color: var(--gtxt); background: var(--gbg); } .ctx-sep { color: var(--divl); font-size: .8rem; } /* ── Patient Table ── */ .ptable { width: 100%; border-collapse: collapse; } .ptable th { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .7rem 1.25rem; border-bottom: 1px solid var(--rim); text-align: left; font-weight: 400; background: var(--surf2); } .ptable td { padding: .68rem 1.25rem; font-size: .79rem; color: var(--body); border-bottom: 1px solid var(--rim); vertical-align: middle; } .ptable tr:last-child td { border-bottom: none; } .ptable tbody tr { cursor: pointer; transition: background .15s; } .ptable tbody tr:hover td { background: var(--vbg); } .pname { font-weight: 500; color: var(--head); } .pmeta { font-size: .65rem; color: var(--muted); margin-top: .08rem; } .day-badge { font-size: .7rem; font-weight: 600; color: var(--ttxt); } /* ── Patient 360 ── */ .p360 { padding: 1.2rem; } .p360-name { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 300; color: var(--head); margin-bottom: .15rem; } .p360-id { font-size: .65rem; color: var(--muted); letter-spacing: .05em; margin-bottom: .9rem; } .p360-sec { font-size: .57rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: .8rem 0 .38rem; } .p360-row { display: flex; justify-content: space-between; padding: .33rem 0; border-bottom: 1px solid var(--rim); font-size: .74rem; } .p360-row:last-child { border-bottom: none; } .pk { color: var(--muted); } .pv { color: var(--head); font-weight: 500; } .pv.ok { color: var(--ttxt); } .pv.warn { color: var(--gtxt); } .pv.hi { color: var(--rtxt); } .tl-item { display: flex; gap: .58rem; padding: .38rem 0; border-bottom: 1px solid var(--rim); font-size: .7rem; } .tl-item:last-child { border-bottom: none; } .tl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v2); flex-shrink: 0; margin-top: .2rem; } .tl-dot.t { background: var(--teal); } .tl-dot.g { background: var(--gold); } .tl-dot.r { background: var(--rose); } .tl-date { font-size: .62rem; color: var(--muted); margin-top: .1rem; } .tl-label { color: var(--body); line-height: 1.38; } /* ── Page Header ── */ .page-header { margin-bottom: 1.4rem; } .page-header h1 { font-family: 'Cormorant Garamond', serif; font-size: 1.95rem; font-weight: 300; color: var(--head); line-height: 1.1; margin-top: .38rem; } .page-header p { font-size: .81rem; color: var(--muted); margin-top: .32rem; } .max-w { max-width: 920px; } /* ── Two-column grid ── */ .two-col { display: grid; grid-template-columns: 1fr 295px; gap: 1.5rem; } /* ── Stepper ── */ .stepper { display: flex; align-items: center; padding: .9rem 1.5rem; border-bottom: 1px solid var(--rim); background: var(--surf2); gap: 0; overflow-x: auto; } .step { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: var(--muted); padding: .22rem .45rem; white-space: nowrap; } .step.active { color: var(--iris); font-weight: 500; } .step.done { color: var(--ttxt); } .step-num { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: .63rem; font-weight: 500; flex-shrink: 0; } .step.done .step-num { background: var(--teal); border-color: var(--teal); color: #fff; } .step-sep { width: 20px; height: 1px; background: var(--rim2); flex-shrink: 0; } /* ── Forms ── */ .form-body { padding: 1.4rem 1.85rem; } .fg { display: grid; grid-template-columns: 1fr 1fr; gap: .95rem; } .fg3 { grid-template-columns: 1fr 1fr 1fr; } .f-span { grid-column: 1 / -1; } .ff { display: flex; flex-direction: column; gap: .34rem; } .ff label { font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .ff input, .ff select, .ff textarea { padding: .58rem .8rem; background: var(--inp); border: 1px solid var(--inpb); border-radius: var(--radius-sm); color: var(--head); font-size: .81rem; outline: none; font-family: 'DM Sans', sans-serif; transition: border-color .18s, background .18s; } .ff input:focus, .ff select:focus, .ff textarea:focus { border-color: var(--inpf); background: var(--surf); } .ff input::placeholder, .ff textarea::placeholder { color: var(--muted); } .ff textarea { resize: vertical; min-height: 72px; line-height: 1.52; } .ff select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238b7fac' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; padding-right: 1.85rem; } .ff .hint { font-size: .63rem; color: var(--muted); margin-top: .08rem; line-height: 1.38; } .ff .hint code { font-size: .62rem; color: var(--iris); font-family: monospace; } .f-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: .78rem; padding: .42rem 0; } .f-divider-label { font-size: .57rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .f-divider-line { flex: 1; height: 1px; background: var(--divl); } .form-foot { display: flex; gap: .6rem; padding: .95rem 1.85rem; border-top: 1px solid var(--rim); background: var(--surf2); flex-wrap: wrap; align-items: center; } /* Relative time inputs */ .rel-row { display: flex; align-items: center; gap: .45rem; } .rel-row input { width: 80px; flex-shrink: 0; } .rel-unit { font-size: .7rem; color: var(--muted); padding: .56rem .7rem; background: var(--surf2); border: 1px solid var(--inpb); border-radius: var(--radius-sm); white-space: nowrap; } /* ── CTCAE Grade Buttons ── */ .grade-row { display: flex; gap: .42rem; flex-wrap: wrap; } .grade-btn { flex: 1; min-width: 82px; padding: .46rem .38rem; border-radius: 7px; font-size: .68rem; font-weight: 500; text-align: center; background: var(--inp); border: 1px solid var(--inpb); color: var(--body); cursor: pointer; transition: all .18s; font-family: 'DM Sans', sans-serif; } .grade-btn:hover { border-color: var(--vrim); color: var(--iris); background: var(--vbg); } .grade-btn.g1 { background: var(--tbg); border-color: var(--trim); color: var(--ttxt); } .grade-btn.g2 { background: rgba(234,179,8,.1); border-color: rgba(234,179,8,.3); color: #a37f00; } .grade-btn.g3 { background: var(--gbg); border-color: var(--grim); color: var(--gtxt); } .grade-btn.g4 { background: var(--rbg); border-color: var(--rrim); color: var(--rtxt); } .grade-btn.g5 { background: var(--redbg); border-color: var(--redrim); color: var(--red); } /* ── AE Type Chip Selectors ── */ .se-chips, .chip-group { display: flex; flex-wrap: wrap; gap: .48rem; margin-top: .4rem; } .chip-toggle { padding: .36rem .75rem; border-radius: 20px; font-size: .73rem; font-weight: 500; cursor: pointer; transition: all .18s; background: var(--inp); border: 1px solid var(--inpb); color: var(--body); user-select: none; } .chip-toggle:hover { border-color: var(--vrim); color: var(--iris); background: var(--vbg); } .chip-toggle.sel-ae { background: var(--rbg); border-color: var(--rrim); color: var(--rtxt); } .chip-toggle.sel-lab { background: var(--tbg); border-color: var(--trim); color: var(--ttxt); } .chip-toggle.sel-tx { background: var(--gbg); border-color: var(--grim); color: var(--gtxt); } /* ── Lab Grid ── */ .lab-tabs { display: flex; border-bottom: 1px solid var(--rim); padding: 0 1.5rem; background: var(--surf); flex-wrap: wrap; } .lab-tab { background: none; border: none; font-size: .73rem; color: var(--muted); padding: .6rem .95rem .7rem; cursor: pointer; position: relative; transition: color .18s; font-family: 'DM Sans', sans-serif; } .lab-tab:hover { color: var(--body); } .lab-tab.active { color: var(--iris); font-weight: 500; } .lab-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--v); border-radius: 2px; } .lab-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; padding: 1.4rem 1.5rem; } .lab-item { background: var(--surf2); border: 1px solid var(--rim); border-radius: var(--radius-md); padding: .8rem .92rem; transition: all .2s; } .lab-item.flagged { border-color: var(--rrim); background: var(--rbg); } .lab-name { font-size: .69rem; font-weight: 500; color: var(--head); margin-bottom: .36rem; } .lab-input { width: 100%; padding: .4rem .56rem; background: var(--surf); border: 1px solid var(--inpb); border-radius: 6px; font-size: .85rem; color: var(--head); outline: none; font-family: 'DM Sans', sans-serif; transition: border-color .18s; } .lab-input:focus { border-color: var(--inpf); } .lab-unit { font-size: .63rem; color: var(--muted); margin-top: .26rem; } .lab-range { font-size: .6rem; color: var(--muted); margin-top: .12rem; } .lab-flag { font-size: .61rem; padding: .08rem .36rem; border-radius: 4px; display: inline-block; margin-top: .2rem; } .lab-flag.ok { background: var(--tbg); color: var(--ttxt); } .lab-flag.hi { background: var(--rbg); color: var(--rtxt); } .lab-flag.lo { background: var(--gbg); color: var(--gtxt); } .lab-alert { margin: 0 1.5rem 1.2rem; padding: .7rem .95rem; background: var(--warnbg); border: 1px solid var(--warnb); border-radius: var(--radius-sm); font-size: .73rem; color: var(--warnt); display: flex; align-items: center; gap: .58rem; } .lab-alert svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; flex-shrink: 0; } /* Saved lab records */ .lab-record { background: var(--surf2); border: 1px solid var(--rim); border-radius: var(--radius-md); overflow: hidden; margin-bottom: .65rem; } .lab-record-head { display: flex; align-items: center; justify-content: space-between; padding: .65rem 1rem; cursor: pointer; transition: background .15s; } .lab-record-head:hover { background: var(--vbg); } .lab-record-meta { font-size: .73rem; color: var(--head); font-weight: 500; } .lab-record-sub { font-size: .65rem; color: var(--muted); margin-top: .08rem; } .lab-record-body { display: none; padding: .75rem 1rem; border-top: 1px solid var(--rim); background: var(--surf); } .lab-record-body.open { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; } .lab-record-field .lrf-name { font-size: .63rem; color: var(--muted); } .lab-record-field .lrf-val { font-size: .74rem; color: var(--head); font-weight: 500; } .lab-record-field .lrf-val.hi { color: var(--rtxt); } .lab-record-field .lrf-val.lo { color: var(--gtxt); } .lab-record-field .lrf-val.ok { color: var(--ttxt); } .lab-record-actions { display: flex; gap: .4rem; padding: .6rem 1rem; border-top: 1px solid var(--rim); background: var(--surf2); align-items: center; } /* ── Treatment Table ── */ .tx-header, .tx-row { display: grid; grid-template-columns: 1.5fr 1.1fr .75fr .75fr 34px; gap: .58rem; padding: .56rem 1.5rem; align-items: center; } .tx-header { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--surf2); border-bottom: 1px solid var(--rim); } .tx-row { border-bottom: 1px solid var(--rim); } .tx-row:last-child { border-bottom: none; } .tx-input { width: 100%; padding: .38rem .6rem; background: var(--inp); border: 1px solid var(--inpb); border-radius: 7px; font-size: .76rem; color: var(--head); outline: none; font-family: 'DM Sans', sans-serif; transition: border-color .18s; } .tx-input:focus { border-color: var(--inpf); background: var(--surf); } .tx-delete { width: 28px; height: 28px; border: 1px solid var(--rim2); background: none; border-radius: 6px; color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: all .18s; } .tx-delete:hover { border-color: var(--redrim); color: var(--red); background: var(--redbg); } .add-row-btn { display: flex; align-items: center; gap: .45rem; padding: .66rem 1.5rem; font-size: .75rem; color: var(--iris); background: none; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: color .18s; } .add-row-btn:hover { color: var(--v2); } .add-icon { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--iris); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; } /* ── Patient Card Selector ── */ .patient-selector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .62rem; } .patient-card { background: var(--surf2); border: 1px solid var(--rim); border-radius: var(--radius-md); padding: .68rem .82rem; cursor: pointer; transition: all .18s; } .patient-card:hover { border-color: var(--vrim); background: var(--vbg); } .patient-card.selected { border-color: var(--v); background: var(--vbg); position: relative; } .patient-card.selected::after { content: '✓'; position: absolute; top: .38rem; right: .55rem; color: var(--iris); font-size: .68rem; font-weight: 600; } .pc-id { font-size: .71rem; font-weight: 500; color: var(--head); } .pc-meta { font-size: .64rem; color: var(--muted); margin-top: .12rem; } .pc-tag { font-size: .61rem; padding: .08rem .35rem; border-radius: 4px; background: var(--vbg); color: var(--iris); border: 1px solid var(--vrim); display: inline-block; margin-top: .22rem; } /* ── Analytics Charts ── */ .an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .chart-card { background: var(--surf); border: 1px solid var(--rim); border-radius: var(--radius-lg); padding: 1.3rem 1.45rem; transition: all .2s; } .chart-title { font-family: 'Cormorant Garamond', serif; font-size: 1.08rem; font-weight: 400; color: var(--head); } .chart-sub { font-size: .68rem; color: var(--muted); margin: .18rem 0 .95rem; } .bar-wrap { display: flex; align-items: flex-end; gap: 5px; height: 125px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; } .bar-body { width: 100%; border-radius: 4px 4px 0 0; min-height: 4px; } .bar-label { font-size: .56rem; color: var(--muted); text-align: center; margin-top: 4px; } .bar-num { font-size: .58rem; color: var(--body); margin-bottom: 3px; } .trend-note { margin-top: .82rem; font-size: .7rem; color: var(--ttxt); display: flex; align-items: center; gap: .38rem; } .trend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); display: inline-block; flex-shrink: 0; } /* ── Messages Layout ── */ .msg-layout { display: grid; grid-template-columns: 265px 1fr; flex: 1; overflow: hidden; min-height: 0; height: 100%; } .msg-list-col { border-right: 1px solid var(--rim); display: flex; flex-direction: column; background: var(--deep); overflow: hidden; } .msg-list-head { padding: .88rem 1.15rem; border-bottom: 1px solid var(--rim); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .msg-list-title { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 400; color: var(--head); } .msg-search-wrap { padding: .5rem .95rem; border-bottom: 1px solid var(--rim); flex-shrink: 0; } .msg-search { width: 100%; padding: .4rem .7rem; background: var(--inp); border: 1px solid var(--inpb); border-radius: 7px; color: var(--head); font-size: .75rem; outline: none; font-family: 'DM Sans', sans-serif; } .msg-search::placeholder { color: var(--muted); } .msg-sec { padding: .6rem 1.15rem .3rem; font-size: .57rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; } .msg-list-items { flex: 1; overflow-y: auto; } .msg-item { padding: .78rem 1.15rem; border-bottom: 1px solid var(--rim); cursor: pointer; transition: background .15s; position: relative; } .msg-item:hover { background: var(--vbg); } .msg-item.active { background: var(--vbg); border-left: 2px solid var(--v); padding-left: calc(1.15rem - 2px); } .msg-item-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .2rem; } .msg-sender { font-size: .77rem; font-weight: 500; color: var(--head); } .msg-time { font-size: .61rem; color: var(--muted); } .msg-preview { font-size: .69rem; color: var(--muted); line-height: 1.36; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 200px; } .msg-tags { display: flex; gap: .26rem; margin-top: .26rem; flex-wrap: wrap; } .msg-tag { font-size: .58rem; padding: .06rem .3rem; border-radius: 4px; background: var(--vbg); color: var(--iris); border: 1px solid var(--vrim); } .msg-tag.ae { background: var(--rbg); color: var(--rtxt); border-color: var(--rrim); } .unread-dot { position: absolute; top: .84rem; right: .9rem; width: 7px; height: 7px; border-radius: 50%; background: var(--v2); } .msg-thread-col { display: flex; flex-direction: column; background: var(--bg); overflow: hidden; } .msg-thread-head { padding: .92rem 1.4rem; border-bottom: 1px solid var(--rim); background: var(--deep); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; flex-shrink: 0; } .msg-thread-name { font-family: 'Cormorant Garamond', serif; font-size: 1.12rem; font-weight: 300; color: var(--head); } .msg-thread-ctx { font-size: .67rem; color: var(--muted); margin-top: .1rem; } .msg-thread-body { flex: 1; overflow-y: auto; padding: 1.4rem; } .msg-bubble { max-width: 70%; margin-bottom: .9rem; } .msg-bubble.me { margin-left: auto; } .msg-bubble-inner { padding: .65rem .92rem; border-radius: 12px; font-size: .79rem; line-height: 1.5; } .msg-bubble:not(.me) .msg-bubble-inner { background: var(--surf); border: 1px solid var(--rim); color: var(--body); border-radius: 4px 12px 12px 12px; } .msg-bubble.me .msg-bubble-inner { background: var(--v); color: #fff; border-radius: 12px 4px 12px 12px; } .msg-bubble-meta { font-size: .61rem; color: var(--muted); margin-top: .2rem; display: flex; gap: .45rem; } .msg-bubble.me .msg-bubble-meta { justify-content: flex-end; } .msg-compose-row { padding: .78rem 1.4rem; border-top: 1px solid var(--rim); background: var(--deep); display: flex; gap: .6rem; align-items: flex-end; flex-shrink: 0; } .msg-compose { flex: 1; padding: .6rem .85rem; background: var(--inp); border: 1px solid var(--inpb); border-radius: 10px; color: var(--head); font-size: .79rem; outline: none; font-family: 'DM Sans', sans-serif; resize: none; min-height: 38px; line-height: 1.5; } .msg-compose::placeholder { color: var(--muted); } .msg-compose:focus { border-color: var(--inpf); background: var(--surf); } .invite-card { background: var(--surf); border: 1px solid var(--rim); border-radius: 11px; padding: 1rem 1.15rem; margin-bottom: .78rem; } .invite-title { font-size: .79rem; font-weight: 500; color: var(--head); margin-bottom: .28rem; } .invite-meta { font-size: .67rem; color: var(--muted); line-height: 1.48; } .invite-actions { display: flex; gap: .45rem; margin-top: .68rem; flex-wrap: wrap; } .se-tag { font-size: .61rem; padding: .08rem .35rem; border-radius: 5px; background: var(--rbg); color: var(--rtxt); border: 1px solid var(--rrim); } /* ── Projects ── */ .proj-shell { display: grid; grid-template-columns: 275px 1fr; gap: 1.4rem; align-items: start; } .proj-list { display: flex; flex-direction: column; gap: .62rem; } .proj-card { background: var(--surf); border: 1px solid var(--rim); border-radius: var(--radius-md); padding: 1rem 1.15rem; cursor: pointer; transition: all .18s; position: relative; } .proj-card:hover { border-color: var(--vrim); background: var(--vbg); } .proj-card.active { border-color: var(--v); background: var(--vbg); } .proj-card.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--v); border-radius: var(--radius-md) 0 0 var(--radius-md); } .proj-name { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 300; color: var(--head); margin-bottom: .2rem; } .proj-key { font-size: .6rem; color: var(--muted); letter-spacing: .08em; margin-bottom: .38rem; } .proj-meta { font-size: .69rem; color: var(--muted); } .proj-status { font-size: .58rem; padding: .08rem .36rem; border-radius: 4px; font-weight: 500; } .proj-status.active { background: var(--tbg); color: var(--ttxt); border: 1px solid var(--trim); } .proj-status.draft { background: var(--gbg); color: var(--gtxt); border: 1px solid var(--grim); } .proj-status.archived { background: var(--surf2); color: var(--muted); border: 1px solid var(--rim); } .proj-editor { background: var(--surf); border: 1px solid var(--rim); border-radius: var(--radius-lg); overflow: hidden; } .proj-editor-head { padding: 1rem 1.4rem; border-bottom: 1px solid var(--rim); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; } .proj-tabs { display: flex; border-bottom: 1px solid var(--rim); padding: 0 1.4rem; background: var(--surf2); flex-wrap: wrap; } .proj-tab { background: none; border: none; font-size: .72rem; color: var(--muted); padding: .56rem .88rem .66rem; cursor: pointer; position: relative; transition: color .18s; font-family: 'DM Sans', sans-serif; } .proj-tab:hover { color: var(--body); } .proj-tab.active { color: var(--iris); font-weight: 500; } .proj-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--v); border-radius: 2px; } .team-row { display: grid; grid-template-columns: 1fr 140px 32px; gap: .55rem; padding: .44rem 1.4rem; border-bottom: 1px solid var(--rim); align-items: center; font-size: .76rem; } .team-row-head { background: var(--surf2); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .info-box { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem 1rem; background: var(--vbg); border: 1px solid var(--vrim); border-radius: var(--radius-sm); margin-bottom: 1.2rem; font-size: .74rem; color: var(--iris); } .info-box svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; flex-shrink: 0; margin-top: .05rem; } /* ── Login page ── */ /* Full-viewport two-column layout, no top bar */ .login-page { display: flex; height: 100vh; overflow: hidden; } /* Left panel — column so brand sits top-left, content centers below */ .login-left { flex: 1; display: flex; flex-direction: column; align-items: center; background: var(--bg); overflow-y: auto; } /* Brand — top-left, overrides the align-items:center on parent */ .login-brand { display: flex; align-items: center; gap: .65rem; font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 400; color: var(--head); letter-spacing: .02em; text-decoration: none; padding: 1.75rem 3rem; flex-shrink: 0; align-self: flex-start; width: 100%; } .login-gem { width: 26px; height: 26px; background: var(--v); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .login-gem svg { width: 12px; height: 12px; } /* Content area — takes remaining height, centers vertically */ .login-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 3rem 3rem; width: 100%; max-width: 520px; } /* Right panel — column so theme toggle top-right, form centers below */ .login-right { width: 520px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--surf); border-left: 1px solid var(--rim); overflow-y: auto; } /* Theme toggle row — first child, flush top-right */ .login-theme-row { display: flex; justify-content: flex-end; padding: 1.75rem 2.4rem .5rem; flex-shrink: 0; } /* Form wrap — centers vertically and horizontally */ .login-form-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 2.4rem 3rem; } /* Narrow inner panels (login, 2fa, reset) vs wide register panel */ .login-panel-narrow { max-width: 360px; width: 100%; } .login-form-eyebrow { font-size: .61rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.4rem; } .login-form-title { font-family: 'Cormorant Garamond', serif; font-size: 2.15rem; font-weight: 300; color: var(--head); margin-bottom: .3rem; } .login-form-sub { font-size: .8rem; color: var(--muted); margin-bottom: 1.85rem; } .login-headline { font-family: 'Cormorant Garamond', serif; font-size: 3.3rem; font-weight: 300; color: var(--head); line-height: 1.05; margin-bottom: 1.15rem; } .login-headline em { font-style: italic; color: var(--iris); } .login-desc { font-size: .87rem; color: var(--body); line-height: 1.68; margin-bottom: 2.4rem; } .login-stats { display: flex; gap: 1.85rem; } .login-stat { border-left: 2px solid var(--rim2); padding-left: .95rem; } .login-stat-num { font-family: 'Cormorant Garamond', serif; font-size: 1.95rem; font-weight: 300; color: var(--head); line-height: 1; } .login-stat-lbl { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .22rem; } .login-field { display: flex; flex-direction: column; gap: .34rem; margin-bottom: .9rem; } .login-field label { font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .login-field input { padding: .66rem .86rem; background: var(--inp); border: 1px solid var(--inpb); border-radius: var(--radius-sm); color: var(--head); font-size: .86rem; outline: none; font-family: 'DM Sans', sans-serif; transition: border-color .18s; width: 100%; } .login-field input::placeholder { color: var(--muted); } .login-field input:focus { border-color: var(--inpf); background: var(--surf); } .login-submit { width: 100%; padding: .8rem; margin-top: .5rem; background: var(--v); border: none; border-radius: var(--radius-sm); color: #fff; font-size: .82rem; font-weight: 500; letter-spacing: .05em; cursor: pointer; transition: background .18s; font-family: 'DM Sans', sans-serif; } .login-submit:hover { background: var(--v2); } .login-links { text-align: center; margin-top: 1.15rem; font-size: .76rem; color: var(--muted); } .login-links a { color: var(--iris); cursor: pointer; } .login-footer { margin-top: 2.3rem; padding-top: 1.4rem; border-top: 1px solid var(--rim); font-size: .67rem; color: var(--muted); line-height: 1.58; } /* ── Alerts / Flash ── */ .alert { padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .82rem; display: flex; align-items: center; gap: .6rem; } .alert-error { background: var(--redbg); color: var(--red); border: 1px solid var(--redrim); } .alert-success { background: var(--tbg); color: var(--ttxt); border: 1px solid var(--trim); } .alert-warn { background: var(--warnbg);color: var(--warnt); border: 1px solid var(--warnb); } .alert-info { background: var(--vbg); color: var(--iris); border: 1px solid var(--vrim); } /* ── Spinner / Loading ── */ .spinner-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(4px); } .spinner { width: 40px; height: 40px; border: 3px solid var(--rim2); border-top-color: var(--v2); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Modal ── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; backdrop-filter: blur(6px); } .modal-box { background: var(--surf); border: 1px solid var(--rim); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); } .modal-header { padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--rim); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 300; color: var(--head); } .modal-close { background: none; border: none; font-size: 1.25rem; color: var(--muted); cursor: pointer; padding: .2rem .4rem; border-radius: 4px; } .modal-close:hover { color: var(--head); background: var(--surf2); } .modal-body { padding: 1.5rem; } .modal-foot { padding: 1rem 1.5rem; border-top: 1px solid var(--rim); display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; } /* ── Toast Notifications ── */ .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; } .toast { background: var(--surf); border: 1px solid var(--rim); border-radius: var(--radius-md); padding: .85rem 1.1rem; font-size: .79rem; color: var(--body); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: .6rem; animation: toast-in .25s ease; max-width: 360px; } .toast.success { border-left: 3px solid var(--teal); } .toast.error { border-left: 3px solid var(--red); } .toast.warn { border-left: 3px solid var(--gold); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ── Utility ── */ .flex-center { display: flex; align-items: center; gap: .65rem; } .flex-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; } .text-muted { color: var(--muted); } .text-head { color: var(--head); } .text-iris { color: var(--iris); } .text-teal { color: var(--ttxt); } .text-rose { color: var(--rtxt); } .text-gold { color: var(--gtxt); } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .hidden { display: none !important; } /* ── Responsive ── */ @media (max-width: 900px) { .sidebar { display: none; } .two-col { grid-template-columns: 1fr; } .stat-grid { grid-template-columns: repeat(2,1fr); } .lab-grid { grid-template-columns: repeat(2,1fr); } .patient-selector-grid { grid-template-columns: 1fr 1fr; } .proj-shell { grid-template-columns: 1fr; } .msg-layout { grid-template-columns: 1fr; } .msg-list-col { max-height: 280px; } } @media (max-width: 600px) { .stat-grid { grid-template-columns: 1fr 1fr; } .fg { grid-template-columns: 1fr; } .login-layout { flex-direction: column; } .login-right { width: 100%; border-left: none; border-top: 1px solid var(--rim); } .topnav { padding: 0 1rem; } .main { padding: 1.25rem; } }