/* Moduł Zwierzęta: ten sam system co panel (DESIGN.md): papier i tusz, arkusz z liniami, r=6px, ikony liniowe.
   Statusy kolorami semantycznymi z panel.css (po terminie = czerwień, blisko terminu = bursztyn, karencja = czerwony pasek),
   mleko w błękicie danych. Kolor zawsze z ikoną i słowem. Bez atrybutów style (CSP). */

/* liczby stada */
.zw-liczby-sekcja { margin-bottom: 28px; }
.zw-liczby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
@media (min-width: 760px) { .zw-liczby { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.zw-liczba { min-width: 0; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.zw-liczba:nth-child(3n) { border-right: 0; }
@media (min-width: 760px) { .zw-liczba:nth-child(3n) { border-right: 1px solid var(--rule); } .zw-liczba:last-child { border-right: 0; } }
.zw-liczba-b {
  display: grid; align-content: start; width: 100%; height: 100%; padding: 12px 12px 12px 14px; border: 0; background: none;
  text-align: left; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease);
}
.zw-liczba:first-child .zw-liczba-b { padding-left: 2px; }
.zw-liczba-b:hover { background: var(--white); }
.zw-liczba-b[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.zw-liczba-b[aria-pressed="true"] .zw-liczba-e { color: var(--on-ink-mute); }
.zw-liczba:first-child .zw-liczba-b[aria-pressed="true"] { padding-left: 14px; }
.zw-liczba-w { font-size: var(--t-liczba); font-weight: 740; font-stretch: 116%; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.zw-liczba-e { margin-top: 8px; color: var(--mute); font-size: .875rem; line-height: 1.3; }
@media (max-width: 420px) { .zw-liczba-b { padding: 14px 8px 14px 10px; } .zw-liczba-e { font-size: .8125rem; } }

/* do zrobienia */
.zw-sekcja { margin-bottom: 28px; }
.zw-dz { border-top: 1px solid var(--rule); }
.zw-dz-w {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "ik t ile" "ik t akcja"; gap: 2px 14px; align-items: center;
  padding: 9px 10px 9px 4px; border-bottom: 1px solid var(--rule);
}
@media (max-width: 759px) { .zw-dz-w { grid-template-areas: "ik t t" "ik ile akcja"; gap: 6px 14px; } .zw-dz-ile { justify-self: start; } }
@media (min-width: 760px) { .zw-dz-w { grid-template-columns: 24px minmax(0, 1fr) auto auto; grid-template-areas: "ik t ile akcja"; } }
.zw-dz-ik { grid-area: ik; font-size: 1.375rem; align-self: start; margin-top: 2px; }
.zw-dz-t { grid-area: t; min-width: 0; display: grid; line-height: 1.35; text-decoration: none; }
.zw-dz-t b { font-weight: 640; overflow-wrap: anywhere; }
.zw-dz-t small { color: var(--mute); font-size: .875rem; }
a.zw-dz-t:hover b { text-decoration: underline; text-underline-offset: .22em; }
.zw-dz-ile { grid-area: ile; justify-self: end; font-weight: 640; font-size: .9375rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zw-dz-w > .btn { grid-area: akcja; justify-self: end; }
.zw-dz-w.zw-stop { background: var(--stop-tlo); box-shadow: inset 3px 0 0 var(--stop-znak); padding-left: 12px; }
.zw-dz-w.zw-stop .zw-dz-ile, .zw-dz-w.zw-stop .zw-dz-ik { color: var(--stop); }
.zw-dz-w.zw-uwaga { box-shadow: inset 3px 0 0 var(--uwaga-znak); background: var(--uwaga-tlo); padding-left: 12px; }
.zw-dz-w.zw-uwaga .zw-dz-ile, .zw-dz-w.zw-uwaga .zw-dz-ik { color: var(--uwaga); }
.zw-dz-w.zw-karencja .zw-dz-ik, .zw-dz-w.zw-karencja .zw-dz-ile { color: var(--stop); }
.zw-dz-w.zw-karencja { box-shadow: inset 3px 0 0 var(--stop-znak); padding-left: 12px; background: var(--white); }
.zw-sekcja .link-btn { margin-top: 6px; }
.pulpit-zwierzeta { margin-top: 44px; }

/* zakładki modułu */
.zw-pasek { margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.zw-pasek::-webkit-scrollbar { display: none; }
.zw-zakladki .ph { font-size: 1.0625rem; }
@media (max-width: 420px) { .zw-zakladki { display: flex; width: 100%; } .zw-zakladki .segment-btn { flex: 1; justify-content: center; padding: 0 6px; gap: 5px; font-size: .875rem; } }

/* stado: filtry i lista */
.zw-filtry { align-items: stretch; }
.zw-szukaj-w { position: relative; flex: 1 1 260px; max-width: 420px; min-width: 0; }
.zw-szukaj-w .ph { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-2); font-size: 1.0625rem; pointer-events: none; }
.zw-szukaj-w input.zw-szukaj:not([type=checkbox]) { min-height: 40px; padding-left: 38px; font-size: .9375rem; }
.zw-wiersz {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto 18px; grid-template-areas: "nazwa grupa znaczniki strz"; gap: 6px 16px;
  align-items: center; padding: 13px 4px; text-decoration: none; transition: background-color .15s;
}
.zw-wiersz:hover { background: var(--white); }
.zw-wiersz:hover .zw-w-nazwa b { text-decoration: underline; text-underline-offset: .22em; }
.zw-w-nazwa { grid-area: nazwa; min-width: 0; display: grid; line-height: 1.3; }
.zw-w-nazwa b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zw-w-nazwa small, .zw-w-grupa small { color: var(--mute); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.zw-w-grupa { grid-area: grupa; min-width: 0; display: grid; line-height: 1.3; font-size: .9375rem; }
.zw-w-znaczniki { grid-area: znaczniki; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.zw-w-strz { grid-area: strz; color: var(--mute); }
.zw-znacznik {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--rule-strong); border-radius: 4px;
  font-size: .8125rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.zw-znacznik .ph { font-size: .9375rem; }
.zw-znacznik-ink { background: var(--stop); color: #fff; border-color: var(--stop); }
@media (max-width: 640px) {
  .zw-wiersz { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nazwa grupa" "znaczniki znaczniki"; }
  .zw-w-grupa { text-align: right; }
  .zw-w-znaczniki { justify-content: flex-start; }
  .zw-w-znaczniki:empty { display: none; }
  .zw-w-strz { display: none; }
}

/* siedziby stad */
.zw-siedziby { margin-top: 48px; padding-top: 4px; }
.zw-sd-w { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 2px; }
.zw-sd-w .ph { font-size: 1.25rem; }
.zw-sd-w b { display: block; font-weight: 640; font-variant-numeric: tabular-nums; }
.zw-sd-w small { color: var(--mute); font-size: .875rem; }
.zw-sd-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.zw-sd-form input:not([type=checkbox]) { flex: 1 1 200px; min-height: 40px; font-size: .9375rem; }
.zw-sd-form .form-blad { flex-basis: 100%; }

/* rozród: kalendarz i agenda */
.zw-rozrod { display: grid; gap: 40px; }
@media (min-width: 1100px) { .zw-rozrod { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.kal { display: grid; gap: 24px; }
@media (min-width: 700px) and (max-width: 1099px) { .kal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kal-t { font-size: .9375rem; font-weight: 680; font-stretch: 110%; margin-bottom: 8px; }
.kal-siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); }
.kal-dt { padding: 6px 0; text-align: center; font-size: .8125rem; color: var(--mute); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.kal-d {
  position: relative; display: grid; place-items: center; min-height: 40px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-size: .875rem; font-variant-numeric: tabular-nums; background: var(--white);
}
.kal-pusty { background: transparent; }
.kal-dzis { box-shadow: inset 0 0 0 2px var(--ink); font-weight: 720; }
.kal-wyc { background: var(--info); color: #fff; font-weight: 680; }
.kal-zas::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 6px; height: 2px; background: currentColor; }
.kal-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: .8125rem; color: var(--mute); }
.kal-l { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--white); margin-left: 6px; }
.kal-l:first-child { margin-left: 0; }
.kal-l-wyc { background: var(--info); border-color: var(--info); }
.kal-l-zas { background: linear-gradient(var(--ink), var(--ink)) center 9px / 8px 2px no-repeat, var(--white); }
.kal-l-dzis { box-shadow: inset 0 0 0 2px var(--ink); }
.zw-ag-w { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 2px; text-decoration: none; }
.zw-ag-w:hover .zw-ag-t b { text-decoration: underline; text-underline-offset: .22em; }
.zw-ag-d { display: grid; justify-items: center; line-height: 1.1; padding: 6px 0; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--white); }
.zw-ag-d b { font-size: 1.25rem; font-weight: 740; font-stretch: 116%; font-variant-numeric: tabular-nums; }
.zw-ag-d small { font-size: 12px; color: var(--mute); }
.zw-ag-t { min-width: 0; display: grid; line-height: 1.35; }
.zw-ag-t b { font-weight: 640; overflow-wrap: anywhere; }
.zw-ag-t small { color: var(--mute); font-size: .875rem; }
.zw-ag-w > *, .zw-od-w > * { grid-area: auto; }

/* leczenie */
.zw-lecz { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "d t k"; gap: 4px 14px; align-items: center; padding: 13px 4px; }
.zw-lecz-d { grid-area: d; font-weight: 650; font-variant-numeric: tabular-nums; }
.zw-lecz-t { grid-area: t; min-width: 0; display: grid; line-height: 1.35; text-decoration: none; }
.zw-lecz-t b { font-weight: 640; }
.zw-lecz-t small { color: var(--mute); font-size: .875rem; overflow-wrap: anywhere; }
.zw-lecz-t:hover b { text-decoration: underline; text-underline-offset: .22em; }
.zw-lecz-k { grid-area: k; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.zw-lecz-trwa { box-shadow: inset 3px 0 0 var(--uwaga-znak); padding-left: 12px; background: var(--white); }
@media (max-width: 640px) {
  .zw-lecz { grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "d t" ". k"; }
  .zw-lecz-k { justify-content: flex-start; }
}

/* mleko */
.zw-mleko { display: grid; gap: 40px; }
@media (min-width: 1100px) { .zw-mleko { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.zw-ml-liczby { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 4px 0 14px; color: var(--mute); font-size: .9375rem; }
.zw-ml-liczby b { color: var(--ink); font-size: 1.625rem; font-weight: 740; font-stretch: 118%; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.zw-wykres-w { border-top: 1px solid var(--ink); padding-top: 10px; }
.zw-wykres { display: block; width: 100%; height: auto; overflow: visible; }
.zw-w-slupek { fill: var(--d-blekit); }
.zw-w-slupek:hover { fill: var(--info); }
.zw-w-siatka { stroke: var(--rule); stroke-width: 1; }
.zw-w-srednia { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 4 4; }
.zw-w-odstawa { fill: var(--white); stroke: var(--ink); stroke-width: 1.4; }
.zw-w-os, .zw-w-pusto { fill: var(--mute); font: 500 12px var(--font); }
.zw-w-pusto { font-size: 14px; }
.zw-w-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: .8125rem; color: var(--mute); }
.zw-w-legenda span { display: inline-block; margin-left: 6px; }
.zw-w-legenda span:first-child { margin-left: 0; }
.zw-l-slupek { width: 8px; height: 12px; background: var(--d-blekit); border-radius: 1px; }
.zw-l-srednia { width: 16px; height: 0; border-top: 1.5px dashed var(--ink); }
.zw-l-odstawa { width: 8px; height: 8px; border: 1.5px solid var(--ink); border-radius: 50%; }
.zw-od-w { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 2px; }
.zw-od-w b { font-variant-numeric: tabular-nums; font-weight: 680; }

/* karta zwierzęcia (szuflada) */
.zw-karta-podpis { color: var(--ink-2); font-weight: 560; }
.zw-karta .komorki { background: var(--white); border: 1px solid var(--rule-strong); border-radius: var(--r); overflow: hidden; }
.zw-karta .komorki .kom:nth-last-child(-n+1) { border-bottom: 0; }
.zw-link { min-height: 0; font-weight: 600; text-align: left; }
.zw-karencje { margin-top: 14px; display: grid; gap: 8px; }
.zw-karencje li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: var(--r); background: var(--stop-tlo); box-shadow: inset 3px 0 0 var(--stop-znak); font-size: .9375rem; }
.zw-karencje .ph { font-size: 1.25rem; color: var(--stop); }
.zw-karencje small { display: block; color: var(--ink-2); font-size: .8125rem; margin-top: 2px; }
.zw-rozrod-stan { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--white); font-size: .9375rem; }
.zw-rozrod-stan .ph { font-size: 1.25rem; }
.zw-dz-karta { margin-top: 14px; }
.zw-szybkie { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); }
.zw-szybkie h3, .zw-potomstwo h3 { font-size: 1rem; font-weight: 680; font-stretch: 110%; margin-bottom: 12px; }
.zw-szybkie-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); width: 100%; }
.zw-szybkie-seg .segment-btn { justify-content: center; }
@media (max-width: 420px) { .zw-szybkie-seg .segment-btn { padding: 0 8px; gap: 5px; font-size: .875rem; } }
.zw-szybkie-form:not(:empty) { margin-top: 16px; }
.zw-potomstwo { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); }
.zw-potomki { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.zw-karta .historia li.zw-os-leczenie::before { background: var(--paper); border: 2px solid var(--ink); width: 12px; height: 12px; left: -6px; }
.zw-karta .historia li.zw-os-info::before { background: var(--rule-strong); }

/* karta wyniku agenta */
.karta-zwierze .karta-lista { padding: 10px 16px; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9375rem; }
.karta-zwierze .karta-lista a { font-weight: 600; }
.karta-zwierze .karta-uwagi-zw { color: var(--ink-2); font-size: .875rem; }
.karta-zwierze > .komorki:not(:last-child) .kom { border-bottom: 1px solid var(--rule); }
.karta-zwierze .karta-glowa { flex-wrap: wrap; }
.karta-zwierze .karta-tytul { flex: 1 1 220px; }
.zw-od-d { font-weight: 650; font-variant-numeric: tabular-nums; }