/* ===== TOPBAR ===== */
*, *::before, *::after { font-family: 'Roboto', "Segoe UI", system-ui, Arial; }
:root{
  --topbar-surface: rgba(255,255,255,0.96);
  --topbar-border: rgba(15,23,42,0.08);
  --topbar-shadow: 0 18px 44px rgba(15,23,42,0.12);
  --topbar-shadow-soft: 0 12px 30px rgba(15,23,42,0.10);
  --topbar-hover: #f6f8fc;
  --topbar-muted: #6b7280;
  --clinical-accent: #d86a2e;
  --clinical-accent-border: rgba(216,106,46,0.24);
}

#topbar {
  height: 80px;
  width: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 999;
}

/* LOGO */
.logo img {
  display: block;
}

/* ===== MODE SWITCH ===== */
.mode-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 10px;

  position: relative;   /* 🔥 FIX klików */
  z-index: 20;          /* 🔥 nad overlayami */
}

.mode-switch button {
  display: flex;
  align-items: center;
  gap: 10px;

  height: 44px;
  padding: 0 16px;

  background: #f4f6fb;

  border: 1px solid #e2e6f0;
  border-radius: 12px;

  cursor: pointer;
  font-size: 14px;

  transition: all 0.2s ease;

  /* 🔥 USUŃ TEN CZARNY BORDER */
  outline: none;
  box-shadow: none;

  /* 🔥 pewność że klik działa */
  pointer-events: auto;
}

.mode-switch button:focus{
  outline: none;
  box-shadow: none;
}

/* ACTIVE */
.mode-switch button.active {
  background: white;
  color: var(--accent);

  border: 1px solid rgba(0,0,0,0.08);

  box-shadow: 
    0 4px 12px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.06);

  font-weight: 600;
}

/* HOVER */
.mode-switch button:hover {
  background: #eef1f7;
  border-color: #d6dbe6;
}

/* CLICK efekt */
.mode-switch button:active{
  transform: scale(0.97);
}


/* ICON */
.btn-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}


.mode-switch button + button {
  margin-left: 14px; /* 🔥 kontrolujesz odstęp */
}


/* ===== KONIEC BUTTONOW DIAGNOZA ROZNICOWANIE I PACJENTOWY CZYLI MODE SWITCH ===== */





























/* ===== DRAWER ===== */
.drawer-toggle-container img {
  width: 22px;
  cursor: pointer;
  opacity: 0.7;
}

/* ===== RIGHT SIDE ===== */
.controls {
  display: flex;
  align-items: center;
  gap: 28px;

  margin-left: auto;
  margin-right: 65px;

  flex-shrink: 0;
}

/* ICONS */
.topbar-icon img {
  width: 24px;
  opacity: 0.6;
  cursor: pointer;
  transition: 0.2s;
}

.topbar-icon img:hover {
  opacity: 1;
  transform: scale(1.1);
}















/* ===== NOTIFICATIONSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS ===== */
/* ===== NOTIFICATIONS ===== */

.topbar-notifications{
  position: relative;
}

/* 🔔 ICON */
.notif-icon {
  position: relative;
  cursor: pointer;
}

.notif-icon img {
  width: 22px;
}

/* 🔴 BADGE */
.notif-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  background: #e33d55;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 50%;
}

/* ===== DROPDOWN ===== */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0; /* 🔥 FIX POZYCJI */

  min-width: 260px;
  max-height: 320px; /* 🔥 scroll */
  overflow-y: auto;

  background: rgba(255,255,255,0.96);
  color: #111;

  backdrop-filter: blur(14px);

  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);

  padding: 12px;

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;

  transition: all 0.18s ease;
  z-index: 9999;
}

.notif-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===== ITEM ===== */
.notif-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
font-weight: 400;
  padding:10px;
  border-radius:10px;

  cursor:pointer;
  transition:0.2s;
}

/* hover */
.notif-item:hover{
  background:rgba(0,0,0,0.05);
}

/* unread */
.notif-item.unread{
  font-weight:600;
}

/* LEFT */
.notif-left{
  display:flex;
  align-items:center;
  gap:10px;
}

/* DOT */
.notif-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}

/* 🟡 normal */
.notif-dot.normal{
  background:#f5b400;
}

/* 🔴 admin */
.notif-dot.admin{
  background:#e53935;
}

