/* Account Registry controls around the directory: responsive toolbar,
   collapsed "All columns" tables, tap-through detail sheet (bottom sheet on
   phones, centred dialog from 720px) and phone-sized controls for the
   existing move / delete modals. Loaded after account-registry-list.css. */

/* ---- Toolbar: search first, 16px inputs on phones (no iOS zoom) ---- */
.account-registry-toolbar input,
.account-registry-toolbar select,
.account-registry-toolbar button {
  min-height: 44px;
}
/* The legacy 6-column template had 7 items, so Delete wrapped and selects
   collided on Fold/tablet widths. Fold/tablet: search + both buttons on
   row 1, the four selects on row 2. Wide desktop: one row. Phones: search
   spans the row; filters pair up two per row. */
.account-registry-toolbar select {
  min-width: 0;
  width: 100%;
}

@media (max-width: 860px) {
  .account-registry-toolbar label + label {
    grid-column: auto;
  }
}

@media (min-width: 861px) {
  .account-registry-toolbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .account-registry-toolbar > label:first-child {
    grid-column: 1 / span 2;
    grid-row: 1;
  }
  .account-registry-toolbar > [data-account-registry-preview] {
    grid-column: 3;
    grid-row: 1;
  }
  .account-registry-toolbar > [data-account-registry-delete] {
    grid-column: 4;
    grid-row: 1;
  }
}

@media (min-width: 1280px) {
  .account-registry-toolbar {
    grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(110px, 1fr)) auto auto;
  }
  .account-registry-toolbar > label:first-child,
  .account-registry-toolbar > [data-account-registry-preview],
  .account-registry-toolbar > [data-account-registry-delete] {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ---- Collapsed full-column tables ---- */
.account-registry-advanced {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.account-registry-advanced > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid rgba(97, 175, 239, 0.22);
  border-radius: 8px;
  background: rgba(97, 175, 239, 0.06);
  color: #dff2ff;
  cursor: pointer;
  list-style: none;
}

.account-registry-advanced > summary::-webkit-details-marker {
  display: none;
}

.account-registry-advanced > summary::before {
  content: "▸";
  color: #61afef;
  transition: transform 0.12s ease;
}

.account-registry-advanced[open] > summary::before {
  transform: rotate(90deg);
}

.account-registry-advanced > summary span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-registry-advanced > summary small {
  color: var(--muted, #a8a29a);
  font-size: 12px;
}

.account-registry-advanced[open] > * + * {
  margin-top: 14px;
}

body.registry-sheet-open {
  overflow: hidden;
}

/* ---- Existing move / delete modals: phone-sized controls ---- */
/* .account-registry-modal-card label {display:grid} beat the [hidden]
   attribute, so the manual ring input showed even when the registry picker
   loaded. */
.account-registry-modal-card label[hidden] {
  display: none;
}

.account-registry-modal-card select {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: rgba(8, 10, 14, 0.92);
  color: var(--text, #f4f1ec);
  font: inherit;
  font-size: 16px;
}

.account-registry-modal-actions button {
  min-height: 44px;
}

/* ---- Detail sheet ---- */
.registry-sheet {
  z-index: 35;
  align-items: flex-end;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

.registry-sheet-card {
  display: grid;
  background: linear-gradient(135deg, rgba(23, 31, 42, 0.98), rgba(11, 14, 20, 0.99));
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: 12px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 18px 48px rgba(0, 0, 0, 0.5);
  color: var(--text, #f4f1ec);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  overflow: auto;
  overscroll-behavior: contain;
  gap: 14px;
  padding: 16px;
}

.registry-sheet-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.registry-sheet-head .rl-avatar {
  /* .rl-avatar carries grid-area:avatar for list rows; the sheet head has no
     named areas, so reset it or the title collapses into the 44px column. */
  grid-area: auto;
  width: 44px;
  height: 44px;
}

.registry-sheet-head h3 {
  color: #fff;
  font-size: 20px;
  margin: 2px 0 2px;
  overflow-wrap: anywhere;
}

.registry-sheet-head p {
  margin: 0;
  color: var(--muted, #a8a29a);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.registry-sheet-close,
.registry-sheet-buttons button,
.registry-sheet .account-registry-move,
.registry-sheet .account-registry-protect-toggle,
.registry-sheet .account-registry-role-select {
  min-height: 44px;
  font-size: 14px;
  border-radius: 8px;
}

.registry-sheet-close {
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text, #f4f1ec);
  cursor: pointer;
  font: inherit;
}

.registry-sheet-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(8, 10, 14, 0.5);
}

.registry-sheet-section-title strong {
  color: #fff;
  font-size: 14px;
}

.registry-sheet-fact {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.registry-sheet-fact > span {
  color: var(--muted, #a8a29a);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.registry-sheet-fact > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.registry-sheet-fact code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #dff2ff;
}

.registry-sheet-fact small {
  display: block;
  color: var(--muted, #a8a29a);
  font-size: 11px;
}

.registry-sheet-action {
  display: grid;
  gap: 6px;
}

.registry-sheet .account-registry-move {
  width: 100%;
  font-weight: 700;
}

.registry-sheet .account-registry-role-select {
  width: 100%;
  font-size: 16px;
  padding: 0 10px;
}

.registry-sheet-card .registry-sheet-select {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.registry-sheet-card .registry-sheet-select input {
  width: 22px;
  height: 22px;
  min-height: 0;
}

.registry-sheet-card .registry-sheet-select span {
  color: var(--text, #f4f1ec);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.registry-sheet-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.registry-sheet-buttons button {
  background: rgba(97, 175, 239, 0.14);
  border: 1px solid rgba(97, 175, 239, 0.45);
  color: #dff2ff;
  cursor: pointer;
  font: inherit;
  padding: 0 10px;
}

.registry-sheet-buttons .registry-danger {
  background: rgba(224, 108, 117, 0.16);
  border-color: rgba(224, 108, 117, 0.46);
  color: #ffe3e6;
}

.registry-sheet-note {
  margin: 0;
  color: var(--muted, #a8a29a);
  font-size: 12px;
}

/* Toolbar: search spans the row; filters pair up two per row. */
@media (min-width: 720px) {
  .registry-sheet {
    align-items: center;
  }
}