/* ==========================================================================
   Laboratory: test manager, formats, input pipeline, cancellations, reports
   ========================================================================== */

/* -- shared order/data grid ---------------------------------------------- */

.lab-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--panel-border);
    background: var(--surface);
}

.lab-grid-head, .lab-grid-row { display: flex; }

.lab-grid-head {
    background: linear-gradient(#f2f6fa, #dfe9f1);
    border-bottom: 1px solid var(--panel-border);
    font-size: 12px;
    font-weight: 600;
    color: #2c3e50;
}

.lab-grid-body { flex: 1; overflow-y: auto; max-height: 300px; }

.lab-grid-row { font-size: 12px; border-bottom: 1px solid #eef2f6; cursor: pointer; }
.lab-grid-row:hover { filter: brightness(0.96); }
.lab-grid-row-selected { outline: 2px solid #2f6ea5; outline-offset: -2px; }

.lab-grid-row > div, .lab-grid-head > div {
    padding: 3px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-right: 1px solid #e4ebf1;
}

/* Pipeline status colours - the legend on Lab Order Status names each one. */
.lab-row-indoor { background: #ffc20e; }
.lab-row-specimenreceived { background: #f0aade; }
.lab-row-accessioncomplete { background: #fdf03a; }
.lab-row-reportcomplete { background: #a9d7f7; }
.lab-row-reportverified { background: #a5eb9b; }
.lab-row-ordered { background: transparent; }

/* -- record navigator ---------------------------------------------------- */

.record-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    background: linear-gradient(#f2f6fa, #dfe9f1);
    border-top: 1px solid var(--panel-border);
}

.record-nav-btn {
    width: 22px;
    height: 18px;
    padding: 0;
    background: linear-gradient(#ffffff, #e9eff5);
    border: 1px solid #b9c6d2;
    border-radius: 2px;
    font-size: 9px;
    line-height: 1;
    color: #2c3e50;
}

.record-nav-btn:disabled { opacity: 0.4; }
.record-nav-label { margin: 0 8px; font-size: 11px; color: var(--ink-muted); }

/* -- lab test manager ---------------------------------------------------- */

.labman-top { display: flex; gap: 10px; align-items: stretch; }

.labman-art {
    flex: 0 0 300px;
    border: 1px solid var(--panel-border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.labman-art svg { width: 100%; height: 100%; display: block; }

.labman-form { flex: 1; }
.labman-srno { font-size: 13px; font-weight: 700; color: #2f6ea5; }

.lg-col-section { width: 118px; flex-shrink: 0; }
.lg-col-code { width: 64px; flex-shrink: 0; }
.lg-col-name { flex: 1; min-width: 180px; }
.lg-col-sample { width: 190px; flex-shrink: 0; }
.lg-col-day { width: 110px; flex-shrink: 0; }
.lg-col-type { width: 96px; flex-shrink: 0; }
.lg-col-due { width: 108px; flex-shrink: 0; }
.lg-col-rate { width: 66px; flex-shrink: 0; text-align: right; }
.lg-col-format { width: 58px; flex-shrink: 0; text-align: right; border-right: none !important; }

/* The manager grid needs the room the form leaves it. */
.lab-grid .lab-grid-body { min-height: 120px; }

/* -- lab consumable manager ---------------------------------------------- */

.lc-col-sr { width: 54px; flex-shrink: 0; text-align: right; }
.lab-consumable-hint { font-size: 11px; color: #7a8ca0; }

/* -- test format manager ------------------------------------------------- */

.fmt-picker-panel .field-panel-caption { display: none; }

.fmt-picker { display: flex; align-items: flex-end; gap: 14px; }
.fmt-picker-field { display: flex; flex-direction: column; gap: 3px; }
.fmt-picker-field-grow { flex: 1; }
.fmt-picker-label { font-size: 12px; color: #7a8ca0; }
.fmt-picker-code { width: 110px; }
.fmt-picker-name { width: 100%; }

.fmt-body { flex: 1; display: flex; gap: 0; align-items: stretch; min-height: 0; }

.fmt-tabs {
    flex: 0 0 66px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 14px;
}

.fmt-tab {
    padding: 5px 4px;
    background: #eef3f8;
    border: 1px solid var(--panel-border);
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 11px;
    color: #8a97a3;
    text-align: left;
}

.fmt-tab:disabled { opacity: 0.55; }
.fmt-tab-active { background: #fff; color: #14507f; font-weight: 700; opacity: 1 !important; }

.fmt-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--panel-border);
    background: #e8f1f8;
    padding: 8px;
    min-width: 0;
}

.fmt-save-row { display: flex; justify-content: flex-end; }

.fmt-entry-block { display: flex; flex-direction: column; }

.fmt-entry-head, .fmt-entry-row, .fmt-line { display: flex; align-items: center; gap: 6px; }

.fmt-entry-head {
    background: #1e90da;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 6px;
}

.fmt-entry-row { padding: 5px 6px; background: #dcebf7; }
.fmt-line { padding: 3px 6px; border-bottom: 1px solid #d7e2ea; }
.fmt-line:nth-child(even) { background: #f2f8fc; }

.fe-col { display: flex; align-items: center; }
.fe-col input, .fe-col select { width: 100%; }
.fe-col-sub { flex: 0 0 190px; }
.fe-col-name { flex: 1; min-width: 150px; }
.fe-col-gender { flex: 0 0 84px; }
.fe-col-normal { flex: 0 0 220px; }
.fe-col-unit { flex: 0 0 90px; }
.fe-col-add { flex: 0 0 40px; justify-content: center; }

.fmt-normal-pair { display: flex; align-items: center; gap: 4px; }
.fmt-normal-pair span { color: #7a8ca0; }

.fmt-add {
    width: 36px;
    padding: 2px 0;
    background: linear-gradient(#eaf7e9, #c9e8c6);
    border: 1px solid #7fae7c;
    border-radius: 4px;
    color: #1f7a3c;
    font-size: 10px;
    line-height: 1.2;
}

.fmt-add:disabled { opacity: 0.45; }

.fmt-lines { flex: 1; overflow-y: auto; max-height: 380px; background: #eef5fa; }

/* -- lab order status ---------------------------------------------------- */

.lab-group-strip {
    padding: 4px 8px;
    background: linear-gradient(#5b87ab, #3f6d94);
    color: #eaf2f8;
    font-size: 12px;
}

.lab-status-body { max-height: 320px; min-height: 200px; }

.lo-col-order { width: 148px; flex-shrink: 0; }
.lo-col-date { width: 96px; flex-shrink: 0; }
.lo-col-time { width: 60px; flex-shrink: 0; }
.lo-col-mr { width: 150px; flex-shrink: 0; }
.lo-col-name { width: 190px; flex-shrink: 0; }
.lo-col-guardian { flex: 1; min-width: 140px; }
.lo-col-contact { width: 170px; flex-shrink: 0; }
.lo-col-age { width: 110px; flex-shrink: 0; }
.lo-col-gender { width: 76px; flex-shrink: 0; }
.lo-col-status { width: 84px; flex-shrink: 0; border-right: none !important; }

.lab-status-lower { display: flex; gap: 10px; align-items: stretch; flex: 1; min-height: 0; }

.lab-legend {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.lab-legend-row { display: flex; align-items: center; justify-content: space-between; padding-right: 30px; }
.lab-legend-title { padding-right: 30px; }

.lab-legend-art { border: 1px solid var(--panel-border); overflow: hidden; }
.lab-legend-art svg { width: 100%; height: auto; display: block; }

.lab-swatch {
    width: 22px;
    height: 16px;
    border: 1px solid #9aa5ad;
    display: inline-block;
}

.lab-swatch-indoor { background: #ffc20e; }
.lab-swatch-specimen { background: #f0aade; }
.lab-swatch-accession { background: #fdf03a; }
.lab-swatch-report { background: #a9d7f7; }
.lab-swatch-verified { background: #a5eb9b; }

/* -- MainView panel ------------------------------------------------------ */

.lab-mainview {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--panel-border);
    background: var(--surface);
    min-width: 0;
}

.lab-mainview-title {
    padding: 3px 8px;
    background: linear-gradient(#5b9bd5, #3a7cba);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.lab-mainview-head, .lab-mainview-row { display: flex; }

/* Header and rows live in ONE scroll container (header sticky), so the scrollbar can never
   push the rows out of line with the headings. */
.lab-mainview-scroll { flex: 1; overflow-y: auto; min-height: 120px; }

.lab-mainview-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(#f2f6fa, #dfe9f1);
    border-bottom: 1px solid var(--panel-border);
    font-size: 12px;
    font-weight: 600;
}

.lab-mainview-row { font-size: 12px; border-bottom: 1px solid #eef2f6; }

.lab-mainview-foot {
    height: 14px;
    background: linear-gradient(#5b9bd5, #3a7cba);
}

.mv-col { padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid #eef2f6; }
.mv-col-code { width: 70px; flex-shrink: 0; }
.mv-col-name { flex: 1; min-width: 150px; }
.mv-col-amount { width: 90px; flex-shrink: 0; text-align: right; }
.mv-col-stamp { width: 118px; flex-shrink: 0; }

/* -- phlebotomy / accessioning ------------------------------------------- */

/* The lower band keeps a working height even when the selected order has few tests, so the
   consumables tray always shows its full list. */
.lab-specimen-lower { display: flex; gap: 10px; align-items: stretch; flex: 1; min-height: 340px; }
.lab-specimen-mainview .lab-mainview-scroll { max-height: none; }

.lab-consumables {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--panel-border);
    background: var(--surface);
}

.lab-consumables-title {
    padding: 3px 8px;
    background: linear-gradient(#5b9bd5, #3a7cba);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.lab-consumables-head, .lab-consumables-row { display: flex; }

.lab-consumables-head {
    background: linear-gradient(#f2f6fa, #dfe9f1);
    border-bottom: 1px solid var(--panel-border);
    font-size: 12px;
    font-weight: 600;
}

.lab-consumables-body { flex: 1; overflow-y: auto; min-height: 260px; }

.lab-consumables-row { font-size: 12px; border-bottom: 1px solid #eef2f6; align-items: center; }
.lab-consumables-row:nth-child(odd) { background: #f4f9fd; }

.cons-col { padding: 2px 6px; }
.cons-col-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cons-col-qty { width: 58px; flex-shrink: 0; text-align: right; }

.lab-qty-input {
    width: 46px;
    height: 19px;
    padding: 0 3px;
    border: 1px solid var(--input-border);
    border-radius: 2px;
    font-size: 12px;
    text-align: right;
}

/* -- result input / verification ----------------------------------------- */

.lab-result-grid .lab-grid-body { max-height: 150px; min-height: 90px; }

.lab-result-middle { display: flex; gap: 10px; align-items: stretch; }

.lab-result-art {
    flex: 0 0 285px;
    border: 1px solid var(--panel-border);
    overflow: hidden;
}

.lab-result-art svg { width: 100%; height: 100%; display: block; }

.lab-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--panel-border);
    background: var(--surface);
    min-width: 0;
}

.lab-detail-title {
    padding: 3px 8px;
    background: linear-gradient(#5b9bd5, #3a7cba);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.lab-detail-head, .lab-detail-row { display: flex; }

.lab-detail-head {
    background: linear-gradient(#f2f6fa, #dfe9f1);
    border-bottom: 1px solid var(--panel-border);
    font-size: 12px;
    font-weight: 600;
}

.lab-detail-body { flex: 1; overflow-y: auto; min-height: 84px; max-height: 150px; }

.lab-detail-row { font-size: 12px; border-bottom: 1px solid #eef2f6; cursor: pointer; }
.lab-detail-row:hover { background: #e8f2fa; }
.lab-detail-row-selected { background: #2f6ea5; color: #fff; }

.lab-detail-foot {
    display: flex;
    justify-content: flex-end;
    padding: 3px 10px;
    background: var(--panel-caption);
    border-top: 1px solid var(--panel-border);
    font-size: 12px;
    font-weight: 700;
}

.ld-col { padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid #eef2f6; }
.ld-col-code { width: 90px; flex-shrink: 0; }
.ld-col-name { flex: 1; min-width: 160px; }
.ld-col-amount { width: 110px; flex-shrink: 0; text-align: right; border-right: none; }

.lab-result-banner-row { display: flex; align-items: center; gap: 8px; }

.lab-result-banner {
    flex: 1;
    padding: 6px 12px;
    background: #7cb342;
    color: #1b3a10;
    font-size: 15px;
    font-weight: 700;
    min-height: 32px;
}

.lab-result-lower { display: flex; flex: 1; min-height: 260px; }

.lab-result-sheet {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--panel-border);
    background: #dcebf7;
    padding: 10px 12px;
    min-width: 0;
}

.lab-result-blank { flex: 1; }

.lab-values { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--panel-border); }

.lab-values-head, .lab-values-row { display: flex; }

.lab-values-head {
    background: linear-gradient(#f2f6fa, #dfe9f1);
    border-bottom: 1px solid var(--panel-border);
    font-size: 12px;
    font-weight: 700;
}

.lab-values-body { overflow-y: auto; max-height: 320px; }

.lab-values-row { font-size: 13px; border-bottom: 1px solid #eef2f6; align-items: center; }

.lab-values-subtitle {
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    background: #f2f8fc;
    border-bottom: 1px solid #eef2f6;
}

.lv-col { padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid #eef2f6; }
.lv-col-name { flex: 1; min-width: 170px; font-weight: 700; }
.lv-col-value { width: 150px; flex-shrink: 0; }
.lv-col-normal { width: 160px; flex-shrink: 0; }
.lv-col-unit { width: 96px; flex-shrink: 0; border-right: none; }

.lab-value-input {
    width: 100%;
    height: 21px;
    padding: 0 5px;
    border: 1px solid #d8c56a;
    border-radius: 2px;
    background: #fdf3b6;
    font-size: 13px;
    font-weight: 700;
    color: #14507f;
    text-align: right;
}

.lab-value-input:focus { outline: none; border-color: var(--input-focus); }

.lab-value-readonly {
    display: block;
    width: 100%;
    font-weight: 700;
    color: #14507f;
    text-align: right;
}

.lab-comments-row { display: flex; align-items: center; gap: 0; }

.lab-comments-label {
    padding: 4px 10px;
    background: #7a1420;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.lab-comments-readonly { flex: 1; padding: 4px 8px; background: #fff; border: 1px solid var(--input-border); font-size: 12px; min-height: 23px; }

/* -- cancellations -------------------------------------------------------- */

.lab-cancel-hero svg { width: 100%; height: 100%; display: block; }

.lab-cancel-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--panel-border);
    background: var(--surface);
}

.lab-cancel-grid .lab-grid-head { background: linear-gradient(#f2f6fa, #dfe9f1); }
.lab-cancel-body { min-height: 190px; max-height: 280px; }

.lc-col { padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid #eef2f6; }
.lc-col-tick { width: 28px; flex-shrink: 0; text-align: center; }
.lc-col-order { width: 132px; flex-shrink: 0; }
.lc-col-mr { width: 88px; flex-shrink: 0; }
.lc-col-name { width: 150px; flex-shrink: 0; }
.lc-col-ref { width: 118px; flex-shrink: 0; }
.lc-col-code { width: 58px; flex-shrink: 0; }
.lc-col-desc { flex: 1; min-width: 130px; }
.lc-col-amount { width: 70px; flex-shrink: 0; text-align: right; }
.lc-col-entry { width: 118px; flex-shrink: 0; }
.lc-col-refund { width: 84px; flex-shrink: 0; border-right: none; }
.lc-col-status { width: 92px; flex-shrink: 0; border-right: none; padding: 1px 3px; }

.lab-cancel-status {
    display: block;
    padding: 2px 4px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.lab-cancel-status-pending { background: #f4837d; color: #5c0f0a; }
.lab-cancel-status-verified { background: #fdf03a; color: #5c4d0a; }
.lab-cancel-status-approved { background: #a5eb9b; color: #1b4d13; }

.lab-cancel-lower { display: flex; gap: 10px; align-items: stretch; }
.lab-cancel-detail { flex: 1; }

.lab-cancel-sign { flex: 1; display: flex; flex-direction: column; gap: 10px; }

.lab-cancel-sign-box {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 3px double var(--panel-border);
    padding-top: 10px;
}

.lab-cancel-sign-label { font-size: 12px; font-weight: 700; color: #7a1420; white-space: nowrap; }

/* -- report printing ------------------------------------------------------ */

.lab-print-body { max-height: 260px; min-height: 160px; }
.lab-print-detail { flex: 0 0 auto; }
.lab-print-detail .lab-detail-body { max-height: 190px; }

.lp-col { padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid #eef2f6; }
.lp-col-code { width: 62px; flex-shrink: 0; }
.lp-col-name { flex: 1; min-width: 150px; }
.lp-col-stamp { width: 118px; flex-shrink: 0; }
.lp-col-report { width: 72px; flex-shrink: 0; text-align: center; border-right: none; }

.lab-report-tick {
    width: 54px;
    height: 18px;
    background: linear-gradient(#8ed07e, #5eb54a);
    border: 1px solid #3f8a30;
    border-radius: 2px;
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.lab-report-tick:hover:not(:disabled) { filter: brightness(1.06); }

.lab-report-tick-off {
    background: linear-gradient(#e8ecef, #cfd6db);
    border-color: #9aa5ad;
    color: #7a858e;
}

/* -- lab CPT printing / duplicate reports -------------------------------- */

.lab-report-art { border: 1px solid var(--panel-border); overflow: hidden; }
.lab-report-art svg { width: 100%; height: auto; display: block; }

.criteria-input { width: 100%; margin: 0 0 4px 22px; max-width: 170px; }

.lab-dup-right { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lab-dup-body { min-height: 220px; max-height: 420px; }

.du-col { padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid #eef2f6; }
.du-col-mr { width: 130px; flex-shrink: 0; }
.du-col-name { flex: 1; min-width: 130px; }
.du-col-contact { width: 110px; flex-shrink: 0; }
.du-col-date { width: 96px; flex-shrink: 0; }
.du-col-loc { width: 46px; flex-shrink: 0; }
.du-col-labno { width: 132px; flex-shrink: 0; }
.du-col-test { flex: 1.2; min-width: 140px; }
.du-col-report { width: 68px; flex-shrink: 0; text-align: center; border-right: none; }