/* ❌ CLOSE */
.notif-close{
  opacity:0;
  cursor:pointer;
  transition:0.2s;
}

.notif-item:hover .notif-close{
  opacity:1;
}
.notif-dot.warning{
  background:#f5b400;
}
/* ===== FOOTER ===== */
.notif-footer{
  margin-top:8px;
  padding:10px;
  text-align:center;
  font-size:13px;
  border-top:1px solid rgba(0,0,0,0.06);
  cursor:pointer;
}

.notif-footer:hover{
  background:rgba(0,0,0,0.04);
}

/* ===== DOT ANIMATION ===== */
@keyframes popDot{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.6); opacity:0.6; }
  100%{ transform:scale(0); opacity:0; }
}

.notif-dot.pop{
  animation: popDot 0.35s ease forwards;
}
.notif-item.fade-out{
  opacity: 0;
  transform: translateX(20px) scale(0.95);
  transition: all 0.3s ease;
}



.notif-content{
  display: flex;
  flex-direction: column;
}

/* 🔥 tekst główny */
.notif-text{
  font-size: 14px;
  font-weight: 500;
}

/* 🔥 DATA – MUSI nadpisać unread */
.notif-date{
  font-size: 11px !important;
  color: #999 !important;
  font-weight: 400 !important;   /* 🔥 TO BYŁ BRAK */
  opacity: 0.7;
  margin-top: 2px;
}

/* 🔥 DOT POP — JEDNA WERSJA (NAPRAWIONE) */
.notif-dot.pop{
  animation: popDot 0.35s ease forwards;
}

/* 🔥 SOFT COLLAPSE */
.notif-item.collapsing{
  overflow: hidden;
  transition: 
    height 0.25s ease,
    opacity 0.2s ease,
    margin 0.2s ease,
    padding 0.2s ease;
}

/* końcowy stan */
.notif-item.collapsed{
  height: 0 !important;
  opacity: 0;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: none;
}
/* ===== KONIECCCCCCCCCCCCCCCC  NOTIFICATIONSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS ===== */











/* ===== USER ===== */

/* 🔥 KONTAINER (WAŻNE) */
#account-box {
  position: relative;
  display: flex;
  align-items: center;

  border-radius: 14px;

  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}

/* highlight */
#account-box.open{
  background: rgba(255,255,255,0.7);

  backdrop-filter: blur(14px);

  box-shadow: 
    0 10px 30px rgba(0,0,0,0.12);
}

/* USER BUTTON */
.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;


min-width: 160px;   /* krótki nick — nie za małe */
max-width: 260px;   /* długi nick — ucinamy z ... */
  transition: background 0.15s ease;
}

.topbar-user:hover {
  background: rgba(0,0,0,0.05);
}

/* avatar (FIX SCALE BUG) */
.user-avatar {
  width: 44px;
  height: 44px;
  padding: 2px;
  border-radius: 50%;
  box-sizing: border-box;
  transition: box-shadow 0.18s ease, background 0.18s ease;
}



.user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display:block;
  object-fit:cover;
  background:transparent;
}

/* name */
.user-meta {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.user-name {
  font-size: 13px;
  font-weight: 500;
  max-width: 130px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.topbar-plan-badge{
  display:none;
  width:max-content;
  padding:3px 8px;
  border-radius:999px;
  background:linear-gradient(135deg,#ffe2cf,#ffb9c4);
  color:#7a2238;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.08em;
  box-shadow:0 4px 10px rgba(255,154,145,0.22);
}

/* ===== DROPDOWN ===== */

/* kontener */
#account-dropdown {
  position: absolute;

  top: 100%;
  left: 0;
  width: 100%;

  background: transparent;
  padding-top: 6px;

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;

  transition: all 0.2s ease;
}

#account-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* karta */
.account-card{
 background: #ffffff;                    /* w pełni białe */
 border: 1px solid rgba(0,0,0,0.08);    /* subtelna ramka */

  border-radius: 14px;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.12);

  padding: 10px;

  animation: dropdownSlide 0.2s ease;
}

/* animacja (BEZ SCALE!) */
@keyframes dropdownSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== CONTENT ===== */

.account-header {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px;
  border-radius: 12px;

  cursor: pointer;
}

.account-header:hover {
  background: rgba(0,0,0,0.06);
}

.account-avatar {
  width: 36px;
  height: 36px;

  border-radius: 50%;
  background: linear-gradient(135deg,#4facfe,#00f2fe);

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

  font-weight: 600;
  color: white;
  font-size: 14px;

  flex-shrink: 0; /* 🔥 FIX */
}

.account-name {
  font-size: 14px;
  font-weight: 500;
}

.account-email {
  font-size: 12px;
  opacity: 0.6;
}

.account-plan-line{
  margin-top:4px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  color:#c2410c;
  text-transform:uppercase;
}

.account-divider {
  height: 1px;
  margin: 6px 4px;
  background: rgba(0,0,0,0.08);
}

.account-item {
  padding: 10px;
  border-radius: 10px;

  font-size: 14px;
  cursor: pointer;

  transition: all 0.15s ease;
}

.account-item:hover {
  background: rgba(0,0,0,0.06);
  transform: translateX(2px);
}

.account-item.logout {
  color: #e53935;
}













/* ===== DIVIDER (iOS style) ===== */
.topbar-divider{
  width: 1px;
  height: 36px;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0,0,0,0.15),
    transparent
  );

  margin: 0 10px;
}







