/* =====================================================
   MINIALFA
   PERMISOS
===================================================== */


/* =====================================================
   PANEL PRINCIPAL
===================================================== */

.permissions-panel {
    padding:
        clamp(
            20px,
            3vw,
            30px
        );

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        18px;
}


/* =====================================================
   SVG - PANTALLA PRINCIPAL
===================================================== */

.permissions-panel svg {
    flex:
        0 0 auto;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;
}


/* =====================================================
   ENCABEZADO
===================================================== */

.permissions-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding-bottom:
        22px;

    border-bottom:
        1px solid
        var(--border);
}


.permissions-header-text {
    min-width:
        0;

    max-width:
        650px;
}


.permissions-eyebrow {
    display:
        block;

    color:
        var(--accent-dark);

    font-size:
        0.69rem;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.permissions-header-text h2 {
    margin:
        5px 0 6px;

    color:
        var(--brand-dark);

    font-size:
        clamp(
            1.25rem,
            2.2vw,
            1.58rem
        );

    line-height:
        1.2;
}


.permissions-header-text p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.88rem;

    line-height:
        1.55;
}


/* =====================================================
   ICONO DEL ENCABEZADO
===================================================== */

.permissions-header-icon {
    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    color:
        var(--accent-dark);

    background:
        #e7f5f5;

    border:
        1px solid
        #c8e4e5;

    border-radius:
        15px;
}


.permissions-header-icon svg {
    width:
        25px;

    height:
        25px;

    stroke-width:
        1.85;
}


/* =====================================================
   HISTORIAL
===================================================== */

.permissions-toolbar {
    margin-top:
        20px;

    padding:
        14px 15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border);

    border-radius:
        12px;
}


.permissions-toolbar-text {
    min-width:
        0;
}


.permissions-toolbar-text strong,
.permissions-toolbar-text span {
    display:
        block;
}


.permissions-toolbar-text strong {
    color:
        var(--brand-dark);

    font-size:
        0.83rem;
}


.permissions-toolbar-text span {
    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        0.73rem;
}


/* =====================================================
   BOTÓN HISTORIAL
===================================================== */

.permissions-history-button {
    min-height:
        42px;

    padding:
        9px 14px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    flex:
        0 0 auto;

    color:
        var(--brand);

    background:
        #ffffff;

    border:
        1px solid
        var(--brand);

    border-radius:
        9px;

    font-size:
        0.78rem;

    font-weight:
        750;

    text-decoration:
        none;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
}


.permissions-history-button svg {
    stroke-width:
        1.8;
}


.permissions-history-button:hover {
    color:
        #ffffff;

    background:
        var(--brand);

    transform:
        translateY(-1px);
}


.permissions-history-button:active {
    transform:
        scale(0.97);
}


/* =====================================================
   GRID
===================================================== */

.permissions-grid {
    margin-top:
        18px;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        15px;
}


/* =====================================================
   TARJETAS
===================================================== */

.permission-card {
    width:
        100%;

    min-height:
        136px;

    padding:
        19px;

    display:
        grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        16px;

    color:
        var(--text);

    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}


.permission-card:hover {
    background:
        #ffffff;

    border-color:
        #aec4d0;

    box-shadow:
        0 7px 18px
        rgba(10, 40, 58, 0.07);

    transform:
        translateY(-2px);
}


.permission-card:active {
    transform:
        translateY(0)
        scale(0.985);
}


/* =====================================================
   ICONOS DE TARJETAS
===================================================== */

.permission-icon {
    width:
        52px;

    height:
        52px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        14px;
}


.permission-icon svg {
    width:
        27px;

    height:
        27px;

    stroke-width:
        1.8;
}


/* VACACIONES */

.permission-card-vacations
.permission-icon {
    color:
        #175cd3;

    background:
        #e8f2ff;
}


/* PERMISO PERSONAL */

.permission-card-personal
.permission-icon {
    color:
        var(--purple);

    background:
        var(--purple-soft);
}


/* INCAPACIDAD */

.permission-card-disability
.permission-icon {
    color:
        var(--danger);

    background:
        var(--danger-soft);
}


/* COMISIÓN */

.permission-card-commission
.permission-icon {
    color:
        var(--success);

    background:
        var(--success-soft);
}


/* =====================================================
   CONTENIDO DE TARJETAS
===================================================== */

