/* Ny/redigera agent på datorn (Patrik 10-14 natt: "kolla skapa och redigera personal och kontor").
   Ärendebehörighet var breda kryssruterader (admin-forms.js:212) medan detaljvyn och Vybehörighet har pills ⇒ samma pills här.
   Kryssrutan finns kvar (logiken _toggleNewAgentOffice orörd) men döljs visuellt; valt läge läses med :has(:checked). */
@media (min-width: 769px) {
  html body #view-admin .new-agent-office-list.new-agent-office-list {
    flex-direction: row !important; flex-wrap: wrap !important; gap: 6px !important; max-height: none !important;
  }
  html body #view-admin .new-agent-office-label.new-agent-office-label {
    position: relative; display: inline-flex !important; width: auto !important;
    padding: 4px 12px !important; border-radius: 999px !important; font-weight: 600 !important; font-size: 12px !important;
    background: var(--pill-state-idle-bg) !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent) !important;
    color: var(--text-secondary) !important; box-shadow: none !important;
  }
  html body #view-admin .new-agent-office-label.new-agent-office-label:has(input:checked) {
    background: var(--pill-state-active-bg) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 26%, transparent) !important;
    color: var(--text-primary) !important;
  }
  html body #view-admin .new-agent-office-label > input.new-agent-office-cb {
    position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none;
  }
  /* Avatarvalen: ingen ram runt varje ikon (Patrik: inga ikonramar), valt = tonad platta. */
  html body #view-admin .new-agent-avatar-opt.new-agent-avatar-opt:not(.nao-selected) {
    border-color: transparent !important; background: color-mix(in srgb, var(--text-primary) 4%, transparent) !important; box-shadow: none !important;
  }
  /* Vybehörighetens pills (na-view-pill, admin-forms.js:227/235) = samma pills som Ärendebehörighet. */
  html body #view-admin .new-agent-view-panel .na-view-pill.na-view-pill {
    padding: 4px 12px !important; border-radius: 999px !important; font-weight: 600 !important; font-size: 12px !important;
    background: var(--pill-state-idle-bg) !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent) !important;
    color: var(--text-secondary) !important; box-shadow: none !important;
  }
  html body #view-admin .new-agent-view-panel .na-view-pill.na-view-pill[data-active="true"] {
    background: var(--pill-state-active-bg) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 26%, transparent) !important;
    color: var(--text-primary) !important;
  }
  /* Båda behörigheterna i likadana mjuka rutor (som i detaljvyn, admin-pills-desktop.css). */
  html body #view-admin .new-agent-lower-grid .new-agent-office-list.new-agent-office-list,
  html body #view-admin .new-agent-lower-grid .new-agent-view-panel.new-agent-view-panel {
    padding: 14px 18px !important; border-radius: 12px !important; box-shadow: none !important;
    background: color-mix(in srgb, var(--accent-primary) 6%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent) !important;
  }
  /* Nytt kontor: Typ (Kontor/Avdelning) var en tung grå platta (admin-forms.js:887/891) ⇒ två pills enligt standarden. */
  html body #view-admin #new-office-kind-picker#new-office-kind-picker { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; gap: 6px !important; }
  html body #view-admin #new-office-kind-picker .no-kind-option.no-kind-option {
    padding: 4px 12px !important; border-radius: 999px !important; font-weight: 600 !important; font-size: 12px !important;
    background: var(--pill-state-idle-bg) !important; box-shadow: none !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent) !important;
    color: var(--text-secondary) !important;
  }
  html body #view-admin #new-office-kind-picker .no-kind-option.no-kind-option[data-active="true"] {
    background: var(--pill-state-active-bg) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 26%, transparent) !important;
    color: var(--text-primary) !important;
  }
}