/* ===== LAYERS BOX ===== */
/* ===== LAYERS BOX ===== */
#layers-box{
  position: relative;
}

/* DROPDOWN */
.layers-dropdown{
  position:absolute;

  top: 50%;
  right: calc(100% + 8px);

  transform: translateY(-50%) translateX(20px);

  height: 60px;
  width: 320px;

  display: flex;
  align-items: center;

  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(12px);

  border-radius: 16px;
  box-shadow: none;

  padding: 6px 12px;
  gap: 16px;

  opacity:0;
  pointer-events:none;

  transition: all 0.25s ease;
}

.layers-dropdown.open{
  opacity:1;
  transform: translateY(-50%) translateX(0);
  pointer-events:auto;
}

/* CONTENT */
.layers-card{
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ITEM – JEDNA LINIA */
#layers-dropdown .layer-item{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;

  transition: 0.15s;
}

#layers-dropdown .layer-item:hover{
  background: rgba(0,0,0,0.05);
}

/* 🔥 IKONY – GLOBAL */
#layers-dropdown .layer-icon{
  width: 65px;
  height: 24px;
  flex-shrink: 0;
}

/* 🔥 PANEL IKONA – WIĘKSZA */
#layers-dropdown .layer-item:first-child .layer-icon{
  width: 34px;
  height: 34px;
}

/* SWITCH */
#layers-dropdown .switch-label{
  display:flex;
  align-items:center;
  gap:10px;
}

/* SWITCH BUTTON */
#layers-dropdown .ios-switch {
  width: 56px;
  height: 30px;
  border-radius: 16px;
}

#layers-dropdown .switch-thumb {
  width: 22px;
  height: 22px;
  top: 4px;
  left: 4px;
}

#layers-dropdown .ios-switch.active .switch-thumb {
  transform: translateX(26px);
}

/* 🔥 DARK MODE */
body.dark-mode .layers-dropdown{
  background: rgba(30,30,35,0.6);
}

body.dark-mode #layers-dropdown .layer-item:hover{
  background: rgba(255,255,255,0.08);
}






/* ===== DARKMODEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE */
body.dark-mode{
  background:#0f1115;
  color:#e5e7eb;
}

body.dark-mode #topbar{
  background:#161a22;
}

body.dark-mode .layers-card,
body.dark-mode .account-card{
  background: rgba(30,30,35,0.95);
  color:white;
}

body.dark-mode .layer-item:hover{
  background: rgba(255,255,255,0.08);
}





/* 🔥 CROSSFADE SWITCH */

#layers-dropdown .switch-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* oba obrazy NA SIEBIE */
#layers-dropdown .switch-icon {
  position: absolute;
  top: 0;
  left: 0;

  width: 100% !important;
  height: 100% !important;
  object-fit: cover;

  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}



/* 🌞 dzień – widoczny na start */
#layers-dropdown .switch-icon:first-child {
  opacity: 1;
  z-index: 1;
}

/* 🌙 noc – ukryty */
#layers-dropdown .switch-icon:last-child {
  opacity: 0;
  z-index: 2;
}

/* 🔥 PO AKTYWACJI */
#layers-dropdown .ios-switch.active .switch-icon:first-child {
  opacity: 0;
}

