/* Clean responsive behavior for phones, tablets, and desktops. */
@media (min-width: 860px) {
    .mobile-menu-toggle {
        display: none;
    }

    .clean-nav-content {
        grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
    }

    .logo-section {
        grid-column: 1;
    }

    .top-buttons {
        grid-column: 3;
    }

    .nav-menu {
        position: static;
        grid-column: 2;
        width: auto;
        max-width: none;
        height: auto;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .nav-menu ul {
        flex-direction: row;
        justify-content: center;
        gap: 7px;
    }

    .nav-menu a {
        width: auto;
        min-height: 38px;
        padding: 9px 11px;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .clean-drawer-head {
        display: none;
    }

    .calculator-container {
        grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
    }
}

@media (max-width: 859px) {
    :root {
        --nav-height: 58px;
    }

    body.clean-nav-shell main,
    body.clean-nav-shell #home-content > main,
    body.clean-nav-shell #admin-content > main {
        margin-top: 10px;
    }

    .clean-nav-bar {
        padding: 8px 0;
    }

    .clean-nav-content {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .top-buttons .button,
    .top-buttons button {
        width: auto;
        max-width: 94px;
        min-height: 36px;
        padding: 8px 10px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    body.admin-dashboard .top-buttons {
        max-width: 42vw;
        overflow: hidden;
    }

    body.admin-dashboard .top-buttons .user-info {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .section,
    body.unified-content main > .section,
    .admin-panel,
    .dashboard-user-strip,
    .policy-section,
    .terms-section,
    .warning-box {
        padding: 12px;
    }

    .features-grid,
    .trust-items,
    .schedule-grid,
    .stats-grid,
    .referral-stats-grid,
    .community-grid,
    .benefits-list,
    .admin-stats-grid,
    .config-grid,
    .form-grid,
    .compact-grid,
    .action-buttons-grid,
    .users-stats,
    .bids-stats,
    .hero-stats,
    .hero-panels,
    .calculator-container {
        grid-template-columns: 1fr;
    }

    .admin-actions,
    .search-filters,
    .action-buttons,
    .special-bid-actions,
    .referral-link-container,
    .referral-code-display,
    .referral-actions,
    .auth-links,
    .footer-content,
    .footer-bottom,
    .users-header,
    .bids-header,
    .special-bid-header {
        flex-direction: column;
        align-items: stretch;
    }

    button,
    .button,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-warning,
    .auth-button,
    .login-btn,
    .register-btn,
    .forgot-btn,
    .action-btn,
    a.button,
    input[type="button"],
    input[type="submit"] {
        width: 100%;
        min-height: 44px;
    }

    .btn-sm,
    .btn-small,
    .modal-close,
    .toggle-password,
    .notification-close,
    .clean-drawer-close,
    .search-button,
    .notification-bell,
    .mobile-menu-toggle {
        width: auto;
        flex: 0 0 auto;
    }

    .password-wrapper .input-field {
        min-width: 0;
    }

    .password-wrapper .toggle-password {
        min-width: 58px;
        padding-right: 8px;
        padding-left: 8px;
        white-space: nowrap;
    }

    .referral-actions .btn-sm,
    .action-buttons .button,
    .special-bid-actions .button {
        width: 100%;
    }

    table {
        min-width: 680px;
    }

    .bids-table,
    .admin-table,
    .admin-table-container {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.03);
    }
}

@media (max-width: 520px) {
    body {
        font-size: 14px;
        line-height: 1.45;
    }

    :root {
        --gutter: 10px;
    }

    .clean-nav-content {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 6px;
    }

    .logo-section h1 {
        font-size: 0.98rem;
    }

    .logo-section p {
        display: none;
    }

    .brand-sidebar {
        gap: 8px;
        padding: 7px 10px;
    }

    .brand-mark {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 0.9rem;
    }

    .brand-subtitle {
        display: none;
    }

    .top-buttons {
        gap: 5px;
    }

    .top-buttons .button,
    .top-buttons button {
        max-width: 76px;
        min-height: 34px;
        padding: 7px 7px;
        font-size: 0.68rem;
    }

    .desktop-label {
        display: none;
    }

    .mobile-label {
        display: inline;
    }

    main,
    body.clean-nav-shell main,
    body.clean-nav-shell #home-content > main,
    body.clean-nav-shell #admin-content > main {
        width: calc(100% - 16px);
    }

    .section,
    body.unified-content main > .section,
    .admin-panel,
    .dashboard-user-strip,
    .feature-card,
    .stat-card,
    .stat,
    .trust-item,
    .session-card,
    .community-card,
    .referral-stat-card,
    .referral-link-card,
    .info-card,
    .referrals-list-card,
    .roi-preview,
    .calculator-form,
    .calculator-result,
    .hero-panel,
    .benefit-item,
    .step {
        padding: 10px;
    }

    h2 {
        font-size: 1.08rem;
    }

    h3 {
        font-size: 0.98rem;
    }

    p,
    li,
    small,
    .section-lead {
        font-size: 0.86rem;
    }

    .dashboard-user-strip {
        align-items: center;
    }

    .dashboard-user-strip #user-welcome,
    .user-balance,
    .user-email,
    .last-login,
    .referral-link-input,
    .referral-code {
        overflow-wrap: anywhere;
    }

    .notification-dropdown {
        right: -44px;
    }

    .app-wrapper {
        padding: 16px 10px;
    }
}

@media (min-width: 992px) {
    :root {
        --desktop-sidebar-width: 292px;
        --desktop-content-max: 1040px;
        --desktop-shell-gap: 28px;
    }

    body.landing-page.clean-nav-shell {
        width: 100%;
        margin: 0;
        padding: 0;
        display: block;
    }

    body.landing-page.clean-nav-shell #home-content,
    body.home-dashboard.clean-nav-shell #home-content {
        width: 100%;
        margin: 0;
        display: block;
        padding: 0;
    }

    body.landing-page.clean-nav-shell .clean-nav-bar,
    body.home-dashboard.clean-nav-shell .clean-nav-bar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--desktop-sidebar-width);
        min-height: 100vh;
        max-height: none;
        overflow: auto;
        padding: 18px 14px;
        border: 0;
        border-right: 1px solid var(--color-border);
        border-radius: 0;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: none;
    }

    body.landing-page.clean-nav-shell .clean-nav-content,
    body.home-dashboard.clean-nav-shell .clean-nav-content {
        width: 100%;
        min-height: calc(100vh - 36px);
        margin: 0;
        grid-template-columns: 1fr;
        align-items: start;
        align-content: start;
        gap: 14px;
    }

    body.landing-page.clean-nav-shell .logo-section,
    body.home-dashboard.clean-nav-shell .logo-section,
    body.landing-page.clean-nav-shell .top-buttons,
    body.home-dashboard.clean-nav-shell .top-buttons,
    body.landing-page.clean-nav-shell .nav-menu,
    body.home-dashboard.clean-nav-shell .nav-menu {
        grid-column: 1;
    }

    body.landing-page.clean-nav-shell .brand-sidebar,
    body.home-dashboard.clean-nav-shell .brand-sidebar {
        width: 100%;
        padding: 8px 6px 16px;
        border: 0;
        border-bottom: 1px solid var(--color-border);
        border-left: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body.landing-page.clean-nav-shell .brand-mark,
    body.home-dashboard.clean-nav-shell .brand-mark {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 8px;
    }

    body.landing-page.clean-nav-shell .mobile-menu-toggle,
    body.home-dashboard.clean-nav-shell .mobile-menu-toggle {
        display: none;
    }

    body.landing-page.clean-nav-shell .top-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        margin-top: auto;
        padding-top: 14px;
        border-top: 1px solid var(--color-border);
    }

    body.landing-page.clean-nav-shell .top-buttons .button {
        width: 100%;
        justify-content: center;
        white-space: nowrap;
    }

    body.landing-page.clean-nav-shell .nav-menu,
    body.home-dashboard.clean-nav-shell .nav-menu {
        position: static;
        top: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        max-width: none;
        height: auto;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    body.landing-page.clean-nav-shell .nav-menu ul,
    body.home-dashboard.clean-nav-shell .nav-menu ul {
        flex-direction: column;
        justify-content: flex-start;
        gap: 4px;
    }

    body.landing-page.clean-nav-shell .nav-menu a,
    body.home-dashboard.clean-nav-shell .nav-menu a {
        width: 100%;
        min-height: 42px;
        padding: 9px 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        white-space: normal;
    }

    body.landing-page.clean-nav-shell .nav-menu a.active,
    body.home-dashboard.clean-nav-shell .nav-menu a.active {
        box-shadow: none;
    }

    body.landing-page.clean-nav-shell main,
    body.home-dashboard.clean-nav-shell main {
        width: min(
            var(--desktop-content-max),
            calc(100vw - var(--desktop-sidebar-width) - (var(--desktop-shell-gap) * 2))
        );
        margin: 22px auto 30px;
        margin-left: calc(
            var(--desktop-sidebar-width) +
            max(var(--desktop-shell-gap), ((100vw - var(--desktop-sidebar-width) - var(--desktop-content-max)) / 2))
        );
    }

    body.landing-page.clean-nav-shell footer {
        width: min(
            var(--desktop-content-max),
            calc(100vw - var(--desktop-sidebar-width) - (var(--desktop-shell-gap) * 2))
        );
        margin-left: calc(
            var(--desktop-sidebar-width) +
            max(var(--desktop-shell-gap), ((100vw - var(--desktop-sidebar-width) - var(--desktop-content-max)) / 2))
        );
    }

    body.home-dashboard.clean-nav-shell footer {
        width: min(
            var(--desktop-content-max),
            calc(100vw - var(--desktop-sidebar-width) - (var(--desktop-shell-gap) * 2))
        );
        margin-left: calc(
            var(--desktop-sidebar-width) +
            max(var(--desktop-shell-gap), ((100vw - var(--desktop-sidebar-width) - var(--desktop-content-max)) / 2))
        );
    }

    body.home-dashboard.clean-nav-shell main .section,
    body.landing-page.clean-nav-shell main .section {
        margin-bottom: 16px;
    }

    body.landing-page.clean-nav-shell main > .section:first-child,
    body.home-dashboard.clean-nav-shell main > .section:first-child {
        margin-top: 0;
    }
}