/* =======================================Form labels/headers — same
   neu form scaffolding as css/create/rma.css/placard.css (each tool page
   owns its own copy of these rules rather than sharing one file). */
.form-container {
    flex: 1;
    width: 100%;
    max-width: 50%;
    min-width: 0;
    margin: 0;
    padding: 30px;
    background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
    box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
    border-radius: var(--neu-radius);
}

.form-container h1 {
    text-align: center;
    margin-bottom: 20px;
    font-size: var(--h2-size);
    color: var(--text-color);
}

.form-section-title {
    margin: 20px 0 15px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--neu-shadow-dark);
    font-size: var(--h4-size, 20px);
    color: var(--text-color);
}

/* Each section (Check List, Recipient Vendor Information, RMA Information,
   Optic's RMA'ed, Incoming Tracking Numbers) sits in its own bordered
   fieldset.form-col box — same visual treatment as
   css/create/shipping-request.css's/rma.css's fieldset.form-col — but
   stacked full-width, one per row, rather than side by side in a
   .form-row-2col. */
.form-container fieldset.form-col {
    border: 1px solid var(--neu-border);
    border-radius: var(--neu-radius-sm);
    margin: 0 0 20px;
    padding: 18px 16px 12px 16px;
    background: var(--neu-bg-secondary);
}

.form-container fieldset.form-col legend {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--neu-primary);
    padding: 0 8px;
    letter-spacing: 0.5px;
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    display: block;
    font-size: var(--h5-size);
    font-weight: bold;
    font-family: "Poppins";
    margin-bottom: 8px;
    color: var(--text-color);
}

.form-group input:not([type="checkbox"]):not([type="color"]),
.form-group textarea {
    border: none;
    border-radius: var(--neu-radius-sm);
    background: linear-gradient(145deg, var(--neu-bg-secondary), var(--neu-bg-primary));
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
}

.form-group input:not([type="checkbox"]),
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    color: var(--text-color);
    font-size: 16px;
    line-height: 21px;
    font-family: "Poppins", Arial, sans-serif;
    transition: box-shadow 0.3s ease;
    box-sizing: border-box;
}

.form-group input:not([type="checkbox"]):focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light), 0 0 0 2px var(--neu-primary);
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: normal;
    color: var(--text-color);
    cursor: pointer;
    margin-bottom: 10px;
}

/* "Added to FA100 Capture Tracker" + "N/A" sit on one line, N/A to its
   right, matching the reference form's layout instead of stacking as
   separate checkbox rows. */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.checkbox-row .checkbox-group {
    margin-bottom: 10px;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
    transform: scale(1.2);
}

/* Three fields (VPN/PN/QTY or Tracking#/PN/QTY) per line item row in
   "Optic's RMA'ed" and "Incoming Tracking Numbers". */
.optic-line-group {
    margin-bottom: 14px;
}

.optic-line-row {
    display: flex;
    gap: 10px;
}

.optic-line-row input {
    flex: 1;
    min-width: 0;
}

.optic-line-row input[type="number"] {
    flex: 0 0 90px;
}

/* "+ Add Line" — lets the user grow "Optic's RMA'ed"/"Incoming Tracking
   Numbers" past the 4 lines shipped by default (js/opticrma-user.js's
   addOpticLine()). Reuses the sitewide .btn look (same as Clear) rather
   than .btn-primary, since it's a secondary action next to Print/Clear. */