#layers-dropdown .ios-switch.active .switch-icon:last-child {
  opacity: 1;
}









/* 🔥 FORCE FIX SWITCH */

#layers-dropdown .ios-switch {
  width: 56px !important;
  height: 30px !important;
  border-radius: 16px !important;
}



#layers-dropdown .switch-thumb {
  width: 22px !important;
  height: 22px !important;
  top: 4px !important;
  left: 4px !important;
}

/* ruch */
#layers-dropdown .ios-switch.active .switch-thumb {
  transform: translateX(26px);
}
.layer-item {
  padding: 8px 10px;
  font-size: 13px;
}

/* 🔥 mniejszy item (panel + dark mode) */
#layers-dropdown .layer-item {
  padding: 6px 8px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

/* 🔥 układ ikona + tekst */
#layers-dropdown .layer-item {
  display: flex;
  flex-direction: column; /* 🔥 klucz */
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
#layers-dropdown .layer-icon {
  width: 26px !important;
  height: 26px !important;
}

#layers-dropdown .layer-item span,
#layers-dropdown .layer-item {
  font-size: 11px;
}

.switch-label{
  display:flex;
  align-items:center;
  gap:10px;
}


.layer-icon{
  width:18px;
  height:18px;
  object-fit:contain;
  opacity:0.8;
}
.switch-row input,
.switch-row::before,
.switch-row::after{
  display:none !important;
  content:none !important;
}
#layers-dropdown .layer-item span,
#layers-dropdown .layer-item{
  line-height: 1;
}


#layers-dropdown .switch-label span{
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
}



@keyframes notifPop{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.6); }
  100%{ transform: scale(0); opacity:0; }
}

/* ===== TOPBAR DROPDOWN OVERRIDES ===== */

.topbar-notifications{
  position: relative;
  display:flex;
  align-items:center;
}

.notif-icon{
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.notif-icon:hover,
.notif-icon.open{
  background: var(--topbar-hover);
  transform: translateY(-1px);
}

.notif-icon img{
  width: 22px;
  opacity: 0.72;
  transform-origin: top center;
  transition: opacity 0.18s ease;
}

.notif-icon:hover img,
.notif-icon.open img{
  opacity: 0.96;
}

.notif-icon.alert img{
  animation: bellSwing 0.65s ease-in-out;
}

@keyframes bellSwing{
  20% { transform: rotate(18deg); }
  40% { transform: rotate(-18deg); }
  60% { transform: rotate(6deg); }
  80% { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}

.notif-badge{
  top: 7px;
  right: 4px;
  min-width: 13px;
  height: 13px;
  padding: 0 2px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 8px;
  font-weight: 700;
  box-shadow: none;
}

.notif-dropdown{
  top: calc(100% + 10px);
  right: -18px;
  width: min(400px, calc(100vw - 32px));
  max-height: none;
  overflow: visible;
  padding: 0;
  background: transparent;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.notif-dropdown.open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.notif-card{
  overflow: hidden;
  background: #fff;
  border: none;
  border-radius: 18px;
  box-shadow: 0 18px 38px rgba(48,53,68,0.14);
  backdrop-filter: none;
  padding: 16px 20px 14px 22px;
}

.notif-dropdown-header{
  padding: 0 0 10px;
  margin: 0 0 10px;
  border-bottom: 1px solid #eef2f7;
  font-size: 15px;
  font-weight: 500;
  color: #98a2b3;
}

.notif-dropdown-header strong{
  color: #2563eb;
}

.notif-body{
  max-height: 320px;
  overflow-y: auto;
  padding-right: 2px;
}

.notif-empty{
  padding: 8px 0 0;
  font-size: 13px;
  color: #98a2b3;
}

.notif-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px 10px 12px;
  margin: 0;
  border-bottom:1px solid #eef2f7;
  border-radius: 12px;
  cursor:pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.3s ease;
}

.notif-item:hover{
  background: #f8fbff;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.08);
  transform: translateX(1px);
}

.notif-left{
  display:flex;
  align-items:flex-start;
  gap:11px;
  flex:1;
  min-width:0;
  padding-left: 2px;
}

.notif-dot{
  width:8px;
  height:8px;
  margin-top:6px;
  border-radius:50%;
  flex-shrink:0;
}

.notif-item.unread .notif-dot{
  animation: notifDotPulse 1.8s ease-in-out infinite;
}

.notif-dot.normal,
.notif-dot.warning{
  background:#f5b400;
  box-shadow: 0 0 0 0 rgba(245,180,0,0.38);
}

.notif-dot.admin{
  background:#e53935;
  box-shadow: 0 0 0 0 rgba(229,57,53,0.32);
}

@keyframes notifDotPulse{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.18);
  }
  100%{
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(255,255,255,0);
  }
}

