/* ============================================================
   AppxSoft — Responsive fine-tuning
   Breakpoints: 360 / 390 / 430 / 768 / 992 / 1024 / 1280 / 1440+
   Mobile-first rules live in layout/components; these are the
   additional small-screen corrections.
   ============================================================ */

/* Phones (360–480) */
@media (max-width: 480px) {
    :root {
        --appx-header-h: 56px;
    }

    .appx-header-inner {
        padding-inline: var(--appx-space-3);
    }

    .appx-content {
        padding-block: var(--appx-space-4) var(--appx-space-6);
        min-width: 0;
    }

    .panel_s > .panel-body {
        padding: var(--appx-space-4);
    }

    .appx-stat-value {
        font-size: 22px;
    }

    /* Stack Bootstrap columns instead of squeezing them */
    .appx-content .row [class^="col-"] {
        /* keep grid, but avoid 15px gutters cramping tiny screens */
        padding-inline: 8px;
    }

    .appx-content .row {
        margin-inline: -8px;
    }

    /* Full-width buttons ONLY for primary stacked actions.
       Never force .btn-sm / .btn-xs / .input-group-btn buttons full-width —
       that breaks table actions, DataTables controls and header CTAs.
       (.open-ticket-form legacy selector removed — the only form id in the
       theme is #open-new-ticket-form, see views/open_ticket.php.) */
    .appx-noshell .btn-block,
    .login-form .btn-block,
    .appx-card-body > .btn-block,
    #open-new-ticket-form .panel-footer .btn-primary {
        width: 100%;
    }

    /* Primary submit buttons inside stacked forms also go full-width,
       but card HEADER actions stay inline. */
    form:not(.form-inline):not(.navbar-form) > .btn-primary:not(.btn-sm):not(.btn-xs),
    .appx-card-body > form .btn-primary:not(.btn-sm):not(.btn-xs) {
        width: 100%;
    }

    /* Vertical rhythm when primary actions stack */
    .appx-card-body > .tw-flex.tw-flex-wrap .btn {
        margin-block-end: 8px;
    }

    .dataTables_wrapper .dataTables_filter {
        text-align: start;
    }

    .dataTables_wrapper .dataTables_filter input {
        margin-inline-start: 0;
        max-inline-size: 100%;
    }
}

/* Small tablets (768–991): keep sidebar hidden, widen content */
@media (min-width: 768px) and (max-width: 991px) {
    .appx-content {
        padding-block: var(--appx-space-5) var(--appx-space-8);
    }
}

/* Large desktops: comfortable max width.
   Note: #content > .container is the alerts strip; the readable
   content column is main.appx-main > .container.appx-content. */
@media (min-width: 1440px) {
    .appx-main > .container.appx-content {
        max-inline-size: 1280px;
    }
}

/* Landscape phones: don't let the fixed header double-hide content */
@media (max-height: 480px) {
    .appx-noshell {
        justify-content: flex-start;
    }
}