/* =====================================================================
   USER MANAGEMENT — BizMetry design system layer
   ---------------------------------------------------------------------
   One set of rules for every dialog of the User Management flow, so they
   look like the rest of the app (same patterns as the biz event wizards):
     .user-management-container-dialog   User Management (Users / Roles / SA tabs)
     .rep-dialog                         Select Roles & Permissions (role picker)
     .user-create-dialog / .user-edit-dialog
     .crd-dialog                         Create Role
   Loaded after their own stylesheets (index.html) so these win.

   Header 68px · icon 30px (no box) · title 19/600 · subtitle 12px
   Footer 68px · 2px #f0f0f0 top border · white
   Buttons 36px · radius 4px · 13/600 · no uppercase, no lift on hover
     primary  = brand gradient       secondary = white, 2px brand outline
     neutral  = #f5f5f5 / #e0e0e0    success / danger = solid semantic
   ===================================================================== */

:root {
  --um-gradient:   linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --um-primary:    #667eea;
  --um-text:       #2c3e50;
  --um-text-2:     #555;
  --um-muted:      #888;
  --um-border:     #e0e0e0;
  --um-surface-2:  #f5f5f5;
  --um-success:    #059669;
  --um-danger:     #e53e3e;
  --um-shadow-sm:  0 2px 6px rgba(102, 126, 234, 0.25);
  --um-shadow-md:  0 3px 12px rgba(102, 126, 234, 0.40);
}

/* ── Header ──────────────────────────────────────────────────────── */
.user-management-container-dialog .user-management-toolbar,
.rep-dialog .rep-toolbar,
.user-create-dialog .uc-toolbar,
.user-edit-dialog .ue-toolbar,
.crd-dialog .crd-toolbar {
  background: var(--um-gradient) !important;
  min-height: 68px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15) !important;
}

.user-management-container-dialog .user-management-toolbar .md-toolbar-tools,
.rep-dialog .rep-toolbar .md-toolbar-tools,
.user-create-dialog .uc-toolbar .md-toolbar-tools,
.user-edit-dialog .ue-toolbar .md-toolbar-tools,
.crd-dialog .crd-toolbar .md-toolbar-tools {
  height: 68px !important;
  min-height: 68px !important;
  padding: 0 24px !important;
  gap: 14px !important;
}

