/* ============================================================================
 * order-workflow.css — Order Catalog Setup (catalogsetup.php) and New Order
 * (orders.php).
 *
 * These two pages originally shipped with class names — .dropcontainer,
 * .protocol-tabs, .checkboxlist, .buttonrow, .datatable, .btn — that are not
 * defined anywhere in css/. .dropcontainer in particular is dead everywhere it
 * appears (visittracking.php too). The result was unstyled markup sitting
 * directly on the app background: washed-out headings, bare inputs, no card.
 *
 * The page chrome now comes from the app's real conventions instead of new
 * classes: both pages wrap in .titleRow (the white card, css/page.css:558),
 * use h1/h2 for headings, .labelandinput for form grids and .formbutton for
 * buttons — the same structure as clientsetup.php and printconfig.php. What is
 * left here is only what those conventions do not already cover.
 *
 * Palette, taken from css/page.css and protocolsetup.php so nothing is invented:
 *   navy   #35486E   (headings, primary buttons)
 *   gold   #E8B500   (active accent, heading rules)
 *   border #DEE2E6
 * ==========================================================================*/


/* ── Tab strip (catalogsetup) ───────────────────────────────────────────────
 * protocolsetup.php uses a fixed 280px sidebar for its ten tabs. Three tabs do
 * not justify that, so this is a horizontal strip using the same navy/gold
 * accent so the two setup screens read as siblings.
 * ------------------------------------------------------------------------ */
.ow-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0 0 20px 0;
    border-bottom: 2px solid #DEE2E6;
}

.ow-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #35486E;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.ow-tab-btn:hover {
    background: rgba(53, 72, 110, 0.06);
}

.ow-tab-btn.active {
    color: #35486E;
    border-bottom-color: #E8B500;
    font-weight: 600;
    background: rgba(232, 181, 0, 0.12);
}

.ow-tab-panel {
    display: none;
}

.ow-tab-panel.active {
    display: block;
}


/* ── Column layout ──────────────────────────────────────────────────────────
 * Both pages are "detail form | list | related items" side by side. Collapses
 * to a single column on narrow viewports.
 * ------------------------------------------------------------------------ */
.ow-cols {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ow-col {
    flex: 1 1 300px;
    min-width: 260px;
}

.ow-col-wide {
    flex: 2 1 380px;
    min-width: 320px;
}

/* .titleRow centres its text; these panes are forms and lists, which read badly
   centred. */
.titleRow .ow-cols,
.titleRow .ow-col,
.titleRow .ow-col-wide {
    text-align: left !important;
}

/* h2 inside a column is a pane header, not a page section, so it should not
   carry the full-width gold band .titleRow h2 applies. */
.titleRow .ow-col > h2,
.titleRow .ow-col-wide > h2 {
    font-size: 14px !important;
    margin: 0 0 10px 0 !important;
    padding: 6px 8px !important;
    border-left: 3px solid #E8B500 !important;
}

.ow-col h3 {
    color: #35486E;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    margin: 16px 0 6px 0;
}

.ow-hint {
    font-size: 12px !important;
    color: #6C757D;
    margin: 0 0 10px 0;
    text-align: left;
}


/* ── Inputs ─────────────────────────────────────────────────────────────────
 * page.css sizes and spaces .labelandinput children but leaves borders to the
 * browser default, which is invisible against a white card. */
.titleRow .ow-col input[type="text"],
.titleRow .ow-col input[type="number"],
.titleRow .ow-col select,
.titleRow .ow-col textarea,
.titleRow .ow-col-wide input[type="text"],
.titleRow .ow-col-wide select,
.titleRow .ow-col-wide textarea {
    border: 1px solid #CED4DA;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
}

.titleRow .ow-col input:focus,
.titleRow .ow-col select:focus,
.titleRow .ow-col textarea:focus,
.titleRow .ow-col-wide input:focus,
.titleRow .ow-col-wide textarea:focus {
    outline: none;
    border-color: #35486E;
    box-shadow: 0 0 0 2px rgba(53, 72, 110, 0.15);
}

/* Multi-row <select size="n"> list boxes (All Containers / Tests / Panels,
   and the patient picker). */
.ow-listbox {
    width: 100%;
    border: 1px solid #CED4DA;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    padding: 2px;
}

.ow-listbox option {
    padding: 5px 8px;
    font-size: 13px;
}

.ow-listbox option:checked {
    background: #35486E linear-gradient(0deg, #35486E 0%, #35486E 100%);
    color: #fff;
}

.ow-field-full {
    width: 100%;
    box-sizing: border-box;
}


/* ── Checkbox lists (test→container map, panel members, order picker) ────── */
.ow-checklist {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #DEE2E6;
    border-radius: 4px;
    background: #fff;
    padding: 4px;
}

.ow-checklist label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 13px;
    border-radius: 3px;
    cursor: pointer;
    text-transform: none;
}

