.users_page {
  --u-surface: #ffffff;
  --u-surface-2: #f6faf9;
  --u-surface-3: #eef4f3;
  --u-ink: #16241f;
  --u-ink-2: #33473f;
  --u-muted: #6b7f79;
  --u-line: #e4ecea;
  --u-line-soft: #eef3f2;
  --u-shadow: 0 1px 2px rgba(16, 40, 33, .05), 0 14px 30px -20px rgba(16, 40, 33, .35);
  --u-shadow-hover: 0 2px 4px rgba(16, 40, 33, .06), 0 18px 34px -18px rgba(16, 40, 33, .4);
  --u-teal: #0ca9a5;
  --u-teal-soft: #e4f7f6;
  --u-green: #129d6e;
  --u-green-soft: #e3f6ee;
  --u-amber: #b7791f;
  --u-amber-soft: #fdf3e0;
  --u-indigo: #1b4d3e;
  --u-indigo-soft: #e6efeb;
  --u-rose: #c2410c;
  --u-rose-soft: #fdeee5;
  --u-danger: #dc3545;
  --u-danger-strong: #b02a37;
  --u-danger-soft: #fdecee;
}

html[data-app-theme="dark"] .users_page {
  --u-surface: var(--tx-surface, #141e1a);
  --u-surface-2: var(--tx-surface-2, #1a2620);
  --u-surface-3: var(--tx-surface-3, #223029);
  --u-ink: var(--tx-ink, #e8f0ed);
  --u-ink-2: var(--tx-ink-2, #c2d2cb);
  --u-muted: var(--tx-muted, #8fa39c);
  --u-line: var(--tx-line, #24352e);
  --u-line-soft: var(--tx-line-soft, #1b2823);
  --u-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  --u-shadow-hover: 0 10px 30px rgba(0, 0, 0, .6);
  --u-teal: #34d399;
  --u-teal-soft: rgba(52, 211, 153, .14);
  --u-green: #34d399;
  --u-green-soft: rgba(52, 211, 153, .14);
  --u-amber: #ffc857;
  --u-amber-soft: rgba(255, 200, 87, .14);
  --u-indigo: #7bd1b6;
  --u-indigo-soft: rgba(123, 209, 182, .14);
  --u-rose: #ffa07a;
  --u-rose-soft: rgba(255, 160, 122, .14);
  --u-danger: #ff6b6b;
  --u-danger-strong: #ff8a8a;
  --u-danger-soft: rgba(255, 107, 107, .14);
}

/* --------------------------------------------------------------- heading */

.users_page .users_heading {
  height: auto;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
}

.users_page .users_heading_text h3 {
  margin-bottom: 2px;
  color: var(--u-ink);
}

.users_page .users_subtitle {
  margin: 0;
  font-size: 13.5px;
  color: var(--u-muted);
}

.users_page .users_heading_actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.users_page .users_btn_primary,
.users_page .users_btn_ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.users_page .users_btn_primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px -10px rgba(var(--primary-rgb), .85);
}

.users_page .users_btn_primary:hover:not(.disabled) {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(var(--primary-rgb), .95);
}

.users_page .users_btn_primary.disabled {
  opacity: .55;
  box-shadow: none;
  pointer-events: auto;
  cursor: not-allowed;
}

.users_page .users_btn_ghost {
  background: var(--u-surface);
  border-color: var(--u-line);
  color: var(--u-ink-2);
}

.users_page .users_btn_ghost:hover {
  background: var(--u-surface-2);
  border-color: var(--primary);
  color: var(--u-ink);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------ seat chip */
/* The seat cap is the only figure on this page that cannot be read off the
   table itself (it comes from the license package), so it rides along with
   the title instead of taking a full tile row. */

.users_page .users_heading_title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.users_page .users_seat_chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid var(--u-line);
  background: var(--u-surface-2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--u-muted);
  white-space: nowrap;
}

.users_page .users_seat_chip i {
  font-size: 12px;
  color: var(--primary);
}

.users_page .users_seat_chip strong {
  font-weight: 700;
  color: var(--u-ink);
}

.users_page .users_seat_chip_full {
  border-color: var(--u-amber);
  background: var(--u-amber-soft);
  color: var(--u-amber);
}

.users_page .users_seat_chip_full i,
.users_page .users_seat_chip_full strong {
  color: var(--u-amber);
}

.users_page .users_seat_meter {
  display: inline-block;
  width: 54px;
  height: 5px;
  border-radius: 99px;
  background: var(--u-surface-3);
  overflow: hidden;
}

.users_page .users_seat_fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
  transition: width .3s ease;
}

.users_page .users_seat_chip_full .users_seat_fill {
  background: var(--u-amber);
}

/* ----------------------------------------------------------------- card */

.users_page .users_card {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: 16px;
  box-shadow: var(--u-shadow);
  overflow: hidden;
}

.users_page .users_card_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--u-surface-2);
  border-bottom: 1px solid var(--u-line);
}

.users_page .users_card_header .card-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
  color: var(--u-ink);
}

.users_page .users_card_header .card-title i {
  color: var(--primary);
}

.users_page .users_card_hint {
  font-size: 12.5px;
  color: var(--u-muted);
}

.users_page .users_card_body {
  padding: 16px 20px 18px;
}

/* -------------------------------------------------- DataTables toolbar */

.users_page .users_card_search {
  margin-left: auto;
}

.users_page .dataTables_filter {
  margin-bottom: 6px;
}

.users_page .users_card_search .dataTables_filter {
  margin-bottom: 0;
}

.users_page .dataTables_filter label {
  font-size: 13px;
  font-weight: 600;
  color: var(--u-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.users_page .dataTables_filter input {
  border: 1px solid var(--u-line);
  border-radius: 10px;
  padding: 7px 12px;
  min-width: 230px;
  background: var(--u-surface);
  color: var(--u-ink);
  font-weight: 400;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.users_page .dataTables_filter input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
}

.users_page .dataTables_empty {
  padding: 32px 12px !important;
  color: var(--u-muted);
  font-style: italic;
}

/* ---------------------------------------------------------------- table */

.users_page .users_table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--u-ink);
}

.users_page .users_table thead th {
  background: var(--tx-thead);
  color: var(--tx-thead-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 14px;
  border: none;
  white-space: nowrap;
  vertical-align: middle;
}

.users_page .users_table thead th:first-child { border-radius: 10px 0 0 10px; }
.users_page .users_table thead th:last-child  { border-radius: 0 10px 10px 0; }

.users_page .users_table thead th.sorting:after,
.users_page .users_table thead th.sorting_asc:after,
.users_page .users_table thead th.sorting_desc:after,
.users_page .users_table thead th.sorting:before,
.users_page .users_table thead th.sorting_asc:before,
.users_page .users_table thead th.sorting_desc:before {
  color: var(--tx-thead-ink);
}

.users_page .users_table tbody td {
  padding: 12px 14px;
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid var(--u-line-soft);
  background: transparent;
  font-size: 14px;
}

.users_page .users_table tbody tr:last-child td {
  border-bottom: none;
}

.users_page .users_table tbody tr {
  transition: background .16s ease;
}

.users_page .users_table tbody tr:hover td {
  background: var(--u-surface-2);
}

/* ------------------------------------------------------------- identity */

.users_page .user_identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.users_page .user_avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  user-select: none;
}

.users_page .user_avatar_a { background: var(--u-teal-soft);   color: var(--u-teal); }
.users_page .user_avatar_b { background: var(--u-green-soft);  color: var(--u-green); }
.users_page .user_avatar_c { background: var(--u-amber-soft);  color: var(--u-amber); }
.users_page .user_avatar_d { background: var(--u-indigo-soft); color: var(--u-indigo); }
.users_page .user_avatar_e { background: var(--u-rose-soft);   color: var(--u-rose); }

.users_page .user_email {
  color: var(--u-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------ editable fields */

.users_page .user_field {
  color: var(--u-ink);
  font-size: 14px;
  border-radius: 8px;
  padding: 5px 8px;
  max-width: 190px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.users_page .user_field:disabled {
  color: var(--u-ink);
  opacity: 1;
  cursor: default;
}

.users_page input.user_field:disabled::placeholder {
  color: var(--u-muted);
  opacity: .8;
}

.users_page .user_field:not(:disabled) {
  background: var(--u-surface) !important;
  border: 1px solid var(--u-line) !important;
}

.users_page .user_field:not(:disabled):focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
}

.users_page select.user_role_select {
  text-transform: capitalize;
  font-weight: 600;
  width: auto;
  min-width: 108px;
}

.users_page select.user_role_select:disabled {
  background-image: none;
  padding: 4px 12px;
  border-radius: 99px;
  background-color: var(--u-indigo-soft) !important;
  color: var(--u-indigo);
  font-size: 12.5px;
  min-width: 0;
}

/* --------------------------------------------------------- state badges */

.users_page .user_badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.users_page .user_badge_active {
  background: var(--u-green-soft);
  color: var(--u-green);
}

.users_page .user_badge_inactive {
  background: var(--u-danger-soft);
  color: var(--u-danger);
}

.users_page .user_status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--u-muted);
}

.users_page .user_status_dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  background: currentColor;
}

.users_page .user_status_online {
  color: var(--u-green);
  font-weight: 600;
}

.users_page .user_status_online .user_status_dot {
  box-shadow: 0 0 0 0 rgba(18, 157, 110, .55);
  animation: users_pulse 2s infinite;
}

.users_page .user_status_never {
  color: var(--u-danger);
}

@keyframes users_pulse {
  70%  { box-shadow: 0 0 0 6px rgba(18, 157, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 157, 110, 0); }
}

/* -------------------------------------------------------------- actions */

.users_page .user_actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.users_page .user_icon_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.users_page .user_icon_btn:active {
  transform: scale(.94);
}

.users_page .user_icon_btn_edit {
  background: var(--u-teal-soft);
  border-color: transparent;
  color: var(--u-teal);
}

.users_page .user_icon_btn_edit:hover {
  background: var(--primary);
  color: #ffffff;
}

.users_page .user_icon_btn_delete {
  background: var(--u-danger-soft);
  border-color: transparent;
  color: var(--u-danger);
}

.users_page .user_icon_btn_delete:hover {
  background: var(--u-danger);
  color: #ffffff;
}

html[data-app-theme="dark"] .users_page .user_icon_btn_delete:hover {
  color: #2a0b0b;
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 991px) {
  .users_page .users_heading {
    align-items: flex-start;
  }

  .users_page .users_card_body {
    padding: 8px 12px 14px;
  }

  .users_page .dataTables_filter input {
    min-width: 0;
    width: 100%;
  }
}

/* ------------------------------------- dark-mode table reconciliation ---
   theme.css applies app-wide zebra striping and transparent cell borders to
   every table in dark mode; the users table keeps its own flat look so light
   and dark render identically. */

html[data-app-theme="dark"] .users_page .users_table,
html[data-app-theme="dark"] .users_page .users_table tbody tr:nth-child(even) {
  background-color: transparent;
  box-shadow: none;
}

html[data-app-theme="dark"] .users_page .users_table > :not(caption) > * > * {
  border-bottom-color: var(--u-line-soft);
}

html[data-app-theme="dark"] .users_page .users_table tbody tr:last-child > * {
  border-bottom-color: transparent;
}

html[data-app-theme="dark"] .users_page .users_table tbody tr:hover {
  background-color: var(--u-surface-2);
}

html[data-app-theme="dark"] .users_page .users_table thead th {
  box-shadow: none;
}

html[data-app-theme="dark"] .users_page .user_status_online .user_status_dot {
  animation: none;
}

/* Role pills are tinted per role so admins stand out at a glance. The tint
   only applies to the read-only state; once the row is being edited the
   select falls back to a normal form control. */

.users_page select.user_role_select.user_role_admin:disabled {
  background-color: var(--u-teal-soft) !important;
  color: var(--u-teal);
}

.users_page select.user_role_select.user_role_member:disabled {
  background-color: var(--u-surface-3) !important;
  color: var(--u-muted);
}

.users_page select.user_role_select.user_role_it_admin:disabled {
  background-color: var(--u-amber-soft) !important;
  color: var(--u-amber);
}

/* ==========================================================================
   Activity drawer
   ========================================================================== */

.users_page .user_icon_btn_activity {
  background: var(--u-indigo-soft);
  color: var(--u-indigo);
}

.users_page .user_icon_btn_activity:hover {
  background: var(--u-indigo);
  color: #ffffff;
}

html[data-app-theme="dark"] .users_page .user_icon_btn_activity:hover {
  color: #06231b;
}

/* common.css forces `display: block` on anything carrying .show, which would
   flatten the offcanvas's flex column and break the body's scroll. */
.user_activity_drawer.show,
.user_activity_drawer.showing {
  display: flex !important;
}

.user_activity_drawer {
  width: 440px;
  max-width: 92vw;
  background: var(--u-surface);
  color: var(--u-ink);
  border-left: 1px solid var(--u-line);
}

.user_activity_header {
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  background: var(--u-surface-2);
  border-bottom: 1px solid var(--u-line);
}

.user_activity_heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.user_activity_heading_text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user_activity_drawer .offcanvas-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--u-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user_activity_scope {
  font-size: 12px;
  color: var(--u-muted);
}

.user_activity_body {
  padding: 18px 20px 24px;
  overflow-y: auto;
}

.user_activity_state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 44px 16px;
  text-align: center;
  color: var(--u-muted);
  font-size: 13.5px;
}

.user_activity_state i {
  font-size: 26px;
  opacity: .55;
}

.user_activity_state p {
  margin: 0;
}

#activityError i {
  color: var(--u-amber);
  opacity: 1;
}

