/* Keep the whole employee editor within the viewport. */
#modal .dialog:has(form[onsubmit^="saveUser("]) {
  display: flex;
  flex-direction: column;
  width: min(1080px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow: hidden;
}
#modal .dialog:has(form[onsubmit^="saveUser("]) .dialog-head {
  flex: none;
  align-items: center;
  padding: 9px 16px;
}
#modal .dialog:has(form[onsubmit^="saveUser("]) .dialog-head .btn {
  width: 32px;
  min-height: 32px;
  padding: 2px;
}
#modal .dialog:has(form[onsubmit^="saveUser("]) #modalBody {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
#modalBody form[onsubmit^="saveUser("] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
  padding: 12px 16px;
}
#modalBody form[onsubmit^="saveUser("] .field {
  min-width: 0;
  margin: 0;
  gap: 3px;
}
#modalBody form[onsubmit^="saveUser("] .field > label {
  font-size: 14px;
  line-height: 1.4;
}
#modalBody form[onsubmit^="saveUser("] .field > input,
#modalBody form[onsubmit^="saveUser("] .field > select {
  min-width: 0;
  min-height: 36px;
  padding: 6px 9px;
  font-size: 14px;
}
#modalBody form[onsubmit^="saveUser("] .field > small {
  font-size: 12px;
  line-height: 1.4;
}
#modalBody form[onsubmit^="saveUser("] .full,
#modalBody form[onsubmit^="saveUser("] .form-actions {
  grid-column: 1 / -1;
}
/* Compact checkboxes retain a clickable label and readable permission text. */
#modalBody form[onsubmit^="saveUser("] .checkgrid {
  gap: 4px 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#modalBody form[onsubmit^="saveUser("] label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  margin: 0;
  padding: 3px 6px;
  border-radius: 5px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
#modalBody form[onsubmit^="saveUser("] input[type="checkbox"] {
  appearance: auto;
  box-sizing: border-box;
  width: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  height: 12px !important;
  min-height: 12px !important;
  max-height: 12px !important;
  flex: 0 0 12px;
  margin: 0;
  padding: 0 !important;
  accent-color: #17594c;
  box-shadow: none;
}
#modalBody form[onsubmit^="saveUser("] input[type="checkbox"]:focus-visible {
  outline: 2px solid #17594c;
  outline-offset: 2px;
}
#modalBody form[onsubmit^="saveUser("] .form-actions {
  position: sticky;
  bottom: -12px;
  z-index: 1;
  align-items: center;
  margin: 0;
  padding: 8px 0;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 10px #fff;
}
#modalBody form[onsubmit^="saveUser("] .form-actions .btn {
  min-height: 36px;
  padding: 6px 16px;
  font-size: 14px;
}
@media (max-width: 900px) {
  #modalBody form[onsubmit^="saveUser("] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #modalBody form[onsubmit^="saveUser("] .checkgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  #modal .dialog:has(form[onsubmit^="saveUser("]) {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }
  #modal:has(form[onsubmit^="saveUser("]) { padding: 10px; }
  #modalBody form[onsubmit^="saveUser("] { gap: 8px; padding: 10px; }
  #modalBody form[onsubmit^="saveUser("] .form-actions { bottom: -10px; }
  #modalBody form[onsubmit^="saveUser("] .checkgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 360px) {
  #modalBody form[onsubmit^="saveUser("] {
    grid-template-columns: 1fr;
  }
  #modalBody form[onsubmit^="saveUser("] .checkgrid {
    grid-template-columns: 1fr;
  }
}

/* Group editable capabilities without confusing them with the job title. */
#modalBody .employee-permission-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#modalBody .employee-permission-group { margin: 0; padding: 6px 8px 8px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; }
#modalBody .employee-permission-group legend { padding-inline: 5px; color: #17594c; font-size: 14px; font-weight: 700; }
#modalBody form[onsubmit^="saveUser("] .employee-permission-group .checkgrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
#modalBody .employee-permission-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
#modalBody .employee-permission-toolbar small { display: block; font-size: 12px; }
#modalBody .employee-permission-toolbar .btn { min-height: 32px; padding: 4px 9px; font-size: 13px; }
#modalBody .employee-permission-help { margin: 0; font-size: 12px; color: #53616c; }
#modalBody .employee-owner-only { padding: 6px 9px; border: 1px solid #e2cca4; border-radius: 6px; background: #fffaf0; font-size: 12px; }
@media (max-width: 760px) {
  #modalBody .employee-permission-groups { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 420px) {
  #modalBody form[onsubmit^="saveUser("] .employee-permission-group .checkgrid { grid-template-columns: minmax(0,1fr); }
}

#modalBody .employee-sensitive-permissions { margin: 4px 0; padding: 9px 12px; min-width: 0; border: 2px solid #c79a52; border-radius: 10px; background: #fffaf2; }
#modalBody .employee-sensitive-permissions legend { padding: 0 7px; font-size: 14px; font-weight: 700; color: #7b411e; }
#modalBody .employee-sensitive-permissions p,#modalBody .employee-sensitive-permissions small { display: block; margin: 0 0 8px; font-size: 12px; line-height: 1.6; color: #6c5443; }
#modalBody form[onsubmit^="saveUser("] .employee-sensitive-permissions .checkgrid { grid-template-columns: repeat(3,minmax(0,1fr)); }
#modalBody .employee-sensitive-permissions small { margin: 8px 0 0; }
@media(max-width:760px) { #modalBody form[onsubmit^="saveUser("] .employee-sensitive-permissions .checkgrid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:420px) { #modalBody form[onsubmit^="saveUser("] .employee-sensitive-permissions .checkgrid { grid-template-columns: minmax(0,1fr); } }