/**
 * Page-specific mobile overrides.
 */

/* ——— Dashboard / Главная ——— */
/* Перебиваем dashboard.css @media 768 (card-in-card, лишние отступы) */
.dashboard-page .main-content {
    padding-top: calc(var(--m-header-h) + env(safe-area-inset-top, 0px) + var(--m-space-md)) !important;
    padding-left: var(--m-content-pad) !important;
    padding-right: var(--m-content-pad) !important;
}

body.has-email-verification-banner .dashboard-page .main-content {
    padding-top: calc(var(--m-header-h) + 48px + env(safe-area-inset-top, 0px) + var(--m-space-md)) !important;
}

.dashboard-page .content-header {
    margin-top: 0 !important;
    margin-bottom: var(--m-space-lg) !important;
}

.quick-request-section {
    margin-bottom: var(--m-space-xl) !important;
}

.dashboard-page .quick-request-card,
.quick-request-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.dashboard-page .quick-request-launch:not([hidden]),
.quick-request-launch:not([hidden]) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-space-md) !important;
}

/* pages.css шёл после dashboard.css и перебивал [hidden] при той же специфичности */
.dashboard-page .quick-request-launch[hidden],
.quick-request-launch[hidden] {
    display: none !important;
}

.quick-request-workspace:not([hidden]) {
    display: block !important;
}

.quick-request-launch > div[style] {
    margin-bottom: 0 !important;
}

.quick-request-launch .section-title {
    font-size: 20px !important;
    margin-bottom: var(--m-space-xs) !important;
}

.quick-request-subtitle {
    font-size: var(--m-font-meta) !important;
    color: var(--tg-text-secondary);
    margin-bottom: var(--m-space-lg) !important;
}

.quick-service-launch-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-space-md) !important;
}

.quick-service-launch-card {
    width: 100% !important;
    min-height: 140px !important;
    border-radius: var(--m-radius-lg) !important;
    padding: var(--m-space-lg) !important;
    text-align: left !important;
    position: relative !important;
    overflow: hidden !important;
}

.quick-service-launch-card__content {
    max-width: 58% !important;
    z-index: 2;
    position: relative;
}

.quick-service-launch-card__title {
    font-size: 20px !important;
}

.quick-service-launch-card__desc {
    font-size: var(--m-font-meta) !important;
    line-height: 1.4 !important;
}

.quick-service-launch-card__car {
    position: absolute !important;
    right: -8px !important;
    bottom: 0 !important;
    width: 48% !important;
    max-width: 200px !important;
    height: auto !important;
    object-fit: contain !important;
    pointer-events: none;
}

.quick-service-launch-card::after {
    content: '';
    position: absolute;
    right: 42%;
    bottom: 18px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid rgba(255, 255, 255, 0.9);
    transform: rotate(-45deg);
    z-index: 3;
    top: auto;
}

.quick-service-launch-card--rent::after {
    border-color: var(--tg-text-muted);
    right: 44%;
}

.quick-support-card {
    margin-top: var(--m-space-md) !important;
    padding: var(--m-space-lg) !important;
    min-height: var(--m-touch-min);
    border-radius: var(--m-radius-lg) !important;
    gap: var(--m-space-md) !important;
}

.quick-support-card__icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--m-radius-md) !important;
}

.quick-support-card__title {
    font-size: var(--m-font-subtitle) !important;
}

.quick-support-card__desc {
    font-size: var(--m-font-meta) !important;
    line-height: 1.4 !important;
}

.quick-support-card__arrow {
    width: var(--m-touch-min) !important;
    height: var(--m-touch-min) !important;
}

.quick-request-workspace__head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--tg-bg-page);
    padding: var(--m-space-sm) 0 var(--m-space-md);
    margin-bottom: var(--m-space-md);
}

.quick-request-workspace__close {
    min-height: var(--m-touch-min) !important;
    padding: 0 var(--m-space-md) !important;
    font-size: var(--m-font-meta) !important;
}

/* ——— Quick request wizard (trip / rent) ——— */
.quick-step-hint__mobile {
    display: inline;
}

.quick-step-hint__desktop {
    display: none !important;
}

.quick-label--desktop {
    display: none !important;
}

.quick-label--mobile {
    display: inline !important;
}

.quick-trip-step1-intro .quick-step-hint,
.quick-rent-step1-layout .quick-trip-step1-intro .quick-step-hint {
    display: none !important;
    margin: 0 !important;
}

.quick-map-pick-btn {
    display: none !important;
}

.quick-trip-step1-layout {
    gap: var(--m-space-lg) !important;
}

.quick-step-title {
    font-size: var(--m-font-title) !important;
    line-height: 1.25 !important;
    margin-bottom: var(--m-space-sm) !important;
}

.quick-step-hint {
    font-size: var(--m-font-body) !important;
    line-height: 1.45 !important;
    color: var(--tg-text-secondary) !important;
    margin-bottom: var(--m-space-lg) !important;
}

