/* public/assets/css/s29-standard-ui.css
 * KHMER HRMS S29 — final shared table/action responsive standard.
 * UI-only: no routes, form names, data attributes, JS hooks, or business logic.
 */

/* ── One action language across every requested list ─────────────── */
.data-table td.actions,
.data-table th:last-child {
    white-space: nowrap;
}

.data-table td.actions {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.data-table td.actions > form,
.data-table td.actions > a,
.data-table td.actions > .actions,
.data-table td.actions > div {
    box-sizing: border-box;
}

.data-table td.actions .actions,
.data-table td.actions:not(:has(.actions)) {
    /* Keep the controls visually close; the cell may remain wide without
       creating artificial gaps between individual buttons. */
}

.actions {
    gap: 4px !important;
}

.actions > form,
.actions > a,
.actions > button {
    flex: 0 0 auto;
}

.actions .btn.btn-icon-only,
.actions .action-icon-btn {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
    border-radius: 9px !important;
    line-height: 1 !important;
}

.actions .btn.btn-icon-only svg,
.actions .action-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    flex: 0 0 18px !important;
}

/* Forms inside action cells must not introduce their own spacing. */
.data-table td.actions > form {
    display: inline-flex !important;
    margin: 0 !important;
}

/* ── Requested pages: compact action lane ────────────────────────── */
.users-table td.actions,
.recycle-bin-table td.actions,
.leave-balances-table td.actions,
.shift-assignments-table td.actions,
.employees-table td.actions,
.locations-table-wrap .data-table td.actions {
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
    text-align: left !important;
}

.users-table td.actions,
.recycle-bin-table td.actions,
.leave-balances-table td.actions,
.shift-assignments-table td.actions,
.employees-table td.actions {
    overflow: visible !important;
}

/* Two/three action buttons should read as one compact control group. */
.users-table td.actions .actions,
.recycle-bin-table td.actions .actions,
.leave-balances-table td.actions .actions,
.shift-assignments-table td.actions .actions,
.employees-table td.actions .actions,
.locations-table-wrap .data-table td.actions .actions {
    justify-content: flex-start !important;
    gap: 4px !important;
}

/* ── Delivery Log ────────────────────────────────────────────────── */
.notification-delivery-table td:nth-child(2) {
    white-space: nowrap;
}

.delivery-channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 8px;
    background: var(--surface-alt);
    color: var(--primary);
}

.delivery-channel-icon svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
}

/* Delivery filter action icons use the same 36px / 18px standard. */
.notification-delivery-table + .table-footer,
.notification-delivery-table ~ .table-footer {
    min-width: 0;
}

