/* =======================================Form labels/headers — same
   neu form scaffolding as css/create/placard.css (each tool page owns its
   own copy of these rules rather than sharing one file — same pattern
   already used by placard.css/imo.css/shipping-request.css). */
.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 {
    grid-column: 1 / -1;
    margin: 10px 0 15px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--neu-shadow-dark);
    font-size: var(--h4-size, 20px);
    color: var(--text-color);
}

/* Defective/Replacement Asset Information side by side — same
   .form-row-2col > fieldset.form-col layout css/create/shipping-request.css
   uses for its own Shipper/Recipient Information split. */
.form-row-2col {
    display: flex;
    gap: 32px;
    margin-bottom: 18px;
}

.form-row-2col .form-col {
    flex: 1 1 0;
    min-width: 0;
    max-width: 50%;
    box-sizing: border-box;
}

.form-container fieldset.form-col {
    border: 1px solid var(--neu-border);
    border-radius: var(--neu-radius-sm);
    margin: 0;
    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;
}

/* screen-scoped: a printed Letter page is ~816px in CSS px, which falls
   under this breakpoint too — same reasoning as shipping-request.css's
   identical breakpoint. */
@media screen and (max-width: 700px) {
    .form-row-2col {
        flex-direction: column;
        gap: 0;
    }

    .form-row-2col .form-col {
        max-width: 100%;
        margin-bottom: 18px;
    }
}

.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;
}

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

.rma-type-row {
    display: flex;
    gap: 20px;
}

/* Click-to-upload asset tag photo box — themed inset panel matching the
   rest of this page's form controls, with a boxicon + label until a file
   is chosen (js/rma-user.js's handleRMAPhotoUpload swaps this content for
   an <img> thumbnail). Client-side only, same as the rest of this page —
   nothing is actually uploaded anywhere. */
.rma-photo-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 120px;
    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);
    color: var(--text-color);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    padding: 8px;
}

.rma-photo-upload i {
    font-size: 28px;
    color: var(--neu-primary);
}

.rma-photo-upload img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--neu-radius-sm);
}

/* Two Column Layout (entry fields only — live preview is .preview-container,
   a sibling of .form-container). */
.form-row-two {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-column-two {
    flex: 1;
}

.form-column-two .form-group {
    margin-bottom: 20px;
}

/* Logo picker sits alongside Initiation Date on one row — the picker
   itself is a fixed-width flex row (below), so this outer wrapper just
   needs to let it and the date field's .form-group share the line. */
.form-header-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

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

/* The logo picker needs its own content width (logo-preview + dropdown
   side by side, ~410px) rather than sharing the row 50/50 with Initiation
   Date like the generic rule above assumes — at an even split it was
   narrower than that, so .logo-selection-container's flex-wrap wrapped the
   preview and dropdown onto two lines instead of sitting inline. */
.form-header-row .logo-form-group {
    flex: 0 0 auto;
    min-width: 0;
}

/* Logo picker — identical markup/behavior to bol.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;
}

/* Wrapped in its own labeled .form-group here (see .form-header-row above)
   so it lines up with Initiation Date's label+input stack instead of
   sitting higher, unlabeled, next to it — the .form-group already
   supplies the row's bottom margin, so this would just double it up. */
.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;
}

/* Live Preview — same .preview-scroll-container / .<tool>-preview scaled
   "page" technique as css/create/placard.css / css/bol.css / css/create/
   imo.css. */
.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 RMA "page" itself — a plain
   business-form look (Arial, black on white) rather than this site's own
   Poppins/neu styling, since it's meant to read as an actual printable
   internal form, matching the reference design. */
.rma-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.4in 0.5in;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

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

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

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

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

.rma-field {
    margin: 5px 0;
    color: black;
}

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

.rma-section-title {
    margin: 10px 0 8px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: underline;
    color: black;
}

.rma-preview-section-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.rma-preview-fields {
    flex: 1;
    min-width: 0;
}

.rma-type-field {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

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

.rma-checkbox {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid black;
    background: white;
}

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

.rma-preview-photo {
    flex-shrink: 0;
    width: 150px;
    text-align: center;
    /* Nudged down and in from the page's right edge, away from the
       DEFECTIVE ASSET INFORMATION heading it was crowding flush against —
       margin-right pulled in further (and margin-top down a touch more)
       to sit closer to the page's horizontal/vertical center. */
    margin-top: 48px;
    margin-right: 150px;
}

.rma-photo-box {
    width: 150px;
    height: 130px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: white;
}

.rma-photo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#pv-photo-placeholder {
    font-size: 10px;
    color: #888;
    padding: 4px;
    text-align: center;
}

.rma-photo-caption {
    margin: 4px 0 0;
    font-size: 10px;
    color: black;
}

.rma-divider {
    border: none;
    border-top: 1px solid black;
    margin: 16px 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;
    }

    .rma-preview,
    .rma-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;
    }

    .rma-preview {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0.4in 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/placard.css's identical breakpoint (an unscoped
   query would also match while printing, since a Letter page is ~816px in
   CSS px). */
@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-row-two {
        flex-direction: column;
        gap: 0;
    }

    .form-column-two {
        flex: none;
    }

    .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;
    }

    .rma-type-row {
        flex-direction: column;
        gap: 8px;
    }
}

@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;
    }
}