.quick-form-group label,
.quick-field-label-row label {
    font-size: var(--m-font-meta) !important;
    font-weight: 600 !important;
    color: var(--tg-text-secondary) !important;
    margin-bottom: var(--m-space-xs) !important;
}

.quick-form-group input,
.quick-form-group select,
.quick-form-group textarea {
    min-height: var(--m-touch-min) !important;
    font-size: 16px !important;
    border-radius: var(--m-radius-sm) !important;
}

/* Адреса — на всю ширину; пассажиры и расстояние — одна строка */
.quick-route-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-space-md) !important;
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .quick-route-points-list {
        padding-left: calc(var(--quick-route-track-w) + 10px);
    }

    .quick-route-point-row {
        flex-wrap: wrap;
    }

    .quick-route-point-row__actions {
        flex-direction: row;
        width: 100%;
        padding-top: 0;
        padding-left: calc(var(--quick-route-track-w) + 10px);
        justify-content: flex-end;
    }

    .quick-route-point-move,
    .quick-route-point-remove {
        min-width: var(--m-touch-min, 44px);
        min-height: var(--m-touch-min, 44px);
    }

    .quick-route-point-drag {
        display: none !important;
    }

    .quick-route-add-point-btn {
        width: 100%;
        min-height: var(--m-touch-min, 44px);
    }
}

.quick-route-meta-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: var(--m-space-md) !important;
    width: 100% !important;
}

.quick-route-side--passengers {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
}

.quick-form-group--distance {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.quick-form-group--distance[hidden] {
    display: none !important;
}

.quick-form-group--distance .quick-trip-route-distance__label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--tg-text-secondary) !important;
    margin-bottom: var(--m-space-xs) !important;
}

.quick-trip-route-distance__box {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: var(--m-touch-min) !important;
    margin: 0 !important;
    padding: 0 var(--m-space-md) !important;
    border-radius: var(--m-radius-sm) !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    box-sizing: border-box !important;
}

.quick-trip-route-distance__value {
    font-size: 1rem !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    color: #0F172A !important;
    line-height: 1.2 !important;
}

.quick-route-passengers-field {
    width: 100% !important;
    align-items: stretch !important;
    gap: var(--m-space-xs) !important;
    flex-direction: column !important;
}

.quick-route-passengers-icon {
    display: none !important;
}

.quick-form-group--passengers {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.quick-form-group--passengers label {
    font-size: 11px !important;
    margin-bottom: 2px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-passengers-stepper {
    max-width: none !important;
    width: 100% !important;
    min-height: var(--m-touch-min) !important;
}

.quick-passengers-stepper__btn {
    flex: 0 0 40px !important;
}

.quick-passengers-stepper__input {
    font-size: 16px !important;
}

.quick-trip-route-map-host {
    height: min(200px, 36vh) !important;
    min-height: 168px !important;
    border-radius: var(--m-radius-md) !important;
}

.quick-trip-route-map-caption {
    display: none !important;
}

.quick-request-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin-top: var(--m-space-lg);
    padding: var(--m-space-md) 0 calc(var(--m-space-md) + var(--m-safe-bottom));
    background: linear-gradient(180deg, transparent 0%, var(--tg-bg-page) 24%);
}

.quick-request-actions .quick-btn {
    width: 100% !important;
    min-height: var(--m-touch-min) !important;
    font-size: var(--m-font-body) !important;
}

.quick-step-view {
    padding: 0 !important;
}

.quick-form-grid--two,
.quick-form-grid--three {
    gap: var(--m-space-md) !important;
}

/* Скрыть блок «последние заявки», пока открыт мастер — меньше прокрутки */
body.m-quick-wizard-open .dashboard-recent-section {
    display: none !important;
}

.dashboard-recent-section {
    margin-top: var(--m-space-xl);
}

.dashboard-recent-section .section-title {
    font-size: 18px !important;
}

/* Hide per-page rows control on mobile */
.pagination-per-page,
.pagination-per-page-wrap,
.queries-per-page-wrap,
.requests-per-page-wrap,
label[for="queries-per-page-input"],
label[for="dashboard-per-page-input"],
#queries-per-page-input,
#dashboard-per-page-input {
    display: none !important;
}

/* ——— Request / Query detail ——— */
.request-detail-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.request-detail-card .detail-section {
    background: var(--tg-bg-card);
    border-radius: var(--m-radius-lg);
    border: 1px solid var(--tg-border-light);
    padding: var(--m-space-lg);
    margin-bottom: var(--m-space-md);
    box-shadow: var(--m-shadow-card);
}

.request-detail-page .content-header,
.query-detail-page .content-header {
    position: sticky;
    top: calc(var(--m-header-h) + env(safe-area-inset-top, 0px));
    z-index: 10;
    background: var(--tg-bg-page);
    padding: var(--m-space-sm) 0 var(--m-space-md);
    margin: calc(-1 * var(--m-space-md)) 0 var(--m-space-lg);
}