/* ── Audit Log: clean mobile card ────────────────────────────────── */
@media (max-width: 767.98px) {
    .audit-log-table tbody tr {
        display: block !important;
        margin: 0 0 12px !important;
        padding: 12px 14px !important;
        border: 1px solid var(--border) !important;
        border-radius: 14px !important;
        background: var(--surface) !important;
        box-shadow: 0 4px 14px color-mix(in srgb, var(--text) 7%, transparent) !important;
    }

    .audit-log-table tbody td {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .audit-log-table tbody td:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .audit-log-table tbody td::before {
        flex: 0 0 34% !important;
        margin: 0 !important;
        color: var(--text-muted) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: none !important;
    }

    .audit-log-table tbody td:not(.actions) {
        text-align: right !important;
    }

    .audit-log-table tbody td.actions {
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 4px !important;
        min-height: 52px !important;
        padding-top: 10px !important;
    }

    .audit-log-table tbody td.actions::before {
        margin-right: auto !important;
    }

    .audit-log-table tbody td.actions .btn-icon-only,
    .audit-log-table tbody td.actions .action-icon-btn {
        flex: 0 0 36px !important;
    }
}

/* ── Mobile/QR Check-In: same icon size on desktop and phone ────── */
.mobile-checkins-table .mobile-checkin-actions-cell {
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
}

.mobile-checkins-table .mobile-checkin-actions {
    gap: 4px !important;
}

.mobile-checkins-table .mobile-checkin-actions > form,
.mobile-checkins-table .mobile-checkin-actions > a,
.mobile-checkins-table .mobile-checkin-actions > button,
.mobile-checkins-table .mobile-checkin-actions > form > button {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mobile-checkins-table .mobile-checkin-actions svg {
    width: 18px !important;
    height: 18px !important;
}

/* ── Location tables: action icons sit together, not at opposite ends ─ */
.locations-table-wrap .data-table td.actions {
    white-space: nowrap !important;
}

.locations-table-wrap .data-table td.actions > a,
.locations-table-wrap .data-table td.actions > form,
.locations-table-wrap .data-table td.actions > form > button {
    margin: 0 !important;
}

/* ── Small screens: never squeeze or wrap an action group ────────── */
@media (max-width: 767.98px) {
    .users-table td.actions,
    .recycle-bin-table td.actions,
    .leave-balances-table td.actions,
    .shift-assignments-table td.actions,
    .employees-table td.actions,
    .locations-table-wrap .data-table td.actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
    }

    .users-table td.actions .actions,
    .recycle-bin-table td.actions .actions,
    .leave-balances-table td.actions .actions,
    .shift-assignments-table td.actions .actions,
    .employees-table td.actions .actions,
    .locations-table-wrap .data-table td.actions .actions {
        width: auto !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }

    .users-table td.actions .actions::-webkit-scrollbar,
    .recycle-bin-table td.actions .actions::-webkit-scrollbar,
    .leave-balances-table td.actions .actions::-webkit-scrollbar,
    .shift-assignments-table td.actions .actions::-webkit-scrollbar,
    .employees-table td.actions .actions::-webkit-scrollbar,
    .locations-table-wrap .data-table td.actions .actions::-webkit-scrollbar {
        display: none;
    }

    .mobile-checkins-table .mobile-checkin-actions-cell {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .notification-delivery-table td:nth-child(2) {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
    }
}

/* ── 375px safety ───────────────────────────────────────────────── */
@media (max-width: 390px) {
    .actions .btn.btn-icon-only,
    .actions .action-icon-btn {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex-basis: 34px !important;
    }

    .actions .btn.btn-icon-only svg,
    .actions .action-icon-btn svg {
        width: 17px !important;
        height: 17px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   S29.1 — Unified Filter Action + Search Geometry
   Reference: Locations / Mobile-QR / Delivery Log.
   Filter and Reset are intentionally icon-only, same 36px target,
   same radius, same SVG size, and same alignment everywhere.
   ═══════════════════════════════════════════════════════════════ */
.filter-panel .filter-form .filter-action-icon {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex: 0 0 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
}
.filter-panel .filter-form .filter-action-icon svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    margin: 0 !important;
}

/* A plain search field should use the available horizontal space instead
   of stopping at the old 320px cap. This is especially important on the
   Locations Provinces tab, where the reference layout has a long search
   lane followed by the two 36px action controls. */
.filter-panel .filter-search-field {
    flex: 1 1 320px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 180px !important;
}
.filter-panel .filter-search-field input[type="text"] {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Keep compact Delivery Log fields and action icons vertically centered. */
.filter-form-compact.filter-form > .filter-action-icon {
    align-self: flex-end !important;
}

/* ═══════════════════════════════════════════════════════════════
   S29.1 — Data Reset Preview
   The preview is a full-width information panel, using the same visual
   language as the Configure card above instead of looking like an
   arbitrary nested outline.
   ═══════════════════════════════════════════════════════════════ */
.data-reset-preview-box {
    width: 100%;
    margin-top: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 2px 10px rgba(15,23,42,.035);
    box-sizing: border-box;
}
.data-reset-preview-box h3 {
    display: flex;
    align-items: center;
    min-height: 36px;
    margin: 0 0 var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
}
@media (max-width: 767.98px) {
    .filter-bar:not(.filter-form-compact) > .filter-form > .filter-action-icon {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 36px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .data-reset-preview-box {
        padding: 10px;
        border-radius: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   S29.1 — Navigation click stability
   Prevent accidental double activation while a normal server-rendered
   navigation is already leaving the current page. The browser still
   performs the native link navigation; this only suppresses a second
   rapid activation from mouse/touch.
   ═══════════════════════════════════════════════════════════════ */
.sidebar-link.hrms-nav-pending {
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════
   S29.2 — Filter geometry refinement
   Mobile/QR: compact search lane, wider date controls, true Filter icon.
   Locations: short search lane with actions directly beside it.
   All filter/reset targets share the exact field height.
   ═══════════════════════════════════════════════════════════════════ */
.filter-panel .filter-action-icon,
.filter-panel .filter-action-icon.btn,
.filter-panel .filter-form .filter-action-icon,
.filter-panel .filter-form .filter-action-icon.btn {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: flex-end !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
}
.filter-panel .filter-action-icon svg,
.filter-panel .filter-form .filter-action-icon svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    margin: 0 !important;
}

/* Locations — Provinces/search-only tab: approximately 30% of the
   available filter lane, with Filter + Reset immediately beside it. */
.locations-filter-panel .filter-form {
    justify-content: flex-start !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
}
.locations-filter-panel .filter-search-field {
    flex: 0 1 30% !important;
    width: 30% !important;
    max-width: 30% !important;
    min-width: 240px !important;
}
.locations-filter-panel .filter-form .filter-action-icon {
    flex: 0 0 38px !important;
}

/* Mobile / QR Check-In — keep Search at roughly half of its former
   wide lane; move Date From/To left into a larger shared date group. */
.mobile-checkins-filter-panel .filter-form {
    align-items: flex-end !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
}
.mobile-checkins-filter-panel .filter-search-field {
    /* The previous S29-wide search was ~320px; keep roughly 50% of that
       original visual length instead of consuming half the whole row. */
    flex: 0 0 160px !important;
    width: 160px !important;
    max-width: 160px !important;
    min-width: 160px !important;
}
.mobile-checkins-filter-panel .filter-form > select[name="source"] {
    flex: 0 0 180px !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    height: 38px !important;
}
.mobile-checkins-filter-panel .date-range-inline {
    flex: 1 1 600px !important;
    width: 600px !important;
    min-width: 600px !important;
    max-width: none !important;
    align-items: flex-end !important;
    gap: 10px !important;
}
.mobile-checkins-filter-panel .date-range-field,
.mobile-checkins-filter-panel .date-range-field .s11-picker-field,
.mobile-checkins-filter-panel .date-range-field .hrms-date-input-wrap,
.mobile-checkins-filter-panel .date-range-field input.hrms-date-text {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    flex: 1 1 300px !important;
    box-sizing: border-box !important;
}
.mobile-checkins-filter-panel .date-range-field > span {
    min-height: 17px;
}
.mobile-checkins-filter-panel .date-range-separator {
    padding-bottom: 10px !important;
}

/* Delivery Log — same vertical geometry and correct funnel Filter icon. */
.filter-form-compact.filter-form > .filter-action-icon {
    align-self: flex-end !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
}

/* At tablet widths, allow the refined controls to wrap instead of
   squeezing/overflowing; keep every individual field height identical. */
@media (max-width: 1300px) and (min-width: 768px) {
    .mobile-checkins-filter-panel .filter-form,
    .locations-filter-panel .filter-form {
        flex-wrap: wrap !important;
    }
    .mobile-checkins-filter-panel .filter-search-field {
        width: 160px !important;
        max-width: 160px !important;
        min-width: 160px !important;
        flex-basis: 160px !important;
    }
    .mobile-checkins-filter-panel .date-range-inline {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 500px !important;
    }
    .mobile-checkins-filter-panel .date-range-field,
    .mobile-checkins-filter-panel .date-range-field .s11-picker-field,
    .mobile-checkins-filter-panel .date-range-field .hrms-date-input-wrap,
    .mobile-checkins-filter-panel .date-range-field input.hrms-date-text {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }
}

@media (max-width: 767.98px) {
    .locations-filter-panel .filter-form,
    .mobile-checkins-filter-panel .filter-form {
        flex-wrap: wrap !important;
    }
    .locations-filter-panel .filter-search-field,
    .mobile-checkins-filter-panel .filter-search-field {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    .mobile-checkins-filter-panel .filter-form > select[name="source"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 38px !important;
    }
    .mobile-checkins-filter-panel .date-range-inline {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .mobile-checkins-filter-panel .date-range-field,
    .mobile-checkins-filter-panel .date-range-field .s11-picker-field,
    .mobile-checkins-filter-panel .date-range-field .hrms-date-input-wrap,
    .mobile-checkins-filter-panel .date-range-field input.hrms-date-text {
        width: 145px !important;
        min-width: 145px !important;
        max-width: 145px !important;
        flex-basis: 145px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   S29.3 — Final filter geometry polish
   Mobile / QR Check-In: slightly longer Search, compact and equal
   Date From/To controls, and a true funnel Filter icon target.
   Locations: keep Filter + Reset anchored at the far end of the
   filter row instead of immediately beside Search.
   ═══════════════════════════════════════════════════════════════ */

/* Mobile / QR — desktop/tablet filter row */
.mobile-checkins-filter-panel .filter-search-field {
    flex: 0 0 205px !important;
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;
}
.mobile-checkins-filter-panel .filter-search-field input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.mobile-checkins-filter-panel .filter-form > select[name="source"] {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    box-sizing: border-box !important;
}
.mobile-checkins-filter-panel .date-range-inline {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    align-items: flex-end !important;
    gap: 8px !important;
}
.mobile-checkins-filter-panel .date-range-field {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    flex: 0 0 190px !important;
    gap: 4px !important;
}
.mobile-checkins-filter-panel .date-range-field .s11-picker-field,
.mobile-checkins-filter-panel .date-range-field .hrms-date-input-wrap,
.mobile-checkins-filter-panel .date-range-field input.hrms-date-text,
.mobile-checkins-filter-panel .date-range-field .s11-picker-display {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    box-sizing: border-box !important;
}
.mobile-checkins-filter-panel .date-range-field .s11-picker-display {
    padding: 8px 42px 8px 12px !important;
    line-height: 20px !important;
    border-radius: var(--radius-sm, 10px) !important;
}
.mobile-checkins-filter-panel .date-range-field .s11-picker-icon {
    width: 30px !important;
    height: 30px !important;
    right: 4px !important;
    border-radius: 8px !important;
}
.mobile-checkins-filter-panel .date-range-field .s11-picker-icon svg {
    width: 16px !important;
    height: 16px !important;
}
.mobile-checkins-filter-panel .date-range-field > span {
    min-height: 16px !important;
    line-height: 16px !important;
}
.mobile-checkins-filter-panel .date-range-separator {
    padding-bottom: 10px !important;
    line-height: 38px !important;
}

/* The Filter control is always the standard funnel icon; keep its
   compact target exactly level with the 38px form controls. */
.mobile-checkins-filter-panel .filter-action-icon,
.mobile-checkins-filter-panel .filter-action-icon.btn,
.mobile-checkins-filter-panel .filter-form .filter-action-icon,
.mobile-checkins-filter-panel .filter-form .filter-action-icon.btn {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    align-self: flex-end !important;
}
.mobile-checkins-filter-panel .filter-action-icon svg {
    width: 17px !important;
    height: 17px !important;
}

/* Locations — action pair stays at the far/right end of the filter
   box, with Search and any cascade fields left in their own lanes. */
.locations-filter-panel .filter-panel-actions {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    align-self: flex-end !important;
}
.locations-filter-panel .filter-panel-actions .filter-action-icon {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.locations-filter-panel .filter-panel-actions .filter-action-icon svg {
    width: 17px !important;
    height: 17px !important;
}

@media (max-width: 1300px) and (min-width: 768px) {
    .mobile-checkins-filter-panel .filter-search-field {
        width: 195px !important;
        min-width: 195px !important;
        max-width: 195px !important;
        flex-basis: 195px !important;
    }
    .mobile-checkins-filter-panel .date-range-field,
    .mobile-checkins-filter-panel .date-range-field .s11-picker-field,
    .mobile-checkins-filter-panel .date-range-field .hrms-date-input-wrap,
    .mobile-checkins-filter-panel .date-range-field input.hrms-date-text,
    .mobile-checkins-filter-panel .date-range-field .s11-picker-display {
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }
}

@media (max-width: 767.98px) {
    .mobile-checkins-filter-panel .filter-search-field {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    .mobile-checkins-filter-panel .date-range-field,
    .mobile-checkins-filter-panel .date-range-field .s11-picker-field,
    .mobile-checkins-filter-panel .date-range-field .hrms-date-input-wrap,
    .mobile-checkins-filter-panel .date-range-field input.hrms-date-text,
    .mobile-checkins-filter-panel .date-range-field .s11-picker-display {
        width: 145px !important;
        min-width: 145px !important;
        max-width: 145px !important;
    }
    .mobile-checkins-filter-panel .filter-action-icon,
    .mobile-checkins-filter-panel .filter-action-icon.btn,
    .locations-filter-panel .filter-panel-actions .filter-action-icon {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }
}

/* Positions — department-only filter. The search box was removed from the
   Positions UI; keep the department selector and Filter/Reset actions as a
   compact, consistent control group across desktop and mobile. */
.positions-filter-form {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
.positions-filter-form > select {
    width: 280px;
    min-width: 220px;
    max-width: 360px;
    flex: 0 1 280px;
}
.positions-filter-form > .filter-panel-actions-icons {
    margin-left: 0 !important;
    flex: 0 0 auto !important;
}
@media (max-width: 767.98px) {
    .positions-filter-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    .positions-filter-form > select {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
    }
    .positions-filter-form > .filter-panel-actions-icons {
        grid-column: 1 / -1 !important;
        justify-self: start !important;
        width: max-content !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}
@media (max-width: 359.98px) {
    .positions-filter-form > .filter-panel-actions-icons {
        gap: 6px !important;
    }
}