/* ============================================================
   LTE_USER_PROFILE.css  — Refined SaaS Edition
   Design: Google Workspace / Apple HIG inspired
   Key changes vs previous version:
   ·  Inline label + input on same row (grid, not stacked)
   ·  Two-column field layout for denser sections
   ·  Ghost inputs — border appears only on hover/focus
   ·  Section labels with left-pip + trailing rule
   ·  Smaller, quieter chrome — context bar, tabs, footer
   ·  Full dark-mode via --um-* token cascade
   ·  All selectors scoped to #umUserModal / #myProfileModal
============================================================ */

/* ─────────────────────────────────────────────────────────
   MODAL SHELL
───────────────────────────────────────────────────────── */
#umUserModal .modal-content,
#myProfileModal .modal-content {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.18) !important;
  overflow: hidden;
  background: var(--um-bg-modal) !important;
}

/* ─────────────────────────────────────────────────────────
   MODAL HEADER  — solid blue, compact
───────────────────────────────────────────────────────── */
#umUserModal .modal-header-blue,
#myProfileModal .modal-header-blue {
  background: #1a73e8 !important;
  padding: 13px 18px !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center;
  gap: 11px;
}

#umUserModal .modal-header-blue .up-hdr-icon,
#myProfileModal .modal-header-blue .up-hdr-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255,255,255,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#umUserModal .modal-header-blue .up-hdr-icon svg,
#myProfileModal .modal-header-blue .up-hdr-icon svg {
  width: 17px;
  height: 17px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.up-hdr-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.up-hdr-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff !important;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.up-hdr-sub {
  font-size: 11px;
  color: rgba(255,255,255,.60);
  font-family: 'SF Mono', 'JetBrains Mono', 'DM Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#umModalSubName,
#mpSubName {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,.58) !important;
  font-family: 'SF Mono', 'DM Mono', monospace;
}

#umUserModal .modal-header-blue .btn-close,
#myProfileModal .modal-header-blue .btn-close {
  filter: invert(1) opacity(.75) !important;
  transition: opacity .15s;
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 6px !important;
  padding: 4px !important;
}
#umUserModal .modal-header-blue .btn-close:hover,
#myProfileModal .modal-header-blue .btn-close:hover {
  filter: invert(1) opacity(1) !important;
}

/* ─────────────────────────────────────────────────────────
   CONTEXT BAR  — tight info strip
───────────────────────────────────────────────────────── */
#umEditContextBar,
#mpContextBar {
  background: #eef4fd !important;
  border: none !important;
  border-bottom: 1px solid #d1e3fa !important;
  border-radius: 0 !important;
  padding: 7px 18px !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#umCtxLoginId,
#mpCtxLoginId {
  font-size: 12px;
  font-weight: 700;
  color: #1a73e8 !important;
  font-family: 'SF Mono', 'DM Mono', monospace;
}

#umEditContextBar .text-muted,
#mpContextBar .text-muted {
  font-size: 11px;
  color: #9ca3af !important;
  font-family: 'SF Mono', 'DM Mono', monospace;
  margin-left: auto;
}

#umEditContextBar strong,
#mpContextBar strong {
  color: #6b7280 !important;
  font-weight: 600;
}

.dark-mode #umEditContextBar,
.dark-mode #mpContextBar {
  background: #1e2f50 !important;
  border-bottom-color: #2d4a7a !important;
}

.dark-mode #umCtxLoginId,
.dark-mode #mpCtxLoginId { color: #63a7f5 !important; }
.dark-mode #umEditContextBar .text-muted,
.dark-mode #mpContextBar .text-muted  { color: #6b7f9a !important; }
.dark-mode #umEditContextBar strong,
.dark-mode #mpContextBar strong       { color: #9ab0cc !important; }

/* ─────────────────────────────────────────────────────────
   TAB NAV  — underline style, compact
───────────────────────────────────────────────────────── */
#umUserModal .nav-tabs,
#myProfileModal .nav-tabs {
  background: var(--um-bg-modal) !important;
  border-bottom: 1px solid var(--um-border) !important;
  padding: 0 18px;
  gap: 0;
  flex-wrap: nowrap;
}

#umUserModal .nav-tabs .nav-link,
#myProfileModal .nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--um-text-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  letter-spacing: .005em;
}

