/*
 * Plenzy Mobile UI Polish
 * Loaded after page-specific CSS and PWA CSS so it can safely normalize
 * mobile behaviour without changing existing application logic.
 */

/* ---------- Shared action/button alignment ---------- */
:is(
    .tcs-appt-action,.tcs-appt-modal-btn,.company-btn,.apt-btn,.cs-btn,.sp-btn,
    .finance-btn,.cr-btn,.loan-btn,.pr-btn,.sv-btn,.ks-btn,.ap-action,.ap-view-btn,
    .parking-btn,.depot-btn,.offer-btn,.payment-btn,.doc-btn,.catalog-btn
) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    line-height: 1.15 !important;
    text-align: center !important;
}

:is(
    .tcs-appt-action,.tcs-appt-modal-btn,.company-btn,.apt-btn,.cs-btn,.sp-btn,
    .finance-btn,.cr-btn,.loan-btn,.pr-btn,.sv-btn,.ks-btn,.ap-action,.ap-view-btn,
    .parking-btn,.depot-btn,.offer-btn,.payment-btn,.doc-btn,.catalog-btn
) > :is(svg,i,.apt-svg,.tcs-appt-svg) {
    flex: 0 0 auto !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
}

/* Commercial-space cards: slightly taller imagery also on desktop. */
.pl-commercial-spaces .ap-plan {
    height: 290px !important;
    min-height: 290px !important;
}

/* ---------- Client header action menu ---------- */
.cs-header-more {
    position: relative !important;
    flex: 0 0 auto !important;
}

.cs-more-trigger {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
}

.cs-header-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 10020 !important;
    min-width: 230px !important;
    padding: 7px !important;
    border: 1px solid #E3E9F1 !important;
    border-radius: 13px !important;
    background: #FFFFFF !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .14) !important;
    display: none !important;
}

.cs-header-menu.is-open {
    display: grid !important;
    gap: 3px !important;
}

.cs-header-menu a {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 11px !important;
    border-radius: 9px !important;
    color: #22314A !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
}

.cs-header-menu a:hover {
    background: #F5F8FC !important;
}

.cs-header-menu a i {
    width: 18px !important;
    font-size: 18px !important;
    color: #1747D8 !important;
    text-align: center !important;
}

/* ---------- Splash / app intro ---------- */
.plenzy-app-splash {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px !important;
    background: #FFFFFF !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .28s ease, visibility .28s ease !important;
}