/* ------------------------------------------------------------- timeline */

.user_activity_day {
  margin-bottom: 22px;
}

.user_activity_day:last-child {
  margin-bottom: 0;
}

.user_activity_day_label {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--u-muted);
}

.user_activity_item {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 16px 0;
}

/* The rail joining consecutive entries, stopped short on the last one. */
.user_activity_item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 1px;
  background: var(--u-line);
}

.user_activity_icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border-radius: 50%;
  font-size: 12px;
  background: var(--u-surface-3);
  color: var(--u-muted);
}

.user_activity_icon.cat_project   { background: var(--u-teal-soft);   color: var(--u-teal); }
.user_activity_icon.cat_drawing   { background: var(--u-indigo-soft); color: var(--u-indigo); }
.user_activity_icon.cat_detection { background: var(--u-green-soft);  color: var(--u-green); }
.user_activity_icon.cat_export    { background: var(--u-amber-soft);  color: var(--u-amber); }
.user_activity_icon.cat_account   { background: var(--u-surface-3);   color: var(--u-muted); }
.user_activity_icon.cat_admin     { background: var(--u-rose-soft);   color: var(--u-rose); }

.user_activity_content {
  min-width: 0;
  padding-top: 4px;
}

.user_activity_text {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--u-ink);
  overflow-wrap: anywhere;
}

