/* المستخدمون — سطح المكتب (جدول) — مُستخرج من index.html */
/* ─── Users table — refreshed layout ─── */
    .mr-users-table-wrap {
      overflow-x: auto;
      border-radius: 12px;
      border: 1px solid var(--mr-border);
      background: var(--card-bg, #fff)
    }

    .mr-users-table {
      width: 100%;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 0 6px
    }

    .mr-users-table thead.mr-users-thead {
      background: var(--mr-primary-softer)
    }

    .mr-users-table thead.mr-users-thead th {
      text-align: right;
      vertical-align: middle;
      padding: 10px 14px;
      font-family: var(--font);
      font-weight: 600;
      font-size: 13px;
      letter-spacing: -0.02em;
      color: var(--mr-text);
      border-bottom: 1px solid var(--mr-border);
      background: var(--mr-primary-softer);
      white-space: nowrap
    }

    .mr-users-table thead.mr-users-thead th.mr-col-role {
      text-align: center
    }

    .mr-users-table thead.mr-users-thead th.mr-col-actions {
      text-align: end
    }

    .mr-users-table tbody td {
      padding: 12px 16px;
      vertical-align: middle;
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      color: var(--mr-text);
      text-align: right;
      background: var(--mr-surface);
      transition: background .18s ease, border-color .18s ease, box-shadow .18s ease
    }

    .mr-users-table tbody tr {
      cursor: default;
      transition: box-shadow .18s ease
    }

    .mr-users-table tbody tr td:first-child {
      border-inline-end: 1px solid transparent;
      border-radius: 0 12px 12px 0
    }

    .mr-users-table tbody tr td:last-child {
      border-inline-start: 1px solid transparent;
      border-radius: 12px 0 0 12px
    }

    .mr-users-table .mr-col-user {
      width: 22%
    }

    .mr-users-table .mr-col-contact {
      width: 28%
    }

    .mr-users-table .mr-col-branch {
      width: 18%
    }

    .mr-users-table th.mr-col-branch {
      text-align: center;
      padding: 10px 14px
    }

    .mr-users-table td.mr-col-branch {
      text-align: end;
      padding: 10px 14px
    }

    .mr-users-table td.mr-col-branch .mr-branch-line {
      justify-content: flex-end;
      margin-inline-start: auto;
      margin-inline-end: 10px
    }

    .mr-users-table .mr-col-role {
      width: 14%
    }

    .mr-users-table .mr-col-actions {
      width: 18%
    }

    .mr-users-table th.mr-col-role,
    .mr-users-table td.mr-col-role {
      text-align: center;
      vertical-align: middle;
      white-space: nowrap
    }

    .mr-users-table td.mr-col-role .mr-role-cell {
      display: flex;
      justify-content: center
    }

    .mr-users-table th.mr-col-actions,
    .mr-users-table td.mr-col-actions {
      text-align: end;
      vertical-align: middle;
      white-space: nowrap
    }

    .mr-users-table td.mr-col-actions .mr-act-group {
      display: inline-flex;
      align-items: center;
      gap: 4px
    }

    .mr-users-table tbody tr:nth-child(even) td {
      background: rgba(15, 18, 36, 0.02)
    }

    .mr-users-table tbody tr:hover {
      box-shadow: 0 2px 8px rgba(15, 18, 36, 0.06)
    }

    .mr-users-table tbody tr:hover td {
      background: var(--mr-primary-softer);
      border-top-color: var(--mr-border);
      border-bottom-color: var(--mr-border)
    }

    .mr-users-table tbody tr:hover td:first-child {
      border-inline-end-color: var(--mr-border)
    }

    .mr-users-table tbody tr:hover td:last-child {
      border-inline-start-color: var(--mr-border)
    }

    [data-theme="dark"] .mr-users-table tbody tr:nth-child(even) td {
      background: rgba(255, 255, 255, 0.03)
    }

    [data-theme="dark"] .mr-users-table tbody tr:hover {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25)
    }

    [data-theme="dark"] .mr-users-table tbody tr:hover td {
      background: rgba(255, 255, 255, 0.06)
    }

    .mr-users-table .mr-contact-cell {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 4px
    }

    .mr-role-pill.mr-role-employee { --rc: #FFC300 }
    .mr-role-pill.mr-role-supervisor { --rc: var(--blue) }
    .mr-role-pill.mr-role-auditor { --rc: var(--purple) }
    .mr-role-pill.mr-role-manager { --rc: var(--red) }
    .mr-role-pill.mr-role-branch_manager { --rc: #0d9488 }

    /* عمود وسائل التواصل */
    .mr-contact-cell {
      display: flex;
      flex-direction: column;
      gap: 4px;
      line-height: 1.35
    }

    .mr-contact-line {
      display: grid;
      grid-template-columns: 16px minmax(0, 1fr);
      align-items: center;
      column-gap: 8px;
      justify-items: start;
      min-width: 0
    }

    .mr-contact-line i {
      color: var(--mr-text-3);
      font-size: 12px;
      width: 14px;
      text-align: center;
      flex-shrink: 0
    }

    .mr-contact-phone {
      font-family: var(--font);
      font-size: 14px;
      color: var(--mr-text);
      direction: ltr;
      text-align: start;
      unicode-bidi: plaintext;
      font-weight: 500;
      letter-spacing: -0.02em
    }

    .mr-contact-email {
      font-size: 13px;
      color: var(--mr-text-3);
      font-family: var(--font);
      direction: ltr;
      text-align: start;
      unicode-bidi: plaintext;
      font-weight: 500;
      letter-spacing: -0.02em
    }

    .mr-branch-line {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0
    }

    .mr-branch-line i {
      color: var(--mr-text-3);
      font-size: 12px;
      width: 14px;
      text-align: center;
      flex-shrink: 0
    }

    .mr-branch-name {
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--mr-text)
    }

    /* شارة الدور — لون حيوي حسب الدور */
    .mr-role-pill {
      display: inline-flex;
      align-items: center;
      padding: 5px 14px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      background: color-mix(in srgb, var(--rc) 14%, transparent);
      color: var(--rc);
      border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent);
      white-space: nowrap;
      line-height: 1.2
    }

    .mr-users-table .mr-role-pill::before {
      display: none
    }

    /* عمود الإجراءات */
    .mr-col-actions {
      white-space: nowrap
    }

    .mr-act-group {
      display: inline-flex;
      align-items: center;
      gap: 4px
    }

    .mr-act-btn {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: transparent;
      color: var(--mr-primary);
      border: 1px solid transparent;
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
      margin: 0 2px;
      font-size: 13px
    }

    .mr-act-btn:hover {
      transform: translateY(-1px)
    }

    .mr-act-edit:hover {
      background: rgba(0, 122, 255, 0.12);
      color: #007AFF;
      border-color: rgba(0, 122, 255, 0.35)
    }

    .mr-act-delete:hover {
      background: rgba(255, 0, 0, 0.12);
      color: #FF0000;
      border-color: rgba(255, 0, 0, 0.35)
    }

    .mr-act-btn:focus-visible {
      outline: 2px solid var(--mr-primary);
      outline-offset: 2px
    }