.permission-card-content {
    min-width:
        0;
}


.permission-card-label {
    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--muted);

    font-size:
        0.67rem;

    font-weight:
        750;

    letter-spacing:
        0.035em;

    text-transform:
        uppercase;
}


.permission-card-content h3 {
    margin:
        0;

    color:
        var(--brand-dark);

    font-size:
        1rem;

    line-height:
        1.25;
}


.permission-card-content p {
    margin:
        5px 0 0;

    color:
        var(--muted);

    font-size:
        0.79rem;

    line-height:
        1.45;
}


/* =====================================================
   FLECHA
===================================================== */

.permission-card-arrow {
    display:
        grid;

    place-items:
        center;

    color:
        var(--accent-dark);

    transition:
        transform 0.16s ease;
}


.permission-card-arrow svg {
    stroke-width:
        1.9;
}


.permission-card:hover
.permission-card-arrow {
    transform:
        translateX(2px);
}


/* =====================================================
   NOTA
===================================================== */

.permissions-note {
    margin-top:
        18px;

    padding:
        13px 15px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        #315e61;

    background:
        #eef8f8;

    border:
        1px solid
        #d1e6e7;

    border-left:
        4px solid
        var(--accent);

    border-radius:
        9px;
}


.permissions-note svg {
    margin-top:
        1px;

    flex:
        0 0 auto;

    color:
        var(--accent-dark);

    stroke-width:
        1.8;
}


.permissions-note p {
    margin:
        0;

    font-size:
        0.78rem;

    line-height:
        1.5;
}


/* =====================================================
   FOCUS
===================================================== */

.permission-card:focus-visible,
.permissions-history-button:focus-visible {
    outline:
        3px solid
        rgba(8, 122, 131, 0.18);

    outline-offset:
        2px;
}


/* =====================================================
   RESPONSIVE - PRINCIPAL
===================================================== */

@media (max-width: 760px) {

    .permissions-header {
        align-items:
            flex-start;
    }


    .permissions-header-icon {
        width:
            50px;

        height:
            50px;
    }


    .permissions-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 600px) {

    .permissions-toolbar {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .permissions-history-button {
        align-self:
            flex-start;
    }

}


@media (max-width: 440px) {

    .permissions-panel {
        padding:
            16px;
    }


    .permissions-header-icon {
        display:
            none;
    }


    .permission-card {
        min-height:
            0;

        padding:
            16px;

        grid-template-columns:
            auto
            minmax(0, 1fr);
    }


    .permission-card-arrow {
        display:
            none;
    }

}



/* =====================================================
   BASE COMPARTIDA POR LOS CUATRO FORMULARIOS
===================================================== */

:is(
    .vacation-modal,
    .personal-permission-modal,
    .disability-modal,
    .commission-modal
) {
    position:
        fixed;

    inset:
        0;

    z-index:
        1050;

    display:
        none;

    place-items:
        center;

    padding:
        16px;
}


:is(
    .vacation-modal,
    .personal-permission-modal,
    .disability-modal,
    .commission-modal
)[aria-hidden="false"],
:is(
    .vacation-modal,
    .personal-permission-modal,
    .disability-modal,
    .commission-modal
).is-open {
    display:
        grid;
}


/* =====================================================
   FONDOS
===================================================== */

:is(
    .vacation-backdrop,
    .personal-permission-backdrop,
    .disability-backdrop,
    .commission-backdrop
) {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(8, 25, 37, 0.74);
}


/* =====================================================
   VENTANAS
===================================================== */

:is(
    .vacation-window,
    .personal-permission-window,
    .disability-window,
    .commission-window
) {
    position:
        relative;

    width:
        min(100%, 780px);

    max-height:
        calc(100vh - 32px);

    overflow-y:
        auto;

    background:
        #ffffff;

    border-radius:
        16px;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.3);
}


/* =====================================================
   ENCABEZADOS
===================================================== */

:is(
    .vacation-header,
    .personal-permission-header,
    .disability-header,
    .commission-header
) {
    padding:
        20px 22px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    border-bottom:
        1px solid
        var(--border);
}


:is(
    .vacation-header,
    .personal-permission-header,
    .disability-header,
    .commission-header
) h2 {
    margin:
        0;

    color:
        var(--brand-dark);

    font-size:
        1.3rem;
}