.user_activity_time {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--u-muted);
}

.user_activity_footnote {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--u-line-soft);
  font-size: 11.5px;
  color: var(--u-muted);
  text-align: center;
}

.user_activity_count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--u-surface-3);
  color: var(--u-muted);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.user_activity_header_actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.user_activity_refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--u-muted);
  font-size: 13px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.user_activity_refresh:hover {
  background: var(--u-teal-soft);
  color: var(--u-teal);
}

.user_activity_refresh:active {
  transform: scale(.92);
}

.user_activity_icon.cat_general { background: var(--u-surface-3); color: var(--u-muted); }

/* ---------------------------------------------------------- live updates */

.user_activity_meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.user_activity_live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px 1px 6px;
  border-radius: 99px;
  background: var(--u-green-soft);
  color: var(--u-green);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.user_activity_live_dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: users_live_pulse 1.8s ease-in-out infinite;
}

@keyframes users_live_pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

.user_activity_item.is_new .user_activity_content {
  animation: users_entry_in .9s ease-out;
  border-radius: 8px;
}

@keyframes users_entry_in {
  0%   { background: var(--u-teal-soft); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .user_activity_live_dot,
  .user_activity_item.is_new .user_activity_content {
    animation: none;
  }
}

/* ------------------------------------------------- before / after changes */

.user_activity_changes {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user_activity_change {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 7px;
  background: var(--u-surface-2);
  border: 1px solid var(--u-line-soft);
  font-size: 12px;
  line-height: 1.4;
}

.user_activity_change_field {
  font-weight: 700;
  color: var(--u-muted);
  flex: 0 0 auto;
}

.user_activity_change_old,
.user_activity_change_new {
  padding: 1px 6px;
  border-radius: 5px;
  overflow-wrap: anywhere;
}

.user_activity_change_old {
  background: var(--u-danger-soft);
  color: var(--u-danger);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.user_activity_change_new {
  background: var(--u-green-soft);
  color: var(--u-green);
  font-weight: 600;
}

.user_activity_change_arrow {
  color: var(--u-faint, var(--u-muted));
  flex: 0 0 auto;
}

.user_activity_more {
  align-self: flex-start;
  margin-top: 1px;
  padding: 3px 10px;
  border: 1px dashed var(--u-line);
  border-radius: 99px;
  background: transparent;
  color: var(--u-teal);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.user_activity_more:hover {
  background: var(--u-teal-soft);
  border-color: var(--u-teal);
  border-style: solid;
}

/* The popup listing every change behind a "+N more" */

.user_activity_changes_modal .modal-content {
  background: var(--u-surface);
  color: var(--u-ink);
  border: 1px solid var(--u-line);
}

.user_activity_changes_modal .modal-header {
  background: var(--u-surface-2);
  border-bottom: 1px solid var(--u-line);
}

.user_activity_changes_modal .modal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--u-ink);
}

.user_activity_changes_full {
  margin-top: 0;
}

.user_activity_icon.cat_config { background: var(--u-amber-soft); color: var(--u-amber); }