:root {
  --sidebar-w: 360px;
  --left-w: 120px;
  --header-h: 64px;
}

body {
  background:#f8fafc;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ===== Sidebar ===== */
/* Desktop only */
@media (min-width: 768px) {

  .sidebar-shell {
    width:var(--sidebar-w);
    height:100vh;
    background:#d5e7f3;
    position:relative;
    transition:width .2s ease;
    box-shadow:0 0 0 1px rgba(0,0,0,.04),0 10px 40px rgba(0,0,0,.04);
     z-index: 1050;
  }

}

.sidebar-shell.is-collapsed {
  width:var(--left-w);
}

.sidebar-left {
  width:var(--left-w);
  height:100%;
  border-right:1px solid rgba(0,0,0,.05);
}

.sidebar-left-header {
  height:var(--header-h);
  border-bottom:1px solid rgba(0,0,0,.05);
}

.sidebar-left-body {
  height:calc(100% - var(--header-h));
  overflow:auto;
}

.sidebar-item {
  cursor:pointer;
  border-left:3px solid transparent;

  padding:.5rem .25rem;
  transition:.15s;
}

.sidebar-item:hover { background:rgba(13,110,253,.08); }

.sidebar-item.is-active {
  border-left-color:var(--bs-primary);
  background:rgba(13,110,253,.12);
}

.sidebar-icon {
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:14px;
}

.sidebar-shell.is-collapsed .sidebar-label { display:none; }

/* ===== Panels ===== */

@media (min-width: 768px) {

  .sidebar-panels {
    position:absolute;
    top:0;bottom:0;left:var(--left-w);right:0;
    border-left:1px solid rgba(0,0,0,.05);
  }

  .sidebar-right-body {
    position:absolute;
    top:var(--header-h);
    bottom:0;left:0;right:0;
    overflow:auto;
  }

}

.sidebar-shell.is-collapsed .sidebar-panels {
  display:none;
}

.sidebar-right-header {
  height:var(--header-h);
  border-bottom:1px solid rgba(0,0,0,.05);
}

.sidebar-right-body {
  position:absolute;
  top:var(--header-h);
  bottom:0;left:0;right:0;
  overflow:auto;
}

.sidebar-panel { display:none; }
.sidebar-panel.is-active { display:block; }

/* ===== Collapse Toggle (TO MUSI BYĆ) ===== */

.collapse-handle {
  position:absolute;
  top:calc(var(--header-h)/2);
  right:-12px;
  transform:translateY(-50%);
  width:32px;height:32px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:.18s;
  z-index:30;
}

.collapse-handle:hover {
  transform:translateY(-50%) scale(1.05);
}

.sidebar-shell.is-collapsed .collapse-handle i {
  transform:rotate(180deg);
  transition:.2s;
}

/* ===== Dark mode ===== */

[data-bs-theme="dark"] body { background:#0f172a; }
[data-bs-theme="dark"] .sidebar-shell { background:#1e293b; box-shadow:none; }
[data-bs-theme="dark"] .sidebar-panels,
[data-bs-theme="dark"] .sidebar-right-header { background:#1e293b; }
[data-bs-theme="dark"] .collapse-handle {
  background:#1e293b;
  border:1px solid rgba(255,255,255,.1);
}

/* ===== Avatar ===== */

.user-avatar {
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,#010341,#02193f);
  color:#fff;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.5px;
  transition:.18s;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
  border: solid 3px #0ae3eb;
}

.user-avatar:hover { transform:scale(1.05); }

[data-bs-theme="dark"] .user-avatar { box-shadow:0 4px 14px rgba(0,0,0,.5); }

/* ===== PRAWA KOLUMNA: osobne elementy (bez list-group) ===== */

.panel-block {
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:.65rem .75rem;
  margin-bottom:.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-decoration:none;
  color:inherit;
  transition:.12s;
}

.panel-block:hover {
  background:rgba(13,110,253,.06);
  border-color:rgba(13,110,253,.18);
}

.panel-block .muted {
  color: rgba(0,0,0,.45);
  font-size:.85rem;
}

[data-bs-theme="dark"] .panel-block {
  background:#1e293b;
  border-color:rgba(255,255,255,.10);
}

[data-bs-theme="dark"] .panel-block:hover {
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
}

[data-bs-theme="dark"] .panel-block .muted { color: rgba(255,255,255,.55); }

.panel-title {
  font-weight:600;
  margin:.2rem 0 .8rem;
}

/* ===== MOBILE FIX (POPRAWIONE) ===== */
@media (max-width: 767.98px) {

  /* 1. Resetujemy style offcanvasa, żeby pasowały do flexa */
  .offcanvas.sidebar-shell {
    /* width regulujemy klasą w HTML (np. w-75), tu resetujemy */
    height: 100vh; 
    padding: 0;
    display: flex;
    flex-direction: column;
      background:#d5e7f3; /* lub var ze zmiennych */
  }

  /* 2. Body offcanvasa musi być FLEXEM, żeby kolumny były OBOK siebie */
  .offcanvas .offcanvas-body {
    display: flex;       /* To kluczowe! Ustawia dzieci obok siebie */
    flex-direction: row; /* Wymusza poziom */
    padding: 0;
    overflow: hidden;    /* Scrollowanie będzie wewnątrz kolumn */
    height: 100%;
  }

  /* 3. Lewa kolumna (ikony) - sztywna szerokość */
  .offcanvas .sidebar-left {
    width: var(--left-w);
    flex-shrink: 0;      /* Nie pozwalaj jej się kurczyć */
    height: 100%;
    border-right: 1px solid rgba(0,0,0,.05);
    overflow-y: auto;
  }

  /* 4. Prawa kolumna (panele) - wypełnia resztę */
  .offcanvas .sidebar-panels {
    position: relative;  /* Wracamy do relative/absolute, żeby działało przełączanie */
    flex-grow: 1;        /* Zajmij resztę miejsca */
    width: auto !important;
    height: 100%;
    left: auto !important;
    right: auto !important;
    border: none;
  }

  /* 5. Wewnątrz prawej kolumny */
  .offcanvas .sidebar-right-body {

  }
  
  /* Ukrywamy nagłówek prawej kolumny, bo mamy nagłówek Offcanvasa */
  .offcanvas .sidebar-right-header {
    display: none; 
  }
  
  /* Ciemny motyw dla offcanvasa */
  [data-bs-theme="dark"] .offcanvas.sidebar-shell {
      background: #1e293b;
  }
}

/* =====================================================
   HOVER EFFECT (FLYOUT) dla zwiniętego menu
===================================================== */

/* 1. Kiedy sidebar jest zwinięty (collapsed), ALE ma klasę .is-hovering (bo najechaliśmy myszką) */
.sidebar-shell.is-collapsed.is-hovering .sidebar-panels {
  display: block !important;       /* Wymuszamy pokazanie panelu */
  position: absolute;              /* Wyjmujemy go z przepływu dokumentu (nie przesuwa MAIN) */
  left: var(--left-w);             /* Zaczyna się równo za ikonami */
  top: 0;
  bottom: 0;
  width: calc(var(--sidebar-w) - var(--left-w)); /* Szerokość = Pełna szerokość - szerokość ikon */
  
  background: inherit;             /* Pobiera kolor tła z rodzica (działa dla light i dark mode!) */
  z-index: 1050;                   /* Bardzo wysoki indeks, żeby przykryć treść strony (main) */
  
  border-left: 1px solid rgba(0,0,0,0.05);
  box-shadow: 10px 0 30px rgba(0,0,0,0.1); /* Cień, żeby odróżnić panel od strony */
}

/* 2. Opcjonalnie: poprawka dla nagłówka panelu w trybie hover */
.sidebar-shell.is-collapsed.is-hovering .sidebar-right-header {
  background: inherit; 
}