/* =========================================================
   Account page — scoped styles (account-page)
   Works with your dash theme tokens and light/dark mode
   ========================================================= */

/* =========================
   1) Avatar block
   ========================= */
.account-page .account-avatar{
  width: 112px;
  height: 112px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--app-text) 12%, transparent);
  background: color-mix(in oklab, var(--app-soft) 60%, transparent);
  flex: 0 0 auto;
}

.account-page .account-avatar__img{
  width: 112px;
  height: 112px;
  object-fit: cover;
  display: block;
}

/* =========================
   2) Upload row (fix tiny file input)
   ========================= */
.account-page .account-upload{
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap; /* mobile-friendly */
}

.account-page .account-upload .form-control{
  flex: 1 1 320px; /* take remaining width */
  min-width: 260px; /* prevent “ridiculously narrow” */
}

.account-page .account-upload .btn{
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 575.98px){
  .account-page .account-upload .form-control,
  .account-page .account-upload .btn{
    width: 100%;
  }
}

/* =========================
   3) Image cards
   ========================= */
.account-page .account-imgcard{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--app-text) 10%, transparent);
  background: color-mix(in oklab, var(--app-surface) 92%, transparent);
  height: 100%;
}

.account-page .account-imgcard__img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.account-page .account-imgcard__body{
  padding: .65rem;
}

/* =========================
   4) Empty gallery state
   ========================= */
.account-page .account-empty{
  margin-top: .75rem;
  padding: 1rem;
  border-radius: 18px;
  background: color-mix(in oklab, var(--app-soft) 65%, transparent);
  border: 1px dashed color-mix(in oklab, var(--app-text) 18%, transparent);
  text-align: center;
}

.account-page .account-empty__icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin: 0 auto .6rem;
  background: color-mix(in oklab, var(--brand-accent) 14%, var(--app-surface));
  border: 1px solid color-mix(in oklab, var(--brand-accent) 18%, transparent);
}

.account-page .account-empty__icon i{
  font-size: 1.25rem;
}

/* =========================
   5) Account details (key/value block)
   ========================= */
.account-page .account-kv{
  margin-top: .75rem;
  border-radius: 16px;
  background: color-mix(in oklab, var(--app-soft) 60%, transparent);
  border: 1px solid color-mix(in oklab, var(--app-text) 12%, transparent);
  overflow: hidden;
}

.account-page .account-kv__row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem;
  padding: .75rem .9rem;
  border-top: 1px solid color-mix(in oklab, var(--app-text) 10%, transparent);
}

.account-page .account-kv__row:first-child{
  border-top: 0;
}

.account-page .account-kv__k{
  color: var(--app-muted);
  font-weight: 600;
}

.account-page .account-kv__v{
  text-align: right;
  color: var(--app-text);
  max-width: 52ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   6) Danger card border
   ========================= */
.account-page .account-danger{
  border: 1px solid color-mix(in oklab, var(--brand-danger) 35%, transparent);
}


  /* =========================================================
   Account edit — scoped, theme-safe
   ========================================================= */

.account-page .dash-card{
  /* uses same dash-card look; nothing else needed here */
}

.account-page .account-avatarbox{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--app-text) 12%, transparent);
  background: color-mix(in oklab, var(--app-soft) 70%, transparent);
}

.account-page .account-avatarbox__img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.account-page .account-avatarbox__empty{
  height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  color: var(--app-text);
}

.account-page .account-avatarbox__empty i{
  font-size: 2rem;
}

.account-page .account-actions{
  display: grid;
  gap: .6rem;
}

/* Make form controls feel consistent with your theme */
.account-page .form-control,
.account-page .form-select{
  border-color: color-mix(in oklab, var(--app-text) 14%, transparent);
}

.account-page .form-control:focus,
.account-page .form-select:focus{
  border-color: color-mix(in oklab, var(--brand-primary) 45%, transparent);
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--brand-primary) 20%, transparent);
}

/* Summernote container (often looks ugly in dark mode if not adjusted) */
.account-page .note-editor.note-frame{
  border-color: color-mix(in oklab, var(--app-text) 14%, transparent);
  border-radius: 14px;
  overflow: hidden;
}

.account-page .note-toolbar{
  background: color-mix(in oklab, var(--app-soft) 70%, transparent);
  border-bottom-color: color-mix(in oklab, var(--app-text) 12%, transparent);
}

.account-page .note-editable{
  background: var(--app-surface);
  color: var(--app-text);
}


/* =========================================================
   Account settings — scoped (account-page account-settings)
   Uses your dash tokens and light/dark mode
   ========================================================= */

/* Choice cards (Theme) */
.account-settings .account-choicegrid{
  display: grid;
  gap: .6rem;
}

.account-settings .account-choice{
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: .6rem;
  align-items: start;
  padding: .85rem .9rem;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--app-text) 12%, transparent);
  background: color-mix(in oklab, var(--app-surface) 92%, transparent);
  cursor: pointer;
}

.account-settings .account-choice:hover{
  border-color: color-mix(in oklab, var(--app-text) 18%, transparent);
  background: color-mix(in oklab, var(--app-surface) 97%, transparent);
}

.account-settings .account-choice__title{
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.account-settings .account-choice__desc{
  display: block;
  margin-top: .15rem;
  color: var(--app-muted);
  font-size: .9rem;
}

/* Toggle rows */
.account-settings .account-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--app-text) 12%, transparent);
  background: color-mix(in oklab, var(--app-surface) 92%, transparent);
}

.account-settings .account-toggle__title{
  font-weight: 800;
  line-height: 1.15;
}

.account-settings .account-toggle__desc{
  color: var(--app-muted);
  font-size: .92rem;
  margin-top: .15rem;
}

/* Danger box inside a card (lighter than full red card) */
.account-settings .account-dangerbox{
  padding: .9rem;
  border-radius: 16px;
  background: color-mix(in oklab, var(--brand-danger) 6%, var(--app-surface));
  border: 1px solid color-mix(in oklab, var(--brand-danger) 24%, transparent);
}