/* ============================================================
   custom.css — nadpisania dla projektu wache
   Tutaj umieszczaj wszystkie własne korekty CSS.
   Ten plik jest ładowany PO smartapp.min.css, więc ma wyższy
   priorytet (bez potrzeby używania !important w zwykłych
   przypadkach).
============================================================ */


/* ── Sidebar: scrollowanie menu na urządzeniach mobilnych ──
   Breakpoint 991.98px odpowiada punktowi w którym sidebar
   przełącza się w tryb mobilny (position: fixed, slide-in).

   Problem 1: .app-sidebar ma overflow-y: auto → przechwytuje
   zdarzenie scroll zanim dotrze do primary-nav. Sidebar
   sam zaczyna scrollować zamiast menu wewnątrz niego.

   Problem 2: .primary-nav (flex-grow: 1) ma domyślnie
   min-height: auto, przez co wyrasta poza kontener flexbox
   i nigdy nie osiąga stanu overflow (który wyzwala scroll).

   Rozwiązanie:
   - sidebar: overflow-y: hidden  → blokuje własny scroll
   - primary-nav: min-height: 0   → pozwala flex-itemowi
     skurczyć się do przydzielonej wysokości
   - primary-nav: overflow-y: auto → scroll tylko tutaj
   ─────────────────────────────────────────────────────────── */
@media only screen and (max-width: 991.98px) {

  /* 1. Wyłącz scroll na całym sidebarze — jest fixed top:0/bottom:0,
        więc ma dokładnie 100vh; własny scroll jest zbędny */
  .app-sidebar {
    overflow-y: hidden !important;
  }

  /* 2. Oddaj scroll tylko obszarowi nawigacji */
  .app-sidebar .primary-nav {
    min-height: 0;                       /* flex-item może się skurczyć poniżej rozmiaru treści */
    overflow-y: auto !important;         /* scrollbar tylko gdy treść przekracza wysokość */
    -webkit-overflow-scrolling: touch;   /* płynny momentum scroll na iOS/Safari */
  }

}


/* ── Status zadania: Wstrzymany ───────────────────────────────
   Ciemniejszy żółty (złoty) — odróżniony od table-warning (TODO).
   !important potrzebne, bo Bootstrap table-* ma specyficzność
   bazującą na :where() i zostaje nadpisane przez Bootstrap CSS. */
.task-suspended,
tr.task-suspended > td,
tr.task-suspended > th {
  background-color: #f5c518 !important;
  color: #000 !important;
}


/* ── Tabela zadań: opis w kolorowych wierszach ────────────────────
   Klasa text-muted ustawia szary kolor, który jest nieczytelny gdy
   wiersz ma kolorowe tło (table-info, table-success, table-warning,
   table-secondary, task-suspended). color: inherit przywraca kolor
   zdefiniowany przez klasę wiersza tabeli.
   ─────────────────────────────────────────────────────────────── */
tr[class*="table-"] td.text-muted,
tr.task-suspended td.text-muted {
  color: inherit !important;
}


/* ── Dark mode: Tom Select ────────────────────────────────────────
   tom-select.bootstrap5.min.css z CDN nie obsługuje data-bs-theme="dark".
   Poniższe reguły nadpisują kolory kontrolki i dropdownu w ciemnym motywie.
   ─────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .ts-wrapper .ts-control,
[data-bs-theme="dark"] .ts-wrapper.single .ts-control {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-wrapper .ts-control input,
[data-bs-theme="dark"] .ts-wrapper .ts-control input::placeholder {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .option {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .option:hover,
[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .option.active {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .no-results {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .ts-wrapper.focus .ts-control {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

[data-bs-theme="dark"] .ts-wrapper .ts-control .item,
[data-bs-theme="dark"] .ts-wrapper .ts-control .item * {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}


/* ── Dark mode: status Wstrzymany ─────────────────────────────────
   Złote tło (#f5c518) z czarnym tekstem — czytelne w obu motywach.
   W dark mode przyciemniamy nieco tło dla lepszego kontrastu z ciemnym
   interfejsem otaczającym wiersz.
   ─────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .task-suspended,
[data-bs-theme="dark"] tr.task-suspended > td,
[data-bs-theme="dark"] tr.task-suspended > th {
  background-color: #c9a010 !important;
  color: #000 !important;
}


/* ── Dark mode: strefa upuszczania plików (drop zone) ─────────────
   Klasa bazowa definiowana w szablonach; reset inlineowego borderColor
   w ciemnym motywie jest obsługiwany przez JS (style.borderColor = '').
   Poniższa reguła zapewnia właściwy kolor obramowania w spoczynku.
   ─────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] [id$="-drop-zone"] {
  border-color: var(--bs-border-color) !important;
}


/* ── Responsywny dropdown powiadomień ──
   Szerokość i pozycja ustawiane przez JS (position: fixed względem viewport).
   Klasa służy wyłącznie do identyfikacji menu w selektorach JS.
   Właściwe style inline są wstrzykiwane przez listener show.bs.dropdown.
*/
.notifications-dropdown {
  /* Fallback na desktopie gdy JS nie zdążył — wyrównaj do prawej */
  right: 0;
  left: auto;
}

/* Fallback CSS dla mobile — zabezpieczenie gdy JS zawiódł */
@media (max-width: 575.98px) {
  .notifications-dropdown.show {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
}


/* ── Przycisk usuwania w tabelce (.btn-table-delete) ──────────────────────────
   Ujednolicony styl przycisku X do usuwania rekordów w wierszach tabel.
   Użycie: <td class="text-center align-middle" style="width:44px;">
             <button class="btn btn-sm btn-outline-danger btn-table-delete" ...>&#x2715;</button>
           </td>
   ─────────────────────────────────────────────────────────────── */
.btn-table-delete {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: .9rem;
}


/* ── Logo Wache ───────────────────────────────────────────────────────────────
   Obrazek logo wyświetlany w nagłówku / pasku bocznym aplikacji.
   ─────────────────────────────────────────────────────────────── */
.app-logo {
  padding: 0 !important;
}

/* Usunięcie height z .app-logo > img, .app-logo > svg — pozwala logotypowi
   zachować własne proporcje zamiast być przycinany przez --logo-height. */
.app-logo > img,
.app-logo > svg {
  height: unset;
}

.wache-logo-img {
  height: var(--app-header-height, 88px);
  max-height: var(--app-header-height, 88px);
  width: auto;
  object-fit: contain;
  z-index: 2;
  position: relative;
  display: block;
}