/* ============================================================
   «Доступ к модулям» — role × module matrix
   designs/design_handoff_module_access (D1Matrix)

   Everything is scoped under .cx-ma so the page owns its look without
   reaching into the panel around it, the same way .cx-dash does for the
   dashboard. Values are lifted from the handoff's `T` tokens.
   ============================================================ */

.cx-ma {
    --ma-ink: #0f172a;
    --ma-sub: #64748b;
    --ma-faint: #94a3b8;
    --ma-card: #fff;
    --ma-border: #e7ebf0;
    --ma-blue: #2489c5;
    --ma-blue-dark: #1f79b0;
    --ma-blue-soft: #e8f2fa;
    --ma-track: #d3dce6;
    --ma-row-hover: #f6f8fb;
    --ma-amber-ink: #b45309;
    --ma-amber-bg: #fff7ed;
    --ma-amber-border: #fed7aa;

    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ma-ink);
}

.cx-ma *,
.cx-ma *::before,
.cx-ma *::after { box-sizing: border-box; }

.cx-ma .cx-ma-intro {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ma-sub);
    margin: 0;
    max-width: 720px;
}

/* ── the card ───────────────────────────────────────────────────────────── */

.cx-ma .cx-ma-card {
    background: var(--ma-card);
    border: 1px solid var(--ma-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-top: 20px;
    overflow: hidden;
}

.cx-ma .cx-ma-empty {
    padding: 26px 18px;
    text-align: center;
    color: var(--ma-faint);
    font-size: 13.5px;
    margin: 0;
}

.cx-ma .cx-ma-scroll { overflow-x: auto; }

.cx-ma .cx-ma-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.cx-ma .cx-ma-table thead tr {
    border-bottom: 1px solid var(--ma-border);
    background: #fbfcfe;
}

.cx-ma .cx-ma-th-mod {
    text-align: left;
    padding: 13px 18px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ma-faint);
}

/* A fixed column width per role is what keeps «Сотрудник» and
   «Администратор» from colliding the way the stock table's headers did. */
.cx-ma .cx-ma-th-role,
.cx-ma .cx-ma-th-admin {
    width: 132px;
    min-width: 132px;
    text-align: center;
    padding: 13px 12px;
    font-size: 13px;
}

.cx-ma .cx-ma-th-role { font-weight: 700; color: var(--ma-ink); }
.cx-ma .cx-ma-th-admin { font-weight: 600; color: var(--ma-faint); }
.cx-ma .cx-ma-th-admin-inner { display: inline-flex; align-items: center; gap: 5px; }

.cx-ma .cx-ma-table tbody tr + tr { border-top: 1px solid var(--ma-border); }
.cx-ma .cx-ma-table tbody tr:hover { background: var(--ma-row-hover); }
.cx-ma .cx-ma-cell { text-align: center; }
.cx-ma .cx-ma-cell .cx-ma-switch { display: inline-block; vertical-align: middle; }

/* ── module row ─────────────────────────────────────────────────────────── */

.cx-ma .cx-ma-mod {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 18px;
}

.cx-ma .cx-ma-ic {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: var(--ma-faint);
    transition: background 0.18s, color 0.18s;
}

.cx-ma .cx-ma-ic[data-on="true"] {
    background: var(--ma-blue-soft);
    color: var(--ma-blue);
}

.cx-ma .cx-ma-name { font-size: 14px; font-weight: 600; color: var(--ma-ink); }
.cx-ma .cx-ma-desc { font-size: 12px; color: var(--ma-faint); margin-top: 1px; }

/* ── the switch (a checkbox wearing a track and a knob) ─────────────────── */

.cx-ma .cx-ma-switch {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    border: none;
    margin: 0;
    padding: 0;
    background: var(--ma-track);
    position: relative;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.18s;
}

.cx-ma .cx-ma-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: left 0.18s;
}

.cx-ma .cx-ma-switch:checked { background: var(--ma-blue); }
.cx-ma .cx-ma-switch:checked::after { left: 21px; }
.cx-ma .cx-ma-switch:focus-visible { outline: 2px solid var(--ma-blue); outline-offset: 2px; }

/* ── the locked admin chip ──────────────────────────────────────────────── */

.cx-ma .cx-ma-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef2f6;
    color: var(--ma-sub);
    border: 1px solid var(--ma-border);
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.cx-ma .cx-ma-chip svg { color: var(--ma-faint); }

/* ── the duty-reminder warning ──────────────────────────────────────────── */

.cx-ma .cx-ma-warn {
    display: flex;
    gap: 11px;
    margin: 0 16px 16px;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--ma-amber-bg);
    border: 1px solid var(--ma-amber-border);
    animation: cx-ma-pop 0.18s ease;
}

.cx-ma .cx-ma-warn-ic { flex: 0 0 auto; margin-top: 1px; color: var(--ma-amber-ink); }
.cx-ma .cx-ma-warn-text { font-size: 13px; line-height: 1.5; color: #9a3412; }
.cx-ma .cx-ma-warn-text b { color: var(--ma-amber-ink); }

/* ── the save bar ───────────────────────────────────────────────────────── */

.cx-ma .cx-ma-bar {
    position: sticky;
    bottom: 0;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 13px;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.cx-ma .cx-ma-bar[data-dirty="true"] {
    background: var(--ma-card);
    border-color: var(--ma-border);
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.1);
}

.cx-ma .cx-ma-bar-gap { flex: 1; }

.cx-ma .cx-ma-bar-label { font-size: 13.5px; font-weight: 500; color: var(--ma-faint); }
.cx-ma .cx-ma-bar[data-dirty="true"] .cx-ma-bar-label { color: var(--ma-ink); }

.cx-ma .cx-ma-btn-ghost {
    height: 40px;
    padding: 0 15px;
    border-radius: 10px;
    border: 1px solid var(--ma-border);
    background: #fff;
    color: var(--ma-sub);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.cx-ma .cx-ma-btn-ghost:hover { background: var(--ma-row-hover); }

.cx-ma .cx-ma-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    border: none;
    background: #cbd5e1;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: default;
    transition: background 0.15s;
}

.cx-ma .cx-ma-btn-ic { display: inline-flex; }

.cx-ma .cx-ma-bar[data-dirty="true"] .cx-ma-btn-save {
    background: var(--ma-blue);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(36, 137, 197, 0.25);
}

.cx-ma .cx-ma-bar[data-dirty="true"] .cx-ma-btn-save:hover:not([disabled]) { background: var(--ma-blue-dark); }
.cx-ma .cx-ma-btn-save:focus-visible { outline: 2px solid var(--ma-blue-dark); outline-offset: 2px; }

.cx-ma .cx-ma-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: cx-ma-spin 0.7s linear infinite;
}

@keyframes cx-ma-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes cx-ma-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .cx-ma .cx-ma-warn,
    .cx-ma .cx-ma-bar,
    .cx-ma .cx-ma-ic,
    .cx-ma .cx-ma-switch,
    .cx-ma .cx-ma-switch::after,
    .cx-ma .cx-ma-btn-save {
        animation: none !important;
        transition: none !important;
    }
    /* The spinner is the only signal that a save is in flight, so it keeps
       turning — just slowly enough not to strobe. */
    .cx-ma .cx-ma-spinner { animation-duration: 2s; }
}

@media (max-width: 640px) {
    .cx-ma .cx-ma-mod { gap: 10px; padding: 12px 14px; }
    .cx-ma .cx-ma-bar { padding: 12px; gap: 8px; }
    .cx-ma .cx-ma-bar-label { font-size: 12.5px; }
}