:is(
    .vacation-header,
    .personal-permission-header,
    .disability-header,
    .commission-header
) p {
    margin:
        4px 0 0;

    color:
        var(--muted);

    font-size:
        0.84rem;
}


/* =====================================================
   CERRAR
===================================================== */

:is(
    .vacation-close,
    .personal-permission-close,
    .disability-close,
    .commission-close
) {
    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    color:
        var(--brand);

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;
}


/* =====================================================
   SECCIONES
===================================================== */

:is(
    .vacation-section,
    .personal-section,
    .disability-section,
    .commission-section
) {
    padding:
        18px 22px;

    border-bottom:
        1px solid
        var(--border);
}


:is(
    .vacation-section-title,
    .personal-section-title,
    .disability-section-title,
    .commission-section-title
) {
    margin-bottom:
        13px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--brand-dark);

    font-weight:
        800;
}


:is(
    .vacation-section-title,
    .personal-section-title,
    .disability-section-title,
    .commission-section-title
) svg {
    color:
        var(--accent-dark);
}


/* =====================================================
   SELECTOR DE EMPLEADO
===================================================== */

:is(
    .vacation-employee-selector,
    .personal-employee-selector,
    .disability-employee-selector,
    .commission-employee-selector
) {
    position:
        relative;
}


:is(
    .vacation-search-box,
    .personal-search-box,
    .disability-search-box,
    .commission-search-box
) {
    position:
        relative;
}


:is(
    .vacation-search-box,
    .personal-search-box,
    .disability-search-box,
    .commission-search-box
) > svg {
    position:
        absolute;

    top:
        50%;

    left:
        12px;

    color:
        var(--muted);

    transform:
        translateY(-50%);
}


:is(
    .vacation-search-box,
    .personal-search-box,
    .disability-search-box,
    .commission-search-box
) input {
    width:
        100%;

    min-height:
        44px;

    padding:
        10px 12px 10px 40px;

    color:
        var(--text);

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;
}


/* =====================================================
   DESPLEGABLE EMPLEADOS
===================================================== */

:is(
    .vacation-employee-dropdown,
    .personal-employee-options,
    .disability-employee-options,
    .commission-employee-options
) {
    position:
        absolute;

    z-index:
        5;

    top:
        calc(100% + 6px);

    right:
        0;

    left:
        0;

    max-height:
        235px;

    overflow-y:
        auto;

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    box-shadow:
        0 12px 28px
        rgba(23, 33, 43, 0.14);
}


:is(
    .vacation-employee-option,
    .personal-employee-option,
    .disability-employee-option,
    .commission-employee-option
) {
    width:
        100%;

    min-height:
        50px;

    padding:
        8px 11px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--text);

    background:
        #ffffff;

    border:
        0;

    border-bottom:
        1px solid
        var(--border);

    text-align:
        left;
}


:is(
    .vacation-employee-option,
    .personal-employee-option,
    .disability-employee-option,
    .commission-employee-option
):hover {
    background:
        #eef8f8;
}


/* =====================================================
   AVATARES
===================================================== */

:is(
    .vacation-option-avatar,
    .personal-option-avatar,
    .disability-option-avatar,
    .commission-option-avatar,
    .vacation-selected-avatar,
    .personal-selected-avatar,
    .disability-selected-avatar,
    .commission-selected-avatar
) {
    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    color:
        #ffffff;

    background:
        var(--brand);

    border-radius:
        50%;

    font-size:
        0.75rem;

    font-weight:
        800;
}


/* =====================================================
   DATOS DE OPCIÓN
===================================================== */

:is(
    .vacation-option-data,
    .disability-option-data,
    .commission-option-data
) {
    min-width:
        0;
}


