/* Minimalistyczny CSS – bez bibliotek (v4 – zielona kolorystyka) */

:root{
  --bg: #f4f7f5;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;

  --green: #16a34a;
  --green-2: #15803d;

  --blue: #2563eb;
  --blue-2: #1d4ed8;

  --yellow: #f59e0b;
  --yellow-2: #d97706;

  --primary: var(--green);
  --primary-2: var(--green-2);

  --danger: #b91c1c;
  --danger-2: #991b1b;

  --shadow: 0 1px 2px rgba(15, 23, 42, .06);
  --radius: 12px;
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  /* zabezpieczenie przed przypadkowym poziomym "rozjeżdżaniem" na mobile */
  overflow-x: hidden;
}

a{ color: var(--primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

.app{
  min-height: 100vh;
  display:flex;
  flex-direction: column;
}

.topbar{
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow);
}

.brand a{
  font-weight: 1000;
  letter-spacing: .2px;
  color: var(--primary);
  text-decoration:none;
}

.topbar-right{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}

.user-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.content{
  display:flex;
  gap: 16px;
  padding: 16px;
  flex: 1 1 auto;
}

.sidebar{
  width: 220px;
  flex: 0 0 auto;
}

.menu{
  list-style: none;
  margin:0;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.menu li a{
  display:block;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
}

.menu li:last-child a{ border-bottom:0; }

.menu li a:hover{
  background: rgba(22,163,74,.08);
  text-decoration:none;
}


.menu li a.active{
  background: rgba(22,163,74,.14);
  position: relative;
}

.menu li a.active::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary);
}

.menu-group summary.active{
  background: rgba(22,163,74,.12);
}


.main{
  flex: 1 1 auto;
  min-width: 0;
}

h1{
  margin-top:0;
  font-size: 22px;
}

h2{
  font-size: 18px;
  margin-top: 22px;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}

.grid-2{
  display:grid;
  /* minmax(0,1fr) zapobiega "rozjeżdżaniu" layoutu na wąskich ekranach */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 560px){
  .grid-2{ grid-template-columns: 1fr; }
}

.muted{ color: var(--muted); }
.small{ font-size: 13px; }

.flash{
  border-radius: var(--radius);
  padding: 12px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 700;
}

.flash-success{
  border-color: rgba(22,163,74,.30);
  background: rgba(22,163,74,.10);
}

.flash-error{
  border-color: rgba(185,28,28,.30);
  background: rgba(185,28,28,.10);
}

.flash-info{
  border-color: rgba(37,99,235,.30);
  background: rgba(37,99,235,.08);
}

