/* ==========================================================================
   Emergency Department
   The ER clinical screens: the department banner and patient strip they all
   carry, the order and administration grids with their three status colours,
   the vitals input with its pain scale, and the charts on the View screens.
   Widths are fixed, as everywhere else, so zoom scales the layout rather
   than rearranging it.
   ========================================================================== */

/* -- the EMERGENCY ROOM plate beside each caption ------------------------- */

.er-banner {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    margin-right: 10px;
    padding: 3px 8px 3px 4px;
    border: 2px solid #d0021b;
    border-radius: 3px;
    background: #fff;
    color: #d0021b;
}

.er-banner-bars { display: flex; flex-direction: column; gap: 2px; width: 12px; }
.er-banner-bars span { display: block; height: 3px; background: #d0021b; }
.er-banner-bars span:nth-child(2) { width: 80%; }
.er-banner-bars span:nth-child(3) { width: 60%; }

.er-banner-cross { width: 20px; height: 20px; }
.er-banner-cross svg { width: 100%; height: 100%; display: block; }

.er-banner-text {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.5px;
}

/* -- patient information strip ------------------------------------------- */

.er-info-panel { margin-bottom: 6px; }

.er-info { display: flex; align-items: center; gap: 10px; }

.er-mr-label {
    font-size: 17px;
    font-weight: 800;
    color: #b00d0d;
    flex: 0 0 auto;
}

.er-mr-input { width: 130px; flex: 0 0 130px; }

.er-info-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 12px;
    min-width: 0;
}

.er-info-block > div { display: flex; gap: 4px; }
.er-info-block .order-label { width: 96px; flex: 0 0 96px; text-align: right; margin-right: 0; }
.er-info-block .order-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The first block takes the slack so the second sits hard against the beacon. */
.er-info-block:not(.er-info-block-right) { flex: 1; }
.er-info-block-right { flex: 0 0 auto; }
.er-info-block-right .order-label { width: 104px; flex: 0 0 104px; }

.er-beacon { width: 54px; height: 66px; flex: 0 0 54px; }

/* -- signature strip ------------------------------------------------------ */

.er-sign-panel { flex: 0 0 auto; }

