/*
 * YARTEL Brand System — Global CSS
 * Shared across all pages via <link rel="stylesheet" href="/assets/yartel-brand.css">
 * Contains: role badges, Y emblems, logo usage, shared nav brand, profile styles
 */

/* ── ROLE BADGES ──────────────────────────────────────────────────────────────
 * Recreated from the brand asset sheet in CSS.
 * Each badge = Y arrow emblem + label text + arrow-shaped container.
 * Usage: <span class="ybadge ybadge-admin">ADMIN</span>
 */
.ybadge {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  position: relative;
}

/* The Y emblem block */
.ybadge::before {
  content: 'Y';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  font-weight: 900;
  font-style: italic;
  flex-shrink: 0;
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
}

/* The label block */
.ybadge span {
  display: flex;
  align-items: center;
  padding: 0 10px 0 6px;
  height: 22px;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
  margin-left: -1px;
}

/* ── ROLE VARIANTS ── */
.ybadge-owner::before   { background: #1A0A0A; color: #E84B55; border: 1px solid #3A1010; }
.ybadge-owner span      { background: #0F0808; color: #E84B55; }

.ybadge-admin::before   { background: #2A0808; color: #E84B55; }
.ybadge-admin span      { background: #1A0808; color: #FF5555; }

.ybadge-headadmin::before { background: #2A0808; color: #E84B55; }
.ybadge-headadmin span    { background: #1A0808; color: #FF7777; }

.ybadge-moderator::before { background: #2A0808; color: #E84B55; }
.ybadge-moderator span    { background: #140808; color: #FF9999; }

.ybadge-trialmod::before  { background: #1A1A2A; color: #8888FF; }
.ybadge-trialmod span     { background: #101018; color: #AAAAFF; }

.ybadge-support::before   { background: #1A1A1A; color: #BBBBBB; }
.ybadge-support span      { background: #111111; color: #CCCCCC; }

.ybadge-developer::before { background: #0A1428; color: #4488FF; }
.ybadge-developer span    { background: #080E1A; color: #66AAFF; }

.ybadge-contributor::before { background: #180A28; color: #AA44FF; }
.ybadge-contributor span    { background: #100818; color: #CC88FF; }

.ybadge-vip::before       { background: #281A08; color: #FFAA44; }
.ybadge-vip span          { background: #180E04; color: #FFCC66; }

.ybadge-donator::before   { background: #280A18; color: #FF44AA; }
.ybadge-donator span      { background: #180810; color: #FF77CC; }

.ybadge-member::before    { background: #1A1A1A; color: #AAAAAA; }
.ybadge-member span       { background: #111111; color: #CCCCCC; }

.ybadge-verified::before  { background: #082808; color: #44FF44; }
.ybadge-verified span     { background: #041804; color: #66FF88; }

.ybadge-staff::before     { background: #180828; color: #AA44FF; }
.ybadge-staff span        { background: #100818; color: #CC88FF; }

.ybadge-partner::before   { background: #281408; color: #FF8844; }
.ybadge-partner span      { background: #180C04; color: #FFAA66; }

.ybadge-legend::before    { background: #282008; color: #FFCC00; }
.ybadge-legend span       { background: #181400; color: #FFDD44; }

.ybadge-bots::before      { background: #082028; color: #00CCFF; }
.ybadge-bots span         { background: #041418; color: #44DDFF; }

.ybadge-customer::before  { background: #181818; color: #666; }
.ybadge-customer span     { background: #111111; color: #888; }

/* ── FLAT PILL BADGES (simpler version for tables) ── */
.ypill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
.ypill::before {
  content: 'Y';
  font-size: 9px;
  font-weight: 900;
  font-style: italic;
  opacity: .8;
}
.ypill-owner       { background: #2A0808; color: #E84B55; border: 1px solid rgba(232,75,85,.2); }
.ypill-admin       { background: #2A0808; color: #FF6666; border: 1px solid rgba(255,80,80,.15); }
.ypill-headadmin   { background: #2A0808; color: #FF8888; border: 1px solid rgba(255,100,100,.15); }
.ypill-moderator   { background: #2A0808; color: #FFB0B0; border: 1px solid rgba(255,150,150,.15); }
.ypill-trialmod    { background: #12121E; color: #9999EE; border: 1px solid rgba(140,140,220,.15); }
.ypill-support     { background: #1A1A1A; color: #AAAAAA; border: 1px solid rgba(170,170,170,.12); }
.ypill-developer   { background: #0A1020; color: #5599FF; border: 1px solid rgba(80,140,255,.15); }
.ypill-contributor { background: #160820; color: #BB77FF; border: 1px solid rgba(170,100,255,.15); }
.ypill-vip         { background: #201408; color: #FFBB44; border: 1px solid rgba(255,180,60,.15); }
.ypill-donator     { background: #200810; color: #FF66BB; border: 1px solid rgba(255,80,160,.15); }
.ypill-verified    { background: #082008; color: #55EE77; border: 1px solid rgba(60,200,100,.15); }
.ypill-staff       { background: #120820; color: #BB77FF; border: 1px solid rgba(170,100,255,.15); }
.ypill-partner     { background: #201008; color: #FF9966; border: 1px solid rgba(255,140,80,.15); }
.ypill-legend      { background: #201A00; color: #FFCC00; border: 1px solid rgba(255,200,0,.15); }
.ypill-bots        { background: #001820; color: #00CCFF; border: 1px solid rgba(0,200,255,.15); }
.ypill-member      { background: #161616; color: #888888; border: 1px solid rgba(136,136,136,.12); }
.ypill-customer    { background: #161616; color: #666666; border: 1px solid rgba(100,100,100,.1); }
.ypill-premium     { background: #2E2410; color: #C99B42; border: 1px solid rgba(201,155,66,.2); }
.ypill-free        { background: #1A2E20; color: #5DB87A; border: 1px solid rgba(93,184,122,.2); }

/* ── SHARED NAV BRAND ─────────────────────────────────────────────────────────
 * Replaces the old .brand-mark "Y" div + .brand-text everywhere.
 * Usage: <a class="yn-brand" href="/"><img src="/assets/logo.png" alt="YARTEL"></a>
 */
.yn-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.yn-brand img {
  height: 24px;
  width: auto;
  display: block;
  /* keeps logo white on dark backgrounds */
  filter: brightness(0) invert(1);
  transition: opacity .2s;
}
.yn-brand:hover img { opacity: .8; }

/* admin nav — slightly smaller */
.yn-brand.sm img { height: 20px; }

/* ── PROFILE AVATAR ───────────────────────────────────────────────────────────
 * Consistent avatar across dashboard/admin/store nav.
 */
.ya-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E84B55, #8A1820);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  border: 2px solid rgba(232, 75, 85, .2);
  box-shadow: 0 2px 10px rgba(232, 75, 85, .25);
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s;
}
.ya-avatar:hover { box-shadow: 0 4px 16px rgba(232, 75, 85, .4); }
.ya-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.ya-avatar.sm  { width: 28px; height: 28px; font-size: 11px; border-width: 1.5px; }
.ya-avatar.lg  { width: 72px; height: 72px; font-size: 28px; border-width: 3px; }
.ya-avatar.xl  { width: 96px; height: 96px; font-size: 36px; border-width: 3px; }

/* ── PROFILE CARD (dashboard profile section) ────────────────────────────────
 * Usage: <div class="yprofile-card">...</div>
 */
.yprofile-card {
  background: #181818;
  border: 1px solid #262626;
  border-radius: 14px;
  overflow: hidden;
}
.yprofile-banner {
  height: 90px;
  background: linear-gradient(135deg, #2A0808, #0F0F0F 60%, #0A0A14);
  position: relative;
  overflow: hidden;
}
.yprofile-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, #ffffff08 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff08 1px, transparent 1px);
  background-size: 20px 20px;
}
.yprofile-banner-accent {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, #E84B55 40%, #E84B55 60%, transparent);
}
.yprofile-body { padding: 0 20px 20px; }
.yprofile-avatar-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -20px;
  margin-bottom: 14px;
}
.yprofile-name { font-size: 17px; font-weight: 800; color: #E8E8E8; margin-bottom: 3px; }
.yprofile-handle { font-size: 11px; color: #444; margin-bottom: 10px; }
.yprofile-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.yprofile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #222;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.yprofile-stat {
  background: #181818;
  padding: 12px;
  text-align: center;
}
.yprofile-stat-val { font-size: 18px; font-weight: 800; color: #E0E0E0; letter-spacing: -.5px; }
.yprofile-stat-lbl { font-size: 9.5px; color: #3A3A3A; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-top: 3px; }
.yprofile-discord {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: rgba(88, 101, 242, .07);
  border: 1px solid rgba(88, 101, 242, .15);
  border-radius: 8px;
  font-size: 12px;
  color: #8B92E8;
  font-weight: 600;
}
.yprofile-discord svg { width: 16px; height: 16px; flex-shrink: 0; }
.yprofile-discord-name { color: #E8E8E8; font-weight: 700; }

/* ── Y ICON BUTTONS (from bottom row of brand sheet) ─────────────────────────
 * Icon-only circular buttons matching brand sheet icons
 */
.yi-btn {
  width: 34px; height: 34px;
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  display: grid; place-items: center;
  cursor: pointer;
  color: #666;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
  text-decoration: none;
  position: relative;
}
.yi-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #E0E0E0;
}
.yi-btn svg { width: 15px; height: 15px; }
.yi-btn.red { border-color: rgba(217,64,64,.2); color: #D94040; }
.yi-btn.red:hover { background: rgba(217,64,64,.1); border-color: rgba(217,64,64,.4); color: #E84B55; }

/* notification dot */
.yi-btn .notif-dot {
  position: absolute; top: 5px; right: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #D94040;
  border: 1.5px solid #0E0E0E;
}

/* ── FOOTER BRAND ─────────────────────────────────────────────────────────────
 * Shared footer brand using logo.png
 */
.yn-footer-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.yn-footer-brand img {
  height: 18px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .3;
  transition: opacity .2s;
}
.yn-footer-brand:hover img { opacity: .6; }