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

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

@media (max-width: 900px) {

    html,
    body {
        min-width: 0 !important;
    }

    .main,
    html[dir="rtl"] .main,
    html[dir="ltr"] .main,
    body.smart-sidebar-compact .main,
    html[dir="rtl"] body.smart-sidebar-compact .main,
    html[dir="ltr"] body.smart-sidebar-compact .main {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Mobile sidebar */

    .sidebar,
    body.smart-sidebar-compact .sidebar {
        position: fixed !important;

        top: 0 !important;
        bottom: 0 !important;

        width: min(285px, 86vw) !important;
        height: 100dvh !important;

        z-index: 5000 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        transition: transform .28s cubic-bezier(.2,.8,.2,1) !important;
    }

    html[dir="rtl"] .sidebar {
        right: 0 !important;
        left: auto !important;

        transform: translateX(105%) !important;
    }

    html[dir="ltr"] .sidebar {
        left: 0 !important;
        right: auto !important;

        transform: translateX(-105%) !important;
    }

    .sidebar.open,
    html[dir="rtl"] .sidebar.open,
    html[dir="ltr"] .sidebar.open {
        transform: translateX(0) !important;
    }

    /* Disable compact desktop sidebar */

    body.smart-sidebar-compact .sidebar {
        width: min(285px, 86vw) !important;
    }

    body.smart-sidebar-compact .sidebar .sidebar-profile-details {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.smart-sidebar-compact .sidebar .nav-link {
        font-size: inherit !important;
        justify-content: initial !important;

        padding-left: initial !important;
        padding-right: initial !important;

        gap: initial !important;
    }

    body.smart-sidebar-compact
    .sidebar
    .nav-link
    > span:not(.nav-icon) {
        display: inline !important;

        opacity: 1 !important;
        visibility: visible !important;

        width: auto !important;
        max-width: none !important;

        pointer-events: auto !important;
    }

    body.smart-sidebar-compact .sidebar .nav-title,
    body.smart-sidebar-compact .sidebar .language-sidebar-title,
    body.smart-sidebar-compact .sidebar .language-sidebar-options {
        display: block !important;

        opacity: 1 !important;
        visibility: visible !important;

        width: auto !important;
        max-width: none !important;
    }

    /* Page containers */

    .content,
    .page-content,
    .account-shell,
    .account-page-shell,
    .owner-shell,
    .signup-shell,
    .signup-compact-shell,
    .login-shell,
    .flow-shell {
        width: calc(100% - 28px) !important;
        max-width: 680px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Login / signup */

    .login-shell,
    .signup-compact-shell,
    .flow-shell {
        margin-top: 28px !important;
        margin-bottom: 70px !important;
    }

    .login-card,
    .signup-compact-card,
    .flow-card,
    .signup-card {
        width: 100% !important;
        max-width: 100% !important;

        padding: 26px 18px !important;
    }

    .signup-layout {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        grid-template-columns: 1fr !important;
    }

    .signup-intro {
        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 24px !important;
    }

    /* Forms */

    .login-card input,
    .signup-field input,
    .signup-compact-field input,
    .flow-field input,
    .classified-field input,
    .classified-field select,
    .classified-field textarea {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        font-size: 16px !important;
    }

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

    /* Profile */

    .account-page-grid {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        gap: 20px !important;
    }

    .account-main-panel,
    .account-side-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    .account-side-panel {
        position: static !important;
        order: -1;
    }

    .classified-form-card,
    .profile-identity-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Owner */

    .owner-stats,
    .owner-modules {
        grid-template-columns: 1fr !important;
    }

    /* Tables */

    .owner-table-wrap {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch;
    }

    .invoice-table {
        min-width: 600px;
    }

    /* Text safety */

    h1,
    h2,
    h3,
    p,
    label,
    span,
    a,
    strong {
        overflow-wrap: break-word;
    }
}

@media (max-width: 480px) {

    .login-card,
    .signup-compact-card,
    .flow-card,
    .classified-form-card,
    .profile-identity-card {
        padding: 22px 16px !important;
    }

    .signup-progress {
        padding: 10px 8px !important;
    }

    .signup-progress-item {
        min-width: 38px !important;
    }

    .account-section-head h1,
    .signup-compact-card h1,
    .login-card h1,
    .flow-card h1 {
        font-size: 22px !important;
    }

    .profile-identity-top {
        flex-direction: column !important;
        align-items: center !important;

        text-align: center !important;
    }

    .profile-avatar-image,
    .profile-avatar-fallback {
        width: 78px !important;
        height: 78px !important;
    }
}


/* =========================================================
   CLASSIFIED — UNIFIED SIDEBAR USER PROFILE
   Desktop / Tablet / Mobile
========================================================= */

.sidebar-profile-link,
.account-user-link.logged-account {
    display: flex !important;
    align-items: center !important;

    gap: 11px !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;

    padding: 9px 10px !important;

    overflow: hidden !important;
}


/* AVATAR — NEVER ALLOW RESIZE */

.sidebar-profile-link .sidebar-profile-avatar,
.account-user-link .sidebar-profile-avatar,
.sidebar img.sidebar-profile-avatar {
    display: block !important;

    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    max-width: 38px !important;
    max-height: 38px !important;

    flex: 0 0 38px !important;

    aspect-ratio: 1 / 1 !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 50% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* FALLBACK AVATAR */

.sidebar-profile-fallback {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    max-width: 38px !important;
    max-height: 38px !important;

    flex: 0 0 38px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 50% !important;

    font-size: 11px !important;
}


/* USER INFORMATION */

.sidebar-profile-details {
    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;

    min-width: 0 !important;
    max-width: 100% !important;

    overflow: hidden !important;

    line-height: 1.2 !important;
}


.sidebar-profile-name {
    display: block !important;

    max-width: 150px !important;

    overflow: hidden !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    font-size: 12px !important;
    font-weight: 650 !important;

    line-height: 1.25 !important;
}


.sidebar-profile-username {
    display: block !important;

    max-width: 150px !important;

    margin-top: 2px !important;

    overflow: hidden !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    font-size: 9px !important;

    line-height: 1.25 !important;
}


.sidebar-profile-role {
    display: block !important;

    margin-top: 3px !important;

    font-size: 8px !important;
    font-weight: 650 !important;

    line-height: 1.2 !important;
}


/* =========================================================
   DESKTOP SMART SIDEBAR — COMPACT
========================================================= */

@media (min-width: 901px) {

    body.smart-sidebar-compact
    .sidebar:not(:hover)
    .sidebar-profile-link {

        justify-content: center !important;

        gap: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    body.smart-sidebar-compact
    .sidebar:not(:hover)
    .sidebar-profile-details {

        display: none !important;
    }


    body.smart-sidebar-compact
    .sidebar:not(:hover)
    .sidebar-profile-avatar {

        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
        min-height: 36px !important;

        max-width: 36px !important;
        max-height: 36px !important;

        flex-basis: 36px !important;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 601px) and (max-width: 900px) {

    .sidebar-profile-link .sidebar-profile-avatar,
    .sidebar img.sidebar-profile-avatar,
    .sidebar-profile-fallback {

        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;

        max-width: 38px !important;
        max-height: 38px !important;

        flex: 0 0 38px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .sidebar-profile-link,
    .account-user-link.logged-account {

        min-height: 54px !important;

        padding: 8px 9px !important;

        gap: 10px !important;
    }


    .sidebar-profile-link .sidebar-profile-avatar,
    .account-user-link .sidebar-profile-avatar,
    .sidebar img.sidebar-profile-avatar,
    .sidebar-profile-fallback {

        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
        min-height: 36px !important;

        max-width: 36px !important;
        max-height: 36px !important;

        flex: 0 0 36px !important;
    }


    .sidebar-profile-name {

        max-width: 145px !important;

        font-size: 11px !important;
    }


    .sidebar-profile-username {

        max-width: 145px !important;

        font-size: 9px !important;
    }


    .sidebar-profile-role {

        font-size: 8px !important;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .sidebar-profile-name,
    .sidebar-profile-username {

        max-width: 125px !important;
    }

}