/* =========================================================
   Application UI — Table Actions Component
   Path: public/assets/app/components/table-actions/table-actions.css

   ظ‡ط°ط§ ط§ظ„ظ…ظ„ظپ:
   - ط·ط¨ظ‚ط© ط¹ط±ط¶ ظپظ‚ط·
   - ظٹط³طھظ‡ظ„ظƒ ظپظ‚ط· --m-table-actions-*
   - ظ„ط§ ظٹط­طھظˆظٹ theme logic
   - ظ„ط§ ظٹط­طھظˆظٹ selector identity logic
   - ظ„ط§ ظٹط­طھظˆظٹ registry logic
   - ظ„ط§ ظٹط­طھظˆظٹ overflow decision logic
   - ظ„ط§ ظٹط­طھظˆظٹ business logic
========================================================= */


/* =========================================================
   1) ROOT
========================================================= */

.m-table-actions {
    --table-actions-width: var(--m-table-actions-width);
    --table-actions-min-width: var(--m-table-actions-min-width);
    --table-actions-max-width: var(--m-table-actions-max-width);
    --table-actions-gap: var(--m-table-actions-gap);
    --table-actions-padding-y: var(--m-table-actions-padding-y);
    --table-actions-padding-x: var(--m-table-actions-padding-x);
    --table-actions-radius: var(--m-table-actions-radius);
    --table-actions-bg: var(--m-table-actions-bg);
    --table-actions-border: var(--m-table-actions-border);
    --table-actions-shadow: var(--m-table-actions-shadow);
    --table-actions-panel-bg: var(--m-table-actions-panel-bg);
    --table-actions-panel-border: var(--m-table-actions-panel-border);
    --table-actions-panel-shadow: var(--m-table-actions-panel-shadow);
    --table-actions-panel-radius: var(--m-table-actions-panel-radius);
    --table-actions-panel-padding: var(--m-table-actions-panel-padding);
    --table-actions-z-index: var(--m-table-actions-z-index);
    --table-actions-menu-min-width: var(--m-table-actions-menu-min-width);
    --table-actions-item-gap: var(--m-table-actions-item-gap);
    --table-actions-transition: var(--m-table-actions-transition);
    --table-actions-opacity-disabled: var(--m-table-actions-opacity-disabled);

    position: relative;
    z-index: 0;

    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--table-actions-gap);

    width: var(--table-actions-width);
    min-width: var(--table-actions-min-width);
    max-width: var(--table-actions-max-width);
    padding: 0;

    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--table-actions-radius);
    box-shadow: none;

    min-height: 0;
    isolation: isolate;

    transition:
        opacity var(--table-actions-transition),
        box-shadow var(--table-actions-transition),
        border-color var(--table-actions-transition),
        background-color var(--table-actions-transition);
}

.m-table-actions,
.m-table-actions__visible,
.m-table-actions__overflow,
.m-table-actions__menu,
.m-table-actions__menu-panel {
    min-width: 0;
}

.m-table__cell--actions > .m-table-actions {
    inline-size: 100%;
    min-inline-size: 0;
    margin-inline-start: 0;
}

.m-table-actions .m-button,
.m-table-actions button,
.m-table-actions a {
    white-space: nowrap;
}

.m-table-actions__item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
}

.m-table-actions__label {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   2) ALIGNMENT
========================================================= */

.m-table-actions-align-start {
    align-items: flex-start;
}

.m-table-actions-align-center {
    align-items: center;
}

.m-table-actions-align-end {
    align-items: flex-end;
}

.m-table-actions-align-stretch {
    align-items: stretch;
}

.m-table-actions-justify-start {
    justify-content: flex-start;
}

.m-table-actions-justify-center {
    justify-content: center;
}

.m-table-actions-justify-end {
    justify-content: flex-end;
}

.m-table-actions-justify-between {
    justify-content: space-between;
}


/* =========================================================
   3) GAP MODIFIERS
========================================================= */

