@media (max-width: 991.98px) {
    :root {
        --mobile-content-padding: 16px;
        --mobile-app-bar-height: 64px;
        --mobile-touch-target: 44px;
        --mobile-drawer-width: min(86vw, 320px);
        --mobile-safe-top: env(safe-area-inset-top, 0px);
        --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    html {
        scroll-padding-top: calc(var(--mobile-app-bar-height) + var(--mobile-safe-top) + 12px);
    }

    body {
        min-width: 320px;
        font-size: 14px;
    }

    body.menu-open {
        overflow: hidden;
        touch-action: none;
    }

    body:has(.mobile-app-bar) .main-content {
        padding-top: calc(var(--mobile-app-bar-height) + var(--mobile-safe-top));
    }

    .mobile-app-bar {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 1040;
        min-height: calc(var(--mobile-app-bar-height) + var(--mobile-safe-top));
        padding: var(--mobile-safe-top) var(--mobile-content-padding) 0;
        display: grid;
        grid-template-columns: var(--mobile-touch-target) minmax(0, 1fr) var(--mobile-touch-target);
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid rgba(99, 102, 241, 0.12);
        box-shadow: 0 2px 14px rgba(31, 41, 55, 0.08);
        backdrop-filter: blur(12px);
    }

    .mobile-app-bar-title {
        grid-column: 2;
        min-width: 0;
        color: #4B5563;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }

    .mobile-menu-button {
        position: static;
        inset: auto;
        z-index: auto;
        width: var(--mobile-touch-target);
        height: var(--mobile-touch-target);
        min-width: var(--mobile-touch-target);
        margin: 0;
        padding: 0;
        border: 1px solid rgba(99, 102, 241, 0.14);
        border-radius: 10px;
        color: #6366F1;
        background: #fff;
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
        font-size: 24px;
    }

    .drawer-overlay,
    .mobile-menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 1045;
        display: block;
        visibility: hidden;
        background: rgba(17, 24, 39, 0.48);
        opacity: 0;
        transition: opacity 0.22s ease, visibility 0.22s ease;
    }

    .drawer-overlay.is-open,
    .mobile-menu-overlay.show {
        visibility: visible;
        opacity: 1;
    }

    .mobile-drawer.sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1050;
        width: var(--mobile-drawer-width);
        height: 100dvh;
        max-width: 320px;
        padding-top: var(--mobile-safe-top);
        transform: translateX(-105%);
        left: 0;
        overflow: hidden;
        visibility: hidden;
        box-shadow: 10px 0 28px rgba(17, 24, 39, 0.22);
        transition: transform 0.25s ease;
    }

    .mobile-drawer.sidebar.is-open,
    .mobile-drawer.sidebar.show {
        width: var(--mobile-drawer-width);
        left: 0;
        transform: translateX(0);
        visibility: visible;
    }

    .mobile-drawer-close {
        position: absolute;
        top: calc(var(--mobile-safe-top) + 10px);
        right: 10px;
        z-index: 2;
        width: var(--mobile-touch-target);
        height: var(--mobile-touch-target);
        border: 0;
        border-radius: 10px;
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
        font-size: 20px;
    }

    .mobile-drawer .sidebar-logo {
        min-height: 82px;
        padding: 10px 58px 10px 18px;
        justify-content: flex-start;
    }

    .mobile-drawer .logo-icon,
    .mobile-drawer .logo-icon img {
        width: 70px;
        height: 70px;
    }

    .mobile-drawer .sidebar-nav {
        min-height: 0;
        padding: 10px 0 calc(12px + var(--mobile-safe-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mobile-drawer .sidebar-item {
        margin: 3px 12px;
    }

    .mobile-drawer .sidebar-item a,
    .mobile-drawer .sidebar-group-toggle,
    .mobile-drawer .sidebar-user-info {
        min-height: 48px;
        padding: 12px 14px;
        font-size: 0.95rem;
    }

    .mobile-drawer .sidebar-item a span,
    .mobile-drawer .sidebar-group-toggle span,
    .mobile-drawer .sidebar-user-info span {
        display: inline;
        min-width: 0;
    }

    .mobile-drawer .sidebar-item a i,
    .mobile-drawer .sidebar-group-toggle i,
    .mobile-drawer .sidebar-user-info i {
        flex: 0 0 22px;
        margin-right: 12px;
        font-size: 19px;
        text-align: center;
    }

    .mobile-drawer .sidebar-group-toggle .bi-chevron-down {
        display: inline-block;
        flex-basis: auto;
        margin-right: 0;
        margin-left: auto;
    }

    .mobile-drawer .submenu {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.24s ease;
    }

    .mobile-drawer .submenu.show {
        display: block;
        max-height: 520px;
        overflow-y: auto;
    }

    .mobile-drawer .sidebar-subitem a {
        padding-left: 34px;
    }

    .mobile-drawer .sidebar-bottom-menu {
        margin-top: auto;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .mobile-drawer .sidebar-user-info {
        cursor: default;
    }

    .mobile-drawer .user-email-small {
        display: block;
        max-width: 190px;
        overflow: hidden;
        font-size: 0.75rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

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

    .content-wrapper {
        width: 100%;
        padding: var(--mobile-content-padding);
    }

    .content-container {
        width: 100%;
        max-width: none;
    }

    .content-container > .container,
    .content-container > .container-fluid,
    .content-container .container-fluid.px-4 {
        width: 100%;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .page-header,
    .content-container > .d-flex:first-child {
        gap: 12px;
    }

    .page-header h1,
    .content-container h1,
    .content-container .h2 {
        max-width: 100%;
        font-size: clamp(1.45rem, 5.4vw, 1.85rem);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .page-header + .btn,
    .page-header ~ .btn {
        flex-shrink: 0;
    }

    .btn,
    button,
    [role="button"],
    .pagination .page-link {
        min-height: var(--mobile-touch-target);
    }

    .btn-sm,
    .btn-group-sm > .btn {
        min-height: 40px;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .form-control,
    .form-select {
        min-height: var(--mobile-touch-target);
        font-size: 16px !important;
    }

    textarea.form-control {
        min-height: 96px;
    }

    .input-group-text {
        min-height: var(--mobile-touch-target);
    }

    .card {
        max-width: 100%;
        margin-bottom: 14px;
    }

    .card-body,
    .card-body.p-4 {
        padding: 1rem !important;
    }

    .filter-card {
        position: relative;
        padding: 0 !important;
        overflow: visible;
    }

    .mobile-filter-toggle {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border: 0;
        border-radius: 10px;
        color: #4937AD;
        background: linear-gradient(135deg, #f8f9ff 0%, #f3f1ff 100%);
        font-weight: 600;
        text-align: left;
    }

    .mobile-filter-toggle .bi-chevron-down {
        margin-left: auto;
        transition: transform 0.2s ease;
    }

    .filter-card.mobile-filter-collapsed > .card-body,
    .filter-card.mobile-filter-collapsed > form {
        display: none;
    }

    .filter-card:not(.mobile-filter-collapsed) .mobile-filter-toggle .bi-chevron-down {
        transform: rotate(180deg);
    }

    .filter-card .filter-sticky {
        position: static;
    }

    .filter-card .row,
    .filter-card form.row {
        --bs-gutter-x: 0.75rem;
    }

    .filter-card .btn-group {
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .filter-card .period-btn {
        flex: 0 0 auto;
        min-height: 40px !important;
        height: auto !important;
        font-size: 14px !important;
        white-space: nowrap;
    }

    .nav-tabs {
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .nav-tabs .nav-link {
        min-height: var(--mobile-touch-target);
        white-space: nowrap;
    }

    .table-responsive,
    .table-container {
        position: relative;
        max-width: 100%;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        border-radius: 10px;
        scrollbar-width: thin;
    }

    .table-responsive::after,
    .table-container::after {
        content: "Прокрутите таблицу горизонтально";
        position: sticky;
        left: 12px;
        display: inline-block;
        margin: 8px 0 4px;
        color: #6B7280;
        font-size: 0.75rem;
    }

    .table {
        font-size: 14px !important;
    }

    .table th,
    .table td {
        min-width: 96px;
        padding: 0.65rem 0.55rem;
        vertical-align: middle;
    }

    .table th:first-child,
    .table td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 120px;
        background: #fff;
        box-shadow: 1px 0 rgba(99, 102, 241, 0.12);
    }

    .table thead th:first-child {
        z-index: 2;
        background: #f8f9fa;
    }

    .mobile-card-table,
    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table td {
        display: block;
        width: 100%;
    }

    .mobile-card-table {
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0 12px;
        background: transparent;
    }

    .mobile-card-table thead {
        display: none;
    }

    .mobile-card-table tbody tr {
        padding: 8px 12px;
        border: 1px solid rgba(99, 102, 241, 0.12);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
    }

    .mobile-card-table tbody td,
    .mobile-card-table tbody td:first-child {
        position: static;
        min-width: 0;
        padding: 10px 0;
        display: grid;
        grid-template-columns: minmax(90px, 36%) minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        border: 0;
        border-bottom: 1px solid #EEF0F4;
        background: transparent;
        box-shadow: none;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .mobile-card-table tbody td:last-child {
        border-bottom: 0;
    }

    .mobile-card-table tbody td::before {
        content: attr(data-label);
        color: #6B7280;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .mobile-card-table tbody td[data-label="Действия"] > * {
        justify-self: end;
    }

    .mobile-card-table + .table-responsive::after,
    .table-responsive:has(.mobile-card-table)::after {
        display: none;
    }

    .pagination {
        max-width: 100%;
        justify-content: flex-start !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 4px 2px 8px;
    }

    .pagination .page-link {
        min-width: var(--mobile-touch-target);
        padding: 0.5rem;
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-footer {
        position: sticky;
        bottom: 0;
        padding-bottom: calc(0.75rem + var(--mobile-safe-bottom));
        background: #fff;
    }

    .chart-body {
        padding: 0.75rem !important;
        overflow-x: auto;
    }

    .chart-body canvas,
    .chart-container canvas {
        max-height: 320px;
    }

    .kpi-card {
        min-height: 92px;
    }

    .notification-container {
        top: calc(var(--mobile-app-bar-height) + var(--mobile-safe-top) + 8px);
        right: 12px;
        width: calc(100% - 24px);
        max-width: none;
    }

    .custom-rejection-tooltip .tooltip-inner,
    .custom-icon-tooltip .tooltip-inner {
        width: min(88vw, 360px) !important;
        max-width: min(88vw, 360px) !important;
        white-space: normal !important;
    }

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

    .transcription-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .transcription-card,
    .transcription-column .card {
        height: auto !important;
        min-height: 420px;
    }

    .audio-section,
    .audio-player-wrapper,
    .custom-player-container {
        position: sticky;
        bottom: var(--mobile-safe-bottom);
        z-index: 20;
        background: #fff;
        box-shadow: 0 -4px 14px rgba(31, 41, 55, 0.08);
    }

    .checklist-table th,
    .checklist-table td {
        min-width: 88px;
        font-size: 14px !important;
    }

    #aiDataTabs + .tab-content,
    #operatorIdentityTabs + .tab-content {
        min-width: 0;
    }

    .drop-zone {
        padding: 1.25rem 0.75rem !important;
    }

    .qual-criteria-row {
        flex-direction: column;
    }

    .qual-criteria-row .qc-field,
    .qual-criteria-row .qc-values-wrap {
        width: 100%;
        flex-basis: auto;
    }

    :focus-visible {
        outline: 3px solid #FBBF24 !important;
        outline-offset: 3px;
        box-shadow: none !important;
    }
}

@media (max-width: 575.98px) {
    :root {
        --mobile-content-padding: 12px;
    }

    .page-header,
    .content-container > .d-flex:first-child {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .page-header > .btn,
    .content-container > .d-flex:first-child > .btn,
    .content-container > .d-flex:first-child > a.btn {
        width: 100%;
        justify-content: center;
    }

    .modal-dialog:not(.modal-fullscreen) {
        max-width: none;
        min-height: calc(100% - 1rem);
    }

    .modal-dialog:not(.modal-fullscreen) .modal-content {
        min-height: calc(100dvh - 1rem);
    }

    .classification-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .dialog-card .card-body {
        padding: 0.85rem !important;
    }

    .dialog-card .dialog-stats,
    .dialog-card .d-flex.flex-wrap {
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}