/* app/assets/css/account-pages.css
   Beautification layer for:
   - Account pages
   - Public user profiles
   - Manage my decks
   - Login pages

   IMPORTANT:
   This file MUST NOT override the site background.
   Your global background comes from ../assets/css/style.css.
*/

/* ---------------------------------------------------------
   Background safety: never force white / never “new theme”.
   - If your site sets background on body/html, we inherit it.
   - If (for some reason) nothing is set, we provide a dark fallback
     to avoid the browser default white.
--------------------------------------------------------- */
html{
  background-color: #070A12; /* fallback only */
}
body.page-app{
  background: inherit !important; /* key: do NOT set transparent */
}

/* ---------- Theme helpers ---------- */
:root{
  --dtn-blue: #00B3FF;
  --dtn-violet: #7C4DFF;

  /* Dark glass panels */
  --dtn-bg0: rgba(8,10,16,.72);
  --dtn-bg1: rgba(12,14,22,.78);

  /* Borders */
  --dtn-line: rgba(255,255,255,.10);
  --dtn-line2: rgba(255,255,255,.14);

  /* Shadows */
  --dtn-shadow: 0 22px 70px rgba(0,0,0,.62);
  --dtn-shadow2: 0 12px 34px rgba(0,0,0,.50);

  --dtn-radius: 18px;
  --dtn-radius2: 24px;
}

/* ---------- Page container ---------- */
.appwrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 14px 56px;
}
@media (min-width: 860px){
  .appwrap{ padding: 28px 16px 72px; }
}

/* ---------- Hero header (dark, matches site vibe) ---------- */
.dtn-hero{
  position: relative;
  border-radius: var(--dtn-radius2);
  padding: 18px 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10,12,18,.78), rgba(8,10,16,.78));
  border: 1px solid var(--dtn-line);
  box-shadow: var(--dtn-shadow2);
}
/* remove the glow layer entirely (it was contributing to “brightness”) */
.dtn-hero::before{
  content:"";
  position:absolute; inset:-2px;
  opacity: 0 !important;
  pointer-events:none;
}
.dtn-hero > *{ position: relative; }

.dtn-heroTop{
  display:flex;
  gap: 12px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
}
.dtn-heroTitle{ margin: 0; line-height: 1.06; }
.dtn-heroSub{ margin-top: 6px; font-size: 13px; opacity: .90; }
.dtn-heroActions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

/* ---------- Glass cards (dark) ---------- */
.card.dtn-card,
.page-app .card{
  border-radius: var(--dtn-radius);
  background: linear-gradient(180deg, var(--dtn-bg1), var(--dtn-bg0));
  border: 1px solid var(--dtn-line);
  box-shadow: var(--dtn-shadow2);
  backdrop-filter: blur(10px);
}

.page-app .card{
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.page-app .card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--dtn-shadow);
}

/* Subtle neon outline (very low intensity) */
.dtn-outline{ position: relative; }
.dtn-outline::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(0,179,255,.18),
    rgba(124,77,255,.16),
    rgba(0,179,255,.10)
  );
  opacity: .08 !important;
  filter: blur(12px) !important;
}