#umUserModal .nav-tabs .nav-link svg,
#myProfileModal .nav-tabs .nav-link svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  flex-shrink: 0;
}

#umUserModal .nav-tabs .nav-link:hover,
#myProfileModal .nav-tabs .nav-link:hover {
  color: #374151 !important;
  background: transparent !important;
}

#umUserModal .nav-tabs .nav-link.active,
#myProfileModal .nav-tabs .nav-link.active {
  color: #1a73e8 !important;
  border-bottom-color: #1a73e8 !important;
  background: transparent !important;
  font-weight: 600;
}

.dark-mode #umUserModal .nav-tabs,
.dark-mode #myProfileModal .nav-tabs {
  background: var(--um-bg-modal) !important;
  border-bottom-color: var(--um-border) !important;
}
.dark-mode #umUserModal .nav-tabs .nav-link,
.dark-mode #myProfileModal .nav-tabs .nav-link { color: var(--um-text-muted) !important; }
.dark-mode #umUserModal .nav-tabs .nav-link:hover,
.dark-mode #myProfileModal .nav-tabs .nav-link:hover { color: #c9d8f0 !important; }
.dark-mode #umUserModal .nav-tabs .nav-link.active,
.dark-mode #myProfileModal .nav-tabs .nav-link.active {
  color: #63a7f5 !important;
  border-bottom-color: #63a7f5 !important;
}

/* ─────────────────────────────────────────────────────────
   TAB CONTENT AREA
───────────────────────────────────────────────────────── */
#umTabContent,
#myProfileModal .tab-content {
  background: var(--um-bg-modal-body) !important;
  padding: 18px 20px 20px;
  min-height: 320px;
}

.dark-mode #umTabContent,
.dark-mode #myProfileModal .tab-content { background: var(--um-bg-modal-body) !important; }

/* ─────────────────────────────────────────────────────────
   SECTION LABELS  — pip + trailing rule
───────────────────────────────────────────────────────── */
#umUserModal .um-section,
#myProfileModal .um-section {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--um-text-muted) !important;
  margin: 18px 0 8px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}

#umUserModal .um-section::before,
#myProfileModal .um-section::before {
  content: '';
  width: 3px;
  height: 11px;
  background: #1a73e8;
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-block;
}

#umUserModal .um-section::after,
#myProfileModal .um-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--um-border);
}

#umUserModal .um-section:first-child,
#myProfileModal .um-section:first-child { margin-top: 2px !important; }

.dark-mode #umUserModal .um-section::after,
.dark-mode #myProfileModal .um-section::after { background: var(--um-border); }

/* ─────────────────────────────────────────────────────────
   INLINE FIELD ROWS  — label + input on same line
   Uses a two-column grid: fixed label width + flex input
───────────────────────────────────────────────────────── */