.notif-content{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.notif-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px;
}

.notif-tag{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1;
}

.notif-tag-admin{
  background:linear-gradient(135deg,#fee2e2,#fed7aa);
  color:#b91c1c;
  border:1px solid rgba(239,68,68,0.14);
}

.notif-text{
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color:#596579;
  display:block;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.notif-item.unread .notif-text{
  font-weight: 500;
  color:#303544;
}

.notif-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  min-width:64px;
  flex-shrink:0;
}

.notif-date{
  margin-top: 0;
  font-size: 11px !important;
  color: #c1c9d6 !important;
  font-weight: 500 !important;
  opacity: 1;
  white-space: nowrap;
  text-align: right;
}

.notif-close{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display:grid;
  place-items:center;
  color:#aab4c3;
  font-size:12px;
  opacity:0;
  transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
  flex-shrink:0;
}

.notif-item:hover .notif-close{
  opacity:1;
}

.notif-close:hover{
  background: #f5f7fb;
  color:#0f172a;
}

.notif-footer{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:12px 0 0;
  border-top:1px solid #eef2f7;
  color:#2563eb;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition: background 0.18s ease;
}

.notif-footer:hover{
  background: transparent;
  color:#1d4ed8;
}

#account-box{
  position: relative;
  display:flex;
  align-items:flex-start;
  width: clamp(198px, 17vw, 244px);
  max-width: calc(100vw - 32px);
  border-radius: 18px;
}

#account-box::after{
  content:"";
  position:absolute;
  left: 8px;
  right: 8px;
  top: calc(100% - 8px);
  height: 14px;
  background: var(--topbar-surface);
  border-left:1px solid var(--topbar-border);
  border-right:1px solid var(--topbar-border);
  opacity:0;
  pointer-events:none;
  transition: opacity 0.18s ease;
  z-index: 9997;
}

#account-box.open{
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#account-box.open::after{
  opacity:1;
}

.topbar-user{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:48px;
  min-width:0;
  max-width:none;
  padding:6px 9px;
  border:1px solid var(--topbar-border);
  border-radius:14px;
  background: var(--topbar-surface);
  box-shadow: 0 6px 14px rgba(15,23,42,0.05);
  backdrop-filter: blur(18px);
  cursor:pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-radius 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.topbar-user:hover{
  background: var(--topbar-surface);
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(15,23,42,0.07);
}

#account-box.open .topbar-user{
  position: relative;
  z-index: 10000;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  border-bottom-color: transparent;
  box-shadow: 0 7px 15px rgba(15,23,42,0.06);
}

.user-avatar{
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}


.user-meta{
  display:flex;
  align-items:center;
  min-width:0;
  flex:1;
}

.user-name{
  width:100%;
  max-width:none;
  font-size: 13px;
  font-weight: 600;
  color:#111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.18s ease;
}

.user-name.is-clinical{
  color: var(--clinical-accent);
}

.topbar-plan-badge{
  display:none !important;
}

#account-dropdown{
  top: calc(100% - 10px);
  left: 0;
  width: 100%;
  padding-top: 0;
  background: transparent;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 9998;
}

#account-dropdown.open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.account-card{
  overflow:hidden;
  background: var(--topbar-surface);
  border: 1px solid var(--topbar-border);
  border-top: none;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 16px 32px rgba(15,23,42,0.10);
  backdrop-filter: blur(18px);
  padding: 12px 12px 14px;
  animation: none;
}

.account-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:14px;
  transition: background 0.18s ease;
}

.account-header:hover{
  background: var(--topbar-hover);
}

