/*
|--------------------------------------------------------------------------
| SHIPRIGHT MOBILE RESPONSIVENESS V1
|--------------------------------------------------------------------------
|
| Mobile safety layer only.
| Existing desktop design remains authoritative.
|
*/

html {
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
picture,
video,
canvas {
    max-width: 100%;
}

img,
video {
    height: auto;
}

iframe {
    max-width: 100%;
}

/*
|--------------------------------------------------------------------------
| PORTAL WIDTH SAFETY
|--------------------------------------------------------------------------
*/

.shell,
.main,
main,
.topbar,
.card,
.panel,
.content,
.page,
.page-content {
    min-width: 0;
    max-width: 100%;
}

.main {
    overflow-x: clip;
}

.main > * {
    min-width: 0;
    max-width: 100%;
}

.card,
.panel {
    overflow-wrap: anywhere;
}

.mono,
code,
pre,
td,
th,
p,
span,
a {
    overflow-wrap: anywhere;
}

pre {
    white-space: pre-wrap;
}

/*
|--------------------------------------------------------------------------
| INPUTS / FORMS
|--------------------------------------------------------------------------
*/

input,
select,
textarea {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

form {
    max-width: 100%;
}

fieldset {
    min-width: 0;
    max-width: 100%;
}

/*
|--------------------------------------------------------------------------
| TABLE SAFETY
|--------------------------------------------------------------------------
*/

.sr-mobile-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: inherit;
}

.sr-mobile-table-scroll > table {
    margin-bottom: 0;
}

table {
    max-width: 100%;
}

table td,
table th {
    overflow-wrap: anywhere;
}

table.sr-mobile-wide-table {
    min-width: 680px;
}

/*
|--------------------------------------------------------------------------
| AUTH / LOGIN / REGISTER
|--------------------------------------------------------------------------
*/

.sr-auth-shell,
.sr-auth-stage,
.sr-auth-panel,
.sr-auth-visual,
.sr-register-stage {
    min-width: 0;
    max-width: 100%;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 960px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /*
     * Sidebar becomes overlay/navigation drawer.
     * Do not allow sidebar width to enlarge the document.
     */
    .shell {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
    }

    .main {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        overflow-x: clip;
    }

    .sidebar {
        max-width: min(88vw, 320px);
    }

    /*
     * Top navigation.
     */
    .topbar {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
    }

    .topbar-title {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 220px;
    }

    .topbar-title > div {
        min-width: 0;
    }

    .topbar h1 {
        overflow-wrap: anywhere;
    }

    .topbar-actions {
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap !important;
        justify-content: flex-start;
    }

    /*
     * Button groups.
     */
    .main [style*="display:flex"],
    .main [style*="display: flex"] {
        max-width: 100%;
        min-width: 0;
        flex-wrap: wrap !important;
    }

    /*
     * Do not allow badges/status elements to make cards wider.
     */
    .badge {
        max-width: 100%;
        white-space: normal !important;
    }

    /*
     * Pagination / tabs.
     */
    .tabs,
    .tab-list,
    .filters,
    .actions,
    .toolbar,
    .button-row {
        max-width: 100%;
        flex-wrap: wrap;
    }

    /*
     * Modal safety.
     */
    .modal,
    .modal-card,
    .dialog,
    [role="dialog"] {
        max-width: calc(100vw - 24px) !important;
    }

    /*
     * Authentication.
     */
    .sr-auth-shell {
        width: 100%;
        min-height: 100dvh;
    }

    .sr-auth-stage,
    .sr-register-stage {
        width: 100%;
        max-width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| PHONE WIDTH
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    /*
     * Portal spacing.
     */
    .main {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .topbar {
        padding-left: 0;
        padding-right: 0;
    }

    .topbar-actions {
        width: 100%;
    }

    /*
     * Convert inline multi-column portal grids to a single column.
     *
     * This catches existing Blade views that use inline
     * grid-template-columns values.
     */
    .main [style*="grid-template-columns"] {
        grid-template-columns:
            minmax(0, 1fr)
            !important;
    }

    /*
     * Existing fixed inline widths should not exceed phone width.
     */
    .main [style*="width:"] {
        max-width: 100% !important;
    }

    /*
     * Cards.
     */
    .card,
    .panel {
        width: 100%;
        max-width: 100%;
    }

    /*
     * Forms.
     */
    .main input:not([type="checkbox"]):not([type="radio"]),
    .main select,
    .main textarea {
        width: 100%;
        max-width: 100%;
    }

    /*
     * Buttons remain usable and can wrap their text.
     */
    .btn,
    button {
        max-width: 100%;
        white-space: normal;
    }

    /*
     * Tables with many columns scroll locally.
     */
    .sr-mobile-table-scroll {
        margin-left: 0;
        margin-right: 0;
    }

    /*
     * Prevent huge tracking/reference strings from forcing width.
     */
    .mono,
    code {
        word-break: break-word;
    }

    /*
     * Alerts and announcements.
     */
    .sr-news-alert,
    .announcement-banner {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /*
     * Auth/login/register.
     */
    .sr-auth-stage,
    .sr-register-stage {
        display: block !important;
        max-width: 100%;
    }

    .sr-auth-visual,
    .sr-auth-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .sr-auth-panel {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/*
|--------------------------------------------------------------------------
| VERY SMALL PHONES
|--------------------------------------------------------------------------
*/

@media (max-width: 420px) {

    .main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .topbar h1 {
        font-size: 20px !important;
        line-height: 1.2;
    }

    .eyebrow {
        font-size: 10px;
    }

    .card,
    .panel {
        border-radius: 12px;
    }

    .btn {
        min-height: 40px;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}