/* iTexxia App V2 responsive behaviour */

@media (max-width: 1199.98px) {
    .page .page-body > .container-xl {
        padding-inline: 1rem;
    }

    .page .page-header,
    .page .content-toolbar {
        align-items: flex-start;
    }

    .page .toolbar-actions,
    .page .itx-action-cluster {
        justify-content: flex-start;
    }

    .page .table > :not(caption) > * > * {
        padding-inline: .72rem;
    }
}

@media (max-width: 991.98px) {
    .page .page-body > .container-xl {
        padding-top: 1rem;
        padding-bottom: 5rem;
    }

    .page .page-header,
    .page .content-toolbar {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .page .page-header .row {
        row-gap: .85rem;
    }

    .page .page-header .col-auto,
    .page .content-toolbar .toolbar-actions {
        width: 100%;
    }

    .page .itx-action-cluster,
    .page .page-header .btn-list,
    .page .content-toolbar .toolbar-actions,
    .page .asset-toolbar {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: .1rem .05rem .45rem;
        scrollbar-width: thin;
        scrollbar-color: var(--itx-border-strong) transparent;
        scroll-snap-type: inline proximity;
    }

    .page .itx-action-cluster > *,
    .page .page-header .btn-list > *,
    .page .content-toolbar .toolbar-actions > *,
    .page .asset-toolbar > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .page .content-card,
    .page .form-card,
    .page .card-body {
        padding: 1rem;
    }

    .page .form-grid,
    .page .form-grid--balanced,
    .page .form-grid--columns {
        grid-template-columns: 1fr;
    }

    .page .account-view .nav-pills,
    .page .nav-tabs,
    .page .nav-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: .35rem;
        scrollbar-width: thin;
    }

    .page .account-view .nav-pills .nav-link,
    .page .nav-tabs .nav-link,
    .page .nav-pills .nav-link {
        white-space: nowrap;
    }

    .page .ticket-bulk-toolbar {
        bottom: calc(.75rem + env(safe-area-inset-bottom));
    }

    .page .sticky-ticket-actions,
    .page .form-card__footer.is-sticky,
    .page [data-sticky-actions] {
        position: sticky;
        bottom: 0;
        z-index: 25;
        margin-inline: -1rem;
        margin-bottom: -1rem;
        padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--itx-border);
    }
}

