/* =========================================================
   MOBILE / NARROW VIEWPORT
   ========================================================= */

@media (max-width: 900px) {

    /* =====================================================
       SIDEBAR
       ===================================================== */

    .ds-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--ds-sidebar-width);
        transform: translateX(-100%);
        z-index: 1000;
        transition: transform var(--ds-transition);
    }


    /* =====================================================
       SIDEBAR OPEN
       ===================================================== */

    .ds-app.ds-sidebar-collapsed .ds-sidebar {
        width: var(--ds-sidebar-width);
        transform: translateX(0);
    }


    /* =====================================================
       MAIN
       ===================================================== */

    .ds-main {
        width: 100%;
        margin-left: 0;
    }


    .ds-app.ds-sidebar-collapsed .ds-main {
        width: 100%;
        margin-left: 0;
    }


    /* =====================================================
       TOPBAR
       ===================================================== */

    .ds-topbar {
        padding: 0 16px;
    }


    .ds-topbar-left {
        gap: 12px;
    }


    /* =====================================================
       MOBILE MENU BUTTON
       ===================================================== */

    .ds-mobile-menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--ds-text-secondary);
        font-family: inherit;
        font-size: 20px;
        cursor: pointer;
        flex-shrink: 0;
        transition: background var(--ds-transition), color var(--ds-transition);
    }


        .ds-mobile-menu-button:hover {
            background: rgba(99, 102, 241, 0.06);
            color: #c7c9f8;
        }


    /* =====================================================
       CONTENT
       ===================================================== */

    .ds-content {
        padding: 20px;
    }


    /* =====================================================
       USER
       ===================================================== */

    .ds-user-info {
        display: none;
    }


    /* =====================================================
       DESKTOP COLLAPSE MUST NOT APPLY ON MOBILE
       ===================================================== */

    .ds-app.ds-sidebar-collapsed .ds-menu-text,
    .ds-app.ds-sidebar-collapsed .ds-nav-item span:last-child {
        opacity: 1;
        width: auto;
        overflow: visible;
    }


    .ds-app.ds-sidebar-collapsed .ds-nav-item {
        justify-content: flex-start;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
        padding: 0 13px;
    }

    .ds-app.ds-sidebar-collapsed .ds-menu-button {
        justify-content: flex-start;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
        padding: 0 13px;
    }
}


/* =========================================================
   MOBILE BUTTON
   HIDDEN BY DEFAULT
   ========================================================= */

.ds-mobile-menu-button {
    display: none;
}

@media (max-width: 900px) {

    .ds-mobile-menu-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--ds-text-secondary);
        font-family: inherit;
        font-size: 20px;
        cursor: pointer;
        flex-shrink: 0;
    }
}

/* =========================================================
   PROFILE - MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .ds-profile-page {
        max-width: 100%;
    }

    .ds-profile-header {
        margin-bottom: 22px;
    }

        .ds-profile-header h1 {
            font-size: 25px;
        }

    .ds-profile-card {
        padding: 20px;
        margin-bottom: 14px;
    }

    .ds-profile-card-header {
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .ds-profile-fields {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ds-profile-field-full {
        grid-column: auto;
    }

    .ds-profile-role-button {
        min-height: 60px;
        padding: 0 15px;
    }

    .ds-profile-role-description {
        display: none;
    }

    .ds-profile-role-icon {
        width: 36px;
        height: 36px;
    }

    .ds-profile-form {
        padding: 18px;
    }

    .ds-profile-form-actions {
        flex-direction: column;
    }

        .ds-profile-form-actions .ds-button {
            width: 100%;
        }

    .ds-profile-cars-header {
        flex-direction: column;
        align-items: stretch;
    }

        .ds-profile-cars-header .ds-button {
            width: 100%;
        }

    .ds-profile-car-details {
        grid-template-columns: 1fr 1fr;
    }

    .ds-profile-car-actions {
        flex-direction: column;
    }

        .ds-profile-car-actions .ds-button {
            width: 100%;
        }

        .ds-profile-car-actions form {
            width: 100%;
        }


}

/* =========================================================
   DRIVER DASHBOARD - MOBILE
   ========================================================= */

@media (max-width: 1050px) {
    .driver-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .request-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .driver-hero {
        flex-direction: column;
    }

    .driver-online {
        align-self: flex-start;
    }

    .driver-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .driver-card {
        min-height: 105px;
        padding: 16px;
    }

    .driver-stat-value {
        font-size: 26px;
    }

    .driver-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .offer-form {
        flex-direction: column;
        align-items: stretch;
    }

    .offer-button,
    .confirm-button {
        width: 100%;
    }

    .notice {
        flex-direction: column;
        gap: 8px;
    }

    .notice-date {
        white-space: normal;
    }
}

/* =========================================================
   CUSTOMER / VISITOR DASHBOARD
   ========================================================= */

@media (max-width: 950px) {
    .customer-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .offer {
        grid-template-columns: 1fr auto;
    }

    .offer .offer-button-wrap {
        grid-column: 2;
    }

    .offer-price {
        justify-self: end;
    }

    .ride-top {
        flex-direction: column;
    }

    .ride-status {
        align-self: flex-start;
    }
}

@media (max-width: 640px) {
    .ds-geo-import-card {
        max-width: none;
        padding: 24px;
    }

    .ds-geo-stats {
        grid-template-columns: 1fr;
    }

    .ds-geo-progress-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}

/* =========================================================
   GEOSYSTEM SELECTOR - MOBILE
   ========================================================= */

@media (max-width: 650px) {
    .ds-geo-country-select {
        min-height: 50px;
        font-size: 15px;
        padding-left: 14px;
    }
}


/* =========================================================
   DATE CONTROL - TABLET
   ========================================================= */
@media (min-width: 901px) and (max-width: 1100px) {
    .ds-date-control__input {
        min-height: 44px;
        height: 44px;
        border-radius: 10px;
        font-size: 14px;
    }
}

/* =========================================================
   TIME CONTROL - TABLET
   ========================================================= */
@media (min-width: 901px) and (max-width: 1100px) {
    .ds-time-control__input {
        min-height: 44px;
        height: 44px;
        border-radius: 10px;
        font-size: 14px;
    }
}

/* =========================================================
   DATE CONTROL - PHONE
   ========================================================= */
@media (max-width: 650px) {
    .ds-date-time-controls {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .ds-date-control__input {
        min-height: 44px;
        height: 44px;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 14px;
    }
}

/* =========================================================
   TIME CONTROL - PHONE
   ========================================================= */
@media (max-width: 650px) {
    .ds-time-control__input {
        min-height: 44px;
        height: 44px;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 14px;
    }
}

@media (max-width: 650px) {
    .ds-date-control__popup,
    .ds-time-control__popup { top: calc(100% + 6px); border-radius: 10px; padding: 7px; }
    .ds-date-control__day { min-height: 34px; }
    .ds-time-control__popup { max-height: 250px; }
    .ds-time-control__choice { min-height: 34px; font-size: 12px; }
}