/* admin.css — вынесен из auth-history.css */
/* Admin */
.profile-admin {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.profile-admin-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.profile-admin-settings-title {
  margin: 0.25rem 0 0;
}

.profile-admin-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.profile-admin-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--cyan) 18%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-soft) 55%, transparent);
  cursor: pointer;
}

.profile-admin-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.profile-admin-toggle-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.profile-admin-toggle-hint {
  font-size: 0.85rem;
  opacity: 0.72;
  line-height: 1.35;
}

.profile-admin-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-admin-toggle-switch {
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent);
  position: relative;
  transition: background 220ms ease;
}

.profile-admin-toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 88%, transparent);
  transition: transform 220ms ease;
}

.profile-admin-toggle-input:checked + .profile-admin-toggle-switch {
  background: color-mix(in srgb, var(--cyan) 42%, transparent);
}

.profile-admin-toggle-input:checked + .profile-admin-toggle-switch::after {
  transform: translateX(20px);
}

.admin-impersonation-banner {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
}

.admin-impersonation-banner-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.35;
}

.admin-users-toolbar {
  align-items: stretch;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.admin-users-search {
  flex: 1 1 12rem;
  min-width: 0;
  display: block;
}

.admin-users-search-input {
  width: 100%;
}

.admin-users-toolbar > .btn-shell-stretch {
  flex: 0 0 auto;
}

.admin-users-screen--create .admin-create-user {
  margin-top: 0.35rem;
}

.admin-stats-list,
.profile-stats-list {
  gap: 0.55rem;
}

.admin-stats-item,
.profile-stats-item {
  cursor: default;
}

.admin-stats-actions {
  margin-top: 1rem;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.admin-crystal-ledger-toolbar {
  align-items: stretch;
}

.admin-crystal-ledger-balance {
  margin-top: 0.35rem;
}

.admin-crystal-ledger-item--credit .history-item-preview {
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
}

.admin-crystal-ledger-item--debit .history-item-preview {
  color: color-mix(in srgb, var(--danger, #c45b5b) 70%, var(--text));
}

.admin-user-search-select {
  position: relative;
  flex: 1 1 14rem;
  min-width: 0;
}

.admin-user-search-select-trigger {
  width: 100%;
  justify-content: flex-start;
}

.admin-user-search-select-trigger .btn-shell-stretch,
.admin-user-search-select-trigger.btn-shell-stretch {
  width: 100%;
}

.admin-user-search-select-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  display: none;
  gap: 0.45rem;
  padding: 0.55rem;
  border-radius: var(--radius-md, 12px);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--bg-soft) 92%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, #000 22%, transparent);
}

.admin-user-search-select.is-open .admin-user-search-select-panel,
.admin-user-search-select-panel:not([hidden]) {
  display: grid;
}

.admin-user-search-select-panel[hidden] {
  display: none !important;
}

.admin-user-search-select-input {
  width: 100%;
}

.admin-user-search-select-list {
  display: grid;
  gap: 0.25rem;
  max-height: 14rem;
  overflow: auto;
}

.admin-user-search-select-option {
  display: grid;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.admin-user-search-select-option:hover,
.admin-user-search-select-option.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.admin-user-search-select-option-name {
  font-family: var(--font-display);
  font-size: 0.98rem;
}

.admin-user-search-select-option-login,
.admin-user-search-select-empty {
  margin: 0;
  opacity: 0.72;
  font-size: 0.86rem;
}

.profile-stats-add-btn {
  margin-top: 0;
  width: 100%;
}

.profile-stats-actions {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.85rem;
}

.profile-stats-ledger-btn {
  width: 100%;
}

.profile-stats-units-fields {
  display: grid;
  gap: 0.45rem;
  margin: 0.35rem 0 0.85rem;
}

.profile-stats-units-amount-row {
  width: 100%;
}

.profile-stats-units-amount-row > .btn-shell {
  flex: 0 0 auto;
  width: auto;
}

.profile-stats-units-dropdown {
  min-width: 0;
}

html[data-design="classic"] .profile-admin-toggle,
html[data-theme="classic"] .profile-admin-toggle,
body.design-classic .profile-admin-toggle,
html[data-design="classic"] .admin-impersonation-banner,
html[data-theme="classic"] .admin-impersonation-banner,
body.design-classic .admin-impersonation-banner {
  border-radius: 8px;
}

body.profile-picker-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .profile-grid-picker-overlay {
    padding: 0;
    place-items: stretch;
  }

  .profile-grid-picker-panel {
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    animation: profilePickerInMobile 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .profile-grid-picker-scroll-viewport {
    max-height: none;
  }

  .profile-grid-picker-panel-head {
    font-size: clamp(1.55rem, 6.2vw, 1.9rem);
    margin-bottom: 1.1rem;
    padding: 0.15rem 0.1rem 0.35rem;
  }

  .profile-grid-picker-close {
    font-size: clamp(1.7rem, 7vw, 2.1rem);
    padding: 0.35rem 0.55rem;
    opacity: 0.88;
    min-width: 48px;
    min-height: 48px;
  }

  .profile-grid-picker--card .profile-grid-picker-option-thumb,
  .profile-grid-picker-overlay--card .profile-grid-picker-option-thumb {
    width: min(100%, 140px);
    height: auto;
    max-height: none;
    aspect-ratio: 2 / 3;
  }

  .profile-grid-picker-overlay:not(.profile-grid-picker-overlay--card) .profile-grid-picker-option-thumb,
  .profile-grid-picker-overlay:not(.profile-grid-picker-overlay--card) .profile-frame-swatch {
    width: 64px;
    height: 64px;
  }

  .profile-grid-picker-preview:has(.profile-avatar-thumb--3d),
  .profile-grid-picker-option-thumb:has(.profile-avatar-thumb--3d) {
    width: 84px;
  }

  @keyframes profilePickerInMobile {
    from {
      opacity: 0.4;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .profile-grid-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 88px));
    justify-content: start;
  }

  .profile-grid-picker--card .profile-grid-picker-grid,
  .profile-grid-picker-overlay--card .profile-grid-picker-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Число кристаликов слева от кристалла профиля */
.profile-crystals-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: 0.15em 0;
  margin-right: -18px;
  position: relative;
  z-index: 2;
  font-family: var(--font-currency);
  font-size: clamp(1.35rem, 3.8vw, 1.85rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  color: color-mix(in srgb, var(--cyan) 68%, #fff 32%);
  text-shadow:
    0 0 12px color-mix(in srgb, var(--cyan) 45%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.35);
  user-select: none;
  pointer-events: none;
}

.profile-crystals-badge-value {
  display: block;
}

/* 3D кристалл → профиль (вместо pack/theme в controls) */
.profile-crystal-button {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  width: clamp(86px, 8.2vw, 106px);
  height: clamp(86px, 8.2vw, 106px);
  cursor: pointer;
  border-radius: 0;
  position: relative;
  overflow: visible;
  filter: var(--ui-intro-figure-glow);
  transition: transform 220ms ease, filter 220ms ease;
}

.profile-crystal-button:hover,
.profile-crystal-button:focus-visible {
  transform: translateY(-1px) scale(1.04);
  filter: var(--ui-intro-figure-glow-hover);
  outline: none;
}

.profile-crystal-button:active {
  transform: translateY(0) scale(0.98);
}

.profile-crystal-host {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.profile-crystal-host.mode-card-icon-3d,
.profile-crystal-host .mode-card-icon-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
}

html[data-design="classic"] .profile-accordion,
html[data-theme="classic"] .profile-accordion,
body.design-classic .profile-accordion,
html[data-design="classic"] .profile-grid-picker-trigger,
html[data-theme="classic"] .profile-grid-picker-trigger,
body.design-classic .profile-grid-picker-trigger,
html[data-design="classic"] .profile-grid-picker-option,
html[data-theme="classic"] .profile-grid-picker-option,
body.design-classic .profile-grid-picker-option {
  border-radius: 8px;
}

html[data-design="classic"] .auth-input,
html[data-theme="classic"] .auth-input,
body.design-classic .auth-input,
html[data-design="classic"] .auth-login-check-btn,
html[data-theme="classic"] .auth-login-check-btn,
body.design-classic .auth-login-check-btn,
html[data-design="classic"] .auth-checklist,
html[data-theme="classic"] .auth-checklist,
body.design-classic .auth-checklist {
  border-radius: 8px;
}

html[data-design="classic"] .history-item,
html[data-theme="classic"] .history-item,
body.design-classic .history-item,
html[data-design="classic"] .history-item-delete,
html[data-theme="classic"] .history-item-delete,
body.design-classic .history-item-delete {
  border-radius: 8px;
}