/* Icon: plain white glyph, no tile/box around it */
.user-management-container-dialog .header-icon-wrapper,
.rep-dialog .rep-toolbar-icon-wrap,
.user-create-dialog .uc-toolbar-icon-wrap,
.user-edit-dialog .ue-toolbar-icon-wrap,
.crd-dialog .crd-toolbar-icon-wrap {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.user-management-container-dialog .header-icon-wrapper md-icon,
.rep-dialog .rep-toolbar-icon-wrap md-icon,
.user-create-dialog .uc-toolbar-icon-wrap md-icon,
.user-edit-dialog .ue-toolbar-icon-wrap md-icon,
.crd-dialog .crd-toolbar-icon-wrap md-icon {
  color: white !important;
  font-size: 30px !important;
  width: 30px !important;
  height: 30px !important;
}

.user-management-container-dialog .title-main,
.rep-dialog .rep-title,
.user-create-dialog .uc-toolbar-info h2,
.user-edit-dialog .ue-toolbar-info h2,
.crd-dialog .crd-title {
  font-family: inherit !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: white !important;
  margin: 0 !important;
}

.user-management-container-dialog .title-subtitle,
.rep-dialog .rep-subtitle,
.user-create-dialog .uc-toolbar-subtitle,
.user-edit-dialog .ue-toolbar-subtitle,
.crd-dialog .crd-subtitle {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, .8) !important;
  margin: 2px 0 0 !important;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.user-management-container-dialog .dialog-footer,
.rep-dialog .rep-footer,
.user-create-dialog .uc-footer,
.user-edit-dialog .ue-footer,
.crd-dialog .crd-footer,
.user-management-container-dialog .rt-fixed-bottom {
  background: white !important;
  border-top: 2px solid #f0f0f0 !important;
  box-shadow: none !important;
  min-height: 68px !important;
  padding: 14px 24px !important;
  gap: 12px !important;
  align-items: center !important;
}

.user-management-container-dialog .footer-text,
.rep-dialog .rep-footer-hint,
.crd-dialog .crd-footer-hint {
  font-size: 12px !important;
  color: var(--um-muted) !important;
}

/* ── Buttons: geometry ───────────────────────────────────────────── */
.user-management-container-dialog .md-button:not(.md-icon-button):not(.md-fab),
.rep-dialog .md-button:not(.md-icon-button):not(.md-fab),
.user-create-dialog .md-button:not(.md-icon-button):not(.md-fab),
.user-edit-dialog .md-button:not(.md-icon-button):not(.md-fab),
.crd-dialog .md-button:not(.md-icon-button):not(.md-fab) {
  height: 36px !important;
  min-height: 36px !important;
  line-height: 36px !important;
  padding: 0 18px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  transform: none !important;
  transition: background .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.user-management-container-dialog .md-button:not(.md-icon-button) md-icon,
.rep-dialog .md-button:not(.md-icon-button) md-icon,
.user-create-dialog .md-button:not(.md-icon-button) md-icon,
.user-edit-dialog .md-button:not(.md-icon-button) md-icon,
.crd-dialog .md-button:not(.md-icon-button) md-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  color: inherit !important;
}

.user-management-container-dialog .md-button:not(.md-icon-button):hover,
.rep-dialog .md-button:not(.md-icon-button):hover,
.user-create-dialog .md-button:not(.md-icon-button):hover,
.user-edit-dialog .md-button:not(.md-icon-button):hover,
.crd-dialog .md-button:not(.md-icon-button):hover {
  transform: none !important;
}

/* ── Buttons: variants ───────────────────────────────────────────── */
/* primary — the main action of a dialog / tab */
.user-management-container-dialog .users-btn-primary,
.user-management-container-dialog .rt-btn-save,
.user-management-container-dialog .sa-btn-primary,
.rep-dialog .rep-btn-confirm,
.user-create-dialog .uc-btn-create,
.user-edit-dialog .ue-btn-save,
.crd-dialog .crd-btn-confirm {
  background: var(--um-gradient) !important;
  color: white !important;
  border: none !important;
  box-shadow: var(--um-shadow-sm) !important;
}

.user-management-container-dialog .users-btn-primary:hover:not([disabled]),
.user-management-container-dialog .rt-btn-save:hover:not([disabled]),
.user-management-container-dialog .sa-btn-primary:hover:not([disabled]),
.rep-dialog .rep-btn-confirm:hover:not([disabled]),
.user-create-dialog .uc-btn-create:hover:not([disabled]),
.user-edit-dialog .ue-btn-save:hover:not([disabled]),
.crd-dialog .crd-btn-confirm:hover:not([disabled]) {
  box-shadow: var(--um-shadow-md) !important;
  filter: brightness(1.05);
}

/* secondary — supporting actions (expand / collapse / new role / clear filters / add …) */
.user-management-container-dialog .users-btn-secondary,
.user-management-container-dialog .sa-btn-secondary,
.user-management-container-dialog .rt-btn-secondary,
.user-management-container-dialog .rt-btn-outline,
.user-management-container-dialog .rt-btn-add-perm,
.user-management-container-dialog .rt-btn-add-childrole,
.user-management-container-dialog .rt-btn-undo,
.rep-dialog .rep-action-btn--secondary,
.rep-dialog .rep-action-btn--outline,
.rep-dialog .rep-action-btn--green,
.rep-dialog .rep-action-btn--red,
.rep-dialog .rt-btn-secondary,
.user-create-dialog .uc-add-role-btn,
.user-edit-dialog .ue-add-role-btn,
.user-edit-dialog .ue-2fa-btn,
.user-edit-dialog .ue-ip-local-btn,
.user-edit-dialog .ue-ip-add-btn {
  background: white !important;
  color: var(--um-primary) !important;
  border: 2px solid var(--um-primary) !important;
  box-shadow: none !important;
}

.user-management-container-dialog .users-btn-secondary:hover:not([disabled]),
.user-management-container-dialog .sa-btn-secondary:hover:not([disabled]),
.user-management-container-dialog .rt-btn-secondary:hover:not([disabled]),
.user-management-container-dialog .rt-btn-outline:hover:not([disabled]),
.user-management-container-dialog .rt-btn-add-perm:hover:not([disabled]),
.user-management-container-dialog .rt-btn-add-childrole:hover:not([disabled]),
.user-management-container-dialog .rt-btn-undo:hover:not([disabled]),
.rep-dialog .rep-action-btn--secondary:hover:not([disabled]),
.rep-dialog .rep-action-btn--outline:hover:not([disabled]),
.rep-dialog .rep-action-btn--green:hover:not([disabled]),
.rep-dialog .rep-action-btn--red:hover:not([disabled]),
.rep-dialog .rt-btn-secondary:hover:not([disabled]),
.user-create-dialog .uc-add-role-btn:hover:not([disabled]),
.user-edit-dialog .ue-add-role-btn:hover:not([disabled]),
.user-edit-dialog .ue-2fa-btn:hover:not([disabled]),
.user-edit-dialog .ue-ip-local-btn:hover:not([disabled]),
.user-edit-dialog .ue-ip-add-btn:hover:not([disabled]) {
  background: rgba(102, 126, 234, .06) !important;
}

/* neutral — Cancel / Close */
.user-management-container-dialog .dialog-close-button,
.rep-dialog .rep-btn-cancel,
.user-create-dialog .uc-btn-cancel,
.user-edit-dialog .ue-btn-cancel,
.crd-dialog .crd-btn-cancel {
  background: var(--um-surface-2) !important;
  color: #666 !important;
  border: 1px solid var(--um-border) !important;
  box-shadow: none !important;
}

.user-management-container-dialog .dialog-close-button:hover,
.rep-dialog .rep-btn-cancel:hover,
.user-create-dialog .uc-btn-cancel:hover,
.user-edit-dialog .ue-btn-cancel:hover,
.crd-dialog .crd-btn-cancel:hover {
  background: #eaeaea !important;
}

/* bulk enable / disable keep their meaning, with the same geometry */
.user-management-container-dialog .users-btn-enable {
  background: white !important;
  color: var(--um-success) !important;
  border: 2px solid var(--um-success) !important;
  box-shadow: none !important;
}
.user-management-container-dialog .users-btn-disable {
  background: white !important;
  color: var(--um-danger) !important;
  border: 2px solid var(--um-danger) !important;
  box-shadow: none !important;
}

/* disabled — any variant */
.user-management-container-dialog .md-button:not(.md-icon-button)[disabled],
.rep-dialog .md-button:not(.md-icon-button)[disabled],
.user-create-dialog .md-button:not(.md-icon-button)[disabled],
.user-edit-dialog .md-button:not(.md-icon-button)[disabled],
.crd-dialog .md-button:not(.md-icon-button)[disabled] {
  opacity: .45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ── Tabs (User Management) ──────────────────────────────────────── */
.user-management-container-dialog md-tabs md-tab-item {
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* ── Inputs: same field look in every dialog ─────────────────────── */
.user-management-container-dialog input:not([type="checkbox"]):not([type="radio"]),
.rep-dialog input:not([type="checkbox"]):not([type="radio"]),
.user-create-dialog input:not([type="checkbox"]):not([type="radio"]),
.user-edit-dialog input:not([type="checkbox"]):not([type="radio"]),
.crd-dialog input:not([type="checkbox"]):not([type="radio"]),
.crd-dialog textarea,
.user-create-dialog textarea,
.user-edit-dialog textarea {
  font-family: inherit;
  font-size: 13px;
  color: var(--um-text);
}

/* ── Count pills / badges ────────────────────────────────────────── */
.user-management-container-dialog .tab-count {
  min-width: 20px;
  height: 18px;
  padding: 0 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
}

/* ── Tabs: inner dialogs too, and the brand colour for the active icon ─ */
/* md-dialog.<cls> + :not() — beats each dialog's own "md-dialog.<cls> .<x>-tabs-container md-tab-item" */
md-dialog.user-create-dialog md-tabs md-tab-item:not(.um-x):not(.um-y),
md-dialog.user-edit-dialog md-tabs md-tab-item:not(.um-x):not(.um-y),
md-dialog.user-create-dialog md-tabs md-tab-item:not(.um-x):not(.um-y) span,
md-dialog.user-edit-dialog md-tabs md-tab-item:not(.um-x):not(.um-y) span {
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.user-management-container-dialog md-tabs md-tab-item md-icon,
.user-create-dialog md-tabs md-tab-item md-icon,
.user-edit-dialog md-tabs md-tab-item md-icon {
  color: #9e9e9e !important;
}
.user-management-container-dialog md-tabs md-tab-item.md-active md-icon,
.user-create-dialog md-tabs md-tab-item.md-active md-icon,
.user-edit-dialog md-tabs md-tab-item.md-active md-icon {
  color: var(--um-primary) !important;
}

/* ── Search boxes: padding/border inside their width (were 28px too wide) ─ */
.user-management-container-dialog .rt-search-wrap,
.rep-dialog .rt-search-wrap {
  box-sizing: border-box !important;
  max-width: 100%;
}

/* ── Switches: brand colour instead of Angular Material's pink accent ─ */
.user-management-container-dialog md-switch.md-checked .md-thumb,
.user-create-dialog md-switch.md-checked .md-thumb,
.user-edit-dialog md-switch.md-checked .md-thumb {
  background-color: var(--um-primary) !important;
}
.user-management-container-dialog md-switch.md-checked .md-bar,
.user-create-dialog md-switch.md-checked .md-bar,
.user-edit-dialog md-switch.md-checked .md-bar {
  background-color: rgba(102, 126, 234, .45) !important;
}

/* ── Pagination buttons: no scale-up on hover (same as every other button) ─ */
.user-management-container-dialog .users-pagination-btn:hover,
.user-management-container-dialog .sa-pagination-btn:hover {
  transform: none !important;
}

/* ── Empty "no roles assigned" state: icon and text together, centred ─ */
.user-create-dialog .uc-roles-empty,
.user-edit-dialog .ue-roles-empty {
  justify-content: center !important;
  text-align: center;
  font-size: 13px !important;
}
.user-create-dialog .uc-roles-empty md-icon,
.user-edit-dialog .ue-roles-empty md-icon {
  margin: 0 !important;
}

/* ── Password "Auto-Generate": secondary action, not a green button ─ */
.user-create-dialog .bpi-generate-btn,
.user-edit-dialog .bpi-generate-btn {
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 4px !important;
  background: white !important;
  color: var(--um-primary) !important;
  border: 2px solid var(--um-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.user-create-dialog .bpi-generate-btn md-icon,
.user-edit-dialog .bpi-generate-btn md-icon {
  color: inherit !important;
}

/* ── Tabs never slide sideways ───────────────────────────────────────
   md-tabs lays every tab's content side by side (2-3x its width) inside an
   overflow:hidden box. Focus landing outside the visible part (e.g. when a
   sub-dialog opens) made the browser scroll that hidden box, shifting the
   whole tab ~350px to the left. overflow:clip can't be scrolled at all. */
.user-management-container-dialog md-tabs.user-management-tabs {
  overflow: clip !important;
}

/* ── Tab labels: icon + text centred on the full 48px height ────────────
   They sat on the text baseline inside a 16px content box (16px top/bottom
   padding), so a tab whose icon has different metrics ("people") sat 4px lower
   than the others. */
.user-management-container-dialog md-tabs md-tab-item,
.user-create-dialog md-tabs md-tab-item,
.user-edit-dialog md-tabs md-tab-item {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.user-management-container-dialog md-tabs md-tab-item > md-icon,
.user-create-dialog md-tabs md-tab-item > md-icon,
.user-edit-dialog md-tabs md-tab-item > md-icon {
  margin: 0 !important;
}