.account-user{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.account-name{
  font-size: 15px;
  font-weight: 600;
  color:#111827;
  line-height:1.2;
}

.notif-body .notif-item:last-child{
  border-bottom:none;
}

.account-name.is-clinical{
  color: var(--clinical-accent);
}

.account-email{
  font-size: 13px;
  color: var(--topbar-muted);
  opacity: 1;
  word-break: break-word;
}

.account-plan-row{
  margin-top: 4px;
}

.account-plan-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--clinical-accent-border);
  background: rgba(255,245,238,0.96);
  color: var(--clinical-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.account-plan-badge.is-core{
  background:#f5f7fb;
  border-color: rgba(148,163,184,0.22);
  color:#475569;
}

.account-divider{
  margin:8px 4px;
  background: rgba(15,23,42,0.08);
}

.account-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:12px;
  font-size: 14px;
  font-weight: 500;
  color:#1f2937;
  transition: background 0.15s ease, transform 0.15s ease;
}

.account-item:hover{
  background: var(--topbar-hover);
  transform: translateX(2px);
}

.account-item-icon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background:#f6f8fc;
  flex-shrink:0;
}

.account-item-icon img{
  width:16px;
  height:16px;
  object-fit:contain;
  display:block;
}

.account-item.logout{
  margin-top: 4px;
  color:#e53935;
}

.account-item.logout .account-item-icon{
  background: rgba(229,57,53,0.12);
}

/* ===== AVATAR BADGE (Clinical) ===== */

.user-avatar{
  position: relative;
  overflow: visible; /* 🔥 ważne żeby badge nie był ucięty */
}

/* badge */
.avatar-badge{
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;

  min-width: 38px;
  padding: 2px 6px;
  border-radius: 999px;

  background: linear-gradient(135deg, #ffd9c8, #ffb8c6);
  color: #8a2541;

  box-shadow:
    0 0 0 1px rgba(255,180,160,0.4),
    0 2px 8px rgba(255,170,160,0.25);
  filter: drop-shadow(0 0 4px rgba(255,170,160,0.25));

  display: none;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  pointer-events: none;
}

/* aktywny */
.user-avatar.is-clinical .avatar-badge{
  display: inline-flex;
}

/* dark mode tweak */
body.dark-mode .avatar-badge{
  background: linear-gradient(135deg, #ffb07a, #ff8a4c);
}



body.dark-mode .notif-icon:hover,
body.dark-mode .notif-icon.open,
body.dark-mode .account-header:hover,
body.dark-mode .account-item:hover,
body.dark-mode .notif-item:hover{
  background: rgba(255,255,255,0.06);
}

body.dark-mode .topbar-user,
body.dark-mode .notif-card,
body.dark-mode .account-card{
  background: rgba(22,26,34,0.94);
  border-color: rgba(255,255,255,0.08);
  color:#f8fafc;
}

body.dark-mode #account-box::after{
  background: rgba(22,26,34,0.94);
  border-left-color: rgba(255,255,255,0.08);
  border-right-color: rgba(255,255,255,0.08);
}

body.dark-mode #account-box.open .topbar-user{
  border-bottom-color: transparent;
}

body.dark-mode .notif-dropdown-header{
  color:#f8fafc;
  border-bottom-color: rgba(255,255,255,0.08);
}

body.dark-mode .notif-item{
  border-bottom-color: rgba(255,255,255,0.06);
}

body.dark-mode .notif-item:hover{
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

body.dark-mode .notif-text,
body.dark-mode .account-name,
body.dark-mode .user-name{
  color:#f8fafc;
}

body.dark-mode .notif-tag-admin{
  background:rgba(248,113,113,0.16);
  color:#fecaca;
  border-color:rgba(248,113,113,0.22);
}

body.dark-mode .user-name.is-clinical,
body.dark-mode .account-name.is-clinical{
  color:#ffb07a;
}

body.dark-mode .notif-date,
body.dark-mode .account-email,
body.dark-mode .notif-empty{
  color:#a7b1c2 !important;
}

body.dark-mode .notif-close:hover{
  background: rgba(255,255,255,0.08);
  color:#fff;
}

body.dark-mode .account-item{
  color:#e5e7eb;
}

body.dark-mode .account-divider,
body.dark-mode .notif-footer{
  border-color: rgba(255,255,255,0.08);
}

body.dark-mode .account-divider{
  background: rgba(255,255,255,0.08);
}

body.dark-mode .account-item-icon{
  background: rgba(255,255,255,0.06);
}

body.dark-mode .account-plan-badge{
  background: rgba(216,106,46,0.16);
  border-color: rgba(255,176,122,0.30);
  color:#ffb07a;
}

body.dark-mode .account-plan-badge.is-core{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color:#cbd5e1;
}