/* Large, centered New/Edit User dialog. */
#modalForm.vt-modal--user {
  width: min(1400px, calc(100vw - 32px)) !important;
  height: auto;
  max-width: 1400px !important;
  max-height: min(1200px, calc(100dvh - 32px)) !important;
  border-radius: 10px !important;
}
#modalForm.vt-modal--user #modalBody { padding: 22px 34px 26px; align-content: start; }
.user-editor-form { display: grid; gap: 20px; color: var(--text); }
.user-editor-form b { color: #e11d48; }
.user-editor-status { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-bottom: 2px; }
.user-editor-status > span { flex-basis: 100%; }
.user-editor-status label,
.user-editor-roles label { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.user-editor-status input,
.user-editor-roles input { position: absolute; opacity: 0; pointer-events: none; }
.user-editor-status i { width: 20px; height: 20px; border: 2px solid #91a0ad; border-radius: 50%; background: #c9d3da; box-shadow: inset 0 0 0 4px #c9d3da; }
.user-editor-status input:checked + i { border-color: #49bd80; background: #4f80e8; box-shadow: inset 0 0 0 4px #63d59b; }
.user-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.user-editor-grid > label,
.user-phone-row label,
.user-dispatcher-commission { display: grid; gap: 6px; }
.user-field-label { display: inline-flex; align-items: center; gap: 4px; min-height: 18px; color: #34465c; font-weight: 500; }
.user-editor-grid input,
.user-dispatcher-commission input { width: 100%; min-height: 40px; border: 1px solid var(--input-border, #c6d1dc); border-radius: 5px; padding: 8px 12px; background: var(--input-bg, #fff); color: var(--text); }
.user-phone-row { display: grid; grid-template-columns: 1fr 96px; gap: 16px; }
.user-input-affix { display: grid; grid-template-columns: 32px 1fr; align-items: center; border: 1px solid var(--input-border, #c6d1dc); border-radius: 3px; background: #d5e0e7; overflow: hidden; }
.user-input-affix > span { text-align: center; color: #81909c; }
.user-input-affix input { border: 0; border-left: 1px solid var(--input-border, #c6d1dc); border-radius: 0; }
.user-editor-roles { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px 22px; width: min(700px, 100%); margin: 0; padding: 14px 16px 16px; border: 1px solid #d7e0e8; border-radius: 7px; background: #f8fafc; }
.user-editor-roles legend { padding: 0 6px; color: #34465c; font-weight: 600; }
.user-editor-roles i { width: 18px; height: 18px; display: inline-grid; place-items: center; border: 1px solid #aab8c4; border-radius: 3px; background: #ced8df; }
.user-editor-roles input:checked + i { border-color: #9dddbb; background: #b8e7cd; }
.user-editor-roles input:checked + i::after { content: "✓"; color: #fff; font-weight: 800; }
.user-dispatcher-commission { max-width: 360px; }
.user-editor-role-detail { border: 1px solid #27ad70; border-radius: 7px; overflow: hidden; }
.user-editor-role-toggle { display: flex; width: 100%; gap: 16px; padding: 14px 24px; border: 0; background: #eafaf1; color: inherit; text-align: left; cursor: pointer; list-style: none; }
.user-editor-role-toggle::-webkit-details-marker { display: none; }
.user-editor-role-toggle > span { display: inline-grid; flex: 0 0 20px; width: 20px; place-items: center; overflow: visible; color: transparent; font-size: 0; line-height: 20px; }
.user-editor-role-toggle > span::before { content: "›"; color: #41576d; font-size: 30px; line-height: 20px; }
.user-editor-role-detail[open] .user-editor-role-toggle > span::before { content: "⌄"; font-size: 22px; }
.user-editor-role-detail h3 { margin: 0 0 7px; font-size: 18px; }
.user-editor-role-detail p { margin: 0; line-height: 1.45; }
.user-editor-role-detail .user-role-matrix-wrap { border-top: 1px solid #12a85e; }
@media (max-width: 800px) {
  #modalForm.vt-modal--user #modalBody { padding: 14px; }
  .user-editor-grid { grid-template-columns: 1fr; }
  .user-editor-roles { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}