:root { --brand:#d72626; }
.btn-brand { background:var(--brand); color:#fff; border:none; }
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.badge { border-radius: 999px; }
.login-logo { height: 56px; }
.hero-card { background: linear-gradient(135deg, #fff, #f6f6f6); }
/* lepsze skalowanie logo */
.login-logo {
  height: 48px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
/* zaznaczony kafelek */
.btn-check:checked + .mod-card {
  border-color: #198754;
  background-color: rgba(25,135,84,.08);
  box-shadow: 0 0 0 .2rem rgba(25,135,84,.25);
}
.mod-card i { width: 1.2rem; text-align: center; }
.stat-card .icon-wrap{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.1rem;
}
.icon-new{ background:#e9f5ff; color:#0d6efd; }
.icon-prog{ background:#fff3cd; color:#997404; }
.icon-done{ background:#eaf7ef; color:#0f5132; }
.icon-total{ background:#eef1f7; color:#3b3f5c; }
.icon-users{ background:#f0ecff; color:#6f42c1; }
.icon-paid{ background:#e8fff3; color:#198754; }
.icon-unpaid{ background:#fff0f0; color:#dc3545; }
.table thead th i{ opacity:.65; margin-right:.25rem; }
.btn-check:checked + .mod-card{
  border-color:#198754;
  background-color:rgba(25,135,84,.08);
  box-shadow:0 0 0 .2rem rgba(25,135,84,.25);
}
.mod-card i{ width:1.2rem; text-align:center; }
/* subtelny cień/obrys nav */
.nav-lift { box-shadow: 0 4px 14px rgba(14,16,26,.06)!important; border-bottom:1px solid rgba(0,0,0,.04)!important; }

/* marka */
.brand-title{ letter-spacing:.1px; }

/* „pill” links */
.navbar .nav-link.nav-pill{
  padding:.4rem .8rem; border-radius:999px; transition:.15s background-color, .15s color, .15s transform;
}
.navbar .nav-link.nav-pill:hover{ background:#f4f6fb; transform: translateY(-1px); }
.navbar .nav-link.nav-pill.active{ background:#edf2ff; color:#0d6efd; font-weight:600; }

/* delikatny soft brand button */
.btn-brand-soft{
  background:linear-gradient(180deg,#f7f9ff,#eef3ff); border:1px solid #dbe3ff; color:#0d6efd;
}
.btn-brand-soft:hover{ background:#e6edff; color:#0a58ca; }

/* chip z użytkownikiem */
.user-chip{
  padding:.25rem .6rem; background:#f7f7f9; border:1px solid #ececf3; border-radius:999px;
}

/* bootstrap utility (jeśli nie masz) */
.bg-secondary-subtle{ background:#f4f4f7!important; }
.text-secondary{ color:#6c757d!important; }

/* wyrównanie badge obok linków */
.navbar .badge{ vertical-align: middle; }
/* ===========================
   DARK THEME – FIX UTILITIES
   =========================== */
:root[data-bs-theme="dark"]{
  /* kolory bazowe */
  --bg-0:#0f1115;   /* tło body */
  --bg-1:#151922;   /* navbar / footer */
  --bg-2:#1b2130;   /* karty / tabele */
  --bg-3:#232a3b;   /* nagłówki tabel / belki */
  --tx-0:#e8ecf4;   /* tekst główny */
  --tx-1:#b5c0d6;   /* tekst poboczny */
  --bd-0:#2a3247;   /* obramowania */
  --bd-1:#313a52;

  /* zmienne Bootstrapa */
  --bs-body-bg: var(--bg-0);
  --bs-body-color: var(--tx-0);
  --bs-secondary-color: var(--tx-1);
  --bs-tertiary-bg: var(--bg-2);
  --bs-border-color: var(--bd-0);
}

/* Jeśli w kodzie zostanie .bg-light – wymuś ciemne tło */
:root[data-bs-theme="dark"] .bg-light { background-color: var(--bg-0)!important; }

/* czytelniejsze „muted” w dark */
:root[data-bs-theme="dark"] .text-muted { color: var(--tx-1)!important; }

/* obramowania / separatory */
:root[data-bs-theme="dark"] .border,
:root[data-bs-theme="dark"] .border-top,
:root[data-bs-theme="dark"] .border-bottom,
:root[data-bs-theme="dark"] .table>:not(caption)>*>*{
  border-color: var(--bd-0)!important;
}

/* NAVBAR/FOOTER */
:root[data-bs-theme="dark"] .navbar{
  background: var(--bg-1)!important;
  border-bottom: 1px solid var(--bd-0)!important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35)!important;
}
:root[data-bs-theme="dark"] footer{
  background: var(--bg-1);
  color: var(--tx-1);
  border-top: 1px solid var(--bd-0);
}

/* KARTY / BLOKI */
:root[data-bs-theme="dark"] .card{
  background: var(--bg-2);
  border-color: var(--bd-0);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

/* „Hero” / jasne gradienty -> przyciemnij */
:root[data-bs-theme="dark"] .hero-card{
  background: linear-gradient(135deg, #1b2231, #151b28);
}

/* TABELA */
:root[data-bs-theme="dark"] .table{
  --bs-table-bg: transparent;
  --bs-table-striped-bg:#19202e;
  --bs-table-color: var(--tx-0);
  --bs-table-border-color: var(--bd-0);
}
:root[data-bs-theme="dark"] .table thead th{
  background: var(--bg-3);
  color: #cbd5e9;
  border-bottom: 1px solid var(--bd-1)!important;
}
:root[data-bs-theme="dark"] .table tbody tr:hover{ background:#1a2233; }

/* FORM FIELDS */
:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select{
  background:#131a27; color:var(--tx-0); border-color:#2a3349;
}
:root[data-bs-theme="dark"] .form-control:focus,
:root[data-bs-theme="dark"] .form-select:focus{
  background:#151e2f; color:#fff; border-color:#3458d1;
  box-shadow:0 0 0 .2rem rgba(59,130,246,.25);
}
:root[data-bs-theme="dark"] .input-group-text{
  background:#161e2c; border-color:#2a3349; color:var(--tx-1);
}

/* ALERTY */
:root[data-bs-theme="dark"] .alert-success{ background:#0f1b12; border-color:#1f3c2a; color:#b7f7c8; }
:root[data-bs-theme="dark"] .alert-danger { background:#1b1111; border-color:#392022; color:#fecaca; }

/* BADGE */
:root[data-bs-theme="dark"] .badge.text-bg

/* ===== User chip – dark theme fix ===== */
:root[data-bs-theme="dark"] .user-chip{
  background:#202635;              /* ciemne, ale nie czarne tło */
  color:#e8ecf4;                   /* czytelny tekst */
  border-color:#2a3247;            /* wyraźniejsza ramka */
  box-shadow: inset 0 0 0 1px #2a3247;
}

:root[data-bs-theme="dark"] .user-chip i{
  color:#cbd5e9;                   /* ikona niech też będzie jasna */
  opacity:1;
}

:root[data-bs-theme="dark"] .user-chip .badge{
  background:#27324a;              /* badge „Admin” */
  color:#d6e3ff;
  border:1px solid #3a4770;
}

/* gdyby chip miał klasę .text-muted z PHP – wymuś czytelność */
:root[data-bs-theme="dark"] .user-chip.text-muted{
  color:#e8ecf4 !important;
}
/* === User chip: hard fix for dark navbar === */
:root[data-bs-theme="dark"] .navbar .navbar-text{
  color:#e8ecf4 !important;       /* przebić półprzezroczysty kolor z Bootstrapa */
}

:root[data-bs-theme="dark"] .navbar .navbar-text.user-chip{
  background:#202737 !important;  /* ciemne, czytelne tło */
  color:#e8ecf4 !important;       /* jasny tekst */
  border-color:#32415d !important;
  box-shadow: inset 0 0 0 1px #32415d !important;
  opacity:1 !important;           /* na wypadek dziedziczonej przezroczystości */
}

:root[data-bs-theme="dark"] .navbar .navbar-text.user-chip i{
  color:#cfe1ff !important;       /* ikona jaśniejsza */
}

:root[data-bs-theme="dark"] .navbar .navbar-text.user-chip .badge{
  background:#2b3854 !important;  /* badge „Admin” */
  color:#d8e6ff !important;
  border:1px solid #3b4d75 !important;
}

/* jeśli w HTML przypadkiem jest .text-muted na chipie – anuluj */
:root[data-bs-theme="dark"] .navbar .user-chip.text-muted{
  color:#e8ecf4 !important;
}
/* ========== CHAT: dark theme kontrast ========== */
/* Załóżmy, że dymki admina były robione na klasach typu .bg-light / .border w czacie */
:root[data-bs-theme="dark"] .chat-area .bg-light,
:root[data-bs-theme="dark"] .chat-area .bubble-admin,

/* Dymki użytkownika (niebieskie) – lekko rozjaśnij tekst i obrys */
:root[data-bs-theme="dark"] .chat-area .bubble-user,
:root[data-bs-theme="dark"] .chat-area .msg-user{
  color:#eaf2ff !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* Nagłówek nad dymkiem (np. "Administrator • 2025-08-16 ...") */
:root[data-bs-theme="dark"] .chat-area .meta{
  color:#b5c0d6 !important;
  opacity: .95;
}

/* Pole wpisywania */
:root[data-bs-theme="dark"] .chat-area textarea.form-control{
  background:#131a27; color:#e8ecf4; border-color:#2a3349;
}
:root[data-bs-theme="dark"] .chat-area textarea.form-control:focus{
  background:#151e2f; color:#fff; border-color:#3458d1;
  box-shadow:0 0 0 .2rem rgba(59,130,246,.25);
}

/* Węższy, ciemny pasek przewijania w logu czatu (opcjonalnie) */
:root[data-bs-theme="dark"] .chat-area .scrollable{
  scrollbar-color:#3a4360 transparent;
}
/* Spójne pigułki w navbarze */
.navbar .nav-link.nav-pill{
  padding:.45rem .85rem;
  border-radius:999px;
  transition: .15s ease-in-out;
  border:1px solid transparent;
}
.navbar .nav-link.nav-pill:hover{
  background: rgba(0,0,0,.05);
  transform: translateY(-1px);
}
.navbar .nav-link.nav-pill.active{
  background: #edf2ff;
  color:#0d6efd !important;
  border-color:#dbe3ff;
  font-weight:600;
}
:root[data-bs-theme="dark"] .navbar .nav-link.nav-pill:hover{
  background: rgba(255,255,255,.06);
}
:root[data-bs-theme="dark"] .navbar .nav-link.nav-pill.active{
  background: rgba(13,110,253,.12);
  color:#9ecbff !important;
  border-color: rgba(158,203,255,.35);
}

/* chip usera + subtelny styl brand buttonów (zostawione z wcześniejszych) */
.user-chip{
  padding:.25rem .6rem;
  background:#f7f7f9;
  border:1px solid #ececf3;
  border-radius:999px;
}
:root[data-bs-theme="dark"] .user-chip{
  background:#1f2530; border-color:#2a3442; color:#cfd7e3;
}

/* delikatny cień/obrys nav */
.nav-lift { box-shadow: 0 4px 14px rgba(14,16,26,.06)!important; border-bottom:1px solid rgba(0,0,0,.04)!important; }
:root[data-bs-theme="dark"] .nav-lift { box-shadow: 0 6px 18px rgba(0,0,0,.35)!important; border-bottom-color: rgba(255,255,255,.04)!important; }


/* ===== CHAT – layout fix + Messenger colors (final) ===== */

/* Wiersz: pełna szerokość, bez tła, flex */
.chat-area .chat-msg{
  width: 100% !important;                 /* klucz: wiersz ma pełną szerokość */
  display: flex !important;
  justify-content: flex-start;
  gap: .6rem;
  margin: .6rem 0;
  background: transparent !important;
  text-align: left;                        /* reset ewentualnego centrowania */
}

/* Wrapper wewnętrzny (u Ciebie .w-100) ma być „na miarę treści” */
.chat-area .chat-msg > .w-100{
  display: inline-flex;                    /* dopasuj do treści */
  flex-direction: column;
  gap: .35rem;
  width: auto !important;                  /* unieważnia .w-100 */
  max-width: min(76%, 72ch);               /* szerokość dymka */
}

/* Doklejanie do krawędzi i wyrównanie meta */
.chat-area .msg-admin{ justify-content: flex-start !important; }
.chat-area .msg-user { justify-content: flex-end   !important; }

.chat-area .msg-admin > .w-100{ margin-right: auto; align-items: flex-start; text-align: left;  }
.chat-area .msg-user  > .w-100{ margin-left:  auto; align-items: flex-end;  text-align: right; }

/* Bańki – wspólne (bez ogonków) */
.chat-area .bubble{
  display: inline-block;
  max-width: 100%;
  padding: .75rem 1rem .7rem;
  border-radius: 18px;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.chat-area .bubble::after{ content: none !important; }  /* bez ogonków */
.chat-area .bubble p{ margin: 0; }

/* Kolory – Messenger blue dla klienta */
.chat-area .bubble-user{
  background: #0084ff !important;
  color: #ffffff !important;
  border-color: #006edc !important;
}
.chat-area .bubble-user a{ color: #dbeafe; }

/* Admin – neutralny */
.chat-area .bubble-admin{
  background: #e5e7eb !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}
.chat-area .bubble-admin a{ color: #374151; }
:root[data-bs-theme="dark"] .chat-area .bubble-admin a {
  color: #9ecbff;   /* jasny niebieski na ciemnym tle */
}

/* Dark mode odpowiedniki */
:root[data-bs-theme="dark"] .chat-area .bubble-user{
  background: #0084ff !important;
  color: #ffffff !important;
  border-color: #006edc !important;
}
:root[data-bs-theme="dark"] .chat-area .bubble-admin{
  background: #374151 !important;
  color: #e5e7eb !important;
  border-color: #4b5563 !important;
}

/* Meta (nazwa • czas) – po właściwej stronie */
.chat-area .chat-msg .meta{
  margin: 0;
  font-size: .78rem;
  opacity: .9;
  color: #9ca3af !important;
}
.chat-area .msg-user  .meta{ color: rgba(255,255,255,.85) !important; } /* na niebieskim */

/* Na wszelki wypadek – zeruj tło wierszy */
.chat-area .chat-msg,
.chat-area .msg-user,
.chat-area .msg-admin{ background: transparent !important; }





  /* Kompaktowe kafelki statystyk */
  .stats-compact .card{background:#1e2431;border:0;border-radius:12px}
  .stats-compact .card-body{padding:10px 12px !important}
  .stats-compact .label{
    display:flex;align-items:center;justify-content:center;gap:.45rem;
    color:#cbd3df;font-size:.95rem
  }
  .stats-compact .value{font-weight:700;font-size:1.45rem;line-height:1;margin-top:2px}
  .stats-compact .sum{font-size:.9rem;opacity:.85}
  .stats-compact .value.success{color:#18c37a}
  .stats-compact .value.danger{color:#ff4d6d}
  .stats-compact .value.primary{color:#49a1ff}
  /* na bardzo małych ekranach jeszcze ciaśniej */
  @media (max-width:576px){
    .stats-compact .card-body{padding:8px 10px !important}
    .stats-compact .value{font-size:1.3rem}
    .stats-compact .label,.stats-compact .sum{font-size:.85rem}
  }



/* ========== KSTune – Refresh for "Dodaj zgłoszenie" ========== */
:root{
  --brand:#c91919;
  --brand-600:#b11616;
  --ring: rgba(201,25,25,.25);
  --radius: .75rem;
}

/* Karta formularza */
.card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: calc(var(--radius) + .25rem);
}

/* Etykiety + wymagane gwiazdki */
.form-label{ font-weight:600; letter-spacing:.01em; }
.form-label .text-danger{ color:var(--brand)!important; }

/* Pola formularza – delikatny lifting */
.form-control,
.form-select{
  border-radius: var(--radius);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:focus,
.form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--ring);
}

/* Stany błędu z ładnym ringiem */
.is-invalid{
  border-color: #dc3545!important;
  box-shadow: 0 0 0 .2rem rgba(220,53,69,.15)!important;
}
.invalid-feedback{ font-size:.85rem; }

/* Przycisk „Wyślij” – wariant brand */
.btn-brand{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-focus-shadow-rgb: 201,25,25;
  border-radius: .8rem;
  padding:.7rem 1.1rem;
  font-weight:600;
  letter-spacing:.01em;
}

/* Input pliku – ładniejszy przycisk */
input[type="file"].form-control{
  padding:.45rem .6rem;
}
input[type="file"].form-control::-webkit-file-upload-button{
  border: 1px solid rgba(0,0,0,.1);
  background: linear-gradient(#fff, #f6f6f6);
  color:#333;
  padding:.4rem .7rem;
  margin-right:.6rem;
  border-radius:.6rem;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
input[type="file"].form-control::-webkit-file-upload-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
input[type="file"].form-control::file-selector-button{
  border: 1px solid rgba(0,0,0,.1);
  background: linear-gradient(#fff, #f6f6f6);
  color:#333;
  padding:.4rem .7rem;
  margin-right:.6rem;
  border-radius:.6rem;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
input[type="file"].form-control::file-selector-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Readonly tytuł – z kłódką wygląda subtelniej */
#title[readonly]{
  background: #f9fafb;
  cursor: not-allowed;
  opacity: .95;
}

/* Wyszukiwarka modyfikacji */
.input-group .form-control{
  border-radius: var(--radius);
}
.input-group-text{
  border-radius: var(--radius);
  background:#f7f7f7;
}

/* Nagłówki sekcji modyfikacji – „pill” + lekki sticky */
.group-title{
  position: sticky;
  top: .25rem;
  z-index: 2;
  background: var(--brand);
  color:#fff;
  padding:.45rem .9rem;
  border-radius: 999px;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow: 0 4px 12px rgba(201,25,25,.18);
}

/* Kafelki modyfikacji – hover/checked/disabled */
.mod-card{
  border-radius: 1rem !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: linear-gradient(180deg,#fff, #fafafa);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.mod-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.18) !important;
}
.btn-check:checked + .mod-card{
  background: linear-gradient(180deg, #fff, #ffecec);
  border-color: var(--brand)!important;
  box-shadow: 0 6px 18px rgba(201,25,25,.18);
}
.btn-check:checked + .mod-card::after{
  content:"\f00c"; /* Font Awesome check */
  font: var(--fa-font-solid);
  color: var(--brand);
  margin-left:.5rem;
  float: right;
}

/* Tooltip lekko mniej krzykliwy */
.tooltip .tooltip-inner{
  font-size:.85rem;
  padding:.35rem .5rem;
  border-radius:.5rem;
}

/* Sekcja „Uwagi” + licznik */
#notes{
  min-height: 110px;
}
/* Jasny motyw: delikatnie rozjaśnij pole przy fokusie */
:root:not([data-bs-theme="dark"]) #notes:focus {
  background:#fffaf9;
}

/* Ciemny motyw: zachowaj ciemne tło i jasny tekst */
:root[data-bs-theme="dark"] #notes:focus {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Stage1 – podbicie kolumny „Δ Zmiana” */
#stage1Modal .table td:last-child{
  font-weight:700;
}

/* Ogólne spacingi */
.row.g-3 > [class^="col-"] .form-label{ margin-bottom:.35rem; }
.form-text{ color:#6c757d; }

/* Baaardzo subtelny divider pod zestawami pól */
.card-body .row.g-3 + .row.g-3{
  border-top: 1px dashed rgba(0,0,0,.08);
  margin-top: 1rem;
  padding-top: 1rem;
}

/* Dark mode (jeśli używasz prefers-color-scheme) */
@media (prefers-color-scheme: dark){
  .card{ border-color: rgba(255,255,255,.08); }
  .form-control, .form-select{
    background:#111418;
    color:#e6e6e6;
    border-color: rgba(255,255,255,.14);
  }
  .form-control:focus, .form-select:focus{
    box-shadow: 0 0 0 .2rem rgba(201,25,25,.28);
  }
  .input-group-text{ background:#0f1317; border-color: rgba(255,255,255,.12); }
  .mod-card{
    background: linear-gradient(180deg,#14181d, #12161b) !important;
    border-color: rgba(255,255,255,.08)!important;
    color:#e6e6e6;
  }
  .btn-check:checked + .mod-card{
    background: linear-gradient(180deg, #181c21, #171b20) !important;
  }
  #title[readonly]{ background:#12161b; }
  .group-title{ box-shadow: 0 6px 16px rgba(201,25,25,.28); }
}

/* Prefer-reduced-motion – mniej animacji gdy użytkownik woli statycznie */
@media (prefers-reduced-motion: reduce){
  *{ transition:none!important; }
}

.pulse-btn {
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  border-radius: 10px;
  box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.6);
  animation: pulse 2s infinite;
  transition: transform 0.2s ease;
}

.pulse-btn:hover {
  transform: scale(1.05);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.6);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(25, 135, 84, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
  }
}
/* --- Dark mode wymuszony przez przełącznik strony --- */
:root[data-bs-theme="dark"] #title[readonly]{
  background:#131a27;
  color:#e8ecf4;
  border-color:#2a3349;
  opacity:.95; /* zostaw jeśli chcesz efekt "readonly" */
}

/* ciemne tło dla ikonki w polu szukajki modyfikacji */
:root[data-bs-theme="dark"] .input-group-text{
  background:#0f1317;
  border-color:#2a3342;
}

/* kafelki modyfikacji */
:root[data-bs-theme="dark"] .mod-card{
  background: linear-gradient(180deg,#14181d,#12161b) !important;
  border-color: rgba(255,255,255,.08) !important;
  color:#e6e6e6;
}
:root[data-bs-theme="dark"] .mod-card:hover{
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.18) !important;
}
:root[data-bs-theme="dark"] .btn-check:checked + .mod-card{
  background: linear-gradient(180deg,#1a2029,#181e27) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 6px 18px rgba(201,25,25,.22);
}