/*
 * Uniting CRM visual foundation.
 *
 * This file is intentionally source-driven. Values mirror:
 *   frontend/src/theme/colors.css
 *   frontend/src/theme/tailwind-preset.js
 *   frontend/src/theme/base.css
 * in the authorized Uniting repository. Page modules should consume these
 * tokens instead of introducing independent palette, radius, shadow or type
 * values.
 */

:root {
  color-scheme: light;

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --text-2xs-size: 11px;
  --text-2xs-line: 1.35;
  --text-xs-size: 12px;
  --text-xs-line: 1.35;
  --text-sm-size: 13px;
  --text-sm-line: 1.4;
  --text-base-size: 14px;
  --text-base-line: 1.4;
  --text-lg-size: 16px;
  --text-lg-line: 1.4;
  --text-xl-size: 18px;
  --text-xl-line: 1.35;
  --text-2xl-size: 20px;
  --text-2xl-line: 1.3;
  --text-3xl-size: 24px;
  --text-3xl-line: 1.25;

  /* Primary palette */
  --gray-50: #F8F9FB;
  --gray-100: #F1F3F5;
  --gray-200: #E8EAED;
  --gray-300: #DEE1E5;
  --gray-400: #C1C7CD;
  --gray-500: #8D939B;
  --gray-600: #6B7280;
  --gray-700: #4B5563;
  --gray-800: #333B47;
  --gray-900: #111827;
  --blue-50: #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;
  --green-50: #F0FDF4;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-300: #86EFAC;
  --green-400: #4ADE80;
  --green-500: #22C55E;
  --green-600: #16A34A;
  --green-700: #15803D;
  --green-800: #166534;
  --green-900: #14532D;
  --red-50: #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --red-900: #7F1D1D;
  --amber-50: #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-900: #78350F;
  --orange-50: #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-200: #FED7AA;
  --orange-300: #FDBA74;
  --orange-400: #FB923C;
  --orange-500: #F97316;
  --orange-600: #EA580C;
  --orange-700: #C2410C;
  --orange-800: #9A3412;
  --orange-900: #7C2D12;
  --teal-50: #F0FDFA;
  --teal-100: #CCFBF1;
  --teal-200: #99F6E4;
  --teal-300: #5EEAD4;
  --teal-400: #2DD4BF;
  --teal-500: #14B8A6;
  --teal-600: #0D9488;
  --teal-700: #0F766E;
  --teal-800: #115E59;
  --teal-900: #134E4A;
  --cyan-50: #ECFEFF;
  --cyan-100: #CFFAFE;
  --cyan-200: #A5F3FC;
  --cyan-300: #67E8F9;
  --cyan-400: #22D3EE;
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;
  --cyan-700: #0E7490;
  --cyan-800: #155E75;
  --cyan-900: #164E63;
  --violet-50: #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-800: #5B21B6;
  --violet-900: #4C1D95;
  --pink-50: #FDF2F8;
  --pink-100: #FCE7F3;
  --pink-200: #FBCFE8;
  --pink-300: #F9A8D4;
  --pink-400: #F472B6;
  --pink-500: #EC4899;
  --pink-600: #DB2777;
  --pink-700: #BE185D;
  --pink-800: #9D174D;
  --pink-900: #831843;

  /* Uniting application and brand colors */
  --app-canvas: #F1F3F5;
  --crm-primary: #2563EB;
  --crm-accent: #06B6D4;
  --uniting-blue: #1473F9;
  --uniting-cyan: #15CFE0;
  --uniting-navy: #0A1C3F;
  --uniting-navy-2: #12294F;

  /* Semantic outlines */
  --outline-white: #FFFFFF;
  --outline-gray-1: #E8EAED;
  --outline-gray-2: #DEE1E5;
  --outline-gray-3: #C1C7CD;
  --outline-gray-4: #8D939B;
  --outline-gray-5: #333B47;
  --outline-red-1: #FCA5A5;
  --outline-red-2: #F87171;
  --outline-red-3: #EF4444;
  --outline-green-1: #86EFAC;
  --outline-green-2: #4ADE80;
  --outline-amber-1: #FCD34D;
  --outline-amber-2: #FBBF24;
  --outline-blue-1: #93C5FD;
  --outline-orange-1: #FB923C;
  --outline-gray-modals: #E8EAED;

  /* Semantic surfaces */
  --surface-white: #FFFFFF;
  --surface-gray-1: #F8F9FB;
  --surface-gray-2: #F1F3F5;
  --surface-gray-3: #E8EAED;
  --surface-gray-4: #DEE1E5;
  --surface-gray-5: #4B5563;
  --surface-gray-6: #333B47;
  --surface-gray-7: #111827;
  --surface-red-1: #FEF2F2;
  --surface-red-2: #FEE2E2;
  --surface-red-3: #FECACA;
  --surface-red-4: #FCA5A5;
  --surface-red-5: #DC2626;
  --surface-red-6: #B91C1C;
  --surface-red-7: #991B1B;
  --surface-green-1: #F0FDF4;
  --surface-green-2: #DCFCE7;
  --surface-green-3: #16A34A;
  --surface-amber-1: #FFFBEB;
  --surface-amber-2: #FEF3C7;
  --surface-amber-3: #D97706;
  --surface-blue-1: #EFF6FF;
  --surface-blue-2: #DBEAFE;
  --surface-blue-3: #2563EB;
  --surface-orange-1: #FFEDD5;
  --surface-violet-1: #EDE9FE;
  --surface-cyan-1: #CFFAFE;
  --surface-pink-1: #FCE7F3;
  --surface-menu-bar: #F8F9FB;
  --surface-cards: #FFFFFF;
  --surface-modal: #FFFFFF;
  --surface-selected: #FFFFFF;
  --surface-subtle: var(--surface-gray-1);

  /* Semantic ink */
  --ink-white: #FFFFFF;
  --ink-gray-1: #E8EAED;
  --ink-gray-2: #DEE1E5;
  --ink-gray-3: #C1C7CD;
  --ink-gray-4: #8D939B;
  --ink-gray-5: #6B7280;
  --ink-gray-6: #4B5563;
  --ink-gray-7: #4B5563;
  --ink-gray-8: #333B47;
  --ink-gray-9: #111827;
  --ink-red-2: #F87171;
  --ink-red-3: #EF4444;
  --ink-red-4: #DC2626;
  --ink-green-2: #22C55E;
  --ink-green-3: #16A34A;
  --ink-amber-2: #F59E0B;
  --ink-amber-3: #D97706;
  --ink-blue-2: #3B82F6;
  --ink-blue-3: #2563EB;
  --ink-cyan-1: #06B6D4;
  --ink-pink-1: #EC4899;
  --ink-violet-1: #8B5CF6;
  --ink-blue-link: #60A5FA;

  /* Radius scale */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Elevation scale */
  --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.06);
  --shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.06), 0px 8px 16px -4px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 12px 28px -4px rgba(0, 0, 0, 0.1);

  /* Fixed desktop application geometry */
  --crm-sidebar-width: 72px;
  --crm-sidebar-logo-height: 64px;
  --crm-sidebar-control-size: 40px;
  --crm-sidebar-icon-size: 25px;
  --crm-sidebar-utility-icon-size: 22px;
  --crm-sidebar-radius: 16px;

  /* Shared control sizing from Button.vue, Input.vue and Select.vue. */
  --control-sm-height: 28px;
  --control-md-height: 32px;
  --control-lg-height: 40px;
  --control-xl-height: 46px;
  --control-2xl-height: 52px;
  --control-sm-padding-x: 8px;
  --control-md-padding-x: 10px;
  --control-lg-padding-x: 12px;
  --control-xl-padding-x: 14px;
  --control-gap: 8px;
  --control-icon-sm: 14px;
  --menu-row-height: 28px;
}