/* Wrapper for a full-width field block */
.up-fields-block {
  background: var(--um-bg-modal) !important;
  border: 1px solid var(--um-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

/* Each label+input row */
.up-field-row {
  display: grid;
  grid-template-columns: 118px 1fr;
  align-items: center;
  min-height: 38px;
  border-bottom: 1px solid var(--um-border);
  transition: background .12s;
}
.up-field-row:last-child { border-bottom: none; }
.up-field-row:hover      { background: var(--um-bg-modal-body); }

.up-field-row.up-field-textarea {
  align-items: flex-start;
}

/* Label cell */
.up-field-lbl {
  font-size: 12px;
  font-weight: 500;
  color: var(--um-text-label);
  padding: 0 12px;
  line-height: 1.35;
  flex-shrink: 0;
  user-select: none;
  border-right: 1px solid var(--um-border);
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Input cell */
.up-field-val {
  padding: 0 2px;
  display: flex;
  align-items: center;
}

.up-field-val input,
.up-field-val select {
  width: 100%;
  font-size: 12.5px;
  color: var(--um-text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 9px;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
  font-family: inherit;
  height: 34px;
  margin: 2px;
}

.up-field-val input::placeholder { color: var(--um-text-muted); }

.up-field-val input:hover,
.up-field-val select:hover {
  border-color: var(--um-border-input);
  background: var(--um-bg-input);
}

.up-field-val input:focus,
.up-field-val select:focus {
  border-color: #1a73e8;
  background: var(--um-bg-input-focus);
  box-shadow: 0 0 0 3px rgba(26,115,232,.12);
}

/* Textarea inside row */
.up-field-val textarea {
  width: 100%;
  font-size: 12.5px;
  color: var(--um-text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 9px;
  outline: none;
  resize: none;
  min-height: 66px;
  line-height: 1.5;
  transition: border-color .15s, background .15s, box-shadow .15s;
  font-family: inherit;
  margin: 3px 2px;
}
.up-field-val textarea:hover { border-color: var(--um-border-input); background: var(--um-bg-input); }
.up-field-val textarea:focus { border-color: #1a73e8; background: var(--um-bg-input-focus); box-shadow: 0 0 0 3px rgba(26,115,232,.12); }

/* Read-only text value (e.g. login ID) */
.up-field-val .up-val-text {
  font-size: 12.5px;
  color: var(--um-text-primary);
  padding: 6px 10px;
  font-family: 'SF Mono', 'DM Mono', monospace;
}

.up-field-val .up-val-text.muted { color: var(--um-text-muted); }

/* Dark mode field rows */
.dark-mode .up-fields-block {
  background: var(--um-bg-modal) !important;
  border-color: var(--um-border);
}
.dark-mode .up-field-row:hover { background: var(--um-bg-card-alt); }
.dark-mode .up-field-lbl       { border-right-color: var(--um-border); }
.dark-mode .up-field-val input,
.dark-mode .up-field-val select,
.dark-mode .up-field-val textarea {
  color: var(--um-text-primary);
}
.dark-mode .up-field-val input:focus,
.dark-mode .up-field-val select:focus,
.dark-mode .up-field-val textarea:focus {
  border-color: #63a7f5;
  box-shadow: 0 0 0 3px rgba(99,167,245,.15);
}

/* ─────────────────────────────────────────────────────────
   TWO-COLUMN FIELD GRID  — side-by-side blocks
───────────────────────────────────────────────────────── */
.up-fields-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.up-fields-2col .up-fields-block {
  margin-bottom: 0;
}

/* On small screens collapse to 1 column */
@media (max-width: 640px) {
  .up-fields-2col {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────
   STAFF TAGS
───────────────────────────────────────────────────────── */
.up-staff-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  padding: 8px 2px 4px;
}

.up-staff-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 10px;
  border-radius: 20px;
  background: #e8f0fe;
  border: 1px solid rgba(26,115,232,.2);
  font-size: 11.5px;
  font-weight: 600;
  color: #1a73e8;
  cursor: default;
  transition: background .15s;
}
.up-staff-tag:hover { background: #d2e3fc; }

.up-tag-x {
  cursor: pointer;
  opacity: .55;
  font-size: 12px;
  line-height: 1;
  transition: opacity .12s;
}
.up-tag-x:hover { opacity: 1; }

/* Badge wrapper used by existing JS */
#upStaffTags .badge {
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 20px;
  background: #e8f0fe;
  color: #1a73e8;
  border: 1px solid rgba(26,115,232,.2);
  font-weight: 600;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dark-mode .up-staff-tag,
.dark-mode #upStaffTags .badge {
  background: rgba(26,115,232,.15);
  border-color: rgba(99,167,245,.25);
  color: #63a7f5;
}

/* Add staff input inline */
#upStaffInput {
  font-size: 11.5px !important;
  border: 1px dashed var(--um-border-input) !important;
  border-radius: 20px !important;
  padding: 3px 12px !important;
  height: 28px !important;
  min-width: 130px;
  background: transparent !important;
  color: var(--um-text-primary) !important;
  transition: border-color .15s !important;
}
#upStaffInput:focus { border-color: #1a73e8 !important; box-shadow: 0 0 0 3px rgba(26,115,232,.1) !important; }

#upStaffAddBtn {
  font-size: 11.5px !important;
  padding: 3px 12px !important;
  height: 28px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(26,115,232,.35) !important;
  color: #1a73e8 !important;
  background: transparent !important;
  font-weight: 600 !important;
  transition: all .15s !important;
}
#upStaffAddBtn:hover { background: #e8f0fe !important; border-color: #1a73e8 !important; }
.dark-mode #upStaffAddBtn { border-color: rgba(99,167,245,.35) !important; color: #63a7f5 !important; }
.dark-mode #upStaffAddBtn:hover { background: rgba(26,115,232,.15) !important; }

/* ─────────────────────────────────────────────────────────
   LEGACY .um-lbl (used in Account tab)
───────────────────────────────────────────────────────── */
#umUserModal .um-lbl,
#myProfileModal .um-lbl {
  font-size: 12px;
  font-weight: 500;
  color: var(--um-text-label);
  margin-bottom: 4px;
  display: block;
}
.dark-mode #umUserModal .um-lbl,
.dark-mode #myProfileModal .um-lbl { color: var(--um-text-label); }

/* ─────────────────────────────────────────────────────────
   FORM CONTROLS (Account tab uses .form-group-inline stacks)
───────────────────────────────────────────────────────── */
#umUserModal .form-control,
#umUserModal .form-select,
#myProfileModal .form-control,
#myProfileModal .form-select {
  height: 36px;
  font-size: 13px;
  padding: 6px 11px;
  border: 1px solid var(--um-border-input);
  border-radius: 8px;
  background: var(--um-bg-input);
  color: var(--um-text-input);
  transition: border-color .15s, box-shadow .15s, background .15s;
  font-family: inherit;
}

#umUserModal textarea.form-control,
#myProfileModal textarea.form-control {
  height: auto;
  min-height: 68px;
  padding: 8px 11px;
  resize: none;
  line-height: 1.5;
}

#umUserModal .form-control:focus,
#umUserModal .form-select:focus,
#myProfileModal .form-control:focus,
#myProfileModal .form-select:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26,115,232,.12);
  background: var(--um-bg-input-focus);
  outline: none;
}

