/**
 * ControlServer ??? Mobile responsive layer
 * Apenas viewports <= 991.98px (desktop inalterado).
 * Otimizado para smartphones ~360???430px (ex.: Redmi Note 14 Pro, 1220px logical width em retrato).
 */

@media (max-width: 991.98px) {
    :root {
        --cs-mobile-gutter: .75rem;
    }

    /* Conte??do principal */
    .app-content > main,
    main.container-fluid,
    main.py-4,
    main.p-4 {
        padding: var(--cs-mobile-gutter) !important;
    }

    /* Topbar */
    .topbar,
    .app-topbar {
        padding-left: var(--cs-mobile-gutter) !important;
        padding-right: var(--cs-mobile-gutter) !important;
        gap: .5rem;
        flex-wrap: wrap;
    }

    .topbar__right-area {
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 100%;
    }

  .topbar-module-title {
        max-width: min(42vw, 220px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Cabe??alhos de p??gina */
    .cs-page-header,
    .cs-page-header .d-flex,
    .page-header-actions {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .cs-page-header-title {
        font-size: 1.15rem;
        line-height: 1.25;
        word-break: break-word;
    }

    .cs-page-header-subtitle {
        font-size: .85rem;
    }

    /* Toolbars e filtros */
    .cs-toolbar,
    .cs-grid-toolbar,
    .card-header .d-flex,
    .d-flex.gap-2.flex-wrap,
    .btn-toolbar {
        flex-wrap: wrap !important;
        gap: .4rem !important;
    }

    /* Formul??rios ??? campos empilham naturalmente via Bootstrap; garantir largura */
    .form-control,
    .form-select,
    .input-group {
        max-width: 100%;
    }

    .row.g-2 > [class*="col-"],
    .row.g-3 > [class*="col-"],
    .row.g-4 > [class*="col-"] {
        min-width: 0;
    }

    /* Cards e KPIs ??? 2 colunas em telas m??dias, 1 em muito estreito via breakpoint menor */
    .row > .col-md-3,
    .row > .col-lg-3,
    .row > .col-xl-3,
    .row > .col-md-4,
    .row > .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Tabelas ??? scroll horizontal autom??tico */
    .cs-mobile-table-scroll,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        width: 100%;
    }

    .cs-mobile-table-scroll > .table,
    .table-responsive > .table {
        margin-bottom: 0;
        min-width: 640px;
    }

    .table td,
    .table th {
        white-space: nowrap;
    }

    .table td.cs-wrap,
    .table th.cs-wrap,
    .table .text-wrap {
        white-space: normal;
        word-break: break-word;
    }

    /* Modais */
    .modal-dialog {
        margin: .5rem auto;
        max-width: calc(100vw - 1rem);
    }

    .modal-fullscreen-sm-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    /* Dropdowns largos */
    .dropdown-menu {
        max-width: calc(100vw - 1.5rem);
    }

    .cs-launcher-panel {
        min-width: 0 !important;
        width: min(100vw - 1rem, 560px) !important;
    }

    /* Breadcrumb */
    .breadcrumb {
        flex-wrap: wrap;
        font-size: .78rem;
    }

    /* Grids do design system */
    .cs-ds-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .cs-ds-meta-grid,
    .cs-ds-dev-grid,
    .cs-site-expand-grid,
    .cs-expand-admin-grid {
        grid-template-columns: 1fr !important;
    }

    .cs-ds-drawer {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Central de Suporte — ver partials/mobile_portrait_styles.php (inline após styles.php) */


/* ═══ PWA standalone — safe area (notch / barra de gestos) ═══ */
@supports (padding: env(safe-area-inset-top)) {
    @media (display-mode: standalone) {
        html {
            background: #050b14;
        }

        .app-topbar,
        .topbar,
        header.topbar {
            padding-top: max(.35rem, env(safe-area-inset-top));
            padding-left: max(.75rem, env(safe-area-inset-left));
            padding-right: max(.75rem, env(safe-area-inset-right));
        }

        #appSidebar.sidebar,
        .sidebar {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
            height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
            min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        }

        body.sidebar-expanded-mobile .sidebar {
            top: env(safe-area-inset-top);
            height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        }

        .app-content > main,
        main.container-fluid {
            padding-bottom: max(.75rem, env(safe-area-inset-bottom)) !important;
            padding-left: max(.75rem, env(safe-area-inset-left)) !important;
            padding-right: max(.75rem, env(safe-area-inset-right)) !important;
        }

        .cs-platform-footer {
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }

        .modal-dialog {
            margin-bottom: max(.5rem, env(safe-area-inset-bottom));
        }

        .dropdown-menu {
            max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 1rem);
        }
    }
}