.m-table-actions-gap-compact {
    --table-actions-gap: var(--m-table-actions-gap-compact);
}

.m-table-actions-gap-sm {
    --table-actions-gap: var(--m-table-actions-gap-sm);
}

.m-table-actions-gap-md {
    --table-actions-gap: var(--m-table-actions-gap-md);
}

.m-table-actions-gap-lg {
    --table-actions-gap: var(--m-table-actions-gap-lg);
}


/* =========================================================
   4) MODES
========================================================= */

.m-table-actions-full-height {
    height: 100%;
}

.m-table-actions-nowrap {
    overflow: hidden;
}

.m-table-actions-strict {
    overflow: hidden;
}

.m-table-actions-mode-menu,
.m-table-actions.is-open {
    overflow: visible;
    z-index: var(--table-actions-z-index);
}


/* =========================================================
   5) VISIBLE ACTION STACK
========================================================= */

.m-table-actions__visible {
    display: inline-flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: inherit;
    justify-content: flex-end;
    gap: var(--table-actions-item-gap);

    width: auto;
    min-height: 0;
    min-width: 0;
    max-height: 100%;
    max-width: 100%;
    overflow: visible;
    flex-wrap: nowrap;
}

.m-table-actions-mode-menu .m-table-actions__visible {
    display: none;
}

.m-table-actions.is-menu-only .m-table-actions__visible,
.m-table-actions__visible[hidden] {
    display: none !important;
}

.m-table-actions__visible > * {
    flex: 0 0 auto;
    max-width: 100%;
}

.m-table-actions__visible .m-btn-table-action {
    inline-size: var(--m-table-actions-visible-button-size);
    min-inline-size: var(--m-table-actions-visible-button-size);
    block-size: var(--m-table-actions-visible-button-size);
    min-block-size: var(--m-table-actions-visible-button-size);
    padding-inline: 0;
    border-radius: 999px;
    color: var(--m-btn-accent-color);
    background: var(--m-btn-accent-soft);
    border-color: transparent;
    box-shadow:
        0 0 0 1px var(--m-table-actions-border-color-subtle),
        0 10px 20px -18px var(--m-table-actions-shadow-color);
}

.m-table-actions__visible .m-btn-table-action:hover,
.m-table-actions__visible .m-btn-table-action:focus-visible {
    color: var(--m-btn-accent-text-inverse);
    background: var(--m-btn-accent-color);
    border-color: var(--m-btn-accent-color);
    box-shadow:
        0 0 0 1px var(--m-btn-accent-color),
        0 12px 24px -18px var(--m-btn-accent-color);
}

.m-table-actions__visible .m-btn-table-action:disabled,
.m-table-actions__visible .m-btn-table-action.is-disabled,
.m-table-actions__visible .m-btn-table-action[aria-disabled="true"] {
    opacity: var(--table-actions-opacity-disabled);
    cursor: not-allowed;
    filter: grayscale(0.22);
}

.m-table-actions__visible a.m-btn-table-action[aria-disabled="true"] {
    pointer-events: none;
}

.m-table-actions__visible .m-btn-table-action .m-btn__text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.m-table-actions__visible .m-btn-table-action i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: currentColor;
}

.m-table-actions__visible .m-table-actions__label {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.m-table-actions-align-stretch .m-table-actions__visible > * {
    width: 100%;
}

.m-table-actions > .m-btn-group,
.m-table-actions > .m-btn-table-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--table-actions-item-gap);
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
}

.m-table-actions > .m-btn-group > *,
.m-table-actions > .m-btn-table-action-group > * {
    flex: 0 0 auto;
    min-width: 0;
}


/* =========================================================
   6) OVERFLOW STORAGE
========================================================= */

.m-table-actions__overflow[hidden] {
    display: none !important;
}


/* =========================================================
   7) MENU WRAPPER
========================================================= */

.m-table-actions__menu {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: inherit;
    justify-content: center;
    width: auto;
    min-width: 0;
}