.back-button {
    min-width: var(--m-touch-min) !important;
    min-height: var(--m-touch-min) !important;
}

.detail-section,
.request-info-section,
.query-info-block {
    background: var(--tg-bg-card);
    border-radius: var(--m-radius-lg);
    border: 1px solid var(--tg-border-light);
    padding: var(--m-space-lg);
    margin-bottom: var(--m-space-md);
    box-shadow: var(--m-shadow-card);
}

.detail-row,
.info-row {
    display: flex;
    justify-content: space-between;
    gap: var(--m-space-md);
    padding: var(--m-space-sm) 0;
    font-size: var(--m-font-meta);
    border-bottom: 1px solid var(--tg-border-light);
}

.detail-row:last-child,
.info-row:last-child {
    border-bottom: none;
}

/* ——— Tariffs ——— */
.search-card {
    background: var(--tg-bg-card) !important;
    border-radius: var(--m-radius-lg) !important;
    padding: var(--m-space-lg) !important;
    border: 1px solid var(--tg-border-light) !important;
    box-shadow: var(--m-shadow-card) !important;
    margin-bottom: var(--m-space-md) !important;
}

.search-title {
    font-size: 16px !important;
    margin-bottom: var(--m-space-md) !important;
}

.search-input-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: var(--m-space-sm) !important;
    width: 100% !important;
}

.search-input-container .search-input {
    flex: 1 !important;
    min-width: 0 !important;
    min-height: var(--m-touch-min) !important;
    width: auto !important;
    font-size: 16px !important;
}

.search-input-container .search-button {
    flex-shrink: 0 !important;
    width: var(--m-touch-min) !important;
    min-width: var(--m-touch-min) !important;
    height: var(--m-touch-min) !important;
    padding: 0 !important;
    border-radius: var(--m-radius-sm) !important;
}

.cities-grid,
.tariffs-cities-grid {
    grid-template-columns: 1fr !important;
    gap: var(--m-space-sm) !important;
}

.city-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: var(--m-touch-min) !important;
    padding: var(--m-space-md) var(--m-space-lg) !important;
    border-radius: var(--m-radius-md) !important;
    text-decoration: none !important;
    background: var(--tg-bg-card) !important;
    border: 1px solid var(--tg-border-light) !important;
    box-shadow: var(--m-shadow-card) !important;
}

.city-card::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--tg-text-muted);
    border-bottom: 2px solid var(--tg-text-muted);
    transform: rotate(-45deg);
    flex-shrink: 0;
    margin-left: var(--m-space-md);
    opacity: 0.6;
}

.tariffs-page .content-header .back-button {
    flex-shrink: 0;
}

/* ——— Messenger (align with messenger.css panels) ——— */
.messenger-page {
    height: 100dvh !important;
    overflow: hidden !important;
}

.chat-list-panel,
.active-chat-panel {
    top: calc(var(--m-header-h) + env(safe-area-inset-top, 0px)) !important;
    height: calc(100dvh - var(--m-header-h) - env(safe-area-inset-top, 0px)) !important;
}

.message-input-container {
    padding-bottom: calc(var(--m-space-sm) + var(--m-safe-bottom)) !important;
}

.chat-item {
    min-height: var(--m-touch-min);
}

/* ——— Fleet ——— */
.vehicles-grid {
    grid-template-columns: 1fr !important;
    gap: var(--m-space-md) !important;
}

.vehicle-card,
.vehicles-grid .vehicle-item {
    border-radius: var(--m-radius-lg) !important;
}

.vehicle-detail-page .vehicle-hero {
    border-radius: var(--m-radius-lg);
    overflow: hidden;
    margin-bottom: var(--m-space-lg);
}

/* ——— Accounts reports ——— */
.accounts-reports-page .report-card {
    margin-bottom: var(--m-space-md);
    border-radius: var(--m-radius-lg) !important;
}

/* ——— Loader ——— */
.loader-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--m-space-2xl);
}

/* ——— Help / KB ——— */
.kb-page .kb-mobile-menu-fab {
    bottom: calc(var(--m-space-lg) + var(--m-safe-bottom)) !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    box-shadow: var(--m-shadow-card);
}

.kb-article {
    padding: var(--m-space-lg) !important;
    font-size: var(--m-font-body) !important;
    line-height: 1.6 !important;
}

.kb-article h1 {
    font-size: 24px !important;
}

.kb-header__login--desktop {
    display: none !important;
}

/* ——— Admin 2FA ——— */
.admin-2fa-page,
body.admin-2fa {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--m-space-lg);
}

.admin-2fa-card,
.admin-2fa-form {
    width: 100% !important;
    max-width: 400px;
}

.admin-2fa input[type="text"],
.admin-2fa input[type="number"] {
    font-size: 28px !important;
    letter-spacing: 0.2em;
    text-align: center;
    min-height: var(--m-touch-min);
}