/* Hide above sample sections if needed */
#above-sample-sections > div > .remarks-widget {
    display: none !important;
    flex: 1;
    width: 100%;
}

#ar-attachments {
    display: none;
}

#senaite-sampleheader-form input[type="submit"] {
    display: none;
}

/* -------------------------------------------------------------------------
 * Hide the DateSampled / DateReceived datetime widgets in the sample header.
 *
 * Product decision (EHRPlus): the editable date/time inputs are suppressed
 * for now. The NPT + Bikram Sambat display is rendered below them by the
 * sampleheader viewlet override (get_npt_hint) in edit mode and by the
 * IHeaderTableFieldRenderer adapters in view mode -- that remains visible.
 *
 * The wrapper `.datetimewidget` holds the <input type="date"> and
 * <input type="time"> pair; hiding it leaves the hidden <input> (which
 * carries the submit value) intact so nothing breaks if a save ever fires.
 *
 * TO RESTORE editability later: delete this block.
 * ------------------------------------------------------------------------- */
#senaite-sampleheader-form .datetimewidget:has(input[name^="DateSampled"]),
#senaite-sampleheader-form .datetimewidget:has(input[name^="DateReceived"]) {
    display: none !important;
}


#above-sample-sections > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 8px;
}
/* Per-analysis remarks popup (native <dialog>, bootstrap card inside) */
dialog.ehrplus-remarks-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    width: min(920px, 94vw);
    max-width: 94vw;
}

/* Bootstrap caps .modal-dialog at 500px, too narrow for a rich text editor */
dialog.ehrplus-remarks-dialog .modal-dialog {
    max-width: none;
    width: 100%;
    margin: 0;
}

/* Fallback when TinyMCE is unavailable: at least give a roomy textarea */
dialog.ehrplus-remarks-dialog textarea {
    min-height: 220px;
}

dialog.ehrplus-remarks-dialog::backdrop {
    background: rgba(0, 0, 0, .4);
}

a.ehrplus-analysis-remarks {
    margin-left: .35rem;
}

/* -------------------------------------------------------------------------
 * Analyses listing, Service cell alignment.
 *
 * The vendor listing renders before/after row items as table-cells inside an
 * inline-table, which shrink-wraps to its minimum content width: the icons
 * (info, result history, remarks) stack vertically and the service name breaks
 * one word per line even when the column has room to spare. Lay the cell out
 * as a single flex row instead: icon clusters keep their natural width, the
 * name takes the rest.
 * ---------------------------------------------------------------------- */
.ajax-contents-table td.Service > .form-group {
    display: flex;
    /* the vendor stylesheet sets flex-wrap:wrap on .form-group, which drops the
       name below its own icons; keep one row and let the name wrap internally */
    flex-wrap: nowrap;
    align-items: baseline;
    gap: .4rem;
    width: 100%;
    margin-bottom: 0;
}

.ajax-contents-table td.Service > .form-group > .before-item,
.ajax-contents-table td.Service > .form-group > .after-item,
.ajax-contents-table td.Service > .form-group > .before-item > span,
.ajax-contents-table td.Service > .form-group > .after-item > span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* the service name: use the leftover width, wrap only when it really must */
.ajax-contents-table td.Service > .form-group > .form-group {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.ajax-contents-table td.Service {
    min-width: 13rem;
}