.m-table-actions.is-open .m-table-actions__menu {
    z-index: var(--table-actions-z-index);
}

.m-table-actions__menu[hidden] {
    display: none !important;
}

.m-table-actions__menu-trigger {
    align-self: inherit;
}

.m-table-actions__menu-trigger.m-btn {
    inline-size: var(--m-table-actions-visible-button-size);
    min-inline-size: var(--m-table-actions-visible-button-size);
    block-size: var(--m-table-actions-visible-button-size);
    min-block-size: var(--m-table-actions-visible-button-size);
    padding-inline: 0;
    border-radius: 999px;
    color: var(--m-btn-accent-color);
    background: var(--m-btn-accent-soft);
    border-color: transparent;
    box-shadow:
        0 0 0 1px var(--m-table-actions-border-color-subtle),
        0 10px 20px -18px var(--m-table-actions-shadow-color);
}

.m-table-actions__menu-trigger.m-btn i {
    font-size: 16px;
}

.m-table-actions[data-table-actions-display-mode="menu"] .m-table-actions__menu-trigger.m-btn {
    inline-size: auto;
    min-inline-size: 108px;
    padding-inline: 12px;
    border-radius: 10px;
}

.m-table-actions[data-table-actions-display-mode="menu"] .m-table-actions__menu-trigger-glyph {
    display: none;
}

.m-table-actions[data-table-actions-display-mode="menu"] .m-table-actions__menu-trigger .m-btn__sr-only {
    position: static !important;
    inline-size: auto !important;
    block-size: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: nowrap !important;
}

.m-table-actions__menu-trigger--compound.m-btn-icon {
    inline-size: calc(var(--m-btn-table-action-height) + 14px);
    min-inline-size: calc(var(--m-btn-table-action-height) + 14px);
    padding-inline: 7px;
}

.m-table-actions__menu-trigger-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1;
}

.m-table-actions__menu-trigger-action-icon {
    font-size: 14px !important;
    opacity: 0.92;
}

.m-table-actions__menu-trigger-more-icon {
    font-size: 16px !important;
}

.m-table-actions.is-open .m-table-actions__menu-trigger.m-btn {
    color: var(--m-btn-accent-text-inverse);
    background: var(--m-btn-accent-color);
    border-color: var(--m-btn-accent-color);
    box-shadow:
        0 0 0 1px var(--m-btn-accent-color),
        0 12px 24px -18px var(--m-btn-accent-color);
}

.m-table-actions__menu-trigger.m-btn:hover,
.m-table-actions__menu-trigger.m-btn:focus-visible {
    color: var(--m-btn-accent-text-inverse);
    background: var(--m-btn-accent-color);
    border-color: var(--m-btn-accent-color);
    box-shadow:
        0 0 0 1px var(--m-btn-accent-color),
        0 12px 24px -18px var(--m-btn-accent-color);
}

.m-table-actions-align-stretch .m-table-actions__menu-trigger {
    width: 100%;
}


/* =========================================================
   8) MENU PANEL
========================================================= */

.m-table-actions__menu-panel {
    position: absolute;
    z-index: var(--table-actions-z-index, var(--m-table-actions-z-index));

    min-width: var(--table-actions-menu-min-width, var(--m-table-actions-menu-min-width));
    max-width: min(280px, 90vw);
    width: max-content;

    padding: var(--table-actions-panel-padding, var(--m-table-actions-panel-padding));
    background: var(--table-actions-panel-bg, var(--m-table-actions-panel-bg));
    border: 1px solid var(--table-actions-panel-border, var(--m-table-actions-panel-border));
    border-radius: var(--table-actions-panel-radius, var(--m-table-actions-panel-radius));
    box-shadow: var(--table-actions-panel-shadow, var(--m-table-actions-panel-shadow));

    overflow: auto;
    max-height: min(360px, calc(100vh - 96px));
    overscroll-behavior: contain;
    backdrop-filter: blur(10px);
}