:is(
    .vacation-option-data,
    .disability-option-data,
    .commission-option-data
) strong,
:is(
    .vacation-option-data,
    .disability-option-data,
    .commission-option-data
) span {
    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


:is(
    .vacation-option-data,
    .disability-option-data,
    .commission-option-data
) span {
    color:
        var(--muted);

    font-size:
        0.76rem;
}


/* =====================================================
   VACÍO
===================================================== */

:is(
    .vacation-employee-empty,
    .personal-employee-empty,
    .disability-employee-empty,
    .commission-employee-empty
) {
    padding:
        20px;

    color:
        var(--muted);

    text-align:
        center;
}


/* =====================================================
   EMPLEADO SELECCIONADO
===================================================== */

:is(
    .vacation-selected-employee,
    .personal-selected-employee,
    .disability-selected-employee,
    .commission-selected-employee
) {
    margin-top:
        10px;

    padding:
        12px;

    display:
        grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        11px;

    background:
        #eff9f9;

    border:
        1px solid
        #b8d9dc;

    border-radius:
        10px;
}


:is(
    .vacation-selected-employee,
    .personal-selected-employee,
    .disability-selected-employee,
    .commission-selected-employee
) strong,
:is(
    .vacation-selected-employee,
    .personal-selected-employee,
    .disability-selected-employee,
    .commission-selected-employee
) span {
    display:
        block;
}


:is(
    .vacation-selected-employee,
    .personal-selected-employee,
    .disability-selected-employee,
    .commission-selected-employee
) span {
    color:
        var(--muted);

    font-size:
        0.78rem;
}


/* =====================================================
   CALENDARIOS
===================================================== */

:is(
    .vacation-calendar,
    .personal-calendar,
    .disability-calendar,
    .commission-calendar
) {
    padding:
        13px;

    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border);

    border-radius:
        12px;
}


:is(
    .vacation-calendar-header,
    .personal-calendar-header,
    .disability-calendar-header,
    .commission-calendar-header
) {
    margin-bottom:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}


:is(
    .vacation-calendar-navigation,
    .personal-calendar-navigation,
    .disability-calendar-navigation,
    .commission-calendar-navigation
) {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


:is(
    .vacation-calendar-navigation,
    .personal-calendar-navigation,
    .disability-calendar-navigation,
    .commission-calendar-navigation
) button,
:is(
    .vacation-today,
    .personal-today,
    .disability-today,
    .commission-today
) {
    min-width:
        39px;

    min-height:
        39px;

    padding:
        6px 9px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--brand);

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    font-weight:
        750;
}


:is(
    .vacation-weekdays,
    .personal-weekdays,
    .disability-weekdays,
    .commission-weekdays
),
:is(
    .vacation-calendar-days,
    .personal-calendar-days,
    .disability-calendar-days,
    .commission-calendar-days
) {
    display:
        grid;

    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );

    gap:
        5px;
}


:is(
    .vacation-weekdays,
    .personal-weekdays,
    .disability-weekdays,
    .commission-weekdays
) {
    margin-bottom:
        6px;

    color:
        var(--muted);

    font-size:
        0.68rem;

    font-weight:
        800;

    text-align:
        center;

    text-transform:
        uppercase;
}


:is(
    .vacation-calendar-days,
    .personal-calendar-days,
    .disability-calendar-days,
    .commission-calendar-days
) button {
    min-height:
        36px;

    aspect-ratio:
        1;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

    color:
        var(--text);

    background:
        #ffffff;

    border:
        1px solid
        transparent;

    border-radius:
        8px;
}


:is(
    .vacation-calendar-days,
    .personal-calendar-days,
    .disability-calendar-days,
    .commission-calendar-days
) button:hover {
    border-color:
        var(--accent);
}


:is(
    .vacation-calendar-days,
    .personal-calendar-days,
    .disability-calendar-days,
    .commission-calendar-days
) button.selected,
:is(
    .vacation-calendar-days,
    .personal-calendar-days,
    .disability-calendar-days,
    .commission-calendar-days
) button[aria-selected="true"] {
    color:
        #ffffff;

    background:
        var(--brand);
}


/* =====================================================
   ERRORES
===================================================== */

:is(
    .vacation-error,
    .personal-error,
    .disability-error,
    .commission-error,
    .commission-time-error
) {
    margin-top:
        7px;

    color:
        var(--danger);

    font-size:
        0.76rem;

    font-weight:
        650;
}


/* =====================================================
   TEXTAREAS
===================================================== */

:is(
    .vacation-observation,
    .personal-observation,
    .disability-observation,
    .commission-observation,
    .commission-textarea
) {
    width:
        100%;

    min-height:
        100px;

    padding:
        10px 12px;

    color:
        var(--text);

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    resize:
        vertical;
}


/* =====================================================
   CONTROLES
===================================================== */

