/* IJMTIP UI Hotfix v2.0.2
   Single authoritative responsive rule for submission file cards.
   Avoids breakpoint fights between older patches.
*/

/* Keep submission surfaces inside the viewport. */
html,body{max-width:100%;overflow-x:hidden}
.site-main,
.submission-site-main,
.submission-wizard-shell,
.wizard-form,
.wizard-card{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

/* ----- FILE CARD: ONE STABLE RULE ----- */
.submission-site-main .wizard-file-row,
.site-main .wizard-file-row,
.submission-wizard-shell .wizard-file-row,
.wizard-form .wizard-file-row,
.wizard-file-row{
    display:flex !important;
    flex-flow:row wrap !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:18px !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    padding:20px 24px !important;

    /* cancel old grid generations */
    grid-template-columns:none !important;
}

/* Main information area takes remaining space. */
.wizard-file-row > .wizard-file-info{
    flex:1 1 520px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
}

.wizard-file-row .wizard-file-title-row{
    min-width:0 !important;
    max-width:100% !important;
}
.wizard-file-row .wizard-file-title-row h2{
    margin:0 0 3px !important;
    font-size:19px !important;
    line-height:1.25 !important;
}
.wizard-file-row .wizard-file-info > p{
    margin:7px 0 !important;
    line-height:1.5 !important;
}

.wizard-file-row .existing-files{
    margin-top:12px !important;
    padding-top:10px !important;
    min-width:0 !important;
    max-width:100% !important;
}
.wizard-file-row .existing-file-item{
    margin-top:7px !important;
    padding:8px 10px !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}
.wizard-file-row .existing-file-item > *{
    min-width:0 !important;
}
.wizard-file-row .existing-file-item strong,
.wizard-file-row .existing-file-item b,
.wizard-file-row .existing-file-item span,
.wizard-file-row .existing-file-item small{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
}

/* Uploader never becomes a giant half-page panel. */
.submission-site-main .wizard-file-row > .file-drop-zone,
.site-main .wizard-file-row > .file-drop-zone,
.submission-wizard-shell .wizard-file-row > .file-drop-zone,
.wizard-form .wizard-file-row > .file-drop-zone,
.wizard-file-row > .file-drop-zone{
    flex:0 0 286px !important;
    width:286px !important;
    max-width:286px !important;
    min-width:0 !important;
    min-height:112px !important;
    height:auto !important;

    align-self:center !important;
    justify-self:auto !important;
    margin:0 !important;
    padding:13px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;

    display:grid !important;
    grid-template-columns:36px minmax(0,1fr) !important;
    grid-template-areas:
        "icon copy"
        "button button"
        "selection selection" !important;
    column-gap:10px !important;
    row-gap:7px !important;
}

.wizard-file-row .drop-zone-icon{
    grid-area:icon !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    margin:0 !important;
    font-size:18px !important;
}

.wizard-file-row .drop-zone-copy{
    grid-area:copy !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
}
.wizard-file-row .drop-zone-copy strong{
    display:block !important;
    margin:0 !important;
    font-size:11.5px !important;
    line-height:1.3 !important;
    overflow-wrap:anywhere !important;
}
.wizard-file-row .drop-zone-copy small{
    display:block !important;
    margin-top:3px !important;
    font-size:9.5px !important;
    line-height:1.35 !important;
    overflow-wrap:anywhere !important;
}

.wizard-file-row .drop-zone-button{
    grid-area:button !important;
    justify-self:start !important;
    align-self:center !important;
    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:7px 10px !important;
    font-size:10px !important;
    line-height:1.2 !important;
    white-space:normal !important;
}
.wizard-file-row .drop-zone-selection{
    grid-area:selection !important;
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    font-size:9px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

/* Flex decides when it must wrap. Only phones force full-width uploader. */
@media(max-width:680px){
    .submission-site-main .wizard-file-row,
    .site-main .wizard-file-row,
    .submission-wizard-shell .wizard-file-row,
    .wizard-form .wizard-file-row,
    .wizard-file-row{
        padding:16px !important;
        gap:13px !important;
    }

    .wizard-file-row > .wizard-file-info{
        flex:1 1 100% !important;
    }

    .submission-site-main .wizard-file-row > .file-drop-zone,
    .site-main .wizard-file-row > .file-drop-zone,
    .submission-wizard-shell .wizard-file-row > .file-drop-zone,
    .wizard-form .wizard-file-row > .file-drop-zone,
    .wizard-file-row > .file-drop-zone{
        flex:1 1 100% !important;
        width:100% !important;
        max-width:100% !important;
    }
}

/* ----- WIZARD STEP STRIP: ALSO STABLE AT ALL RESOLUTIONS ----- */
.wizard-steps{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    overflow-x:visible !important;
    gap:5px !important;
    box-sizing:border-box !important;
}
.wizard-steps > *{
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
}
@media(max-width:980px){
    .wizard-steps{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}
@media(max-width:620px){
    .wizard-steps{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}