.m-table-actions__menu-panel[hidden] {
    display: none !important;
}


/* =========================================================
   9) MENU PANEL PLACEMENTS
========================================================= */

.m-table-actions[data-table-actions-placement="bottom-start"] .m-table-actions__menu-panel {
    top: calc(100% + var(--m-table-actions-panel-offset));
    left: 0;
}

.m-table-actions[data-table-actions-placement="bottom-end"] .m-table-actions__menu-panel {
    top: calc(100% + var(--m-table-actions-panel-offset));
    right: 0;
}

.m-table-actions[data-table-actions-placement="top-start"] .m-table-actions__menu-panel {
    bottom: calc(100% + var(--m-table-actions-panel-offset));
    left: 0;
}

.m-table-actions[data-table-actions-placement="top-end"] .m-table-actions__menu-panel {
    bottom: calc(100% + var(--m-table-actions-panel-offset));
    right: 0;
}

.m-table-actions[data-table-actions-placement="right-start"] .m-table-actions__menu-panel {
    top: 0;
    left: calc(100% + var(--m-table-actions-panel-offset));
}

.m-table-actions[data-table-actions-placement="right-end"] .m-table-actions__menu-panel {
    bottom: 0;
    left: calc(100% + var(--m-table-actions-panel-offset));
}

.m-table-actions[data-table-actions-placement="left-start"] .m-table-actions__menu-panel {
    top: 0;
    right: calc(100% + var(--m-table-actions-panel-offset));
}

.m-table-actions[data-table-actions-placement="left-end"] .m-table-actions__menu-panel {
    bottom: 0;
    right: calc(100% + var(--m-table-actions-panel-offset));
}

.m-table-actions.is-flipped-block .m-table-actions__menu-panel {
    top: auto;
    bottom: calc(100% + var(--m-table-actions-panel-offset));
}

.m-table-actions.is-align-left .m-table-actions__menu-panel {
    left: 0 !important;
    right: auto !important;
    inset-inline-start: auto;
    inset-inline-end: auto;
}

.m-table-actions.is-align-right .m-table-actions__menu-panel {
    right: 0 !important;
    left: auto !important;
    inset-inline-start: auto;
    inset-inline-end: auto;
}

.m-table-actions.is-open .m-table-actions__menu-panel {
    position: fixed;
    top: var(--table-actions-menu-top, 0) !important;
    left: var(--table-actions-menu-left, 0) !important;
    right: auto !important;
    bottom: auto !important;
}

.m-table-actions__menu-panel.is-open {
    position: fixed;
    z-index: var(--table-actions-z-index, var(--m-table-actions-z-index));
    top: var(--table-actions-menu-top, 0) !important;
    left: var(--table-actions-menu-left, 0) !important;
    right: auto !important;
    bottom: auto !important;
}


/* =========================================================
   10) MENU CONTENT STACK
========================================================= */

.m-table-actions__menu-panel > * {
    display: block;
    width: 100%;
    max-width: 100%;
}

.m-table-actions__menu-panel .m-btn,
.m-table-actions__menu-panel button,
.m-table-actions__menu-panel a {
    display: inline-flex;
    width: 100%;
    inline-size: 100%;
    min-inline-size: 100%;
    justify-content: flex-start;
    min-height: 36px;
    border-radius: 10px;
    gap: 10px;
    text-align: start;
    padding-inline: 12px;
}

.m-table-actions__menu-panel .m-table-actions__label {
    position: static !important;
    inline-size: auto !important;
    block-size: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: auto !important;
    white-space: nowrap !important;
}

.m-table-actions__menu-panel .m-btn-icon,
.m-table-actions__menu-panel .m-btn-table-action {
    inline-size: 100%;
    min-inline-size: 100%;
    block-size: auto;
    min-block-size: 36px;
}

.m-table-actions__menu-panel .m-btn__text {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    inline-size: 100%;
}

.m-table-actions__menu-panel .m-btn__sr-only {
    position: static !important;
    inline-size: auto !important;
    block-size: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: nowrap !important;
}

