/* ==========================================================================
   Module screens
   ========================================================================== */

.screen-tab-content { flex: 1; display: flex; overflow: hidden; }

.screen {
    flex: 1;
    display: flex;
    flex-direction: column;

    /* Screens sit on a tinted page, with the panels themselves white - the panels have to read
       as raised surfaces, which they cannot do on a white page. */
    background: linear-gradient(180deg, #f7fbfe 0%, #eaf3fa 100%);
    overflow: hidden;
}

.screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 16px 12px;
    background: var(--surface);
    border-bottom: 1px solid #d7e2ea;
}

/* The caption is given room to breathe on both sides: the original's title bar is a band of its
   own, not a line squeezed between the tab strip and the toolbar. */
.screen-title {
    margin: 0;
    padding-left: 2px;
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.screen-toolbar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    background: linear-gradient(#ffffff, #f1f5f8);
    border: 1px solid #b9c6d2;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    color: var(--ink);
}

.toolbar-btn:hover:not(:disabled) { background: linear-gradient(#ffffff, #e6eef5); }
.toolbar-btn-icon { display: inline-flex; width: 20px; height: 20px; }
.toolbar-btn-icon svg { width: 100%; height: 100%; }
.toolbar-btn-disabled { opacity: 0.45; box-shadow: none; }

.screen-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; overflow: auto; }

.screen-footer {
    background: var(--brand-orange);
    color: #fff;
    font-size: 11px;
    text-align: right;
    padding: 4px 12px;
}

.screen-columns { display: flex; gap: 14px; align-items: flex-start; }

/* The artwork is decoration: it yields space to the fields and disappears entirely
   on narrower windows rather than squeezing the form. */
.artwork {
    width: 330px;
    min-width: 220px;
    flex: 0 1 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.artwork-svg { width: 100%; height: auto; max-height: 260px; }

.screen-fields {
    flex: 1 1 560px;
    min-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 1080px) {
    .artwork { display: none; }
    .screen-fields { min-width: 0; }
}

/* -- messages ------------------------------------------------------------ */

/* Sticks to the top of the scrolling body rather than scrolling away with the rest of the form -
   a save made after scrolling down a long screen must still show its result without the user
   having to scroll back up to find it. */
.screen-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 12px;
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.screen-message-info { background: #e8f2fa; border: 1px solid #a9c9e0; color: #14507f; }
.screen-message-success { background: #eaf7e9; border: 1px solid #9ed49a; color: #24632a; }
.screen-message-error { background: #fdecea; border: 1px solid #e5a29b; color: #96271b; }

.screen-message-close { background: none; border: none; font-size: 16px; line-height: 1; color: inherit; opacity: 0.7; }
.screen-message-close:hover { opacity: 1; }

/* -- field panels -------------------------------------------------------- */

.field-panel {
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    background: var(--surface);
}

.field-panel-caption {
    padding: 3px 8px;
    background: var(--panel-caption);
    border-bottom: 1px solid var(--panel-border);
    font-size: 12px;
    color: #14507f;
}

.field-panel-body { padding: 10px; }

.field-panel-faded { opacity: 0.55; }
.field-panel-faded .field-panel-caption { color: #6a7c8a; }

/* -- search panel -------------------------------------------------------- */

.search-options { display: flex; flex-direction: column; gap: 6px; }

.search-option { display: flex; align-items: center; gap: 8px; }
.search-option-label { width: 130px; font-size: 12px; }

.search-row-single { display: flex; align-items: center; gap: 12px; }
.search-label { width: 90px; font-size: 12px; }

.search-input {
    height: 22px;
    padding: 0 6px;
    border: 1px solid var(--input-border);
    border-radius: 2px;
    font-size: 12px;
}

.search-input:focus { outline: none; border-color: var(--input-focus); box-shadow: 0 0 0 2px rgba(27, 154, 224, 0.18); }
.search-input:disabled { background: #f2f5f8; }
.search-input-option { flex: 1; }
.search-row-single .search-input { width: 220px; }

/* -- entry fields -------------------------------------------------------- */

.entry-grid { display: flex; flex-direction: column; gap: 7px; }
.entry-row { display: flex; align-items: center; gap: 6px; }

.entry-label { width: 122px; flex-shrink: 0; font-size: 12px; }
.entry-label-inline { width: auto; margin-left: 10px; }
.entry-label-radio { display: flex; align-items: center; gap: 5px; width: auto; }

.entry-mrno { font-size: 14px; font-weight: 700; color: #2f6ea5; }

.entry-input, .entry-select {
    height: 22px;
    padding: 0 5px;
    border: 1px solid var(--input-border);
    border-radius: 2px;
    font-size: 12px;
    background: #fff;
    min-width: 0;
}

.entry-input:focus, .entry-select:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px rgba(27, 154, 224, 0.18);
}

.entry-input:disabled, .entry-select:disabled { background: #f2f5f8; color: #5b6b7a; }

.entry-input-grow { flex: 1; }
.entry-input-address { flex: 1; }
.entry-input-wide { flex: 1; }
.entry-input-short { width: 130px; }
.entry-input-date { width: 150px; }
.entry-input-date-wide { width: 240px; }
.entry-input-age { width: 90px; }

.entry-select-title { width: 78px; }
.entry-select-city { width: 150px; }
.entry-select-marital { width: 130px; }

/* -- patient grid -------------------------------------------------------- */

.patient-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    overflow: hidden;
}

.patient-grid-head, .patient-grid-row { display: flex; align-items: stretch; }

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

.patient-grid-body { flex: 1; overflow-y: auto; }

.patient-grid-row {
    font-size: 12px;
    border-bottom: 1px solid #eef2f6;
    cursor: pointer;
}

.patient-grid-row:nth-child(even) { background: #fafcfe; }
.patient-grid-row:hover { background: #e8f2fa; }
.patient-grid-row-selected { background: #cfe4f5; }
.patient-grid-row-placeholder { color: transparent; }

.pg-col {
    padding: 3px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-right: 1px solid #eef2f6;
}

.pg-col-mr { width: 150px; flex-shrink: 0; }
.pg-col-name { width: 190px; flex-shrink: 0; }
.pg-col-guardian { width: 160px; flex-shrink: 0; }
.pg-col-address { flex: 1; min-width: 120px; }
.pg-col-city { width: 110px; flex-shrink: 0; }
.pg-col-contact { width: 190px; flex-shrink: 0; }
.pg-col-dob { width: 105px; flex-shrink: 0; }
.pg-col-gender { width: 78px; flex-shrink: 0; }
.pg-col-status { width: 84px; flex-shrink: 0; border-right: none; }

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

/* -- report viewer ------------------------------------------------------- */

.report-viewer { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--panel-border); min-height: 0; }

.report-viewer-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    background: linear-gradient(#fbfcfd, #e9eff5);
    border-bottom: 1px solid var(--panel-border);
}

.report-tool {
    width: 24px;
    height: 22px;
    padding: 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
}

.report-tool:hover { background: #ffffff; border-color: #b9c6d2; }
.report-tool svg { width: 100%; height: 100%; }

.report-tool-separator { width: 1px; height: 18px; background: #c3d2de; margin: 0 4px; }
.report-viewer-label { font-size: 12px; color: var(--ink-muted); }
.report-viewer-engine { margin-left: auto; font-size: 11px; color: #8a97a3; letter-spacing: 0.4px; }

.report-viewer-tab {
    align-self: flex-start;
    margin: 4px 0 0 6px;
    padding: 2px 12px;
    background: #e9eff5;
    border: 1px solid var(--panel-border);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    font-size: 11px;
    color: var(--ink-muted);
}

.report-viewer-surface {
    flex: 1;
    background: #9aa5ad;
    padding: 12px;
    min-height: 420px;
    overflow: auto;
}

.report-print-area { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* The preview raster is ~2x an A4 page, so capping the display width near the true page width
   (794px CSS px) means the browser downscales it - crisp - instead of upscaling a small image.
   ReportSurface sets the width inline from its zoom factor; pages wider than the surface simply
   scroll, which is what a zoomed-in viewer should do. */
.report-page {
    width: 794px;
    height: auto;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    image-rendering: -webkit-optimize-contrast;
}

/* ---- zoom controls (shared by every report preview through ReportSurface) ---- */

.report-zoom-btn {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.report-zoom-reset { font-size: 10px; font-weight: 700; }

.report-zoom-value {
    min-width: 42px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-muted);
}

.report-viewer-status {
    display: flex;
    justify-content: flex-end;
    padding: 2px 10px;
    background: #e7ecef;
    border-top: 1px solid #c3ccd6;
    font-size: 11px;
    color: var(--ink-muted);
}

.report-viewer-pages { font-size: 11px; color: var(--ink-muted); }
.report-viewer-loading, .report-viewer-error { padding: 24px; color: #fff; font-size: 13px; text-align: center; }
.report-viewer-error { color: #ffe2de; }

/* Printing sends the report and nothing else - no header, tabs, menu or status bar. */
/* The printable role sheets are built into the Role Management screen but never shown on screen;
   at print time hsm.printFlow clones the active one into the body-level holder below. */
.rbac-print-sheet { display: none; }
#hsm-print-holder { display: none; }

@media print {
    body * { visibility: hidden; }
    .report-print-area, .report-print-area * { visibility: visible; }

    .report-print-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        gap: 0;
    }

    /* !important beats the inline zoom width: printing always uses the full page. */
    .report-page {
        box-shadow: none;
        width: 100% !important;
        max-width: 100%;
        page-break-after: always;
    }

    .report-viewer-status { display: none; }

    /* Role Management: print the sheet cloned into the body-level holder, hiding the rest of the app
       with display:none so the permission table flows across as many pages as it needs. (The old
       report-print-area approach positioned the sheet absolutely, which clipped it to one page and
       left a leading blank page.) The holder sits directly under <body>, so it starts at the top of
       page 1 in normal flow and paginates naturally. */
    body.hsm-printing > *:not(#hsm-print-holder) { display: none !important; }
    body.hsm-printing #hsm-print-holder { display: block !important; }

    /* The report viewer's "body * { visibility: hidden }" above hides everything; the holder and its
       contents must be re-shown or the pages print blank (content occupies space but is invisible). */
    body.hsm-printing #hsm-print-holder,
    body.hsm-printing #hsm-print-holder * { visibility: visible !important; }

    #hsm-print-holder .rbac-print-sheet { display: block; color: #000; font-size: 12px; padding: 8px 4px; }

    .rbac-print-head { text-align: center; margin-bottom: 12px; }
    .rbac-print-hospital { font-size: 18px; font-weight: 700; }
    .rbac-print-title { font-size: 14px; font-weight: 600; margin-top: 2px; }
    .rbac-print-meta { font-size: 11px; color: #333; margin-top: 2px; }

    .rbac-print-detail { border-collapse: collapse; width: 100%; margin-bottom: 12px; }
    .rbac-print-detail th {
        text-align: left; width: 140px; padding: 3px 8px; vertical-align: top;
        border: 1px solid #000; background: #eee;
    }
    .rbac-print-detail td { padding: 3px 8px; border: 1px solid #000; }

    .rbac-print-section {
        font-size: 13px; font-weight: 700; margin: 8px 0 4px;
        border-bottom: 2px solid #000; padding-bottom: 2px;
    }
    .rbac-print-note { font-style: italic; }

    .rbac-print-matrix { border-collapse: collapse; width: 100%; }
    .rbac-print-matrix th, .rbac-print-matrix td {
        border: 1px solid #000; padding: 3px 6px; text-align: left; vertical-align: top;
    }
    .rbac-print-matrix thead th { background: #eee; }
    .rbac-print-matrix tr { page-break-inside: avoid; }
    .rbac-print-perm { display: inline-block; margin-right: 12px; white-space: nowrap; }

    /* Blank capture form: write-in lines and a sign-off row. */
    .rbac-print-fill {
        display: inline-block;
        min-width: 260px;
        border-bottom: 1px solid #000;
        height: 14px;
    }
    .rbac-print-fill-short { min-width: 120px; }

    .rbac-print-signoff {
        display: flex;
        flex-wrap: wrap;
        gap: 24px 48px;
        margin-top: 28px;
    }
    .rbac-print-sign { white-space: nowrap; }
}


/* ==========================================================================
   SearchablePicker - a type-to-filter replacement for long <select> lists.
   Generic and app-wide; slot it into any layout with the width helpers below
   (sp-code / sp-title) or a caller-supplied Class.
   ========================================================================== */

.sp { position: relative; display: inline-flex; }

.sp-input {
    width: 100%;
    height: 24px;
    padding: 2px 6px;
    border: 1px solid #9fb0c0;
    background: #fff;
    font: inherit;
    font-size: 12px;
}
.sp-input:focus { outline: 1px solid #3a7ca8; outline-offset: -1px; }
.sp-off .sp-input, .sp-input:disabled { opacity: 0.5; background: #eef2f6; cursor: default; }

.sp-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 100%;
    max-width: 520px;
    max-height: 240px;
    overflow: auto;
    background: #fff;
    border: 1px solid #7f93a5;
    box-shadow: 0 6px 18px rgba(20, 40, 60, 0.22);
}

.sp-opt {
    padding: 3px 8px;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 1px solid #eef2f6;
}
.sp-opt:hover { background: #eaf3fa; }
.sp-opt-on { background: #d7e9f6; }

.sp-empty { padding: 6px 8px; font-size: 12px; font-style: italic; color: #8091a0; }

/* Width helpers so the picker drops straight into the voucher entry grid. */
.sp.sp-code { width: 128px; }
.sp.sp-title { flex: 1; min-width: 0; }

/* Radiology consumables: what a study used, listed under the performed-procedure panel. */
.rad-consumable-rows { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.rad-consumable-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.rad-consumable-name { flex: 1; }
.rad-consumable-qty { width: 44px; text-align: right; }
.rad-consumable-amt { width: 88px; text-align: right; }