#umUserModal .form-control:disabled,
#myProfileModal .form-control:disabled {
  background: var(--um-bg-card-alt);
  color: var(--um-text-muted);
  border-color: var(--um-border);
  cursor: not-allowed;
  opacity: .85;
}

.dark-mode #umUserModal .form-control,
.dark-mode #umUserModal .form-select,
.dark-mode #myProfileModal .form-control,
.dark-mode #myProfileModal .form-select {
  background: var(--um-bg-input);
  border-color: var(--um-border-input);
  color: var(--um-text-input);
}
.dark-mode #umUserModal .form-control:focus,
.dark-mode #umUserModal .form-select:focus,
.dark-mode #myProfileModal .form-control:focus,
.dark-mode #myProfileModal .form-select:focus {
  border-color: #63a7f5;
  box-shadow: 0 0 0 3px rgba(99,167,245,.15);
  background: var(--um-bg-input-focus);
}
.dark-mode #umUserModal .form-control:disabled,
.dark-mode #myProfileModal .form-control:disabled {
  background: var(--um-bg-card-alt);
  color: var(--um-text-muted);
}

/* ─────────────────────────────────────────────────────────
   INLINE PERMISSION TABLE (Tab 2)
───────────────────────────────────────────────────────── */
#inlinePermContent .perm-table-wrap,
#mpPermContent .perm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--um-border);
  border-radius: 8px;
}

#inlinePermContent .perm-table,
#mpPermContent .perm-table {
  min-width: 480px;
  font-size: 12px;
}

#inlinePermContent .perm-table thead th,
#mpPermContent .perm-table thead th {
  background: #1a73e8;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 8px 12px;
  text-align: center;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.2);
  white-space: nowrap;
}

#inlinePermContent .perm-table thead th:first-child,
#mpPermContent .perm-table thead th:first-child {
  text-align: left;
  background: #0d47a1;
  min-width: 140px;
}

#inlinePermContent .perm-table tbody td,
#mpPermContent .perm-table tbody td {
  padding: 7px 12px;
  border: none;
  border-bottom: 1px solid var(--um-border);
  text-align: center;
  vertical-align: middle;
  background: var(--um-bg-perm-row);
}

#inlinePermContent .perm-table tbody tr:nth-child(odd) td,
#mpPermContent .perm-table tbody tr:nth-child(odd) td { background: var(--um-bg-perm-row-alt); }

#inlinePermContent .perm-table tbody tr:hover td,
#mpPermContent .perm-table tbody tr:hover td { background: var(--um-bg-perm-hover) !important; }

#inlinePermContent .perm-table tbody td:first-child,
#mpPermContent .perm-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--um-text-primary);
}

#inlinePermContent .perm-table tbody tr:last-child td,
#mpPermContent .perm-table tbody tr:last-child td { border-bottom: none; }