.er-sign { display: flex; align-items: center; gap: 10px; }
.er-sign-label { font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.er-sign-field { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.er-sign-input { width: 110px; }

/* -- in-screen tab strip -------------------------------------------------- */

.er-tabs { display: flex; gap: 2px; margin-bottom: 6px; }

.er-tab {
    padding: 4px 14px;
    background: linear-gradient(#f4f8fb, #dde8f2);
    border: 1px solid var(--panel-border);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    font-size: 12px;
    color: #5f7183;
}

.er-tab:hover:not(:disabled) { background: linear-gradient(#ffffff, #e6eff7); }
.er-tab:disabled { opacity: 0.5; }
.er-tab-active { background: #fff; color: #14507f; font-weight: 700; opacity: 1 !important; }

/* -- grids ---------------------------------------------------------------- */

.er-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid #9fb0c0;
    background: var(--surface);
    min-width: 0;
}

.er-band {
    padding: 3px 8px;
    background: linear-gradient(#6ea3cf, #3f74ad);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* Header and body both reserve the scrollbar gutter so rows stay under their
   headings whether or not the body has overflowed. */
.er-grid-head, .er-grid-body { overflow-y: auto; scrollbar-gutter: stable; }

.er-grid-head {
    display: flex;
    overflow-y: hidden;
    background: linear-gradient(#f2f6fa, #d8e4ef);
    border-bottom: 1px solid #9fb0c0;
    font-size: 11px;
    font-weight: 700;
    /* Declaring overflow zeroes a flex item's automatic minimum size; without this a
       screen too short for its content squeezes the headings to half a line. */
    flex: 0 0 auto;
}

.er-grid-body { flex: 1; min-height: 90px; font-size: 11px; }

.er-row { display: flex; border-bottom: 1px solid #e0e7ee; cursor: pointer; }
.er-row:nth-child(even) { background: #fafcfe; }
.er-row:hover { background: #eaf3fa; }
.er-grid-row-selected { background: #1d4f91; color: #fff; }

.er-cell {
    padding: 3px 5px;
    border-right: 1px solid #e0e7ee;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.er-cell-check { width: 32px; flex: none; text-align: center; }
.er-cell-mr { width: 78px; flex: none; }
.er-cell-name { width: 210px; flex: none; }
.er-cell-date { width: 118px; flex: none; }
.er-cell-user { width: 168px; flex: none; }
.er-cell-med { flex: 1.6; min-width: 150px; }
.er-cell-narrow { width: 78px; flex: none; }
.er-cell-mid { width: 108px; flex: none; }
.er-cell-wide { flex: 1; min-width: 120px; }
.er-cell-status { width: 96px; flex: none; }
.er-cell-amount { width: 92px; flex: none; text-align: right; }

/* Status colours. The swatch sits in a stripe down the row's leading edge so
   the row text stays readable and a selected row still shows its status. */
.er-row-discontinued { box-shadow: inset 4px 0 0 #ffd400; }
.er-row-progress { box-shadow: inset 4px 0 0 #e87ddb; }
.er-row-completed { box-shadow: inset 4px 0 0 #8ed24a; }

.er-empty { padding: 14px; font-size: 12px; color: var(--ink-muted); text-align: center; }

/* -- legend --------------------------------------------------------------- */

.er-legend {
    display: flex;
    gap: 46px;
    padding: 5px 14px;
    background: linear-gradient(#f7fafc, #eaf0f5);
    border: 1px solid var(--panel-border);
    border-top: none;
}

.er-legend-item { display: flex; align-items: center; gap: 8px; }

.er-legend-swatch {
    width: 17px;
    height: 17px;
    border: 1px solid #7d8b97;
    flex: 0 0 17px;
}

.er-legend-text { font-size: 12px; font-weight: 700; }

/* -- charts --------------------------------------------------------------- */

.er-chart {
    position: relative;
    border: 1px solid var(--panel-border);
    background: #fff;
    padding: 4px;
    min-height: 250px;
    display: flex;
}

.er-chart svg { width: 100%; height: 100%; min-height: 240px; }

.er-chart-legend {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 7px;
    border: 1px solid #c3ced8;
    background: #fff;
    font-size: 11px;
}

.er-chart-swatch { width: 13px; height: 13px; border: 1px solid #7d8b97; }

/* The vitals view's series picker sits left of its grid. */
.er-series-list { display: flex; flex-direction: column; gap: 2px; }
.er-series-radio { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 2px 0; }
.er-series-panel { flex: 0 0 128px; }

/* -- clock ---------------------------------------------------------------- */

.er-clock-panel { flex: 0 0 210px; }
.er-clock { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.er-clock svg { width: 178px; height: 178px; }
.er-clock-time { font-size: 12px; font-weight: 700; color: #1d4f91; }

/* -- vital signs input ---------------------------------------------------- */

.er-vitals-row { display: flex; gap: 8px; align-items: flex-end; }
.er-vital-field { display: flex; flex-direction: column; gap: 2px; }
.er-vital-label { font-size: 12px; font-weight: 700; color: #1d4f91; }
.er-vital-input { width: 62px; }
.er-vital-bp { display: flex; align-items: center; gap: 3px; }
.er-vital-bp .entry-input { width: 52px; }
.er-vital-oxygen { width: 132px; }

.er-pain-panel { margin-top: 6px; }
.er-pain { display: flex; flex-direction: column; gap: 2px; }

.er-pain-radios, .er-pain-bar, .er-pain-captions, .er-pain-faces { display: flex; }
.er-pain-radios > *, .er-pain-bar > * { flex: 1; }
.er-pain-captions > *, .er-pain-faces > * { flex: 1; }

.er-pain-radio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.er-pain-bar { height: 12px; gap: 2px; margin: 3px 0 5px; }
.er-pain-tick { border-radius: 2px; }

.er-pain-captions { text-align: center; font-size: 12px; font-weight: 700; line-height: 1.15; }
.er-pain-faces { gap: 6px; justify-content: space-between; padding-top: 4px; }

.er-pain-face {
    width: 100%;
    max-width: 78px;
    height: auto;
    margin: 0 auto;
    opacity: 0.55;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.er-pain-face-on { opacity: 1; transform: scale(1.06); }

/* -- ECG strip ------------------------------------------------------------ */

.er-ecg {
    flex: 1;
    min-width: 0;
    border: 1px solid #123;
    background: #050d10;
    overflow: hidden;
}

.er-ecg svg { display: block; width: 100%; height: 84px; }

.er-ecg-trace {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: er-ecg-sweep 4s linear infinite;
}

@keyframes er-ecg-sweep {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .er-ecg-trace { animation: none; stroke-dashoffset: 0; }
}

/* -- screen layouts ------------------------------------------------------- */

.er-screen { display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1; }

.er-split { display: flex; gap: 8px; align-items: stretch; min-height: 0; flex: 1; }
.er-split-left { flex: 1.05; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.er-split-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.er-notes-text { flex: 1; min-height: 120px; resize: vertical; }

.er-field-caption { font-size: 12px; font-weight: 700; color: #1d4f91; margin-bottom: 2px; }

.er-textarea {
    width: 100%;
    min-height: 66px;
    padding: 4px 6px;
    border: 1px solid #9fb0c0;
    background: #fff;
    font: inherit;
    font-size: 12px;
    resize: vertical;
}

.er-textarea:disabled { background: #f2f5f8; color: #5b6b7a; }

.er-two-col { display: flex; gap: 12px; }
.er-two-col > * { flex: 1; min-width: 0; }

/* The admission order's patient panel: banner plate left, patient detail right. */
.er-admit-detail { display: flex; gap: 10px; align-items: stretch; }

.er-admit-plate {
    flex: 0 0 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #d0021b;
    border-radius: 6px;
    background: #fff;
    color: #d0021b;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1.05;
    text-align: center;
    padding: 18px 10px;
}

.er-admit-strip {
    padding: 4px 10px;
    background: #e01b1b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.er-detail-grid { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.er-detail-grid > div { display: flex; gap: 6px; }
.er-detail-grid .order-label { width: 132px; flex: 0 0 132px; }

/* -- order entry strips --------------------------------------------------- */

.er-order-strip { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.er-order-field { display: flex; flex-direction: column; gap: 2px; }
.er-order-field-grow { flex: 1; min-width: 180px; }
.er-order-label { font-size: 12px; color: #1d4f91; font-weight: 700; }

.er-add-btn {
    width: 34px;
    height: 30px;
    background: linear-gradient(#eaf6e4, #b9e0a8);
    border: 1px solid #77b263;
    border-radius: 4px;
    color: #2c6a1c;
    font-size: 16px;
    font-weight: 800;
}

.er-add-btn:hover:not(:disabled) { background: linear-gradient(#f4fcef, #a8d894); }
.er-add-btn:disabled { opacity: 0.45; }

.er-chip {
    padding: 2px 9px;
    background: #fff6bf;
    border: 1px solid #d8c65a;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
}

.er-chip:hover:not(:disabled) { background: #fdf0a0; }

.er-sign-row { display: flex; gap: 8px; align-items: stretch; }
.er-sign-row > * { flex: 1; min-width: 0; }

/* The band carries a chip at its right without pushing its caption off centre. */
.er-band-with-action { position: relative; }
.er-band-with-action .er-chip { position: absolute; right: 6px; top: 1px; }

.er-cancel-all { display: flex; justify-content: center; margin-bottom: 2px; }

/* -- patient search ------------------------------------------------------- */

.er-search-top { display: flex; gap: 8px; align-items: stretch; }
.er-search-left { flex: 1.15; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.er-search-right { flex: 1; min-width: 0; }

.er-search-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.er-search-radio { display: flex; align-items: center; gap: 6px; font-size: 12px; width: 148px; flex: 0 0 148px; }
.er-search-row .entry-input { flex: 1; min-width: 0; }

.er-new-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.er-new-label { width: 148px; flex: 0 0 148px; font-size: 12px; }
.er-new-title { width: 78px; flex: 0 0 78px; }

/* -- register report ------------------------------------------------------ */

.er-register-art {
    height: 150px;
    border: 1px solid var(--panel-border);
    background: linear-gradient(135deg, #dfe9f0, #b9cfdd);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.er-register-art svg { width: 100%; height: 100%; }