.modal.accounts-modal,.modal.integrations-workspace-modal { width:min(840px,calc(100vw - 28px)); max-width:840px; }
.modal.create-account-modal,#adminPasswordRecoveryModal .modal { width:min(620px,calc(100vw - 28px)); max-width:620px; }
#adminPasswordRecoveryForm { display:flex; flex-direction:column; min-height:0; }
#adminPasswordRecoveryForm .modal-body { overflow:auto; }
#adminPasswordRecoveryForm .field + .field { margin-top:14px; }
#adminPasswordRecoveryForm input { width:100%; min-height:44px; }
.create-account-modal .modal-head { background:var(--surface); color:var(--ink); }
.create-account-modal .modal-head h2 { margin:0; font-size:21px; }
.create-account-modal .field { font-size:14px; }
.create-account-modal input,.create-account-modal select { min-height:44px; font-size:16px; }
.create-account-modal .modal-foot button { min-height:44px; }
.accounts-modal-body { padding:14px 18px 20px; }
.accounts-people-section[hidden],.accounts-roles-section[hidden],.accounts-districts-section[hidden] { display:none; }
.accounts-directory-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }
.accounts-directory-toolbar > input { flex:1 1 150px; min-width:0; min-height:44px; font-size:16px; }
.accounts-directory-toolbar > button { min-height:44px; padding:8px 12px; color:var(--surface); }
.accounts-directory-filters > summary { display:flex; align-items:center; gap:4px; min-height:44px; box-sizing:border-box; padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); color:var(--primary); font-size:14px; cursor:pointer; }
.accounts-directory-filters[open] { flex:1 1 100%; }
.accounts-directory-filters .field { font-size:14px; padding:10px 0; }
.accounts-directory-filters select { width:100%; min-height:44px; }
.accounts-directory-count { margin:10px 0 4px; color:var(--muted); font-size:14px; }
.accounts-directory-wrap,.accounts-directory-list { width:100%; min-width:0; }
.account-directory-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; padding:14px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; box-shadow:none; }
.account-directory-row.is-openable { cursor:pointer; }
@media (hover:hover) and (pointer:fine) { .account-directory-row.is-openable:hover { background:var(--surface-2); } }
.account-directory-row.is-openable:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
.account-directory-row .account-identity { display:flex; align-items:center; gap:10px; min-width:0; color:var(--ink); font-size:16px; }
.account-identity-copy { min-width:0; }
.directory-avatar { width:36px; height:36px; display:grid; place-items:center; flex:none; overflow:hidden; border-radius:50%; background:var(--primary-soft); color:var(--primary-dark); font-size:13px; font-weight:750; }
.directory-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
.account-name { color:var(--ink); font-size:16px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
.account-email { margin-top:3px; color:var(--muted); font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.account-role-chip { display:inline-block; margin-top:4px; font-size:13px; color:var(--ink-2); line-height:1.4; }
.account-open-chevron { color:var(--muted); font-size:24px; }
.account-actions,.account-detail-actions,.custom-role-row-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.account-actions button,.custom-role-row-actions button { min-height:44px; font-size:14px; }
.account-invite-row .account-actions { grid-column:1/-1; justify-content:flex-end; }
.account-invite-status { min-width:0; text-align:right; }
.account-invite-status small { display:block; max-width:180px; margin-top:4px; font-size:13px; color:var(--muted); line-height:1.4; }
.account-open-btn { padding:8px 12px; }
.accounts-pagination { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; font-size:14px; }
.accounts-pagination button { min-height:44px; }
.accounts-empty { padding:18px 0; color:var(--muted); font-size:15px; }
.account-role-reference { font-size:14px; }
.account-role-reference select { min-height:44px; font-size:16px; }
.accounts-role-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:14px; line-height:1.5; margin:10px 0 14px; }
.role-permission-reference { margin-top:12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.role-permission-reference > summary { display:flex; align-items:center; gap:10px; min-height:48px; cursor:pointer; font-size:14px; font-weight:600; }
.role-permission-reference > summary > span { margin-left:auto; color:var(--muted); font-weight:400; }
.role-permission-reference > summary::after { content:"⌄"; color:var(--primary); }
.role-permission-reference[open] > summary::after { content:"⌃"; }
.accounts-role-summary p { margin:0; }
.accounts-role-summary button { flex:none; min-height:44px; padding:8px 16px; }
.access-capability-group { grid-column:1/-1; min-width:0; margin:10px 0 16px; }
.access-capability-group h4 { font-size:15px; margin:0 0 8px; }
.role-permission-row { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:10px 0; font-size:14px; line-height:1.45; }
.role-permission-row small { flex:none; font-size:13px; color:var(--muted); }
.accounts-advanced { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.accounts-custom-role-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.accounts-custom-role-head h3 { margin:0; font-size:17px; }
.accounts-custom-role-head button { min-height:44px; }
.custom-role-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.custom-role-row > div:first-child { min-width:0; }
.custom-role-row strong { display:block; font-size:16px; overflow-wrap:anywhere; }
.custom-role-row small,.accounts-advanced-copy { display:block; color:var(--muted); font-size:14px; margin-top:4px; }
.account-detail-drawer { position:fixed; inset:0; z-index:120; display:flex; justify-content:flex-end; background:color-mix(in srgb,var(--ink) 32%,transparent); cursor:pointer; }
.account-detail-drawer[hidden] { display:none; }
.account-detail-panel { width:min(620px,100%); height:100%; display:flex; flex-direction:column; min-height:0; border-left:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:default; box-shadow:var(--shadow-lg); }
.account-detail-head { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid var(--line); }
.account-detail-head h3 { margin:0; font-size:18px; }
.account-detail-head p { margin:4px 0 0; font-size:14px; color:var(--muted); overflow-wrap:anywhere; }
.account-detail-body { flex:1; overflow:auto; padding:0 16px 20px; }
.account-detail-section { padding:16px 0; border-bottom:1px solid var(--line); }
.account-detail-section h4 { margin:0 0 8px; font-size:16px; }
.account-detail-section p { font-size:14px; line-height:1.5; color:var(--muted); }
.account-detail-section .field { margin-top:10px; font-size:14px; }
.account-detail-section select { min-height:44px; }
.account-detail-actions button { min-height:44px; }
.access-override-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,.65fr); gap:8px 12px; align-items:center; }
.access-override-grid label,.access-override-rows label { min-width:0; font-size:14px; line-height:1.5; }
.access-override-grid label span,.access-override-rows label span { display:block; color:var(--muted); font-size:13px; }
.access-override-grid select,.access-override-rows select { min-width:0; min-height:44px; width:100%; font-size:14px; }
.access-override-rows { display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,.65fr); align-items:center; gap:10px 12px; }
.access-capability-options { display:grid; gap:4px; }
.access-capability-options label { display:flex; align-items:center; gap:10px; min-height:44px; }
.access-capability-options input { width:20px; height:20px; flex:none; min-height:0; }
.role-capability-list { display:flex; flex-wrap:wrap; gap:8px; }
.role-capability-list span { padding:4px 0; font-size:14px; color:var(--ink-2); }
.accounts-reset-queue { margin:0; }
.accounts-reset-queue-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.accounts-reset-queue-head h3 { margin:0; font-size:17px; }
.accounts-reset-queue-head p { font-size:14px; line-height:1.5; color:var(--muted); }
.reset-request-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.reset-request-name { font-size:16px; font-weight:650; }
.reset-request-email,.reset-request-time { color:var(--muted); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.reset-request-actions { display:flex; gap:8px; flex-wrap:wrap; }
.reset-request-actions button { min-height:44px; }
.accounts-districts-section > h3,.admin-pickup-locations h3 { font-size:17px; margin:4px 0 10px; }
.district-registry-row { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.district-registry-row > div:first-child { flex:1; min-width:0; }
.district-registry-row strong { font-size:16px; }
.district-registry-row small { display:block; margin-top:3px; color:var(--muted); font-size:14px; }
.admin-pickup-locations { margin-top:20px; }
.admin-pickup-row { display:flex; align-items:center; gap:10px; padding:12px 0; font-size:16px; border-bottom:1px solid var(--line); }
.admin-pickup-row svg { width:22px; height:22px; flex:none; color:var(--primary); }
.admin-pickup-row span { overflow-wrap:anywhere; }
.admin-district-setup { margin-top:16px; }
.admin-district-setup > summary { display:flex; align-items:center; min-height:44px; color:var(--primary); font-size:15px; cursor:pointer; }
.district-create-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; margin:12px 0; }
.district-create-form .field { min-width:0; }
.district-create-form button { min-height:44px; }
.create-account-result { padding:12px 0; color:var(--ink); font-size:15px; overflow-wrap:anywhere; }
.integrations-workspace-body { display:block; padding:0 18px 18px; }
.integrations-overview { margin:0; padding:12px 0; color:var(--muted); font-size:14px; }
.integration-card { min-width:0; padding:12px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; box-shadow:none; }
.integration-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; cursor:pointer; list-style:none; }
.integration-card-head::-webkit-details-marker { display:none; }
.integration-card-head::after { content:'›'; font-size:23px; color:var(--muted); }
.integration-card[open] > .integration-card-head::after { transform:rotate(90deg); }
.integration-card-head strong { flex:1; font-size:17px; }
.integration-card[open] > .integration-card-head { margin-bottom:12px; }
.integration-card > p,.integration-note { font-size:14px; line-height:1.5; color:var(--muted); }
.integration-provider-links { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 14px; font-size:14px; }
.integration-provider-links a { color:var(--primary); }
.integration-status { display:inline-block; font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.integration-status.ready { color:var(--success); }
.integration-status.incomplete { color:var(--muted); }
.integration-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.integration-form-grid .full { grid-column:1/-1; }
.integration-form-grid .field { min-width:0; font-size:14px; }
.integration-form-grid input,.integration-form-grid select { min-height:44px; width:100%; font-size:16px; }
.integration-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0; }
.integration-actions button { min-height:44px; color:var(--surface); }
.integration-key-field { display:flex; gap:8px; }
.integration-key-field input { flex:1; min-width:0; }
.integration-key-field button { min-height:44px; }
.integration-environment { display:grid; gap:5px; font-size:14px; }
.integration-api-scopes { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.integration-api-scope { display:flex; gap:8px; align-items:center; min-height:44px; font-size:14px; }
.integration-api-scope input { width:20px; height:20px; flex:none; }
.integration-client-list { margin-top:14px; }
.integration-client-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.integration-client-row > div { min-width:0; }
.integration-client-row strong { font-size:16px; }
.integration-client-row p { color:var(--muted); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.integration-client-actions,.integration-secret-actions { display:flex; flex-wrap:wrap; gap:8px; }
.integration-client-actions button,.integration-secret-actions button { min-height:44px; }
.integration-secret { padding:14px 0; border-top:1px solid var(--line); }
.integration-secret strong { font-size:16px; }
.integration-secret p { font-size:14px; line-height:1.5; }
.integration-secret textarea { width:100%; min-height:88px; margin:10px 0; font-size:14px; overflow-wrap:anywhere; }
@media (max-width:700px) {
  .accounts-modal-body { padding:12px 14px 18px; }
  .integration-form-grid,.integration-api-scopes,.district-create-form { grid-template-columns:1fr; }
  .integration-form-grid .full { grid-column:auto; }
  .custom-role-row { flex-wrap:wrap; }
  .account-detail-panel { border:0; }
}

/* One compact permission editor for built-in and custom roles. */
#customRoleModal .modal-head { height:auto; min-height:68px; }
#customRoleModal .modal-body { display:block; padding:16px 20px; }
#customRoleModal .modal-head h2 { font-size:21px; }
#roleEditorSummary { font-size:12px; margin:5px 0 0; }
.role-editor-help { margin:0 0 14px; color:var(--muted); font-size:13px; line-height:1.5; }
#rolePermissionSearch { width:100%; font-size:16px; min-height:44px; margin:0 0 16px; }
.role-permission-group { margin:0 0 18px; }
.role-permission-group h3 { margin:0 -8px; padding:7px 8px; background:var(--surface-2); color:var(--muted); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.role-permission-option { display:flex; gap:16px; align-items:center; justify-content:space-between; min-height:48px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:500; }
.role-permission-option small { display:block; color:var(--muted); font-size:11px; font-weight:400; margin-top:3px; }
#customRoleCapabilities .role-permission-option input { appearance:none; -webkit-appearance:none; flex:none; width:36px; height:22px; border-radius:12px; border:1px solid var(--line-strong); background:var(--line-strong); position:relative; margin:0; cursor:pointer; }
#customRoleCapabilities .role-permission-option input::before { content:''; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:white; box-shadow:0 1px 2px #0002; }
#customRoleCapabilities .role-permission-option input:checked { background:var(--primary); border-color:var(--primary); }
#customRoleCapabilities .role-permission-option input:checked::before { left:16px; }
#customRoleCapabilities .role-permission-option input:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
#customRoleCapabilities .role-permission-option input:disabled { opacity:.45; cursor:default; }
.role-editor-link { display:block; padding:12px 0; min-height:44px; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
#roleEditorError:empty,#deleteRoleError:empty { display:none; }
/* Use natural document flow: grid auto tracks can collapse the scrollable filters. */
#catalogModal .modal-body { display:block; }
#catalogModal .modal-body > p { margin:10px 0; }
/* Catalog maintenance: flat, compact selectable rows and a matching review. */
.catalog-bulk-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; border-block:1px solid var(--line); padding:8px 0; margin:12px 0; }
.catalog-bulk-actions button { flex:1; font-size:14px; min-height:44px; padding:8px; }
.catalog-selection { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px; }
.catalog-selection label { display:flex; align-items:center; gap:8px; min-height:44px; }
#catalogSearch { min-width:0; font-size:16px; }
#catalogFilter { font-size:16px; }
.catalog-part-row { display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.catalog-part-row input { flex:none; margin-top:5px; }
.catalog-part-copy { min-width:0; flex:1; overflow-wrap:anywhere; }
.catalog-part-copy strong,.catalog-part-copy span { display:block; }
.catalog-part-copy span { font-size:14px; margin:3px 0; }
.catalog-part-copy small { color:var(--muted); font-size:11px; }
.catalog-part-row>button { min-width:44px; min-height:44px; }
.catalog-review-row { display:flex; align-items:flex-start; gap:12px; padding:18px 0; border-bottom:1px solid var(--line); }
.catalog-review-row>input { margin-top:4px; flex:none; }
.catalog-review-row>div { min-width:0; flex:1; overflow-wrap:anywhere; }
.catalog-review-row dl { display:grid; grid-template-columns:44px minmax(0,1fr); gap:5px 8px; font-size:14px; margin:10px 0; }
.catalog-review-row dt { color:var(--muted); }
.catalog-review-row dd { margin:0; }
.catalog-review-row p,.catalog-review-row a { margin:6px 0 0; font-size:12px; color:var(--muted); line-height:1.4; }
.catalog-review-row a { color:var(--primary); display:inline-block; min-height:32px; padding-top:4px; }
#catalogReviewError:empty { display:none; }
#catalogReviewModal .modal-head { min-height:76px; height:auto; }
#catalogReviewModal .modal-head h2 { font-size:21px; }
#catalogReviewModal .modal-head p { margin:5px 0 0; }
@media(max-width:440px){#catalogFilter{flex:1;min-width:0;}#catalogSearch{flex:1 1 100%;}.catalog-part-copy strong{font-size:15px;}}

.catalog-usage-filters { display:flex; flex-wrap:wrap; gap:6px; min-height:48px; padding:4px 0; margin:10px 0; }
.catalog-usage-filters button { flex:none; min-height:40px; padding:8px 12px; font-size:13px; background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.catalog-usage-filters button[aria-pressed="true"] { background:var(--primary); color:var(--on-primary,#fff); border-color:var(--primary); }
#catalogEditModal .modal-body { display:block; }
.catalog-edit-field { display:flex; flex-direction:column; gap:7px; margin:14px 0; font-weight:600; }
.catalog-edit-field input,.catalog-edit-field textarea { width:100%; font-size:16px; font-weight:400; }
.catalog-edit-usage { margin:20px 0; padding:16px 0; border-block:1px solid var(--line); }
.catalog-edit-usage h3 { margin:0 0 12px; }
.catalog-usage-detail { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
#catalogEditError:empty { display:none; }
#catalogEditRemove { color:var(--danger,#ac2525); background:transparent; border:0; padding:10px 0; text-align:left; }

.catalog-format-hint { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--ink); }
.catalog-format-hint small { display:block; }
.catalog-format-hint button { display:block; padding:6px 0; min-height:36px; font-size:13px; text-decoration:underline; background:transparent; border:0; }

.catalog-filter-mode { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; }
.catalog-filter-mode span { margin-right:auto; font-weight:600; }
.catalog-filter-mode button { font-size:13px; min-height:40px; padding:8px; }
.catalog-filter-mode button[aria-pressed="true"] { background:var(--primary); color:var(--on-primary,#fff); }
.catalog-part-copy .catalog-flags { display:block; margin-top:5px; color:var(--primary-dark); }
.catalog-review-select { display:flex; align-items:center; gap:8px; min-height:44px; }
#catalogRemoveCandidates { color:var(--danger,#ac2525); }
@media(max-width:440px){.catalog-usage-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}.catalog-usage-filters button{min-width:0;white-space:normal;padding:8px;}}
