/* =========================================================
   🔥 NOTIFICATIONS – GLASS / SOFT PREMIUM (FIX SQUARE LOOK)
   ========================================================= */

/* =========================
   WRAPPER (cała karta)
========================= */
.card{
  background: linear-gradient(
    135deg,
    rgba(12,14,22,.92),
    rgba(8,10,18,.96)
  );
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px; /* 👈 bardziej miękko */
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden; /* 🔥 usuwa „cięcia” */
}


/* =========================
   LIST
========================= */
.notifList{
  display:flex;
  flex-direction:column;
  gap:14px; /* 👈 więcej powietrza */
  padding: 8px 16px 16px;
}


/* =========================
   ITEM (tu był problem)
========================= */
.notifItem{
  position:relative;

  border-radius:18px; /* 👈 było 12 → teraz premium */
  border:1px solid rgba(255,255,255,.08);

  background: linear-gradient(
    145deg,
    rgba(255,255,255,.035),
    rgba(255,255,255,.015)
  );

  padding:14px;
  display:flex;
  align-items:flex-start;
  gap:12px;

  transition: all .2s ease;
}

/* 🔥 glow jak CRM */
.notifItem::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(80,140,255,.10),
      transparent 50%
    ),
    radial-gradient(
      120% 80% at 100% 100%,
      rgba(212,176,106,.10),
      transparent 50%
    );
  opacity:.0;
  transition:.25s;
  pointer-events:none;
}


/* hover */
.notifItem:hover{
  transform:translateY(-2px);
  border-color: rgba(255,255,255,.16);

  background: linear-gradient(
    145deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.025)
  );

  box-shadow:
    0 10px 30px rgba(0,0,0,.45),
    0 0 0 1px rgba(212,176,106,.12) inset;
}

.notifItem:hover::before{
  opacity:.8;
}


/* =========================
   ICON
========================= */
.notifIcon{
  width:36px;
  height:36px;
  border-radius:12px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.08);

  background: linear-gradient(
    145deg,
    rgba(0,0,0,.35),
    rgba(255,255,255,.03)
  );
}


/* =========================
   TEXT
========================= */
.notifTitle{
  font-weight:900;
  color:#fff;
}

.notifMeta{
  font-size:12px;
  color: rgba(255,255,255,.55);
  margin-top:4px;
}


/* =========================
   DOT
========================= */
.notifDot.unread{
  background: linear-gradient(135deg, #00ff88, #00c853);
  box-shadow:
    0 0 10px rgba(0,255,136,.6),
    0 0 20px rgba(0,255,136,.25);
}


/* =========================
   PILLS (bardziej premium)
========================= */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 10px;
  font-size:12px;
  border-radius:999px;
}

.pill--soft{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  color:#cbd5ff;
}

/* 🔥 GOLD/BLUE highlight */
.pill--warn{
  background: rgba(212,176,106,.15);
  border:1px solid rgba(212,176,106,.25);
  color:#ffe7b0;
}


/* =========================
   ACTIONS
========================= */
.iconBtn{
  width:34px;
  height:34px;
  border-radius:10px;

  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);

  transition:.18s;
}

.iconBtn:hover{
  background: rgba(255,255,255,.08);
  transform:translateY(-1px);
}
/* 🔥 SCROLL FIX – NOTIFICATIONS */
#powiadomienia .card{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#powiadomienia .card__body{
  flex: 0 0 auto;
}

#powiadomienia .notifList{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
/* 🔥 HIDE SCROLLBAR – NOTIFICATIONS */
#powiadomienia .notifList{
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}

#powiadomienia .notifList::-webkit-scrollbar{
  width: 0;
  height: 0;
}
#powiadomienia .notifList{
  -webkit-overflow-scrolling: touch;
}