/* Mobile responsive overrides - all rules scoped to media queries only */

@media only screen and (max-width: 767px) {

    /* Base layout: collapse 1-14-1 gutter */
    .pusher > .ui.grid > .one.wide.column {
        display: none !important;
    }
    .pusher > .ui.grid > .fourteen.wide.column {
        width: 100% !important;
        padding-left: 1em !important;
        padding-right: 1em !important;
    }

    /* Horizontal segments: stack vertically */
    .ui.horizontal.segments {
        flex-direction: column !important;
    }
    .ui.horizontal.segments > .segment {
        border-left: none !important;
        border-top: 1px solid rgba(34, 36, 38, .15) !important;
        width: 100% !important;
    }
    .ui.horizontal.segments > .segment:first-child {
        border-top: none !important;
    }

    /* Dashboard stats: 2 per row */
    .dashboard-stats .column {
        width: 50% !important;
        margin-bottom: 1em;
    }

    /* Tables: horizontal scroll */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1em;
    }

    /* Pipeline: horizontal scroll */
    .pipeline-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1em;
    }
    .pipeline-scroll > .ui.equal.width.grid {
        min-width: 900px;
        flex-wrap: nowrap !important;
    }

    /* Modals: near full width */
    .ui.modal {
        width: 95% !important;
        margin: 0 auto !important;
    }

    /* Sidebar: ensure overlay */
    .ui.vertical.inverted.sidebar.menu {
        z-index: 1001;
    }

    /* Buttons: wrap */
    .ui.buttons {
        flex-wrap: wrap;
    }
}

/* Tablet: reduce gutters */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pusher > .ui.grid > .one.wide.column {
        width: 4% !important;
    }
    .pusher > .ui.grid > .fourteen.wide.column {
        width: 92% !important;
    }
}