/* ---------- Forms (darker inputs) ---------- */
.page-app .lbl,
.page-app label{
  font-weight: 900;
  letter-spacing: .2px;
}
.page-app .input,
.page-app .select,
.page-app textarea{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(6,8,12,.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.page-app .input:focus,
.page-app .select:focus,
.page-app textarea:focus{
  outline: none;
  border-color: rgba(0,179,255,.42);
  box-shadow:
    0 0 0 3px rgba(0,179,255,.10),
    0 0 18px rgba(0,179,255,.10);
}

/* ---------- Buttons glow (less intense) ---------- */
.page-app .btn{ border-radius: 999px; }
.page-app .btn:hover{
  box-shadow:
    0 0 0 3px rgba(0,179,255,.08),
    0 0 18px rgba(0,179,255,.10);
}
.page-app .btn.ghost:hover,
.page-app .btn.btn-ghost:hover{
  box-shadow:
    0 0 0 3px rgba(124,77,255,.08),
    0 0 18px rgba(124,77,255,.10);
}

/* ---------- Avatar ---------- */
.dtn-avatarRow{
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap:wrap;
}
.dtn-avatarPreview{
  width: 108px;
  height: 108px;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  flex: 0 0 auto;
}
.dtn-avatarPreview img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.dtn-avatarHint{ font-size: 12px; opacity:.9; }

/* ---------- Role tags ---------- */
.roleTags{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  align-items:center;
}
.roleTag{
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
}
.roleTag.role-admin{
  border-color: rgba(255, 214, 102, .26);
  box-shadow: 0 0 14px rgba(255,214,102,.08);
}
.roleTag.role-dueltainer{
  border-color: rgba(0,179,255,.28);
  box-shadow: 0 0 14px rgba(0,179,255,.10);
}
.roleTag.role-moderator{
  border-color: rgba(124,77,255,.28);
  box-shadow: 0 0 14px rgba(124,77,255,.10);
}
.roleTag.role-tournament_host{
  border-color: rgba(0,255,170,.22);
  box-shadow: 0 0 14px rgba(0,255,170,.08);
}

/* ---------- Layout helpers ---------- */
.dtn-grid2{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 980px){
  .dtn-grid2{ grid-template-columns: 1.15fr .85fr; }
}
.dtn-sectionTitle{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.dtn-sectionTitle h2{ margin: 0; }

.dtn-softHr{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  margin: 16px 0;
}

/* Links editor rows */
.linkRow{
  display:grid;
  grid-template-columns: 170px 1fr 1.3fr 44px;
  gap: 10px;
  align-items:center;
  margin-top: 10px;
}
@media (max-width: 760px){
  .linkRow{ grid-template-columns: 1fr; }
  .linkRow button{ width: 100%; }
}

/* ---------- Public user profile ---------- */
.userHero{ border-radius: var(--dtn-radius2); }
.userHeroRow{
  display:flex;
  gap: 16px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.userAvatarWrap{
  width: 120px;
  height: 120px;
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  flex: 0 0 auto;
}
.userAvatarWrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.userHeroMeta{ min-width: 240px; flex: 1 1 auto; }
.userUsername{
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: .3px;
}
.userDisplay{ font-size: 14px; margin-top: 4px; }
.userBio{ margin-top: 10px; line-height: 1.45; }

.decksGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 900px){
  .decksGrid{ grid-template-columns: 1fr 1fr; }
}
.deckRow{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.deckRow:hover{ border-color: rgba(255,255,255,.14); }

/* Admin panel */
.adminCard{
  border: 1px solid rgba(255,214,102,.16) !important;
}
.adminGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 980px){
  .adminGrid{ grid-template-columns: 1fr 1fr; }
}
.rolePick{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.rolePick:hover{ border-color: rgba(255,255,255,.14); }

/* ---------- Decks page toolbar ---------- */
.decksToolbar{
  border-radius: var(--dtn-radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 10px;
  display:flex;
  gap: 10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.decksToolbar .toolbarRight{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}
.toolbarGroup{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(6,8,12,.55);
}
.toolbarLabel{
  font-size: 12px;
  font-weight: 1000;
  opacity: .9;
}
.deckCount{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-size: 12px;
}

/* ---------- Login grid ---------- */
.page-login .loginGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (min-width: 980px){
  .page-login .loginGrid{ grid-template-columns: 1fr 1fr; }
}
.page-login .loginCardTitle{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.page-login .loginCardTitle .tag{
  font-size: 12px;
  font-weight: 1000;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.page-login .loginTip{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.35;
  opacity: .92;
}

/* =========================================================
   DTN Role Pills — match Members page look (pill/bill style)
   Applies to me.html + user.html role tags
   ========================================================= */

.roleTags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

/* pill base */
.roleTags .roleTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .25px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  opacity: .96;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 16px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  transform: translateZ(0);

  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.roleTags .roleTag:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 22px rgba(0,0,0,.28);
}

/* role colors (same vibe as members.css) */
.roleTags .role-admin{
  border-color: rgba(255, 77, 109, .60);
  background: rgba(255, 77, 109, .12);
  box-shadow: 0 0 0 1px rgba(255, 77, 109, .18) inset, 0 0 18px rgba(255, 77, 109, .18);
}
.roleTags .role-moderator{
  border-color: rgba(0, 179, 255, .60);
  background: rgba(0, 179, 255, .10);
  box-shadow: 0 0 0 1px rgba(0, 179, 255, .18) inset, 0 0 18px rgba(0, 179, 255, .18);
}
.roleTags .role-tournament_host{
  border-color: rgba(124, 77, 255, .68);
  background: rgba(124, 77, 255, .12);
  box-shadow: 0 0 0 1px rgba(124, 77, 255, .20) inset, 0 0 18px rgba(124, 77, 255, .18);
}
.roleTags .role-dueltainer{
  border-color: rgba(0, 255, 170, .55);
  background: rgba(0, 255, 170, .10);
  box-shadow: 0 0 0 1px rgba(0, 255, 170, .16) inset, 0 0 18px rgba(0, 255, 170, .14);
}
.roleTags .role-member{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 0 14px rgba(255,255,255,.08);
}
.roleTags .role-none{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 0 14px rgba(255,255,255,.08);
}

/* --- Profile action buttons (Friend/DM/Chat/Block) --- */
.profileActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.profileActions .btn{ border-radius:14px; }
.profileActions .btn.warn{
  border-color: rgba(255, 77, 109, .55);
  background: rgba(255, 77, 109, .12);
}