/* Global mobile safeguards.
   Loaded after component CSS in _base_dashboard.html so these rules
   act as last-resort caps without rewriting every dashboard. */

/* iOS dynamic viewport: prevent 100vh content from being clipped
   by the address bar. Only applied where the dashboard already sets
   100vh — this extends it with the dvh fallback. */
@supports (height: 100dvh) {
    .dashboard-container,
    .dashboard-layout,
    .pulse-shell,
    .map-fullscreen {
        min-height: 100dvh;
    }
}

/* ---- Modals: never wider/taller than the viewport ---- */
.modal,
.modal-dialog,
.modal-content,
[class*="modal-dialog"] {
    max-width: min(95vw, var(--modal-max-width, 1200px));
}

@media (max-width: 640px) {
    .modal,
    .modal-dialog,
    .modal-content,
    [class*="modal-dialog"] {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh;
        max-height: 90dvh;
        margin: 16px auto;
    }
    .modal-body {
        overflow-y: auto;
    }
}

/* ---- Touch targets: buttons and links should be at least 44×44 ---- */
@media (max-width: 768px) and (pointer: coarse) {
    button:not(.nav-sidebar-toggle):not(.close-btn):not(.icon-btn-sm):not(.panel-hide-btn),
    .btn,
    a.btn,
    input[type="button"],
    input[type="submit"],
    .footer-dashboard-link {
        min-height: 44px;
    }
}