.plenzy-app-splash.is-visible {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.plenzy-app-splash.is-leaving {
    opacity: 0 !important;
    visibility: hidden !important;
}

.plenzy-app-splash-inner {
    width: min(64vw, 280px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: plenzySplashIn .48s cubic-bezier(.2,.8,.2,1) both !important;
}

.plenzy-app-splash-inner img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

@keyframes plenzySplashIn {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Mobile-only fixes ---------- */
.mobile-sidebar-close { display: none !important; }

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

    /* Prevent Safari/iOS automatic zoom when focusing fields. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Bigger Plenzy icon in mobile navbar, without changing desktop. */
    .topbar-left {
        flex: 0 0 50px !important;
        width: 50px !important;
        min-width: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .mobile-top-logo {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        border-radius: 12px !important;
    }

    .mobile-top-logo img {
        width: 44px !important;
        height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        object-fit: contain !important;
    }

    /* Sidebar uses the full viewport height and scrolls internally. */
    .sidebar {
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        z-index: 1000600 !important;
    }

    .sidebar-header {
        min-height: 68px !important;
        height: 68px !important;
        flex: 0 0 68px !important;
        padding: max(8px, env(safe-area-inset-top, 0px)) 11px 6px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .sidebar-header .brand {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .sidebar-header .brand-logo {
        display: block !important;
        width: 128px !important;
        max-width: 128px !important;
        height: auto !important;
    }

    .sidebar-header .brand-icon {
        display: none !important;
    }

    .mobile-sidebar-close {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
        border: 1px solid #E0E7F0 !important;
        border-radius: 11px !important;
        background: #FFFFFF !important;
        color: #18365D !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    .mobile-sidebar-close i { font-size: 21px !important; }

    .sidebar-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.mobile-sidebar-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    body.mobile-sidebar-open .sidebar-scroll {
        touch-action: pan-y !important;
    }

    .mobile-overlay {
        z-index: 1000500 !important;
    }

    /* Supplier tabs: one row with natural horizontal scrolling. */
    .sv-tabs {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 7px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
    }

    .sv-tabs::-webkit-scrollbar { display: none !important; }

    .sv-tab {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 148px !important;
        padding: 0 14px !important;
        white-space: nowrap !important;
        scroll-snap-align: start !important;
    }

    /* Same usability for contractor detail tabs. */
    .ks-tabs {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .ks-tabs::-webkit-scrollbar { display: none !important; }
    .ks-tab { flex: 0 0 auto !important; white-space: nowrap !important; }

    /* Agent profile tabs stay in one row. */
    .pr-subtabs {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 7px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
    }

    .pr-subtabs::-webkit-scrollbar { display: none !important; }

    .pr-subtabs button {
        flex: 0 0 auto !important;
        min-width: 126px !important;
        padding: 0 15px !important;
        white-space: nowrap !important;
        scroll-snap-align: start !important;
    }

    /* Client tabs also remain on a single horizontal row. */
    .pl-client-show .cs-tabs-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 7px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
    }

    .pl-client-show .cs-tabs-nav::-webkit-scrollbar { display: none !important; }

    .pl-client-show .cs-tab-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 166px !important;
        max-width: none !important;
        white-space: nowrap !important;
        scroll-snap-align: start !important;
    }

    .pl-client-show .cs-header {
        gap: 14px !important;
    }

    .pl-client-show .cs-header-actions {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .pl-client-show .cs-header-actions > .cs-btn:first-child {
        flex: 1 1 auto !important;
        width: auto !important;
    }

    .cs-header-menu {
        position: fixed !important;
        top: auto !important;
        right: 12px !important;
        bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        left: 12px !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .cs-header-menu a {
        min-height: 48px !important;
        font-size: 13px !important;
    }

    /* Commercial unit photos are taller and easier to inspect on mobile. */
    .pl-commercial-spaces .ap-plan {
        height: 300px !important;
        min-height: 300px !important;
    }

    /* ---------- Finance: genuinely mobile responsive ---------- */
    .finance-page {
        padding: 10px !important;
        gap: 10px !important;
        overflow-x: hidden !important;
    }

    .finance-header {
        padding: 15px !important;
        gap: 13px !important;
    }

    .finance-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .finance-actions .finance-btn {
        width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
    }

    :is(
        .finance-summary,.finance-kpi-grid,.finance-chart-grid,.finance-stats-grid,
        .finance-comp-grid,.finance-payment-breakdown,.finance-partial-summary,
        .finance-credit-overview,.finance-module-compact-grid,.finance-compensation-strip
    ) {
        grid-template-columns: 1fr !important;
    }

    .finance-summary-card,
    .finance-kpi,
    .finance-card,
    .finance-panel {
        min-width: 0 !important;
        min-height: 0 !important;
    }

    .finance-summary-card {
        padding: 16px !important;
    }

    .finance-summary-card :is(.summary-value,.finance-amount,strong) {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .finance-filters,
    .finance-extra-filters,
    .finance-form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .finance-table-wrap,
    .finance-list-card,
    .finance-card:has(.finance-table) {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .finance-table {
        min-width: 760px !important;
    }

    .finance-chart-card,
    .finance-chart-full {
        min-width: 0 !important;
        padding: 14px !important;
    }

    .finance-chart-box,
    .finance-chart-full .finance-chart-box {
        width: 100% !important;
        min-width: 0 !important;
        height: 240px !important;
        min-height: 240px !important;
    }

    .finance-pagination {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 9px !important;
    }

    .finance-pages {
        max-width: 100% !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
    }

    /* ---------- Credits / loans responsive ---------- */
    .cr-page,
    .loan-page {
        padding: 10px !important;
        gap: 10px !important;
        overflow-x: hidden !important;
    }

    .cr-header,
    .loan-header {
        padding: 15px !important;
        gap: 12px !important;
    }

    .cr-stats,
    .loan-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .cr-stat,
    .loan-stat {
        min-width: 0 !important;
        min-height: 104px !important;
        padding: 14px !important;
    }

    .cr-toolbar,
    .cr-form-layout,
    .cr-grid,
    .loan-overview,
    .loan-info-grid,
    .loan-confirm {
        grid-template-columns: 1fr !important;
    }

    .cr-table-wrap,
    .loan-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .cr-table,
    .loan-table {
        min-width: 760px !important;
    }

    .cr-pagination {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .cr-page-nav {
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    /* ---------- Appointment modal: compact instead of full-page ---------- */
    .tcs-appt-modal-layer {
        align-items: center !important;
        justify-content: center !important;
        padding: 14px !important;
    }

    .tcs-appt-modal,
    .tcs-appt-modal.small {
        width: min(520px, calc(100vw - 28px)) !important;
        max-height: min(78dvh, 660px) !important;
        border-radius: 16px !important;
    }

    .tcs-appt-modal-head {
        padding: 13px 14px !important;
        align-items: center !important;
    }

    .tcs-appt-modal-head h3 {
        font-size: 15px !important;
    }

    .tcs-appt-modal-head p {
        margin-top: 3px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .tcs-appt-modal-close {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
    }

    .tcs-appt-modal-body {
        padding: 12px 13px !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }

    .tcs-appt-form-grid {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .tcs-appt-modal-footer {
        min-height: 0 !important;
        padding: 10px 13px !important;
        display: flex !important;
        grid-template-columns: none !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        position: static !important;
    }

    .tcs-appt-modal-btn,
    .tcs-appt-modal-btn:visited,
    .tcs-appt-modal-btn:hover,
    .tcs-appt-modal-btn:focus {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 11px !important;
        font-size: 12px !important;
    }

    /* ---------- General compact modal safety ---------- */
    :is(
        .ap-modal-layer,.apt-modal-layer,.catalog-modal-layer,.company-modal-layer,
        .cr-modal-layer,.cs-modal-layer,.depot-modal-layer,.doc-modal-layer,
        .finance-modal-layer,.loan-modal-layer,.offer-modal-layer,.parking-modal-layer,
        .payment-modal-layer,.perm-modal-layer,.pl-apartment-modal-layer,
        .pl-client-modal-layer,.pl-project-modal-layer,.positions-modal-layer,
        .sp-modal-layer,.work-modal-layer,.wrx-modal-layer
    ) {
        padding: 14px !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    :is(
        .ap-modal,.apt-modal,.catalog-modal,.company-modal,.cr-modal,.cs-modal,
        .cs-standard-modal,.depot-modal,.doc-modal,.finance-modal,.loan-modal,
        .offer-modal,.parking-modal,.payment-modal,.perm-modal,.pl-apartment-modal,
        .pl-client-modal,.pl-project-modal,.positions-modal,.sp-modal,.work-modal,.wrx-modal
    ) {
        width: min(620px, calc(100vw - 28px)) !important;
        max-width: calc(100vw - 28px) !important;
        max-height: min(84dvh, 720px) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    :is(
        .ap-modal-body,.apt-modal-body,.catalog-modal-body,.company-modal-body,
        .cr-modal-body,.cs-modal-body,.depot-modal-body,.doc-modal-body,
        .finance-modal-body,.loan-modal-body,.offer-modal-body,.parking-modal-body,
        .payment-modal-body,.perm-modal-body,.pl-apartment-modal-body,
        .pl-client-modal-body,.pl-project-modal-body,.positions-modal-body,
        .sp-modal-body,.work-modal-body,.wrx-modal-body
    ) {
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .cr-modal-foot,
    .loan-modal-foot {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }

    .cr-modal-foot .cr-btn,
    .loan-modal-foot .loan-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        white-space: normal !important;
    }
}

@media (max-width: 430px) {
    .finance-actions {
        grid-template-columns: 1fr !important;
    }

    .cr-stats,
    .loan-stats {
        grid-template-columns: 1fr !important;
    }

    .pl-commercial-spaces .ap-plan {
        height: 280px !important;
        min-height: 280px !important;
    }

    .mobile-top-logo {
        width: 43px !important;
        height: 43px !important;
        min-width: 43px !important;
    }

    .mobile-top-logo img {
        width: 41px !important;
        height: 41px !important;
        max-width: 41px !important;
        max-height: 41px !important;
    }
}

/* =========================================================
   MOBILE UI CORRECTIONS — 2026-08-16-2
   Exact fixes requested after device testing.
   ========================================================= */

.plenzy-mobile-filter-toggle{display:none!important}

@media (max-width:860px){
    /* Navbar logo: visibly larger, using the cropped navbar asset. */
    .topbar-left{
        flex:0 0 56px!important;
        width:56px!important;
        min-width:56px!important;
    }
    .mobile-top-logo{
        width:52px!important;
        height:52px!important;
        min-width:52px!important;
        border-radius:12px!important;
        overflow:visible!important;
    }
    .mobile-top-logo img{
        width:52px!important;
        height:52px!important;
        max-width:52px!important;
        max-height:52px!important;
        object-fit:contain!important;
    }

    /* Sidebar logo returns to the original/normal visual size. */
    .sidebar-header .brand-logo{
        width:112px!important;
        max-width:112px!important;
        max-height:38px!important;
    }

    /* -----------------------------------------------------
       Generic mobile filters: collapsed by default.
       JavaScript adds [data-plenzy-mobile-filter-panel].
       ----------------------------------------------------- */
    .plenzy-mobile-filter-toggle{
        width:auto!important;
        max-width:100%!important;
        min-height:40px!important;
        padding:0 13px!important;
        margin:0 0 9px 0!important;
        border:1px solid #DDE5EF!important;
        border-radius:10px!important;
        background:#FFFFFF!important;
        color:#17355E!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:7px!important;
        font:700 12px/1 'Plus Jakarta Sans',sans-serif!important;
        box-shadow:none!important;
        cursor:pointer!important;
    }
    .plenzy-mobile-filter-toggle i{font-size:17px!important}
    .plenzy-mobile-filter-toggle .plenzy-filter-chevron{transition:transform .18s ease!important}
    .plenzy-mobile-filter-toggle.is-open .plenzy-filter-chevron{transform:rotate(180deg)!important}
    [data-plenzy-mobile-filter-panel][hidden]{display:none!important}
    [data-plenzy-mobile-filter-panel].is-plenzy-filter-open{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:10px!important;
    }

    /* Hide old duplicate filter toggles when the universal one is active. */
    .ap-filter-toggle,.ct-mobile-filter-toggle,.depot-filter-toggle,.doc-filter-toggle,
    .parking-filter-toggle,.wrx-filter-toggle,.pd-filter-toggle,.cl-mobile-filter-toggle{
        display:none!important;
    }

    /* -----------------------------------------------------
       Furnitorët: true one-row touch side-scroll.
       ----------------------------------------------------- */
    .sv-page,.sv-pane,.sv-card{min-width:0!important;max-width:100%!important}
    .sv-tabs{
        display:flex!important;
        grid-template-columns:none!important;
        flex-wrap:nowrap!important;
        justify-content:flex-start!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow-x:scroll!important;
        overflow-y:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-x:contain!important;
        touch-action:pan-x!important;
        scrollbar-width:none!important;
        scroll-snap-type:x proximity!important;
        padding:6px!important;
        gap:6px!important;
    }
    .sv-tabs::-webkit-scrollbar{display:none!important}
    .sv-tab,.sv-tab:hover,.sv-tab:focus,.sv-tab:active{
        flex:0 0 auto!important;
        width:auto!important;
        min-width:max-content!important;
        height:46px!important;
        padding:0 14px!important;
        white-space:nowrap!important;
        scroll-snap-align:start!important;
    }
    .sv-head-actions{
        width:100%!important;
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:7px!important;
        flex-wrap:wrap!important;
    }
    .sv-head-actions .sv-btn,
    .sv-section-actions .sv-btn,
    .sv-comp-head .sv-btn,
    .sv-row-actions .sv-btn{
        flex:0 0 auto!important;
        width:auto!important;
        min-width:0!important;
        max-width:100%!important;
        padding-left:12px!important;
        padding-right:12px!important;
        white-space:nowrap!important;
    }
    .sv-simple-scroll,.sv-pay-table-wrap,.sv-table-wrap,.sv-payment-table{
        max-width:100%!important;
        overflow-x:auto!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-x:contain!important;
        touch-action:pan-x!important;
    }
    .sv-toolbar{width:100%!important;max-width:100%!important;min-width:0!important}

    /* -----------------------------------------------------
       Agent profile tabs: always one row + side-scroll.
       ----------------------------------------------------- */
    .pr-page,.pr-pane,.pr-card{min-width:0!important;max-width:100%!important}
    .pr-subtabs{
        display:flex!important;
        grid-template-columns:none!important;
        flex-wrap:nowrap!important;
        justify-content:flex-start!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-x:contain!important;
        touch-action:pan-x!important;
        scrollbar-width:none!important;
        scroll-snap-type:x proximity!important;
        gap:6px!important;
        padding:7px!important;
    }
    .pr-subtabs::-webkit-scrollbar{display:none!important}
    .pr-subtabs button{
        flex:0 0 auto!important;
        width:auto!important;
        min-width:118px!important;
        min-height:42px!important;
        padding:0 13px!important;
        white-space:nowrap!important;
        scroll-snap-align:start!important;
    }

    /* -----------------------------------------------------
       Credits / loans: mobile spacing + side-scroll tables.
       ----------------------------------------------------- */
    .cr-page,.loan-page{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        padding:8px!important;
        gap:10px!important;
        overflow:visible!important;
    }
    .cr-card,.loan-card,.loan-section{min-width:0!important;max-width:100%!important}
    .cr-header,.loan-header{
        padding:14px!important;
        min-height:0!important;
        gap:11px!important;
    }
    .cr-header{align-items:flex-start!important;flex-direction:column!important}
    .cr-header>.cr-btn,
    .loan-head-actions .loan-btn{
        flex:0 0 auto!important;
        width:auto!important;
        min-width:0!important;
        max-width:100%!important;
        padding-left:12px!important;
        padding-right:12px!important;
    }
    .cr-header h2,.loan-header h2{font-size:20px!important}
    .cr-header p,.loan-header p{font-size:11px!important;line-height:1.45!important}
    .cr-stats,.loan-stats{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
    }
    .cr-stat,.loan-stat{
        min-width:0!important;
        min-height:102px!important;
        padding:12px!important;
    }
    .cr-stat strong,.loan-stat strong{
        font-size:15px!important;
        overflow-wrap:anywhere!important;
        white-space:normal!important;
    }
    .cr-toolbar{grid-template-columns:1fr!important;width:100%!important;min-width:0!important}
    .cr-table-wrap,.loan-table-wrap{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-x:contain!important;
        touch-action:pan-x!important;
        border-radius:12px!important;
    }
    .cr-table{min-width:980px!important}
    .loan-table{min-width:1040px!important}
    .cr-pagination{
        padding:10px 11px!important;
        flex-direction:column!important;
        align-items:flex-start!important;
        gap:8px!important;
    }
    .cr-page-nav{
        width:100%!important;
        max-width:100%!important;
        flex-wrap:nowrap!important;
        overflow-x:auto!important;
        -webkit-overflow-scrolling:touch!important;
        scrollbar-width:none!important;
    }
    .cr-page-nav::-webkit-scrollbar{display:none!important}
    .loan-overview{grid-template-columns:1fr!important;gap:10px!important}
    .loan-section{padding:14px!important}
    .loan-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
    .loan-info-item.full{grid-column:1/-1!important}
    .loan-plan-head{
        padding:13px!important;
        align-items:flex-start!important;
        gap:10px!important;
        flex-wrap:wrap!important;
    }
    .loan-plan-head .loan-btn{width:auto!important;flex:0 0 auto!important}

    /* -----------------------------------------------------
       Appointment modal: deliberately smaller with inner scroll.
       ----------------------------------------------------- */
    .tcs-appt-modal-layer{
        align-items:center!important;
        justify-content:center!important;
        padding:16px!important;
    }
    .tcs-appt-modal,
    .tcs-appt-modal.small{
        width:min(500px,calc(100vw - 32px))!important;
        max-width:calc(100vw - 32px)!important;
        height:auto!important;
        max-height:68dvh!important;
        border-radius:15px!important;
        overflow:hidden!important;
        display:flex!important;
        flex-direction:column!important;
    }
    .tcs-appt-modal-head{
        min-height:0!important;
        padding:12px 13px!important;
        flex:0 0 auto!important;
    }
    .tcs-appt-modal-head h3{font-size:14px!important}
    .tcs-appt-modal-head p{font-size:10.5px!important;line-height:1.35!important}
    .tcs-appt-modal-body{
        flex:1 1 auto!important;
        min-height:0!important;
        max-height:none!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch!important;
        padding:11px 12px!important;
    }
    .tcs-appt-modal-footer{
        position:static!important;
        flex:0 0 auto!important;
        min-height:0!important;
        padding:9px 11px!important;
        display:flex!important;
        grid-template-columns:none!important;
        justify-content:flex-end!important;
        gap:7px!important;
    }
    .tcs-appt-modal-btn,
    .tcs-appt-modal-btn:visited,
    .tcs-appt-modal-btn:hover,
    .tcs-appt-modal-btn:focus{
        width:auto!important;
        flex:1 1 0!important;
        min-width:0!important;
        height:38px!important;
        min-height:38px!important;
        padding:0 10px!important;
        font-size:11.5px!important;
    }

    /* -----------------------------------------------------
       General mobile modals: compact, never page-height.
       Body scrolls, header/footer stay visible.
       ----------------------------------------------------- */
    :is(
        .ap-modal-layer,.apt-modal-layer,.catalog-modal-layer,.company-modal-layer,
        .cr-modal-layer,.cs-modal-layer,.depot-modal-layer,.doc-modal-layer,
        .finance-modal-layer,.loan-modal-layer,.offer-modal-layer,.parking-modal-layer,
        .payment-modal-layer,.perm-modal-layer,.pl-apartment-modal-layer,
        .pl-client-modal-layer,.pl-project-modal-layer,.positions-modal-layer,
        .sp-modal-layer,.sv-modal-layer,.work-modal-layer,.wrx-modal-layer
    ){
        align-items:center!important;
        justify-content:center!important;
        padding:16px!important;
    }
    :is(
        .ap-modal,.apt-modal,.catalog-modal,.company-modal,.cr-modal,.cs-modal,
        .cs-standard-modal,.depot-modal,.doc-modal,.finance-modal,.loan-modal,
        .offer-modal,.parking-modal,.payment-modal,.perm-modal,.pl-apartment-modal,
        .pl-client-modal,.pl-project-modal,.positions-modal,.sp-modal,.sv-modal,
        .work-modal,.wrx-modal
    ){
        width:min(620px,calc(100vw - 32px))!important;
        max-width:calc(100vw - 32px)!important;
        height:auto!important;
        max-height:72dvh!important;
        overflow:hidden!important;
        display:flex!important;
        flex-direction:column!important;
        border-radius:15px!important;
    }
    :is(
        .ap-modal-body,.apt-modal-body,.catalog-modal-body,.company-modal-body,
        .cr-modal-body,.cs-modal-body,.depot-modal-body,.doc-modal-body,
        .finance-modal-body,.loan-modal-body,.offer-modal-body,.parking-modal-body,
        .payment-modal-body,.perm-modal-body,.pl-apartment-modal-body,
        .pl-client-modal-body,.pl-project-modal-body,.positions-modal-body,
        .sp-modal-body,.sv-modal-body,.work-modal-body,.wrx-modal-body
    ){
        flex:1 1 auto!important;
        min-height:0!important;
        max-height:none!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch!important;
    }
    .sv-modal-form,.cr-modal-form,.loan-modal-form{
        flex:1 1 auto!important;
        min-height:0!important;
        overflow:hidden!important;
    }

    /* Keep action buttons compact rather than stretching across the screen. */
    :is(.sv-btn,.cr-btn,.loan-btn,.tcs-appt-action,.company-btn,.apt-btn,.cs-btn,.sp-btn){
        max-width:100%!important;
    }
}

@media (max-width:430px){
    .cr-stats,.loan-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .loan-info-grid{grid-template-columns:1fr!important}
    .loan-info-item.full{grid-column:auto!important}
    .tcs-appt-modal,.tcs-appt-modal.small{max-height:66dvh!important}
}

/* =========================================================
   MOBILE UI CORRECTIONS — 2026-08-16-3
   Stronger device-tested overrides; no business logic changes.
   ========================================================= */
html.plenzy-show-splash,
html.plenzy-show-splash body{background:#FFFFFF!important}
html.plenzy-show-splash .plenzy-app-splash{
    display:flex!important;
    opacity:1!important;
    visibility:visible!important;
    background:#FFFFFF!important;
}

@media(max-width:860px){
    /* Only the NAVBAR icon is enlarged. Sidebar stays at the normal app size. */
    .topbar{min-height:58px!important}
    .topbar-left{flex:0 0 58px!important;width:58px!important;min-width:58px!important}
    .mobile-top-logo{width:56px!important;height:56px!important;min-width:56px!important;overflow:visible!important;border-radius:0!important}
    .mobile-top-logo img{width:56px!important;height:56px!important;max-width:56px!important;max-height:56px!important;object-fit:contain!important}
    .sidebar-header .brand-logo{width:112px!important;max-width:112px!important;max-height:38px!important}

    /* Guarantee actual swipe areas instead of relying on the tab row itself. */
    .sv-tabs-scroll,.pr-subtabs-scroll{
        width:100%!important;max-width:100%!important;min-width:0!important;
        overflow-x:auto!important;overflow-y:hidden!important;
        -webkit-overflow-scrolling:touch!important;touch-action:pan-x!important;
        overscroll-behavior-x:contain!important;scrollbar-width:none!important;
    }
    .sv-tabs-scroll::-webkit-scrollbar,.pr-subtabs-scroll::-webkit-scrollbar{display:none!important}
    .sv-tabs-scroll>.sv-tabs,.pr-subtabs-scroll>.pr-subtabs{
        display:inline-flex!important;width:max-content!important;min-width:max-content!important;max-width:none!important;
        flex-wrap:nowrap!important;overflow:visible!important;
    }
    .sv-tabs-scroll .sv-tab{min-width:138px!important;flex:0 0 auto!important;white-space:nowrap!important}
    .pr-subtabs-scroll .pr-subtabs button{min-width:126px!important;flex:0 0 auto!important;white-space:nowrap!important}

    /* Compact action buttons — they no longer stretch to screen width. */
    .tcs-appt-header-actions,.company-actions,.doc-actions,.sv-head-actions,.sv-section-actions,
    .loan-head-actions,.cr-header,.apt-header-actions,.cs-header-actions,.sp-header-actions{
        flex-wrap:wrap!important;
        gap:7px!important;
    }
    .tcs-appt-header-actions .tcs-appt-action,
    .company-actions .company-btn,
    .doc-actions .doc-btn,
    .sv-head-actions .sv-btn,
    .sv-section-actions .sv-btn,
    .loan-head-actions .loan-btn,
    .cr-header>.cr-btn,
    .apt-header-actions .apt-btn,
    .cs-header-actions .cs-btn,
    .sp-header-actions .sp-btn{
        width:auto!important;
        min-width:0!important;
        flex:0 0 auto!important;
        max-width:100%!important;
        padding-left:11px!important;
        padding-right:11px!important;
        white-space:nowrap!important;
    }

    /* Credits: the page fits the viewport; only wide data tables side-scroll. */
    .cr-page,.loan-page{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
    .cr-table-wrap,.loan-table-wrap{
        display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
        overflow-x:scroll!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;
        touch-action:pan-x!important;overscroll-behavior-x:contain!important;
    }
    .cr-table{width:980px!important;min-width:980px!important;max-width:none!important}
    .loan-table{width:1040px!important;min-width:1040px!important;max-width:none!important}

    /* Appointment modal is intentionally smaller; its body carries the scroll. */
    .tcs-appt-modal,.tcs-appt-modal.small{max-height:64dvh!important}

    /* All other major modals are compact too. */
    :is(.ap-modal,.apt-modal,.catalog-modal,.company-modal,.cr-modal,.cs-modal,.cs-standard-modal,
        .depot-modal,.doc-modal,.finance-modal,.loan-modal,.offer-modal,.parking-modal,.payment-modal,
        .perm-modal,.pl-apartment-modal,.pl-client-modal,.pl-project-modal,.positions-modal,.sp-modal,
        .sv-modal,.work-modal,.wrx-modal){max-height:70dvh!important}
}
@media(max-width:430px){.tcs-appt-modal,.tcs-appt-modal.small{max-height:62dvh!important}}

@media(max-width:860px){
    /* Fallback for page-specific modal names not covered above. The modal shell is
       compact; content scrolls inside instead of consuming nearly the whole screen. */
    [class*="-modal-layer"] > [class*="-modal"],
    [class*="-modal-layer"] > form,
    [class*="ModalLayer"] > [class*="modal"],
    [class*="ModalLayer"] > form{
        max-height:70dvh!important;
    }
    [class*="-modal"] [class*="-modal-body"],
    [class*="-modal"] [class*="modal-body"]{
        min-height:0!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch!important;
    }
}

@media(max-width:860px){
    .tcs-appt-header-actions,.company-actions,.doc-actions,.sv-head-actions,.sv-section-actions,
    .loan-head-actions,.apt-header-actions,.cs-header-actions,.sp-header-actions{
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        width:100%!important;
    }
}

@media(max-width:860px){
    /* Header action groups that page CSS previously stretched to 100%. */
    .sp-header>div:last-child,.apt-actions,.company-actions,.tcs-appt-header-actions{
        display:flex!important;
        flex-wrap:wrap!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:7px!important;
        width:100%!important;
        grid-template-columns:none!important;
    }
    .sp-header .sp-btn,.apt-actions .apt-btn,.company-actions .company-btn,.tcs-appt-header-actions .tcs-appt-action{
        width:auto!important;
        min-width:0!important;
        max-width:100%!important;
        flex:0 0 auto!important;
        padding-left:11px!important;
        padding-right:11px!important;
    }
    .sp-table-wrap,.sv-simple-scroll,.sv-table-wrap,.sv-pay-table-wrap{
        overflow-x:auto!important;
        -webkit-overflow-scrolling:touch!important;
        touch-action:pan-x!important;
        overscroll-behavior-x:contain!important;
    }
}

/* =========================================================
   FINAL MOBILE CORRECTIONS — 2026-08-16-4
   Focus: PDF back/share, supplier/contractor lists, worker
   statuses, filters and navbar logo. No business logic.
   ========================================================= */

/* ---------- Explicit page filter buttons ---------- */
.sp-filter-toggle,
.ktr-filter-toggle {
    display: none !important;
}

.ktr-list-filter-area {
    min-width: 0 !important;
}

.ktr-list-filters {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

.sp-scroll-hint,
.ktr-scroll-hint {
    display: none !important;
}

@media (max-width: 860px) {
    /* Navbar icon: bigger than the original, but fully inside the 58px bar. */
    .topbar-left {
        display: flex !important;
        flex: 0 0 50px !important;
        width: 50px !important;
        min-width: 50px !important;
        height: 58px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    .mobile-top-logo {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        padding: 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        border-radius: 0 !important;
    }

    .mobile-top-logo img {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
        clip-path: none !important;
    }

    /* ---------------- Supplier LIST ---------------- */
    .sp-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .sp-header {
        padding: 15px !important;
        gap: 12px !important;
    }

    .sp-header-actions,
    .sp-header > div:last-child {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        flex-wrap: wrap !important;
    }

    .sp-header-actions .sp-btn,
    .sp-header > div:last-child .sp-btn,
    .sp-toolbar .sp-btn {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        padding-left: 11px !important;
        padding-right: 11px !important;
        white-space: nowrap !important;
    }

    .sp-filter-toggle {
        width: 100% !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        border: 1px solid #DDE5F0 !important;
        border-radius: 11px !important;
        background: #FFFFFF !important;
        color: #17355E !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        font-size: 12px !important;
        font-weight: 750 !important;
        cursor: pointer !important;
    }

    .sp-filter-toggle svg {
        width: 17px !important;
        height: 17px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.9 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        flex: 0 0 auto !important;
    }

    .sp-filter-toggle .sp-filter-chevron {
        margin-left: auto !important;
        transition: transform .18s ease !important;
    }

    .sp-filter-toggle.open .sp-filter-chevron {
        transform: rotate(180deg) !important;
    }

    .sp-filter-panel {
        display: none !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        padding: 12px !important;
        gap: 10px !important;
    }

    .sp-filter-panel.open {
        display: grid !important;
    }

    .sp-list-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .sp-scroll-hint,
    .ktr-scroll-hint {
        min-height: 34px !important;
        padding: 8px 12px 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        color: #7A879B !important;
        font-size: 10.5px !important;
        font-weight: 650 !important;
    }

    .sp-table-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        touch-action: auto !important;
        border-radius: 0 0 14px 14px !important;
        scrollbar-width: thin !important;
    }

    .sp-table-wrap::-webkit-scrollbar {
        height: 5px !important;
    }

    .sp-table-wrap::-webkit-scrollbar-thumb {
        background: #C8D2E1 !important;
        border-radius: 999px !important;
    }

    .sp-table {
        width: 1160px !important;
        min-width: 1160px !important;
        max-width: none !important;
    }

    /* Supplier detail tabs: guaranteed one-row swipe. */
    .sv-tabs-scroll {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        touch-action: auto !important;
        scrollbar-width: none !important;
    }

    .sv-tabs-scroll::-webkit-scrollbar { display: none !important; }

    .sv-tabs-scroll > .sv-tabs {
        display: flex !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        gap: 6px !important;
    }

    .sv-tabs-scroll .sv-tab {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 148px !important;
        white-space: nowrap !important;
    }

    /* ---------------- Contractor LIST ---------------- */
    .ktr-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        gap: 12px !important;
    }

    .ktr-header {
        min-height: 0 !important;
        padding: 15px !important;
        gap: 12px !important;
    }

    .ktr-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 7px !important;
    }

    .ktr-actions .ktr-btn,
    .ktr-header .ktr-btn,
    .ktr-list-filters .ktr-btn,
    .ktr-calendar-toolbar .ktr-btn {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        padding-left: 11px !important;
        padding-right: 11px !important;
        white-space: nowrap !important;
    }

    .ktr-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 7px !important;
        gap: 6px !important;
    }

    .ktr-tab {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 8px !important;
        font-size: 11.5px !important;
    }

    .ktr-list-head {
        padding: 14px 14px 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .ktr-list-filter-area {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ktr-filter-toggle {
        width: 100% !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        border: 1px solid #DDE5F0 !important;
        border-radius: 11px !important;
        background: #FFFFFF !important;
        color: #17355E !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        font-size: 12px !important;
        font-weight: 750 !important;
        cursor: pointer !important;
    }

    .ktr-filter-toggle i:last-child {
        margin-left: auto !important;
        font-size: 18px !important;
        transition: transform .18s ease !important;
    }

    .ktr-filter-toggle.open i:last-child {
        transform: rotate(180deg) !important;
    }

    .ktr-list-filters {
        display: none !important;
        width: 100% !important;
        margin-top: 8px !important;
        padding: 11px !important;
        border: 1px solid #E1E8F2 !important;
        border-radius: 12px !important;
        background: #FAFCFF !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .ktr-list-filters.open {
        display: grid !important;
    }

    .ktr-list-filters .ktr-control,
    .ktr-list-filters input,
    .ktr-list-filters select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .ktr-table-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 10px 0 12px 12px !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        touch-action: auto !important;
        scrollbar-width: thin !important;
    }

    .ktr-table-wrap::-webkit-scrollbar { height: 5px !important; }
    .ktr-table-wrap::-webkit-scrollbar-thumb { background:#C8D2E1 !important; border-radius:999px !important; }

    .ktr-table {
        width: 1240px !important;
        min-width: 1240px !important;
        max-width: none !important;
    }

    /* ---------------- Workers: all status helpers stay visible ---------------- */
    .wrx-status-strip {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 10px 12px 5px !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        touch-action: auto !important;
        scrollbar-width: none !important;
    }

    .wrx-status-strip::-webkit-scrollbar { display: none !important; }

    .wrx-status-strip .wrx-legend {
        display: inline-flex !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .wrx-status-strip .wrx-legend-item {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        white-space: nowrap !important;
    }

    .wrx-hours-scroll {
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: auto !important;
        overscroll-behavior-x: contain !important;
    }
}

@media (max-width: 430px) {
    .sp-stats,
    .ktr-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ktr-stat {
        min-height: 112px !important;
        padding: 13px !important;
    }
}

@media (max-width: 860px) {
    /* Worker header actions stay compact like the rest of the app. */
    .wrx-actions {
        display: flex !important;
        grid-template-columns: none !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
    }

    .wrx-actions .wrx-btn,
    .wrx-actions form,
    .wrx-actions form .wrx-btn {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}