/* Shared phone/tablet safeguards for both the User and Admin panels. */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

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

img,
svg {
    height: auto;
}

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

textarea {
    overflow-wrap: anywhere;
}

p,
label,
th,
td,
h1,
h2,
h3,
h4 {
    overflow-wrap: break-word;
    word-break: normal;
}

span,
a,
button {
    overflow-wrap: normal;
    word-break: normal;
}

.menu-ico.txt-icon,
.title-txt-icon {
    min-width: max-content;
    flex-shrink: 0;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

.menu-label {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.wrap,
.container,
.mobile-shell,
.admin-shell,
.page-shell,
.auth-page,
.auth-card,
.card,
.form-card,
.panel-card,
.list-card,
.uc,
.pm {
    max-width: 100%;
    min-width: 0;
}

.top > *,
.topbar > *,
.admin-topbar > *,
.filter-bar > *,
.form-btns > *,
.card-actions > *,
.uc-row > *,
.pm-row > *,
.list-row > *,
.grid-form > *,
.action-grid > * {
    min-width: 0;
}

.top h1,
.topbar h1,
.admin-topbar h1 {
    font-size: clamp(15px, 4.5vw, 22px);
    line-height: 1.35;
}

.top a,
.topbar a,
.admin-topbar a {
    flex: 0 0 auto;
    white-space: nowrap;
}

.uc-row,
.pm-row,
.list-row {
    gap: 12px;
}

.uc-row .val,
.pm-row .val {
    max-width: 68%;
    text-align: right;
    justify-content: flex-end;
}

table {
    max-width: 100%;
}

@media (max-width: 480px) {
    .top,
    .topbar,
    .admin-topbar {
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .wrap,
    .mobile-shell,
    .admin-shell,
    .page-shell {
        padding-left: clamp(8px, 3vw, 14px);
        padding-right: clamp(8px, 3vw, 14px);
    }

    .auth-page {
        padding: clamp(8px, 4vw, 20px);
        align-items: safe center;
    }

    .auth-card,
    .form-card,
    .panel-card,
    .list-card,
    .uc,
    .pm {
        padding-left: clamp(10px, 4vw, 16px);
        padding-right: clamp(10px, 4vw, 16px);
    }

    .filter-bar:has(.filter-select) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .filter-select {
        max-width: 38vw;
    }

    .form-btns,
    .popup-btns,
    .pay-btns {
        gap: 8px;
    }

    .form-btns > *,
    .popup-btns > *,
    .pay-btns > * {
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
    }

    .bottom-nav a,
    .bottom-nav a small {
        font-size: clamp(8px, 2.5vw, 10px);
        min-width: 0;
    }

    table {
        font-size: clamp(10px, 3vw, 13px);
    }

    th,
    td {
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media (max-width: 360px) {
    .top,
    .topbar,
    .admin-topbar {
        padding-left: 9px;
        padding-right: 9px;
    }

    .top a,
    .topbar a,
    .admin-topbar a {
        font-size: 12px;
    }

    .uc-row,
    .pm-row,
    .list-row {
        font-size: 12px;
        gap: 8px;
    }

    .popup-box,
    .pay-box {
        padding-left: 14px;
        padding-right: 14px;
    }

    .promo-banner-inner,
    .hero-card {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .auth-page {
        align-items: flex-start;
    }

    .popup-overlay,
    .pay-popup,
    .viewer-overlay {
        align-items: flex-start;
        overflow-y: auto;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}