/* ---- Tables: force horizontal scroll if author forgot a wrapper ---- */
@media (max-width: 768px) {
    .content-area table,
    .dashboard-main table:not(.no-mobile-scroll),
    .widget-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* ---- Prevent horizontal page scroll from rogue wide children ---- */
@media (max-width: 640px) {
    body {
        overflow-x: hidden;
    }
    img, video, canvas, iframe {
        max-width: 100%;
        height: auto;
    }
}

/* ---- Leaflet/MapLibre popups: cap width on narrow screens ---- */
@media (max-width: 640px) {
    .leaflet-popup-content-wrapper,
    .leaflet-popup-content,
    .maplibregl-popup-content {
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box;
    }
}

/* ---- Nav sidebar: never take more than 85vw when opened on mobile ---- */
@media (max-width: 640px) {
    .nav-sidebar.mobile-open,
    .dashboard-sidebar-left.mobile-open,
    .dashboard-sidebar-right.mobile-open {
        max-width: 85vw;
    }
}

/* ---- Widget grid: fall back to one column on very narrow devices.
   Only affects grids that use the `widget-grid` contract; other
   layouts keep their explicit columns. */
@media (max-width: 480px) {
    .widget-grid,
    .widgets-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Minimum readable font size for body copy on mobile ---- */
@media (max-width: 480px) {
    .widget-content,
    .card-body,
    .dashboard-main p,
    .dashboard-main li {
        font-size: max(13px, 0.85rem);
    }
}

/* ---- Header-right overflow safety на узких экранах ----
   При насыщенных header-actions (copilot + city badge + 2-3 кнопки)
   header-right может переполняться. Решение: горизонтальный скролл
   как fallback (не идеально, но лучше обрезанной кнопки). */
@media (max-width: 640px) {
    body[data-dashboard-theme] .dashboard-header .header-right {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 70vw;
        scrollbar-width: none;
    }
    body[data-dashboard-theme] .dashboard-header .header-right::-webkit-scrollbar {
        display: none;
    }
}

/* ---- Compact button padding в header на самых узких экранах ----
   Стандарт touch-target 44px переопределён только для header-кнопок
   (40px height вписывается в header-height-mobile). Но padding можно
   сжать чтобы влезали 3-4 кнопки. */
@media (max-width: 420px) {
    body[data-dashboard-theme] .dashboard-header .btn-sm,
    body[data-dashboard-theme] .dashboard-header .btn {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* =========================================================================
 * Mobile UX audit 2026-05-16 — устранение P0/P1 проблем на iPhone (375px).
 * До этого header-right делал overflow-x: auto (показывал scroll-bar — UX-грязь).
 * Теперь: на <640px text-label кнопок скрывается, остаётся только icon.
 * ========================================================================= */

/* ---- Header-right: icon-only кнопки на узких экранах ---- */
@media (max-width: 640px) {
    /* Кнопки в header'е — компактные, иконка + ничего */
    body[data-dashboard-theme] .dashboard-header .header-right .btn,
    body[data-dashboard-theme] .dashboard-header .header-right .btn-sm,
    .profile-header-action-btn {
        padding: 8px 10px;
        min-height: 36px;
        font-size: 0.85rem;
    }
    /* LLM-балансный виджет: показываем только иконку и цифру */
    .dashboard-header .llm-balance-widget {
        gap: 4px;
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    .dashboard-header .llm-balance-widget .label,
    .dashboard-header .llm-balance-widget .cost,
    .dashboard-header .llm-balance-widget .details-link {
        display: none;
    }
    /* User-info-panel: имя пользователя скрываем, оставляем avatar */
    .dashboard-header .user-info-panel .user-name,
    .dashboard-header .user-info-panel .user-roles {
        display: none;
    }
    /* Header больше не должен иметь горизонтальный scroll (visible scrollbar
       — это код-смесь на iPhone). Если кнопки не помещаются — wrap. */
    body[data-dashboard-theme] .dashboard-header .header-right {
        flex-wrap: wrap;
        overflow-x: visible;
        max-width: 100%;
        row-gap: 4px;
    }
}

/* ---- Profile-v2 header actions: компактнее на мобиле ---- */
@media (max-width: 480px) {
    .profile-header-actions-inline {
        gap: 0.25rem;
    }
    .profile-header-action-btn {
        padding: 6px 8px;
        font-size: 0.7rem;
        min-height: 34px;
    }
    /* Stats-блок: на 375px показываем только 2 главные метрики. */
    .profile-header-stats-inline .stat-item-inline:nth-child(n+3) {
        display: none;
    }
    /* Avatar shrink — экран узкий, экономим место. */
    .profile-header-avatar {
        width: 36px;
        height: 36px;
    }
    /* Роли — только 1 chip + counter (раньше 3 chip + counter). */
    .profile-header-role-chips .profile-header-role-chip:nth-child(n+2):not(.profile-header-role-chip--more) {
        display: none;
    }
}

/* ---- Methodologist editor toolbar: добавить media query (раньше не было) ---- */
@media (max-width: 640px) {
    /* Toolbar редактора модели методолога — 6 кнопок (↶ ↷ ✏️ 💾 ⋯).
       Раньше .model-actions имела gap:10px без media → на 375px кнопки
       перепрыгивали. Теперь компактный gap + flex-wrap. */
    body[data-dashboard-theme="methodologist"] .model-actions {
        gap: 4px;
        flex-wrap: wrap;
        row-gap: 4px;
    }
    body[data-dashboard-theme="methodologist"] .model-actions .btn,
    body[data-dashboard-theme="methodologist"] .model-actions .btn-sm {
        padding: 6px 8px;
        font-size: 0.78rem;
        min-height: 34px;
    }
}

/* ---- Strategist tabs nav: горизонтальный scroll с snap ---- */
@media (max-width: 640px) {
    body[data-dashboard-theme="strategist"] .sv-tab-group,
    body[data-dashboard-theme="strategist"] .strategist-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body[data-dashboard-theme="strategist"] .sv-tab-group::-webkit-scrollbar,
    body[data-dashboard-theme="strategist"] .strategist-tabs::-webkit-scrollbar {
        display: none;
    }
    body[data-dashboard-theme="strategist"] .sv-tab-group > *,
    body[data-dashboard-theme="strategist"] .strategist-tabs > * {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
}