: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; }

/* 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; }

/* ===========================
   THEME: RETRO 2010s (global)
   Włącz przez <body class="theme-retro">
   =========================== */
.theme-retro{
  --retro-header-top:#f2efe8;
  --retro-header-bot:#e7e2d7;
  --retro-border:#cfc9bd;
  --retro-border-strong:#8b806d;
  --retro-panel:#f8f6f1;
  --retro-text:#5a5142;
  --retro-muted:#6d6658;
  --retro-link:#7b7261;
  --retro-link-hover:#5a5142;
  --retro-pill-top:#b9ad97;
  --retro-pill-bot:#9c907a;

  /* tło strony */
  --retro-body-bg: #ece8df;
}

/* BODY */
.theme-retro body{
  background: var(--retro-body-bg) url("../img/paper-noise.png") repeat !important;
  color: var(--retro-text);
}

/* NAVBAR (spójny z loginem) */
.theme-retro .navbar{
  background: linear-gradient(var(--retro-header-top), var(--retro-header-bot)) !important;
  border-bottom:1px solid var(--retro-border) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.06) !important;
}
.theme-retro .navbar .navbar-brand,
.theme-retro .navbar .navbar-text{ color: var(--retro-text) !important; text-shadow: 0 1px 0 #fff; }
.theme-retro .navbar .nav-link.nav-pill{
  padding:.45rem .85rem; border-radius:999px; border:1px solid transparent;
  color: var(--retro-text);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  transition: .15s ease-in-out;
}
.theme-retro .navbar .nav-link.nav-pill:hover{ background: rgba(255,255,255,.4); color: var(--retro-link-hover); transform: translateY(-1px); }
.theme-retro .navbar .nav-link.nav-pill.active{
  background: linear-gradient(var(--retro-pill-top), var(--retro-pill-bot));
  color:#fff !important;
  border-color: var(--retro-border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 rgba(0,0,0,.05);
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

/* KARTY / BLOKI */
.theme-retro .card{
  background: var(--retro-panel);
  border: 1px solid var(--retro-border);
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
}
.theme-retro .card .card-header{
  background: linear-gradient(var(--retro-header-top), var(--retro-header-bot));
  border-bottom: 1px solid var(--retro-border);
  color: var(--retro-text);
  text-shadow: 0 1px 0 #fff;
}

/* PRZYCISKI */
.theme-retro .btn-brand,
.theme-retro .btn-retro,
.theme-retro .btn-primary{
  border: 1px solid var(--retro-border-strong) !important;
  background: linear-gradient(var(--retro-pill-top), var(--retro-pill-bot)) !important;
  color:#fff !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  border-radius:4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 rgba(0,0,0,.05);
}
.theme-retro .btn-brand:hover,
.theme-retro .btn-retro:hover,
.theme-retro .btn-primary:hover{ filter:brightness(1.03); }
.theme-retro .btn-outline-secondary,
.theme-retro .btn-retro-outline{
  border:1px solid var(--retro-border) !important;
  background: rgba(255,255,255,.5) !important;
  color: var(--retro-text) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* POLA FORMULARZY */
.theme-retro .form-label{ font-weight:600; color:#5b5446; font-size:.925rem; }
.theme-retro .form-control,
.theme-retro .form-select{
  border: 1px solid #bdb7aa !important;
  border-radius: 4px !important;
  background: #fdfcf9 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
  color: var(--retro-text);
}
.theme-retro .form-control:focus,
.theme-retro .form-select:focus{
  border-color: #9e9685 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08), 0 0 0 3px rgba(158,150,133,.2) !important;
  background: #fff !important;
}

/* LINKI / TEKSTY POMOCNICZE */
.theme-retro a{ color: var(--retro-link); }
.theme-retro a:hover{ color: var(--retro-link-hover); }
.theme-retro .text-muted{ color: var(--retro-muted) !important; }

/* BADGE (w nav i kartach) */
.theme-retro .badge{ box-shadow: 0 1px 0 rgba(0,0,0,.05); border-radius: 999px; }

/* SEPARATORY */
.theme-retro hr{ border-color:#d6d0c5; opacity:.9; }

/* TABELA – delikatny header */
.theme-retro table thead th{
  background: linear-gradient(var(--retro-header-top), var(--retro-header-bot));
  color: var(--retro-text);
  border-bottom: 1px solid var(--retro-border) !important;
}

/* HERO / jasne karty promocyjne */
.theme-retro .hero-card{
  background: linear-gradient(135deg, #fff, #f6f2ea) !important;
}

/* CHIP użytkownika */
.theme-retro .user-chip{
  background: rgba(255,255,255,.5);
  border:1px solid var(--retro-border);
  border-radius:999px;
  color: var(--retro-text);
}

/* „lift” nawigacji zostaje, ale lekko cichszy */
.theme-retro .nav-lift{
  box-shadow: 0 4px 14px rgba(14,16,26,.06)!important;
  border-bottom:1px solid var(--retro-border)!important;
}
/* BODY: poprawny selektor + pewna ścieżka do tła */
body.theme-retro{
  background: #ece8df url("/assets/img/paper-noise.png") repeat fixed !important;
  color:#5a5142;
}

/* Jeśli wolisz klasę na <html> zamiast na <body> */
html.theme-retro body{
  background: #ece8df url("/assets/img/paper-noise.png") repeat fixed !important;
  color:#5a5142;
}

/* Utility, które potrafią „wybielić” tło – wyciszamy je globalnie przy motywie */
body.theme-retro .bg-white,
body.theme-retro .bg-light{
  background-color: transparent !important;
}

/* Mała, spokojna etykieta przed chipem/badge'em */
.label-pill{
  display:inline-block;
  padding:.15rem .45rem;
  font-size:.78rem;
  line-height:1;
  color:#6d6658;           /* dopasowane do retro */
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  white-space:nowrap;
}


/* ===== High-contrast MOD button (blue) ===== */
.btn-mod{
  background: #0d6efd;                 /* bootstrap blue */
  border: 1px solid #0b5ed7;
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  border-radius: .5rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 2px 0 rgba(0,0,0,.05);
}
.btn-mod:hover{
  filter: brightness(1.05);
}
.btn-mod:focus{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}
.btn-mod:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.25);
}

/* Dark theme wariant */
:root[data-bs-theme="dark"] .btn-mod{
  background: #1d6ed8;
  border-color:#1452a2;
  color:#fff !important;
  text-shadow: none;
}


#ticketsGrid .card-title{
  font-size:1.05rem;
}
#ticketsGrid .badge.bg-danger{
  background:#dc3545 !important;
}
#ticketsGrid .badge.bg-success{
  background:#198754 !important;
}
/* niebieski MOD button, jak ustalaliśmy */
.btn-mod{
  background:#0d6efd;
  border:1px solid #0b5ed7;
  color:#fff !important;
}
.btn-mod:hover{filter:brightness(1.05);}

/* =====================================
   PURE WHITE THEME (przywrócenie białego)
   ===================================== */
body {
  background: #ffffff !important;   /* całe tło białe */
  color: #212529;                   /* normalny ciemny tekst */
}

/* NAVBAR jasny */
.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e5e5 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.05) !important;
}

/* KARTY / BLOKI */
.card {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

/* HERO */
.hero-card {
  background: #ffffff !important;
  border: 1px solid #e5e5e5;
}

/* FORMULARZE */
.form-control,
.form-select {
  background: #ffffff !important;
  border: 1px solid #ced4da !important;
  color: #212529 !important;
}
.form-control:focus,
.form-select:focus {
  background: #ffffff !important;
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25) !important;
}

/* CHIP / BADGE */
.user-chip {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  color: #212529 !important;
}
.badge {
  background: #f8f9fa;
  color: #212529;
}
/* w app.css (opcjonalnie) */
#announcementModal .btn-primary{
  font-weight:700;
  padding:.6rem 1.2rem;
  border-radius:.6rem;
}
#announcementModal .modal-content{
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.2);
}