/* Page: tenants (owned by the tenants page module) */

/* ---- registry card toolbar ---- */
.page-tenants .tenants-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.page-tenants .tenants-filter {
  width: 220px;
  max-width: 100%;
}

.page-tenants .tenants-toolbar .checkbox {
  white-space: nowrap;
}

/* ---- table cells ---- */
.page-tenants .tenants-id-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 13px;
}

.page-tenants .tenants-id-cell .pill {
  font-family: var(--font-sans);
}

.page-tenants .tenants-row-actions {
  display: inline-flex;
  gap: 2px;
  justify-content: flex-end;
}

.page-tenants .table td.actions {
  width: 1%;
  white-space: nowrap;
}

.page-tenants .tenants-list-error {
  padding: var(--sp-5);
}

.page-tenants .tenants-empty {
  min-width: 0;
}

.page-tenants .tenants-code,
.page-tenants-drawer .tenants-code,
.page-tenants-form .tenants-code {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  word-break: break-all;
}

/* ---- detail drawer (mounted on document.body, so prefixed separately) ---- */
.page-tenants-drawer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.page-tenants-drawer .tenants-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.page-tenants-drawer .tenants-detail-title {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.page-tenants-drawer .tenants-detail-name {
  font-size: var(--fs-16);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.page-tenants-drawer .tenants-detail-pills {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-1);
}

.page-tenants-drawer .tenants-detail-use {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}

.page-tenants-drawer .tenants-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-2);
}

.page-tenants-drawer .tenants-spacer {
  flex: 1 1 auto;
}

.page-tenants-drawer .tenants-actions-note {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.page-tenants-drawer .tenants-detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

.page-tenants-drawer .tenants-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: var(--sp-2);
}

.page-tenants-drawer .kv dd {
  overflow-wrap: anywhere;
}

/* ---- create / edit forms (inside modals) ---- */
.page-tenants-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.page-tenants-form .tenants-editor-tools {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-bottom: calc(-1 * var(--sp-2));
}

.page-tenants-form .tenants-form-message:empty {
  display: none;
}

.page-tenants-form .tenants-error-list {
  margin: 0;
  padding-left: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (max-width: 700px) {
  .page-tenants .tenants-filter {
    width: 100%;
  }

  .page-tenants-drawer .tenants-detail-use {
    width: 100%;
  }

  .page-tenants-drawer .tenants-detail-use .btn {
    flex: 1 1 auto;
  }
}

/* ---- role-gated buttons ----
   Non-admins see admin-only actions with aria-disabled + .is-disabled instead of
   the native disabled attribute, so the title tooltip still shows in browsers
   that give disabled controls no mouse events (Firefox, Safari). The rules below
   reproduce .btn:disabled and cancel the hover styles, which components.css only
   scopes with :not(:disabled). Extra class repetition beats those selectors. */
.page-tenants .btn.is-disabled,
.page-tenants-drawer .btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.page-tenants .btn.is-disabled.is-disabled:hover,
.page-tenants-drawer .btn.is-disabled.is-disabled:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

.page-tenants .btn.primary.is-disabled.is-disabled:hover,
.page-tenants-drawer .btn.primary.is-disabled.is-disabled:hover {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-text);
}

.page-tenants .btn.danger.is-disabled.is-disabled:hover,
.page-tenants-drawer .btn.danger.is-disabled.is-disabled:hover {
  background: var(--surface);
  border-color: var(--critical);
  color: var(--critical);
}

/* ---- page header note for non-admins ---- */
.page-tenants .tenants-header-note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: center;
}