/* KIRKIES_MOBILE_RESPONSIVE_SYSTEMWIDE_R1
   Mobile-only responsive safety foundation.
   Desktop/tablet layouts are intentionally left unchanged.
*/

@media (max-width: 767.98px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    body,
    main,
    header,
    footer,
    section,
    article,
    aside,
    nav,
    form {
        min-width: 0 !important;
        max-width: 100%;
    }

    main,
    [role="main"],
    .main,
    .content,
    .content-wrapper,
    .page,
    .page-content,
    .page-wrapper,
    .workspace,
    .workspace-content,
    .dashboard,
    .dashboard-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .container,
    .container-fluid,
    [class~="container"],
    [class*="container-"] {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    img,
    picture,
    video,
    canvas,
    svg {
        max-width: 100% !important;
    }

    img,
    picture,
    video,
    canvas {
        height: auto;
    }

    iframe {
        max-width: 100% !important;
    }

    .card,
    [class*="card"],
    .panel,
    [class*="panel"],
    .widget,
    [class*="widget"],
    .tile,
    [class*="tile"],
    .stat,
    [class*="stat"],
    .kpi,
    [class*="kpi"] {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .row,
    [class*="row"],
    .flex,
    .d-flex,
    [class*="flex-"] {
        min-width: 0 !important;
    }

    .btn-group,
    .button-group,
    .action-group,
    .actions,
    .page-actions,
    .header-actions,
    [class*="action-group"],
    [class*="page-actions"],
    [class*="header-actions"] {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }

    button,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .btn,
    [class*="button"] {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        min-height: 40px;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    textarea {
        resize: vertical;
    }

    fieldset {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .table-responsive,
    .table-wrapper,
    .table-container,
    [class*="table-wrap"],
    [class*="table-container"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    main table,
    [role="main"] table,
    .content table,
    .page-content table,
    .workspace table {
        max-width: 100% !important;
    }

    pre,
    code {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    h1 {
        font-size: clamp(1.55rem, 7vw, 2rem) !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere;
    }

    h2 {
        font-size: clamp(1.28rem, 5.8vw, 1.7rem) !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
    }

    h3 {
        font-size: clamp(1.08rem, 5vw, 1.4rem) !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere;
    }

    p,
    li,
    dd,
    dt,
    label,
    small {
        overflow-wrap: anywhere;
    }

    .modal,
    .dialog,
    [role="dialog"],
    [class*="modal"],
    [class*="dialog"] {
        max-width: calc(100vw - 24px) !important;
    }

    .modal-content,
    .dialog-content,
    [class*="modal-content"],
    [class*="dialog-content"] {
        max-width: 100% !important;
        max-height: calc(100vh - 24px) !important;
        overflow-y: auto;
    }

    [style*="min-width:"][style*="px"],
    [style*="min-width:"][style*="rem"] {
        min-width: 0 !important;
    }

    [style*="width:"][style*="px"] {
        max-width: 100% !important;
    }

    [style*="max-width:"][style*="px"] {
        max-width: 100% !important;
    }

    .pagination,
    [class*="pagination"] {
        max-width: 100% !important;
        flex-wrap: wrap !important;
        gap: 6px;
    }

    .breadcrumb,
    [class*="breadcrumb"] {
        max-width: 100% !important;
        flex-wrap: wrap !important;
        overflow-wrap: anywhere;
    }

    .tabs,
    .tab-list,
    [role="tablist"],
    [class*="tabs"] {
        max-width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .avatar,
    [class*="avatar"] {
        flex: 0 0 auto;
    }
}

/* Small-phone refinement only. */
@media (max-width: 479.98px) {
    button,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .btn {
        min-height: 42px;
    }

    .page-actions,
    .header-actions,
    [class*="page-actions"],
    [class*="header-actions"] {
        width: 100% !important;
        align-items: stretch !important;
    }

    .page-actions > button,
    .page-actions > a,
    .header-actions > button,
    .header-actions > a,
    [class*="page-actions"] > button,
    [class*="page-actions"] > a,
    [class*="header-actions"] > button,
    [class*="header-actions"] > a {
        flex: 1 1 140px;
    }
}