/* ==========================================================================
   OPD Physician Notes desk (Physician Notes tabs, Critical Patient Note / List,
   Surgical Site Infection). Laid out after the original's screen: a tab strip
   under the Patient Information band, a bright blue title band per tab with its
   own New / Save / Edit / Preview / Print / Cancel strip, and the prescription pad
   as "Detail" (new medicine + grouped Medicine Detail grid) beside "Diagnosis,
   Instructions and Orders" (template rows over each box).
   ========================================================================== */

/* ---- tab strip ---- */
.pn-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 2px solid #1a8fd8;
    flex: 0 0 auto;
}

.pn-tab {
    border: 1px solid #b6cbe0;
    border-bottom: none;
    background: linear-gradient(#f7fafd, #dde8f3);
    color: #2c4a6b;
    font-size: 12.5px;
    padding: 5px 12px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
}

.pn-tab:hover { background: linear-gradient(#ffffff, #e8f1fa); }

.pn-tab-on {
    background: #1a8fd8;
    border-color: #1a8fd8;
    color: #fff;
    font-weight: 700;
}

.pn-pages { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.pn-page { flex: 1 1 auto; flex-direction: column; gap: 6px; min-height: 0; padding-top: 6px; }

/* ---- the blue title band with the tab's own buttons ---- */
.pn-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: linear-gradient(#2a9ee6, #1a7fc4);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 3px 6px 3px 10px;
    min-height: 34px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.pn-band-tools { flex-wrap: nowrap; }
.pn-band-tools .toolbar-btn { height: 28px; padding: 0 9px; font-size: 12.5px; }
.pn-band-tools .toolbar-btn-icon { width: 16px; height: 16px; }

.pn-sub-band {
    background: linear-gradient(#eef5fb, #d6e6f4);
    border: 1px solid #b9cfe4;
    color: #2c4a6b;
    font-weight: 700;
    font-size: 12.5px;
    padding: 3px 8px;
}

/* ---- criteria rows ---- */
.pn-criteria {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    flex: 0 0 auto;
}

.pn-criteria label { color: #34495e; }
.pn-date { width: 150px; }
.pn-consultant { flex: 1; min-width: 220px; max-width: 460px; }
.pn-previous { min-width: 320px; max-width: 520px; flex: 1; }
.pn-cons-pick { min-width: 200px; }
.pn-section { min-width: 180px; }
.pn-hint { color: #5d6d7e; font-size: 12px; font-style: italic; }
.pn-only-ticked { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ---- plain data grids ---- */
.pn-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid #b9cfe4;
    background: #fff;
    flex: 1 1 auto;
    min-height: 180px;
}

.pn-grid-head {
    display: flex;
    background: linear-gradient(#f2f6fa, #d8e4ef);
    border-bottom: 1px solid #9fb0c0;
    font-weight: 700;
    font-size: 12.5px;
    scrollbar-gutter: stable;
    overflow: hidden;
    flex: 0 0 auto;
}

.pn-grid-body { flex: 1 1 auto; overflow-y: auto; scrollbar-gutter: stable; font-size: 12.5px; min-height: 120px; }

.pn-row { display: flex; border-bottom: 1px solid #e3eaf1; cursor: pointer; }
.pn-row:nth-child(even) { background: #f8fbfe; }
.pn-row:hover { background: #eaf3fa; }
.pn-row-on, .pn-row-on:nth-child(even) { background: #1d4f91; color: #fff; }
.pn-row-cancelled { color: #a33; text-decoration: line-through; }

.pn-col {
    padding: 4px 6px;
    border-right: 1px solid #e3eaf1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pn-grid-head .pn-col { white-space: normal; }

.pn-col-time { width: 80px; flex: none; }
.pn-col-mr { width: 80px; flex: none; }
.pn-col-name { flex: 1; min-width: 160px; }
.pn-col-contact { width: 120px; flex: none; }
.pn-col-clinic { width: 170px; flex: none; }
.pn-col-cons { width: 170px; flex: none; }
.pn-col-status { width: 110px; flex: none; }
.pn-col-type { flex: 1; min-width: 150px; }
.pn-col-by { width: 150px; flex: none; }
.pn-col-loc { width: 50px; flex: none; }
.pn-col-date { width: 110px; flex: none; }
.pn-col-sec { width: 110px; flex: none; }
.pn-col-order { width: 90px; flex: none; }
.pn-col-cpt { width: 80px; flex: none; }
.pn-col-act { width: 80px; flex: none; text-align: center; }

.pn-release {
    border: 1px solid #c0392b;
    background: #fff5f4;
    color: #a93226;
    border-radius: 3px;
    font-size: 11.5px;
    padding: 1px 8px;
    cursor: pointer;
}

/* ---- two-column bodies ---- */
.pn-split { display: flex; gap: 10px; flex: 1 1 auto; min-height: 0; }
.pn-split-left { flex: 1.2; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pn-split-wide { flex: 2; }
.pn-split-narrow { flex: 0.9; }
.pn-split-right { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.pn-caption { font-weight: 700; color: #2c4a6b; font-size: 12.5px; margin-top: 4px; }

.pn-text {
    width: 100%;
    border: 1px solid #b9cfe4;
    background: #fffdf5;
    font: inherit;
    font-size: 13px;
    padding: 4px 6px;
    resize: vertical;
    box-sizing: border-box;
}
.pn-text-fill { flex: 1 1 auto; min-height: 200px; }
.pn-text[readonly] { background: #fbfcfd; }

fieldset.pn-form, fieldset.pn-notes, fieldset.pn-newmed { border: none; margin: 0; padding: 0; min-width: 0; }
fieldset[disabled] .pn-text, fieldset[disabled] .entry-input, fieldset[disabled] .entry-select { background: #f4f7fa; color: #3d4b59; }

/* ---- history & physical ---- */
.pn-form-cols { display: flex; gap: 16px; }
.pn-form-col { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.pn-yn-grid {
    display: grid;
    grid-template-columns: 130px 120px 130px 120px;
    gap: 4px 8px;
    align-items: center;
    font-size: 13px;
}

.pn-yn-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pn-yn-row > label { width: 140px; flex: none; color: #34495e; }
.pn-yn-row > .entry-input { flex: 1; min-width: 0; }
.pn-yn { width: 120px; flex: none; }
.pn-num { width: 90px; flex: none !important; }

/* ---- prescription pad ---- */
.pn-rx { display: flex; gap: 10px; flex: 1 1 auto; min-height: 0; }
.pn-rx-left { flex: 1.15; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pn-rx-right { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }

fieldset.pn-newmed { border: 1px solid #b9cfe4; padding: 2px 6px 6px; background: #f7fbff; }
fieldset.pn-newmed legend { font-weight: 700; color: #2c4a6b; font-size: 12.5px; padding: 0 4px; }

.pn-newmed-heads, .pn-newmed-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.4fr 34px;
    gap: 6px;
    align-items: center;
}
.pn-newmed-heads { font-size: 12px; color: #34495e; font-weight: 700; }

.pn-plus {
    width: 32px;
    height: 30px;
    border: 1px solid #3c9a4a;
    border-radius: 4px;
    background: linear-gradient(#5cc46b, #2f9a41);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.pn-plus:disabled { opacity: 0.4; cursor: default; }
.pn-plus-small { width: 26px; height: 26px; font-size: 17px; }

.pn-icon-btn {
    width: 28px;
    height: 26px;
    border: 1px solid #9fb6cc;
    border-radius: 4px;
    background: linear-gradient(#ffffff, #e6eef5);
    padding: 3px;
    cursor: pointer;
}
.pn-icon-btn svg { width: 100%; height: 100%; }

.pn-med-find { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.pn-med-find .entry-input { flex: 1; }

.pn-medgrid {
    display: flex;
    flex-direction: column;
    border: 1px solid #9fb6cc;
    background: #fff;
    flex: 1 1 auto;
    min-height: 260px;
}

.pn-medgrid-title {
    text-align: center;
    background: linear-gradient(#e9f2fa, #cfe1f1);
    color: #2c4a6b;
    font-weight: 700;
    font-size: 12.5px;
    padding: 2px;
}

.pn-medgrid-head, .pn-medrow { display: flex; }
.pn-medgrid-head {
    background: linear-gradient(#f2f6fa, #d8e4ef);
    border-bottom: 1px solid #9fb0c0;
    font-weight: 700;
    font-size: 12.5px;
    scrollbar-gutter: stable;
    overflow: hidden;
}
.pn-medgrid-body { flex: 1 1 auto; overflow-y: auto; scrollbar-gutter: stable; font-size: 12.5px; }

.pn-mc {
    padding: 3px 6px;
    border-right: 1px solid #e3eaf1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pn-mc-name { flex: 1.1; min-width: 150px; }
.pn-mc-dose { flex: 1.5; min-width: 170px; }
.pn-mc-dur { width: 90px; flex: none; }
.pn-mc-ok { width: 40px; flex: none; text-align: center; border-right: none; }

.pn-group {
    background: linear-gradient(#cfe3f5, #b9d5ee);
    color: #1c3f66;
    font-weight: 700;
    padding: 3px 8px;
    border-bottom: 1px solid #9fbfdc;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pn-group-toggle {
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    border: 1px solid #5b87b3;
    background: #fff;
    font-size: 12px;
    line-height: 1;
}
.pn-group-count { margin-left: auto; font-weight: 400; font-size: 11.5px; color: #3d5f82; }

.pn-medrow { border-bottom: 1px solid #edf2f7; }
.pn-medrow:hover { background: #f1f7fc; }
.pn-medrow-ok { background: #fff7d6; font-weight: 600; }
.pn-medrow-ok:hover { background: #fff1bd; }

.pn-cell-input {
    width: 100%;
    border: 1px solid #c9a93a;
    background: #fffdf0;
    font: inherit;
    font-size: 12.5px;
    padding: 1px 4px;
    box-sizing: border-box;
}

fieldset.pn-notes { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.pn-notebox { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; min-height: 110px; }
.pn-tpl-row, .pn-note-row { display: flex; gap: 6px; align-items: center; }
.pn-note-row { align-items: stretch; flex: 1 1 auto; }
.pn-tpl-label { width: 78px; flex: none; font-size: 12.5px; color: #c0392b; }
.pn-note-row .pn-tpl-label { color: #34495e; padding-top: 3px; }
.pn-tpl-select { flex: 1; min-width: 0; }
.pn-note-text { flex: 1; min-height: 80px; }

.pn-print-options {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 0 0 84px;
    font-size: 12.5px;
    color: #1f4e9a;
}
.pn-print-options label { display: inline-flex; align-items: center; gap: 6px; }
.pn-print-options .pn-court { color: #c0392b; }

/* ---- template browser ---- */
.hsm-modal.pn-tpl-modal { width: min(900px, 94vw); }
.hsm-modal-body.pn-tpl-body { display: grid; padding: 10px; overflow: hidden; grid-template-columns: 1fr 1.2fr; grid-template-rows: auto 1fr auto; gap: 8px; height: 60vh; }
.pn-tpl-find { grid-column: 1 / -1; }
.pn-tpl-list { overflow-y: auto; border: 1px solid #b9cfe4; min-height: 0; }
.pn-tpl-type { background: #d6e6f4; font-weight: 700; padding: 3px 8px; color: #1c3f66; position: sticky; top: 0; }
.pn-tpl-item { padding: 4px 10px; cursor: pointer; border-bottom: 1px solid #eef2f6; font-size: 13px; }
.pn-tpl-item:hover { background: #eaf3fa; }
.pn-tpl-item-on { background: #1d4f91; color: #fff; }
.pn-tpl-item-on:hover { background: #1d4f91; }
.pn-tpl-preview { min-height: 0; height: 100%; }
.pn-tpl-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

@media (max-width: 1100px) {
    .pn-rx, .pn-split, .pn-form-cols { flex-direction: column; }
    .pn-yn-grid { grid-template-columns: 130px 1fr; }
}

/* ---------------------------------------------------------------- Patient Registration tile:
   Administration masters, Note Edit Manager / Edited Notes Log, Surgery List Input and the
   Inpatient Reports criteria (shots 80-111). They reuse the HR master layout (hr-master, hr-grid)
   and only size it the way these reference screens are drawn. */

.adm-art { width: 540px; flex: 0 1 540px; min-width: 220px; height: 380px; }
.adm-art-narrow { width: 300px; flex: 0 1 300px; height: 370px; }
/* On a narrower screen the picture gives way first; the input panel and grid keep their room. */
.adm-master > .hr-master-main { min-width: 440px; }
.adm-art svg { width: 100%; height: 100%; }

.adm-grid .hr-grid-body { min-height: 170px; max-height: 200px; }
.adm-grid .hr-col-sr { text-align: center; }
/* A real basis so, on a narrow screen, the fixed columns give way too rather than the name alone. */
.adm-grid .hr-col-grow { flex: 1 1 170px; }

.adm-select { width: 180px; }
.adm-select-wide { width: 260px; }
.adm-short { width: 70px; }
.adm-date { width: 140px; }
.adm-amount { width: 110px; }

.adm-col-wide { width: 150px; flex: 0 1 150px; min-width: 96px; }
.adm-col-code { width: 150px; flex: 0 0 150px; }
.adm-num { text-align: right; }
.adm-num-center { text-align: center; }

.adm-memo { width: 100%; resize: vertical; padding: 5px; font-family: inherit; line-height: 1.35; height: auto; }

.adm-grid-caption {
    text-align: center;
    color: #2f6ea5;
    font-weight: 600;
    padding: 3px 6px;
    background: linear-gradient(#eef5fb, #dbe8f3);
    border-bottom: 1px solid #9db6cc;
}

/* Prescription Manager: the field strip across the top, labels over their boxes. */
.adm-rx { display: flex; flex-direction: column; gap: 8px; }

.adm-rx-fields {
    display: grid;
    grid-template-columns: 120px 64px minmax(110px, 290px) minmax(110px, 260px) minmax(100px, 150px) auto 70px;
    column-gap: 6px;
    row-gap: 4px;
    align-items: center;
}

.adm-rx-fields .entry-label { width: auto; white-space: nowrap; }
.adm-rx-l1 { grid-area: 1 / 1; } .adm-rx-l2 { grid-area: 1 / 2; } .adm-rx-l3 { grid-area: 1 / 3; }
.adm-rx-l4 { grid-area: 1 / 4; } .adm-rx-l5 { grid-area: 1 / 5; }
.adm-rx-f1 { grid-area: 2 / 1; } .adm-rx-f2 { grid-area: 2 / 2; } .adm-rx-f3 { grid-area: 2 / 3; }
.adm-rx-f4 { grid-area: 2 / 4; } .adm-rx-f5 { grid-area: 2 / 5; }
.adm-rx-l6 { grid-area: 2 / 6; } .adm-rx-l7 { grid-area: 2 / 7; }
.adm-rx-urdu {
    grid-row: 3;
    grid-column: 2 / 7;
    height: 50px;
    resize: none;
    padding: 4px 6px;
    font-family: "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", "Segoe UI", sans-serif;
    font-size: 15px;
}
.adm-rx-f7 { grid-area: 3 / 7; }

.adm-rx-lower { display: flex; gap: 8px; align-items: stretch; }
.adm-rx-art { width: 250px; flex: 0 0 250px; border: 1px solid #9db6cc; overflow: hidden; }
.adm-rx-art svg { width: 100%; height: 100%; display: block; }
.adm-rx-grid { flex: 1 1 auto; min-width: 0; }
.adm-rx-grid .hr-grid-body { min-height: 540px; max-height: 540px; }
.adm-rx-sort { width: 85px; flex: 0 0 85px; }
.adm-rx-name { width: 310px; flex: 0 1 310px; min-width: 140px; }
.adm-rx-dose { flex: 1 1 280px; min-width: 0; }
.adm-rx-dur { width: 70px; flex: 0 0 70px; }
.adm-rx-def { width: 65px; flex: 0 0 65px; text-align: center; }
.adm-rx-def input { margin: 0; vertical-align: middle; }

.adm-group-row {
    padding: 2px 6px;
    font-weight: 600;
    color: #14304d;
    background: #d6e6f4;
    border-bottom: 1px solid #b9cbd9;
    cursor: pointer;
    user-select: none;
}

.adm-group-toggle {
    display: inline-block;
    width: 11px;
    height: 11px;
    line-height: 9px;
    margin-right: 5px;
    border: 1px solid #6f8aa3;
    background: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 400;
}

.adm-group-item { padding-left: 18px; }

/* Consultant Templates: the template box fills the input panel; the grid runs full width below. */
.adm-tpl { display: flex; flex-direction: column; gap: 8px; }
.adm-tpl-memo { height: 245px; }
.adm-tpl-grid .hr-grid-body { min-height: 210px; max-height: 210px; }
.adm-tpl-title { width: 400px; flex: 0 0 400px; }
.adm-tpl-type { width: 100px; flex: 0 0 100px; }

/* Note Edit Manager / Edited Notes Log. */
.adm-note-edit { display: flex; flex-direction: column; gap: 8px; }
.adm-note-body { display: grid; grid-template-columns: minmax(420px, 520px) 1fr; gap: 8px; align-items: stretch; }
.adm-note-grid .hr-grid-body { min-height: 560px; max-height: 560px; }
.adm-note-type { width: 150px; flex: 0 1 150px; min-width: 110px; }
.adm-note-loc { width: 48px; flex: 0 0 48px; }
.adm-note-date { width: 82px; flex: 0 0 82px; }
.adm-note-time { width: 70px; flex: 0 0 70px; }
.adm-note-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.adm-note-text {
    width: 100%;
    height: 240px;
    resize: vertical;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.35;
    white-space: pre-wrap;
    background: #fff;
}

.adm-note-actual { color: #e00000; background: #f4f8fc; }
.adm-note-edited, .adm-note-edited:disabled { color: #129012; }

.adm-edit-log { display: flex; flex-direction: column; gap: 8px; }
.adm-edit-grid .hr-grid-body { min-height: 300px; max-height: 300px; }
.adm-edit-grid .hr-col-grow { flex: 1 1 190px; min-width: 120px; }
.adm-log-mr { width: 78px; flex: 0 1 78px; min-width: 56px; }
.adm-log-type { width: 190px; flex: 0 1 190px; min-width: 130px; }
.adm-log-by { width: 120px; flex: 0 1 120px; min-width: 90px; }
.adm-log-date { width: 100px; flex: 0 1 100px; min-width: 76px; }
.adm-log-time { width: 80px; flex: 0 1 80px; min-width: 66px; }
.adm-edit-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-edit-notes .adm-note-text { height: 330px; }

/* Surgery List Input. */
.adm-surgery { display: flex; flex-direction: column; gap: 8px; }
.adm-surgery-period { display: flex; align-items: center; gap: 6px; }
.adm-surgery-period .entry-label { width: auto; }
.adm-surgery-grid .hr-grid-body { min-height: 220px; max-height: 300px; }
.adm-surgery-grid .hr-col-grow { flex: 1 1 200px; min-width: 110px; }
.adm-sl-no { width: 60px; flex: 0 1 60px; min-width: 44px; }
.adm-sl-date { width: 78px; flex: 0 0 78px; }
.adm-sl-slot { width: 96px; flex: 0 1 96px; min-width: 88px; }
.adm-sl-order { width: 50px; flex: 0 1 50px; min-width: 40px; }
.adm-sl-mr { width: 64px; flex: 0 1 64px; min-width: 50px; }
.adm-sl-name { width: 180px; flex: 0 1 180px; min-width: 110px; }
.adm-sl-side { width: 80px; flex: 0 1 80px; min-width: 60px; }
.adm-sl-room { width: 130px; flex: 0 1 130px; min-width: 90px; }
.adm-sl-amt { width: 84px; flex: 0 1 84px; min-width: 64px; }
.adm-sl-icu { width: 44px; flex: 0 0 44px; }
.adm-sl-cons { width: 150px; flex: 0 1 150px; min-width: 100px; }

/* Inpatient Reports criteria: labels over their boxes, as the reference draws them. */
.ipr-art svg { width: 100%; height: auto; display: block; }
.ipr-dates .criteria-row { flex-direction: column; align-items: stretch; gap: 3px; }
.ipr-dates .criteria-label { width: auto; color: #1f4e9a; }
.ipr-filter { width: 100%; margin: 2px 0 6px; }
.ipr-mr-row { margin: 2px 0 6px; }
.ipr-mr-label { width: auto; color: #b00000; font-weight: 600; padding-left: 20px; }
.ipr-mr-blue { color: #1f3f9a; font-weight: 700; font-size: 13px; }