html,
body,
#app {
  font-family: var(--font-family);
  font-optical-sizing: auto;
  background-color: var(--app-canvas);
}

body {
  color: var(--ink-gray-9);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Uniting applies the Inter variable-font optical axis to every UI primitive. */
html,
body,
button,
p,
span,
div,
input,
select,
textarea {
  font-variation-settings: "opsz" 24;
}

/* Uniting paints the Kanban viewport itself instead of relying on body bleed. */
#kanban-board-scroll {
  background: var(--app-canvas) !important;
}

/* The source application uses the same thin scrollbar globally. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(156, 163, 175, 0.3);
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.5);
}

.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Native equivalents of Uniting's shared form primitives. */
.form-input,
.form-textarea,
.form-select {
  box-sizing: border-box;
  height: 28px;
  border: 1px solid var(--surface-gray-2);
  border-radius: var(--radius);
  background: var(--surface-gray-2);
  padding: 6px 8px;
  color: var(--ink-gray-8);
  font: 400 var(--text-base-size)/var(--text-base-line) var(--font-family);
  letter-spacing: 0.005em;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.form-input::placeholder,
.form-textarea::placeholder,
.form-select::placeholder {
  color: var(--ink-gray-4);
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: var(--outline-gray-modals);
  background: var(--surface-gray-3);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--surface-gray-2);
  outline: none;
  background: var(--surface-white);
  box-shadow: none;
}

.form-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid var(--outline-gray-3);
  border-radius: var(--radius);
  background: var(--surface-gray-2);
  accent-color: var(--ink-blue-2);
}

/* Source-accurate rail geometry. It does not shrink at shorter heights. */
.app-sidebar {
  --sb-logo-h: var(--crm-sidebar-logo-height) !important;
  --sb-logo-size: 32px !important;
  --sb-btn-size: var(--crm-sidebar-control-size) !important;
  --sb-icon-size: var(--crm-sidebar-icon-size) !important;
  --sb-nav-gap: 6px !important;
  --sb-nav-pad-y: 8px !important;
  --sb-bottom-pad-b: 16px !important;
  --sb-bottom-gap: 8px !important;
  width: var(--crm-sidebar-width) !important;
  min-width: var(--crm-sidebar-width) !important;
  border-right-color: var(--gray-100) !important;
  background: var(--surface-white) !important;
}

.sidebar-logo-container {
  height: var(--crm-sidebar-logo-height) !important;
  min-height: var(--crm-sidebar-logo-height) !important;
  border-bottom-color: var(--gray-100) !important;
}

.sidebar-logo-btn { width: 52px; height: 52px; }
.sidebar-logo-btn .sidebar-brand-symbol {
  display: block;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain;
}
.sidebar-logo-btn .sidebar-brand-lockup { display: none; }
@media (max-width: 639px) {
  .app-sidebar { width: 260px !important; max-width: 86vw !important; align-items: stretch !important; }
  .sidebar-logo-btn { height: 64px !important; }
  .sidebar-logo-btn .sidebar-brand-symbol { display: none; }
  .sidebar-logo-btn .sidebar-brand-lockup {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
}

.sidebar-nav {
  gap: 6px !important;
  padding: 8px 12px !important;
}

.sidebar-bottom {
  gap: 8px !important;
  padding: 12px 12px 16px !important;
}

.sidebar-btn {
  width: var(--crm-sidebar-control-size) !important;
  height: var(--crm-sidebar-control-size) !important;
  min-width: var(--crm-sidebar-control-size) !important;
  min-height: var(--crm-sidebar-control-size) !important;
  border-radius: var(--crm-sidebar-radius) !important;
}

.sidebar-btn svg,
.sidebar-btn .sidebar-mask-icon {
  width: var(--crm-sidebar-icon-size) !important;
  height: var(--crm-sidebar-icon-size) !important;
  max-width: var(--crm-sidebar-icon-size) !important;
  max-height: var(--crm-sidebar-icon-size) !important;
}

.sidebar-bottom .sidebar-btn svg {
  width: var(--crm-sidebar-utility-icon-size) !important;
  height: var(--crm-sidebar-utility-icon-size) !important;
}

.sidebar-btn .sidebar-logout-icon {
  width: 25px !important;
  height: 25px !important;
  opacity: 0.28 !important;
}

.sidebar-notif-dot {
  top: 6px !important;
  right: 6px !important;
  width: 8px !important;
  height: 8px !important;
}

/* Settings dialog geometry from Settings.vue + Dialog.vue. */
#settings-modal-overlay {
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.4);
  padding: 16px !important;
}

#settings-modal-overlay.settings-is-open {
  animation: settings-overlay-in 150ms ease-out both;
}

#settings-modal-overlay.settings-is-closing {
  pointer-events: none;
  animation: settings-overlay-out 150ms ease-in both;
}

