/* ==========================================================================
   In-patient clinical screens: the consultant menu, the operation theatre, the
   ward service notes and the bill sheet the desk edits. Fixed-pixel like the
   rest of the suite so browser zoom scales the layout instead of rearranging it.
   ========================================================================== */

/* ---------------------------------------------------------------- extra grid columns */

.ipd-col-time { width: 84px; }
.ipd-col-loc  { width: 108px; }

.ipd-grid-tall .ipd-body  { max-height: 260px; }
.ipd-grid-short .ipd-body { max-height: 156px; }

.ipd-foot-total {
    text-align: right;
    font-weight: 700;
    background: #eaf4fd;
}

.ipd-foot-io {
    display: flex;
    justify-content: flex-start;
    gap: 4px;
    font-weight: 700;
    background: #eaf4fd;
}

.ipd-foot-io span {
    width: 128px;
    text-align: right;
    padding-right: 6px;
    border-right: 1px solid #cfe0ee;
}

/* Advance and balance read as money the desk is watching, not as plain figures. */
.ipd-col-advance { background: #ffe6d5; }

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

.ipd-info-panel { margin-bottom: 4px; }

.ipd-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}

.ipd-mr-label {
    font-size: 17px;
    font-weight: 700;
    color: #b02020;
    letter-spacing: .3px;
    padding-top: 2px;
}

.ipd-mr-input {
    width: 104px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.ipd-info-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 320px;
    padding-top: 2px;
}

.ipd-info-block-right { margin-left: auto; min-width: 300px; }

.ipd-info-block .order-label {
    display: inline-block;
    width: 118px;
    text-align: right;
    padding-right: 6px;
    font-weight: 600;
    color: #21445e;
}

.ipd-info-room {
    position: absolute;
    right: 0;
    top: -14px;
    font-size: 12px;
    font-weight: 700;
    color: #b02020;
}

/* ---------------------------------------------------------------- the note trail */

.ipd-notes-layout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
}

.ipd-notes-left,
.ipd-notes-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ipd-notes-left { width: 496px; flex: 0 0 496px; }

/* The right pane has a floor. Below it the page scrolls sideways like the rest of the suite
   rather than crushing the pane - a squeezed pane is what pushed the documents table's buttons
   outside their panel on a small window. See the fixed-grid rule in ARCHITECTURE.md. */
.ipd-notes-right { flex: 1 1 auto; min-width: 520px; }

.ipd-trail {
    display: flex;
    flex-direction: column;
    width: 496px;
    flex: 0 0 496px;
    border: 1px solid #7ba7cd;
    background: #fff;
}

