/* ====== Bazowe ====== */
body {
  background-color: #f8f9fa; /* spójne z index.php */
  font-family: 'Segoe UI', 'Ubuntu', sans-serif;
}

/* ====== Content & Topbar obok sidebaru ====== */
:root { --sidebar-w: 220px; }

.content {
  margin-left: var(--sidebar-w);
  padding: 30px;
}

.topbar {
  height: 60px;
  z-index: 1000;
  margin-left: var(--sidebar-w);
}

/* ====== Przyciski ====== */
.btn.no-caret::after {
  display: none !important;
}

.btn-auth {
  background-color: #688be4;
  color: #fff;
  border-radius: 12px;
  font-weight: 500;
  padding: 10px 16px;
  border: none;
}
.btn-auth:hover,
.btn-auth:focus {
  background-color: #5777d1;
  color: #fff;
}

.btn-primary {
  background-color: #688be4;
  border-color: #688be4;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #5777d1;
  border-color: #5777d1;
}

/* ====== Widgety ====== */
.widget {
  
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}
.widget:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

/* ====== Topbar elements ====== */
.topbar .input-group {
  max-width: 200px;
}
.topbar .input-group-text {
  background-color: transparent;
  border-right: 0;
}
.topbar .form-control {
  border-left: 0;
  box-shadow: none;
}
.topbar .fw-medium {
  font-weight: 500;
}
.topbar .input-group .form-control {
  border-right: 0;
}
.topbar .input-group .input-group-text {
  background-color: transparent;
  border-left: 0;
}