#settings-modal-overlay.settings-is-closing .settings-dialog {
  animation: settings-dialog-out 150ms ease-in both !important;
}

#settings-modal-container {
  width: min(1024px, calc(100vw - 32px)) !important;
  max-width: 1024px !important;
  margin: 32px 0 !important;
}

.settings-dialog {
  position: relative !important;
  width: 100% !important;
  height: calc(100vh - 128px) !important;
  min-height: 0 !important;
  max-height: calc(100vh - 128px) !important;
  border: 0 !important;
  border-radius: var(--radius-xl) !important;
  background: var(--surface-white) !important;
  box-shadow: var(--shadow-xl) !important;
}

.settings-sidebar {
  width: 208px !important;
  flex: 0 0 208px !important;
  border-right: 1px solid var(--outline-gray-1) !important;
  background: var(--surface-white) !important;
  padding: 12px 8px 4px !important;
}

.settings-group-divider {
  height: 1px !important;
  margin: 8px 4px !important;
  background: var(--outline-gray-1) !important;
}

.settings-group-label {
  padding: 4px 8px 6px !important;
  color: var(--gray-400) !important;
  font-size: var(--text-xs-size) !important;
  font-weight: 600 !important;
  line-height: var(--text-xs-line) !important;
  letter-spacing: 0.05em !important;
}

.settings-nav-list {
  gap: 2px !important;
}

.settings-nav-item {
  min-height: 0 !important;
  height: auto !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  border-radius: var(--radius-lg) !important;
  color: var(--gray-500) !important;
  font-size: var(--text-sm-size) !important;
  font-weight: 500 !important;
  line-height: var(--text-sm-line) !important;
}

.settings-nav-item:hover {
  background: var(--surface-gray-2) !important;
  color: var(--gray-700) !important;
}