.ipd-trail-caption {
    background: linear-gradient(#4f8fc0, #2f6f9f);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    padding: 3px 8px;
}

.ipd-trail-caption:empty { display: none; }

/* A panel used only to group fields carries no caption band. */
.field-panel-caption:empty { display: none; }

.ipd-trail-head,
.ipd-trail-row {
    display: flex;
    align-items: stretch;
    font-size: 12px;
}

.ipd-trail-head {
    background: linear-gradient(#eef5fb, #d8e8f5);
    border-bottom: 1px solid #7ba7cd;
    font-weight: 600;
    scrollbar-gutter: stable;
    overflow-y: scroll;
    scrollbar-width: none;
    /* Never squeezed - see the note on .ipd-head. */
    flex: 0 0 auto;
}

.ipd-trail-head::-webkit-scrollbar { width: 0; }

.ipd-trail-body {
    overflow-y: auto;
    max-height: 300px;
    scrollbar-gutter: stable;
    flex: 1 1 auto;
    min-height: 0;
}

.ipd-trail-row { border-bottom: 1px solid #e3edf5; cursor: pointer; }
.ipd-trail-row:hover { background: #eaf4fd; }

.ipd-trail-row-selected,
.ipd-trail-row-selected:hover { background: #2f6f9f; color: #fff; }

/* The original colour-codes the trail so theatre and consultant entries are found at a glance. */
.ipd-note-operation  { background: #f3a7bd; }
.ipd-note-postop     { background: #fde3a7; }
.ipd-note-consultant { background: #8ef0f5; }
.ipd-note-orders     { background: #b6ecb0; }
.ipd-note-death      { background: #e0c8f0; }

/* ---------------------------------------------------------------- note editors */

.ipd-selected-note {
    height: 132px;
    resize: vertical;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    background: #fff;
}

.ipd-selected-note-tall { height: 220px; }

.ipd-note-body {
    width: 100%;
    resize: vertical;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.ipd-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ipd-radio,
.ipd-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #21445e;
    white-space: nowrap;
}

.ipd-location { width: 96px; }

.ipd-label-red { color: #b02020; font-weight: 700; }

/* The keynote strip: the ward's most recent word, always in view. */
.ipd-keynote { display: flex; align-items: stretch; gap: 6px; }

.ipd-keynote-label {
    width: 86px;
    flex: 0 0 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #4a5764;
    background: #eef3f8;
    border: 1px solid #cfe0ee;
}

.ipd-keynote-box { flex: 1 1 auto; height: 68px; background: #ffe3e3; }

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

.ipd-order-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ipd-order-grow  { flex: 1 1 200px; min-width: 160px; }
.ipd-order-small { width: 108px; }
.ipd-order-open  { width: 180px; }

.ipd-order-add {
    width: 34px;
    height: 30px;
    margin-left: auto;
    border: 1px solid #6d9a4f;
    border-radius: 3px;
    background: linear-gradient(#d6efb8, #a8d47a);
    color: #29500f;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.ipd-order-add:disabled { opacity: .5; cursor: default; }

.ipd-caption-basket { background: linear-gradient(#7fb2dc, #4f8fc0); }

.ipd-two-sign { display: flex; gap: 8px; align-items: flex-start; }
.ipd-two-sign > * { flex: 1 1 0; min-width: 0; }

/* ---------------------------------------------------------------- investigation order */

.ipd-order-layout { display: flex; align-items: flex-start; gap: 8px; }

.ipd-side-tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 128px;
    flex: 0 0 128px;
    padding-top: 6px;
}

.ipd-side-tab {
    text-align: left;
    padding: 5px 8px;
    font-size: 12px;
    color: #21445e;
    background: linear-gradient(#eef5fb, #dae9f6);
    border: 1px solid #a9c8e2;
    border-radius: 3px 0 0 3px;
    cursor: pointer;
}

.ipd-side-tab-active {
    background: linear-gradient(#ffffff, #eaf4fd);
    border-right-color: #fff;
    font-weight: 700;
}

.ipd-order-main { flex: 1 1 auto; min-width: 0; }

.ipd-order-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px;
    background: linear-gradient(#3f8ccb, #1f6cae);
    color: #fff;
}

.ipd-order-bar-title { font-size: 15px; font-weight: 700; }
.ipd-order-bar-tools { display: flex; gap: 6px; }

/* ---------------------------------------------------------------- vitals and balance */

.ipd-vitals-layout { display: flex; align-items: flex-start; gap: 8px; }

.ipd-vitals-picker {
    width: 132px;
    flex: 0 0 132px;
}

.ipd-vitals-picker .field-panel-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ipd-vitals-layout > .ipd-grid { flex: 1 1 auto; min-width: 0; }

.ipd-io-layout { display: flex; align-items: flex-start; gap: 8px; }
.ipd-io-layout > .ipd-grid { width: 560px; flex: 0 0 560px; }
.ipd-io-right { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------- discharge summary */

.ipd-summary-grid { margin-bottom: 6px; }

.ipd-summary-foot { display: flex; gap: 8px; align-items: flex-start; }
.ipd-summary-foot > *:first-child { flex: 1 1 auto; }
.ipd-summary-foot > *:last-child { width: 340px; flex: 0 0 340px; }

.ipd-letter-body { min-height: 300px; }

/* ---------------------------------------------------------------- pre-op consent */

.ipd-consent-box {
    margin: 4px 0 6px 128px;
    border: 1px solid #a9c8e2;
    background: #eaf4fd;
}

.ipd-consent-caption {
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #21445e;
    background: linear-gradient(#dceaf7, #c8dff1);
}

.ipd-consent-row { display: flex; gap: 18px; padding: 5px 8px; }

/* ---------------------------------------------------------------- safety checklist */

.ipd-checklist-heads {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #1d4f91;
    text-align: center;
}

.ipd-checklist-heads > div { flex: 1 1 0; }

.ipd-checklist { display: flex; gap: 8px; align-items: flex-start; }

.ipd-check-col {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid #7ba7cd;
    background: #f4f7fa;
    padding-bottom: 6px;
}

.ipd-check-title {
    padding: 3px 8px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(#4f8fc0, #2f6f9f);
}

.ipd-check-title-sub {
    margin-top: 6px;
    color: #14507f;
    background: linear-gradient(#dceaf7, #c8dff1);
    font-size: 11.5px;
}

.ipd-check-strong { padding: 5px 8px 0; font-weight: 700; color: #1d4f91; white-space: normal; }

.ipd-check-list {
    margin: 2px 0 4px 30px;
    padding: 0;
    list-style: none;
    font-size: 11.5px;
    color: #33475a;
}

.ipd-check-list li::before { content: "- "; }

.ipd-check-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
}

.ipd-check-label {
    flex: 1 1 auto;
    font-size: 11.5px;
    font-weight: 600;
    color: #1d4f91;
    white-space: normal;
}

.ipd-check-small { width: 74px; }
.ipd-check-tiny  { width: 46px; text-align: right; }

.ipd-check-products { flex-wrap: wrap; font-size: 11px; font-weight: 700; }
.ipd-blood-w { color: #b02020; }
.ipd-blood-p { color: #1d4f91; }
.ipd-blood-t { color: #a0521d; }
.ipd-blood-f { color: #6b2fa0; }

.ipd-check-strip {
    margin-top: 6px;
    padding: 3px 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #b02020;
    background: linear-gradient(#f7e0a8, #f0c96f);
}

.ipd-check-banner {
    margin: 8px 8px 0;
    padding: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .5px;
    background: linear-gradient(#3ba55c, #1f7a3f);
}

/* ---------------------------------------------------------------- operation notes */

.ipd-op-grid .entry-row { margin-bottom: 3px; }

.ipd-op-procedures {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.ipd-op-procedures > div { flex: 1 1 0; min-width: 0; }

/* ---------------------------------------------------------------- post-op orders */

.ipd-postop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #21445e;
    margin-bottom: 6px;
}

.ipd-postop-wide { flex: 1 1 100%; }

/* ---------------------------------------------------------------- the bill sheet */

.ipd-caption-sheet {
    margin-top: 6px;
    background: linear-gradient(#dceaf7, #c8dff1);
    color: #14507f;
}

.ipd-sheet {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    border: 1px solid #7ba7cd;
    border-top: none;
    background: #f4f7fa;
    padding: 6px;
}

.ipd-sheet-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
}

.ipd-sheet-col-right { flex: 0 0 430px; gap: 6px; }

.ipd-sheet-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ipd-sheet-label {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    color: #21445e;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ipd-sheet-at { color: #b02020; font-weight: 700; }

.ipd-sheet-amount {
    width: 86px;
    flex: 0 0 86px;
    text-align: right;
    font-size: 12px;
    padding: 2px 5px;
}

/* Three colours, as the reference bill uses them: what the desk types, what a module
   raised, and what the sheet works out for itself. */
.ipd-sheet-desk     { background: #fff6c9; border: 1px solid #d9c98c; }
.ipd-sheet-module   { background: #fdf3cf; border: 1px solid #ddd0a0; display: inline-block; }
.ipd-sheet-computed { background: #b8dcf5; border: 1px solid #7ba7cd; display: inline-block; font-weight: 700; }

.ipd-sheet-name  { width: 168px; flex: 0 0 168px; }
.ipd-sheet-rate  { width: 74px; flex: 0 0 74px; text-align: right; background: #cfe6f8; }
.ipd-sheet-nights{ width: 44px; flex: 0 0 44px; text-align: right; background: #cfe6f8; }
.ipd-sheet-hours { width: 62px; flex: 0 0 62px; }
.ipd-sheet-date  { width: 196px; flex: 0 0 196px; }

.ipd-sheet-drill {
    width: 22px;
    height: 20px;
    flex: 0 0 22px;
    border: 1px solid #a9c8e2;
    border-radius: 3px;
    background: linear-gradient(#f6fbff, #dceaf7);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.ipd-sheet-drill:hover { background: linear-gradient(#eaf4fd, #c8dff1); }

.ipd-sheet-package { gap: 6px; }
.ipd-sheet-package-box { width: 108px; flex: 0 0 108px; background: #cfe6f8; }

/* ---- consultant visit detail ---- */

.ipd-visit-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid #7ba7cd;
    background: #fff;
}

.ipd-visit-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(#4f8fc0, #2f6f9f);
}

.ipd-visit-tools { position: absolute; right: 6px; display: flex; gap: 4px; }

.ipd-visit-add,
.ipd-visit-del {
    width: 20px;
    height: 18px;
    border: none;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.ipd-visit-add { background: #3E9E44; color: #fff; }
.ipd-visit-del { background: #C0392B; color: #fff; }
.ipd-visit-add:disabled,
.ipd-visit-del:disabled { opacity: .45; cursor: default; }

.ipd-visit-head,
.ipd-visit-row {
    display: flex;
    align-items: stretch;
    font-size: 12px;
}

.ipd-visit-head {
    background: linear-gradient(#eef5fb, #d8e8f5);
    border-bottom: 1px solid #7ba7cd;
    font-weight: 600;
}

.ipd-visit-body { min-height: 92px; max-height: 148px; overflow-y: auto; }
.ipd-visit-row { border-bottom: 1px solid #e3edf5; cursor: pointer; }
.ipd-visit-row:hover { background: #eaf4fd; }
.ipd-visit-new { background: #f2fbe9; }
.ipd-visit-new .entry-input { width: 100%; }
.ipd-visit-total { background: #ffd9c6; }

.ipd-visit-foot {
    padding: 2px 8px;
    text-align: right;
    font-weight: 700;
    background: #eaf4fd;
    border-top: 1px solid #7ba7cd;
}

/* ---- the totals block ---- */

.ipd-total-panel {
    border: 1px solid #7ba7cd;
    background: #fff;
}

.ipd-total-panel .ipd-caption { margin: 0; }
.ipd-total-panel .ipd-total-row { padding: 3px 8px; font-size: 15px; }
.ipd-total-tax { background: #fff6c9; padding: 0 6px; }

/* ---- drill-down ---- */

.ipd-drill { display: flex; flex-direction: column; font-size: 12px; }

.ipd-drill-head {
    display: flex;
    font-weight: 600;
    background: linear-gradient(#eef5fb, #d8e8f5);
    border-bottom: 1px solid #7ba7cd;
}

.ipd-drill-head > span { padding: 3px 6px; }

/* ---------------------------------------------------------------- discount screens */

.ipd-discount-layout { display: flex; gap: 8px; align-items: flex-start; }
.ipd-discount-layout > .ipd-grid { flex: 1 1 auto; min-width: 0; }

.ipd-discount-input {
    width: 380px;
    flex: 0 0 380px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---------------------------------------------------------------- print screens */

/* The label sits above its field, as the reference screen carries it, with air between one
   field and the next label - the criteria read as a list of questions, not a stack. */
.ipd-print-label {
    display: block;
    margin: 10px 0 3px;
    font-size: 12px;
    font-weight: 600;
    color: #1d4f91;
}

.ipd-print-label-first { margin-top: 0; }

.ipd-print-preview {
    display: flex;
    flex-direction: column;
    min-height: 520px;
    margin-bottom: 6px;
}

.ipd-print-preview > .report-viewer { flex: 1 1 auto; min-height: 0; }

.ipd-print-search { display: flex; gap: 4px; align-items: center; }
.ipd-print-search .entry-input { flex: 1 1 auto; min-width: 0; }
.ipd-print-stays { width: 100%; }

/* ==========================================================================
   Attached documents - the strip every department files papers through.
   ========================================================================== */

.att-panel { margin-top: 6px; }

.att-input {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #dbe6ef;
    margin-bottom: 4px;
}

.att-input { min-width: 0; }

.att-input input[type="file"] {
    font-size: 12px;
    max-width: 260px;
    min-width: 0;
}

.att-input .entry-input-grow { flex: 1 1 120px; min-width: 90px; }

.att-status { font-size: 12px; font-weight: 600; color: #1d4f91; }

/* A backstop for a genuinely tiny pane: the row scrolls rather than hiding its right-hand end. */
/* The list fits its pane rather than scrolling out of it: a floor width here is what pushed the
   remove button past the panel edge. The title column absorbs the slack and ellipsises; the file
   name and remarks ride on it as a tooltip. */
.att-list { display: flex; flex-direction: column; font-size: 12px; min-width: 0; overflow: hidden; }
.att-head, .att-row { min-width: 0; }
.att-panel .field-panel-body { min-width: 0; overflow-x: hidden; }

.att-head,
.att-row { display: flex; align-items: center; }

.att-head {
    font-weight: 600;
    background: linear-gradient(#eef5fb, #d8e8f5);
    border-bottom: 1px solid #7ba7cd;
}

.att-row { border-bottom: 1px solid #e3edf5; }
.att-row:hover { background: #eaf4fd; }

.att-col {
    padding: 3px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The two text columns are the ones that give way when the panel is narrow. Everything to the
   right of them - size, who, when, and the View/remove buttons - keeps its width, because a
   date clipped to "28-Jul-26 2..." and a remove button pushed past the edge are the two things
   the ward actually needs to reach. */
/* Everything except the buttons is allowed to shrink. A fixed width on the middle columns is
   what pushed View and the remove × outside the panel once the pane got narrow - who attached it
   and when can ellipsise, but the ward must always be able to reach the buttons. */
.att-col-kind  { flex: 0 1 112px; min-width: 44px; }
.att-col-title { flex: 2 1 auto;  min-width: 40px; }
.att-col-size  { flex: 0 1 62px;  min-width: 0; text-align: right; }
.att-col-by    { flex: 0 1 110px; min-width: 0; }
.att-col-on    { flex: 0 1 112px; min-width: 0; }
.att-col-open  { flex: 0 0 74px; display: flex; gap: 4px; align-items: center; justify-content: flex-end; }

.att-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    color: #21445e;
    background: #dceaf7;
    border: 1px solid #a9c8e2;
}

.att-chip-labreport       { background: #d8f0d4; border-color: #8bc487; }
.att-chip-radiologyimage  { background: #e2dcf5; border-color: #a294d8; }
.att-chip-radiologyreport { background: #e2dcf5; border-color: #a294d8; }
.att-chip-ecg             { background: #ffe0cc; border-color: #e0a678; }
.att-chip-consent         { background: #fdf0c4; border-color: #d9c98c; }
.att-chip-outsidereport   { background: #f4dcdc; border-color: #d79a9a; }

.att-open {
    color: #1C74C4;
    font-weight: 600;
    text-decoration: none;
}

.att-open:hover { text-decoration: underline; }

.att-del {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 3px;
    background: #C0392B;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

/* The contact sheet an X-ray list wants: thumbnails that open full size in a new tab. */
.att-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid #dbe6ef;
}

.att-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 116px;
    text-decoration: none;
    color: #21445e;
    font-size: 11px;
}

.att-thumb img {
    width: 112px;
    height: 92px;
    object-fit: cover;
    border: 1px solid #7ba7cd;
    background: #0d1418;
}

.att-thumb span {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-thumb:hover img { border-color: #1C74C4; }

.att-note-stay { font-size: 12px; font-weight: 600; color: #b02020; }

/* The paperclip column on the note trail. */
.nt-col-clip { width: 46px; flex: 0 0 46px; text-align: right; font-size: 11px; }

/* ---------------------------------------------------------------- wider pickers

   entry-select-title is 78px - sized for a salutation. Any list whose captions are words
   ("Daily Consultant Notes", "Radiology Image") needs room, or it reads as "Daily Conse". */

.ipd-select-wide { width: 196px; }
.ipd-select-mid  { width: 148px; }

/* The bill screens' patient search strip. */
.ipd-bill-search { margin-bottom: 4px; }
.ipd-bill-count { font-size: 12px; font-weight: 600; color: #21445e; }

/* ---------------------------------------------------------------- Investigation(s) Detail

   The grid beneath the note trail: what the selected note ordered or carries, and the report to
   open where one has been filed. */

.notes-invest-head,
.notes-invest-row {
    display: flex;
    align-items: center;
    font-size: 12px;
}

.notes-invest-head {
    font-weight: 600;
    background: linear-gradient(#eef5fb, #d8e8f5);
    border-top: 1px solid #7ba7cd;
    border-bottom: 1px solid #7ba7cd;
}

.notes-invest-body { min-height: 84px; max-height: 150px; overflow-y: auto; background: #fff; }
.notes-invest-row { border-bottom: 1px solid #e3edf5; }
.notes-invest-row:hover { background: #eaf4fd; }

.ni-col {
    padding: 3px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ni-col-cpt    { width: 108px; flex: 0 0 108px; }
.ni-col-name   { flex: 1 1 auto; min-width: 100px; }
.ni-col-report { width: 92px; flex: 0 0 92px; text-align: center; }

/* The View button, drawn as the reference draws it - a raised button, not a bare link. */
.notes-invest-view {
    display: inline-block;
    min-width: 62px;
    padding: 1px 8px;
    border: 1px solid #9db6cc;
    border-radius: 3px;
    background: linear-gradient(#ffffff, #dfeaf4);
    color: #14507f;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.notes-invest-view:hover { background: linear-gradient(#eaf4fd, #c8dff1); }

/* A note another module wrote - read here, never edited from here. */
.ipd-note-external { background: #eef1f4; font-style: italic; }

/* ---------------------------------------------------------------- consultant visit grid

   Its columns are sized for the narrow right-hand panel rather than inheriting the wide listing
   widths - a long consultant name was overflowing the panel and pushing Fee and Total out of
   reach behind a scrollbar. */

.ipd-visit-head .ipd-col-consultant,
.ipd-visit-row  .ipd-col-consultant { flex: 1 1 auto; width: auto; min-width: 88px; }

.ipd-visit-head .ipd-col-sr,
.ipd-visit-row  .ipd-col-sr { flex: 0 0 54px; width: 54px; }

.ipd-visit-head .ipd-col-amount,
.ipd-visit-row  .ipd-col-amount { flex: 0 0 80px; width: 80px; }

/* The selected row is dark, so the Total cell drops its own tint and the text turns white with
   it. Leaving the tint on top of the selection is what made the row look washed out. */
.ipd-visit-row.ipd-row-selected .ipd-col,
.ipd-visit-row.ipd-row-selected .ipd-visit-total {
    background: transparent;
    color: #fff;
    font-weight: 600;
}

/* The + and × read as live controls, and as plainly dead when there is nothing to act on. */
.ipd-visit-add:disabled,
.ipd-visit-del:disabled { background: #b9c5d0; opacity: 1; cursor: default; }
.ipd-visit-add:not(:disabled):hover { background: #34a83b; }
.ipd-visit-del:not(:disabled):hover { background: #d8452f; }

/* ---------------------------------------------------------------- consultant visit detail

   Its own columns rather than the listing grid's: the listing's are 450px of fixed width in a
   430px panel, which is what clipped the Total column and put a scrollbar under the grid. Here
   the name absorbs the slack and the three figures keep their width. */

.ipd-visit-head,
.ipd-visit-row { min-width: 0; }

.vd-col {
    padding: 2px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-right: 1px solid #e3edf5;
}

.vd-col-name { flex: 1 1 auto; min-width: 40px; }
.vd-col-num  { flex: 0 1 54px; min-width: 34px; text-align: right; }
.vd-col-amt  { flex: 0 1 76px; min-width: 44px; text-align: right; }
.vd-col-del  { flex: 0 0 26px; text-align: center; border-right: none; }

/* The in-place boxes sit flush in their cell rather than at the input's default width. */
.vd-input {
    width: 100%;
    min-width: 0;
    padding: 1px 4px;
    font-size: 12px;
    text-align: right;
}

.vd-col-name .vd-input { text-align: left; }
.vd-add { padding: 1px 6px; font-size: 11px; }

.ipd-visit-body { overflow-x: hidden; }

/* Re-count visits from the notes. */
.ipd-visit-sync {
    width: 20px;
    height: 18px;
    border: none;
    border-radius: 3px;
    background: #1C74C4;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.ipd-visit-sync:disabled { opacity: .45; cursor: default; }