/* ==========================================================================
   /Admin/Employee - keeps the employee list, the role × permission matrix and
   the workflow-role checklist usable on phones, tablets and desktops.
   ========================================================================== */

/* ---------- Permissions pane ---------- */
.perm-pane { padding: 1.25rem; }

.perm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.perm-toolbar-role { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex: 1 1 320px; min-width: 0; }
.perm-toolbar-role .form-select { width: auto; min-width: 200px; max-width: 100%; text-overflow: ellipsis; }
.perm-toolbar-role #roleInfo { min-width: 0; }
.perm-toolbar .btn-save { margin-left: auto; white-space: nowrap; }
.perm-hint { margin: -.25rem 0 .85rem; }

/* ---------- Role × permission matrix ---------- */
.matrix-wrap { border-radius: var(--em-radius-sm); }
.table-matrix thead th,
.table-matrix tbody td,
.table-matrix tbody th { padding: .6rem .55rem; }
.table-matrix thead th:first-child,
.table-matrix tbody th { min-width: 140px; text-align: left; }
.table-matrix thead th { font-size: .7rem; letter-spacing: .03em; }
.table-matrix .form-check-input { cursor: pointer; }
.table-matrix .form-check-input:disabled { cursor: not-allowed; opacity: .55; }

/* Tablets and narrow desktops: keep the module column in view while the
   nine action columns scroll sideways. */
@media (min-width: 768px) {
    .table-matrix thead th:first-child,
    .table-matrix tbody th { position: sticky; left: 0; z-index: 1; background: var(--em-surface); box-shadow: 1px 0 0 var(--em-border); }
    .table-matrix thead th:first-child { z-index: 2; background: var(--em-surface-2); }
    .table-matrix tbody tr:hover th { background: #fafbff; }
}

/* Phones: one card per module instead of a 10-column table. */
@media (max-width: 767.98px) {
    .perm-pane { padding: 1rem; }

    /* Role + Save stay pinned under the top bar while the cards scroll. */
    .perm-toolbar {
        position: sticky;
        top: var(--em-topbar-h);
        z-index: 1020;
        margin: -1rem -1rem .85rem;
        padding: .65rem 1rem;
        background: var(--em-surface);
        border-bottom: 1px solid var(--em-border);
    }
    .perm-toolbar-role { flex-basis: 100%; }
    .perm-toolbar-role .form-select { flex: 1 1 auto; width: auto; min-width: 0; }
    .perm-toolbar-role #roleInfo { flex-basis: 100%; }
    .perm-toolbar .btn-save { margin-left: 0; width: 100%; min-height: var(--em-touch); }

    .matrix-wrap { overflow: visible; }

    .table-matrix thead { display: none; }
    .table-matrix,
    .table-matrix tbody,
    .table-matrix th,
    .table-matrix td { display: block; width: 100%; }

    /* One card per module; actions become a 3-up grid of tappable toggles. */
    .table-matrix tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .4rem;
        background: var(--em-surface);
        border: 1px solid var(--em-border);
        border-radius: var(--em-radius-sm);
        margin: 0 0 .75rem;
        padding: .7rem;
        box-shadow: var(--em-shadow);
    }
    .table-matrix tbody tr:hover { background: var(--em-surface); }
    .table-matrix tbody tr:last-child { margin-bottom: 0; }
    .table-matrix tbody th {
        grid-column: 1 / -1;
        min-width: 0;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--em-border);
        margin-bottom: .15rem;
        padding: 0 0 .55rem;
        font-size: .9rem;
    }
    .table-matrix tbody td {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        min-height: 52px;
        padding: .35rem .25rem;
        border: 1px solid var(--em-border);
        border-radius: 8px;
        background: var(--em-surface-2);
        text-align: center;
        cursor: pointer;
    }
    .table-matrix tbody td::before {
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 600;
        line-height: 1.15;
        color: var(--em-muted);
    }
    /* Loading / error rows span the whole card. */
    .table-matrix tbody td:only-child { grid-column: 1 / -1; cursor: default; background: transparent; border: 0; }
    .table-matrix tbody td:has(input:checked) { border-color: var(--em-primary-100); background: var(--em-primary-050); }
    .table-matrix tbody td:has(input:disabled) { cursor: default; }
    .table-matrix tbody td .form-check-input { width: 1.2rem; height: 1.2rem; margin: 0; flex: none; }
}

@media (max-width: 359.98px) {
    .table-matrix tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Workflow-role checklist (roles modal) ---------- */
.role-checks .form-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    min-height: var(--em-touch);
    margin: 0;
    padding: .55rem .75rem;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-sm);
    background: var(--em-surface);
    cursor: pointer;
}
.role-checks .form-check:hover { background: var(--em-surface-2); border-color: var(--em-primary-100); }
.role-checks .form-check-input { float: none; flex: none; width: 1.05rem; height: 1.05rem; margin: .15rem 0 0; cursor: pointer; }
.role-checks .form-check-label { flex: 1; min-width: 0; }

/* ---------- Employee cards on phones ---------- */
@media (max-width: 767.98px) {
    /* The employee (avatar + name) becomes the card header, so drop its label. */
    .employee-list .table-stack tbody td.cell-primary { display: block; text-align: left; border-bottom: 1px solid var(--em-border); padding-bottom: .6rem; margin-bottom: .35rem; }
    .employee-list .table-stack tbody td.cell-primary::before { display: none; }
    .employee-list .table-stack tbody td.actions { gap: .5rem; }
    .employee-list .table-stack tbody td.actions .btn { min-width: var(--em-touch); min-height: var(--em-touch); }
}

/* Very narrow phones: a smaller label column leaves room for long role badges. */
@media (max-width: 359.98px) {
    .employee-list .table-stack tbody td::before { flex-basis: 34%; }
    .employee-list .badge-soft { font-size: .7rem; padding: .25rem .5rem; }
}