/* ====== Avatar placeholder ====== */
.user-avatar-placeholder {
  width: 36px;
  height: 36px;
  background-color: #f8d7da;
}
.user-avatar-placeholder i {
  width: 20px;
  height: 20px;
  color: #721c24;
}
/* Stałe rozmiary ikon w topbarze */
.topbar .icon-dashboard {
    color: #688be4;

  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* burger */
.topbar #btn-open-sidebar [data-lucide="menu"] {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

/* Ogólnie: wszystkie ikony Lucide w topbarze */
.topbar [data-lucide],
.topbar .lucide {            /* lucide dodaje klasę .lucide na <svg> */
  width: 22px;
  height: 22px;
  stroke-width: 1.75;        /* trochę „pełniejsza” kreska */
}

/* Na ≥ lg lekko większe */
@media (min-width: 992px) {
  .topbar .icon-dashboard,
  .topbar [data-lucide],
  .topbar .lucide {
    width: 24px;
    height: 24px;
  }
}

/* ====== Responsywność ====== */

/* Mobile <992px: ukryj sidebar i ustaw content pod topbarem */
@media (max-width: 991.98px) {
  .content {
    margin-left: 0;
    padding: 24px 16px;
  }
  .topbar {
    margin-left: 0;
  }
}

/* <576px: przyciski pełnej szerokości */
@media (max-width: 575.98px) {
  .btn-auth,
  .btn,
  .btn-primary,
  .btn-outline-secondary {
    width: 100%;
  }
}

/* Preferencje dostępności */
@media (prefers-reduced-motion: reduce) {
  .widget {
    transition: none;
  }
}
/* wyrównanie wysokości kafelka lekcji do reszty */
.widget-eq {
  height: 116px;            /* dokładnie jak pozostałe: 68px ikona + 2*24px padding */
  overflow: hidden;         /* gdyby treść chciała dołożyć 1–2px */
  display: flex;            /* na wszelki wypadek (już jest na elemencie) */
  align-items: center;
}

/* bezpiecznik: upewnij się, że nie ma żadnych „dopisków” linii */
.widget-eq .small,
.widget-eq .fs-6 { line-height: 1.2; }
.list-group-item.position-relative {
  transition: background .15s, transform .03s;
  cursor: pointer;
}
.list-group-item.position-relative:hover {
  background: #f7f9ff;
}
.list-group-item.position-relative:active {
  transform: translateY(1px);
}
/* === Homework list: ograniczenie wysokości + sticky header === */
/* ====== Prace domowe – responsywka ====== */

/* desktop: zachowaj dotychczasowe 60% na tytuł */
.hw-title { max-width: 60%; min-width: 0; }

/* nie powiększaj kafelka na urządzeniach dotykowych */
@media (hover: none) {
  .widget:hover { transform: none; box-shadow: none; }
}

/* ≤ 576px (telefony) */
@media (max-width: 575.98px) {
  /* tytuł może zająć całą szerokość; badge'e zejdą niżej */
  .hw-title {
    max-width: 100%;
    display: block;
    font-size: .95rem;          /* delikatnie mniejsze */
  }

  /* cały wiersz niech układa się „w kolumnę”, żeby badge'e miały miejsce na złamanie */
  .list-group-item.position-relative {
    align-items: flex-start;
    padding-left: 0;            /* już masz px-0 na <li>, więc zostaw czysto */
    padding-right: 0;
  }

  /* kontener z badge'ami ma się łamać i trzymać się prawej,
     ale jeśli się nie mieści – spłynie pod tytuł */
  .hw-badges {
    flex-wrap: wrap;
    gap: .25rem .35rem;
    margin-left: auto;          /* gdy się mieści – jest po prawej */
    max-width: 100%;
  }

  /* badge'e bardziej kompaktowo */
  .hw-badges .badge {
    font-size: .72rem;
    padding: .3rem .45rem;
    line-height: 1.1;
    border-radius: 999px;
  }

  /* ikona w tytule niech będzie minimalna na mobile */
  .list-group-item [data-lucide] {
    width: 16px; height: 16px;
  }
}

/* ≤ 768px (małe tablety): trochę miejsca na tytuł, żeby badge'e miały powietrze */
@media (max-width: 767.98px) {
  .hw-title { max-width: 72%; }
}
/* Mobile: wyłącz podskakiwanie kafelka przy hoverze (telefony) */
@media (hover: none) {
  .widget:hover {
    transform: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }
}

/* Zmniejsz ikonę + padding w nagłówku widgetu, żeby było więcej miejsca na tytuł */
@media (max-width: 575.98px) {
  /* przycisk w nagłówku (ten z data-bs-toggle="collapse") */
  .widget > button.p-4 { padding: 14px 16px !important; }

  /* pudełko z ikoną po lewej (to kwadrat 68x68) */
  .widget > button .rounded-3.p-3 {
    width: 52px !important;
    height: 52px !important;
    padding: 12px !important;
  }

  /* sama ikona w środku */
  .widget > button [data-lucide] {
    width: 22px !important;
    height: 22px !important;
  }

  /* tytuł i podtytuł – niech mają pełną szerokość i się nie ścinają */
  .widget > button .me-auto {
    min-width: 0;               /* żeby działał text-truncate */
  }
  .widget > button .fs-5 {
    font-size: 1rem !important;
  }
}
/* S – zawijanie wiersza */
@media (max-width: 575.98px) {
  /* cały wiersz może się łamać w 2 linie */
  .list-group .list-group-item.d-flex {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 10px;                /* pion/poziom */
  }

  /* link z tytułem: pełna szerokość w pierwszej linii */
  .list-group .list-group-item .stretched-link.text-dark {
    order: 1;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    min-width: 0;                 /* ważne dla text-truncate */
  }

  /* sam tekst tytułu – nie obcinaj do 60%, tylko pozwól na całą szerokość */
  .list-group .list-group-item .stretched-link .text-truncate {
    max-width: 100% !important;
  }

  /* prawa kolumna (badge’y): niech zejdzie do drugiej linii i się zawija */
  .list-group .list-group-item > .d-flex.align-items-center.gap-2,
  .list-group .list-group-item > .d-flex.align-items-center.gap-3,
  .list-group .list-group-item > .d-flex.align-items-center.gap-4 {
    order: 2;
    flex: 1 1 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px 8px !important;
    margin-left: 26px;            /* odsunie od ikonki książki */
  }

  /* badge z terminem – niech będzie ciut mniejszy na mobile */
  .list-group .badge.rounded-pill {
    font-size: .75rem;
    line-height: 1.1;
    padding: .28rem .5rem;
  }
}
/* MOBILE – kafelki w <a> (np. „Uczniowie”) */
@media (max-width: 575.98px) {
  /* zmniejsz padding kafla */
  .widget.p-4 { padding: 14px 16px !important; }

  /* pudełko z ikoną (przebija inline style) */
  .widget .rounded-3.p-3 {
    width: 52px !important;
    height: 52px !important;
    padding: 12px !important;
  }

  /* sama ikona (przebija inline style) */
  .widget .rounded-3.p-3 [data-lucide],
  .widget .rounded-3.p-3 .lucide,
  .widget .rounded-3.p-3 i[data-lucide] {
    width: 22px !important;
    height: 22px !important;
  }
}

/* (zostawiam też wariant dla buttonów – inne karty) */
@media (max-width: 575.98px) {
  .widget > button.p-4 { padding: 14px 16px !important; }
  .widget > button .rounded-3.p-3 {
    width: 52px !important;
    height: 52px !important;
    padding: 12px !important;
  }
  .widget > button .rounded-3.p-3 [data-lucide],
  .widget > button .rounded-3.p-3 .lucide {
    width: 22px !important;
    height: 22px !important;
  }
}
/* ======= N LOADER ======= */
.n-loader { display: grid; place-items: center; }

.n-logo { overflow: visible; }

.n-letter{
  font-family: "Ubuntu", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 140px;
  font-weight: 700;
  fill: #000;          /* kolor litery N */
}

.n-dot{
  fill: #6b82f3;       /* fiolet koła (zmień jak chcesz) */
}

/* ciemny motyw overlaya – jeśli kiedyś będzie potrzebny
.loading-overlay.dark .loading-box{ background:#0b1020; color:#e5e7eb; border-color:rgba(255,255,255,.08); }
.loading-overlay.dark .n-letter{ fill:#fff; }
*/