:is(
    .personal-control,
    .disability-control,
    .commission-control,
    .commission-select
) {
    width:
        100%;

    min-height:
        44px;

    padding:
        10px 12px;

    color:
        var(--text);

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;
}


/* =====================================================
   SELECTS
===================================================== */

:is(
    .personal-select-wrapper,
    .commission-select-wrapper
) {
    position:
        relative;
}


:is(
    .personal-select-wrapper,
    .commission-select-wrapper
) select {
    appearance:
        none;

    padding-right:
        38px;
}


:is(
    .personal-select-wrapper,
    .commission-select-wrapper
) svg {
    position:
        absolute;

    top:
        50%;

    right:
        12px;

    color:
        var(--muted);

    pointer-events:
        none;

    transform:
        translateY(-50%);
}


/* =====================================================
   INFORMACIÓN
===================================================== */

:is(
    .vacation-info,
    .personal-info,
    .disability-info,
    .commission-info
) {
    margin:
        16px 22px;

    padding:
        12px 14px;

    color:
        #164e52;

    background:
        #eaf7f7;

    border-left:
        4px solid
        var(--accent);

    border-radius:
        8px;

    font-size:
        0.82rem;
}


/* =====================================================
   GUARDADO
===================================================== */

:is(
    .vacation-saved,
    .personal-saved,
    .disability-saved,
    .commission-saved
) {
    margin:
        0 22px 16px;

    padding:
        12px 14px;

    color:
        var(--success);

    background:
        var(--success-soft);

    border-left:
        4px solid
        var(--success);

    border-radius:
        8px;

    font-size:
        0.82rem;

    font-weight:
        650;
}


/* =====================================================
   ACCIONES
===================================================== */

:is(
    .vacation-actions,
    .personal-actions,
    .disability-actions,
    .commission-actions
) {
    padding:
        16px 22px;

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        10px;

    background:
        var(--surface-soft);

    border-top:
        1px solid
        var(--border);
}


/* =====================================================
   BOTONES
===================================================== */

:is(
    .vacation-secondary,
    .personal-secondary,
    .disability-secondary,
    .commission-secondary
),
:is(
    .vacation-primary,
    .personal-primary,
    .disability-primary,
    .commission-primary
),
:is(
    .vacation-document,
    .personal-document,
    .disability-document,
    .commission-document
) {
    min-height:
        43px;

    padding:
        9px 14px;

    border-radius:
        9px;

    font-weight:
        750;
}


/* SECUNDARIO */

:is(
    .vacation-secondary,
    .personal-secondary,
    .disability-secondary,
    .commission-secondary
) {
    color:
        var(--text);

    background:
        #ffffff;

    border:
        1px solid
        var(--border);
}


/* PRINCIPAL */

:is(
    .vacation-primary,
    .personal-primary,
    .disability-primary,
    .commission-primary
) {
    color:
        #ffffff;

    background:
        var(--brand);

    border:
        0;
}


/* DOCUMENTO */

:is(
    .vacation-document,
    .personal-document,
    .disability-document,
    .commission-document
) {
    color:
        var(--success);

    background:
        var(--success-soft);

    border:
        1px solid
        var(--success);
}


/* =====================================================
   RESPONSIVE - FORMULARIOS
===================================================== */

@media (max-width: 560px) {

    :is(
        .vacation-modal,
        .personal-permission-modal,
        .disability-modal,
        .commission-modal
    ) {
        padding:
            8px;
    }


    :is(
        .vacation-window,
        .personal-permission-window,
        .disability-window,
        .commission-window
    ) {
        max-height:
            calc(100vh - 16px);
    }


    :is(
        .vacation-header,
        .personal-permission-header,
        .disability-header,
        .commission-header
    ),
    :is(
        .vacation-section,
        .personal-section,
        .disability-section,
        .commission-section
    ),
    :is(
        .vacation-actions,
        .personal-actions,
        .disability-actions,
        .commission-actions
    ) {
        padding:
            15px;
    }


    :is(
        .vacation-info,
        .personal-info,
        .disability-info,
        .commission-info
    ),
    :is(
        .vacation-saved,
        .personal-saved,
        .disability-saved,
        .commission-saved
    ) {
        margin-inline:
            15px;
    }


    :is(
        .vacation-actions,
        .personal-actions,
        .disability-actions,
        .commission-actions
    ) {
        display:
            grid;

        grid-template-columns:
            1fr;
    }

}