/*  The referring doctor's portal.

    Its own stylesheet, loaded on top of lab-theme.css, and small on purpose.
    The portal is four screens read by somebody who will never be trained on
    it — most often on a phone, standing up, wanting one answer. So: one column,
    large targets, and nothing that needs explaining.

    Every colour comes from the theme's own variables rather than being picked
    again here, so the portal cannot drift away from the product it belongs to.
    Where a variable might be missing the fallback is spelled out, because this
    stylesheet loads on a page that deliberately does not pull in the whole
    shell.  */

.rp-body {
    margin: 0;
    background: var(--lab-bg, #f4f7fb);
    color: var(--lab-ink, #1f2d3d);
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
}

/* ---------------- top bar ---------------- */

.rp-top {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 18px;
    background: #fff;
    border-bottom: 1px solid var(--lab-line, #dbe3ec);
    position: sticky;
    top: 0;
    z-index: 10;
}

.rp-brand img { height: 34px; display: block; }

.rp-nav { display: flex; gap: 6px; margin-left: 8px; }

.rp-nav a {
    padding: 7px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--lab-ink-soft, #5a6b7f);
    font-weight: 600;
}

.rp-nav a:hover { background: var(--lab-bg, #f4f7fb); }

.rp-nav a.is-here {
    background: var(--lab-primary, #0f766e);
    color: #fff;
}

.rp-who { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.rp-who .nm { font-weight: 600; }
.rp-who .out { color: var(--lab-ink-soft, #5a6b7f); text-decoration: none; }
.rp-who .out:hover { text-decoration: underline; }

/* ---------------- page ---------------- */

.rp-main { max-width: 1200px; margin: 0 auto; padding: 18px; }

.rp-h1 { font-size: 20px; margin: 0 0 14px; }
.rp-h2 { font-size: 16px; margin: 26px 0 10px; }

.rp-foot {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    color: var(--lab-ink-soft, #5a6b7f);
    font-size: 12px;
}

.rp-foot .q { font-style: italic; }

/* ---------------- the three figures ---------------- */

.rp-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.rp-tile {
    background: #fff;
    border: 1px solid var(--lab-line, #dbe3ec);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-tile .k { color: var(--lab-ink-soft, #5a6b7f); font-size: 12px; }
.rp-tile .v { font-size: 22px; font-weight: 700; }
.rp-tile .more { font-size: 12px; margin-top: 2px; }

/*  Money owed is the one figure on the page somebody may need to act on, so it
    is the only one that is coloured. Colouring all five would colour none.  */
.rp-tile.is-due { border-color: var(--lab-warn, #b45309); }
.rp-tile.is-due .v { color: var(--lab-warn, #b45309); }

/* ---------------- filters ---------------- */

.rp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    background: #fff;
    border: 1px solid var(--lab-line, #dbe3ec);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.rp-filters .fld { display: flex; flex-direction: column; gap: 4px; }
.rp-filters .fld.grow { flex: 1 1 240px; }
.rp-filters label { font-size: 12px; color: var(--lab-ink-soft, #5a6b7f); }

.rp-input {
    border: 1px solid var(--lab-line, #dbe3ec);
    border-radius: 8px;
    padding: 9px 11px;
    font: inherit;
    background: #fff;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
}

.rp-input:focus {
    outline: 2px solid var(--lab-primary, #0f766e);
    outline-offset: 1px;
}

/* ---------------- buttons ---------------- */

.rp-btn {
    display: inline-block;
    background: var(--lab-primary, #0f766e);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 9px 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.rp-btn:hover { filter: brightness(1.06); }

.rp-btn.is-plain {
    background: #fff;
    color: var(--lab-ink, #1f2d3d);
    border-color: var(--lab-line, #dbe3ec);
}

.rp-btn.is-small { padding: 5px 11px; font-size: 12px; }

/* ---------------- the table ---------------- */

/*  Scrolls inside its own box rather than pushing the page sideways. Nine
    columns will not fit a phone and the alternative — hiding columns — hides
    the commission, which is half of what they came for.  */
.rp-tablewrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--lab-line, #dbe3ec);
    border-radius: 12px;
}

.rp-table { width: 100%; border-collapse: collapse; min-width: 860px; }

.rp-table th,
.rp-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--lab-line, #dbe3ec);
    text-align: left;
    vertical-align: top;
}

.rp-table th {
    font-size: 12px;
    color: var(--lab-ink-soft, #5a6b7f);
    font-weight: 600;
    white-space: nowrap;
}

.rp-table tbody tr:last-child td { border-bottom: 0; }
.rp-table .num { text-align: right; white-space: nowrap; }
.rp-table .strong { font-weight: 700; }
.rp-table .mono { font-variant-numeric: tabular-nums; }
.rp-table .act { text-align: right; }

.rp-table .nm { display: block; font-weight: 600; }
.rp-table .sub { display: block; font-size: 12px; color: var(--lab-ink-soft, #5a6b7f); }

/*  Test names can run long on a case with eight of them. Clamped rather than
    truncated with an ellipsis on one line, so two or three still read.  */
.rp-table .tests { max-width: 280px; }

/* ---------------- status chip ---------------- */

.rp-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--lab-bg, #f4f7fb);
    color: var(--lab-ink-soft, #5a6b7f);
    border: 1px solid var(--lab-line, #dbe3ec);
}

.rp-chip.is-ready {
    background: #ecfdf5;
    color: #15803d;
    border-color: #a7f3d0;
}

.rp-chip.is-part {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

/* ---------------- messages, paging, empty ---------------- */

.rp-alert {
    background: #fff;
    border: 1px solid var(--lab-line, #dbe3ec);
    border-left: 4px solid var(--lab-primary, #0f766e);
    border-radius: 8px;
    padding: 11px 14px;
    margin-bottom: 14px;
}

.rp-alert.is-bad {
    border-left-color: var(--lab-danger, #b91c1c);
    color: var(--lab-danger, #b91c1c);
}

.rp-note {
    background: #fff;
    border: 1px solid var(--lab-line, #dbe3ec);
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 14px;
    color: var(--lab-ink-soft, #5a6b7f);
    font-size: 13px;
}

.rp-empty {
    background: #fff;
    border: 1px dashed var(--lab-line, #dbe3ec);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    color: var(--lab-ink-soft, #5a6b7f);
}

.rp-paging {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 2px;
    color: var(--lab-ink-soft, #5a6b7f);
}

.rp-paging .pg { margin-left: auto; }

.rp-help { color: var(--lab-ink-soft, #5a6b7f); font-size: 13px; margin-top: 12px; }

/* ---------------- sign-in ---------------- */

.rp-signin {
    max-width: 380px;
    margin: 40px auto;
    background: #fff;
    border: 1px solid var(--lab-line, #dbe3ec);
    border-radius: 14px;
    padding: 26px;
}

/*  The laboratory picker needs more room than a sign-in form: the names are
    real company names and wrapping them mid-word makes them hard to tell
    apart, which is the one thing this screen exists to do.  */
.rp-signin.is-wide { max-width: 520px; }

.rp-labs { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/*  Each laboratory is its own submit button rather than a radio and a Save.
    On a phone that is two taps instead of four.  */
.rp-lab {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--lab-line, #dbe3ec);
    border-radius: 10px;
    padding: 14px 16px;
    font: inherit;
    cursor: pointer;
}

.rp-lab:hover {
    border-color: var(--lab-primary, #0f766e);
    background: var(--lab-bg, #f4f7fb);
}

.rp-lab .nm { display: block; font-weight: 700; font-size: 15px; }
.rp-lab .sub { display: block; font-size: 12px; color: var(--lab-ink-soft, #5a6b7f); margin-top: 2px; }

/*  Whose patients are on screen, in the bar, on every page. A doctor who works
    with four laboratories must never have to guess.  */
.rp-who .lab {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--lab-primary, #0f766e);
}

.rp-signin h1 { font-size: 19px; margin: 0 0 6px; }
.rp-signin .sub { color: var(--lab-ink-soft, #5a6b7f); margin: 0 0 18px; }

.rp-signin label {
    display: block;
    font-size: 12px;
    color: var(--lab-ink-soft, #5a6b7f);
    margin: 12px 0 4px;
}

.rp-signin .rp-btn { width: 100%; margin-top: 18px; }

/* ---------------- phones ---------------- */

@media (max-width: 640px) {
    .rp-top { flex-wrap: wrap; gap: 10px; }
    .rp-who { margin-left: 0; width: 100%; }
    .rp-nav { margin-left: 0; }
    .rp-main { padding: 12px; }
    .rp-tile .v { font-size: 19px; }
}

/* ---------------- report viewer (opens over the list) ----------------

   A report is a whole document, so it is shown in an iframe rather than
   navigated to. Vanilla, no Bootstrap — the markup and the behaviour are in
   _PortalLayout.cshtml, this only dresses it. */

.rp-viewer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* `hidden` on the element is the switch; beat the display:flex above. */
.rp-viewer[hidden] { display: none; }

.rp-viewer-back {
    position: absolute;
    inset: 0;
    background: rgba(10, 23, 48, .55);
}

.rp-viewer-box {
    position: relative;
    width: min(900px, 96vw);
    height: min(92vh, 1300px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .38);
    overflow: hidden;
}

.rp-viewer-x {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    color: #35485f;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
}

.rp-viewer-x:hover { background: #fff; color: #0f1c2e; }

#rpViewerFrame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #eef2f7;
}

/* Full-screen on a phone — a floating box on a small screen is mostly backdrop. */
@media (max-width: 720px) {
    .rp-viewer { padding: 0; }
    .rp-viewer-box { width: 100vw; height: 100vh; border-radius: 0; }
}

/* ---------------- new case (hospital booking) ---------------- */

.rp-h { font-size: 20px; font-weight: 700; margin: 4px 0 6px; color: var(--rp-ink, #0f1c2e); }

.hc-card {
    background: #fff;
    border: 1px solid var(--rp-border, #dbe3ec);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 0 16px;
    box-shadow: 0 1px 2px rgba(15, 28, 46, .04);
}

.hc-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
}

.hc-grid .fld { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; }
.hc-grid .fld.grow { flex: 2 1 220px; }
.hc-grid .fld.sm { flex: 0 0 80px; }
.hc-grid .fld label { font-size: 12.5px; font-weight: 600; color: var(--rp-ink-2, #35485f); }

.hc-add { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.hc-add .rp-input { flex: 1 1 auto; }

.hc-tests { margin: 0; }
.hc-tests .hc-empty td { color: #94a3b8; font-style: italic; }

.hc-actions { margin: 4px 0 24px; }