{{-- ═══════════════════════════════════════════════════════════════════════
     ENCOUNTER STYLES (CRH brand)
     Scoped to .enc-page — no other CSS is affected.
     Applied to: Outpatient, Dental, ANC encounter pages.
═══════════════════════════════════════════════════════════════════════ --}}
<style>
/* ── Page wrapper ─────────────────────────────────────────────────── */
.enc-page { padding:0; }

/* ── Baseline form control styling for any input inside .enc-page ──
   Applies to raw <input>, <select>, <textarea>. More specific rules
   below (inside tables, fieldboxes, note rows) still win via cascade
   specificity. This stops raw inputs from falling back to the
   browser's oversized defaults. */
.enc-page input[type="text"],
.enc-page input[type="number"],
.enc-page input[type="date"],
.enc-page input[type="time"],
.enc-page input[type="email"],
.enc-page input[type="tel"],
.enc-page input[type="password"],
.enc-page select,
.enc-page textarea {
    font-size:12.5px;
    padding:7px 10px;
    border:1px solid #d4d4d8;
    border-radius:6px;
    background:#fff;
    color:#1f2937;
    font-family:inherit;
    line-height:1.4;
    transition:border-color .12s, box-shadow .12s;
    box-sizing:border-box;
}
.enc-page input[type="text"]:hover,
.enc-page input[type="number"]:hover,
.enc-page input[type="date"]:hover,
.enc-page select:hover,
.enc-page textarea:hover { border-color:#d4a9e8; }
.enc-page input[type="text"]:focus,
.enc-page input[type="number"]:focus,
.enc-page input[type="date"]:focus,
.enc-page input[type="time"]:focus,
.enc-page input[type="email"]:focus,
.enc-page input[type="tel"]:focus,
.enc-page input[type="password"]:focus,
.enc-page select:focus,
.enc-page textarea:focus {
    outline:none;
    border-color:#c026d3;
    box-shadow:0 0 0 3px rgba(192,38,211,.15);
}
.enc-page textarea { resize:vertical; }
.enc-page textarea:not([rows]) { min-height:60px; }
.enc-page input[readonly],
.enc-page input[disabled] {
    background:#f9fafb; color:#6b7280; cursor:not-allowed;
}
.enc-page label { font-size:11px; color:#5c1269; font-weight:600; }

/* ── Key-value list (for info-card sidebars, summary panels) ─────── */
.enc-page .enc-kv-list { display:block; }
.enc-page .enc-kv-row {
    display:flex;
    padding:8px 14px;
    font-size:12.5px;
    border-bottom:1px solid #f3e8f9;
    align-items:center;
}
.enc-page .enc-kv-row:last-child { border-bottom:none; }
.enc-page .enc-kv-row:nth-child(even) { background:#fdfcfe; }
.enc-page .enc-kv-row:hover { background:#faf5fc; }
.enc-page .enc-kv-label {
    color:#6b7280;
    width:130px;
    flex-shrink:0;
    font-weight:500;
    font-size:11.5px;
}
.enc-page .enc-kv-value {
    color:#1f2937;
    font-weight:600;
    flex:1;
    min-width:0;
}

/* ── Form grid separator helpers ─────────────────────────────────── */
.enc-page .enc-form-grid {
    display:grid;
    gap:14px 16px;
}
.enc-page .enc-form-field {
    display:flex;
    flex-direction:column;
    gap:4px;
}
.enc-page .enc-form-field label {
    font-size:10.5px;
    font-weight:700;
    color:#5c1269;
    text-transform:uppercase;
    letter-spacing:.4px;
    margin-bottom:2px;
}
/* Subtle dividers between field groups in a form section body */
.enc-page .enc-section-body > .enc-form-grid + .enc-form-grid,
.enc-page .enc-section-body > .enc-form-grid + div {
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #f3e8f9;
}

/* ── Title bar (light brand-tinted, not heavy gradient) ──────────── */
.enc-page .enc-title-bar {
    background:linear-gradient(180deg,#faf5fc 0%, #f3e8f9 100%);
    border:1px solid #e6d0f3;
    border-left:4px solid #c026d3;
    border-radius:10px 10px 0 0;
    padding:14px 22px;
}
.enc-page .enc-title-bar h1 {
    font-size:17px; font-weight:700; color:#3b1054; margin:0;
    letter-spacing:.3px;
}

/* ── Patient banner ──────────────────────────────────────────────── */
.enc-patient-bar {
    background:#fff;
    border:1px solid #e6d0f3;
    border-top:none;
    padding:12px 22px;
    display:flex; flex-wrap:wrap; gap:24px; align-items:center;
    font-size:12.5px; color:#374151;
    border-radius:0 0 10px 10px;
    box-shadow:0 1px 3px rgba(59,16,84,.04);
}
.enc-patient-bar .pb-item { display:flex; align-items:center; gap:8px; }
.enc-patient-bar .pb-label { color:#6b7280; font-weight:500; font-size:11.5px; }
.enc-patient-bar .pb-value { color:#1f2937; font-weight:700; }
.enc-patient-bar .pb-name {
    font-size:14px; font-weight:700; color:#3b1054;
    padding:4px 10px; background:#f3e8f9; border-radius:6px;
}
.enc-patient-bar .pb-pill {
    background:linear-gradient(135deg,#0ea5e9,#0284c7);
    color:#fff; padding:5px 12px; border-radius:6px;
    font-size:11px; font-weight:600; text-decoration:none;
    display:inline-block; box-shadow:0 1px 3px rgba(14,165,233,.3);
    transition:all .15s;
}
.enc-patient-bar .pb-pill:hover { transform:translateY(-1px); box-shadow:0 3px 6px rgba(14,165,233,.4); color:#fff; }

/* ── Sections (light, airy) ───────────────────────────────────────── */
.enc-page .enc-section {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    margin-bottom:14px;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
    transition:box-shadow .15s, border-color .15s;
    position:relative;
}
.enc-page .enc-section:hover {
    border-color:#e6d0f3;
    box-shadow:0 2px 6px rgba(59,16,84,.05);
}

/* Round the top corners of the first child (section head) so it hugs
   the section border, and round bottom of tables that come last. */
.enc-page .enc-section > :first-child { border-top-left-radius:9px; border-top-right-radius:9px; }
.enc-page .enc-section > :last-child { border-bottom-left-radius:9px; border-bottom-right-radius:9px; }
.enc-page .enc-section > table:last-child tr:last-child td:first-child { border-bottom-left-radius:9px; }
.enc-page .enc-section > table:last-child tr:last-child td:last-child { border-bottom-right-radius:9px; }

.enc-page .enc-section-head {
    background:#faf5fc;
    padding:11px 20px;
    display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid #f3e8f9;
    border-left:3px solid #c026d3;
}
.enc-page .enc-section-head h3 {
    font-size:13.5px; font-weight:700; color:#3b1054; margin:0;
    letter-spacing:.3px;
    display:flex; align-items:center; gap:10px;
}
.enc-page .enc-section-head .enc-section-num {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px;
    background:linear-gradient(135deg,#c026d3,#9b1db0);
    color:#fff;
    border-radius:6px; font-size:11px; font-weight:700;
    box-shadow:0 1px 2px rgba(192,38,211,.3);
}
.enc-page .enc-section-head .enc-head-actions {
    display:flex; gap:8px; align-items:center;
}
.enc-page .enc-section-body { padding:16px 20px; }

/* ── Fieldbox (clearly defined field with floating label) ────────── */
.enc-page .enc-fieldbox {
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:12px 14px 10px;
    background:#fff;
    position:relative;
    transition:border-color .15s, box-shadow .15s;
}
.enc-page .enc-fieldbox:hover { border-color:#d4a9e8; }
.enc-page .enc-fieldbox:focus-within {
    border-color:#c026d3;
    box-shadow:0 0 0 3px rgba(192,38,211,.08);
}
.enc-page .enc-fieldbox-label {
    position:absolute;
    top:-8px; left:12px;
    background:#fff;
    padding:0 7px;
    font-size:10.5px;
    color:#7a178c;
    font-weight:600;
    letter-spacing:.3px;
    text-transform:uppercase;
}
.enc-page .enc-fieldbox-value {
    font-size:13px;
    color:#1f2937;
    font-weight:600;
    padding-top:2px;
    min-height:20px;
}
.enc-page .enc-fieldbox input,
.enc-page .enc-fieldbox select,
.enc-page .enc-fieldbox textarea {
    border:none !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    width:100%;
    font-size:13px !important;
    color:#1f2937 !important;
    font-weight:600 !important;
    outline:none !important;
    box-shadow:none !important;
}
.enc-page .enc-fieldbox textarea { resize:vertical; min-height:20px; }

/* ── Tables (defined rows, subtle zebra, brand hover) ────────────── */
.enc-page .enc-table {
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
    font-size:12.5px;
}
.enc-page .enc-table thead tr {
    background:linear-gradient(180deg,#faf5fc 0%, #f3e8f9 100%);
}
.enc-page .enc-table thead th {
    padding:11px 14px;
    text-align:left;
    font-size:11px;
    font-weight:700;
    color:#5c1269;
    text-transform:uppercase;
    letter-spacing:.4px;
    border-bottom:2px solid #e6d0f3;
    white-space:nowrap;
}
.enc-page .enc-table thead th.enc-th-center { text-align:center; }
.enc-page .enc-table thead th.enc-th-right { text-align:right; }
.enc-page .enc-table tbody td {
    padding:10px 14px;
    font-size:12.5px;
    color:#1f2937;
    border-bottom:1px solid #f3f4f6;
    background:#fff;
}
.enc-page .enc-table tbody td.enc-td-center { text-align:center; }
.enc-page .enc-table tbody td.enc-td-right { text-align:right; }
.enc-page .enc-table tbody tr:nth-child(even) td { background:#fdfcfe; }
.enc-page .enc-table tbody tr:hover td { background:#f9f4fb; }
.enc-page .enc-table tbody td input,
.enc-page .enc-table tbody td select {
    border:1px solid #e5e7eb;
    background:#fff;
    padding:6px 10px;
    font-size:12.5px;
    width:100%;
    border-radius:6px;
    outline:none;
    transition:border-color .12s, box-shadow .12s;
}
.enc-page .enc-table tbody td input:focus,
.enc-page .enc-table tbody td select:focus {
    border-color:#c026d3;
    box-shadow:0 0 0 3px rgba(192,38,211,.1);
}
.enc-page .enc-table tbody td.enc-td-right input { text-align:right; }
.enc-page .enc-table tfoot tr {
    background:linear-gradient(180deg,#faf5fc 0%, #f3e8f9 100%);
}
.enc-page .enc-table tfoot td {
    padding:12px 14px;
    font-size:13px;
    font-weight:700;
    color:#3b1054;
    border-top:2px solid #e6d0f3;
    text-align:right;
}

/* ── Search/Add row (inside tables) ──────────────────────────────── */
.enc-page .enc-search-row td {
    background:#faf5fc !important;
    padding:10px 14px !important;
    border-top:1px solid #e6d0f3;
}
.enc-page .enc-search-row input,
.enc-page .enc-search-row select {
    border:1px solid #d4a9e8 !important;
    background:#fff !important;
    padding:7px 10px !important;
    font-size:12.5px !important;
    border-radius:6px !important;
    transition:border-color .12s, box-shadow .12s !important;
}
.enc-page .enc-search-row input:focus,
.enc-page .enc-search-row select:focus {
    border-color:#c026d3 !important;
    box-shadow:0 0 0 3px rgba(192,38,211,.1) !important;
}

/* ── Delete/void button ──────────────────────────────────────────── */
.enc-page .enc-del-btn {
    background:transparent; border:none; color:#9ca3af; cursor:pointer;
    padding:5px; border-radius:5px; transition:all .12s;
    display:inline-flex; align-items:center; justify-content:center;
}
.enc-page .enc-del-btn:hover { color:#dc2626; background:#fee2e2; }

/* ── Read-only text block (inside subsections) ───────────────────── */
.enc-page .enc-ro-text {
    background:#fff;
    border:1px solid #f3e8f9;
    border-radius:6px;
    padding:10px 12px;
    font-size:12.5px;
    color:#1f2937;
    line-height:1.55;
}

/* ── Clinical notes subsection (tinted card) ─────────────────────── */
.enc-page .enc-subsection {
    background:linear-gradient(180deg,#faf5fc 0%, #fdfcfe 100%);
    border:1px solid #e6d0f3;
    border-radius:10px;
    padding:16px 18px;
    margin-bottom:14px;
}
.enc-page .enc-subsection-title {
    font-size:11.5px;
    font-weight:700;
    color:#5c1269;
    margin-bottom:12px;
    text-transform:uppercase;
    letter-spacing:.4px;
    padding-bottom:8px;
    border-bottom:1px solid #e6d0f3;
}
.enc-page .enc-note-row {
    margin-bottom:10px;
    display:flex;
    align-items:flex-start;
    gap:10px;
}
.enc-page .enc-note-row:last-child { margin-bottom:0; }
.enc-page .enc-note-row .enc-note-label {
    display:inline-block;
    min-width:110px;
    max-width:110px;
    font-size:12px;
    font-weight:700;
    color:#5c1269;
    padding-top:8px;
    flex-shrink:0;
}
.enc-page .enc-note-row .enc-note-value {
    flex:1;
    font-size:12.5px;
    color:#1f2937;
    padding:8px 0;
    white-space:pre-wrap;
}
.enc-page .enc-note-row textarea.enc-note-input,
.enc-page .enc-note-row input.enc-note-input {
    border:1px solid #e5e7eb !important;
    padding:8px 12px !important;
    background:#fff !important;
    font-size:12.5px !important;
    border-radius:7px !important;
    flex:1 !important;
    min-height:42px !important;
    resize:vertical !important;
    outline:none !important;
    box-shadow:none !important;
    color:#1f2937 !important;
    font-weight:400 !important;
    transition:border-color .12s, box-shadow .12s !important;
}
.enc-page .enc-note-row textarea.enc-note-input:focus,
.enc-page .enc-note-row input.enc-note-input:focus {
    border-color:#c026d3 !important;
    box-shadow:0 0 0 3px rgba(192,38,211,.1) !important;
}

/* ── Standalone inputs ───────────────────────────────────────────── */
.enc-page .enc-input {
    width:100%;
    border:1px solid #e5e7eb;
    border-radius:7px;
    padding:8px 12px;
    font-size:12.5px;
    background:#fff;
    color:#1f2937;
    outline:none;
    transition:border-color .12s, box-shadow .12s;
}
.enc-page .enc-input:focus {
    border-color:#c026d3;
    box-shadow:0 0 0 3px rgba(192,38,211,.1);
}
.enc-page .enc-input-label {
    display:block;
    font-size:11px;
    font-weight:600;
    color:#5c1269;
    margin-bottom:5px;
    text-transform:uppercase;
    letter-spacing:.3px;
}

/* ── Footer action row ───────────────────────────────────────────── */
.enc-page .enc-footer-actions {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:14px 20px;
    display:flex; justify-content:space-between; align-items:center;
    margin-top:8px;
    flex-wrap:wrap; gap:10px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
}

/* ── Buttons (brand gradients) ───────────────────────────────────── */
.enc-page .enc-btn-primary {
    background:linear-gradient(135deg,#3b1054 0%, #5c1269 100%);
    color:#fff; border:none; padding:9px 20px;
    border-radius:7px; font-size:12.5px; font-weight:600; cursor:pointer;
    transition:all .15s;
    box-shadow:0 1px 3px rgba(59,16,84,.2);
}
.enc-page .enc-btn-primary:hover {
    background:linear-gradient(135deg,#2d0a3e 0%, #3b1054 100%);
    transform:translateY(-1px);
    box-shadow:0 3px 6px rgba(59,16,84,.3);
}
.enc-page .enc-btn-success {
    background:linear-gradient(135deg,#16a34a 0%, #15803d 100%);
    color:#fff; border:none; padding:9px 20px;
    border-radius:7px; font-size:12.5px; font-weight:600; cursor:pointer;
    transition:all .15s;
    box-shadow:0 1px 3px rgba(22,163,74,.2);
}
.enc-page .enc-btn-success:hover {
    transform:translateY(-1px);
    box-shadow:0 3px 6px rgba(22,163,74,.3);
}
.enc-page .enc-btn-danger {
    background:linear-gradient(135deg,#ef4444 0%, #dc2626 100%);
    color:#fff; border:none; padding:9px 20px;
    border-radius:7px; font-size:12.5px; font-weight:600; cursor:pointer;
    transition:all .15s;
    box-shadow:0 1px 3px rgba(239,68,68,.2);
}
.enc-page .enc-btn-danger:hover {
    transform:translateY(-1px);
    box-shadow:0 3px 6px rgba(239,68,68,.3);
}
.enc-page .enc-btn-cancel {
    background:#f3e8f9; color:#5c1269; border:1px solid #e6d0f3;
    padding:9px 20px; border-radius:7px; font-size:12.5px;
    font-weight:600; cursor:pointer; text-decoration:none;
    display:inline-block; transition:all .15s;
}
.enc-page .enc-btn-cancel:hover { background:#e6d0f3; }
.enc-page .enc-btn-teal {
    background:linear-gradient(135deg,#0ea5e9 0%, #0284c7 100%);
    color:#fff; border:none; padding:6px 12px;
    border-radius:6px; font-size:11.5px; font-weight:600; cursor:pointer;
    display:inline-flex; align-items:center; gap:5px; text-decoration:none;
    transition:all .15s;
    box-shadow:0 1px 2px rgba(14,165,233,.2);
}
.enc-page .enc-btn-teal:hover {
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(14,165,233,.3);
    color:#fff;
}

/* ── Status pills ────────────────────────────────────────────────── */
.enc-page .enc-status-pill {
    display:inline-flex; align-items:center; padding:3px 10px;
    border-radius:12px; font-size:11px; font-weight:600;
    letter-spacing:.2px;
}
.enc-page .enc-status-pill.pill-done { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.enc-page .enc-status-pill.pill-pending { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.enc-page .enc-status-pill.pill-info { background:#f3e8f9; color:#5c1269; border:1px solid #e6d0f3; }
.enc-page .enc-status-pill.pill-danger { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

/* ── Diagnosis chips ─────────────────────────────────────────────── */
.enc-page .enc-dx-chip {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 12px; border-radius:999px;
    font-size:11.5px; font-weight:500; margin:2px 3px 2px 0;
    border:1px solid #e5e7eb; background:#fff; color:#374151;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
    transition:all .12s;
}
.enc-page .enc-dx-chip:hover { border-color:#d4a9e8; background:#faf5fc; }
.enc-page .enc-dx-chip.is-primary {
    background:linear-gradient(135deg,#f3e8f9 0%, #e6d0f3 100%);
    border-color:#c026d3; color:#3b1054; font-weight:600;
}
.enc-page .enc-dx-chip .dx-code {
    font-family:ui-monospace,monospace; font-weight:700;
    background:rgba(59,16,84,.08); padding:2px 6px; border-radius:4px;
}
.enc-page .enc-dx-chip .dx-primary-tag {
    background:linear-gradient(135deg,#3b1054,#5c1269); color:#fff;
    padding:1px 6px; border-radius:10px;
    font-size:9.5px; font-weight:700; letter-spacing:.4px;
}

/* ── Sidebar info card (ANC profile) ─────────────────────────────── */
.enc-page .enc-info-card {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    margin-bottom:14px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    position:relative;
}
.enc-page .enc-info-card > :first-child { border-top-left-radius:9px; border-top-right-radius:9px; }
.enc-page .enc-info-card > :last-child { border-bottom-left-radius:9px; border-bottom-right-radius:9px; }
.enc-page .enc-info-card-head {
    background:#faf5fc;
    padding:10px 16px;
    font-size:12.5px; font-weight:700; color:#3b1054;
    letter-spacing:.3px;
    border-bottom:1px solid #f3e8f9;
    border-left:3px solid #c026d3;
}
.enc-page .enc-info-card-body { padding:14px 16px; }
.enc-page .enc-info-row {
    display:flex; padding:7px 0;
    border-bottom:1px dashed #f3f4f6;
    font-size:12.5px;
}
.enc-page .enc-info-row:last-child { border-bottom:none; }
.enc-page .enc-info-row .enc-info-label {
    width:120px; color:#6b7280; font-weight:600; font-size:11.5px;
}
.enc-page .enc-info-row .enc-info-value {
    flex:1; color:#1f2937; font-weight:600;
}

/* ── ANC visit history cards ─────────────────────────────────────── */
.enc-page .enc-history-card {
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fff;
    padding:14px 16px;
    margin-bottom:12px;
    transition:all .15s;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.enc-page .enc-history-card:hover {
    border-color:#d4a9e8;
    box-shadow:0 2px 6px rgba(59,16,84,.06);
}
.enc-page .enc-history-head {
    display:flex; justify-content:space-between;
    padding-bottom:10px; margin-bottom:10px;
    border-bottom:1px solid #f3f4f6;
}
.enc-page .enc-history-visit {
    font-weight:700; color:#3b1054; font-size:13px;
    display:flex; align-items:center; gap:8px;
}
.enc-page .enc-history-meta { font-size:11.5px; color:#6b7280; }
.enc-page .enc-history-grid {
    display:grid; grid-template-columns:repeat(5, 1fr); gap:8px;
    font-size:12px; margin-bottom:8px;
}
.enc-page .enc-history-grid .hg-cell {
    background:#faf5fc;
    border:1px solid #f3e8f9;
    border-radius:6px;
    padding:6px 8px; text-align:center;
}
.enc-page .enc-history-grid .hg-label {
    font-size:10px; color:#7a178c; font-weight:600;
    display:block; text-transform:uppercase; letter-spacing:.3px;
}
.enc-page .enc-history-grid .hg-value {
    font-size:12.5px; color:#1f2937; font-weight:700;
}
.enc-page .enc-history-note {
    font-size:12px; color:#4b5563; margin-top:6px;
    padding:7px 10px; background:#faf5fc;
    border-left:3px solid #c026d3; border-radius:4px;
}
.enc-page .enc-history-danger {
    font-size:12px; color:#991b1b; font-weight:700; margin-top:6px;
    padding:7px 10px; background:#fef2f2;
    border-left:3px solid #dc2626; border-radius:4px;
}

/* ── Banners ─────────────────────────────────────────────────────── */
.enc-page .enc-readonly-banner {
    background:#f3f4f6; border:1px solid #e5e7eb; border-left:4px solid #6b7280;
    padding:10px 14px; border-radius:7px; margin-bottom:12px;
    font-size:12px; color:#4b5563;
}
.enc-page .enc-allergy-bar {
    background:linear-gradient(90deg,#fef2f2 0%, #fef2f2 60%, #fef7f7 100%);
    border:1px solid #fecaca; border-left:4px solid #dc2626;
    padding:9px 14px; border-radius:7px; margin:0 0 12px;
    font-size:12px; color:#991b1b; font-weight:600;
}

/* ── Legacy class aliases (used by prior-session files) ──────────── */
.enc-page .enc-patient-name { font-size:13.5px; font-weight:700; color:#3b1054; }
.enc-page .enc-note-danger {
    background:#fef2f2; border:1px solid #fecaca; border-left:3px solid #dc2626;
    padding:6px 12px; border-radius:6px; font-size:11.5px; color:#991b1b; font-weight:600;
}
.enc-page .enc-section-footer {
    padding:12px 20px; background:#faf5fc; border-top:1px solid #e6d0f3;
    display:flex; gap:8px; justify-content:flex-end; align-items:center;
}
.enc-page .enc-typeahead-item {
    padding:9px 12px; cursor:pointer; border-bottom:1px solid #f3f4f6;
    display:flex; justify-content:space-between; font-size:12px;
    transition:background .12s;
}
.enc-page .enc-typeahead-item:hover { background:#f3e8f9; }
.enc-page .enc-pill-code {
    font-family:ui-monospace,monospace; color:#5c1269; font-size:11px;
    background:#f3e8f9; padding:2px 6px; border-radius:4px; font-weight:600;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .enc-page .enc-history-grid { grid-template-columns:repeat(3, 1fr); }
    .enc-patient-bar { gap:14px; }
    .enc-page .enc-note-row { flex-direction:column; gap:4px; }
    .enc-page .enc-note-row .enc-note-label { min-width:auto; max-width:none; padding-top:0; }
}
</style>