/* MSPlan shared mobile responsive layer. Loaded after page CSS. */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 0;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

input,
select,
textarea,
button {
    font: inherit;
}

@media screen and (max-width: 1024px) {
    .header-info .server-time {
        gap: 8px;
    }

    .header-info .server-time .btn-secondary,
    .top-maintenance-switcher .top-maintenance-main {
        padding: 8px 10px !important;
        font-size: 0.86rem !important;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --mobile-page-padding: 10px;
        --mobile-card-radius: 12px;
        --mobile-touch-size: 42px;
    }

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

    body {
        min-height: 100dvh;
    }

    body.theme-switching {
        filter: blur(4px) brightness(0.96);
    }

    body > .container,
    .container,
    .dashboard-container,
    .plans-container,
    .settings-wrapper,
    .map-main,
    .notifications-page,
    .reports-page,
    .objects-page,
    .rules-page,
    .mzp-quick-create {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: var(--mobile-page-padding) !important;
        padding-right: var(--mobile-page-padding) !important;
    }

    .main-content,
    .content,
    .page-content,
    .dashboard-content,
    .workspace-content,
    .account-main-shell,
    .settings-wrapper,
    .map-page,
    .rules-wrapper,
    .plans-container,
    .reports-container,
    .notifications-page,
    .mzp-create-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main-content {
        padding: 12px !important;
        border-radius: var(--mobile-card-radius) !important;
    }

    .header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10040 !important;
        margin: 0 calc(var(--mobile-page-padding) * -1) 12px !important;
        border-radius: 0 0 16px 16px !important;
        overflow: visible !important;
    }

    .header-content {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 56px !important;
        width: 100% !important;
        padding: 8px 10px !important;
        text-align: left !important;
        flex-direction: row !important;
    }

    .logo-link,
    .logo {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .logo {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .logo-image {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        object-fit: contain !important;
    }

    .logo h1 {
        max-width: 130px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 18px !important;
        line-height: 1.15 !important;
    }

    .header-info,
    .header-actions {
        display: none !important;
    }

    .header-mobile-actions {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        flex: 0 0 132px !important;
        overflow: visible !important;
        scrollbar-width: none !important;
    }

    .header-mobile-actions::-webkit-scrollbar {
        display: none;
    }

    .header-mobile-actions .action-icon-btn,
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        line-height: 1 !important;
        touch-action: manipulation;
    }



    .header-mobile-actions .action-icon-btn {
        border: 1px solid var(--theme-border, var(--card-border, rgba(147, 164, 194, 0.36))) !important;
        background: var(--theme-panel-solid, var(--card-bg, rgba(255, 255, 255, 0.94))) !important;
        color: var(--theme-accent-strong, var(--accent-color, #4a69bd)) !important;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10) !important;
    }

    .header-mobile-actions .action-icon-btn i,
    .mobile-menu-toggle i {
        color: inherit !important;
    }

    .header-mobile-actions .action-icon-btn:hover,
    .header-mobile-actions .action-icon-btn:focus-visible {
        background: var(--theme-accent-soft, rgba(74, 105, 189, 0.12)) !important;
        color: var(--theme-accent-strong, var(--accent-color, #4a69bd)) !important;
        border-color: var(--theme-accent, var(--accent-color, #4a69bd)) !important;
    }

    html[data-theme="dark"] .header-mobile-actions .action-icon-btn,
    html[data-theme="forest"] .header-mobile-actions .action-icon-btn {
        background: var(--theme-panel-soft, rgba(30, 41, 59, 0.82)) !important;
        color: var(--theme-text, #eef4ff) !important;
        border-color: var(--theme-border, rgba(148, 163, 184, 0.28)) !important;
    }

    .mobile-menu-toggle {
        position: static !important;
        order: initial !important;
        cursor: pointer !important;
        border: 1px solid var(--theme-border, var(--card-border, rgba(147, 164, 194, 0.38))) !important;
        background: var(--theme-panel-solid, var(--card-bg, rgba(255, 255, 255, 0.94))) !important;
        color: var(--theme-text, var(--text-color, #172033)) !important;
    }

    .mobile-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 8px !important;
        right: 8px !important;
        z-index: 10060 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        max-height: calc(100dvh - 76px) !important;
        overflow-y: auto !important;
        padding: 10px !important;
        border-radius: 14px !important;
        border: 1px solid var(--theme-border, var(--card-border, rgba(147, 164, 194, 0.32))) !important;
        background: var(--theme-panel-solid, var(--card-bg, #fff)) !important;
        color: var(--theme-text, var(--text-color, #172033)) !important;
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px) scale(0.98);
        transform-origin: top right;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-menu.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .mobile-menu button,
    .mobile-menu a,
    .mobile-menu .server-time,
    .mobile-menu .stats,
    .mobile-menu .theme-toggle-btn-mobile {
        width: 100% !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        white-space: normal !important;
        text-align: left !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    .mobile-menu .server-time,
    .mobile-menu .stats {
        justify-content: center !important;
        border: 1px dashed var(--theme-border, var(--card-border, rgba(147, 164, 194, 0.32))) !important;
        background: var(--theme-panel-soft, rgba(148, 163, 184, 0.08)) !important;
    }

    .mobile-menu-footer {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
        border-top: 1px solid var(--theme-border, var(--card-border, rgba(147, 164, 194, 0.32))) !important;
    }

    .top-maintenance-switcher,
    .top-maintenance-menu {
        display: none !important;
    }

    .top-maintenance-mobile-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .top-maintenance-mobile-tab {
        min-height: 42px !important;
        padding: 7px 6px !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
    }

    .requests-heading,
    .dashboard-header,
    .settings-heading,
    .map-page-header,
    .notifications-page-header,
    .plans-header,
    .rules-header,
    .page-header,
    .section-header,
    .account-section-hero,
    .profile-hero,
    .mzp-request-hero {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    .requests-heading h2,
    .dashboard-title h1,
    .settings-heading h2,
    .map-page-header h2,
    .notifications-page-header h2,
    .profile-title-block h1,
    .account-section-title-wrap h1,
    .mzp-request-hero h1,
    h1,
    h2 {
        overflow-wrap: anywhere;
    }

    .controls-mobile,
    .filters,
    .filter-section,
    .filter-panel,
    .toolbar,
    .plans-toolbar,
    .account-toolbar,
    .equip-toolbar,
    .settings-toolbar,
    .map-toolbar,
    .grafik-toolbar-row,
    .notifications-actions,
    .notifications-filter,
    .form-actions,
    .modal-footer,
    .account-modal-actions,
    .mzp-form-actions,
    .mzp-hero-actions,
    .mzp-field-actions,
    .mzp-date-shortcuts,
    .category-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .grafik-filter-pills,
    .grafik-view-actions,
    .plans-tabs,
    .mode-selector {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .controls-mobile {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .controls .filters,
    .controls-mobile .filters,
    .controls-desktop .filters,
    .filter-section .filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }

    .filter-group,
    .user-filter,
    .search-box,
    .account-search-wrap,
    .map-search,
    .custom-select-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .filter-select,
    .account-search-input,
    .account-select,
    .mzp-input-text,
    .mzp-select,
    .mzp-textarea,
    .custom-select-input {
        width: 100% !important;
        max-width: 100% !important;
        min-height: var(--mobile-touch-size) !important;
        font-size: 16px !important;
    }

    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    .account-btn,
    .account-action-btn,
    .mzp-btn,
    .btn-manage,
    .plans-tab,
    .filter-btn,
    .grafik-pill-btn {
        min-height: var(--mobile-touch-size);
        max-width: 100%;
        touch-action: manipulation;
    }

    .btn,
    .btn-primary,
    .btn-secondary,
    .account-btn,
    .account-action-btn,
    .mzp-btn,
    .btn-manage {
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    .settings-grid,
    .settings-grid-quick,
    .settings-theme-grid,
    .settings-columns,
    .download-grid,
    .account-page-layout,
    .profile-overview-grid,
    .account-profile-grid,
    .account-metric-row,
    .account-security-grid,
    .objects-grid,
    .equipment-grid,
    .dashboard-grid,
    .stats-grid,
    .charts-grid,
    .plans-grid,
    .reports-grid,
    .permissions-dashboard,
    .map-layout,
    .map-toolbar,
    .mzp-create-grid,
    .mzp-create-flow,
    .mzp-form-row,
    .mzp-range-row,
    .mzp-checkbox-grid,
    .grafik-stats-grid,
    .form-row,
    .checkbox-group {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
    }

    .account-sidebar {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .account-sidebar-profile {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        text-align: left !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .account-sidebar .sidebar-menu {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(168px, 1fr) !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
        -webkit-overflow-scrolling: touch;
    }

    .account-sidebar .sidebar-menu a {
        min-width: 0 !important;
        white-space: normal !important;
    }

    .profile-identity,
    .profile-actions,
    .account-hero-actions {
        width: 100% !important;
        min-width: 0 !important;
    }

    .settings-card,
    .download-card,
    .account-panel,
    .profile-section-card,
    .objects-section-card,
    .files-viewer-section,
    .object-tile,
    .plans-card,
    .plan-card,
    .notification-card,
    .permission-category,
    .map-frame,
    .map-side-panel,
    .grafik-ux-panel,
    .grafik-object-block,
    .mzp-request-hero,
    .mzp-fast-panel,
    .mzp-summary-card {
        border-radius: var(--mobile-card-radius) !important;
    }

    .table-container,
    .table-responsive,
    .table-wrapper,
    .employees-table-container,
    .counteragents-table-container,
    .admin-table-wrapper,
    .reports-table-wrapper,
    .sprav-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    table:not(.employee-print-table),
    .table:not(.employee-print-table),
    .applications-table,
    .employees-table,
    .data-table,
    .reports-table,
    .admin-table,
    .grafik-system-table {
        min-width: 720px;
        max-width: none !important;
    }

    table:not(.employee-print-table) th,
    table:not(.employee-print-table) td {
        white-space: nowrap;
    }

    .applications-table th,
    .applications-table td,
    .employees-table th,
    .employees-table td,
    .data-table th,
    .data-table td,
    .reports-table th,
    .reports-table td {
        padding: 9px 10px !important;
        font-size: 13px !important;
    }

    .applications-table .subject-cell,
    .applications-table .subject-text {
        min-width: 220px !important;
        max-width: 260px !important;
    }

    .modal-overlay,
    .custom-modal-overlay,
    .account-modal-overlay,
    .mzp-modal,
    .loading {
        padding: 10px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .modal,
    .modal-content,
    .modal-box,
    .custom-modal,
    .popup-content,
    .account-modal,
    .mzp-modal-content,
    .video-preview-modal,
    .integration-modal-content,
    .access-modal-card,
    .discussion-modal-content,
    .modal-fullscreen-content {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        margin: 10px auto !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .modal-body,
    .modal-fullscreen-body,
    .custom-modal-body,
    .account-modal-body,
    .mzp-modal-body,
    .discussion-modal-body {
        max-height: calc(100dvh - 142px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 14px !important;
    }

    .details-layout,
    .discussion-section,
    .discussion-main {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    .details-sidebar,
    .participants-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 34dvh !important;
        overflow-y: auto !important;
    }

    .discussion-messages {
        max-height: 42dvh !important;
        min-height: 220px !important;
    }

    .map-page-header,
    .map-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .map-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .map-frame,
    .objects-map {
        height: 58dvh !important;
        min-height: 360px !important;
        max-height: 460px !important;
    }

    .map-side-panel {
        min-height: 260px !important;
        max-height: 360px !important;
    }

    .map-object-list {
        max-height: 280px !important;
        overflow-y: auto !important;
    }

    .grafik-object-top,
    .grafik-object-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .grafik-object-info {
        flex: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .grafik-object-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .grafik-card-action {
        width: 100% !important;
    }

    .grafik-object-details {
        padding: 12px !important;
    }

    .mzp-quick-create {
        padding-top: 0 !important;
    }

    .mzp-request-hero,
    .mzp-fast-panel,
    .mzp-summary-card {
        padding: 14px !important;
    }

    .mzp-urgency-segment {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .mzp-summary-panel {
        position: static !important;
    }

    .mzp-checkbox-list {
        max-height: 260px !important;
    }

    .notification {
        left: 10px !important;
        right: 10px !important;
        top: 74px !important;
        width: auto !important;
        max-width: none !important;
        transform: translateY(-140%) !important;
    }

    .notification.show {
        transform: translateY(0) !important;
    }
}

@media screen and (max-width: 430px) {
    :root {
        --mobile-page-padding: 8px;
    }

    .header-content {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        gap: 6px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .logo h1 {
        max-width: 72px !important;
        font-size: 15px !important;
    }

    .header-mobile-actions {
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        flex-basis: 132px !important;
    }

    .top-maintenance-mobile-tabs,
    .mobile-menu-footer,
    .map-stat-grid,
    .grafik-object-actions,
    .mzp-urgency-segment {
        grid-template-columns: 1fr !important;
    }

    .account-sidebar .sidebar-menu {
        grid-auto-columns: minmax(148px, 1fr) !important;
    }

    table:not(.employee-print-table),
    .table:not(.employee-print-table),
    .applications-table,
    .employees-table,
    .data-table,
    .reports-table,
    .admin-table,
    .grafik-system-table {
        min-width: 640px;
    }
}

@media screen and (max-width: 360px) {
    .logo h1 {
        display: none !important;
    }

    .header-mobile-actions {
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        flex-basis: 132px !important;
    }
}