.form .field{
  display:flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

label{
  font-weight: 800;
  font-size: 14px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea{
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 10px;
  font-size: 14px;
  background: #fff;
}

textarea{ min-height: 90px; resize: vertical; }

/* Form controls wewnątrz pól formularza zawsze mają trzymać się szerokości kontenera */
.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea{
  width: 100%;
  min-width: 0;
}

/* iOS Safari: zapobiega automatycznemu zoomowi na inputach (font-size < 16px) */
@media (max-width: 560px){
  .field input[type="text"],
  .field input[type="password"],
  .field input[type="email"],
  .field input[type="number"],
  .field input[type="date"],
  .field select,
  .field textarea{
    font-size: 16px;
  }
}

/* Touch devices (np. iOS Safari): font-size >= 16px zapobiega zoomowi i "rozjeżdżaniu" widoku przy focusie
   (działa także w orientacji poziomej, gdzie szerokość > 560px). */
@media (hover: none) and (pointer: coarse){
  .field input[type="text"],
  .field input[type="password"],
  .field input[type="email"],
  .field input[type="number"],
  .field input[type="date"],
  .field select,
  .field textarea{
    font-size: 16px;
  }
}

.actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;
}

.btn{
  appearance: none;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 900;
  font-size: 14px;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn:hover{ background: var(--primary-2); border-color: var(--primary-2); text-decoration:none; }

.btn-ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-ghost:hover{
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.btn-danger{
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn-danger:hover{
  background: var(--danger-2);
  border-color: var(--danger-2);
}

.btn-blue{
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.btn-blue:hover{
  background: var(--blue-2);
  border-color: var(--blue-2);
}

.btn-yellow{
  background: var(--yellow);
  border-color: var(--yellow);
  color: #111827;
}

.btn-yellow:hover{
  background: var(--yellow-2);
  border-color: var(--yellow-2);
  color: #111827;
}

.btn-green{
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.btn-green:hover{
  background: var(--green-2);
  border-color: var(--green-2);
}

.btn-filter{
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
}

.btn-filter.active{
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}

.table-wrap{
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

table{
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

th, td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

th{
  background: #f8fafc;
  font-weight: 900;
  white-space: nowrap;
}

tr:last-child td{ border-bottom: 0; }

.badge{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  background: #fafafa;
  color: var(--muted);
  font-weight: 800;
}


.count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.20);
  color: inherit;
}

.btn-yellow .count{
  border-color: rgba(17,24,39,.25);
  background: rgba(17,24,39,.08);
}

.kpi{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.kpi .item{
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.kpi .item .value{
  font-size: 20px;
  font-weight: 1000;
}

.footer{
  border-top: 1px solid var(--border);
  background: var(--card);
  padding: 12px 16px;
}

.footer .footer-inner{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer .footer-inner a{
  font-weight: 900;
}

/* W stopce linki do dokumentów prawnych mają być mniej "krzykliwe" */
.footer .footer-links a{
  color: var(--muted);
  font-weight: 800;
}

.footer .footer-links a:hover{
  color: var(--text);
}

/* --- Kafelki / skróty --- */

.tiles{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.tile{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.tile:hover{
  border-color: rgba(22,163,74,.35);
}

.tile .title{
  font-weight: 1000;
  margin:0;
  font-size: 15px;
  line-height: 1.3;
}

.tile .meta{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

/* --- Ogłoszenia / statusy / tagi --- */

.tag{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 900;
  background: #fff;
}

.tag-pilne{
  border-color: rgba(185,28,28,.55);
  background: rgba(185,28,28,.14);
  color: var(--danger);
}

.tag-wazne{
  border-color: rgba(180,83,9,.55);
  background: rgba(180,83,9,.14);
  color: #b45309;
}

.tag-informacja{
  border-color: rgba(37,99,235,.55);
  background: rgba(37,99,235,.14);
  color: var(--blue-2);
}

.tag-ogolne{
  border-color: rgba(107,114,128,.55);
  background: rgba(107,114,128,.14);
  color: #374151;
}

.status{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 1000;
  background: #fafafa;
  color: var(--muted);
}

.status-open{
  border-color: rgba(37,99,235,.25);
  background: rgba(37,99,235,.08);
  color: var(--blue);
}

.status-in_progress{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.12);
  color: #92400e;
}

.status-closed{
  border-color: rgba(22,163,74,.25);
  background: rgba(22,163,74,.10);
  color: var(--green);
}



.status-active{
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.12);
  color: var(--green);
}

.status-archived{
  border-color: rgba(185,28,28,.35);
  background: rgba(185,28,28,.12);
  color: var(--danger);
}
/* --- Chat --- */

.chat{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.chat-row{
  display:flex;
}

.chat-row.me{
  justify-content: flex-end;
}

.chat-bubble{
  max-width: 78%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  box-shadow: var(--shadow);
}

.chat-row.me .chat-bubble{
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.25);
}

.chat-meta{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 6px;
}

.chat-text{
  font-size: 14px;
  white-space: pre-wrap;
}

/* --- Prose --- */

.prose p{
  margin-top: 0;
}

@media (max-width: 900px){
  .content{ flex-direction: column; }
  .sidebar{ width: 100%; }
  table{ min-width: 800px; }
  .kpi{ grid-template-columns: 1fr; }
  .chat-bubble{ max-width: 100%; }
}


/* Menu grupy (Rozliczenia/Zarząd) */
.menu-group details{ padding:0; margin:0; }
.menu-group summary{
  cursor:pointer;
  padding: 12px 12px;
  font-weight: 900;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  user-select:none;
}
.menu-group summary::-webkit-details-marker{ display:none; }
.menu-group details[open] summary{ background: rgba(22,163,74,.06); }
.menu.menu-sub{
  border:0;
  border-radius:0;
  box-shadow:none;
  background: transparent;
}
.menu.menu-sub li a{
  font-weight: 800;
  font-size: 13px;
  padding: 10px 12px 10px 20px;
}


/* Edytor dokumentów */
.editor-wrap{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--card);
}
.editor-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(22,163,74,.04);
}
.btn.btn-xs{ padding: 6px 10px; font-size: 12px; }
.sep{ width:1px; height:24px; background: var(--border); margin: 0 6px; }
.input-sm{ padding:6px 8px; border:1px solid var(--border); border-radius: 10px; background:#fff; }
.editor-vars{ padding: 10px 10px 0; }
.vars-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:10px; }
.vars{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chip{
  border: 1px solid rgba(22,163,74,.25);
  background: rgba(22,163,74,.08);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 12px;
  cursor:pointer;
}
.chip:hover{ background: rgba(22,163,74,.14); }
.editor{
  min-height: 260px;
  padding: 14px;
  outline:none;
}
.doc-preview{
  background:#fff;
  color:#111;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.radio-list label{ display:block; margin: 6px 0; font-weight:800; }


/* ===== ROD v6: „chipy” do wyboru wielu pozycji (bez CTRL) ===== */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.chip input:checked + span {
  border-color: rgba(22, 163, 74, 0.55);
  background: rgba(22, 163, 74, 0.12);
}

.chip small {
  font-weight: 600;
  color: var(--muted);
}

.inline-help {
  font-size: 13px;
  color: var(--muted);
}

.file-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
}

.file-picker:focus-within {
  border-color: rgba(22,163,74,.45);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}

.file-picker-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.file-picker-btn {
  white-space: nowrap;
  pointer-events: none;
}

.file-picker-name {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  word-break: break-word;
  pointer-events: none;
}



/* ===== ROD v6: warianty badge ===== */
.badge-success{
  border-color: rgba(22,163,74,.45);
  background: rgba(22,163,74,.12);
  color: #166534;
}
.badge-warning{
  border-color: rgba(234,179,8,.45);
  background: rgba(234,179,8,.14);
  color: #854d0e;
}
.badge-danger{
  border-color: rgba(220,38,38,.45);
  background: rgba(220,38,38,.12);
  color: #991b1b;
}


/* ===== ROD v6: dodatkowe siatki ===== */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr; }
}


/* ============================================================
   Dokumenty prawne (Regulamin / Cookies) – prosta typografia
   ============================================================ */
.legal{
  max-width: 980px;
}
.legal-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.prose{
  line-height: 1.65;
}
.prose h2{
  margin-top: 18px;
  margin-bottom: 8px;
}
.prose ul, .prose ol{
  padding-left: 18px;
}
.prose li{
  margin: 6px 0;
}
.prose code{
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.08);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.95em;
}


/* ============================================================
   Cookies – banner + modal (bez zewnętrznych bibliotek)
   ============================================================ */
.cookie-consent{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px;
  z-index: 1000;
  background: rgba(244,247,245,.85);
  backdrop-filter: blur(8px);
}
.has-cookie-banner{
  padding-bottom: 140px;
}
@media (max-width: 560px){
  .has-cookie-banner{ padding-bottom: 200px; }
}
.cookie-consent[hidden]{
  display: none;
}
.cookie-consent__inner{
  max-width: 1080px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(15,23,42,.12);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.cookie-consent__text{
  flex: 1;
  min-width: 240px;
}
.cookie-consent__actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cookie-consent__actions .btn{
  white-space: nowrap;
}

.cookie-modal{
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cookie-modal[hidden]{
  display: none;
}
.cookie-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.46);
}
.cookie-modal__dialog{
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: min(80vh, 720px);
  overflow: auto;
}
.cookie-rows{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0;
}
.cookie-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.cookie-row .desc{
  flex: 1;
}

/* Switch */
.switch{
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}
.switch input{
  opacity: 0;
  width: 0;
  height: 0;
}
.slider{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(148,163,184,.35);
  border: 1px solid rgba(148,163,184,.55);
  transition: .2s;
}
.slider:before{
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  top: 2px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(15,23,42,.18);
  transition: .2s;
}
.switch input:checked + .slider{
  background: rgba(22,163,74,.22);
  border-color: rgba(22,163,74,.45);
}
.switch input:checked + .slider:before{
  transform: translateX(18px);
}
.switch input:focus + .slider{
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}