/* Admin layout only. Permission visibility remains controlled by app.js. */
#adminPanel,
#adminPanel .surface,
#adminPanel form,
#adminPanel .list,
#adminPanel .user-row > div,
#adminPanel .user-edit-grid > *,
#adminPanel .section-head > *,
#adminPanel .permission-matrix-wrap,
#adminPanel .region-admin-row { min-width: 0; }

#adminPanel .surface { overflow-wrap: anywhere; }
#adminPanel .admin-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
#adminPanel .admin-shortcuts a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); text-decoration: none; white-space: nowrap; }
#adminPanel .admin-shortcuts a:hover { background: var(--hover); }
#adminPanel :is(.surface, form)[id] { scroll-margin-top: 80px; }
#adminPanel .section-head { flex-wrap: wrap; gap: 12px; }
#adminPanel .section-head h2 { margin-bottom: 0; }
#adminPanel .collapsible-surface > summary { min-height: 44px; }

#usersSurface > .grid.two {
  grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr);
  gap: 20px;
  align-items: start;
}

#userForm,
#statusForm,
#regionForm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }

#userForm h2,
#statusForm h2,
#regionForm h2 { margin-bottom: 0; }

#userForm { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
#usersList { gap: 12px; }
#adminPanel .user-row { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 12px; border-radius: 12px; }
#adminPanel .user-row strong { overflow-wrap: anywhere; }
#adminPanel .user-row > button { justify-self: end; }
#adminPanel .user-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; align-items: end; }
#adminPanel .user-password-admin { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
#adminPanel .user-password-admin > button { white-space: normal; }

#adminPanel .section-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--ink);
}

#adminPanel .section-field > span:first-child {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  overflow: visible;
  text-overflow: clip;
}

#adminPanel .section-field--wide { grid-column: 1 / -1; }
#adminPanel .section-field > .password-field { color: var(--ink); font-weight: 400; }

#adminPanel input:not([type="checkbox"]):not([type="radio"]),
#adminPanel select,
#adminPanel textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  font-size: 16px;
  padding: 9px 10px;
}

#adminPanel textarea { min-height: 90px; }
#adminPanel input[type="color"] { padding: 5px; cursor: pointer; }
#adminPanel input[type="file"] { overflow: hidden; }
#adminPanel button { min-height: 44px; max-width: 100%; white-space: normal; line-height: 1.35; padding: 9px 12px; }
#adminPanel .section-field .password-field > input { padding-right: 54px; }
#adminPanel .password-toggle { width: 44px; min-width: 44px; height: 44px; min-height: 44px; right: 2px; padding: 0; }
#adminPanel .check { min-width: 0; min-height: 44px; margin: 0; gap: 10px; line-height: 1.4; white-space: normal; }
#adminPanel .check input,
#adminPanel .permission-toggle input { width: 18px; min-width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; padding: 0; }

#adminPanel input:focus-visible,
#adminPanel select:focus-visible,
#adminPanel textarea:focus-visible,
#adminPanel button:focus-visible,
#adminPanel summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#directoriesAdminSurface { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
#adminPanel #statusList { gap: 8px; margin-top: 4px; }
#adminPanel #statusList .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
#adminPanel #regionList { display: block; }
#adminPanel .region-admin-list { gap: 12px; margin-top: 4px; }
#adminPanel .region-admin-row { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 10px; border-radius: 12px; }
#adminPanel .region-admin-head { min-width: 0; gap: 8px; }
#adminPanel .region-admin-head .badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#adminPanel .region-admin-head > button { margin-left: auto; min-width: 44px; }
#adminPanel .region-city-form { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: end; }
#adminPanel .region-city-list { min-width: 0; gap: 8px; }
#adminPanel .city-chip { min-width: 0; max-width: 100%; border-radius: 12px; padding: 4px 4px 4px 10px; white-space: normal; overflow-wrap: anywhere; }
#adminPanel .city-chip button { width: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px; padding: 0; }

#rolesList { gap: 12px; }
#adminPanel .role-mobile-picker { display: none; }
#adminPanel .permission-matrix-wrap { max-width: 100%; max-height: min(680px, 70dvh); overflow: auto; overscroll-behavior: contain; border-radius: 12px; }
#adminPanel .permission-matrix thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); }
#adminPanel .permission-matrix { width: 100%; }
#adminPanel .permission-matrix th,
#adminPanel .permission-matrix td { padding: 8px 10px; }
#adminPanel .permission-action-label { gap: 4px; line-height: 1.4; overflow-wrap: anywhere; }
#adminPanel .permission-action-label strong { font-size: 14px; }
#adminPanel .permission-action-label span { font-size: 13px; }
#adminPanel .role-head-cell { gap: 8px; min-width: 0; overflow-wrap: anywhere; }
#adminPanel .role-head-cell strong { font-size: 13px; white-space: normal; }
#adminPanel .permission-toggle { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; }
#adminPanel .permission-toggle:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
#adminPanel .permission-group { min-width: 0; border-radius: 12px; padding: 12px; }
#adminPanel .permission-children { gap: 6px 12px; }

#adminPanel .import-form { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; }
#adminPanel .import-result,
#adminPanel .audit-row,
#adminPanel #runRemindersResult { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  #adminPanel { gap: 16px; }
  #adminPanel .admin-shortcuts { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  #adminPanel .admin-shortcuts a { flex: 0 0 auto; }
  #usersSurface > .grid.two,
  #directoriesAdminSurface { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #userForm { padding: 14px; }
  #adminPanel .user-row { padding: 14px; }
  #adminPanel .user-edit-grid,
  #adminPanel .user-password-admin { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  #adminPanel .user-row > button { justify-self: stretch; }
  #adminPanel .section-head { align-items: start; }
  #adminPanel .section-head > button { flex: 1 1 180px; }
  #adminPanel .region-city-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #adminPanel .region-city-form > input,
  #adminPanel .region-city-form > .section-field { grid-column: 1 / -1; }
  #adminPanel .region-admin-head .muted { flex: 1 1 100px; }
  #adminPanel .import-form { grid-template-columns: minmax(0, 1fr); }
  #adminPanel .import-form > button { width: 100%; }

  #adminPanel .role-mobile-picker { display: grid; min-width: 0; gap: 8px; }
  #adminPanel .permission-matrix { min-width: 0; width: 100%; table-layout: fixed; }
  #adminPanel .permission-matrix [data-role-column]:not(.role-column-active) { display: none; }
  #adminPanel .permission-matrix th[data-role-column],
  #adminPanel .permission-matrix td[data-role-column] { width: 96px; min-width: 84px; max-width: 116px; }
  #adminPanel .permission-matrix th:first-child,
  #adminPanel .permission-matrix td:first-child { min-width: 0; width: auto; white-space: normal; overflow-wrap: anywhere; }
  #adminPanel .permission-matrix th,
  #adminPanel .permission-matrix td { padding: 8px; }
  #adminPanel .role-head-cell { gap: 6px; }
  #adminPanel .role-head-cell button { width: 100%; padding: 8px 4px; font-size: 12px; }
  #adminPanel .permission-action-label strong { font-size: 13px; }
  #adminPanel .permission-action-label span { font-size: 12px; }
  #adminPanel .permission-children { padding-left: 0; }
}