.settings-nav-item.is-active {
  background: var(--surface-white) !important;
  color: var(--crm-primary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
}

.settings-nav-avatar {
  display: inline-flex !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.settings-nav-avatar[data-avatar-tone="0"] { background: #e8f0fe !important; color: #2563eb !important; }
.settings-nav-avatar[data-avatar-tone="1"] { background: #e5f7ec !important; color: #15803d !important; }
.settings-nav-avatar[data-avatar-tone="2"] { background: #fff4cc !important; color: #a16207 !important; }
.settings-nav-avatar[data-avatar-tone="3"] { background: #f1e8ff !important; color: #7c3aed !important; }
.settings-nav-avatar[data-avatar-tone="4"] { background: #ffe7ef !important; color: #be185d !important; }
.settings-nav-avatar[data-avatar-tone="5"] { background: #dff7f1 !important; color: #0f766e !important; }
.settings-nav-avatar[data-avatar-tone="6"] { background: #ffead5 !important; color: #c2410c !important; }
.settings-nav-avatar[data-avatar-tone="7"] { background: #e5e7eb !important; color: #4b5563 !important; }

.settings-form [data-invite-scope][hidden] {
  display: none !important;
}

.settings-content {
  padding: 32px !important;
  background: var(--surface-modal) !important;
  color: var(--ink-gray-8) !important;
}

.settings-content-header {
  min-height: 0 !important;
  margin: 0 0 32px !important;
}

.settings-content-header h2 {
  display: flex !important;
  height: 20px !important;
  align-items: center !important;
  color: var(--ink-gray-8) !important;
  font-size: var(--text-xl-size) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
}

.settings-content-header p {
  margin-top: 4px !important;
  color: var(--ink-gray-6) !important;
  font-size: var(--text-base-size) !important;
  line-height: 1.55 !important;
  letter-spacing: 0.005em !important;
}

.settings-profile-summary {
  gap: 8px !important;
  margin-bottom: 0 !important;
}

.settings-avatar {
  width: 56px !important;
  height: 56px !important;
  flex-basis: 56px !important;
  font-size: var(--text-lg-size) !important;
}

.settings-profile-summary strong {
  color: var(--ink-gray-8) !important;
  font-size: var(--text-xl-size) !important;
  font-weight: 600 !important;
  line-height: var(--text-xl-line) !important;
  letter-spacing: -0.01em !important;
}

.settings-profile-summary span:not(.settings-avatar) {
  color: var(--ink-gray-6) !important;
  font-size: var(--text-sm-size) !important;
  line-height: 1.55 !important;
  letter-spacing: 0.005em !important;
}

.settings-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 16px 0 0 4px;
}

.settings-profile-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-profile-meta span {
  color: var(--ink-gray-5);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
}

.settings-profile-meta strong {
  color: var(--ink-gray-8);
  font-size: var(--text-sm-size);
  font-weight: 500;
  line-height: var(--text-sm-line);
}

@keyframes settings-overlay-in {
  from { background-color: rgba(0, 0, 0, 0); }
  to { background-color: rgba(0, 0, 0, 0.4); }
}

@keyframes settings-overlay-out {
  from { background-color: rgba(0, 0, 0, 0.4); }
  to { background-color: rgba(0, 0, 0, 0); }
}

@keyframes settings-dialog-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.985); }
}

.settings-profile-divider {
  height: 1px;
  margin: 24px 0 !important;
  border: 0;
  background: var(--outline-gray-1);
}

.settings-profile-form {
  max-width: none !important;
  gap: 0 !important;
}

.settings-profile-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.settings-profile-section-heading > strong {
  color: var(--ink-gray-9);
  font-size: var(--text-base-size);
  font-weight: 600;
  line-height: var(--text-base-line);
  letter-spacing: 0.005em;
}

.settings-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}

.settings-profile-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.settings-profile-grid label > span {
  color: var(--ink-gray-5);
  font-size: var(--text-sm-size);
  line-height: 1.5;
  letter-spacing: 0.005em;
}

.settings-profile-grid input {
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  min-height: 28px;
  border: 1px solid var(--surface-gray-2);
  border-radius: var(--radius);
  background: var(--surface-gray-2);
  padding: 6px 8px;
  color: var(--ink-gray-8);
  font: 400 var(--text-base-size)/var(--text-base-line) var(--font-family);
  letter-spacing: 0.005em;
}

.settings-profile-grid input:disabled {
  color: var(--ink-gray-5);
  opacity: 1;
}

.settings-profile-mobile {
  grid-column: 1;
}

.settings-profile-grid .settings-profile-mobile > span {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  letter-spacing: 0.01em;
}

.settings-profile-phone {
  display: flex;
  width: 100%;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid var(--outline-gray-2);
  border-radius: 10px;
  background: var(--surface-white);
}

.settings-profile-phone > select,
.settings-profile-phone > input {
  min-height: 42px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.settings-profile-phone > select {
  width: 124px;
  flex: 0 0 124px;
  border-right: 1px solid var(--outline-gray-2);
  padding: 8px 28px 8px 12px;
  color: var(--ink-gray-8);
}

.settings-profile-phone > input {
  width: auto;
  min-width: 0;
  flex: 1;
  padding: 8px 12px;
}

.settings-profile-form .settings-password-row {
  margin-top: 24px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.settings-profile-form .settings-password-row strong {
  color: var(--ink-gray-8) !important;
  font-size: var(--text-base-size) !important;
  font-weight: 500 !important;
  line-height: var(--text-base-line) !important;
  letter-spacing: 0.005em !important;
}

.settings-profile-form .settings-password-row span {
  color: var(--ink-gray-6) !important;
  font-size: var(--text-sm-size) !important;
  line-height: 1.55 !important;
  letter-spacing: 0.005em !important;
}

.settings-profile-form .settings-secondary-button {
  min-height: var(--control-sm-height);
  border: 0;
  border-radius: var(--radius);
  background: var(--surface-gray-2);
  padding: 4px var(--control-sm-padding-x);
  color: var(--ink-gray-8);
  font-size: var(--text-base-size);
  font-weight: 400;
  line-height: var(--text-base-line);
}

.settings-profile-form .settings-password-row .settings-secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-profile-form .settings-password-row .settings-secondary-button svg {
  width: 14px;
  height: 14px;
}

.settings-profile-form .settings-secondary-button:disabled {
  color: var(--ink-gray-4);
  opacity: 1;
}

.settings-help-button {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 16px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--outline-gray-2);
  border-radius: 50%;
  background: var(--surface-white);
  color: var(--ink-gray-6);
  box-shadow: var(--shadow-sm);
}

.settings-help-button svg {
  width: 17px;
  height: 17px;
}

/* Shared Settings actions use Uniting's default small Button geometry. */
.settings-primary-button,
.settings-secondary-button {
  min-height: var(--control-sm-height);
  gap: var(--control-gap);
  border-radius: var(--radius);
  padding: 4px var(--control-sm-padding-x);
  font: 400 var(--text-base-size)/var(--text-base-line) var(--font-family);
  white-space: nowrap;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.settings-primary-button {
  border-color: var(--surface-gray-7);
  background: var(--surface-gray-7);
  color: var(--ink-white);
}

.settings-primary-button:hover {
  border-color: var(--surface-gray-6);
  background: var(--surface-gray-6);
}

.settings-secondary-button {
  border-color: transparent;
  background: var(--surface-gray-2);
  color: var(--ink-gray-8);
}

.settings-secondary-button:hover {
  background: var(--surface-gray-3);
}

.settings-primary-button:disabled,
.settings-secondary-button:disabled {
  border-color: var(--surface-gray-2);
  background: var(--surface-gray-2);
  color: var(--ink-gray-4);
  opacity: 1;
}

/* Users.vue: source list rhythm, controls and modal geometry. */
.settings-header-actions { display: flex; width: 25%; align-items: center; justify-content: flex-end; gap: 8px; }
.settings-header-actions button { display: inline-flex; align-items: center; }
.settings-header-actions button svg { width: 14px; height: 14px; flex: 0 0 14px; }
[data-active-settings-tab="users"] .settings-content-header { margin-bottom: 24px !important; }
.settings-user-filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 0; }
.settings-user-filters > label { display: flex; width: 33.333%; height: 28px; min-height: 28px; box-sizing: border-box; align-items: center; gap: 8px; border: 1px solid var(--surface-gray-2); border-radius: var(--radius); background: var(--surface-gray-2); padding: 0 8px; }
.settings-user-filters svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--ink-gray-6); }
.settings-user-filters input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink-gray-8); font: 400 var(--text-base-size)/var(--text-base-line) var(--font-family); }
.settings-user-filters > select { width: auto !important; min-width: 58px; height: 28px; min-height: 28px; border: 0; border-radius: var(--radius); background: var(--surface-gray-2); padding: 4px 28px 4px 10px; color: var(--ink-gray-7); font: 400 var(--text-sm-size)/var(--text-sm-line) var(--font-family); }
.settings-filter-dropdown { position: relative; }
.settings-filter-dropdown > summary { display: flex; min-width: 58px; height: 28px; min-height: 28px; box-sizing: border-box; align-items: center; gap: 6px; border-radius: var(--radius); background: var(--surface-gray-2); padding: 4px 8px 4px 10px; color: var(--ink-gray-7); font: 400 var(--text-sm-size)/var(--text-sm-line) var(--font-family); list-style: none; cursor: pointer; }
.settings-filter-dropdown > summary::-webkit-details-marker { display: none; }
.settings-filter-dropdown > summary:focus { outline: 0; box-shadow: none; }
.settings-filter-dropdown > summary:focus-visible { outline: 1px solid var(--outline-gray-4); outline-offset: 1px; }
.settings-filter-dropdown > summary span { white-space: nowrap; }
.settings-filter-dropdown > summary svg { width: 12px; height: 12px; flex: 0 0 12px; }
.settings-filter-dropdown-menu { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; display: flex; min-width: 172px; max-height: 320px; flex-direction: column; gap: 2px; overflow-y: auto; border: 1px solid var(--outline-gray-2); border-radius: var(--radius-lg); background: var(--surface-white); padding: 4px; box-shadow: var(--shadow-lg); }
.settings-filter-dropdown-menu button { min-height: 32px; border: 0; border-radius: var(--radius); background: transparent; padding: 6px 8px; color: var(--ink-gray-7); font: 400 var(--text-sm-size)/var(--text-sm-line) var(--font-family); text-align: left; white-space: nowrap; cursor: pointer; }
.settings-filter-dropdown-menu button:hover, .settings-filter-dropdown-menu button.is-selected { background: var(--surface-gray-2); color: var(--ink-gray-9); }
.settings-users-list { display: flex; flex-direction: column; overflow: visible; padding: 0; }
.settings-user-row { display: flex; min-height: 56px; align-items: center; gap: 8px; border-bottom: 1px solid var(--outline-gray-modals); padding: 8px 0; }
.settings-user-number { width: 32px; flex: 0 0 32px; color: var(--ink-gray-4); font-size: var(--text-sm-size); font-variant-numeric: tabular-nums; text-align: right; }
.settings-user-avatar { display: grid; width: 40px; height: 40px; flex: 0 0 40px; margin-left: 4px; place-items: center; border-radius: 50%; background: var(--surface-violet-1); color: var(--violet-700); font-size: var(--text-base-size); font-weight: 500; }
.settings-user-avatar[data-avatar-tone="0"] { background: #e8f0fe; color: #2563eb; }
.settings-user-avatar[data-avatar-tone="1"] { background: #e5f7ec; color: #15803d; }
.settings-user-avatar[data-avatar-tone="2"] { background: #fff4cc; color: #a16207; }
.settings-user-avatar[data-avatar-tone="3"] { background: #f1e8ff; color: #7c3aed; }
.settings-user-avatar[data-avatar-tone="4"] { background: #ffe7ef; color: #be185d; }
.settings-user-avatar[data-avatar-tone="5"] { background: #dff7f1; color: #0f766e; }
.settings-user-avatar[data-avatar-tone="6"] { background: #ffead5; color: #c2410c; }
.settings-user-avatar[data-avatar-tone="7"] { background: #e5e7eb; color: #4b5563; }
.settings-user-identity { display: flex; min-width: 120px; flex: 1; flex-direction: column; margin-left: 4px; }
.settings-user-identity strong, .settings-user-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-user-identity strong { color: var(--ink-gray-8); font-size: var(--text-base-size); font-weight: 400; line-height: var(--text-base-line); }
.settings-user-identity small { color: var(--ink-gray-5); font-size: var(--text-sm-size); line-height: var(--text-sm-line); }
.settings-user-row > select { width: 132px; min-width: 0; min-height: var(--control-sm-height); border: 0; border-radius: var(--radius); background: var(--surface-gray-2); padding: 4px 8px; color: var(--ink-gray-8); font: 400 var(--text-sm-size)/var(--text-sm-line) var(--font-family); }
.settings-user-dropdown { position: relative; width: 132px; min-width: 0; }
.settings-user-dropdown > summary, .settings-user-static-control { display: flex; min-height: var(--control-sm-height); box-sizing: border-box; align-items: center; gap: 6px; overflow: hidden; border: 0; border-radius: var(--radius); background: var(--surface-gray-2); padding: 4px 8px; color: var(--ink-gray-8); font: 400 var(--text-sm-size)/var(--text-sm-line) var(--font-family); list-style: none; cursor: pointer; }
.settings-user-dropdown > summary::-webkit-details-marker { display: none; }
.settings-user-dropdown > summary:focus { outline: 0; box-shadow: none; }
.settings-user-dropdown > summary:focus-visible { outline: 1px solid var(--outline-gray-4); outline-offset: 1px; }
.settings-user-dropdown > summary > span, .settings-user-static-control > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-user-dropdown > summary svg, .settings-user-static-control svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--ink-gray-5); }
.settings-user-dropdown > summary svg:last-child { width: 12px; height: 12px; flex-basis: 12px; transition: transform 120ms ease; }
.settings-user-dropdown[open] > summary svg:last-child { transform: rotate(180deg); }
.settings-user-static-control { width: 132px; cursor: default; }
.settings-user-dropdown-menu { position: absolute; z-index: 25; top: calc(100% + 4px); right: 0; display: flex; width: max-content; min-width: 172px; max-height: 280px; flex-direction: column; gap: 2px; overflow-y: auto; border: 1px solid var(--outline-gray-2); border-radius: var(--radius-lg); background: var(--surface-white); padding: 4px; box-shadow: var(--shadow-lg); }
.settings-user-dropdown.is-drop-up .settings-user-dropdown-menu { top: auto; bottom: calc(100% + 4px); }
.settings-user-dropdown-menu button { display: flex; width: 100%; min-height: 32px; align-items: center; gap: 8px; border: 0; border-radius: var(--radius); background: transparent; padding: 6px 8px; color: var(--ink-gray-7); font: 400 var(--text-sm-size)/var(--text-sm-line) var(--font-family); text-align: left; cursor: pointer; }
.settings-user-dropdown-menu button:hover { background: var(--surface-gray-2); color: var(--ink-gray-9); }
.settings-user-dropdown-menu button.is-selected { background: var(--surface-gray-2); color: var(--ink-gray-9); font-weight: 500; }
.settings-user-dropdown-menu button svg { width: 14px; height: 14px; flex: 0 0 14px; }
.settings-user-dropdown-menu button > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-option-check { width: 14px; flex: 0 0 14px; color: var(--crm-primary); text-align: center; }
.settings-icon-button { display: grid; width: var(--control-sm-height); height: var(--control-sm-height); flex: 0 0 var(--control-sm-height); place-items: center; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-gray-6); cursor: pointer; }
.settings-icon-button:hover { background: var(--surface-gray-2); }
.settings-icon-button svg { width: 16px; height: 16px; }
.settings-more-button { margin-left: 2px; }
.settings-user-actions { position: relative; flex: 0 0 var(--control-sm-height); }
.settings-user-actions > summary { list-style: none; }
.settings-user-actions > summary::-webkit-details-marker { display: none; }
.settings-user-actions-menu { position: absolute; z-index: 35; top: calc(100% + 4px); right: 0; display: flex; width: max-content; min-width: 222px; flex-direction: column; gap: 2px; border: 1px solid var(--outline-gray-2); border-radius: var(--radius-lg); background: var(--surface-white); padding: 4px; box-shadow: var(--shadow-lg); }
.settings-user-actions-menu button { display: flex; width: 100%; min-height: 32px; align-items: center; gap: 8px; border: 0; border-radius: var(--radius); background: transparent; padding: 6px 8px; color: var(--ink-gray-7); font: 400 var(--text-sm-size)/var(--text-sm-line) var(--font-family); text-align: left; white-space: nowrap; cursor: pointer; }
.settings-user-actions-menu button:hover, .settings-user-actions-menu button:focus-visible { outline: 0; background: var(--surface-gray-2); color: var(--ink-gray-9); }
.settings-user-actions-menu button:disabled { color: var(--ink-gray-4); cursor: wait; }
.settings-user-actions-menu button svg { width: 14px; height: 14px; flex: 0 0 14px; stroke-width: 1.6; }

/* RoleManagement.vue: 224px hierarchy rail and draggable role ordering. */
.settings-content[data-active-settings-tab="roles"] {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.settings-content[data-active-settings-tab="roles"] .settings-content-header {
  flex: 0 0 auto !important;
  margin-bottom: 30px !important;
}
.settings-role-manager {
  min-height: 0 !important;
  height: auto !important;
  flex: 1 1 auto !important;
  margin: 0 -32px -32px !important;
}
.settings-role-list {
  width: 224px !important;
  flex-basis: 224px !important;
  padding: 0 !important;
}
.settings-role-list-title {
  min-height: 53px !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid var(--outline-gray-1) !important;
  padding: 12px !important;
}
.settings-role-list-title > button {
  width: auto !important;
  min-height: 28px !important;
  gap: 6px !important;
  padding: 4px 8px !important;
  font-size: var(--text-sm-size) !important;
  font-weight: 400 !important;
  text-transform: none !important;
}
.settings-role-list-title > button svg { width: 14px !important; height: 14px !important; }
.settings-role-items { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.settings-role-list-item { display: flex; min-height: 36px; align-items: center; border-radius: var(--radius); transition: background-color 120ms ease, opacity 120ms ease; }
.settings-role-list-item:hover { background: var(--surface-gray-2); }
.settings-role-list-item.is-active { background: var(--surface-gray-7); }
.settings-role-list-item.is-dragging { opacity: .45; }
.settings-role-list-item.is-drag-over { box-shadow: inset 0 2px 0 var(--crm-primary); }
.settings-role-list-item > button {
  min-width: 0;
  min-height: 36px !important;
  flex: 1;
  background: transparent !important;
  color: var(--ink-gray-7) !important;
  padding: 8px 12px 8px 0 !important;
  font-size: var(--text-sm-size) !important;
  font-weight: 500 !important;
}
.settings-role-list-item.is-active > button { color: var(--ink-white) !important; }
.settings-role-grip { display: grid; width: 28px; height: 32px; flex: 0 0 28px; place-items: center; color: var(--ink-gray-4); cursor: grab; opacity: 0; transition: opacity 150ms ease; }
.settings-role-list-item:hover .settings-role-grip, .settings-role-list-item.is-active .settings-role-grip { opacity: .6; }
.settings-role-grip:active { cursor: grabbing; }
.settings-role-grip svg { width: 14px; height: 14px; }
.settings-role-list-item.is-active .settings-role-grip { color: var(--ink-gray-3); }
.settings-role-header {
  min-height: 0 !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  border-bottom: 1px solid var(--outline-gray-1) !important;
  padding: 16px 24px !important;
}
.settings-role-header-copy { min-width: 0; flex: 1; }
.settings-role-header h3 {
  color: var(--ink-gray-9) !important;
  font-size: var(--text-base-size) !important;
  font-weight: 600 !important;
  line-height: var(--text-base-line) !important;
}
.settings-role-header .settings-role-controls {
  gap: 8px 16px !important;
  margin-top: 8px !important;
}
.settings-role-header .settings-role-controls > label:first-child {
  gap: 8px !important;
  color: var(--ink-gray-7) !important;
  font-size: var(--text-xs-size) !important;
}
.settings-role-header .settings-role-controls > label:first-child > span { color: var(--ink-gray-5) !important; }
.settings-role-header .settings-role-controls select {
  min-height: 22px !important;
  border-color: var(--outline-gray-2) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  color: var(--ink-gray-7) !important;
  font-size: var(--text-xs-size) !important;
}
.settings-role-header .settings-access-option {
  min-height: 0 !important;
  gap: 6px !important;
  color: var(--ink-gray-7) !important;
  font-size: var(--text-xs-size) !important;
}
.settings-role-header .settings-access-option input { width: 14px !important; height: 14px !important; }
.settings-role-header-copy > p {
  margin: 6px 0 0 !important;
  color: var(--ink-gray-5) !important;
  font-size: var(--text-xs-size) !important;
  line-height: var(--text-xs-line) !important;
}
.settings-role-header .settings-header-actions { width: auto !important; flex: 0 0 auto !important; }
.settings-role-scroll { padding: 24px 24px 36px !important; }
.settings-role-summary {
  margin-bottom: 24px !important;
  border: 1px solid var(--outline-gray-2) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--surface-gray-1) !important;
  padding: 12px 16px !important;
}
.settings-role-summary > span {
  display: block !important;
  margin-bottom: 6px !important;
  color: var(--gray-500) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.settings-role-summary > p {
  margin: 4px 0 0 !important;
  color: var(--ink-gray-7) !important;
  font-size: var(--text-sm-size) !important;
  line-height: 1.375 !important;
}
.settings-role-health { margin-bottom: 28px !important; }
.settings-role-health > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}
.settings-role-health > header h4 {
  color: var(--gray-500) !important;
  font-size: 10px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.settings-role-health > header button {
  border: 0 !important;
  background: transparent !important;
  color: var(--gray-500) !important;
  font-size: 11px !important;
  cursor: pointer !important;
}
.settings-role-health-loading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--gray-500) !important;
  font-size: 11px !important;
}
.settings-role-health-loading > span {
  width: 14px !important;
  height: 14px !important;
  border: 2px solid var(--outline-gray-3) !important;
  border-top-color: var(--ink-gray-8) !important;
  border-radius: 50% !important;
  animation: settings-role-spin .8s linear infinite !important;
}
@keyframes settings-role-spin { to { transform: rotate(360deg); } }
.settings-role-health-ok,
.settings-role-health-findings article {
  border: 1px solid #bbf7d0 !important;
  border-radius: var(--radius) !important;
  background: #f0fdf4 !important;
  padding: 10px 12px !important;
  color: #166534 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}
.settings-role-health-findings { display: grid !important; gap: 8px !important; }
.settings-role-health-findings article {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.settings-role-health-findings article.is-blocker { border-color: #fecaca !important; background: #fef2f2 !important; color: #991b1b !important; }
.settings-role-health-findings article.is-warning { border-color: #fde68a !important; background: #fffbeb !important; color: #92400e !important; }
.settings-role-health-findings article p { margin: 4px 0 0 !important; font-size: 10.5px !important; line-height: 1.4 !important; }
.settings-role-health-findings article button { flex: 0 0 auto !important; }
.settings-role-scroll section { margin-bottom: 28px !important; }
.settings-role-scroll section > h4 {
  color: var(--ink-gray-8) !important;
  font-size: var(--text-sm-size) !important;
  font-weight: 600 !important;
  line-height: var(--text-sm-line) !important;
}
.settings-role-scroll section:not(.settings-role-summary) > p {
  margin: 2px 0 12px !important;
  color: var(--ink-gray-5) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}
.settings-access-grid { gap: 10px 24px !important; margin-top: 0 !important; }
.settings-access-grid.is-single-column { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.settings-access-option {
  min-height: 0 !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: var(--text-sm-size) !important;
}
.settings-access-option input { width: 16px !important; height: 16px !important; margin-top: 2px !important; flex: 0 0 16px !important; }
.settings-access-option > span { min-width: 0; }
.settings-access-option strong { display: block; color: var(--ink-gray-8); font-weight: 400; line-height: var(--text-sm-line); }
.settings-access-option small { display: block; color: var(--ink-gray-5); font-size: var(--text-xs-size); line-height: 1.375; }
.settings-role-health-all { display: flex !important; justify-content: flex-end !important; padding-top: 2px !important; }
.settings-access-option.has-help { min-height: 42px !important; align-items: flex-start !important; }
.settings-access-option > span { min-width: 0 !important; }
.settings-access-option > span > strong { display: block !important; font-size: 11px !important; font-weight: 500 !important; }
.settings-access-option > span > small { display: block !important; margin-top: 2px !important; color: var(--gray-500) !important; font-size: 9.5px !important; line-height: 1.35 !important; }
.settings-role-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-gray-4); font-size: var(--text-base-size); }
.settings-role-empty svg { width: 40px; height: 40px; stroke-width: 1.45; }

/* Dialog.vue equivalent shared by user, branch and custom-role actions. */
.settings-inline-dialog { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.4); padding: 16px; }
.settings-inline-dialog > form { display: flex; width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); box-sizing: border-box; flex-direction: column; gap: 16px; overflow-y: auto; border-radius: var(--radius-xl); background: var(--surface-modal); padding: 20px; box-shadow: var(--shadow-xl); }
.settings-inline-dialog > form.settings-user-edit-dialog { width: min(512px, calc(100% - 32px)); gap: 16px; padding: 20px 24px 24px; }
.settings-user-edit-dialog > header { margin-bottom: 8px; }
.settings-user-edit-dialog > header h3 { font-size: 20px !important; line-height: 24px; }
.settings-user-edit-dialog > footer { margin-top: 24px !important; }
.settings-inline-dialog form > header, .settings-inline-dialog form > footer { display: flex; align-items: center; gap: 8px; }
.settings-inline-dialog form > header { justify-content: space-between; }
.settings-inline-dialog form > header h3 { margin: 0; color: var(--ink-gray-9); font-size: var(--text-lg-size); font-weight: 600; }
.settings-inline-dialog form > header p { margin: 2px 0 0; color: var(--ink-gray-5); font-size: var(--text-sm-size); }
.settings-inline-dialog form > header button { width: 28px; height: 28px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-gray-5); font-size: 20px; cursor: pointer; }
.settings-inline-dialog form > header button:hover { background: var(--surface-gray-2); }
.settings-inline-dialog form > footer { justify-content: flex-end; margin-top: 4px; }
.settings-inline-dialog form > footer > span { flex: 1; }
.settings-dialog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-dialog-grid .is-wide { grid-column: 1 / -1; }
.settings-inline-dialog form > label, .settings-dialog-grid label { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.settings-inline-dialog label > span { color: var(--ink-gray-7); font-size: var(--text-sm-size); font-weight: 500; }
.settings-inline-dialog input, .settings-inline-dialog select { width: 100%; min-height: 36px; box-sizing: border-box; border: 1px solid var(--outline-gray-2); border-radius: var(--radius); background: var(--surface-white); padding: 7px 10px; color: var(--ink-gray-8); font: 400 var(--text-base-size)/var(--text-base-line) var(--font-family); }
.settings-inline-dialog label small { color: var(--ink-gray-5); font-size: var(--text-xs-size); line-height: var(--text-xs-line); }
.settings-edit-user-summary { display: flex; min-width: 0; align-items: center; gap: 12px; }
.settings-edit-user-summary .settings-user-avatar { margin-left: 0; }
.settings-edit-user-summary > div { display: flex; min-width: 0; flex-direction: column; }
.settings-edit-user-summary strong, .settings-edit-user-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-edit-user-summary strong { color: var(--ink-gray-8); font-size: var(--text-base-size); font-weight: 400; line-height: var(--text-base-line); }
.settings-edit-user-summary small { color: var(--ink-gray-5); font-size: var(--text-sm-size); line-height: var(--text-sm-line); }
.settings-input-with-icon { position: relative; display: flex; align-items: center; }
.settings-input-with-icon > svg { position: absolute; z-index: 1; left: 10px; width: 16px; height: 16px; color: var(--ink-gray-6); pointer-events: none; }
.settings-inline-dialog .settings-input-with-icon > input { padding-left: 34px; }
.settings-user-edit-dialog .settings-dialog-grid > label > input { min-height: 32px; border: 0; background: var(--surface-gray-2); padding-top: 5px; padding-bottom: 5px; }
.settings-user-edit-dialog .settings-input-with-icon { min-height: 32px; border-radius: var(--radius); background: var(--surface-gray-2); }
.settings-user-edit-dialog .settings-input-with-icon > input { min-height: 32px; border: 0; background: transparent; padding-top: 5px; padding-bottom: 5px; }
.settings-phone-input { display: flex; min-height: 44px; overflow: hidden; border: 1px solid var(--outline-gray-2); border-radius: 10px; background: var(--surface-white); transition: border-color 120ms ease; }
.settings-phone-input:focus-within { border-color: var(--outline-gray-modals); }
.settings-inline-dialog .settings-phone-input > select { width: 124px; min-height: 42px; flex: 0 0 124px; border: 0; border-right: 1px solid var(--outline-gray-2); border-radius: 0; background: transparent; padding: 8px 4px 8px 12px; color: var(--ink-gray-9); font-size: var(--text-sm-size); cursor: pointer; }
.settings-inline-dialog .settings-phone-input > input { min-width: 0; min-height: 42px; flex: 1; border: 0; border-radius: 0; background: transparent; padding: 8px 12px; color: var(--ink-gray-9); font-size: var(--text-sm-size); outline: 0; }
.settings-inline-dialog .settings-phone-input > select:focus, .settings-inline-dialog .settings-phone-input > input:focus { outline: 0; box-shadow: none; }
.settings-danger-link { border: 0; background: transparent; color: var(--ink-red-4); cursor: pointer; font: 400 var(--text-sm-size)/var(--text-sm-line) var(--font-family); }
.settings-form textarea { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--outline-gray-2); border-radius: var(--radius); background: var(--surface-white); padding: 8px 10px; color: var(--ink-gray-8); font: 400 var(--text-base-size)/1.5 var(--font-family); }

/* InviteUserPage.vue tabs, invitation URL and pending rows. */
.settings-mode-tabs { display: flex; gap: 8px; }
.settings-mode-tabs button { border: 0; border-radius: var(--radius); background: transparent; padding: 6px 12px; color: var(--ink-gray-5); font: 500 var(--text-sm-size)/var(--text-sm-line) var(--font-family); cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.settings-mode-tabs button:hover { color: var(--ink-gray-7); }
.settings-mode-tabs button.is-active { background: var(--surface-gray-3); color: var(--ink-gray-9); }
.settings-invitation-link { margin-top: 20px; border: 1px solid var(--outline-gray-2); border-radius: var(--radius-lg); background: var(--surface-gray-1); padding: 12px; }
.settings-invitation-link > label { display: block; margin-bottom: 6px; color: var(--ink-gray-6); font-size: var(--text-xs-size); }
.settings-invitation-link > div { display: flex; gap: 8px; }
.settings-invitation-link input { flex: 1; }
.settings-pending-invites { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.settings-pending-invites h3 { margin: 0; color: var(--ink-gray-8); font-size: var(--text-base-size); font-weight: 600; }
.settings-pending-invites article { display: flex; min-height: 36px; align-items: center; gap: 4px; border-radius: var(--radius-lg); background: var(--surface-gray-2); padding: 4px 8px; }
.settings-pending-invites article > div { display: flex; min-width: 0; flex: 1; gap: 4px; overflow: hidden; font-size: var(--text-base-size); }
.settings-pending-invites strong, .settings-pending-invites span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-pending-invites strong { color: var(--ink-gray-8); font-weight: 400; }
.settings-pending-invites span { color: var(--ink-gray-5); }

/* BranchManagement.vue table density. */
.settings-branch-header { display: flex; flex-direction: column; gap: 16px; margin: 0 0 16px; }
.settings-branch-header > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-branch-header h2 { margin: 0; color: var(--ink-gray-8); font-size: var(--text-xl-size); font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.settings-branch-header p { margin: 0; color: var(--ink-gray-5); font-size: var(--text-sm-size); line-height: var(--text-sm-line); }
.settings-branch-table th, .settings-branch-table td { padding: 8px 12px; font-size: var(--text-base-size); text-transform: none; }
.settings-branch-table-wrap { border: 0 !important; border-radius: 0 !important; }
.settings-branch-table { border-collapse: collapse; }
.settings-branch-table th { color: var(--ink-gray-6); font-weight: 500; }
.settings-branch-table th { background: transparent; }
.settings-branch-table td { color: var(--ink-gray-8); font-weight: 400; }
.settings-branch-table th:nth-child(n+2):not(:last-child), .settings-branch-table td:nth-child(n+2):not(:last-child) { text-align: center; }
.settings-branch-table th:last-child { text-align: right; }
.settings-branch-table td:last-child { display: flex; justify-content: flex-end; gap: 4px; }
.settings-branch-table .settings-icon-button svg { width: 14px; height: 14px; }
.settings-branch-table .settings-icon-button:disabled { color: var(--ink-gray-4); cursor: not-allowed; opacity: .55; }
.settings-checkbox-row { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; }
.settings-checkbox-row input { width: 14px; min-height: 14px; height: 14px; padding: 0; accent-color: var(--crm-primary); }

/* BulkImportUsersPage.vue upload and editable preview. */
.settings-import-dropzone { display: flex; min-height: 112px; align-items: center; justify-content: center; gap: 10px; border: 1px dashed var(--outline-gray-3); border-radius: var(--radius-lg); background: var(--surface-gray-1); color: var(--ink-gray-6); cursor: pointer; }
.settings-import-dropzone svg { width: 20px; height: 20px; }
.settings-import-dropzone strong { color: var(--ink-gray-7); font-size: var(--text-sm-size); font-weight: 500; }
.settings-import-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.settings-import-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0 12px; color: var(--ink-gray-6); font-size: var(--text-sm-size); }
.settings-import-table { max-height: 420px; }
.settings-import-table input, .settings-import-table select { width: 100%; min-width: 110px; min-height: 32px; box-sizing: border-box; border: 1px solid var(--outline-gray-2); border-radius: var(--radius); background: var(--surface-white); padding: 5px 8px; color: var(--ink-gray-8); font: 400 var(--text-sm-size)/var(--text-sm-line) var(--font-family); }
.settings-import-table td .is-error { color: var(--ink-red-4); }
.settings-import-table td .is-success, .settings-import-table tr.is-complete td { color: var(--ink-green-3); }

@media (max-width: 639px) {
  #settings-modal-overlay {
    padding: 0 !important;
  }

  #settings-modal-container {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .settings-dialog {
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .settings-profile-grid {
    grid-template-columns: 1fr;
  }

  .settings-header-actions { width: auto; }
  .settings-user-filters { align-items: stretch; flex-direction: column; }
  .settings-user-filters > label { width: auto; }
  .settings-user-row { flex-wrap: wrap; }
  .settings-user-identity { min-width: calc(100% - 92px); }
  .settings-user-row > select, .settings-user-row > .settings-user-dropdown, .settings-user-row > .settings-user-static-control { width: calc(50% - 4px); }
  .settings-dialog-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}