.ow-checklist label:hover {
    background: #F1F3F5;
}

.ow-checklist input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
}

.ow-empty {
    padding: 14px;
    color: #6C757D;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    border: 1px dashed #DEE2E6;
    border-radius: 4px;
    background: #FAFBFC;
}


/* ── Button rows ────────────────────────────────────────────────────────── */
.ow-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* Destructive actions. .formbutton wins the base look with !important, so the
   red has to match that weight. */
.formbutton.ow-danger {
    background: linear-gradient(135deg, #A4343A 0%, #C0464C 100%) !important;
    border-color: #A4343A !important;
    box-shadow: 0 2px 4px rgba(164, 52, 58, 0.3) !important;
}

.formbutton.ow-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #C0464C 0%, #A4343A 100%) !important;
    box-shadow: 0 4px 8px rgba(164, 52, 58, 0.4) !important;
}


/* ── Draw-list preview (orders) ─────────────────────────────────────────── */
.ow-drawlist {
    margin-top: 14px;
    padding: 12px 14px;
    background: #F8F9FA;
    border: 1px solid #DEE2E6;
    border-left: 3px solid #E8B500;
    border-radius: 4px;
    font-size: 13px;
    text-align: left;
}

.ow-drawlist strong {
    display: block;
    color: #35486E;
    margin-bottom: 6px;
    font-size: 13px;
}

.ow-drawlist ol,
.ow-drawlist ul {
    margin: 0;
    padding-left: 20px;
}

.ow-drawlist li {
    padding: 2px 0;
    font-size: 13px;
}

.ow-selected-patient {
    margin-top: 10px;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 4px;
    background: #F8F9FA;
    border: 1px solid #DEE2E6;
    color: #6C757D;
}

.ow-selected-patient.has-patient {
    background: rgba(232, 181, 0, 0.10);
    border-color: #E8B500;
    color: #35486E;
    font-weight: 500;
}

/* Patient history summary under the selected-patient box: last seen, encounter
   count, and any order still open. Sits directly below .ow-selected-patient and
   reads as a continuation of it, so the two are visually one block. */
.ow-patient-history {
    margin: -2px 0 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #35486E;
    background: #F8F9FA;
    border: 1px solid #DEE2E6;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.ow-patient-history .ow-ph-label {
    color: #6C757D;
}

/* An order still in progress is the one thing here that should stop someone. */
.ow-patient-history .ow-ph-open {
    display: block;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed #DEE2E6;
    color: #A4343A;
    font-weight: 500;
}

.ow-optional {
    font-weight: 400;
    font-size: 12px;
    color: #6C757D;
}

.ow-req {
    color: #A4343A;
}

/* Text-styled button: an action, not navigation, so it must not be an <a href>. */
/* "+ New patient" sits above the search box, pushed to the right edge of the column:
   it is the fallback action for "they are not in this list", so it reads as secondary
   to the search rather than competing with it for the left margin. */
.ow-patient-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.ow-patient-actions .ow-linkbtn {
    margin-top: 0;
}

/* A patient whose order is still in flight cannot take another one. The listbox
   disables the option; this makes the reason legible rather than leaving it as an
   inert grey line. */
.ow-listbox option.ow-option-blocked {
    color: #9aa4b2;
    font-style: italic;
}

.ow-linkbtn {
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    color: #35486E;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.ow-linkbtn:hover {
    color: #E8B500;
}

