/* MBOVerse Partners - Mobile UI */

@media (max-width: 700px) {

html, body {
    width: 100%;
    margin: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

.app-shell {
    display: block;
    width: 100%;
}

main {
    width: 100%;
    min-width: 0;
}

.topbar {
    height: 56px !important;
    padding: 0 14px !important;
}

.topbar strong {
    font-size: 15px !important;
}

.topbar span {
    display: none !important;
}

.menu {
    display: block !important;
    font-size: 22px !important;
}

.content {
    padding: 14px 10px 24px !important;
}

.page-head {
    display: block !important;
    margin-bottom: 14px !important;
}

.page-head h1 {
    font-size: 23px !important;
    line-height: 1.15 !important;
    margin: 0 0 6px !important;
}

.page-head p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.grid-2 {
    display: block !important;
}

.grid-2 > * + * {
    margin-top: 14px !important;
}

.panel {
    width: 100% !important;
    padding: 14px 12px !important;
    border-radius: 14px !important;
}

.form-card {
    display: block !important;
}

.form-card h3 {
    font-size: 19px !important;
    margin: 0 0 14px !important;
}

.form-card label {
    display: block !important;
    margin: 0 0 11px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.form-card label input,
.form-card label select,
.form-card label textarea {
    margin-top: 5px !important;
}

.form-row {
    display: block !important;
}

input,
select,
textarea {
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    border-radius: 9px !important;
}

textarea {
    min-height: 70px !important;
}

.primary {
    width: 100% !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
}

.commission-note {
    margin: 10px 0 !important;
    padding: 9px 10px !important;
}

.commission-note b {
    font-size: 12px !important;
}

.commission-note span {
    font-size: 10px !important;
    line-height: 1.35 !important;
}

/* Stats */
.stats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
}

.stat {
    padding: 13px !important;
}

.stat b {
    font-size: 19px !important;
}

/* Tables */
.table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

table {
    min-width: 680px !important;
}

/* Mobile sidebar */
.sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -260px !important;
    width: 250px !important;
    height: 100dvh !important;
    z-index: 5000 !important;
    padding: 12px 10px !important;
    overflow-y: auto !important;
    transition: left .22s ease !important;
}

body.nav-open .sidebar {
    left: 0 !important;
}

.brand-official {
    margin: 4px 3px 14px !important;
    padding: 10px !important;
}

.brand-official .brand-logo {
    width: 135px !important;
}

.sidebar nav a {
    padding: 10px 11px !important;
    font-size: 13px !important;
}

/* Change password */
.password-modal {
    padding: 8px !important;
}

.password-modal-dialog {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important;
    padding: 16px 14px !important;
    border-radius: 16px !important;
}

.password-modal-head h2 {
    font-size: 21px !important;
}

#passwordForm {
    gap: 9px !important;
}

.password-rules {
    grid-template-columns: 1fr 1fr !important;
    padding: 8px !important;
    font-size: 10px !important;
}

.password-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

}