#inlinePermContent .perm-table input[type="checkbox"],
#mpPermContent .perm-table input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #1a73e8;
}

#inlinePermBulkRow { padding-top: 8px; }
#inlinePermBulkRow a { font-size: 12px; font-weight: 600; text-decoration: none; transition: opacity .15s; }
#inlinePermBulkRow a:hover { opacity: .7; text-decoration: underline; }

.dark-mode #inlinePermContent .perm-table tbody td,
.dark-mode #mpPermContent .perm-table tbody td { border-bottom-color: var(--um-border); }

/* ─────────────────────────────────────────────────────────
   MODAL FOOTER  — clean split
───────────────────────────────────────────────────────── */
#umUserModal .modal-footer,
#myProfileModal .modal-footer {
  background: var(--um-bg-modal) !important;
  border-top: 1px solid var(--um-border) !important;
  padding: 11px 18px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Save profile — outline success */
#umSaveProfileBtn,
#mpSaveProfileBtn {
  min-height: 34px;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #86efac !important;
  color: #166534 !important;
  background: transparent !important;
  transition: all .15s ease;
}
#umSaveProfileBtn:hover,
#mpSaveProfileBtn:hover { background: #f0fdf4 !important; border-color: #4ade80 !important; }
.dark-mode #umSaveProfileBtn,
.dark-mode #mpSaveProfileBtn { border-color: rgba(74,222,128,.4) !important; color: #4ade80 !important; }
.dark-mode #umSaveProfileBtn:hover,
.dark-mode #mpSaveProfileBtn:hover { background: rgba(74,222,128,.1) !important; }

/* Primary save */
#umSaveBtn,
#mpSaveAccountBtn {
  min-height: 34px;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1a73e8 !important;
  border: 1px solid #1a73e8 !important;
  color: #fff !important;
  transition: all .15s ease;
}
#umSaveBtn:hover,
#mpSaveAccountBtn:hover {
  background: #1557b0 !important;
  border-color: #1557b0 !important;
}
#umSaveBtn:active,
#mpSaveAccountBtn:active { transform: scale(.98); }

/* Cancel */
#umUserModal .btn.btn-secondary,
#myProfileModal .btn.btn-secondary {
  min-height: 34px;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent !important;
  border: 1px solid var(--um-border-input) !important;
  color: var(--um-text-secondary) !important;
  transition: all .15s ease;
}
#umUserModal .btn.btn-secondary:hover,
#myProfileModal .btn.btn-secondary:hover {
  background: var(--um-bg-modal-body) !important;
  border-color: #9ca3af !important;
}

/* Suspend / Reset PW */
#umSuspendBtn,
#umResetPwBtn {
  min-height: 34px;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s ease;
}

/* Unlock */
#umUnlockBtn {
  min-height: 34px;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #fcd34d !important;
  color: #92400e !important;
  background: transparent !important;
  transition: all .15s;
}
#umUnlockBtn:hover { background: #fffbeb !important; color: #78350f !important; border-color: #f59e0b !important; }
.dark-mode #umUnlockBtn { border-color: rgba(252,211,77,.4) !important; color: #fcd34d !important; }
.dark-mode #umUnlockBtn:hover { background: rgba(252,211,77,.08) !important; }

/* ─────────────────────────────────────────────────────────
   PASSWORD STRENGTH (Account tab)
───────────────────────────────────────────────────────── */
#mpPwStrengthBar {
  height: 3px;
  border-radius: 2px;
  margin-top: 5px;
  transition: width .35s ease, background .35s ease;
  width: 0;
  background: transparent;
}
#mpPwStrengthLabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--um-text-muted);
  margin-top: 3px;
  min-height: 13px;
}
#permLastSaved,
#mpLastSaved {
  font-size: 11px;
  color: var(--um-text-muted);
  font-family: 'SF Mono', 'DM Mono', monospace;
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  #umUserModal .nav-tabs .nav-link,
  #myProfileModal .nav-tabs .nav-link { padding: 9px 10px; font-size: 12px; }

  #umTabContent,
  #myProfileModal .tab-content { padding: 14px; }

  #umUserModal .modal-footer,
  #myProfileModal .modal-footer { flex-wrap: wrap; gap: 6px; }

  .up-field-row {
    grid-template-columns: 95px 1fr;
  }
}