/* ═══════════════════════════════════════════════════════════════
   pretty_overlay.css — Lunar X Messenger v3.3 (HIGH CONTRAST)
   Premium design + GARANTERAT läsbar text överallt
   VIKTIGT: Påverkar INTE index.php/register.php (de har egen design)
═══════════════════════════════════════════════════════════════ */

/* ─── BAKGRUND — bara om sidan INTE har egen body-bakgrund ─── */
body:not(.no-overlay):not(.dark-page) .topbar ~ * {
  /* placeholder så denna selektor finns */
}

/* Endast applicera bakgrund på sidor som INTE har topbar (community-sidor)
   eller på sidor med explicit klass .community-page */
body.community-page,
.has-community-header body {
  background:
    radial-gradient(ellipse at top left, #d8e4f8 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, #e8d8f8 0%, transparent 50%),
    linear-gradient(135deg, #e8eef8 0%, #f0e8f8 100%) !important;
  background-attachment:fixed !important;
  color:#1a2a4a !important;
}

/* Lägg bara på där det finns .topbar (alltså inloggade community-sidor) */
body:has(.topbar) {
  background:
    radial-gradient(ellipse at top left, #d8e4f8 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, #e8d8f8 0%, transparent 50%),
    linear-gradient(135deg, #e8eef8 0%, #f0e8f8 100%) !important;
  background-attachment:fixed !important;
  color:#1a2a4a !important;
}

/* ─── TOPBAR ─── */
.topbar{
  background:linear-gradient(135deg,#003580 0%,#001f50 50%,#1a0040 100%) !important;
  box-shadow:0 4px 20px rgba(0,32,96,.25) !important;
  position:relative
}
.topbar, .topbar a, .topbar span, .topbar .tbtn { color:#fff !important; }
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,221,68,.4),transparent);
  pointer-events:none
}
.tlogo img{
  height:36px !important;
  width:auto !important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)) !important
}
.tbtn{transition:all .2s !important}
.tbtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.2) !important}
.tbtn-badge{
  background:linear-gradient(135deg,#ff453a,#cc0033) !important;
  color:#fff !important;
  animation:pulse-badge 2s ease-in-out infinite
}
@keyframes pulse-badge{
  0%,100%{box-shadow:0 2px 6px rgba(255,69,58,.4)}
  50%{box-shadow:0 2px 12px rgba(255,69,58,.7)}
}

/* ─── CARDS — SOLID VIT, INGEN BLUR ─── */
.card{
  background:#ffffff !important;
  border:1px solid #c8d6e8 !important;
  border-radius:16px !important;
  box-shadow:0 2px 8px rgba(0,32,96,.06) !important;
  color:#1a2a4a !important;
}
.card:hover{box-shadow:0 6px 20px rgba(0,32,96,.1) !important}
.card h1, .card h2, .card h3, .card h4, .card h5 { color:#002060 !important }
.card p, .card span, .card div, .card td, .card li, .card label { color:#1a2a4a }

/* ─── BUTTONS ─── */
.btn{transition:all .2s !important;font-weight:700 !important}
.btn:hover{transform:translateY(-2px) !important}
.btn-primary{
  background:linear-gradient(135deg,#0066dd,#003580) !important;
  color:#fff !important;
  box-shadow:0 4px 14px rgba(0,102,221,.3) !important
}
.btn-primary:hover{box-shadow:0 6px 20px rgba(0,102,221,.45) !important}
.btn-secondary{
  background:#fff !important;
  color:#1a2a4a !important;
  border:1.5px solid #c8d6e8 !important
}
.btn-secondary:hover{border-color:#0066dd !important;color:#0066dd !important}
.btn-success{
  background:linear-gradient(135deg,#00aa44,#008833) !important;
  color:#fff !important
}
.btn-danger{
  background:#fff !important;
  color:#c0392b !important;
  border:1.5px solid #f5c8c4 !important
}
.btn-danger:hover{
  background:linear-gradient(135deg,#c0392b,#a02020) !important;
  color:#fff !important
}

/* ─── INPUTS ─── */
input[type=text],input[type=password],input[type=url],input[type=email],
input[type=search],input[type=number],input[type=tel],input[type=date],
textarea,select{
  background:#ffffff !important;
  color:#1a2a4a !important;
  border:1.5px solid #c8d6e8 !important;
  border-radius:10px !important;
  transition:all .2s !important
}
input:focus,textarea:focus,select:focus{
  border-color:#0066dd !important;
  box-shadow:0 0 0 4px rgba(0,102,221,.12) !important;
  outline:none !important
}
input::placeholder,textarea::placeholder{color:#8a9aab !important}
label{color:#506080 !important;font-weight:700 !important}

/* ─── AVATARS ─── */
.av{
  box-shadow:0 2px 6px rgba(0,32,96,.15) !important
}

/* ─── ALERTS ─── */
.alert{border-radius:12px !important}
.alert.ok{background:#e7f7ed !important;color:#1a8a44 !important;border:1px solid #a7e3bc !important}
.alert.err{background:#fdeae8 !important;color:#c0392b !important;border:1px solid #f5c8c4 !important}
.alert.info{background:#e8f1fc !important;color:#0055aa !important;border:1px solid #b8d3ed !important}
.alert.warn{background:#fff7e0 !important;color:#7a5a10 !important;border:1px solid #f5d878 !important}

/* ─── BADGES ─── */
.badge{
  background:#e8f1fc !important;
  color:#0055aa !important;
  border:1px solid rgba(0,85,170,.2) !important;
  font-weight:700 !important
}
.badge-pinned{background:#fff7e0 !important;color:#7a5a10 !important;border-color:rgba(122,90,16,.25) !important}
.badge-new{background:#e7f7ed !important;color:#1a8a44 !important;border-color:rgba(26,138,68,.25) !important}
.badge-locked{background:#fdeae8 !important;color:#c0392b !important;border-color:rgba(192,57,43,.25) !important}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#e8eef8}
::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#a0b8d8,#7a98c0);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#7a98c0,#5a78a0)}

/* ─── PROFIL ─── */
.profile-banner, .banner, .pheader {
  border-radius:18px !important;
  box-shadow:0 6px 20px rgba(0,32,96,.1) !important
}
.profile-info, .pinfo {
  background:#ffffff !important;
  border-radius:16px !important;
  color:#1a2a4a !important
}
.profile-info *, .pinfo * { color:#1a2a4a }
.profile-info h1, .profile-info h2, .profile-info h3,
.pinfo h1, .pinfo h2, .pinfo h3 { color:#002060 !important }

/* ─── STAT-BOX ─── */
.stat-box, .pstat {
  background:#ffffff !important;
  border:1px solid #c8d6e8 !important;
  border-radius:14px !important;
  color:#1a2a4a !important;
  transition:all .25s
}
.stat-box:hover, .pstat:hover {
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(0,32,96,.1)
}
.stat-box .stat-num, .pstat .stat-num,
.stat-box .num, .pstat .num {
  color:#002060 !important;
  font-weight:900 !important
}
.stat-box .stat-lbl, .pstat .stat-lbl,
.stat-box .lbl, .pstat .lbl {
  color:#506080 !important
}

/* ─── INLÄGG / POSTS ─── */
.post, .entry, .photo-item, .topic, .feed-post {
  background:#ffffff !important;
  border:1px solid #c8d6e8 !important;
  border-radius:14px !important;
  color:#1a2a4a !important
}
.post *, .entry *, .topic *, .feed-post * { color:#1a2a4a }
.post a, .entry a, .topic a, .feed-post a { color:#0066dd !important }
.post:hover, .entry:hover, .topic:hover, .feed-post:hover {
  box-shadow:0 4px 16px rgba(0,32,96,.08) !important
}

/* ─── MEDLEMSKORT ─── */
.member-card, .user-card, .friend-card {
  background:#ffffff !important;
  border:1px solid #c8d6e8 !important;
  border-radius:14px !important;
  color:#1a2a4a !important
}
.member-card *, .user-card *, .friend-card * { color:#1a2a4a }
.member-card:hover, .user-card:hover, .friend-card:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,32,96,.1) !important
}

/* ─── TABS ─── */
.tab, .tab-btn{
  color:#506080 !important;
  font-weight:700 !important;
  transition:all .2s
}
.tab.active, .tab-btn.active{
  color:#0066dd !important;
  border-bottom-color:#0066dd !important
}
.tab:hover:not(.active){background:#f0f4fa !important}

/* ─── MODAL ─── */
.modal{
  background:#ffffff !important;
  color:#1a2a4a !important;
  border-radius:16px !important;
  box-shadow:0 20px 40px rgba(0,0,0,.2) !important
}
.modal *{color:#1a2a4a}
.modal h1, .modal h2, .modal h3{color:#002060 !important}
.modal-overlay{background:rgba(0,32,96,.4) !important}

/* ─── NOTIFIKATIONS-CENTER ─── */
.notif-item, .notification {
  background:#ffffff !important;
  border:1px solid #e0e8f2 !important;
  border-radius:12px !important;
  color:#1a2a4a !important;
  transition:all .15s
}
.notif-item *, .notification * { color:#1a2a4a }
.notif-item.unread, .notification.unread {
  background:#e8f1fc !important;
  border-left:3px solid #0066dd !important
}
.notif-item:hover, .notification:hover {
  border-color:#0066dd !important;
  transform:translateX(2px)
}

/* ─── INKORG / DM ─── */
.dm-item, .inbox-item, .conv {
  background:#ffffff !important;
  border:1px solid #e0e8f2 !important;
  border-radius:12px !important;
  color:#1a2a4a !important
}
.dm-item *, .inbox-item *, .conv * { color:#1a2a4a }
.dm-item.unread, .inbox-item.unread, .conv.unread {
  background:#fff7e0 !important;
  border-left:3px solid #ffaa00 !important
}
.dm-item:hover, .inbox-item:hover, .conv:hover {
  border-color:#0066dd !important
}

/* ─── GÅVOR / ACHIEVEMENTS ─── */
.gift-item, .achievement, .item-card, .pryl {
  background:#ffffff !important;
  border:1px solid #c8d6e8 !important;
  border-radius:14px !important;
  color:#1a2a4a !important;
  transition:all .25s
}
.gift-item *, .achievement *, .item-card *, .pryl * { color:#1a2a4a }
.gift-item:hover, .achievement:hover, .item-card:hover, .pryl:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,32,96,.1)
}
.achievement.unlocked {
  background:#fff7e0 !important;
  border-color:rgba(255,170,0,.4) !important
}

/* ─── LÄNKAR ─── */
a{color:#0066dd}
a:hover{color:#0055bb}

/* ─── HEADINGS GLOBALT ─── */
h1, h2, h3, h4, h5, h6 { color:#002060 }
.muted, .text-muted { color:#7a8aa0 !important }

/* ─── TABLES ─── */
table {background:#ffffff;color:#1a2a4a}
th {background:#f0f4fa !important;color:#002060 !important;font-weight:800 !important}
td {color:#1a2a4a !important}

/* ─── TILLBAKA-KNAPP ─── */
.back-btn, .btn-back, a.back {
  background:#ffffff !important;
  border:1.5px solid #c8d6e8 !important;
  color:#506080 !important;
  border-radius:9px !important;
  font-weight:700 !important
}
.back-btn:hover, .btn-back:hover, a.back:hover {
  border-color:#0066dd !important;
  color:#0066dd !important
}

/* ─── SELECTION ─── */
::selection{background:#0066dd;color:#fff}