/*
 * Epigene UI — visual layer on top of Sneat/Bootstrap 5.3.
 * Only colours, shapes, spacing, typography and the page shell live here; no
 * template depends on these rules for behaviour. Light is the default, dark is
 * html[data-theme="dark"] (see static/js/epigene-ui.js).
 *
 * Most rules are prefixed with `html` so they win over Sneat and over the
 * <style> blocks some partials print later in the page, without !important.
 */

/* ============ tokens ============ */
:root {
  --ep-brand: #11203f; --ep-a: #12afeb; --ep-v: #6d5cff; --ep-p: #1e5bff; --ep-on: #fff;
  --ep-grad: linear-gradient(135deg, #12afeb 0%, #1e5bff 55%, #6d5cff 100%);
  --ep-grad-soft: linear-gradient(135deg, rgba(18, 175, 235, .10), rgba(109, 92, 255, .10));
  --ep-bg: #f2f5fb; --ep-card: #fff; --ep-card-2: #f6f8fd; --ep-glass: rgba(255, 255, 255, .72);
  --ep-tx: #0f1b3d; --ep-mut: #5b6785; --ep-faint: #98a2b8;
  --ep-line: rgba(15, 27, 61, .08); --ep-line2: rgba(15, 27, 61, .16);
  --ep-soft: #e9f0ff; --ep-a-tx: #1747d1; --ep-hover: #f1f4fa;
  --ep-ok: #10b981; --ep-ok-bg: #e5f8f0; --ep-ok-tx: #047857;
  --ep-warn: #f59e0b; --ep-warn-bg: #fff3dd; --ep-warn-tx: #a15c00;
  --ep-bad: #f43f5e; --ep-bad-bg: #ffe8ec; --ep-bad-tx: #be123c;
  --ep-info: #0ea5e9; --ep-info-bg: #e3f5fd; --ep-info-tx: #0369a1;
  --ep-neu-bg: #eef1f7; --ep-neu-tx: #475569;
  --ep-side-bg: var(--ep-card); --ep-side-tx: var(--ep-mut); --ep-side-tx-strong: var(--ep-tx);
  --ep-side-hover: var(--ep-hover); --ep-side-active: var(--ep-soft); --ep-side-active-tx: var(--ep-a-tx);
  --ep-side-icon: var(--ep-card-2); --ep-side-border: var(--ep-line); --ep-side-shadow: var(--ep-sh-1);
  --ep-side-glow: radial-gradient(260px 200px at 0% 0%, rgba(18, 175, 235, .07), transparent 70%), radial-gradient(260px 220px at 100% 100%, rgba(109, 92, 255, .07), transparent 70%);
  --ep-brand-bg: var(--ep-card-2); --ep-brand-shadow: none;
  --ep-sh-1: 0 1px 2px rgba(15, 27, 61, .04), 0 10px 30px -14px rgba(15, 27, 61, .18);
  --ep-sh-2: 0 24px 60px -24px rgba(15, 27, 61, .45);
  --ep-sh-btn: 0 10px 22px -10px rgba(30, 91, 255, .65);
  --ep-ring: 0 0 0 4px rgba(30, 91, 255, .14);
  --ep-r-sm: 10px; --ep-r: 14px; --ep-r-lg: 22px; --ep-r-xl: 28px; --ep-side-w: 256px;
  --ep-aurora: radial-gradient(1100px 620px at -8% -12%, rgba(18, 175, 235, .13), transparent 60%),
               radial-gradient(900px 520px at 108% -6%, rgba(109, 92, 255, .11), transparent 58%),
               radial-gradient(800px 600px at 50% 120%, rgba(16, 185, 129, .06), transparent 60%);

  --bs-body-bg: var(--ep-bg); --bs-body-color: var(--ep-tx); --bs-emphasis-color: var(--ep-tx);
  --bs-heading-color: var(--ep-tx); --bs-secondary-color: var(--ep-mut); --bs-tertiary-bg: var(--ep-hover);
  --bs-border-color: var(--ep-line); --bs-border-color-translucent: var(--ep-line);
  --bs-link-color: var(--ep-a-tx); --bs-link-hover-color: var(--ep-p); --bs-link-color-rgb: 23, 71, 209;
  --bs-primary-rgb: 30, 91, 255; --bs-success-rgb: 16, 185, 129; --bs-warning-rgb: 245, 158, 11;
  --bs-danger-rgb: 244, 63, 94; --bs-info-rgb: 14, 165, 233;
  --bs-border-radius: var(--ep-r); --bs-border-radius-lg: var(--ep-r-lg); --bs-border-radius-sm: var(--ep-r-sm);
  --bs-body-font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --ep-p: #4d7dff; --ep-a-tx: #93b4ff; --ep-soft: rgba(77, 125, 255, .18);
  --ep-bg: #070c1a; --ep-card: #0f172b; --ep-card-2: #131d36; --ep-glass: rgba(15, 23, 43, .74);
  --ep-tx: #e7ecf7; --ep-mut: #9aa6c2; --ep-faint: #6c7896;
  --ep-line: rgba(255, 255, 255, .07); --ep-line2: rgba(255, 255, 255, .14); --ep-hover: rgba(255, 255, 255, .05);
  --ep-ok-bg: rgba(16, 185, 129, .16); --ep-ok-tx: #5ee0b0; --ep-warn-bg: rgba(245, 158, 11, .16); --ep-warn-tx: #fbc55c;
  --ep-bad-bg: rgba(244, 63, 94, .16); --ep-bad-tx: #ff8fa3; --ep-info-bg: rgba(14, 165, 233, .16); --ep-info-tx: #7dd3fc;
  --ep-neu-bg: rgba(255, 255, 255, .07); --ep-neu-tx: #b4bfd6;
  --ep-side-bg: linear-gradient(180deg, #0b1328 0%, #0e1938 100%); --ep-side-tx: rgba(214, 224, 255, .74); --ep-side-tx-strong: #fff;
  --ep-side-hover: rgba(255, 255, 255, .07); --ep-side-active: rgba(255, 255, 255, .11); --ep-side-active-tx: #fff;
  --ep-side-icon: rgba(255, 255, 255, .06); --ep-side-border: rgba(255, 255, 255, .06); --ep-side-shadow: var(--ep-sh-2);
  --ep-side-glow: radial-gradient(260px 200px at 0% 0%, rgba(18, 175, 235, .22), transparent 70%), radial-gradient(260px 220px at 100% 100%, rgba(109, 92, 255, .22), transparent 70%);
  --ep-brand-bg: #fff; --ep-brand-shadow: 0 8px 20px -12px rgba(0, 0, 0, .5);
  --ep-sh-1: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -16px rgba(0, 0, 0, .7);
  --ep-sh-2: 0 24px 60px -20px rgba(0, 0, 0, .8);
  --ep-ring: 0 0 0 4px rgba(77, 125, 255, .22);
  --ep-aurora: radial-gradient(1100px 620px at -8% -12%, rgba(18, 175, 235, .12), transparent 60%),
               radial-gradient(900px 520px at 108% -6%, rgba(109, 92, 255, .14), transparent 58%);
  --bs-link-color-rgb: 147, 180, 255;
}

/* ============ base ============ */
html body { font-family: var(--bs-body-font-family); background: var(--ep-aurora), var(--ep-bg); background-attachment: fixed; color: var(--ep-tx); -webkit-font-smoothing: antialiased; transition: background-color .25s, color .25s; }
html h1, html h2, html h3, html h4, html h5, html h6, html .h1, html .h2, html .h3, html .h4, html .h5, html .h6 { color: var(--ep-tx); letter-spacing: -.02em; font-weight: 700; }
html a { color: var(--ep-a-tx); }
html a:hover { color: var(--ep-p); }
html hr { border-color: var(--ep-line); opacity: 1; }
html .text-muted { color: var(--ep-mut) !important; }
html .form-label, html .col-form-label { color: var(--ep-mut); font-weight: 600; font-size: .78rem; letter-spacing: .01em; }
html .form-text { color: var(--ep-faint); }
html ::selection { background: rgba(30, 91, 255, .22); }
html * { scrollbar-width: thin; scrollbar-color: var(--ep-line2) transparent; }
html ::-webkit-scrollbar { width: 10px; height: 10px; }
html ::-webkit-scrollbar-thumb { background: var(--ep-line2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
html .text-primary { color: var(--ep-a-tx) !important; }
html .text-success { color: var(--ep-ok-tx) !important; }
html .text-danger { color: var(--ep-bad-tx) !important; }
html .text-warning { color: var(--ep-warn-tx) !important; }
html .text-info { color: var(--ep-info-tx) !important; }
html .bg-primary { background: var(--ep-grad) !important; color: #fff; }
html .bg-success { background-color: var(--ep-ok) !important; }
html .bg-danger { background-color: var(--ep-bad) !important; }
html .bg-warning { background-color: var(--ep-warn) !important; }
html .bg-info { background-color: var(--ep-info) !important; }

/* ============ shell: floating sidebar + glass top bar ============ */
html .ep-app .layout-container { display: flex; min-height: 100vh; }
html .ep-app .layout-page { flex: 1 1 auto; min-width: 0; padding: 0 !important; display: flex; flex-direction: column; }
html .ep-app .content-wrapper { flex: 1 1 auto; }
html .ep-app .content-wrapper > .container-fluid { padding: 1.5rem 1.6rem 3rem; max-width: 1600px; }
html .ep-side { position: sticky; top: 14px; height: calc(100vh - 28px); width: var(--ep-side-w); flex: 0 0 var(--ep-side-w); margin: 14px 0 14px 14px; background: var(--ep-side-bg); border-radius: var(--ep-r-xl); display: flex; flex-direction: column; padding: 14px 12px; z-index: 1040; overflow-y: auto; box-shadow: var(--ep-side-shadow); border: 1px solid var(--ep-side-border); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
html .ep-side::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--ep-side-glow); pointer-events: none; }
html .ep-side > * { position: relative; }
html .ep-brand { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 18px; min-height: 58px; text-decoration: none; background: var(--ep-brand-bg); border-radius: 18px; color: var(--ep-brand); box-shadow: var(--ep-brand-shadow); }
html .ep-brand:hover { color: var(--ep-brand); }
html .ep-brand img { max-height: 40px; max-width: 190px; object-fit: contain; }
html .ep-brand svg { width: 30px; height: 36px; flex-shrink: 0; }
html .ep-brand-name { font-weight: 800; font-size: 1.02rem; line-height: 1.15; letter-spacing: -.02em; }
html .ep-nav { display: flex; flex-direction: column; gap: 3px; }
html .ep-nav a { display: flex; align-items: center; gap: 11px; padding: 7px 10px 7px 7px; border-radius: 16px; color: var(--ep-side-tx); text-decoration: none; font-weight: 600; font-size: .88rem; line-height: 1.2; transition: background .15s, color .15s; }
html .ep-nav a i { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; background: var(--ep-side-icon); flex-shrink: 0; transition: background .2s, box-shadow .2s; }
html .ep-nav a:hover { background: var(--ep-side-hover); color: var(--ep-side-tx-strong); }
html .ep-nav a.active { background: var(--ep-side-active); color: var(--ep-side-active-tx); box-shadow: inset 0 0 0 1px var(--ep-side-border); }
html .ep-nav a.active i { background: var(--ep-grad); color: #fff; box-shadow: 0 8px 18px -8px rgba(18, 175, 235, .9); }
html .ep-nav-label { display: block; margin: 14px 10px 4px; font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ep-side-tx); opacity: .7; }
html .ep-side-foot { margin-top: auto; padding-top: 14px; }
html .ep-user { display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 8px !important; border-radius: 18px; background: var(--ep-side-icon); border: 1px solid var(--ep-side-border); color: var(--ep-side-tx-strong) !important; text-decoration: none; }
html .ep-user:hover { background: var(--ep-side-hover); }
html .ep-user img { width: 38px; height: 38px; object-fit: cover; flex-shrink: 0; border-radius: 12px !important; }
html .ep-user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
html .ep-user-info b { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .ep-user-info small { color: var(--ep-side-tx); font-size: .74rem; }
html .ep-user .text-muted { color: var(--ep-side-tx) !important; }
html .ep-side-foot .dropdown-menu { width: 100%; }
html .ep-side-backdrop { display: none; }

html .ep-top { position: sticky; top: 14px; z-index: 1030; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 1.6rem 0; padding: 9px 12px 9px 16px; background: var(--ep-glass); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border: 1px solid var(--ep-line); border-radius: 20px; box-shadow: var(--ep-sh-1); }
html .ep-top-title { font-weight: 800; font-size: 1rem; letter-spacing: -.02em; margin-right: 6px; color: var(--ep-tx); }
html .ep-top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html .ep-icon-btn { width: 40px; height: 40px; border-radius: 14px; border: 1px solid var(--ep-line); background: var(--ep-card); color: var(--ep-mut); display: inline-grid; place-items: center; cursor: pointer; padding: 0; font-size: 1.2rem; transition: transform .15s, color .15s; }
html .ep-icon-btn:hover { color: var(--ep-tx); transform: translateY(-1px); }
html .ep-picker { display: flex; align-items: center; gap: 8px; }
html .ep-picker-label { font-size: .66rem; font-weight: 700; color: var(--ep-faint); text-transform: uppercase; letter-spacing: .08em; }
html .ep-top .btn-light, html .ep-mobile-bar .btn-light { height: 40px; border-radius: 14px; background: var(--ep-card); border: 1px solid var(--ep-line); color: var(--ep-tx); font-weight: 700; box-shadow: none; display: inline-flex; align-items: center; gap: 6px; }
html .ep-top .btn-light:hover, html .ep-mobile-bar .btn-light:hover { border-color: var(--ep-line2); background: var(--ep-card); color: var(--ep-tx); }
html .ep-top .search_select_box { width: min(400px, 42vw) !important; }
html .btn.attendant-alert { border-color: var(--ep-bad) !important; box-shadow: 0 0 0 4px var(--ep-bad-bg) !important; }
html .ep-credits { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--ep-grad-soft); color: var(--ep-a-tx); font-weight: 700; font-size: .8rem; }
html .ep-mobile-bar { padding: 10px 1rem 0; }

@media (max-width: 991.98px) {
  html .ep-side { position: fixed; left: 0; top: 0; transform: translateX(-110%); }
  html body.ep-side-open .ep-side { transform: none; }
  html body.ep-side-open .ep-side-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(7, 12, 26, .5); backdrop-filter: blur(2px); }
  html .ep-top { margin: 10px 10px 0; top: 10px; }
  html .ep-app .content-wrapper > .container-fluid { padding: 1rem .9rem 2.5rem; }
}
@media (min-width: 992px) { html .ep-side-toggle { display: none !important; } }

/* ============ cards ============ */
html .card {
  --bs-card-bg: var(--ep-card); --bs-card-color: var(--ep-tx); --bs-card-title-color: var(--ep-tx);
  --bs-card-border-width: 1px; --bs-card-border-color: var(--ep-line); --bs-card-border-radius: var(--ep-r-lg);
  --bs-card-inner-border-radius: calc(var(--ep-r-lg) - 1px); --bs-card-box-shadow: var(--ep-sh-1);
  --bs-card-cap-bg: transparent; --bs-card-cap-color: var(--ep-tx);
  background-color: var(--ep-card); color: var(--ep-tx); border: 1px solid var(--ep-line); border-radius: var(--ep-r-lg); box-shadow: var(--ep-sh-1);
}
html .card-header { font-weight: 700; letter-spacing: -.01em; }
html .card-title { color: var(--ep-tx); font-weight: 700; }
html .card-hover, html .card.clickable { transition: transform .2s, box-shadow .2s; }
html .card-hover:hover { transform: translateY(-3px); box-shadow: var(--ep-sh-2); }

/* KPI cards on the business dashboard (their own <style> block paints them light) */
html .ep-app .card-patient-info { border: 1px solid var(--ep-line); border-radius: var(--ep-r-lg); box-shadow: var(--ep-sh-1); background: linear-gradient(160deg, var(--ep-card) 45%, rgba(18, 175, 235, .12) 100%); color: var(--ep-tx); padding: 16px 18px; transition: transform .2s, box-shadow .2s; }
html .ep-app .card-patient-info:hover { transform: translateY(-3px); box-shadow: var(--ep-sh-2); }
html .ep-app .card-patient-info .app-logo-brand-cards { opacity: .18; }
html .ep-app .row > div:nth-child(2) > .card-patient-info { background: linear-gradient(160deg, var(--ep-card) 45%, rgba(109, 92, 255, .14) 100%); }
html .ep-app .row > div:nth-child(3) > .card-patient-info { background: linear-gradient(160deg, var(--ep-card) 45%, rgba(16, 185, 129, .14) 100%); }
html .ep-app .row > div:nth-child(4) > .card-patient-info { background: linear-gradient(160deg, var(--ep-card) 45%, rgba(245, 158, 11, .14) 100%); }
html .ep-app .row > div:nth-child(5) > .card-patient-info { background: linear-gradient(160deg, var(--ep-card) 45%, rgba(244, 63, 94, .13) 100%); }

/* ============ buttons: pills ============ */
html .btn { border-radius: 999px; font-weight: 600; letter-spacing: .005em; transition: transform .15s, box-shadow .2s, background-color .2s, filter .2s; }
html .btn:active { transform: scale(.98); }
html .btn-primary, html .btn-primary:disabled, html .btn-primary.disabled { color: #fff; background: var(--ep-grad); border: 0; box-shadow: var(--ep-sh-btn); }
html .btn-primary:hover, html .btn-primary:focus, html .btn-primary:active, html .btn-primary.active, html .btn-primary.show.dropdown-toggle { color: #fff !important; background: var(--ep-grad) !important; border: 0 !important; filter: brightness(1.08) saturate(1.1); box-shadow: 0 14px 28px -12px rgba(30, 91, 255, .75) !important; transform: translateY(-1px); }
html .btn-primary:disabled, html .btn-primary.disabled { box-shadow: none; filter: grayscale(.3); }
html .btn-outline-primary { color: var(--ep-a-tx); border: 1.5px solid var(--ep-line2); background: transparent; }
html .btn-outline-primary:hover, html .btn-outline-primary:focus { color: var(--ep-a-tx) !important; background-color: var(--ep-soft) !important; border-color: transparent !important; box-shadow: none !important; }
html .btn-check:checked + .btn-outline-primary, html .btn-check:active + .btn-outline-primary, html .btn-outline-primary.active, html .btn-outline-primary:active { color: #fff !important; background: var(--ep-grad) !important; border-color: transparent !important; box-shadow: var(--ep-sh-btn) !important; }
html .btn-secondary, html .btn-light { color: var(--ep-tx); background: var(--ep-hover); border: 1px solid var(--ep-line); box-shadow: none; }
html .btn-secondary:hover, html .btn-secondary:focus, html .btn-light:hover { color: var(--ep-tx) !important; background: var(--ep-card-2) !important; border-color: var(--ep-line2) !important; box-shadow: none !important; }
html .btn-outline-secondary { color: var(--ep-mut); border: 1.5px solid var(--ep-line2); }
html .btn-outline-secondary:hover, html .btn-outline-secondary:focus { color: var(--ep-tx) !important; background: var(--ep-hover) !important; border-color: var(--ep-line2) !important; box-shadow: none !important; }
html .btn-outline-danger { color: var(--ep-bad-tx); border: 1.5px solid rgba(244, 63, 94, .35); }
html .btn-outline-danger:hover, html .btn-outline-danger:focus { color: var(--ep-bad-tx) !important; background: var(--ep-bad-bg) !important; border-color: transparent !important; box-shadow: none !important; }
html .btn-danger { background: linear-gradient(135deg, #fb7185, #e11d48); border: 0; box-shadow: 0 10px 22px -10px rgba(225, 29, 72, .6); }
html .btn-success { background: linear-gradient(135deg, #34d399, #059669); border: 0; box-shadow: 0 10px 22px -10px rgba(5, 150, 105, .6); }
html .btn-link { color: var(--ep-a-tx); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ============ badges ============ */
html .badge { font-weight: 700; border-radius: 999px; letter-spacing: .01em; padding: .38em .7em; }
html .bg-label-primary { background-color: var(--ep-soft) !important; color: var(--ep-a-tx) !important; }
html .bg-label-success { background-color: var(--ep-ok-bg) !important; color: var(--ep-ok-tx) !important; }
html .bg-label-warning { background-color: var(--ep-warn-bg) !important; color: var(--ep-warn-tx) !important; }
html .bg-label-danger { background-color: var(--ep-bad-bg) !important; color: var(--ep-bad-tx) !important; }
html .bg-label-info { background-color: var(--ep-info-bg) !important; color: var(--ep-info-tx) !important; }
html .bg-label-secondary, html .bg-label-dark { background-color: var(--ep-neu-bg) !important; color: var(--ep-neu-tx) !important; }

/* ============ forms: soft filled fields ============ */
html .form-control, html .form-select, html .input-group-text {
  background-color: var(--ep-card-2); color: var(--ep-tx); border: 1px solid var(--ep-line); border-radius: var(--ep-r);
}
html .form-control::placeholder { color: var(--ep-faint); }
html .form-control:hover, html .form-select:hover { border-color: var(--ep-line2); }
html .form-control:focus, html .form-select:focus { background-color: var(--ep-card); color: var(--ep-tx); border-color: var(--ep-p); box-shadow: var(--ep-ring); }
html .form-control:disabled, html .form-control[readonly], html .form-select:disabled { background-color: var(--ep-hover); color: var(--ep-mut); }
html .input-group-text { color: var(--ep-mut); }
html .input-group > .form-control:not(:first-child), html .input-group > .input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html .input-group > .form-control:not(:last-child), html .input-group > .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html .form-check-input { background-color: var(--ep-card); border: 1.5px solid var(--ep-line2); }
html .form-check-input[type="checkbox"] { border-radius: 6px; }
html .form-check-input:checked { background-color: var(--ep-p); border-color: var(--ep-p); }
html .form-check-input:focus { border-color: var(--ep-p); box-shadow: var(--ep-ring); }
html .form-switch .form-check-input { border-radius: 999px; }
html .form-switch .form-check-input:checked { background-color: var(--ep-a); border-color: var(--ep-a); }
html .form-range::-webkit-slider-thumb { background: var(--ep-p); }
html .form-range::-moz-range-thumb { background: var(--ep-p); }
html .form-control-color { border-radius: 12px; padding: 4px; }
html[data-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa6c2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }

/* bootstrap-select (header patient search and a few forms) */
html .bootstrap-select > .dropdown-toggle, html .bootstrap-select > .dropdown-toggle.btn-light { background: var(--ep-card) !important; color: var(--ep-tx) !important; border: 1px solid var(--ep-line) !important; border-radius: 14px; height: 40px; box-shadow: none !important; outline: none !important; font-weight: 600; }
html .bootstrap-select > .dropdown-toggle:hover { border-color: var(--ep-line2) !important; }
html .bootstrap-select .dropdown-menu li a { color: var(--ep-tx); border-radius: 10px; }
html .bootstrap-select .dropdown-menu li a:hover, html .bootstrap-select .dropdown-menu li.active a, html .bootstrap-select .dropdown-menu li.selected a { background: var(--ep-hover); color: var(--ep-tx); }
html .bootstrap-select .bs-searchbox { padding: 6px 8px; }
html .bootstrap-select .bs-searchbox .form-control { height: 36px; }
html .bootstrap-select .dropdown-menu .inner { padding: 0 6px; }

/* bootstrap-datepicker */
html .datepicker.dropdown-menu { background: var(--ep-card); color: var(--ep-tx); border: 1px solid var(--ep-line); border-radius: 18px; box-shadow: var(--ep-sh-2); padding: 10px; }
html .datepicker table tr td, html .datepicker table tr th { border-radius: 10px; }
html .datepicker table tr td.day:hover, html .datepicker table tr td span:hover, html .datepicker .datepicker-switch:hover, html .datepicker .prev:hover, html .datepicker .next:hover { background: var(--ep-hover) !important; }
html .datepicker table tr td.active, html .datepicker table tr td.active:hover, html .datepicker table tr td span.active, html .datepicker table tr td span.active:hover { background: var(--ep-grad) !important; color: #fff !important; text-shadow: none; }
html .datepicker table tr td.old, html .datepicker table tr td.new { color: var(--ep-faint); }

/* ============ dropdowns / modals / popovers ============ */
html .dropdown-menu {
  --bs-dropdown-bg: var(--ep-card); --bs-dropdown-color: var(--ep-tx); --bs-dropdown-border-color: var(--ep-line);
  --bs-dropdown-link-color: var(--ep-tx); --bs-dropdown-link-hover-color: var(--ep-tx); --bs-dropdown-link-hover-bg: var(--ep-hover);
  --bs-dropdown-link-active-color: var(--ep-a-tx); --bs-dropdown-link-active-bg: var(--ep-soft); --bs-dropdown-divider-bg: var(--ep-line);
  background: var(--ep-card); border: 1px solid var(--ep-line); border-radius: 18px; box-shadow: var(--ep-sh-2); padding: 6px;
}
html .dropdown-item { border-radius: 12px; color: var(--ep-tx); font-weight: 500; }
html .dropdown-item a { color: inherit; text-decoration: none; display: block; }
html .dropdown-item:hover, html .dropdown-item:focus { background: var(--ep-hover); color: var(--ep-tx); }
html .dropdown-item.active, html .dropdown-item:active { background: var(--ep-soft); color: var(--ep-a-tx); }
html .dropdown-item.disabled, html .dropdown-item:disabled { color: var(--ep-faint); }
html .dropdown-divider { border-color: var(--ep-line); }
html .modal { --bs-modal-bg: var(--ep-card); --bs-modal-color: var(--ep-tx); --bs-modal-border-color: var(--ep-line); --bs-modal-border-radius: var(--ep-r-xl); --bs-modal-header-border-color: var(--ep-line); --bs-modal-footer-border-color: var(--ep-line); }
html .modal-content { background: var(--ep-card); color: var(--ep-tx); border: 1px solid var(--ep-line); border-radius: var(--ep-r-xl); box-shadow: 0 40px 100px -30px rgba(7, 12, 26, .6); }
html .modal-header, html .modal-footer { border-color: var(--ep-line); }
html .modal-backdrop { --bs-backdrop-bg: #070c1a; --bs-backdrop-opacity: .5; }
html .modal-backdrop.show { backdrop-filter: blur(3px); }
html .popover { --bs-popover-bg: var(--ep-card); --bs-popover-body-color: var(--ep-tx); --bs-popover-border-color: var(--ep-line); --bs-popover-box-shadow: var(--ep-sh-2); --bs-popover-header-bg: var(--ep-hover); --bs-popover-header-color: var(--ep-tx); --bs-popover-border-radius: 18px; border: 1px solid var(--ep-line); border-radius: 18px; }
html .tooltip { --bs-tooltip-bg: #0f1b3d; --bs-tooltip-border-radius: 10px; }

/* ============ navigation widgets: tabs become pill segments ============ */
html .nav-tabs { --bs-nav-tabs-border-color: transparent; --bs-nav-tabs-link-active-bg: var(--ep-card); --bs-nav-tabs-link-active-color: var(--ep-tx); display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: var(--ep-card-2); border: 1px solid var(--ep-line); border-radius: 18px; box-shadow: none; margin-bottom: 12px; }
html .nav-tabs .nav-link, html .nav-tabs .nav-item .nav-link { color: var(--ep-mut); background: transparent; border: 0 !important; border-radius: 13px !important; font-weight: 600; padding: 8px 14px; transition: background .15s, color .15s; }
html .nav-tabs .nav-item .nav-link:not(.active) { background-color: transparent; }
html .nav-tabs .nav-link:hover, html .nav-tabs .nav-item .nav-link:hover, html .nav-tabs .nav-item .nav-link:focus { color: var(--ep-tx); background: var(--ep-hover); }
html .nav-tabs .nav-link.active, html .nav-tabs .nav-item.show .nav-link { color: var(--ep-tx); background: var(--ep-card); box-shadow: 0 1px 2px rgba(15, 27, 61, .06), 0 6px 14px -8px rgba(15, 27, 61, .35); }
html .nav-align-top .nav-tabs .nav-link, html .nav-align-top .nav-tabs .nav-item:first-child .nav-link, html .nav-align-top .nav-tabs .nav-item:last-child .nav-link, html .nav-align-top .nav-tabs .nav-item:not(:first-child) .nav-link { border-radius: 13px !important; }
html .nav-align-top .nav-tabs .nav-link.active { background: var(--ep-card); color: var(--ep-tx); }
html .tab-content { background: transparent; box-shadow: none; }
html .nav-align-top .nav-tabs ~ .tab-content, html .nav-align-left .nav-tabs ~ .tab-content, html .nav-align-left > .tab-content { background: var(--ep-card); color: var(--ep-tx); border: 1px solid var(--ep-line); border-radius: var(--ep-r-lg); box-shadow: var(--ep-sh-1); }
html .nav-pills .nav-link { color: var(--ep-mut); border-radius: 14px; font-weight: 600; }
html .nav-pills .nav-link.active, html .nav-pills .show > .nav-link { background: var(--ep-grad); color: #fff; box-shadow: var(--ep-sh-btn); }
html .pagination { --bs-pagination-color: var(--ep-tx); --bs-pagination-bg: var(--ep-card); --bs-pagination-border-color: var(--ep-line); --bs-pagination-hover-bg: var(--ep-hover); --bs-pagination-hover-color: var(--ep-tx); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: var(--ep-faint); gap: 6px; }
html .page-link { border-radius: 999px !important; border: 1px solid var(--ep-line); background: var(--ep-card); color: var(--ep-tx); font-weight: 600; padding: .45rem .95rem; }
html .page-item.active .page-link, html .page-item.active .page-link:hover, html .page-item.active .page-link:focus { background: var(--ep-grad) !important; border-color: transparent !important; color: #fff !important; box-shadow: var(--ep-sh-btn); }
html .list-group { --bs-list-group-color: var(--ep-tx); --bs-list-group-bg: var(--ep-card); --bs-list-group-border-color: var(--ep-line); --bs-list-group-border-radius: var(--ep-r-lg); --bs-list-group-action-color: var(--ep-mut); --bs-list-group-action-hover-color: var(--ep-tx); --bs-list-group-action-hover-bg: var(--ep-hover); --bs-list-group-active-bg: var(--ep-soft); --bs-list-group-active-color: var(--ep-a-tx); --bs-list-group-active-border-color: var(--ep-line); }
html .accordion { --bs-accordion-bg: var(--ep-card); --bs-accordion-color: var(--ep-tx); --bs-accordion-border-color: var(--ep-line); --bs-accordion-btn-color: var(--ep-tx); --bs-accordion-active-bg: var(--ep-hover); --bs-accordion-active-color: var(--ep-tx); }
html .accordion-item { border: 1px solid var(--ep-line) !important; border-radius: 18px !important; overflow: hidden; box-shadow: none !important; }
html .accordion-item + .accordion-item { margin-top: 8px; }
html .progress { background-color: var(--ep-hover); border-radius: 999px; }
html .progress-bar { background: var(--ep-grad); border-radius: 999px; }

/* ============ tables ============ */
html .table { --bs-table-color: var(--ep-tx); --bs-table-bg: transparent; --bs-table-border-color: var(--ep-line); --bs-table-striped-bg: var(--ep-card-2); --bs-table-striped-color: var(--ep-tx); --bs-table-hover-bg: var(--ep-hover); --bs-table-hover-color: var(--ep-tx); --bs-table-active-bg: var(--ep-hover); border-collapse: separate; border-spacing: 0; }
html .table > :not(caption) > * > * { color: var(--ep-tx); border-bottom-color: var(--ep-line); padding: .8rem 1rem; }
html .table thead th, html .table > thead > tr > th { color: var(--ep-faint) !important; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--ep-card-2); border-bottom: 0 !important; }
html .table thead th:first-child { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
html .table thead th:last-child { border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
html .table tbody tr { transition: background-color .15s; }
html .table tbody tr:hover > * { background-color: var(--ep-hover); }
html .table-light, html .table-light > th, html .table-light > td, html thead.table-light th { --bs-table-bg: var(--ep-card-2); background-color: var(--ep-card-2) !important; color: var(--ep-mut) !important; }

/* ============ alerts ============ */
html .alert { border-radius: 18px; border: 0; font-weight: 500; }
html .alert-success { background: var(--ep-ok-bg); color: var(--ep-ok-tx); }
html .alert-danger, html .alert-error { background: var(--ep-bad-bg); color: var(--ep-bad-tx); }
html .alert-warning { background: var(--ep-warn-bg); color: var(--ep-warn-tx); }
html .alert-info, html .alert-primary { background: var(--ep-info-bg); color: var(--ep-info-tx); }
html .alert-secondary, html .alert-light { background: var(--ep-neu-bg); color: var(--ep-neu-tx); }

/* ============ loaders ============ */
html .spinner-border.text-primary { color: var(--ep-a) !important; }

/* Loading screen (#global-loading in base.html): on while a page loads and
   whenever a link or a form leaves it. A DNA helix spins on a glass scrim, with
   a progress sweep along the top edge. Shown with a short delay so quick
   navigations don't blink. */
html .ep-loader { --ep-scrim: rgba(242, 245, 251, .62); position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--ep-scrim); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
html[data-theme="dark"] .ep-loader { --ep-scrim: rgba(7, 12, 26, .66); }
html .ep-loader.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease .12s, visibility 0s; }
html .ep-loader::before { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 3px; border-radius: 0 3px 3px 0; background: var(--ep-grad); box-shadow: 0 0 12px rgba(30, 91, 255, .55); animation: ep-loader-sweep 1.2s cubic-bezier(.65, 0, .35, 1) infinite; }
html .ep-loader-card { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 30px 42px 24px; background: var(--ep-card); border: 1px solid var(--ep-line); border-radius: var(--ep-r-xl); box-shadow: var(--ep-sh-2); transform: translateY(10px) scale(.96); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
html .ep-loader.is-active .ep-loader-card { transform: none; }
html .ep-loader-text { font-size: .9rem; font-weight: 700; letter-spacing: .01em; color: var(--ep-mut); }
/* 12 columns, one full turn of the helix: each column is 1/12 of the cycle late. */
html .ep-helix { display: flex; gap: 6px; height: 52px; }
html .ep-helix span { --ep-lag: calc(var(--i) * -.15s); position: relative; width: 8px; }
html .ep-helix span::before, html .ep-helix span::after { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; animation: ep-helix-dot 1.8s ease-in-out infinite; animation-delay: var(--ep-lag); }
html .ep-helix span::before { background: var(--ep-a); box-shadow: 0 0 10px rgba(18, 175, 235, .45); }
html .ep-helix span::after { background: var(--ep-v); box-shadow: 0 0 10px rgba(109, 92, 255, .45); animation-delay: calc(var(--ep-lag) - .9s); }
html .ep-helix i { position: absolute; top: 4px; bottom: 4px; left: 3px; width: 2px; border-radius: 2px; background: var(--ep-line2); animation: ep-helix-rung 1.8s ease-in-out infinite; animation-delay: var(--ep-lag); }
@keyframes ep-loader-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes ep-helix-dot {
  0%, 100% { transform: translateY(0) scale(.7); opacity: .8; }
  25% { transform: translateY(22px) scale(1); opacity: 1; }
  50% { transform: translateY(44px) scale(.7); opacity: .8; }
  75% { transform: translateY(22px) scale(.4); opacity: .4; }
}
@keyframes ep-helix-rung { 0%, 50%, 100% { transform: scaleY(1); } 25%, 75% { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) {
  html .ep-loader::before { animation-duration: 2.4s; }
  html .ep-helix span::before, html .ep-helix span::after, html .ep-helix i { animation-duration: 3.6s; }
}

/* ============ patient analysis header ============ */
html .ep-patient-head { background: linear-gradient(135deg, rgba(18, 175, 235, .12), rgba(109, 92, 255, .12)), var(--ep-card); border: 1px solid var(--ep-line); overflow: hidden; }
html .ep-patient-head .card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 20px 22px; }
html .ep-patient-head .card-body > .flex-grow-1 { flex: 1 1 360px; min-width: 0; }
html .ep-patient-head .card-body > div:last-child { margin-left: auto; }
html .ep-avatar { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; background: var(--ep-grad); color: #fff; font-weight: 800; font-size: 1.3rem; flex-shrink: 0; box-shadow: var(--ep-sh-btn); }
html .ep-patient-eyebrow { font-size: .68rem; color: var(--ep-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
html .ep-patient-head h4 { font-size: 1.45rem; }
html .ep-patient-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: .78rem; color: var(--ep-mut); }
html .ep-patient-meta span { background: var(--ep-glass); border: 1px solid var(--ep-line); padding: 4px 10px; border-radius: 999px; }
html .ep-patient-meta b { color: var(--ep-tx); font-weight: 600; }
html .ep-seg { background: var(--ep-glass); border: 1px solid var(--ep-line); border-radius: 999px; padding: 4px; gap: 2px; }
html .ep-seg > .btn { border: 0 !important; border-radius: 999px !important; color: var(--ep-mut); background: transparent; font-size: .85rem; padding: 7px 16px; box-shadow: none !important; }
html .ep-seg > .btn-check:checked + .btn { background: var(--ep-grad) !important; color: #fff !important; box-shadow: var(--ep-sh-btn) !important; }

/* ============ patient analysis: exam panels ============ */
/* The three exam panels (biomarkers, DNA, trackers) sit in a col-lg-4 nested in
   a col-md-8, so on a 1440-wide laptop each one is only ~285px. Lab names, gene
   labels and file names are far longer than that, so every row here is built to
   shrink: the label wraps inside the card instead of spilling past its edge and
   the value keeps one line, aligned with the label's first line. */
html #patient_information .charts-wrapper { max-width: 100%; }
html #patient_information canvas { max-width: 100%; }
html #patient_information .card { min-width: 0; }
html #patient_information .list-group-item { min-width: 0; }
/* Buttons here carry whole sentences and are inline-flex, so both the text and
   the count badge need leave to wrap instead of pushing the card open. */
html #patient_information .btn { white-space: normal; flex-wrap: wrap; }
html #patient_information .form-label { overflow-wrap: break-word; }

/* Line under each panel button: "37 mapped biomarkers" plus its help icon. */
html .ep-exam-sub { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 1.5rem; }
html .ep-exam-sub > p { margin: 0; min-width: 0; overflow-wrap: break-word; }
html .ep-exam-sub > span { flex-shrink: 0; }

/* Header of a panel's item list: "BIOMARKER" / "VALUE". */
html .ep-exam-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
html .ep-exam-head > p { margin-bottom: .25rem; min-width: 0; overflow-wrap: break-word; }
html .ep-exam-legend { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* One item of a panel: name on the left, value on the right. Baseline keeps the
   value on the name's first line when the name needs two or three of them.
   A result like "5,39(*) milhoes/mm3" is as wide as the column, so the row
   wraps and the value takes a line of its own rather than crushing the name:
   the 55% basis is what makes the flex line break instead of shrinking it, and
   break-word (not anywhere) keeps the name's minimum at its longest word, so a
   label can never end up one letter per line. */
html .ep-exam-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; min-width: 0; text-decoration: none; color: inherit; }
html .ep-exam-row:hover { color: inherit; }
html .ep-exam-name { flex: 1 1 55%; min-width: 0; margin: 0; overflow-wrap: break-word; }
html .ep-exam-value { flex: 0 1 auto; margin: 0 0 0 auto; max-width: 100%; text-align: right; white-space: nowrap; }

/* A result often wraps under its own name, so without a rule between entries
   the list reads as one block of text and it stops being obvious which value
   belongs to which biomarker. Bootstrap draws that rule itself once the item
   is a direct child of the list, which the markup now guarantees. */
html .ep-exam-list { --bs-list-group-border-color: var(--ep-line); }
/* Sneat pads list items inside a card by 1.5rem a side, which is 48px of a
   ~290px column; trimmed here so the name keeps the width it needs. */
html #patient_information .ep-exam-item { padding: .6rem .875rem; transition: background-color .12s ease; }
html #patient_information .ep-exam-card-head { padding-inline: .875rem; }
html .ep-exam-item:last-child { border-bottom: 0; }
html .ep-exam-item:hover { background-color: var(--ep-hover); }
html .ep-exam-item .ep-exam-name, html .ep-exam-item .ep-exam-value { line-height: 1.35; }

/* These cards pair a title with a scope badge, and the genetic item rows pair a
   label with a risk select. Neither pair fits on one line in a ~285px column,
   so they wrap instead of squeezing the title down to one word per line. */
html #patient_information .card-header { min-width: 0; }
html #patient_information .card-header.d-flex { flex-wrap: wrap; gap: 12px 10px; }
html #patient_information .card-header > * { min-width: 0; }
/* The flex line only breaks on the items' basis, so without a floor the title
   would shrink to its longest word and stay beside the badge, one word a line.
   At 60% the badge drops below it as soon as the two stop fitting. */
html #patient_information .card-header.d-flex > strong { flex: 1 1 60%; }
html #patient_information .card-header.d-flex > .badge { flex: 0 1 auto; white-space: normal; text-align: left; padding: .45em .8em; line-height: 1.35; }
/* Same idea one level down: the switch stays glued to its label, and only the
   risk select drops to a line of its own once the three stop fitting. */
html #patient_information .report-core-row { flex-wrap: wrap; }
html #patient_information .report-core-row > .form-check { flex: 0 0 auto; }
html #patient_information .report-core-row > label { flex: 1 1 55%; min-width: 0; overflow-wrap: break-word; }
html #patient_information .report-core-row > .form-select { flex: 0 0 auto; max-width: 100%; margin-left: auto; }

/* Uploaded exam files: name wraps, the delete button never gets pushed out. */
html .ep-file-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
html .ep-file-row > a { display: flex; align-items: baseline; gap: 6px; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
html .ep-file-row p { margin: 0; min-width: 0; overflow-wrap: break-word; }
html .ep-file-row > button { flex-shrink: 0; }

/* ============ patient analysis: biomarker history ============ */
/* The history tab prints one column per exam date, so the table is as wide as
   the patient has exams. It scrolls inside its own box instead of pushing the
   whole page sideways, and the biomarker column stays pinned and readable. */
html .ep-history-table { margin-bottom: 1rem; }
html .ep-history-table > .table { margin-bottom: 0; }
html .ep-history-table th, html .ep-history-table td { vertical-align: middle; }
html .ep-history-table thead th { white-space: nowrap; text-align: center; }
html .ep-history-table tbody td { white-space: nowrap; text-align: center; }
/* The pinned first column needs an opaque backdrop or the scrolled columns show
   through it; the gradient layers the row's hover tint back on top of it. */
html .ep-history-table th:first-child, html .ep-history-table td:first-child {
  position: sticky; left: 0; z-index: 2; text-align: left; white-space: normal;
  overflow-wrap: break-word; min-width: 240px; background-color: var(--ep-card);
  background-image: linear-gradient(var(--bs-table-bg-state, transparent), var(--bs-table-bg-state, transparent));
}
html .ep-history-date { display: block; font-weight: 600; }
html .ep-history-status { display: block; margin-top: 2px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ============ conversations (static/css/conversations.css) ============ */
html .conv-sidebar, html .conv-search, html .conv-thread-header, html .conv-composer { border-color: var(--ep-line) !important; }
html .conv-search .input-group-text, html .conv-search .form-control { background-color: var(--ep-card-2); border-color: var(--ep-line); }
html .conv-item { border-bottom-color: var(--ep-line); margin: 2px 8px; border-radius: 16px; border-bottom: 0; }
html .conv-item:hover { background-color: var(--ep-hover); }
html .conv-item.active { background: var(--ep-grad-soft); box-shadow: inset 0 0 0 1px rgba(30, 91, 255, .18); }
html .conv-item.needs-attention { background-color: var(--ep-bad-bg); box-shadow: inset 3px 0 0 var(--ep-bad); }
html .conv-item.needs-attention.active { background-color: var(--ep-bad-bg); box-shadow: inset 0 0 0 1.5px var(--ep-bad); }
html .conv-item-name, html .conv-text { color: var(--ep-tx); }
html .conv-item-time, html .conv-item-preview, html .conv-meta, html .conv-empty { color: var(--ep-faint); }
html .conv-pane { background: var(--ep-card-2); }
html .conv-thread-header, html .conv-composer { background-color: var(--ep-card); }
html .conv-day span { background-color: var(--ep-card); border: 1px solid var(--ep-line); color: var(--ep-mut); border-radius: 999px; }
html .conv-bubble { border-radius: 20px; box-shadow: none; }
html .conv-message-in .conv-bubble { background-color: var(--ep-card); border-color: var(--ep-line); border-bottom-left-radius: 6px; }
html .conv-message-out .conv-bubble { background: linear-gradient(135deg, rgba(18, 175, 235, .16), rgba(30, 91, 255, .16)); border-color: transparent; border-bottom-right-radius: 6px; }
html .conv-author { color: var(--ep-a-tx); text-transform: none; letter-spacing: 0; font-size: .72rem; }
html .conv-tag, html .conv-tag-pending { background-color: var(--ep-neu-bg); color: var(--ep-neu-tx); border-radius: 999px; }
html .conv-tag-whatsapp, html .conv-tag-good { background-color: var(--ep-ok-bg); color: var(--ep-ok-tx); }
html .conv-tag-failed, html .conv-tag-bad { background-color: var(--ep-bad-bg); color: var(--ep-bad-tx); }
html .conv-delete-btn { background-color: var(--ep-card); color: var(--ep-faint); border-radius: 10px; }
html .conv-delete-btn:hover { background-color: var(--ep-bad-bg); color: var(--ep-bad-tx); }

/* ============ other partials that print their own light styles ============ */
html .trending-topic-body { background-color: var(--ep-card); border-radius: var(--ep-r-lg); box-shadow: var(--ep-sh-1); border: 1px solid var(--ep-line); }
html .trending-topic-body .ai-badge { background: var(--ep-grad); border-radius: 999px; }
html .trend-topics li { border-bottom-color: var(--ep-line); }
html .trend-topics li .topic-name { color: var(--ep-tx); }
html .trend-topics li .topic-count, html .trend-topics li .topic-description { color: var(--ep-mut); }
html .document-form-item { border-radius: 18px; }
html .search-result-item { border-radius: 16px; border-left-color: var(--ep-p); }

/* ============ auth pages (login, signup, password) ============ */
html .ep-app--guest .authentication-wrapper { min-height: 100vh; }
html .ep-app--guest .authentication-inner .card { border-radius: var(--ep-r-xl); padding: 10px; box-shadow: var(--ep-sh-2); }
html .ep-app--guest .authentication-inner h4 { font-weight: 800; }

/* ============ dark theme: utilities and page styles written for light ============ */
html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-body, html[data-theme="dark"] .text-black, html[data-theme="dark"] .link-dark { color: var(--ep-tx) !important; }
html[data-theme="dark"] .text-secondary { color: var(--ep-mut) !important; }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-body { background-color: var(--ep-card) !important; }
html[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-lighter, html[data-theme="dark"] .bg-body-tertiary { background-color: var(--ep-hover) !important; }
html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end { border-color: var(--ep-line) !important; }
html[data-theme="dark"] .role-patient { background-color: var(--ep-neu-bg); color: var(--ep-neu-tx); }
html[data-theme="dark"] .role-epibot { background-color: var(--ep-ok-bg); color: var(--ep-ok-tx); }
html[data-theme="dark"] .card-patient { background-color: var(--ep-card-2) !important; border-color: var(--ep-line) !important; }
html[data-theme="dark"] .card-epibot { background-color: var(--ep-ok-bg) !important; border-color: var(--ep-line) !important; }
html[data-theme="dark"] .card-outbound { background-color: var(--ep-info-bg) !important; border-color: var(--ep-line) !important; }
html[data-theme="dark"] .left .card::before, html[data-theme="dark"] .left::before, html[data-theme="dark"] .right::before { display: none; }
html[data-theme="dark"] .main-timeline::after, html[data-theme="dark"] .timeline::after { background-color: var(--ep-line2); border-color: var(--ep-line2); }
html[data-theme="dark"] #tagsListContainer li { border-bottom-color: var(--ep-line); }
html[data-theme="dark"] #tagsListContainer li:hover { background-color: var(--ep-hover); }
html[data-theme="dark"] .processing-row { background-color: var(--ep-warn-bg) !important; }
html[data-theme="dark"] .company-tabs-nav .nav-link { border-color: var(--ep-line); }
html[data-theme="dark"] .document-form-item { background-color: var(--ep-card-2); border-color: var(--ep-line); }
html[data-theme="dark"] .document-form-item.has-file { background-color: var(--ep-ok-bg); }
html[data-theme="dark"] .document-form-header, html[data-theme="dark"] .search-result-meta { border-color: var(--ep-line); }
html[data-theme="dark"] .document-form-title { color: var(--ep-tx); }
html[data-theme="dark"] .file-preview, html[data-theme="dark"] .search-result-text { background-color: var(--ep-card-2); border-color: var(--ep-line); }
html[data-theme="dark"] .landings-cms .settings-menu, html[data-theme="dark"] .landings-cms .preview-shell { background: var(--ep-card); border-color: var(--ep-line); }
html[data-theme="dark"] .landings-cms .menu-tabs, html[data-theme="dark"] .landings-cms .preview-toolbar { background: var(--ep-card-2); border-color: var(--ep-line); }
html[data-theme="dark"] .landings-cms .menu-tab { background: var(--ep-card); border-color: var(--ep-line2); color: var(--ep-mut); }
html[data-theme="dark"] .landings-cms .menu-tab.active { background: var(--ep-grad); border-color: transparent; color: #fff; }
html[data-theme="dark"] .landings-cms .plan-block { border-color: var(--ep-line2); }
html[data-theme="dark"] .landings-cms .upload-preview { background: var(--ep-card-2); border-color: var(--ep-line); }
html[data-theme="dark"] .card-header:hover { background-color: transparent !important; }