.btn-add-line {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Header row: logo picker + Date Shipped, inline — same pattern as
   css/create/rma.css's .form-header-row/.logo-form-group. */
.form-header-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.form-header-row .form-group {
    flex: 1;
    min-width: 160px;
}

.form-header-row .logo-form-group {
    flex: 0 0 auto;
    min-width: 0;
}

/* Logo picker — identical markup/behavior to bol.php's/rma.php's, styled
   the same way (see css/bol.css's own version of these three rules). */
.logo-selection-container {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.form-header-row .logo-selection-container {
    margin-bottom: 0;
}

.logo-preview {
    width: 200px;
    height: 50px;
    border: none;
    border-radius: var(--neu-radius-sm);
    background: linear-gradient(145deg, var(--neu-bg-secondary), var(--neu-bg-primary));
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.logo-selection-container .neu-dropdown {
    flex: 0 0 200px;
    width: 200px;
}

/* Live Preview card — same treatment as .form-container. */
.preview-container {
    flex: 1;
    width: 100%;
    max-width: 50%;
    min-width: 0;
    margin: 0;
    padding: 20px;
    background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
    box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
    border-radius: var(--neu-radius);
    display: flex;
    flex-direction: column;
}

.column-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.preview-scroll-container {
    --preview-scale: min(0.75, calc(90vw / 816px));
    width: 100%;
    height: calc(1056px * var(--preview-scale) + 30px);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15px;
}

/* =======================================The Optic RMA "page" itself — a
   plain business-form look (Arial, black on white), same technique as
   css/create/rma.css's .rma-preview. */
.opticrma-preview {
    width: 8.5in;
    height: 11in;
    background-color: white;
    color: black;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    margin: 0 auto;
    flex-shrink: 0;
    transform: scale(var(--preview-scale, 0.75));
    transform-origin: top center;
    padding: 0.35in 0.5in;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    overflow: hidden;
}

.opticrma-preview-top {
    position: relative;
    text-align: center;
    margin-bottom: 10px;
    min-height: 36px;
}

.opticrma-preview-logo {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 140px;
    max-height: 40px;
    object-fit: contain;
}

.opticrma-preview-title {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    color: black;
}

.opticrma-preview-header-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 8px;
}

.opticrma-field {
    margin: 3px 0;
    color: black;
}

.opticrma-value {
    text-decoration: underline;
    min-width: 30px;
    display: inline-block;
}

/* Gap before "PN:"/"QTY:" in the "Optic's RMA'ed"/"Incoming Tracking
   Numbers" line items — a real margin instead of piling on   entities,
   so it's one number to tune. */
.opticrma-line-sep {
    margin-left: 50px;
}

.opticrma-section-title {
    margin: 8px 0 6px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline;
    color: black;
}

.opticrma-divider {
    border: none;
    border-top: 1px solid black;
    margin: 8px 0;
}

/* Checklist — each row can carry a second item (a checkbox or a date
   field) aligned to the right, matching the reference form's paired
   layout (e.g. "Added to FA100 Capture Tracker" alongside "N/A"). */
.opticrma-checklist-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 3px 0;
}

/* "Added to FA100 Capture Tracker" + "N/A" — pulled in from the page's
   far-right edge (which .opticrma-checklist-row's space-between would
   otherwise push it to) so N/A sits close after the label, matching the
   reference form's tighter pairing. */
.opticrma-checklist-row-tight {
    justify-content: flex-start;
}

.opticrma-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.opticrma-checkbox {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid black;
    background: white;
    flex-shrink: 0;
}

.opticrma-checkbox.checked {
    background: black;
}

/* Two (or three) fields per row, e.g. "Vendor:" / "POC:" or
   "Select Org:" / "RMA#:" / "Task Number:". */
.opticrma-grid-row {
    display: flex;
    gap: 20px;
}

.opticrma-grid-row .opticrma-field {
    flex: 1;
    min-width: 0;
}

.opticrma-grid-row-3 .opticrma-field {
    flex: 1 1 0;
}

/*-------------------- Media Queries For Printing --------------------*/
@media print {
    @page {
        size: letter;
        margin: 0;
    }

    #global-notification-container,
    .global-notification,
    .notification-container,
    .toast,
    .alert,
    .error-message,
    .success-message,
    .warning-message,
    .info-message {
        display: none !important;
        visibility: hidden !important;
    }

    body * {
        visibility: hidden;
    }

    .opticrma-preview,
    .opticrma-preview * {
        visibility: visible;
    }

    .header, .footer, .form-container {
        display: none !important;
    }

    .container {
        padding: 0;
        margin: 0;
    }

    body, html, .content, .preview-container, .preview-scroll-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .opticrma-preview {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0.35in 0.5in !important;
        box-shadow: none !important;
        transform: none !important;
        page-break-after: always !important;
    }
}

/* Stack .form-container and .preview-container vertically once the
   50/50 split gets too tight — "screen" scoped deliberately, same
   reasoning as css/create/rma.css's identical breakpoint. */
@media screen and (max-width: 900px) {
    .container {
        flex-direction: column;
    }

    .form-container,
    .preview-container {
        max-width: 100%;
    }

    .preview-container {
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .form-container {
        margin: 0 10px;
        padding: 20px;
    }

    .form-header-row {
        flex-direction: column;
        gap: 0;
    }

    .logo-selection-container {
        flex-direction: column;
        align-items: stretch;
    }

    .logo-selection-container .neu-dropdown {
        flex: 1 1 auto;
        width: 100%;
    }

    .logo-preview {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .optic-line-row {
        flex-direction: column;
    }

    .optic-line-row input[type="number"] {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .form-container {
        margin: 0 5px;
        padding: 15px;
    }

    .form-container h1 {
        font-size: var(--h3-size);
    }

    .form-group input:not([type="checkbox"]),
    .form-group textarea,
    .form-group select {
        padding: 10px 12px;
        font-size: 16px;
    }

    /* Save/Load/Clear/Print row — .column-buttons was missing flex-wrap
       entirely (fixed above), so on a narrow phone these 4 buttons at the
       desktop .btn padding either overflowed or squeezed together instead
       of wrapping cleanly. Wrapping now works; this shrinks the buttons
       themselves too so 2-per-row looks proportionate rather than each
       one nearly filling the screen width. */
    .column-buttons {
        gap: 6px;
    }

    .column-buttons .btn {
        padding: 8px 14px;
        font-size: 0.8rem;
        gap: 6px;
    }
}