@media (max-width: 767.98px) {
    :root {
        --itx-page-gutter: .8rem;
        --itx-section-gap: .85rem;
        --itx-radius-lg: 16px;
    }

    body:not(.ix2-body) {
        font-size: 15px;
    }

    .page .navbar-glass,
    .page .custom-navbar {
        min-height: 60px;
    }

    .page .navbar-brand-logo {
        max-height: 32px;
    }

    .page .page-body > .container-xl {
        padding-inline: .8rem;
        padding-top: .85rem;
    }

    /* Keep the shared page identity prominent without letting long titles
       collide with badges or actions on narrow screens. */
    .page .page-hero {
        margin: .75rem 0 1rem;
        padding: 1.1rem 0;
        border-radius: 0;
        box-shadow: 0 8px 24px rgb(15 23 42 / 10%);
    }

    .page .page-hero > .container-xl {
        padding-inline: 1rem;
    }

    .page .page-hero-text {
        width: 100%;
        gap: .5rem;
    }

    .page .page-hero-text > .d-flex {
        align-items: flex-start !important;
        gap: .5rem !important;
    }

    .page .page-hero-title {
        width: 100%;
        max-width: 24ch;
        color: var(--itx-ink);
        font-size: clamp(1.65rem, 7vw, 2rem);
        font-weight: 800;
        line-height: 1.12;
        letter-spacing: -.025em;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    .page .page-hero-kicker {
        padding: .3rem .65rem;
        color: var(--itx-ink);
        font-size: .72rem;
        line-height: 1.25;
        letter-spacing: .09em;
    }

    .page .page-hero-desc {
        max-width: 42ch;
        color: var(--itx-muted);
        font-size: .925rem;
        line-height: 1.5;
    }

    .page .page-hero-badge {
        white-space: normal;
        text-align: left;
        line-height: 1.25;
    }

    [data-bs-theme="dark"] .page .page-hero-title,
    [data-bs-theme="dark"] .page .page-hero-kicker {
        color: var(--itx-ink);
    }

    .page .page-heading {
        padding: 1rem;
        border-radius: var(--itx-radius-lg);
    }

    .page .page-title {
        font-size: 1.38rem;
    }

    .page .page-header p,
    .page .page-heading .page-subtitle,
    .page .content-toolbar .text-muted {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: .88rem;
    }

    .page .btn {
        min-height: 42px;
        padding-inline: .82rem;
    }

    .page .btn-sm,
    .page .btn-group-sm > .btn,
    .page .btn.btn-icon.btn-sm {
        min-height: 36px;
    }

    .page .card,
    .page .content-card,
    .page .form-card,
    .page .glass-panel,
    .page .detail-view,
    .page .grid-view {
        border-radius: var(--itx-radius-lg) !important;
    }

    .page .card-header {
        padding-inline: .9rem;
    }

    .page .card-body,
    .page .content-card,
    .page .form-card {
        padding: .9rem;
    }

    .page .row-cards,
    .page .ticket-index__stats .row {
        --tblr-gutter-x: .65rem;
        --tblr-gutter-y: .65rem;
    }

    .page .stat-card {
        min-height: 88px;
        padding: .85rem;
    }

    .page .stat-value,
    .page .portal-stat-value,
    .page .row-cards .h2,
    .page .row-cards .h3 {
        font-size: 1.35rem;
    }

    .page .stat-icon,
    .page .account-toolbar-icon,
    .page .avatar[class*="bg-"] {
        width: 40px;
        height: 40px;
        border-radius: var(--itx-radius-sm);
    }

    .page .matrix-filter-bar,
    .page .account-filter-bar,
    .page .contact-filter-bar {
        display: grid !important;
        grid-template-columns: 1fr;
        align-items: stretch !important;
    }

    .page .matrix-filter-bar > *,
    .page .account-filter-bar > *,
    .page .contact-filter-bar > * {
        width: 100% !important;
        max-width: none !important;
    }

    .page .matrix-filter-bar .btn,
    .page .account-filter-bar .btn,
    .page .contact-filter-bar .btn {
        width: 100%;
    }

    .page .table > :not(caption) > * > * {
        padding: .68rem .7rem;
        font-size: .84rem;
    }

    .page .table > thead > tr > th,
    .page .grid-view .table > thead > tr > th {
        font-size: .65rem;
    }

    .page .ticket-log__item {
        padding: .9rem;
    }

    .page .ticket-log__header {
        align-items: flex-start;
    }

    .page .ticket-log__status {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: .25rem;
    }

    .page .ticket-log__meta {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: .75rem;
    }

    .page .ticket-log__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: .8rem;
    }

    .page .ticket-log__actions .btn {
        width: 100%;
    }

    .page .detail-view,
    .page .detail-view tbody,
    .page .detail-view tr,
    .page .detail-view th,
    .page .detail-view td {
        display: block;
        width: 100%;
    }

    .page .detail-view tr {
        padding: .75rem 0;
        border-bottom: 1px solid var(--itx-border);
    }

    .page .detail-view tr:last-child {
        border-bottom: 0;
    }

    .page .detail-view th,
    .page .detail-view td {
        border: 0;
        padding: .2rem .75rem;
    }

    .page .detail-view th {
        margin-bottom: .15rem;
    }

    .page .pagination {
        flex-wrap: wrap;
        justify-content: center !important;
    }

    .modal .modal-dialog {
        margin: .65rem;
    }

    .modal .modal-content,
    .offcanvas {
        border-radius: var(--itx-radius-lg);
    }
}

@media (max-width: 479.98px) {
    .page .ticket-index__stats .row > [class*="col-"],
    .page .row-cards > [class*="col-"] {
        min-width: 0;
    }

    .page .stat-card {
        min-height: 82px;
        gap: .65rem;
    }

    .page .stat-label {
        font-size: .72rem;
    }

    .page .ticket-log__actions {
        grid-template-columns: 1fr;
    }

    .page .form-card__footer,
    .page .sticky-ticket-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .page .form-card__footer .btn,
    .page .sticky-ticket-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

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

    .page .btn:hover,
    .page .account-index .account-card:hover,
    .page .contact-index .contact-card:hover,
    .page .asset-index .asset-card:hover {
        transform: none !important;
    }
}

@media (forced-colors: active) {
    .page .card,
    .page .content-card,
    .page .form-card,
    .page .form-control,
    .page .form-select,
    .page .btn,
    .page .badge {
        forced-color-adjust: auto;
    }
}