.m-table-actions__menu-panel .m-btn i,
.m-table-actions__menu-panel button i,
.m-table-actions__menu-panel a i {
    width: 18px;
    text-align: center;
}

.m-table-actions__menu-panel .m-btn:disabled,
.m-table-actions__menu-panel .m-btn.is-disabled,
.m-table-actions__menu-panel .m-btn[aria-disabled="true"],
.m-table-actions__menu-panel button:disabled,
.m-table-actions__menu-panel button.is-disabled,
.m-table-actions__menu-panel a[aria-disabled="true"] {
    opacity: var(--table-actions-opacity-disabled);
    cursor: not-allowed;
    filter: grayscale(0.22);
}

.m-table-actions__menu-panel a[aria-disabled="true"] {
    pointer-events: none;
}

.m-table-actions__menu-panel form {
    width: 100%;
    margin: 0;
}

.m-table-actions__menu-panel > * + * {
    margin-top: var(--m-table-actions-menu-item-spacing);
}


/* =========================================================
   11) INTERACTION STATES
========================================================= */

.m-table-actions.is-disabled,
.m-table-actions[aria-disabled="true"] {
    opacity: var(--table-actions-opacity-disabled);
    pointer-events: none;
}

.m-table-actions.is-loading,
.m-table-actions[aria-busy="true"] {
    pointer-events: none;
}


/* =========================================================
   12) FOCUS WITHIN
========================================================= */

.m-table-actions:focus-within {
    box-shadow: none;
}


/* =========================================================
   13) EMPTY STATE
========================================================= */

.m-table-actions__visible:empty + .m-table-actions__overflow + .m-table-actions__menu[hidden] {
    display: none !important;
}

.m-table-actions__tooltip {
    position: fixed;
    z-index: calc(var(--m-table-actions-z-index, 1055) + 3);
    max-width: min(240px, calc(100vw - 16px));
    padding: 6px 9px;
    border: 1px solid var(--m-table-actions-panel-border);
    border-radius: 8px;
    color: var(--m-context-text-strong);
    background: var(--m-table-actions-panel-bg);
    box-shadow: var(--m-table-actions-panel-shadow);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity var(--m-table-actions-transition), transform var(--m-table-actions-transition);
}

.m-table-actions__tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.m-table-actions__tooltip[hidden] {
    display: none !important;
}


/* =========================================================
   14) RESPONSIVE
========================================================= */

@media (max-width: 575.98px) {
    .m-table-actions {
        --table-actions-min-width: var(--m-table-actions-min-width-mobile);
        --table-actions-max-width: var(--m-table-actions-max-width-mobile);
    }

    .m-table-actions__menu-panel {
        max-width: min(240px, calc(100vw - 24px));
    }
}


/* =========================================================
   15) REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .m-table-actions,
    .m-table-actions__menu-panel {
        transition: none !important;
    }
}
@media (max-width: 767.98px) {
    .m-table-actions {
        width: auto;
        min-width: 0;
        max-width: 100%;
        padding: 0;
        align-items: center;
        justify-content: flex-start;
    }

    .m-table-actions__visible {
        width: auto;
        max-width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .m-table-actions__visible::-webkit-scrollbar {
        display: none;
    }

    .m-table-actions__menu {
        width: auto;
        align-items: center;
    }

    .m-table-actions__menu-trigger {
        width: var(--m-btn-table-action-height);
        min-width: var(--m-btn-table-action-height);
        flex: 0 0 auto;
    }

    .m-table-actions__menu-panel {
        inset-inline-start: 0;
        inset-inline-end: auto;
        top: calc(100% + var(--m-table-actions-panel-offset));
        bottom: auto;
        width: max-content;
        min-width: var(--table-actions-menu-min-width);
        max-width: min(280px, calc(100vw - 24px));
    }

    [dir="rtl"] .m-table-actions__menu-panel {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }
}