/* ==========================================================================
   Pharmacy module
   Master screens, the counter (purchase / sale / transfer) grids and the
   audit sheet. Column widths are fixed so the layout scales with browser
   zoom instead of rearranging, as everywhere else in the product.
   ========================================================================== */

/* -- master screens (company, distributor, generic, debtor, product) ------ */

.ph-master-top { display: flex; gap: 12px; align-items: stretch; }

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

.ph-art svg { width: 100%; height: 100%; }
.ph-art-small { width: 210px; flex: 0 0 210px; }

.ph-detail-panel { flex: 1; min-width: 0; }

.ph-hint { font-size: 11px; color: var(--ink-muted); }

.ph-pick { width: 260px; }
.ph-pick-wide { flex: 1; min-width: 0; }
.ph-pick-criteria { width: 100%; margin-bottom: 6px; }

/* -- listing grids ------------------------------------------------------- */

.ph-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid #9fb0c0;
    background: var(--surface);
    min-width: 0;
}

.ph-grid-flex { flex: 1; min-width: 0; }
.ph-grid-tall { min-height: 300px; }

.ph-grid-note {
    padding: 4px 8px;
    background: linear-gradient(#eaf2f9, #d6e5f1);
    border-bottom: 1px solid #9fb0c0;
    font-size: 11px;
    color: #4a6572;
}

.ph-band {
    padding: 3px 8px;
    background: linear-gradient(#6ea3cf, #3f74ad);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* The header sits inside the scrolling frame and both sides reserve the
   scrollbar gutter, so a scrollbar can never shift the rows out from under
   their headings. */
.ph-grid-head,
.ph-grid-body {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.ph-grid-head {
    display: flex;
    overflow-y: hidden;
    background: linear-gradient(#f2f6fa, #d8e4ef);
    border-bottom: 1px solid #9fb0c0;
    font-size: 11px;
    font-weight: 700;
    /* Declaring overflow zeroes a flex item's automatic minimum size; without this a
       screen too short for its content squeezes the headings to half a line. */
    flex: 0 0 auto;
}

.ph-grid-body { flex: 1; min-height: 140px; font-size: 11px; }
.ph-grid-body-short { max-height: 210px; }
.ph-grid-body-mini { max-height: 120px; min-height: 60px; }

.ph-row { display: flex; border-bottom: 1px solid #e0e7ee; cursor: pointer; }
.ph-row:nth-child(even) { background: #fafcfe; }
.ph-row:hover { background: #eaf3fa; }
.ph-row-selected { background: #1d4f91; color: #fff; }
.ph-row-selected .ph-cell-amount { color: #fff; }

/* A line asking for more than the shelf holds is flagged where it is typed. */
.ph-row-short { background: #fde8e4; }

.ph-col {
    padding: 3px 5px;
    border-right: 1px solid #e0e7ee;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ph-col-sr { width: 60px; flex: none; }
.ph-col-code { width: 72px; flex: none; }
.ph-col-name { flex: 1; min-width: 160px; }
.ph-col-type { width: 180px; flex: none; }
.ph-col-product { flex: 1.4; min-width: 170px; }
.ph-col-generic { flex: 1; min-width: 130px; }
.ph-col-dist { flex: 1; min-width: 140px; }
.ph-col-company { flex: 1; min-width: 130px; }
.ph-col-address { flex: 1.2; min-width: 150px; }
.ph-col-contact { width: 160px; flex: none; }
.ph-col-ntn { width: 84px; flex: none; }
.ph-col-visit { width: 92px; flex: none; }
.ph-col-dept { width: 150px; flex: none; }
.ph-col-mr { width: 80px; flex: none; }
.ph-col-patient { flex: 1; min-width: 150px; }
.ph-col-user { width: 110px; flex: none; }
.ph-col-date { width: 104px; flex: none; }
.ph-col-time { width: 70px; flex: none; }
.ph-col-terms { width: 70px; flex: none; }
.ph-col-days { width: 48px; flex: none; text-align: right; }
.ph-col-inv { width: 76px; flex: none; }
.ph-col-loc { width: 76px; flex: none; }
.ph-col-num { width: 78px; flex: none; text-align: right; }
.ph-col-tiny { width: 54px; flex: none; text-align: right; }
.ph-col-qty { width: 76px; flex: none; text-align: right; }
.ph-col-total { width: 92px; flex: none; text-align: right; font-weight: 700; }
.ph-col-batch { width: 84px; flex: none; }
.ph-col-x { width: 28px; flex: none; border-right: none; text-align: center; }

.ph-cell-amount { background: #fdf6d8; }
.ph-cell-strong { font-weight: 700; }

/* The issue column is the one the pharmacist types in, so it is tinted like
   the original's red cells; less/excess follow the audit report's colours. */
.ph-cell-issue { background: #f7b3a5; }
.ph-cell-less { color: #96271b; }
.ph-cell-excess { color: #14507f; }

.ph-grid-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 8px;
    background: linear-gradient(#eef4f9, #dbe7f1);
    border-top: 1px solid #9fb0c0;
    font-size: 11px;
    color: var(--ink-muted);
}

.ph-grid-foot-right { justify-content: flex-end; font-weight: 700; color: var(--ink); }

.ph-grid-foot-split, .ph-grid-foot-totals { justify-content: flex-end; font-weight: 700; color: var(--ink); }
.ph-grid-foot-split span, .ph-grid-foot-totals span { min-width: 92px; text-align: right; }
.ph-grid-foot-totals .ph-net { color: #96271b; }

.ph-cell-input {
    width: 100%;
    height: 18px;
    padding: 0 3px;
    border: 1px solid #b9c6d2;
    background: #fff;
    font: inherit;
    font-size: 11px;
    text-align: right;
}

.ph-cell-input:focus { outline: 1px solid #3a7ca8; outline-offset: -1px; }

.ph-line-del {
    width: 18px;
    height: 18px;
    line-height: 1;
    background: #fff;
    border: 1px solid #d8b4b0;
    border-radius: 2px;
    color: #96271b;
    font-size: 13px;
}

.ph-line-del:hover { background: #fdecea; }

/* -- search rows and buttons --------------------------------------------- */

.ph-search-row { display: flex; align-items: center; gap: 8px; }
.ph-search-actions { justify-content: flex-end; }
.ph-search-btn { width: 180px; }
.ph-criteria-label { width: 150px; flex-shrink: 0; font-size: 12px; }

.ph-go {
    width: 26px;
    height: 24px;
    padding: 3px;
    background: linear-gradient(#ffffff, #edf3f8);
    border: 1px solid #b9c6d2;
    border-radius: 3px;
}

.ph-go:hover { background: linear-gradient(#ffffff, #dceaf6); }
.ph-go svg { width: 100%; height: 100%; }

/* -- entry screens (purchase, sale, transfer, audit) ---------------------- */

.ph-entry { display: flex; gap: 10px; align-items: stretch; min-height: 460px; }
.ph-entry-side { width: 236px; flex: 0 0 236px; display: flex; flex-direction: column; gap: 8px; }
.ph-entry-main { flex: 1; min-width: 0; display: flex; }

.ph-detail-fill { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ph-detail-fill .field-panel-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }

.ph-grid-lines { flex: 1; min-height: 240px; }

.ph-row-stack { flex-wrap: wrap; }
.ph-row-stack .entry-label { width: 100%; }

.ph-clock { display: flex; justify-content: center; }
.ph-clock svg { width: 150px; height: 150px; }

.ph-lower { display: flex; gap: 10px; align-items: stretch; min-height: 300px; }
.ph-request-side { width: 236px; flex: 0 0 236px; display: flex; flex-direction: column; gap: 8px; }

.ph-history { border-top: 1px solid #9fb0c0; }

/* -- sign-off strip ------------------------------------------------------ */

.ph-signoff {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--surface-alt);
    border: 1px solid var(--panel-border);
}

.ph-signoff .entry-label { width: auto; }

.ph-ok, .ph-cancel {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 14px;
    background: linear-gradient(#ffffff, #eef3f8);
    border: 1px solid #b9c6d2;
    border-radius: 3px;
    font-size: 12px;
}

.ph-ok svg, .ph-cancel svg { width: 16px; height: 16px; }
.ph-ok:hover:not(:disabled), .ph-cancel:hover:not(:disabled) { background: linear-gradient(#ffffff, #dceaf6); }
.ph-ok:disabled, .ph-cancel:disabled { opacity: 0.5; }

/* -- stock transfer ------------------------------------------------------ */

.ph-transfer-row { display: flex; align-items: center; gap: 10px; }
.ph-loc { width: 200px; }
.ph-transfer-arrows { flex: 1; min-width: 120px; display: flex; align-items: center; }
.ph-transfer-arrows svg { width: 100%; height: 34px; }