/* ============================================================
   PSNM Strefa Członkowska – Custom Styles
   ============================================================ */

:root {
  --psnm-primary: #1a3a5c;   /* dark navy */
  --psnm-accent:  #0d8f4f;   /* green – alternative fuels */
  --psnm-light:   #e8f5ee;
  --sidebar-width: 240px;
}

/* ---- Navbar ------------------------------------------------ */
.bg-psnm {
  background-color: var(--psnm-primary) !important;
}

/* ---- Sidebar ----------------------------------------------- */
#sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  min-height: calc(100vh - 56px);
  position: sticky;
  top: 56px;
  overflow-y: auto;
}

#sidebar .nav-link {
  color: #495057;
  border-radius: 6px;
  padding: .45rem .75rem;
  font-size: .9rem;
  display: flex;
  align-items: center;
  transition: background .15s, color .15s;
}

#sidebar .nav-link:hover {
  background: var(--psnm-light);
  color: var(--psnm-accent);
}

#sidebar .nav-link.active {
  background: var(--psnm-light);
  color: var(--psnm-accent);
  font-weight: 600;
}

#sidebar .sidebar-heading {
  display: block;
  font-size: .7rem;
  letter-spacing: .05em;
}

/* ---- Main content ------------------------------------------ */
.main-content {
  min-width: 0;
}

/* ---- Cards ------------------------------------------------- */
.card {
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.card-header-psnm {
  background: var(--psnm-primary);
  color: #fff;
  font-weight: 600;
}

/* ---- Stat widgets ----------------------------------------- */
.stat-card {
  border-left: 4px solid var(--psnm-accent);
}

.stat-card .stat-icon {
  font-size: 2rem;
  opacity: .2;
}

/* ---- Member directory grid --------------------------------- */
.member-card img.logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
  padding: 4px;
}

/* ---- Knowledge base --------------------------------------- */
.kb-item {
  border-left: 3px solid var(--psnm-accent);
  transition: box-shadow .15s;
}

.kb-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* ---- Calendar --------------------------------------------- */
.calendar-grid {
  border-collapse: collapse;
  width: 100%;
}

.calendar-grid th,
.calendar-grid td {
  border: 1px solid #dee2e6;
  padding: 6px;
  vertical-align: top;
  height: 80px;
}

.calendar-grid th {
  background: var(--psnm-primary);
  color: #fff;
  text-align: center;
  height: auto;
}

.calendar-grid td.today {
  background: var(--psnm-light);
}

.calendar-grid td.other-month {
  background: #f8f9fa;
  color: #adb5bd;
}

.event-dot {
  display: block;
  font-size: .7rem;
  padding: 1px 4px;
  border-radius: 3px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  background: var(--psnm-accent);
  cursor: pointer;
}

.event-dot.type-conference  { background: #0d6efd; }
.event-dot.type-webinar     { background: #6f42c1; }
.event-dot.type-training    { background: #fd7e14; }
.event-dot.type-networking  { background: var(--psnm-accent); }
.event-dot.type-committee   { background: var(--psnm-primary); }

/* ---- Notification popup ------------------------------------ */
.notification-badge {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220,53,69,.4); }
  70%  { box-shadow: 0 0 0 8px rgba(220,53,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,53,69,0); }
}

/* ---- Messages --------------------------------------------- */
.thread-message {
  max-width: 75%;
}

.thread-message.mine {
  background: var(--psnm-light);
  border-radius: 12px 12px 4px 12px;
  align-self: flex-end;
}

.thread-message.other {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 12px 12px 12px 4px;
  align-self: flex-start;
}

/* ---- Responsive ------------------------------------------- */
@media (max-width: 768px) {
  #sidebar {
    width: 100%;
    min-width: 100%;
    position: relative;
    top: 0;
    height: auto;
    min-height: auto;
    border-right: none !important;
    border-bottom: 1px solid #dee2e6;
  }
  .wrapper {
    flex-direction: column;
  }
}