/* Overlay + dialog for the inline New Patient form. Hand-rolled rather than a
   Bootstrap modal: the file named bootstrap-3.4.1.min.js contains v5.3.8, so the
   two modal APIs in this codebase disagree (CLAUDE.md §2). */
.ow-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(53, 72, 110, 0.45);
}

.ow-overlay[hidden] {
    display: none;
}

.ow-modal {
    width: min(420px, calc(100vw - 40px));
    padding: 24px 26px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.ow-modal h2 {
    margin: 0 0 6px;
    font-size: 20px;
    color: #35486E;
}

.ow-modal label {
    display: block;
    margin: 14px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #35486E;
}

.ow-modal input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #C9D2DF;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.ow-status-msg {
    margin-top: 10px;
    font-size: 13px;
    text-align: left;
}

.ow-status-msg.error {
    color: #A4343A;
}

.ow-status-msg.success {
    color: #1E7E34;
}

.ow-remaining {
    display: inline-block;
    margin: 0 0 12px 0;
    padding: 6px 12px;
    background: rgba(232, 181, 0, 0.12);
    border-left: 3px solid #E8B500;
    border-radius: 3px;
    font-size: 13px;
    color: #35486E;
}


/* ============================================================================
 * Shared collection/aliquot editor
 *
 * js/modules/collection-def-editor.ts emits .collection-header-row,
 * .collection-toggle, .aliquot-row, .collection-save-row, .collection-save-btn,
 * .draw-order, .aliquot-count and .status-icon. Those rules live in the inline
 * <style> block of protocolsetup.php (lines 152-277), which is not loaded on
 * catalogsetup.php — so the accordion rendered completely unstyled there.
 *
 * Copied verbatim rather than extracted, deliberately: protocolsetup.php is the
 * highest-risk file in the repo and moving 762 lines of its CSS to prove a point
 * about duplication is not worth a visual regression on the study workflow. Its
 * inline block comes after this file in document order, so protocolsetup keeps
 * winning its own rules and nothing about that page changes.
 *
 * ⚠️  If you change an editor rule, change it in BOTH places.
 * ==========================================================================*/

.collection-header-row {
    background-color: #f8f9fa;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    border-top: 2px solid #dee2e6 !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.collection-header-row:hover {
    background-color: #e9ecef;
}

.collection-header-row td {
    padding: 12px 8px !important;
}

.collection-toggle {
    font-size: 14px;
    color: #666;
    transition: transform 0.2s;
    display: inline-block;
    width: 16px;
    text-align: center;
}

.collection-toggle.expanded {
    transform: rotate(90deg);
}

.collection-header-row .draw-order {
    font-weight: bold;
    color: #007bff;
    margin-right: 5px;
}

.collection-header-row .aliquot-count {
    background-color: #e9ecef;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    color: #495057;
    margin-left: 8px;
}

.collection-header-row .status-icon {
    font-size: 16px;
    margin-left: 8px;
}

.collection-header-row.status-incomplete {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
}

.collection-header-row.status-complete {
    background-color: #d4edda;
    border-left: 4px solid #28a745;
}

.collection-header-row.status-empty {
    background-color: #f8f9fa;
    border-left: 4px solid #6c757d;
}

.aliquot-row {
    display: none;
}

.aliquot-row.visible {
    display: table-row;
}

.aliquot-row td {
    padding: 5px !important;
    border-bottom: 1px solid #eee;
}

.aliquot-row input[type="text"],
.aliquot-row input[type="number"],
.aliquot-row select {
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.aliquot-row input[type="checkbox"] {
    cursor: pointer;
}

.collection-save-row {
    display: none;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6 !important;
}

.collection-save-row.visible {
    display: table-row;
}

.collection-save-row td {
    padding: 10px !important;
    text-align: right;
}

.collection-save-btn {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

.collection-save-btn:hover {
    background-color: #0056b3;
}

.collection-save-btn:active {
    background-color: #004085;
}

/* The aliquot accordion table. protocolsetup.php styles only the margin; the
   table itself picks up .display/.datatable elsewhere. Give it a plain,
   full-width base so it is legible on catalogsetup too. */
#aliquots_master_table {
    margin-bottom: 20px;
    width: 100%;
    border-collapse: collapse;
}